feat: 提交

src/views/Home.vue

@@ -21,12 +21,9 @@
                     <div class="section-two-content-title-item">您的实验室搭建</div>
                     <div class="section-two-content-title-item">样本中央数据库</div>
                 </div>
-              <van-image
+                <van-image class="section-two-content-image" lazy-load :src="groupImage" />
-                  class="section-two-content-image"
+                <div class="section-two-content-text mt-[160px]">系统基于Web浏览器便捷的交互方式，帮助实验人员进行样本数据管理与业务流程管理，彻底替代纸质与Excel。
-                  lazy-load
+                </div>
-                  :src="groupImage"
-                  />
-              <div class="section-two-content-text mt-[160px]">系统基于Web浏览器便捷的交互方式，帮助实验人员进行样本数据管理与业务流程管理，彻底替代纸质与Excel。</div>
                 <div class="section-two-content-text">样本数据保管在中心化的服务器中，方便所有人共同创建、查询、使用样本信息，不再需要成员之间进行样本资料的递。</div>
                 <div class="section-two-content-text">我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。</div>
             </div>
@@ -103,7 +100,9 @@
         </section>
         <section class="section-six">
             <div class="section-six-title">面向生物药场景而设计，适合各细分领域</div>
-          <div class="section-six-text">药企样本管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。线粒®生物样本管理平台专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。</div>
+            <div class="section-six-text">
+                药企样本管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。线粒®生物样本管理平台专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。
+            </div>
             <div class="section-six-items">
                 <div v-for="item in sixItems" :key="item.title">
                     <van-image class="section-six-item-image" lazy-load :src="item.img" />
@@ -122,14 +121,11 @@
                 <van-tab title="可对接硬件"></van-tab>
                 <van-tab title="可对接软件"></van-tab>
             </van-tabs>
-          <van-swipe ref="swipeCardRef" @change="onSwipeCardChange" class="my-swipe" lazy-render indicator-color="white">
+            <van-swipe ref="swipeCardRef" @change="onSwipeCardChange" class="my-swipe" lazy-render
+                indicator-color="white">
                 <van-swipe-item class="section-eight-swipe-item" v-for="(tab, index) in cardTabs" :key="tab.title">
-                  <van-image 
+                    <van-image v-for="item in tab.items" class="section-eight-swipe-item-image" lazy-load
-                      v-for="item in tab.items"
+                        :class="[ index === 0 ? 'tab-one' : 'tab-two' ]" :src="item" />
-                      class="section-eight-swipe-item-image" 
-                      lazy-load 
-                      :class="[index === 0 ? 'tab-one' : 'tab-two']" 
-                      :src="item" />
                 </van-swipe-item>
             </van-swipe>
         </section>
@@ -189,7 +185,7 @@
                         </div>
                     </div>
                     <div class="text-price-desc">适合样品量较多、有明确的业务规范的用户，我们提供定制开发服务，让 系统更适合用户的个性化管理场景</div>
-                <div class="btn-box-price">立即咨询</div>
+                    <div class="btn-box-price" @click="openChat">立即咨询</div>
                 </div>
             </div>
             <div class="base-wrap">
@@ -210,7 +206,7 @@
                         </div>
                     </div>
                     <div class="text-price-desc">专为中小型企业设计，提供核心的样品管理功能，旨在简化操作流程，提 升管理效率，同时保持成本效益， 适合预算有限的企业。</div>
-                <div class="btn-box-price-two">立即咨询</div>
+                    <div class="btn-box-price" @click="openChat">立即咨询</div>
                 </div>
             </div>
             <div class="base-wrap">
@@ -231,7 +227,7 @@
                         </div>
                     </div>
                     <div class="text-price-desc">标准版是样品管理系统的基础版本，它提供了样品管理的基本功能，旨在满足各高校实验室、科研院所等企业对样品管理的基本需求。</div>
-                <div class="btn-box-price">立即咨询</div>
+                    <div class="btn-box-price" @click="openChat">立即咨询</div>
                 </div>
             </div>
         </section>
@@ -556,6 +552,9 @@
 const onSwipeCardChange = (index) => {
     cardActive.value = index;
 }
+const openChat = () => {
+    ssq.push('chatOpen');
+}
 </script>
 
 <style lang="less" scoped>
@@ -567,6 +566,7 @@
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
+
     .section-one-content {
         // position: absolute;
         // top: 27px;
@@ -574,16 +574,19 @@
         margin-top: 27px;
         margin-left: 20px;
         text-align: left;
+
         .section-one-content-title {
             font-size: 20px;
             font-weight: bold;
             color: rgba(0, 229, 255, 1);
         }
+
         .section-one-content-subtitle {
             font-size: 18px;
             margin-top: 17px;
             color: rgba(255, 255, 255, 0.8);
         }
+
         .section-one-content-button {
             font-size: 14px;
             color: #fff;
@@ -599,13 +602,16 @@
         }
     }
 }
