优化全览图,抗体,资料下载

src/components/homeHeader.vue

@@ -207,7 +207,8 @@ export default {
               color: #005bab;
               font-weight: bold;
               &:hover {
-                background-color: #fff;
+                // background-color: #fff;
+
               }
               // &::before {
               //   position: absolute;
@@ -224,8 +225,10 @@ export default {
               }
             }
             .is-active {
-              background-color: #fff;
-              border-bottom: none;
+              // color: #FFF !important;
+              // background-color: #0053a8;
+              // background-color: #fff;
+              // border-bottom: none;
               position: relative;
               &::after {
                 position: absolute;

src/components/tableList.vue

@@ -2,7 +2,7 @@
   <div class="table_box">
     <!-- PC端 -->
     <div class="tableList">
-      <div class="tableList_th" style="user-select: none;">
+      <div class="tableList_th th_head" style="user-select: none;">
         <div style="width: 6%" class="th_tr_b">{{ $t("table.catalog") }}</div>
         <div style="width: 13%;" v-if="type != 2" class="th_tr_b">
           {{ $t("table.productName") }}
@@ -894,6 +894,11 @@ export default {
       cursor: pointer;
     }
   }
+  .th_head{
+    position: sticky;
+    top: 118px;
+    z-index: 9999;
+  }
   .tableList_td {
     background-color: #f0f5fa;
     &:nth-child(odd) {

src/view/overView/index.vue

@@ -5,10 +5,10 @@
       <div class="list_title">
         <div class="title">{{ $t("nav.Overview") }}</div>
         <div class="keyword_box">
-          <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select">
+          <el-input placeholder="Antibody" v-model="keyword" class="input-with-select">
             <el-button class="but_search" slot="append" icon="el-icon-search" @click="search"></el-button>
           </el-input>
-          <el-button class="buttom_box" @click="reset">{{ $t("nav.reset") }}</el-button>
+          <el-button class="buttom_box" icon="el-icon-refresh" @click="reset">{{ $t("nav.reset") }}</el-button>
         </div>
       </div>
       <div class="list_box">
@@ -33,7 +33,7 @@
             </el-col>
           </el-row>
         </div>
-        <div class="title_box" v-if="issshow">{{ $t("nav.other") }}{{ $t("nav.Overview") }}</div>
+        <div class="title_box" v-if="issshow">{{ $t("nav.other") }} {{ $t("nav.Overview") }}</div>
         <div class="list">
           <el-row :gutter="10" style="width: 100%;">
             <el-col :span="4" v-for="(one, i) in otherList" :ref="'bt' + one.id" :key="one.id">
@@ -101,7 +101,7 @@ export default {
     },
     // 搜索
     isBlockInArray(block, array) {
-      return array.some(b => b.catalog === block.catalog || b.name === block.name);
+      return array.some(b => b.catalog === block.catalog || b.name === block.name || b.target === block.target || b.moa === block.moa);
     },
     search() {
       const keyword = this.keyword.trim().toLowerCase();
@@ -109,8 +109,9 @@ export default {
       this.issshow = true
       if (keyword === "") return;
       let matchCount = 0;
+      // 搜索条件 name,catalog, target, moa
       this.overView.forEach(block => {
-        if (block.name.toLowerCase().includes(keyword.toLowerCase()) || block.catalog.toLowerCase().includes(keyword.toLowerCase())) {
+        if (block.name.toLowerCase().includes(keyword.toLowerCase()) || block.catalog.toLowerCase().includes(keyword.toLowerCase()) || block.target.toLowerCase().includes(keyword.toLowerCase()) || block.moa.toLowerCase().includes(keyword.toLowerCase())) {
           if (block.isSliding) return;
           setTimeout(() => {
             block.isSliding = true;
@@ -156,17 +157,22 @@ export default {
   .box {
     .content_box {
       width: 1200px;
-      margin: 30px auto 0;
+      margin: auto;
     }
 
     .list_title {
       // width: 1200px;
       // margin: 30px auto 0;
+      padding-top: 30px;
+      padding-bottom: 30px;
       font-size: 18px;
       font-weight: 600;
       display: flex;
       align-items: center;
-
+      background-color: #fff;
+      position: sticky;
+      top: 0;
+      z-index: 999;;
       .keyword_box {
         width: 50%;
         display: flex;
@@ -203,10 +209,13 @@ export default {
 
     .list_box {
       width: 1200px;
-      margin: 30px auto 90px;
+      margin: 0 auto 90px;
       display: flex;
       align-items: center;
       flex-wrap: wrap;
+      // max-height: 600px;
+      // overflow-y: auto;
+      // overflow-x: hidden;
     }
 
     .title_box {
@@ -297,4 +306,13 @@ export default {
     opacity: 0.8;
   }
 }
-</style>
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 4px;
+  background-color: #B6D1E6;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: #0B72C1;
+}
+</style>

src/view/product/index.vue

@@ -4,15 +4,15 @@
     <div class="antibody_box" ref="tablePar">
       <!-- 搜索 -->
       <el-form :inline="true" :model="form" class="demo-form-inline">
-        <el-form-item :label="$t('RelatedArticles.AntibodyName')+':'">
-          <el-input v-model="form.name" placeholder=""></el-input>
+        <el-form-item label="Antibody:">
+          <el-input class="input-with-select" v-model="form.keyword" placeholder=""></el-input>
         </el-form-item>
-        <el-form-item :label="$t('AntibodyDatabase.TargetName')+':'">
+        <!-- <el-form-item :label="$t('AntibodyDatabase.TargetName')+':'">
           <el-input v-model="form.target" placeholder=""></el-input>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">{{ $t("nav.inquire") }}</el-button>
-          <el-button type="danger" @click="reset">{{ $t("nav.reset") }}</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="onSubmit">Search</el-button>
+          <el-button type="danger" icon="el-icon-refresh" @click="reset">{{ $t("nav.reset") }}</el-button>
         </el-form-item>
       </el-form>
        <!-- 列表 -->
@@ -48,8 +48,7 @@ export default {
   data() {
     return {
       form: {
-        name: "",
-        target: "",
+        keyword: "",
         sortKey: undefined,
         sortValue: undefined 
       },
@@ -68,8 +67,7 @@ export default {
     // 重置
     reset() {
       this.form = {
-        name: "",
-        target: ""
+        keyword: ""
       };
       this.pageable.page = 0;
       this.postlist();
@@ -176,7 +174,25 @@ export default {
 .antibody_box {
   display: block !important;
   width: 1200px;
-  margin: 40px auto 0;
+  margin: auto ;
+  .demo-form-inline{
+    padding-top: 40px;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 9999;
+    display: flex;
+    align-self: center;
+  }
+  .input-with-select /deep/{
+    width: 300px;
+    border:1px solid #007BC4;
+    border-radius: 4px;
+    overflow: hidden;
+    .el-input__inner{
+      border: none!important;
+    }
+  }
   .clout_box {
     margin-bottom: 2rem;
     .title {

src/view/profile/index.vue

@@ -20,13 +20,16 @@
           <i class="el-icon-close icon"></i>
         </div>
         <div class="title">{{ $t("nav.MaterialsDownload") }}</div>
-        <div class="pop_hea">
+        <!-- <div class="pop_hea">
           <div class="biaoti">{{ profile.title }}</div>
           <div class="hea_icon" @click="downloadPdf(profile.link, profile.title)">
             <i class="el-icon-download"></i>
           </div>
-        </div>
+        </div> -->
         <div class="pop_img">
+          <div class="hea_icon" @click="downloadPdf(profile.link, profile.title)">
+            <i class="el-icon-download"></i>
+          </div>
           <img class="image" :src="profile.contentImg" alt="">
         </div>
       </div>
@@ -97,24 +100,28 @@ export default {
       width: 20%;
     }
     .content{
-      height: 340px;
+      // height: 310px;
       background: #F4F8FF;
       // border-radius: 20px;
       border-radius: 5px 21px 21px 5px;
-      padding: 20px;
+      padding:0 10px 10px;
       margin-bottom: 20px;
       cursor: pointer;
       &:hover{
         box-shadow: 0px 0px 18px 0px rgba(0,72,255,0.58);
       }
       .profile-img{
-        width: 190px;
+        width: 100%;
       }
       .text{
         font-size: 14px;
         line-height: 20px;
         word-wrap: break-word;
         margin-top: 4px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
       }
     }
   }
@@ -130,20 +137,20 @@ export default {
   z-index: 999;
   .pop_content{
     max-width: 1200px;
-    width: 500px;
+    width: 580px;
     background: #fff;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    padding: 20px;
+    padding: 10px;
     .dele_icon{
       display: block;
       position: absolute;
-      top: -20px;
-      right: -120px;
+      top:10px;
+      right: 10px;
       color: #035AA8;
-      font-size: 28px;
+      font-size: 24px;
       cursor: pointer;
     }
     .title{
@@ -157,11 +164,13 @@ export default {
       align-items: center;
       justify-content: space-between;
       .biaoti{
+        flex: 1;
         font-size: 16px;
         font-weight: 500;
         color: #000;
       }
       .hea_icon{
+        margin-left: 20px;
         color: #035AA8;
         font-size: 28px;
         font-weight: 600;
@@ -172,6 +181,16 @@ export default {
       box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.3);
       margin-top: 20px;
       border-radius: 20px;
+      position: relative;
+      .hea_icon{
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        color: #035AA8;
+        font-size: 28px;
+        font-weight: 600;
+        cursor: pointer;
+      }
       .image{
         display: block;
         width: 100%