Merge remote-tracking branch 'origin/master'

src/modules/home/components/Banner.vue

@@ -23,4 +23,9 @@ const list = [
     object-position: center;
   }
 }
+.is-h5 {
+  .banner {
+    padding: 0 .3rem;
+  }
+}
 </style>

src/modules/home/components/Main.vue

 <script lang="ts" setup>
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
+const list = [
+  {
+    img: 'https://webapp-pub.ezijing.com/project_online/fi/main4.png',
+    desc: '清控紫荆金融保险研究院&清控紫荆金融保险学院，基于政策指导，通过汇聚清华等国内外高校、行业骨干企业、行业研究机构的科研资源与实践成果，打造国内顶尖、国际卓越的金融保险智库，达到“产学研”的深度融合。'
+  },
+  {
+    img: 'https://webapp-pub.ezijing.com/project_online/fi/main5.png',
+    desc: '通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。'
+  }
+]
 </script>
 <template>
   <div class="main1">
@@ -23,10 +35,24 @@
       />
     </div>
   </div>
-
-  <div class="main3">
+  <div v-else>
+    <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" 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>
 .main1 {
@@ -75,21 +101,46 @@
     }
   }
 }
-.main3 {
-  height: 308px;
-  background: url('https://webapp-pub.ezijing.com/project_online/fi/main2.png')
-    no-repeat center;
-  background-size: 100% 100%;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 40px;
-  color: #ffffff;
-  text-align: center;
-  padding-top: 98px;
+.card-box {
+  padding-top: 0.4rem;
+  padding-left: 0.3rem;
+  display: flex;
+  overflow-x: scroll;
   box-sizing: border-box;
-  span {
-    font-size: 30px;
-    font-weight: bold;
+  .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;
+    color: #ffffff;
+    box-sizing: border-box;
+    padding: 0.4rem 0.45rem;
+    border-radius: 0.12rem;
+    line-height: 0.55rem;
+    span {
+      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>