修改首页

src/App.vue

@@ -10,13 +10,13 @@
         </div>
         <footerbox></footerbox>
       </div>
-      <div class="fixed-message" @click="dialogVisible = true">
+      <!-- <div class="fixed-message" @click="dialogVisible = true">
         <img src="@/assets/img/messageFixed.png" alt="">
         <div class="fixed-message-text">
           Contact with<br/>
           our experts
         </div>
-      </div>
+      </div> -->
     </div>
     <!-- loading -->
     <div class="loading" v-show="loading">

src/view/home/index.vue

@@ -2,18 +2,28 @@
   <div class="box">
       <div class="banner_box">
         <div class="hoem_box">
-          <img class="backout_img" src="@/assets/img/home/home5.jpg" alt="" srcset="" />
+          <img class="backout_img" src="@/assets/img/home/banner2.jpg" alt="" srcset="" />
           <img class="backout_img_move" src="@/assets/img/home/home4.jpg" alt="" srcset="" />
           <div class="banner_content">
             <p class="banner_t">SY-CRS-BsAb</p>
-            <!-- <p class="banner_c">Sanyou Bispecific Reference Antibody Catalog is generated through our proprietary high-quality bispecific antibody preparation platform, which include majority bispecific antibody drugs that have been approved for market release, and representative drugs in different clinical stages.</p> -->
+            <div class="banner_c">
+              <div class="banner_list" v-for="(item, index) in bannerTabList" :key="index" :class="index > 0 ? 'banner_list2' : ''">
+                <div class="ba_l">
+                  <img class="ba_img" :src="item.img" alt="" />
+                </div>
+                <div class="ba_rig">
+                  <div class="ba_tit">{{ item.title }}</div>
+                  <p class="rig_c" v-html="item.content"></p>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
       <!-- 数据 -->
       <div class="list">
         <el-row :gutter="60" class="type_f">
-          <el-col :span="8" v-for="(item, index) in tabList" :key="index">
+          <el-col :span="6" v-for="(item, index) in tabList" :key="index">
             <div class="list_b" @click="$util.goRoute({ name: item.url })">
               <img
                 class="list_img"
@@ -51,6 +61,12 @@ export default {
   data() {
     return {
       tabList: [
+        {
+          id: 1,
+          url: "configuration",
+          img: require("@/assets/img/home/6-19.png"),
+          name: "Overview"
+        },
         {
           id: 1,
           url: "configuration",
@@ -66,9 +82,35 @@ export default {
         {
           id: 3,
           url: "",
-          img: require("@/assets/img/home/home3.png"),
+          img: require("@/assets/img/home/6-20.png"),
           name: "BsAb Reference Catalog "
         }
+      ],
+      bannerTabList: [
+        {
+          id: 1,
+          img: require("@/assets/img/home/m-03.png"),
+          title: "10+",
+          content: "Years experience of antibody discovery"
+        },
+        {
+          id: 2,
+          img: require("@/assets/img/home/m-04.png"),
+          title: "1500+",
+          content: "Customer <br/> services"
+        },
+        {
+          id: 3,
+          img: require("@/assets/img/home/m-05.png"),
+          title: "20000+",
+          content: "Dedicated <br/> R&D area"
+        },
+        {
+          id: 4,
+          img: require("@/assets/img/home/m-06.png"),
+          title: "100000+",
+          content: "Antibodies <br/> production"
+        }
       ]
     };
   },
@@ -108,13 +150,54 @@ export default {
           font-size: 48px;
         }
         .banner_c{
-          width: 600px;
+          width: 1200pX;
           font-size: 14px;
           line-height: 18px;
           font-weight: 400;
+          margin: auto;
           font-family: Source Han Sans CN;
           margin-top: 20px;
           word-wrap:break-word;
+          display: flex;
+          align-items: center;
+          .banner_list{
+            width: 200px;
+            padding: 10px;
+            border-radius: 7px;
+            border: 2px solid #007DDD;
+            display: flex;
+            align-items: center;
+            margin-right: 10px;
+            .ba_l{
+              width: 35px;
+              margin-right: 10px;
+              .ba_img{
+                width: 100%;
+              }
+            }
+            .ba_rig{
+              flex: 1;
+              .ba_tit{
+                text-align: center;
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                font-size: 16px;
+                color: #00F6FF;
+                line-height: 29px;
+              }
+              .rig_c{
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                font-size: 14px;
+                color: #FFFFFF;
+                line-height: 17px;
+                text-align: center;
+              }
+            }
+          }
+          .banner_list2{
+            width: 160px;
+          }
         }
       }
       .backout_img_move{
@@ -303,9 +386,10 @@ export default {
           font-size: 0.2rem;
         }
         .banner_c{
-          font-size: 0.1rem;
-          margin-top: 0.1rem;
-          word-wrap:break-word;
+          // font-size: 0.1rem;
+          // margin-top: 0.1rem;
+          // word-wrap:break-word;
+          display: none;
         }
       }
       .backout_img{