1

src/view/antibody/index.vue

@@ -36,7 +36,7 @@
                   v-model="targetList"
                   @change="targetChange"
                 >
-                  <el-checkbox class="list_checkbox" v-for="(item, index) in targetObject.show ? targetObject.list : targetObject.list.slice(0, 12)" :key="index" :label="item.name">
+                  <el-checkbox class="list_checkbox" v-for="(item, index) in targetObject.show ? targetObject.list : targetObject.list.slice(0, !$util.isMobileDevice() ? 12 : 0)" :key="index" :label="item.name">
                     <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start" v-if="item.name.length > 20">
                       <span> {{subString(item.sampleName, 20)}}</span>
                     </el-tooltip>
@@ -57,7 +57,7 @@
                   v-model="companyList"
                   @change="companyChange"
                 >
-                  <el-checkbox class="list_checkbox" v-for="(item, index) in companyObject.show ? companyObject.list : companyObject.list.slice(0, 12)" :key="index" :label="item.name">
+                  <el-checkbox class="list_checkbox" v-for="(item, index) in companyObject.show ? companyObject.list : companyObject.list.slice(0, !$util.isMobileDevice() ? 12 : 0)" :key="index" :label="item.name">
                     <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start" v-if="item.name.length > 20">
                       <span> {{subString(item.sampleName, 20)}}</span>
                     </el-tooltip>
@@ -101,8 +101,8 @@
                     empty-text="Not Date"
                     style="width: 100%"
                     @row-click="gotoArticle">
-                    <el-table-column prop="catalog" :label="$t('AntibodyDatabase.CatNo')" />
-                    <el-table-column prop="name" :label="$t('AntibodyDatabase.AntibodyName')" />
+                    <el-table-column prop="catalog" width="74" :label="$t('AntibodyDatabase.CatNo')" />
+                    <el-table-column prop="name" width="104"  :label="$t('AntibodyDatabase.AntibodyName')" />
                     <el-table-column prop="target" :label="$t('AntibodyDatabase.Target')" >
                       <template slot-scope="scope">
                         <span>{{ $util.targetDictionaries(scope.row.target) }}</span>
@@ -389,8 +389,72 @@ export default {
       }
       // 筛选项
       .classificationMenu {
-       display: none;
+        margin-bottom: 0.2rem;
+        .list {
+          border-bottom: 1px solid #ededed;
+          .list-name {
+            width: 100%;
+            min-height: 0.4rem;
+            background: #dff3ff;
+            font-size: 16px;
+            font-family: Arial;
+            color: #000;
+            padding-left: 0.2rem;
+            display: flex;
+            align-items: center;
+          }
+          .SpeciesBox{
+            padding: 0.1rem 0.15rem;
+          }
+          .list-s /deep/ {
+            position: relative;
+            background: #F7FAFF;
+            // padding:0 0.15rem;
+            .SpeciesBox_list{
+              max-height: 310px;
+              overflow-y: auto;
+            }
+            .list_tit{
+              font-size: 14px;
+              margin-bottom: .1rem;
+              background: #dff3ff;
+              line-height: 0.4rem;
+              padding-left: 0.1rem;
+            }
+            .SpeciesBox_list2{
+              padding:0 0.1rem;
+            }
+            .SpeciesImg{
+              position: absolute;
+              top: 0.14rem;
+              right: 0.1rem;
+              width: 26px;
+              height: 14px;
+              padding: 0 5px;
+              background: #005bab;
+              border-radius: 2px;
+            }
+            .SpeciesBox_name{
+              font-size: 14px;
+              line-height: 1;
+              margin-bottom: 0.1rem;
+            }
+            .el-checkbox {
+              padding: 6px 0;
+              .el-checkbox__label {
+                font-size: 12px;
+                font-family: Arial;
+                color: #000;
+              }
+            }
+            .is-checked {
+              .el-checkbox__label {
+                color: #005bab;
+              }
+            }
+          }
+        }
       }
     }
   }
-  </style>
+  </style>

src/view/antibodyDetail/index.vue

@@ -2,7 +2,8 @@
     <div class="box">
         <banner></banner>
         <div class="article">
