updates

data/src/goods/1.js

@@ -17,8 +17,8 @@ export default [
     ],
     child_ids: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7', '1-8'],
     course_card: '知名导师专家',
-    course_chapter: '56 节课程',
-    course_total_hour: '80 小时',
+    course_chapter: '56 ',
+    course_total_hour: '80',
     course_hour: '20课时',
     course_id: '7000659282773409792',
     class_id: '6998519782265847808'
@@ -71,8 +71,8 @@ export default [
       }
     ],
     course_card: '知名导师专家1',
-    course_chapter: '56 节课程',
-    course_total_hour: '80 小时',
+    course_chapter: '56 ',
+    course_total_hour: '80',
     course_hour: '20课时',
     course_id: '7000659282773409792',
     class_id: '6998519782265847808'
@@ -111,8 +111,8 @@ export default [
       }
     ],
     course_card: '知名导师专家2',
-    course_chapter: '56 节课程',
-    course_total_hour: '80 小时',
+    course_chapter: '56 ',
+    course_total_hour: '80',
     course_hour: '20课时',
     course_id: '6998547457529348096',
     class_id: '6998519782265847808'
@@ -151,8 +151,8 @@ export default [
       }
     ],
     course_card: '知名导师专家2',
-    course_chapter: '56 节课程',
-    course_total_hour: '80 小时',
+    course_chapter: '56 ',
+    course_total_hour: '80',
     course_hour: '20课时',
     course_id: '6998547457529348096',
     class_id: '6998519782265847808'
@@ -191,8 +191,8 @@ export default [
       }
     ],
     course_card: '知名导师专家2',
-    course_chapter: '56 节课程',
-    course_total_hour: '80 小时',
+    course_chapter: '56 ',
+    course_total_hour: '80',
     course_hour: '20课时',
     course_id: '6998547457529348096',
     class_id: '6998519782265847808'
@@ -231,8 +231,8 @@ export default [
       }
     ],
     course_card: '知名导师专家2',
-    course_chapter: '56 节课程',
-    course_total_hour: '80 小时',
+    course_chapter: '56 ',
+    course_total_hour: '80',
     course_hour: '20课时',
     course_id: '6998547457529348096',
     class_id: '6998519782265847808'
@@ -271,8 +271,8 @@ export default [
       }
     ],
     course_card: '知名导师专家2',
-    course_chapter: '56 节课程',
-    course_total_hour: '80 小时',
+    course_chapter: '56 ',
+    course_total_hour: '80',
     course_hour: '20课时',
     course_id: '6998547457529348096',
     class_id: '6998519782265847808'
@@ -311,8 +311,8 @@ export default [
       }
     ],
     course_card: '知名导师专家2',
-    course_chapter: '56 节课程',
-    course_total_hour: '80 小时',
+    course_chapter: '56 ',
+    course_total_hour: '80',
     course_hour: '20课时',
     course_id: '6998547457529348096',
     class_id: '6998519782265847808'
@@ -351,8 +351,8 @@ export default [
       }
     ],
     course_card: '知名导师专家2',
-    course_chapter: '56 节课程',
-    course_total_hour: '80 小时',
+    course_chapter: '56 ',
+    course_total_hour: '80',
     course_hour: '20课时',
     course_id: '6998547457529348096',
     class_id: '6998519782265847808'

src/main.ts

@@ -6,7 +6,7 @@ import router from './router'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import { Overlay } from 'vant'
+import { Overlay,Tab,Tabs } from 'vant'
 // 2. 引入组件样式
 import 'vant/lib/index.css';
 // 公共css
@@ -26,6 +26,8 @@ modules({ router })
 
 app.use(createPinia())
 app.use(Overlay)
+app.use(Tab)
+app.use(Tabs)
 app.use(router)
 app.use(ElementPlus)
 

