chore: update

src/assets/css/base.css

@@ -78,7 +78,7 @@ textarea:focus {
 body {
   min-width: 375px;
   font-size: 14px;
-  background-color: #f5f5f5;
+  background-color: #fff;
 }
 
 @media (min-width: 768px) {

src/components/layout/Nav.vue

@@ -2,7 +2,7 @@
 import TreeItem from './TreeItem.vue'
 
 const navList = [
-  { name: '首页', path: '/#index' },
+  { name: '首页', path: '/' },
   { name: '产品体系', path: '/#product' },
   { name: '师资展示', path: '/#teacher' },
   { name: '预约报名', path: '/#apply' }

src/modules/home/components/Teacher.vue

-<script setup></script>
+<script setup>
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Navigation } from 'swiper'
+import 'swiper/css'
+import 'swiper/css/navigation'
+
+const swiper1 = ref(null)
+const list = [
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '张伟',
+    children: ['清华大学国家金融研究院副院长、副研究员']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '高皓',
+    children: ['清华大学五道口金融学院全球家族企业研究中心主任']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '肇越',
+    children: ['清华大学五道口金融学院硕士生导师首席经济学家']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '陈秉正',
+    children: ['清华大学经济管理学院金融系教授', '中国保险与风险管理研究中心主任']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '潘福祥',
+    children: ['曾任清华大学经济管理学院院长助理', '诺德基金管理有限公司董事长']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '刘鹏',
+    children: ['北大金融经济学硕士', '哈斯商学院金融与地产联合博士', '康奈尔大学终身教授']
+  }
+]
+
+const swiper2 = ref(null)
+const list2 = [
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '张伟',
+    children: ['清华大学国家金融研究院副院长、副研究员']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '高皓',
+    children: ['清华大学五道口金融学院全球家族企业研究中心主任']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '肇越',
+    children: ['清华大学五道口金融学院硕士生导师首席经济学家']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '陈秉正',
+    children: ['清华大学经济管理学院金融系教授', '中国保险与风险管理研究中心主任']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '潘福祥',
+    children: ['曾任清华大学经济管理学院院长助理', '诺德基金管理有限公司董事长']
+  },
+  {
+    avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
+    name: '刘鹏',
+    children: ['北大金融经济学硕士', '哈斯商学院金融与地产联合博士', '康奈尔大学终身教授']
+  }
+]
+
+function prev(swiper) {
+  swiper?.slidePrev()
+}
+function next(swiper) {
+  swiper?.slideNext()
+}
+</script>
 
 <template>
   <section class="section" id="teacher">
-    <div class="section-title">
-      <em class="section-title_dot"></em>
-      <h2>师资团队</h2>
-      <em class="section-title_dot"></em>
+    <div class="section__inner">
+      <div class="section-title">
+        <em class="section-title_dot"></em>
+        <h2>师资团队</h2>
+        <em class="section-title_dot"></em>
+      </div>
+      <h3 class="subtitle">清华大学知名教授、博士生导师</h3>
+      <div class="my-swiper">
+        <Swiper
+          loop
+          navigation
+          :slidesPerView="4"
+          :spaceBetween="20"
+          :modules="[Navigation]"
+          @swiper="swiper => (swiper1 = swiper)">
+          <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">
+              <li v-for="item in item.children" :key="item">{{ item }}</li>
+            </ol>
+          </SwiperSlide>
+        </Swiper>
+        <div class="swiper-button-prev" @click="prev(swiper1)"></div>
+        <div class="swiper-button-next" @click="next(swiper1)"></div>
+      </div>
+      <h3 class="subtitle">清控紫荆教育专职名师暨高级实战专家</h3>
+      <div class="my-swiper">
+        <Swiper
+          loop
+          navigation
+          :slidesPerView="4"
+          :spaceBetween="20"
+          :modules="[Navigation]"
+          @swiper="swiper => (swiper2 = swiper)">
+          <SwiperSlide v-for="(item, index) in list2" :key="index" class="teacher-item">
+            <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>
+            </ol>
+          </SwiperSlide>
+        </Swiper>
+        <div class="swiper-button-prev" @click="prev(swiper2)"></div>
+        <div class="swiper-button-next" @click="next(swiper2)"></div>
+      </div>
     </div>
   </section>
 </template>
 
 <style lang="scss" scoped>
 .section {
-  position: relative;
-  max-width: 1200px;
-  margin: 0 auto;
   margin-top: 80px;
   --section-title-color: #fff;
   --section-title-dot-bgcolor: #fff;
   --section-title-dot-border-color: #fff;
+  background: url('https://webapp-pub.ezijing.com/project_online/fi/teacher_bg.jpg') no-repeat center top;
+}
+.section-title {
+  padding-bottom: 0;
+}
+.section__inner {
+  position: relative;
+  max-width: 1200px;
+  min-height: 1080px;
+  margin: 0 auto;
+}
+.subtitle {
+  margin: 60px 0 30px;
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 34px;
+  color: #ffffff;
+  text-align: center;
+}
+.my-swiper {
+  --swiper-navigation-size: 34px;
+  --swiper-navigation-color: #fff;
+  position: relative;
+  margin-top: 20px;
+  margin-bottom: 60px;
+
+  :deep(.swiper-button-prev) {
+    left: -40px;
+  }
+  :deep(.swiper-button-next) {
+    right: -40px;
+  }
+}
+</style>
+
+<style lang="scss">
+.teacher-item {
+  width: 268px;
+  height: 322px;
+  background-color: #fff;
+  border-radius: 4px;
+  img {
+    display: block;
+    width: 110px;
+    height: 110px;
+    margin: 34px auto 0;
+    border-radius: 50%;
+  }
+  h3 {
+    margin-top: 12px;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1;
+    color: #333;
+    text-align: center;
+  }
+  ol {
+    margin-top: 20px;
+  }
+  li {
+    position: relative;
+    margin: 0 40px;
+    font-size: 16px;
+    line-height: 24px;
+    color: #535353;
+    &::before {
+      content: '';
+      position: absolute;
+      left: -10px;
+      top: 9px;
+      width: 5px;
+      height: 5px;
+      background: #c1ab85;
+    }
+  }
+  li + li {
+    margin-top: 10px;
+  }
 }
 </style>

src/modules/home/style.scss

@@ -19,7 +19,7 @@
     width: 16px;
     height: 16px;
     margin: 0 14px;
-    border: 1px dashed var(--section-title-dot-border-color);
+    border: 1px dotted var(--section-title-dot-border-color);
     &::after {
       position: absolute;
       top: 50%;