-            <p class="antibodyDetail_title">Adalimumab</p>
+            <!-- <p class="antibodyDetail_title">Adalimumab</p> -->
+             <p class="antibodyDetail_title">Database</p>
             <div class="antibodyDetail_box" v-if="overView.summary && overView.summary != 'NA'">
                 <p class="Detail_boxTitle">Summary</p>
                 <div class="Detail_boxContent"> <p v-for="(one, i) in splitText(overView.summary)" :key="i">{{ one }}</p></div>

src/view/home/index.vue

@@ -2,6 +2,7 @@
   <div class="box">
        <div class="banner">
         <img class="backout_img" src="@/assets/img/doubleAntibody/S5.jpg" alt="" srcset="" />
+        <img class="backout_img_move" src="@/assets/img/home/m4.png" alt="" srcset="" />
        </div>
        <div class="serviceBox">
           <div class="serviceBoxOne">
@@ -11,11 +12,13 @@
             <p class="serviceText">Sanyou Bio offers a validated collection of 73 reference BsAb covering major platforms (CrossMab, BiTE®, etc.), supporting end-to-end R&D from candidate screening to preclinical evaluation. SY-CRS-BsAb solutions accelerate development by addressing key technical challenges and improving efficiency.</p>
             <div class="homeBox">
               <div class="homeBoxLeft">
-                <img class="homeBoxLeftImg" src="@/assets/img/doubleAntibody/S7.png" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="!$util.isMobileDevice()" src="@/assets/img/doubleAntibody/S7.png" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="$util.isMobileDevice()" src="@/assets/img/home/m1.png" alt="" srcset="" />
                 <p class="homeBoxLeftText">SY-CRS-BsAb Isotype Distribution</p>
               </div>
               <div class="homeBoxLeft">
-                <img class="homeBoxLeftImg" src="@/assets/img/doubleAntibody/S8.png" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="!$util.isMobileDevice()" src="@/assets/img/doubleAntibody/S8.png" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="$util.isMobileDevice()" src="@/assets/img/home/m3.png" alt="" srcset="" />
                 <p class="homeBoxLeftText">SY-CRS-BsAb Target Distribution</p>
               </div>
             </div>
@@ -23,7 +26,8 @@
           <div class="serviceBoxOne">
             <p class="serviceBoxOneTitle">Manufacturing Process</p>
             <div class="serviceTopTitle">SY-CRS-BsAb Produciton Process Flow</div>
-            <img class="serviceBoxOneImg" src="@/assets/img/doubleAntibody/S6.png" alt="" srcset="" />
+            <img class="serviceBoxOneImg" v-if="!$util.isMobileDevice()" src="@/assets/img/doubleAntibody/S6.png" alt="" srcset="" />
+            <img class="serviceBoxOneImg" v-if="$util.isMobileDevice()" src="@/assets/img/home/m2.png" alt="" srcset="" />
           </div>
           <div class="serviceBoxOne">
             <p class="serviceBoxOneTitle">Quality Management System</p>
@@ -33,6 +37,7 @@
                   <el-table
                       :data="overView"
                       stripe
+                      border
                       empty-text="Not Date"
                       style="width: 100%">
                       <el-table-column prop="data" label="Data"/>
@@ -45,18 +50,22 @@
             <p class="serviceBoxOneTitle">Production Experience</p>
             <div class="homeBox">
               <div class="homeBoxLeft">
-                <img class="homeBoxLeftImg" src="@/assets/img/doubleAntibody/S1.jpg" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="!$util.isMobileDevice()" src="@/assets/img/doubleAntibody/S1.jpg" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="$util.isMobileDevice()" src="@/assets/img/home/m5.png" alt="" srcset="" />
               </div>
               <div class="homeBoxLeft">
-                <img class="homeBoxLeftImg" src="@/assets/img/doubleAntibody/S2.jpg" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="!$util.isMobileDevice()" src="@/assets/img/doubleAntibody/S2.jpg" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="$util.isMobileDevice()" src="@/assets/img/home/m6.png" alt="" srcset="" />
               </div>
             </div>
             <div class="homeBox">
               <div class="homeBoxLeft">
