添加新的官网首页

src/student/home/components/TheHomeHeader/index.module.less

@@ -1,6 +1,6 @@
 .theHomeHeader {
-  position: sticky;
-  top: 0;
+  // position: sticky;
+  // top: 0;
   background-color: #fff;
   padding: 10px 14px;
   z-index: 100;

src/student/home/components/TheHomeHeader/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue'
+import { defineComponent, onMounted, ref } from 'vue'
 import styles from './index.module.less'
 
 import IconMall from '../../images/icon-mall.png'
@@ -6,11 +6,14 @@ import IconSearch from '../../images/icon-search.png'
 import IconScan from '../../images/icon-scan.png'
 import IconMessage from '../../images/icon-message.png'
 import { postMessage } from '@/helpers/native-message'
+import TheHomeHeader from '@/views/shop-mall/components/TheHomeHeader'
+import { useRect } from '@vant/use'
+import ColSticky from '@/components/col-sticky'
 
 export default defineComponent({
   name: 'TheHomeHeader',
   emits: ['cart', 'more', 'search'],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     const navBarHeight = ref(sessionStorage.getItem('navHeight'))
     const init = () => {
       // 设置是否显示导航栏 0 显示 1 不显示
@@ -27,32 +30,42 @@ export default defineComponent({
       })
     }
     init()
+    const homeHeader = ref<any>(null)
 
+    const getHeadeHeight = () => {
+      const { height } = useRect(homeHeader.value)
+      return height
+    }
+    expose({
+      getHeadeHeight
+    })
     return () => (
-      <div class={styles.theHomeHeader}>
-        <div
-          style={{ height: navBarHeight.value + 'px', background: '#fff' }}
-        ></div>
-        <div class={styles.content}>
-          <img class={styles.mall} src={IconMall} />
-          <div class={styles.searchBox} onClick={() => emit('search')}>
-            <img class={styles.iconSearch} src={IconSearch} />
-            <span>搜索你喜欢的内容</span>
-          </div>
+      <ColSticky position="top">
+        <div class={styles.theHomeHeader} ref={homeHeader}>
+          <div
+            style={{ height: navBarHeight.value + 'px', background: '#fff' }}
+          ></div>
+          <div class={styles.content}>
+            <img class={styles.mall} src={IconMall} />
+            <div class={styles.searchBox} onClick={() => emit('search')}>
+              <img class={styles.iconSearch} src={IconSearch} />
+              <span>搜索你喜欢的内容</span>
+            </div>
 
-          <img
-            class={styles.cart}
-            src={IconScan}
-            onClick={() => emit('cart')}
-          />
+            <img
+              class={styles.cart}
+              src={IconScan}
+              onClick={() => emit('cart')}
+            />
 
-          <img
-            class={styles.cart}
-            src={IconMessage}
-            onClick={() => emit('more')}
-          />
+            <img
+              class={styles.cart}
+              src={IconMessage}
+              onClick={() => emit('more')}
+            />
+          </div>
         </div>
-      </div>
+      </ColSticky>
     )
   }
 })

src/student/home/components/TheSong/index.tsx

@@ -13,7 +13,8 @@ export default defineComponent({
       default: () => []
     }
   },