+
 .section-two {
     width: 100%;
     overflow: hidden;
     position: relative;
+
     .section-two-content {
 
         width: 100%;
+
         .section-two-content-title {
             position: absolute;
             top: 10px;
@@ -615,6 +621,7 @@
             font-weight: bold;
             color: #333333;
         }
+
         .section-two-content-image {
             position: absolute;
             right: -20px;
@@ -622,6 +629,7 @@
             width: 238px;
             height: 140px;
         }
+
         .section-two-content-text {
             font-size: 14px;
             color: #333333;
@@ -631,12 +639,14 @@
         }
     }
 }
+
 .section-three {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 20px;
+
     .section-three-title {
         font-family: PingFang SC;
         font-weight: 600;
@@ -647,11 +657,13 @@
         vertical-align: middle;
         margin-bottom: 16px;
     }
+
     .section-three-image {
         width: 238px;
         height: 140px;
         margin-bottom: 20px;
     }
+
     .section-three-text {
         font-size: 14px;
         color: #333333;
@@ -661,6 +673,7 @@
         margin-right: 20px;
     }
 }
+
 .section-four {
     width: 100%;
     min-height: 400px;
@@ -676,15 +689,19 @@
         text-align: center;
         vertical-align: middle;
     }
+
     .section-four-tabs {
         margin-top: 20px;
+
         /deep/ .van-tabs__nav.van-tabs__nav--line {
             background-color: transparent;
         }
     }
+
     .section-four-swipe-item {
         padding: 8px 15px;
     }
+
     .section-four-tab-title {
         font-family: PingFang SC;
         font-weight: 600;
@@ -695,18 +712,21 @@
         vertical-align: middle;
         margin-bottom: 10px;
     }
+
     .section-four-desc {
         font-size: 14px;
         color: #333333;
         line-height: 30px;
         margin-bottom: 20px;
     }
+
     .section-four-images {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: space-around;
     }
+
     .section-four-images-item {
         width: 154px;
         margin-right: 10px;
@@ -714,9 +734,11 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+
         &:nth-child(2n) {
             margin-right: 0;
         }
+
         .section-four-images-item-image {
             width: 154px;
             height: 154px;
@@ -724,11 +746,13 @@
             display: flex;
             align-items: center;
             justify-content: center;
+
             .image {
                 width: 90px;
                 height: 90px;
             }
         }
+
         .section-four-images-item-text {
             margin-top: 12px;
             font-family: PingFang SC;
@@ -741,10 +765,12 @@
         }
     }
 }