-                <img class="homeBoxLeftImg" src="@/assets/img/doubleAntibody/S3.jpg" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="!$util.isMobileDevice()" src="@/assets/img/doubleAntibody/S3.jpg" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="$util.isMobileDevice()" src="@/assets/img/home/m7.png" alt="" srcset="" />
               </div>
               <div class="homeBoxLeft">
-                <img class="homeBoxLeftImg" src="@/assets/img/doubleAntibody/S4.jpg" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="!$util.isMobileDevice()" src="@/assets/img/doubleAntibody/S4.jpg" alt="" srcset="" />
+                <img class="homeBoxLeftImg" v-if="$util.isMobileDevice()" src="@/assets/img/home/m8.png" alt="" srcset="" />
               </div>
             </div>
           </div>
@@ -112,6 +121,9 @@ export default {
       .backout_img{
         width: 100%;
       }
+      .backout_img_move{
+        display: none;
+      }
     }
     .serviceBox{
       background: #f4f2f2;
@@ -221,4 +233,138 @@ export default {
     }
   }
 }
+@media screen and (min-width: 0) and (max-width: 750px) {
+  .box {
+    .banner{
+      .backout_img{
+        display: none;
+      }
+      .backout_img_move{
+        width: 100%;
+      }
+    }
+    .serviceBox{
+      background: #f4f2f2;
+      overflow: hidden;
+      padding: 0 20px;
+      .serviceBoxOne{
+        width: 100%;
+          margin: 30px auto 0;
+          background: #fff;
+          padding: 20px;
+          box-sizing: border-box;
+          .serviceText{
+            font-weight: 400;
+            font-size: 14px;
+            color: #000000;
+            line-height: 24px;
+            margin-bottom: 20px;
+          }
+          .homeBox{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            .homeBoxLeft{
+              width: 100%;
+              border: 1px solid #F4F2F2;
+              padding: 20px 40px;
+              box-sizing: border-box;
+              .homeBoxLeftImg{
+                width: 100%;
+              }
+              .homeBoxLeftText{
+                // font-weight: bold;
+                font-family: Source Han Sans CN;
+                font-size: 14px;
+                color: #000000;
+                line-height: 24px;
+                text-align: center;
+                margin-top: 10px;
+              }
+            }
+            .homeBoxLeft:nth-child(1){
+              margin-bottom: 20px;
+            }
+          }
+          .serviceBoxOneTitle{
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 20px;
+            color: #000000;
+            line-height: 24px;
+            margin-bottom: 30px;
+          }
+          .serviceTopTitle{
+              font-family: Source Han Sans CN;
+              font-size: 16px;
+              color: #fff;
+              padding: 15px 0;
+              box-sizing: border-box;
+              text-align: center;
+              font-weight: 600;
+              background: linear-gradient(90deg, #1880C1, #22AB3A);
+          }
+          .serviceBoxOneImg{
+            width: 100%;
+            margin-top: 45px;
+          }
+          .article /deep/{
+            .has-gutter th{
+              background-color: #075BA9 !important;
+              .cell{
+                color: #fff;
+              }
+            }
+            .el-table__header-wrapper th{
+              background-color: #075BA9 !important;
+              .cell{
+                color: #fff;
+              }
+            }
+            .cell{
+              color: #000;
+              text-align: center;
+            }
+            .el-table__row td{
+                background-color: #fff !important;
+            }
+            .el-table__row--striped td{
+                background-color: #EAF9FF !important;
+            }
+          }
+      }
+      .serviceBoxTwo{
+        // width: 1200px;
+        margin: 30px auto 70px;
+        background: #fff;
+        padding: 35px 20px;
+        box-sizing: border-box;
+        .serviceBoxOneTitle{
+          font-weight: bold;
+          font-size: 20px;
+          color: #000000;
+          line-height: 24px;
+          margin-bottom: 10px;
+        }
+        .homeBox{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          // margin-top: 25px;
+          .homeBoxLeft{
+            width: 100%;
+            border: 1px solid #F4F2F2;
+            text-align: center;
+            margin-top: 20px;
+            .homeBoxLeftImg{
+              // width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>