更新

src/business-components/section-detail/index.tsx

@@ -2,18 +2,25 @@ import { Cell, CellGroup, Icon } from 'vant'
 import { defineComponent, PropType } from 'vue'
 import styles from './index.module.less'
 
-import courseIntroduction from '@common/images/icon_course_introduction.png'
-import courseList from '@common/images/icon_course_list.png'
-
-type IconType = 'courseIntroduction' | 'courseList'
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `./images/${fileName}`
+  const modules = import.meta.globEager('./images/*')
+  return modules[path].default
+}
 
 export default defineComponent({
   name: 'SectionDetail',
   props: {
     icon: {
-      type: String as PropType<'courseIntroduction' | 'courseList'>,
+      type: String as PropType<
+        'courseIntroduction' | 'courseList' | 'fans' | 'personal' | 'elegant'
+      >,
       default: 'courseIntroduction'
     },
+    size: {
+      type: Number,
+      default: 18
+    },
     title: {
       type: String,
       default: '课程介绍'
@@ -34,6 +41,29 @@ export default defineComponent({
       type: Object
     }
   },
+  computed: {
+    iconSrc() {
+      let iconMap = getAssetsHomeFile('icon_course_introduction.png')
+      switch (this.icon) {
+        case 'courseList':
+          iconMap = getAssetsHomeFile('icon_course_list.png')
+          break
+        case 'fans':
+          iconMap = getAssetsHomeFile('icon_fans.png')
+          break
+        case 'personal':
+          iconMap = getAssetsHomeFile('icon_personal.png')
+          break
+        case 'elegant':
+          iconMap = getAssetsHomeFile('icon_elegant.png')
+          break
+        default:
+          iconMap = getAssetsHomeFile('icon_course_introduction.png')
+          break
+      }
+      return iconMap
+    }
+  },
   render() {
     return (
       <div class={styles['section-detail']}>
@@ -43,16 +73,7 @@ export default defineComponent({
               center
               border={this.border}
               v-slots={{
-                icon: () => (
-                  <Icon
-                    name={
-                      this.icon === 'courseIntroduction'
-                        ? courseIntroduction
-                        : courseList
-                    }
-                    size="18"
-                  />
-                ),
+                icon: () => <Icon name={this.iconSrc} size={this.size} />,
                 title: () => <div class={styles.name}>{this.title}</div>
               }}
             ></Cell>

src/student/teacher-dependent/components/single.module.less

@@ -0,0 +1,6 @@
+.introduction {
+  font-size: 13px;
+  color: #666666;
+  line-height: 1.6;
+  padding-bottom: 15px;
+}

src/student/teacher-dependent/components/single.tsx

@@ -0,0 +1,46 @@
+import SectionDetail from '@/business-components/section-detail'
+import { defineComponent } from 'vue'
+import styles from './single.module.less'
+
+export default defineComponent({
+  name: 'single',
+  render() {
+    return (
+      <div class="single">
+        <SectionDetail
+          icon="personal"
+          title="个人风采"
+          size={24}
+          border={false}
+        >
+          <p class={styles.introduction}>
+            毕业于中央音乐学员长笛专业，师从央音长笛系
+            曾获2016年锦绣杯长笛大赛冠军
+            自2018年起研究长笛启蒙、考级到专业考试教育
+            总结出一套适合各个阶段需要的教学方式所教学员考级通过率100%，专业院校复试率92%
+          </p>
+        </SectionDetail>
+
+        <SectionDetail icon="elegant" title="老师风采" size={24} border={false}>
+          <p class={styles.introduction}>
+            毕业于中央音乐学员长笛专业，师从央音长笛系
+            曾获2016年锦绣杯长笛大赛冠军
+            自2018年起研究长笛启蒙、考级到专业考试教育
+            总结出一套适合各个阶段需要的教学方式所教学员考级通过率100%，专业院校复试率92%
+          </p>
+        </SectionDetail>
+
+        {[1, 2, 3, 4, 5].map(i => (
+          <SectionDetail icon="fans" title="粉丝群" size={24} border={false}>
+            <p class={styles.introduction}>
+              毕业于中央音乐学员长笛专业，师从央音长笛系
+              曾获2016年锦绣杯长笛大赛冠军
+              自2018年起研究长笛启蒙、考级到专业考试教育
+              总结出一套适合各个阶段需要的教学方式所教学员考级通过率100%，专业院校复试率92%
+            </p>
+          </SectionDetail>
+        ))}
+      </div>
+    )
+  }
+})

src/student/teacher-dependent/teacher-home.module.less

@@ -12,84 +12,123 @@
   //   #2dc7aa 100%,
   //   #2dc7aa 100%
   // )
-  background: url('./images/head_bg.png') no-repeat top center;
+  background: url('./images/head_bg.png') no-repeat top center #f8f9fc;
   background-size: cover;
+  overflow: hidden;
 }
 
 .headerContent {
   min-height: 100px;
   margin-bottom: 70px;
   position: relative;
+}
 
-  .headerImg {
-    width: 100%;
-    max-height: 158px;
-    padding: 0 14px;
+.headerCount {
+  position: absolute;
+  bottom: -70px;
+  margin: 12px 14px 0;
+  width: calc(100% - 28px);
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 10px;
+  overflow: hidden;
+  height: 127px;
+}
+.open-teacher-info {
+  width: auto;
+  background-color: transparent !important;
+  padding: 14px 11px !important;
+  .userLogo {
+    width: 58px;
+    height: 58px;
+    border-radius: 50%;
+    overflow: hidden;
   }
-
-  .headerCount {
-    position: absolute;
-    bottom: -50px;
-    display: flex;
-    align-items: center;
-    margin: 0 14px;
-    width: calc(100% - 28px);
-    background-color: #fff;
-    border-radius: 12px;
-    height: 100px;
-    .headerItem {
-      position: relative;
-      flex-basis: 33.33%;
+  :global {
+    .van-cell__value {
       display: flex;
       align-items: center;
-      flex-direction: column;
-      font-size: 12px;
-      color: #778098;
-      line-height: 17px;
-      .num {
-        font-size: 16px;
-        font-weight: 500;
-        color: #2dc7aa;
-        line-height: 22px;
-        padding-bottom: 8px;
-      }
+      justify-content: space-between;
+    }
+  }
+}
 
-      &::after {
-        content: ' ';
-        display: inline-block;
-        position: absolute;
-        right: 0px;
-        top: 15px;
-        width: 1px;
-        height: 16px;
-        background: #ebebeb;
-      }
+.teacher-bottom {
+  padding: 5px 11px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 
-      &:last-child {
-        &::after {
-          display: none;
-        }
+.teacher-data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .teacher-data_item {
+    font-size: 14px;
+    color: #333333;
+    position: relative;
+    span {
+      font-weight: 500;
+      color: #000000;
+      font-size: 17px;
+    }
+    &::after {
+      content: ' ';
+      display: inline-block;
+      position: absolute;
+      right: 0px;
+      top: 2px;
+      width: 1px;
+      height: 16px;
+      background: #ebebeb;
+    }
+    &:first-child {
+      padding-right: 15px;
+      margin-right: 15px;
+    }
+    &:last-child {
+      &::after {
+        display: none;
       }
     }
   }
+}
 
-  .teacherCell {
-    margin: 10px 14px 0;
-    width: auto;
-    border-radius: 10px;
-    overflow: hidden;
-    .dataItem {
-      color: #1a1a1a;
-    }
-    :global {
-      .van-cell__value {
-        flex: auto 1;
-      }
+.teacher-info {
+  margin-left: 10px;
+  .teacher-name {
+    font-size: 18px;
+    font-weight: 500;
+    color: #1a1a1a;
+    padding-bottom: 10px;
+  }
+}
 
-      .iconfont-down {
-        margin-left: 4px;
-        transform: scale(0.6);
-      }
+:global {
+  .van-tab {
+    margin-top: 15px;
+  }
+  .van-tab--active {
+    font-size: 16px !important;
+    color: #333333;
+  }
+}
+
+.piNameSubject {
+  display: flex;
+  align-items: center;
+
+  .subject {
+    margin-left: 5px;
+    background: #fff1de;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #ff8c00;
+    line-height: 16px;
+    padding: 0px 4px;
+    &:first-child {
+      margin-left: 0;
     }
   }
 }
@@ -107,3 +146,7 @@
     border-radius: 3px;
   }
 }
+
+.container {
+  padding-bottom: 20px;
+}

src/student/teacher-dependent/teacher-home.tsx

@@ -1,7 +1,10 @@
 import ColHeader from '@/components/col-header'
 import { defineComponent } from 'vue'
 import styles from './teacher-home.module.less'
-import { Cell, CellGroup, Grid, GridItem, Icon, Image, Sticky } from 'vant'
+import { Button, Cell, Icon, Image, Rate, Sticky, Tab, Tabs } from 'vant'
+
+import iconTeacher from '@common/images/icon_teacher.png'
+import Single from './components/single'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
@@ -11,6 +14,11 @@ export const getAssetsHomeFile = (fileName: string) => {
 
 export default defineComponent({
   name: 'teacherHome',
+  data() {
+    return {
+      tabs: 'single'
+    }
+  },
   render() {
     return (
       <div class={styles['teacher-record']}>
@@ -25,24 +33,78 @@ export default defineComponent({
               default: () => (
                 <div class={styles.headerContent}>
                   <div class={styles.headerCount}>
-                    <div class={styles.headerItem}>
-                      <span class={styles.num}>142</span>
-                      <span>累计训练天数</span>
-                    </div>
-                    <div class={styles.headerItem}>
-                      <span class={styles.num}>95</span>
-                      <span>累计训练时长</span>
-                    </div>
-                    <div class={styles.headerItem}>
-                      <span class={styles.num}>142</span>
-                      <span>累计训练次数</span>
+                    <Cell
+                      class={styles['open-teacher-info']}
+                      border={false}
+                      v-slots={{
+                        icon: () => (
+                          <Image
+                            class={styles.userLogo}
+                            src={iconTeacher}
+                            fit="cover"
+                          />
+                        )
+                      }}
+                    >
+                      <div class={styles['teacher-info']}>
+                        <div class={styles['teacher-name']}>李老师</div>
+                        <p class={styles.piNameSubject}>
+                          <span class={styles.subject}>圆号</span>
+                          <span class={styles.subject}>大号</span>
+                        </p>
+                      </div>
+                      <div class={styles['teacher-desc']}>
+                        <Button
+                          type="primary"
+                          size="mini"
+                          style={{ borderRadius: '5px', padding: '5px 10px' }}
+                        >
+                          <Icon name="plus" />
+                          关注
+                        </Button>
+                      </div>
+                    </Cell>
+                    <div class={styles['teacher-bottom']}>
+                      <div class={styles.level}>
+                        <Rate
+                          iconPrefix="iconfont"
+                          color="#FFC459"
+                          void-icon="star_default"
+                          icon="star_active"
+                          size={15}
+                        />
+                      </div>
+                      <div class={styles['teacher-data']}>
+                        <div class={styles['teacher-data_item']}>
+                          粉丝 <span>134</span>
+                        </div>
+                        <div class={styles['teacher-data_item']}>
+                          已上课时 <span>134</span>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
               )
             }}
           />
+          <Tabs
+            color="var(--van-primary)"
+            background="#f8f9fc"
+            lineWidth={20}
+            v-model:active={this.tabs}
+          >
+            <Tab title="个人风采" name="single"></Tab>
+            <Tab title="陪练课" name="practice"></Tab>
+            <Tab title="直播课" name="live"></Tab>
+            <Tab title="视频课" name="video"></Tab>
+            <Tab title="乐谱" name="music"></Tab>
+          </Tabs>
         </Sticky>
+
+        <div class={styles.container}>
+          {this.tabs === 'single' && <Single />}
+        </div>
       </div>
     )
   }