-  setup(props) {
+  emits: ['detail'],
+  setup(props, { emit }) {
     const router = useRouter()
     const colors: any = {
       FREE: {
@@ -32,12 +33,7 @@ export default defineComponent({
     return () => (
       <div class={styles.theSong}>
         {props.list.map((n: any) => (
-          <div
-            class={styles.item}
-            onClick={() =>
-              router.push({ path: '/musicDetail', query: { id: n.id } })
-            }
-          >
+          <div class={styles.item} onClick={() => emit('detail', n)}>
             <div class={styles.content}>
               <div class={styles.top}>
                 {n.exquisiteFlag === 1 && (

src/student/home/components/hot-album/index.tsx

@@ -4,6 +4,8 @@ import { defineComponent } from 'vue'
 import IconXin from '@/common/images/icon-xin.png'
 import IconXinActive from '@/common/images/icon-xin-active.png'
 import TheTitle from '../the-title'
+import { openDefaultWebView } from '@/state'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'hot-album',
@@ -14,13 +16,37 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const router = useRouter()
     return () => (
       <>
-        {props.album.length > 0 && <TheTitle title="热门曲谱" />}
+        {props.album.length > 0 && (
+          <TheTitle
+            title="热门专辑"
+            onDetail={() => {
+              const url = location.origin + location.pathname + '#/music-album'
+              openDefaultWebView(url, () => {
+                router.push('/music-album')
+              })
+            }}
+          />
+        )}
 
         <div class={styles.albumContainer}>
           {props.album.map((item: any) => (
-            <div class={styles.album} key={item.id} onClick={() => {}}>
+            <div
+              class={styles.album}
+              key={item.id}
+              onClick={() => {
+                const url =
+                  location.origin +
+                  location.pathname +
+                  '#/music-album-detail/' +
+                  item.id
+                openDefaultWebView(url, () => {
+                  router.push('/music-album-detail/' + item.id)
+                })
+              }}
+            >
               <div class={styles.main}>
                 {item.paymentType === 'CHARGE' && (
                   <span class={styles.albumType}>付费</span>

src/student/home/components/info-list/index.tsx

@@ -1,13 +1,17 @@
 import ColResult from '@/components/col-result'
 import request from '@/helpers/request'
+import { verifyUrl } from '@/helpers/toolsValidate'
 import { dateFormat } from '@/helpers/utils'
+import { openDefaultWebView } from '@/state'
 import { Cell, CellGroup, Image, List } from 'vant'
 import { defineComponent, reactive } from 'vue'
+import { useRouter } from 'vue-router'
 import styles from './index.module.less'
 
 export default defineComponent({
   name: 'info-list',
   setup() {
+    const router = useRouter()
     const params = reactive({
       platformType: 'STUDENT',
       type: '1',
@@ -58,7 +62,31 @@ export default defineComponent({
           >
             <CellGroup inset class={state.list.length > 0 && styles.cellGroup}>
               {state.list.map((item: any) => (
-                <Cell valueClass={styles.valueContent}>
+                <Cell
+                  valueClass={styles.valueContent}
+                  onClick={() => {
+                    let url =
+                      location.origin +
+                      location.pathname +
+                      '#/specialDetail?id=' +
+                      item.id
+
+                    if (verifyUrl(item.linkUrl)) {
+                      openDefaultWebView(item.linkUrl, () => {
+                        window.location.href = item.linkUrl
+                      })
+                    } else {
+                      openDefaultWebView(url, () => {
+                        router.push({
+                          path: '/specialDetail',
+                          query: {
+                            id: item.id
+                          }
+                        })
+                      })
+                    }
+                  }}
+                >
                   {{
                     icon: () => (
                       <Image src={item.coverImage} class={styles.infoImg} />

src/student/home/components/menu-list/index.tsx

@@ -1,3 +1,5 @@
+import { verifyUrl } from '@/helpers/toolsValidate'
+import { openDefaultWebView } from '@/state'
 import { Swipe, SwipeItem, Image } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
@@ -31,13 +33,11 @@ export default defineComponent({
               <div
                 class={styles.typeItem}
                 onClick={() => {
-                  // this.onOpenWebView(
-                  //   '/goodsList?' +
-                  //     'id=' +
-                  //     item.id +
-                  //     '&tag=' +
-                  //     encodeURIComponent(item.name)
-                  // )
+                  if (verifyUrl(item.linkUrl)) {
+                    openDefaultWebView(item.linkUrl, () => {
+                      window.location.href = item.linkUrl
+                    })
+                  }
                 }}
               >
                 <Image

src/student/home/components/music/index.module.less

@@ -34,10 +34,10 @@
 
 .hotMusic {
   // padding-bottom: 20px;
-  .swipeItem {
+  .swipeItem .swipeChild {
     padding-left: 14px;
   }
-  .swipeItem:last-child {
+  .swipeItem:last-child .swipeChild {
     padding-right: 14px;
   }
 }

src/student/home/components/music/index.tsx

@@ -4,6 +4,8 @@ import { defineComponent, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import TheSong from '../TheSong'
 import TheTitle from '../the-title'
+import { openDefaultWebView } from '@/state'
+import item from '@/views/coupons/item'
 
 export default defineComponent({
   name: 'music-list',
@@ -20,6 +22,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const router = useRouter()
     onMounted(() => {
       getWidth()
     })
@@ -35,13 +38,42 @@ export default defineComponent({
     }
     return () => (
       <>
-        {props.music.length > 0 && <TheTitle title={props.title} />}
+        {props.music.length > 0 && (
+          <TheTitle
+            title={props.title}
+            onDetail={() => {
+              const url = location.origin + location.pathname + '#/music-list'
+              openDefaultWebView(url, () => {
+                router.push('/music-list')
+              })
+            }}
+          />
+        )}
         <div class={styles.hotMusic}>
           {swipeShow.value && (
             <Swipe showIndicators={false} loop={false} width={swipeWidth.value}>
               {props.music.map((n: any) => (
                 <SwipeItem class={styles.swipeItem}>
-                  <TheSong list={n} />
+                  <div class={styles.swipeChild}>
+                    <TheSong
+                      list={n}
+                      onDetail={(item: any) => {
+                        const url =
+                          location.origin +
+                          location.pathname +
+                          '#/music-detail?id=' +
+                          item.id
+                        openDefaultWebView(url, () => {
+                          router.push({
+                            path: '/music-detail',
+                            query: {
+                              id: item.id
+                            }
+                          })
+                        })
+                      }}
+                    />
+                  </div>
                 </SwipeItem>
               ))}
             </Swipe>

src/student/home/components/recommend-sage/index.tsx

@@ -2,8 +2,10 @@ import { Button, Cell, Icon, Image, Toast } from 'vant'
 import styles from './index.module.less'
 import { defineComponent } from 'vue'
 import request from '@/helpers/request'
-import bars from '@common/svg/bars.svg'
+import bars from '../../images/bars.svg'
 import TheTitle from '../the-title'
+import { useRouter } from 'vue-router'
+import { openDefaultWebView } from '@/state'
 
 export default defineComponent({
   name: 'recommend-sage',
@@ -20,6 +22,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const router = useRouter()
     const onStart = async (item: any) => {
       // 关注与取消关注
       try {
@@ -39,11 +42,41 @@ export default defineComponent({
     }
     return () => (
       <>
-        {props.sage.length > 0 && <TheTitle title={props.title} />}
+        {props.sage.length > 0 && (
+          <TheTitle
+            title={props.title}
+            onDetail={() => {
+              const url =
+                location.origin + location.pathname + '#/teacherElegant'
+              openDefaultWebView(url, () => {
+                router.push('/teacherElegant')
+              })
+            }}
+          />
+        )}
 
         <div class={styles.sageContainer}>
           {props.sage.map((item: any) => (
-            <div class={styles.sage} key={item.id} onClick={() => {}}>
+            <div
+              class={styles.sage}
+              key={item.id}
+              onClick={() => {
+                // 是否要跳转到直播间
+                const url =
+                  location.origin +
+                  location.pathname +
+                  '#/teacherHome?teacherId=' +
+                  item.userId
+                openDefaultWebView(url, () => {
+                  router.push({
+                    path: '/teacherHome',
+                    query: {
+                      teacherId: item.userId
+                    }
+                  })
+                })
+              }}
+            >
               {item.living && <Image src={bars} class={styles.animation} />}
 
               <div class={styles.header}>

src/student/home/components/talent-style/index.module.less

@@ -1,13 +1,17 @@
 .style {
-  display: flex;
-  flex-flow: column wrap;
-  align-content: space-between;
   padding: 0 14px;
-  // column-count: 2;
-  // column-gap: 8px;
+}
+.lineContainer {
+  display: flex;
+  flex-flow: wrap;
+  justify-content: space-between;
+}
+.line {
+  width: 168px;
 }
 
 .styleItem {
+  position: relative;
   width: 168px;
   overflow: hidden;
   box-shadow: 0px 2px 10px 0px rgba(229, 229, 229, 0.1);
@@ -27,6 +31,44 @@
     }
   }
 
+  .iconVideoPlay {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 24px;
+    height: 24px;
+  }
+
+  .living {
+    position: absolute;
+    top: 15px;
+    right: 0;
+    line-height: 24px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 13px 0px 0px 13px;
+    display: flex;
+    align-items: center;
+    .animationContainer {
+      width: 24px;
+      height: 24px;
+      background: linear-gradient(180deg, #ff6e6e 0%, #ff3b3b 100%);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .animation {
+      width: 11px;
+      height: 10px;
+    }
+    span {
+      font-size: 12px;
+      color: #ffffff;
+      line-height: 17px;
+      padding: 0 7px 0 5px;
+    }
+  }
+
   .userInfo {
     padding: 14px 10px;
   }

src/student/home/components/talent-style/index.tsx

@@ -1,17 +1,19 @@
 import ColResult from '@/components/col-result'
 import request from '@/helpers/request'
-import { dateFormat } from '@/helpers/utils'
-import { Cell, CellGroup, Image, List } from 'vant'
+import { Image, List } from 'vant'
 import { defineComponent, reactive } from 'vue'
 import styles from './index.module.less'
+import bars from '../../images/bars2.svg'
+import iconVideoPlay from '../../images/icon_video_play.png'
+import { openDefaultWebView } from '@/state'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'talent-list',
   setup() {
+    const router = useRouter()
     const params = reactive({
       platformType: 'STUDENT',
-      // type: '1',
-      // clientType: 'STUDENT',
       page: 1,
       rows: 20
     })
@@ -56,57 +58,123 @@ export default defineComponent({
             class={styles.style}
             onLoad={getList}
           >
-            {state.list.map((item: any, index: number) => (
-              <>
-                {index % 2 === 0 ? (
-                  <div class={styles.line}>
-                    <div class={styles.styleItem}>
-                      <div class={styles.styleImg}>
-                        <Image
-                          src={item.cover}
-                          fit="cover"
-                          class={[styles.img, index === 0 && styles.first]}
-                        />
-                      </div>
-                      <div class={styles.userInfo}>
-                        <p class={styles.user}>
+            <div class={styles.lineContainer}>
+              <div class={styles.line}>
+                {state.list.map(
+                  (item: any, index: number) =>
+                    index % 2 === 0 && (
+                      <div
+                        class={styles.styleItem}
+                        onClick={() => {
+                          const url =
+                            location.origin +
+                            location.pathname +
+                            '#/teacherHome?teacherId=' +
+                            item.userId
+                          openDefaultWebView(url, () => {
+                            router.push({
+                              path: '/teacherHome',
+                              query: {
+                                teacherId: item.userId
+                              }
+                            })
+                          })
+                        }}
+                      >
+                        <div class={styles.styleImg}>
                           <Image
-                            src-={item.avatar}
+                            src={item.cover}
                             fit="cover"
-                            class={styles.userImg}
+                            class={[styles.img, index === 0 && styles.first]}
                           />
-                          <span>{item.username}</span>
-                        </p>
-                        <p class={styles.lookNum}>{item.browse}人观看</p>
-                      </div>
-                    </div>
-                  </div>
-                ) : (
-                  <div class={styles.line}>
-                    <div class={styles.styleItem}>
-                      <div class={styles.styleImg}>
-                        <Image
-                          src={item.cover}
-                          fit="cover"
-                          class={[styles.img, index === 0 && styles.first]}
-                        />
+
+                          {item.living === 1 ? (
+                            <div class={styles.living}>
+                              <div class={styles.animationContainer}>
+                                <Image src={bars} class={styles.animation} />
+                              </div>
+                              <span>直播中</span>
+                            </div>
+                          ) : (
+                            <Image
+                              src={iconVideoPlay}
+                              class={styles.iconVideoPlay}
+                            />
+                          )}
+                        </div>
+                        <div class={styles.userInfo}>
+                          <p class={styles.user}>
+                            <Image
+                              src-={item.avatar}
+                              fit="cover"
+                              class={styles.userImg}
+                            />
+                            <span>{item.username}</span>
+                          </p>
+                          <p class={styles.lookNum}>{item.browse}人观看</p>
+                        </div>
                       </div>
-                      <div class={styles.userInfo}>
-                        <p class={styles.user}>
+                    )
+                )}
+              </div>
+              <div class={styles.line}>
+                {state.list.map(
+                  (item: any, index: number) =>
+                    index % 2 === 1 && (
+                      <div
+                        class={styles.styleItem}
+                        onClick={() => {
+                          const url =
+                            location.origin +
+                            location.pathname +
+                            '#/teacherHome?teacherId=' +
+                            item.userId
+                          openDefaultWebView(url, () => {
+                            router.push({
+                              path: '/teacherHome',
+                              query: {
+                                teacherId: item.userId
+                              }
+                            })
+                          })
+                        }}
+                      >
+                        <div class={styles.styleImg}>
                           <Image
-                            src-={item.avatar}
+                            src={item.cover}
                             fit="cover"
-                            class={styles.userImg}
+                            class={[styles.img, index === 0 && styles.first]}
                           />
-                          <span>{item.username}</span>
-                        </p>
-                        <p class={styles.lookNum}>{item.browse}人观看</p>
+                          {item.living === 1 ? (
+                            <div class={styles.living}>
+                              <div class={styles.animationContainer}>
+                                <Image src={bars} class={styles.animation} />
+                              </div>
+                              <span>直播中</span>
+                            </div>
+                          ) : (
+                            <Image
+                              src={iconVideoPlay}
+                              class={styles.iconVideoPlay}
+                            />
+                          )}
+                        </div>
+                        <div class={styles.userInfo}>
+                          <p class={styles.user}>
+                            <Image
+                              src-={item.avatar}
+                              fit="cover"
+                              class={styles.userImg}
+                            />
+                            <span>{item.username}</span>
+                          </p>
+                          <p class={styles.lookNum}>{item.browse}人观看</p>
+                        </div>
                       </div>
-                    </div>
-                  </div>
+                    )
                 )}
-              </>
-            ))}
+              </div>
+            </div>
           </List>
         ) : (
           <ColResult

src/student/home/components/video-class/index.tsx

@@ -1,5 +1,7 @@
+import { openDefaultWebView } from '@/state'
 import { Image } from 'vant'
 import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
 import TheTitle from '../the-title'
 import styles from './index.module.less'
 
@@ -14,14 +16,41 @@ export default defineComponent({
     }
   },
   setup(props) {
-    console.log(props.video)
+    const router = useRouter()
     return () => (
       <>
-        {props.video.length > 0 && <TheTitle title="精品视频课" />}
+        {props.video.length > 0 && (
+          <TheTitle
+            title="精品视频课"
+            onDetail={() => {
+              const url = location.origin + location.pathname + '#/videoClass'
+              openDefaultWebView(url, () => {
+                router.push('/videoClass')
+              })
+            }}
+          />
+        )}
 
         <div class={styles.videoContainer}>
           {props.video.map((item: any) => (
-            <div class={styles.videoItem}>
+            <div
+              class={styles.videoItem}
+              onClick={() => {
+                const url =
+                  location.origin +
+                  location.pathname +
+                  '#/videoDetail?groupId=' +
+                  item.videoGroupId
+                openDefaultWebView(url, () => {
+                  router.push({
+                    path: '/videoDetail',
+                    query: {
+                      groupId: item.videoGroupId
+                    }
+                  })
+                })
+              }}
+            >
               <div style={{ position: 'relative' }}>
                 <Image
                   class={styles.viCover}

src/student/home/images/bars.svg

@@ -0,0 +1,52 @@
+<svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#2dc7aa">
+    <!-- <rect y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect> -->
+    <rect x="20" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="60" width="15" height="140" rx="6">
+        <animate attributeName="height"
+             begin="0s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="100" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <!-- <rect x="120" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect> -->
+</svg>

src/student/home/images/bars2.svg

@@ -0,0 +1,52 @@
+<svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+    <!-- <rect y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect> -->
+    <rect x="10" y="10" width="20" height="140" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="60" width="20" height="160" rx="6">
+        <animate attributeName="height"
+             begin="0s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="110" y="10" width="20" height="140" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <!-- <rect x="120" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect> -->
+</svg>

src/student/home/index.tsx

@@ -1,4 +1,6 @@
 import request from '@/helpers/request'
+import { verifyUrl } from '@/helpers/toolsValidate'
+import { openDefaultWebView } from '@/state'
 import { PullRefresh, Swipe, SwipeItem, Image, Tabs, Tab } from 'vant'
 import { defineComponent } from 'vue'
 import HotAlbum from './components/hot-album'
@@ -34,10 +36,12 @@ export default defineComponent({
         hotMusicSheet: [] as any
       },
       sageList: [], // 推荐达人
-      videoList: [] // 视频课
+      videoList: [], // 视频课
+      headerHeight: 0
     }
   },
   mounted() {
+    this.headerHeight = (this as any).$refs.header?.getHeadeHeight()
     this.init()
   },
   methods: {
@@ -83,7 +87,6 @@ export default defineComponent({
         const video = await request.get(
           '/api-student/courseSchedule/queryLiveAndVideo'
         )
-        console.log(video.data.videoList)
         this.videoList = video.data.videoList || []
       } catch {
         //
@@ -110,11 +113,17 @@ export default defineComponent({
     return (
       <div class={styles.home}>
         <TheHomeHeader
+          ref="header"
           onCart={() => {
             //
           }}
           onSearch={() => {
-            //
+            // 搜索详情
+            const url =
+              location.origin + location.pathname + '#/music-songbook/search'
+            openDefaultWebView(url, () => {
+              this.$router.push('/music-songbook/search')
+            })
           }}
           onMore={() => {
             //
@@ -130,7 +139,16 @@ export default defineComponent({
           <div class={styles.hotContent}>
             <Swipe class={styles.swipe} autoplay={3000}>
               {this.banner.map((item: any) => (
-                <SwipeItem>
+                <SwipeItem
+                  onClick={() => {
+                    // 判断url是否正常
+                    if (verifyUrl(item.linkUrl)) {
+                      openDefaultWebView(item.linkUrl, () => {
+                        window.location.href = item.linkUrl
+                      })
+                    }
+                  }}
+                >
                   <Image
                     class={styles.swipeItemImg}
                     src={item.coverImage}
@@ -145,17 +163,23 @@ export default defineComponent({
 
           <HotAlbum album={this.albumList} />
 
-          {/* <Music title="推荐曲目" music={this.musicList?.topMusicSheet || []} />
+          <Music title="推荐曲目" music={this.musicList?.topMusicSheet || []} />
           <Music title="最新曲目" music={this.musicList?.newMusicSheet || []} />
-          <Music title="最热曲目" music={this.musicList?.hotMusicSheet || []} /> */}
+          <Music title="最热曲目" music={this.musicList?.hotMusicSheet || []} />
 
           {/* 推荐达人 */}
-          {/* <RecommendSage sage={this.sageList} /> */}
+          <RecommendSage sage={this.sageList} />
 
           {/* 精品视频课 */}
-          {/* <VideoClass video={this.videoList} /> */}
+          <VideoClass video={this.videoList} />
 
-          <Tabs shrink background="transparent" class={styles.homeTabs}>
+          <Tabs
+            shrink
+            background="#f6f8f9"
+            class={styles.homeTabs}
+            sticky
+            offsetTop={this.headerHeight + 'px'}
+          >
             <Tab title="达人风采" name="sage">
               <TalentStyle />
             </Tab>