chore: update

src/assets/css/base.css

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

src/modules/home/components/Brand.vue

-<script setup></script>
+<script setup>
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Navigation } from 'swiper'
+import 'swiper/css'
+import 'swiper/css/navigation'
+
+const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png' }]
+</script>
 
 <template>
   <section class="section">
@@ -7,6 +14,11 @@
       <h2>合作机构</h2>
       <em class="section-title_dot"></em>
     </div>
+    <Swiper autoplay navigation loop :modules="[Navigation]" class="swiper">
+      <SwiperSlide v-for="(item, index) in list" :key="index">
+        <img :src="item.url" class="swiper-pic" />
+      </SwiperSlide>
+    </Swiper>
   </section>
 </template>
 
@@ -15,10 +27,29 @@
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
-  margin-top: 80px;
+  margin-top: 60px;
   margin-bottom: -45px;
   background: #fff;
   border-radius: 10px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  overflow: hidden;
+}
+.swiper {
+  --swiper-navigation-size: 34px;
+  --swiper-navigation-color: #909090;
+  margin-top: 20px;
+  margin-bottom: 60px;
+
+  :deep(.swiper-button-prev) {
+    left: 60px;
+  }
+  :deep(.swiper-button-next) {
+    right: 60px;
+  }
+}
+.swiper-pic {
+  display: block;
+  margin: 0 auto;
+  max-width: 1200px;
 }
 </style>

src/modules/home/components/Course.vue

-<script setup></script>
+<script setup>
+const list = [
+  {
+    title: '案例解决方案',
+    desc: '某某某某某某某某某某某某某某某莫某某某某…',
+    content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》'
+  },
+  {
+    title: '案例解决方案',
+    desc: '某某某某某某某某某某某某某某某莫某某某某…',
+    content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》'
+  },
+  {
+    title: '案例解决方案',
+    desc: '某某某某某某某某某某某某某某某莫某某某某…',
+    content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》'
+  },
+  {
+    title: '案例解决方案',
+    desc: '某某某某某某某某某某某某某某某莫某某某某…',
+    content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》'
+  }
+]
+</script>
 
 <template>
   <section class="section">
@@ -7,6 +30,20 @@
       <h2>定制专属类课程</h2>
       <em class="section-title_dot"></em>
     </div>
+    <div class="topic">
+      <p>
+        针对不同人才类型的培养需求，采用“线上+线下”的教学模式，并提供定制化专业服务与个性化的在线学习解决方案，帮助从业者提升工作所需的业务技能，强化综合竞争力。
+      </p>
+    </div>
+    <div class="case-list">
+      <div class="case-item" v-for="(item, index) in list" :key="index">
+        <h3>{{ item.title }}</h3>
+        <div class="line"></div>
+        <div class="desc">{{ item.desc }}</div>
+        <div class="cover"><div class="inner" v-html="item.content"></div></div>
+      </div>
+    </div>
+    <p class="more">查看更多案例</p>
   </section>
 </template>
 
@@ -17,4 +54,87 @@
   margin: 0 auto;
   margin-top: 80px;
 }
+.topic {
+  height: 266px;
+  background: url('https://webapp-pub.ezijing.com/project_online/fi/course_bg.png') no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  p {
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 40px;
+    color: #ffffff;
+    text-align: center;
+    margin: 0 40px;
+  }
+}
+.case-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+.case-item {
+  position: relative;
+  margin-top: -1px;
+  margin-right: -1px;
+  height: 240px;
+  padding: 0 36px;
+  border: 1px solid #ddd;
+  h3 {
+    margin-top: 60px;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 1;
+    color: #333;
+    text-align: center;
+  }
+  .line {
+    width: 78px;
+    height: 2px;
+    background: var(--main-color);
+    margin: 40px auto 28px;
+  }
+  .desc {
+    font-size: 16px;
+    line-height: 24px;
+    color: #666;
+    text-align: center;
+  }
+  .cover {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--main-color);
+  }
+  .inner {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    line-height: 38px;
+    color: #ffffff;
+    border: 1px solid #fff;
+  }
+  &:hover {
+    .cover {
+      display: block;
+    }
+  }
+}
+.more {
+  padding: 20px 0;
+  font-size: 14px;
+  line-height: 1;
+  color: #999;
+  text-align: center;
+}
 </style>

src/modules/home/style.scss

@@ -7,7 +7,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 30px 0;
+  padding: 40px 0;
   h2 {
     font-size: 32px;
     font-weight: 500;
@@ -18,7 +18,7 @@
     position: relative;
     width: 16px;
     height: 16px;
-    margin: 0 12px;
+    margin: 0 14px;
     border: 1px dashed var(--section-title-dot-border-color);
     &::after {
       position: absolute;