update

src/modules/home/components/Banner.vue

@@ -23,7 +23,7 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/banner.jp
 }
 .is-h5 {
   .banner {
-    padding: 0 0.15rem;
+    padding: 0 .3rem;
   }
 }
 </style>

src/modules/home/components/Main.vue

 <script lang="ts" setup>
-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 = [
   {
     img: 'https://webapp-pub.ezijing.com/project_online/fi/main4.png',
@@ -37,16 +32,23 @@ const list = [
     </div>
   </div>
   <div v-else>
-    <Swiper loop :slidesPerView="1" :spaceBetween="10" :modules="[Navigation]" @swiper="swiper => (swiper1 = swiper)">
-      <SwiperSlide v-for="(item, index) in list" :key="index" class="main_list">
-        <img :src="item.img" alt="" class="list_img" />
-        <div class="list_con">{{ item.desc }}</div>
-      </SwiperSlide>
-    </Swiper>
+    <div class="card-box">
+      <div class="card-item" v-for="(item, index) in list" :key="index">
+        <img :src="item.img" />
+        <div class="text">{{ item.desc }}</div>
+      </div>
+    </div>
   </div>
-  <div class="main3">
+  <div class="main3" v-if="!mobile">
     核心产品为紫荆教育专属版权产品，站在高起点、高站位、高规格的“三高”教育标准平台上，向社会和企业精<br />英人士教授与传承“<span>格与质</span>”、“<span>道与术</span>”、“<span>欲与渔</span>”的经营管理品格和能力，主打行业认证类、行业标<br />准类和定制专属类等三类金融职业类培育体系。
   </div>
+  <div class="introduce" v-else>
+    <div class="content">
+      核心产品为紫荆教育专属版权产品，站在高起点、高<br />站位、高规格的“三高”教育标准平台上，向社会和<br />企业精英人士教授与传承“<span>格与质</span>”、“<span
+        >道与<br />术</span
+      >”、“<span>欲与渔</span>”的经营管理品格和能力，主打<br />行业认证类、行业标准类和定制专属类等三类金融职<br />业类培育体系。
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
 .is-pc {
@@ -141,22 +143,47 @@ const list = [
       margin-top: 0.37rem;
     }
   }
-  .main3 {
-    height: 3.97rem;
+}
+.card-box {
+  padding-top: 0.4rem;
+  padding-left: 0.3rem;
+  display: flex;
+  overflow-x: scroll;
+  box-sizing: border-box;
+  .card-item {
+    min-width: 6.1rem;
+    padding: 0.2rem 0.2rem 0.4rem;
+    background-color: #ffffff;
+    border-radius: 0.12rem;
+    margin-right: 0.2rem;
+    img {
+      width: 100%;
+      display: block;
+    }
+    .text {
+      padding-top: 0.37rem;
+      font-size: 0.24rem;
+      line-height: 0.4rem;
+      color: #333333;
+    }
+  }
+}
+.introduce {
+  padding: 0.4rem 0.3rem;
+  .content {
     background: url('https://webapp-pub.ezijing.com/project_online/fi/main2.png') no-repeat center;
     background-size: 100% 100%;
     font-size: 0.26rem;
-    font-weight: 400;
-    line-height: 2;
     color: #ffffff;
-    text-align: justify;
     box-sizing: border-box;
-    padding: 0.4rem 0.4rem 0 0.4rem;
-    margin-top: 0.4rem;
+    padding: 0.4rem 0.45rem;
+    border-radius: 0.12rem;
+    line-height: 0.55rem;
     span {
-      font-size: 0.15rem;
+      font-size: 0.3rem;
       font-weight: bold;
     }
+    text-align: center;
   }
 }
 </style>

src/modules/home/components/ProjectSystem.vue

 <script lang="ts" setup>
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
+
 const authList: Array<{ img: string; tit: string; list: any }> = [
   {
     img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_1.png',
@@ -110,7 +113,7 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
 </script>
 
 <template>
-  <div class="main_con" id="product">
+  <div class="main_con" id="product" v-if="!mobile">
     <div class="con_tit">
       <div class="tit_img">
         <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
@@ -191,6 +194,23 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
       </el-tabs>
     </div>
   </div>
+  <div class="h5-system" v-else>
+    <h1>全系列产品体系</h1>
+    <div class="tab-btn">
+      <div class="item">
+        <div class="icon"></div>
+        <h2>行业认证类</h2>
+      </div>
+      <div class="item">
+        <div class="icon"></div>
+        <h2>行业标准类</h2>
+      </div>
+      <div class="item">
+        <div class="icon"></div>
+        <h2>行业普及类</h2>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -337,4 +357,48 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
     }
   }
 }
+.h5-system {
+  padding: 0 30px;
+  h1 {
+    font-size: 0.32rem;
+    font-weight: bold;
+    color: #333333;
+  }
+  .tab-btn {
+    padding-top: 0.4rem;
+    display: flex;
+    justify-content: space-between;
+    .item {
+      .icon {
+        width: 0.68rem;
+        height: 0.68rem;
+        margin: 0 auto;
+      }
+      &:nth-child(1) {
+        .icon {
+          background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-product-i1.png);
+          background-size: 100% 100%;
+        }
+      }
+      &:nth-child(2) {
+        .icon {
+          background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-product-i2.png);
+          background-size: 100% 100%;
+        }
+      }
+      &:nth-child(3) {
+        .icon {
+          background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-product-i3.png);
+          background-size: 100% 100%;
+        }
+      }
+      h2 {
+        padding-top: 0.2rem;
+        font-size: 0.28rem;
+        color: #333333;
+        line-height: 100%;
+      }
+    }
+  }
+}
 </style>