src/modules/home/components/ProjectSystem.vue

 <script lang="ts" setup>
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
+const active = ref(0)
 const list: Array<{ tit: string; desc: string; img: string }> = [
   {
     tit: '专业权威',
@@ -24,7 +27,7 @@ const list: Array<{ tit: string; desc: string; img: string }> = [
 </script>
 
 <template>
-  <div class="main">
+  <div class="main" v-if="!mobile">
     <div class="main_con">
       <div class="con_list" v-for="(item, index) in list" :key="index">
         <div class="list_left">
@@ -36,10 +39,19 @@ const list: Array<{ tit: string; desc: string; img: string }> = [
       </div>
     </div>
   </div>
+  <div class="main" v-else>
+    <van-tabs>
+      <van-tab :title="item.tit" v-for="(item, index) in list" :key="index">
+        <img :src="item.img" alt="" />
+        <div class="desc">{{ item.desc }}</div>
+      </van-tab>
+    </van-tabs>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.main {
+.is-pc {
+  .main {
     background: #f5f5f5;
     .main_con {
       width: 1200px;
@@ -98,5 +110,48 @@ const list: Array<{ tit: string; desc: string; img: string }> = [
         margin-top: 35px;
       }
     }
+  }
+}
+.is-h5 {
+  .main {
+    margin: 0.3rem;
+    background: #ffffff;
+    padding: 0.2rem 0.2rem 0.54rem 0.2rem;
+    border-radius: 0.12rem;
+
+    .van-tab__panel {
+      border: 1px solid #e8e8e8;
+      padding: 0.2rem;
+      border-radius: 0.12rem;
+      margin-top: 0.3rem;
+      img {
+        width: 6.1rem;
+        height: 1.91rem;
+        object-fit: cover;
+      }
+      .desc {
+        font-size: 0.24rem;
+        line-height: 0.4rem;
+        color: #666666;
+        margin-top: 0.39rem;
+      }
+    }
+  }
+}
+
+:deep(.van-tab--active) {
+  .van-tab__text {
+    color: #c1ab85 !important;
+    font-size: 0.28rem;
+  }
+}
+:deep(.van-tab) {
+  .van-tab__text {
+    color: #333333;
+    font-size: 0.28rem;
+  }
+}
+:deep(.van-tabs__line) {
+  background: #c1ab85 !important;
 }
 </style>

src/modules/home/components/Teacher.vue

@@ -3,6 +3,8 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Navigation } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/navigation'
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
 
 const swiper1 = ref(null)
 const list = [
@@ -24,7 +26,10 @@ const list = [
   {
     avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png',
     name: '陈秉正',
-    children: ['清华大学经济管理学院金融系教授', '中国保险与风险管理研究中心主任']
+    children: [
+      '清华大学经济管理学院金融系教授',
+      '中国保险与风险管理研究中心主任'
+    ]
   },
   {
     avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_05.png',
@@ -34,7 +39,11 @@ const list = [
   {
     avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_06.png',
     name: '刘鹏',
-    children: ['北大金融经济学硕士', '哈斯商学院金融与地产联合博士', '康奈尔大学终身教授']
+    children: [
+      '北大金融经济学硕士',
+      '哈斯商学院金融与地产联合博士',
+      '康奈尔大学终身教授'
+    ]
   }
 ]
 
@@ -58,7 +67,10 @@ const list2 = [
   {
     avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
     name: '邹志英',
-    children: ['清控紫荆金融保险研究院特聘专家', '中国企业财务管理协会商学院客座教授']
+    children: [
+      '清控紫荆金融保险研究院特聘专家',
+      '中国企业财务管理协会商学院客座教授'
+    ]
   },
   {
     avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
@@ -73,7 +85,10 @@ const list2 = [
   {
     avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
     name: '王昊',
-    children: ['清控紫荆金融保险专职讲师', '清华大学五道口金融学院家族信托课程特聘专家']
+    children: [
+      '清控紫荆金融保险专职讲师',
+      '清华大学五道口金融学院家族信托课程特聘专家'
+    ]
   },
   {
     avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
@@ -116,15 +131,21 @@ function next(swiper) {
 </script>
 
 <template>
-  <section class="section" id="teacher">
+  <section class="section" id="teacher" v-if="!mobile">
     <div class="section__inner">
-      <div class="con_tit">
+      <div class="section-title">
         <div class="tit_img">
-          <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
+          <img
+            src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png"
+            class="img_box"
+          />
         </div>
-        <div class="tit_txt">师资团队</div>
+        <h2>师资团队</h2>
         <div class="tit_img">
-          <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
+          <img
+            src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png"
+            class="img_box"
+          />
         </div>
       </div>
       <h3 class="subtitle">清华大学知名教授、博士生导师</h3>
@@ -135,9 +156,13 @@ function next(swiper) {
           :slidesPerView="4"
           :spaceBetween="20"
           :modules="[Navigation]"
-          @swiper="swiper => (swiper1 = swiper)"
+          @swiper="(swiper) => (swiper1 = swiper)"
+        >
+          <SwiperSlide
+            v-for="(item, index) in list"
+            :key="index"
+            class="teacher-item"
           >
-          <SwiperSlide v-for="(item, index) in list" :key="index" class="teacher-item">
             <img :src="item.avatar" />
             <h3>{{ item.name }}</h3>
             <ol v-if="item.children?.length">
@@ -156,9 +181,14 @@ function next(swiper) {
           :slidesPerView="4"
           :spaceBetween="20"
           :modules="[Navigation]"
-          @swiper="swiper => (swiper2 = swiper)"
+          @swiper="(swiper) => (swiper2 = swiper)"
+        >
+          <SwiperSlide
+            v-for="(item, index) in list2"
+            :key="index"
+            class="teacher-item1"
           >
-          <SwiperSlide v-for="(item, index) in list2" :key="index" class="teacher-item1">
+            <!-- <img :src="item.avatar" /> -->
             <h3>{{ item.name }}</h3>
             <ol v-if="item.children?.length">
               <li v-for="item in item.children" :key="item">{{ item }}</li>
@@ -170,35 +200,54 @@ function next(swiper) {
       </div>
     </div>
   </section>
+  <section class="h5-teacher" v-else>
+    <h1>师资团队</h1>
+    <div class="content">
+      <h2>清华大学知名教授、博士生导师</h2>
+      <div class="group">
+        <div class="item" v-for="(item, index) in list" :key="index">
+          <img :src="item.avatar" />
+          <div class="name">{{ item.name }}</div>
+          <div
+            class="desc"
+            v-for="(cItem, index) in item.children"
+            :key="index"
+          >
+            <div class="icon"></div>
+            <div class="t">{{ cItem }}</div>
+          </div>
+        </div>
+      </div>
+      <h2>清控紫荆教育专职名师暨高级实战专家</h2>
+      <div class="group">
+        <div class="item" v-for="(item, index) in list2" :key="index">
+          <div class="name">{{ item.name }}</div>
+          <div
+            class="desc"
+            v-for="(cItem, index) in item.children"
+            :key="index"
+          >
+            <div class="icon"></div>
+            <div class="t">{{ cItem }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </template>
 
 <style lang="scss" scoped>
 .section {
-  width: 100%;
   --section-title-color: #fff;
   --section-title-dot-bgcolor: #fff;
   --section-title-dot-border-color: #fff;
-  background: url('https://webapp-pub.ezijing.com/project_online/paa/teacher_bg.jpg') no-repeat center;
-  background-size: 100% 100%;
+  background: url('https://webapp-pub.ezijing.com/project_online/fi/teacher_bg.jpg')
+    no-repeat center / 100% 100%;
   height: 906px;
 }
 .section-title {
   padding-bottom: 0;
-}
-.section__inner {
-  position: relative;
-  max-width: 1180px;
-  min-height: 906px;
-  margin: 0 auto;
-  box-sizing: border-box;
-}
-.con_tit {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 67px;
-
-  .tit_txt {
+  h2 {
     font-size: 32px;
     font-weight: 500;
     line-height: 34px;
@@ -206,10 +255,17 @@ function next(swiper) {
     margin: 0 10px;
   }
 }
+.section__inner {
+  position: relative;
+  max-width: 1180px;
+  min-height: 1080px;
+  margin: 0 auto;
+}
 .subtitle {
-  margin: 50px 0 30px;
+  margin: 60px 0 30px;
   font-size: 24px;
   font-weight: 500;
+  line-height: 34px;
   color: #ffffff;
   text-align: center;
 }
@@ -217,6 +273,8 @@ function next(swiper) {
   --swiper-navigation-size: 34px;
   --swiper-navigation-color: #fff;
   position: relative;
+  margin-top: 20px;
+  margin-bottom: 60px;
 
   :deep(.swiper-button-prev) {
     left: -40px;
@@ -227,7 +285,7 @@ function next(swiper) {
 }
 </style>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .teacher-item {
   width: 268px;
   height: 322px;
@@ -282,7 +340,6 @@ function next(swiper) {
   padding-top: 32px;
   box-sizing: border-box;
   h3 {
-    // margin-top: 12px;
     font-size: 18px;
     font-weight: 500;
     line-height: 1;
@@ -312,4 +369,69 @@ function next(swiper) {
     margin-top: 11px;
   }
 }
+.h5-teacher {
+  padding: 0 0.3rem;
+  h1 {
+    font-size: 0.32rem;
+    font-weight: bold;
+    line-height: 100%;
+    color: #333333;
+    margin: 0.3rem 0;
+  }
+  .content {
+    background: url('https://webapp-pub.ezijing.com/project_online/fi/teacher_bg.jpg');
+    background-size: cover;
+    height: 10.21rem;
+    overflow: hidden;
+    h2 {
+      font-size: 0.28rem;
+      font-weight: bold;
+      line-height: 100%;
+      color: #ffffff;
+      padding: 0.6rem 0 0.4rem;
+      text-align: center;
+    }
+    .group {
+      display: flex;
+      overflow-x: scroll;
+      padding-right: 0.2rem;
+      .item {
+        min-width: 4.1rem;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 0.12rem;
+        padding: 0.43rem 0.22rem;
+        margin-left: 0.2rem;
+        img {
+          width: 1.2rem;
+          height: 1.2rem;
+          display: block;
+          margin: 0 auto;
+        }
+        .name {
+          font-size: 0.28rem;
+          line-height: 100%;
+          color: #333333;
+          padding: 0.1rem 0 0.32rem;
+          text-align: center;
+        }
+        .desc {
+          display: flex;
+          .icon {
+            min-width: 0.1rem;
+            height: 0.1rem;
+            background: rgba(193, 171, 133, 1);
+            margin-right: 8px;
+            transform: rotate(45deg);
+            margin-top: 0.1rem;
+          }
+          .t {
+            font-size: 0.24rem;
+            line-height: 0.34rem;
+            color: #535353;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/modules/shop/components/TeacherCard.vue

 <script setup>
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Grid, Navigation } from 'swiper'
-import { useDevice } from '@/composables/useDevice'
 import 'swiper/css'
 import 'swiper/css/grid'
 import 'swiper/css/navigation'
+import { useDevice } from '@/composables/useDevice'
 const { mobile } = useDevice()
 
 defineProps({