添加判断

src/student/home/components/info-list/index.module.less

@@ -1,6 +1,7 @@
 .cellGroup {
   padding: 10px 8px;
   margin-top: 8px;
+  margin-bottom: 16px;
 
   :global {
     .van-cell {

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

@@ -56,7 +56,7 @@ export default defineComponent({
             class={[styles.liveList]}
             onLoad={getList}
           >
-            <CellGroup inset class={styles.cellGroup}>
+            <CellGroup inset class={state.list.length > 0 && styles.cellGroup}>
               {state.list.map((item: any) => (
                 <Cell valueClass={styles.valueContent}>
                   {{

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

@@ -0,0 +1,64 @@
+.style {
+  display: flex;
+  flex-flow: column wrap;
+  align-content: space-between;
+  padding: 0 14px;
+  // column-count: 2;
+  // column-gap: 8px;
+}
+
+.styleItem {
+  width: 168px;
+  overflow: hidden;
+  box-shadow: 0px 2px 10px 0px rgba(229, 229, 229, 0.1);
+  border-radius: 8px;
+  background-color: #fff;
+  margin-bottom: 12px;
+
+  .styleImg {
+    position: relative;
+  }
+  .img {
+    width: 168px;
+    height: 168px;
+
+    &.first {
+      height: 222px;
+    }
+  }
+
+  .userInfo {
+    padding: 14px 10px;
+  }
+
+  .userInfo,
+  .user {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .user {
+    .userImg {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin-right: 5px;
+    }
+    span {
+      font-size: 12px;
+      color: #333333;
+      line-height: 17px;
+      max-width: 70px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .lookNum {
+    font-size: 12px;
+    color: #999999;
+    line-height: 17px;
+  }
+}

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

@@ -0,0 +1,121 @@
+import ColResult from '@/components/col-result'
+import request from '@/helpers/request'
+import { dateFormat } from '@/helpers/utils'
+import { Cell, CellGroup, Image, List } from 'vant'
+import { defineComponent, reactive } from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'talent-list',
+  setup() {
+    const params = reactive({
+      platformType: 'STUDENT',
+      // type: '1',
+      // clientType: 'STUDENT',
+      page: 1,
+      rows: 20
+    })
+    const state = reactive({
+      list: [],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false
+    })
+    const getList = async () => {
+      try {
+        const res = await request.post('/api-student/teacher/stylePage', {
+          data: {
+            ...params
+          }
+        })
+        state.loading = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (state.list.length > 0 && result.pageNo === 1) {
+          return
+        }
+        state.list = state.list.concat(result.rows || [])
+        state.finished = result.pageNo >= result.totalPage
+        params.page = result.pageNo + 1
+        state.dataShow = state.list.length > 0
+      } catch {
+        state.dataShow = false
+        state.finished = true
+      }
+    }
+
+    getList()
+    return () => (
+      <>
+        {state.dataShow ? (
+          <List
+            v-model:loading={state.loading}
+            finished={state.finished}
+            finishedText=" "
+            immediateCheck={false}
+            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}>
+                          <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 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}>
+                          <Image
+                            src-={item.avatar}
+                            fit="cover"
+                            class={styles.userImg}
+                          />
+                          <span>{item.username}</span>
+                        </p>
+                        <p class={styles.lookNum}>{item.browse}人观看</p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </>
+            ))}
+          </List>
+        ) : (
+          <ColResult
+            btnStatus={false}
+            classImgSize="SMALL"
+            tips="暂无达人风采"
+          />
+        )}
+      </>
+    )
+  }
+})

src/student/home/index.tsx

@@ -6,6 +6,7 @@ import InfoList from './components/info-list'
 import MenuList from './components/menu-list'
 import Music from './components/music'
 import RecommendSage from './components/recommend-sage'
+import TalentStyle from './components/talent-style'
 import TheHomeHeader from './components/TheHomeHeader'
 import VideoClass from './components/video-class'
 import styles from './index.module.less'
@@ -156,9 +157,11 @@ export default defineComponent({
 
           <Tabs shrink background="transparent" class={styles.homeTabs}>
             <Tab title="达人风采" name="sage">
+              <TalentStyle />
+            </Tab>
+            <Tab title="热门资讯" name="info">
               <InfoList />
             </Tab>
-            <Tab title="热门资讯" name="info"></Tab>
           </Tabs>
         </PullRefresh>
       </div>