+
 .section-five {
     width: 100%;
     padding: 32px 20px;
     background: url("../assets/image 81.png") no-repeat top right / 38% 57%, linear-gradient(161.52deg, #003EA0 -5.69%, #0AA9F8 55.36%);
+
     .section-five-title {
         font-family: PingFang SC;
         font-weight: 600;
@@ -761,11 +787,13 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+
         .section-five-item-image {
             width: 100px;
             height: 100px;
             border-radius: 10px;
         }
+
         .section-five-item-title {
             font-family: PingFang SC;
             font-size: 12px;
@@ -776,6 +804,7 @@
             margin-top: 6px;
         }
     }
+
     .section-five-text {
         font-family: PingFang SC;
         font-size: 14px;
@@ -785,9 +814,11 @@
         margin-top: 30px;
     }
 }
+
 .section-six {
     width: 100%;
     padding: 32px 20px;
+
     .section-six-title {
         font-family: PingFang SC;
         font-weight: 600;
@@ -797,6 +828,7 @@
         vertical-align: middle;
         color: #000000;
     }
+
     .section-six-text {
         font-family: PingFang SC;
         font-weight: 400;
@@ -807,16 +839,20 @@
         color: #333333;
         margin-top: 10px;
     }
+
     .section-six-items {
         margin-top: 20px;
         display: grid;
-          justify-content: center; /* 整体居中 */
+        justify-content: center;
+        /* 整体居中 */
         grid-template-columns: repeat(3, 0fr);
         gap: 20px;
+
         .section-six-item-image {
             width: 100px;
             height: 100px;
         }
+
         .section-six-item-text {
             font-family: PingFang SC;
             font-weight: 400;
@@ -829,10 +865,12 @@
         }
     }
 }
+
 .section-seven {
     width: 100%;
     padding: 32px 20px;
     background: url("../assets/image 99.png") no-repeat center center / 100% 100%;
+
     .section-seven-title {
         font-family: PingFang SC;
         font-weight: 600;
@@ -842,6 +880,7 @@
         text-align: center;
         margin-bottom: 20px;
     }
+
     .section-seven-text {
         font-family: PingFang SC;
         font-weight: 400;
@@ -852,14 +891,17 @@
         color: #333333;
         margin-bottom: 20px;
     }
+
     .section-seven-image {
         width: 100%;
         height: 130px;
     }
 }
+
 .section-eight {
     width: 100%;
     padding: 32px 20px;
+
     .section-eight-title {
         font-family: PingFang SC;
         font-weight: 600;
@@ -871,24 +913,30 @@
         margin-bottom: 10px;
         text-align: center;
     }
+
     .section-eight-tabs {
         /deep/ .van-tabs__nav.van-tabs__nav--line {
             background-color: transparent;
         }
     }
+
     .section-eight-swipe-item {
         display: grid;
         padding: 8px 0;
-          justify-content: center; /* 整体居中 */
+        justify-content: center;
+        /* 整体居中 */
         grid-template-columns: repeat(3, 0fr);
         gap: 20px;
+
         .section-eight-swipe-item-image {
             width: 85px;
             height: 85px;
+
             &.tab-one {
                 border-radius: 10px;
                 border: 1px solid #ccc;
             }
+
             &.tab-two {
                 width: 85px;
                 height: 85px;
@@ -897,15 +945,18 @@
             }
         }
     }
+
     .section-eight-swipe-item-image {
         width: 120px;
         height: 120px;
     }
 }
+
 .section-nine {
     width: 100%;
     padding: 32px 20px;
     background: url("../assets/Mask group.png") no-repeat top center / contain, #1E9DEC1A;
+
     .section-nine-title {
         font-family: PingFang SC;
         font-weight: 600;
@@ -916,6 +967,7 @@
         margin-bottom: 20px;
         text-align: center;
     }
+
     .section-nine-items {
         display: flex;
         flex-direction: row;
@@ -923,6 +975,7 @@
         justify-content: space-around;
         align-items: center;
         row-gap: 12px;
+
         .section-nine-item {
             width: 103px;
             height: 55px;
@@ -930,9 +983,11 @@
     }
 
 }
+
 .section-ten {
     width: 100%;
     padding: 30px 0;
+
     .section-ten-title {
         font-family: PingFang SC;
         font-weight: 600;
@@ -942,12 +997,14 @@
         text-align: center;
         color: #000000;
     }
+
     .section-ten-items {
         display: grid;
         grid-template-columns: repeat(2, 0fr);
         gap: 8px 10px;
         justify-content: center;
     }
+
     .section-ten-item {
         width: 174px;
         height: 190px;
@@ -956,13 +1013,17 @@
         border-radius: 4px;
         padding: 30px 10px 10px 10px;
         margin-top: 48px;
+
         &:nth-child(2) .section-ten-item-image {
             width: 80px;
             height: 54px;
         }
-          &:nth-child(5), &:nth-child(6) {
+
+        &:nth-child(5),
+        &:nth-child(6) {
             height: 205px;
         }
+
         .section-ten-item-image {
             width: 62px;
             height: 62px;
@@ -973,6 +1034,7 @@
             margin: auto;
 
         }
+
         .section-ten-item-title {
             font-family: PingFang SC;
             font-weight: 600;
@@ -981,6 +1043,7 @@
             letter-spacing: 0%;
             text-align: center;
         }
+
         .section-ten-item-text {
             font-family: PingFang SC;
             font-weight: 400;
@@ -994,6 +1057,7 @@
     }
 
 }
+
 .section-eleven {
     width: 100%;
     height: fit-content;
@@ -1002,6 +1066,7 @@
     align-items: center;
     padding: 32px 20px;
     background: linear-gradient(180deg, rgba(177, 228, 255, 0.5) 0%, rgba(177, 228, 255, 0) 100%);
+
     .section-eleven-title {
         font-family: PingFang SC;
         font-weight: 600;
@@ -1012,6 +1077,7 @@
         color: #000000;
         margin-bottom: 20px;
     }
+
     .price-title {
         font-size: 16px;
         font-weight: 600;
@@ -1043,6 +1109,7 @@
         font-size: 16px;
         color: rgba(102, 102, 102, 1);
     }
+
     .text-price-desc {
         font-family: PingFang SC;
         font-weight: 400;
@@ -1053,6 +1120,7 @@
         color: #666666;
         margin: 20px 20px 50px 20px;
     }
+
     .btn-box-price {
         position: absolute;
         bottom: 30px;
@@ -1072,6 +1140,7 @@
         color: #0D90FF;
         margin: 0 20px;
     }
+
     .btn-box-price-two {
         position: absolute;
         bottom: 30px;
@@ -1090,12 +1159,14 @@
         letter-spacing: 0%;
         color: #fff;
     }
+
     .base-wrap {
         position: relative;
         width: 270px;
         height: 388px;
         border-radius: 14px;
         background-color: #fff;
+
         +.base-wrap {
             margin-top: 24px;
         }
@@ -1151,10 +1222,12 @@
         background: linear-gradient(180deg, #c9e7ff 0%, #ffffff 100%);
     }
 }
+
 .section-twelve {
     width: 100%;
     padding: 20px;
     margin-bottom: 20px;
+
     .section-twelve-title {
         font-family: PingFang SC;
         font-weight: 600;
@@ -1165,18 +1238,20 @@
         color: #000000;
         margin-bottom: 14px;
     }
+
     .section-twelve-image {
         width: 100%;
         height: 100%;
     }
 }
+
 .section-thirteen {
     width: 100%;
     padding: 20px;
     background: linear-gradient(91.27deg, #0D90FF -23.63%, #0D387E 97.65%);
+
     .section-thirteen-title {
         font-family: PingFang SC;
     }
 }
 </style>
-