优化

src/components/homeHeader.vue

@@ -13,7 +13,8 @@
             <el-menu-item index="article">相关文章</el-menu-item>
             <el-menu-item index="product">产品详情</el-menu-item>
             <el-menu-item index="antibody">抗体数据库</el-menu-item>
-            <el-menu-item index="profile">资料下载</el-menu-item>
+            <!-- <el-menu-item index="profile">资料下载</el-menu-item> -->
+            <el-menu-item index="">资料下载</el-menu-item>
           </el-menu>
 
         </div>
@@ -37,7 +38,8 @@
             <el-menu-item index="article">相关文章</el-menu-item>
             <el-menu-item index="product">产品详情</el-menu-item>
             <el-menu-item index="antibody">抗体数据库</el-menu-item>
-            <el-menu-item index="profile">资料下载</el-menu-item>
+            <!-- <el-menu-item index="profile">资料下载</el-menu-item> -->
+            <el-menu-item index="">资料下载</el-menu-item>
             <!-- <el-menu-item index="contact">{{ $t("button.contactUs") }}</el-menu-item> -->
           </el-menu>
         </div>

src/view/antibody/index.vue

@@ -57,7 +57,7 @@ export default {
   },
   mounted() {},
   created() {
-    this.changeSearchAll()
+    // this.changeSearchAll()
   }
 };
 </script>
@@ -85,9 +85,11 @@ export default {
         }
         .el-table__row td{
             background-color: #fff !important;
+            cursor: pointer;
         }
         .el-table__row--striped td{
             background-color: #F0FAFE !important;
+            cursor: pointer;
         }
       }
     }

src/view/antibodyDetail/index.vue

@@ -5,18 +5,18 @@
             <p class="antibodyDetail_title">Adalimumab</p>
             <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Summary</p>
-                <div class="Detail_boxContent">Adalimumab is a monoclonal anti-tumor necrosis factor alpha antibody used inthe treatment of a wide variety of inflammatory conditions such as rheumatoidarthritis, Crohn's disease, and ankylosing spondylitis.</div>
+                <div class="Detail_boxContent">{{ overView.summary }}</div>
             </div>
             <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Background</p>
                 <div class="Background_box">
                     <div class="Background_content Detail_line">
                         <p class="Background_title">Relationship to Disease</p>
-                        <p class="Background_text">Adalimumab is a subcutaneously administered biological diseasemodifier for the treatment of rheumatoid arthritis and other chronicdebilitating diseases mediated by tumor necrosis factor</p>
+                        <p class="Background_text">{{ overView.relationshipToDisease }}</p>
                     </div>
                     <div class="Background_content">
                         <p class="Background_title">Mechanism of action</p>
-                        <p class="Background_text">Adalimumab binds with specificity to tumor necrosis factor-alpha(TNF-alpha) and inhibits its interaction with the p55 and p75 cellsurface TNF receptors.Increased levels of TNF are also measured inpsoriasis plaques. In plaque psoriasis, treatment with adalimumabmay decrease the epidermal thickness and inflammatory cellinfiltration.</p>
+                        <p class="Background_text">{{ overView.mechanismOfActionOne }}</p>
                     </div>
                 </div>
             </div>
@@ -27,27 +27,27 @@
                     <div class="Properties_content">
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Company</p>
-                            <p class="Background_text">Abbvie</p>
+                            <p class="Background_text">{{ overView.company }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Actions</p>
-                            <p class="Background_text">Inhibitor antibody</p>
+                            <p class="Background_text">{{ overView.actions }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Heavy chain type</p>
-                            <p class="Background_text">IgG1</p>
+                            <p class="Background_text">{{ overView.heavyChainType }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Bioavailability</p>
-                            <p class="Background_text">64% (subcutaneous), 0% (By mouth)</p>
+                            <p class="Background_text">{{ overView.bioavailability }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Generic Name</p>
-                            <p class="Background_text">Adalimumab</p>
+                            <p class="Background_text">{{ overView.genericName }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Source</p>
-                            <p class="Background_text">Phage display</p>
+                            <p class="Background_text">{{ overView.source }}</p>
                         </div>
                         <div class="Background_content">
                             <p class="Background_title">Conditions</p>
@@ -65,35 +65,35 @@
                     </div>
                     <div class="Properties_content Properties_Right">
                         <div class="Background_content Detail_line">
-                            <p class="Background_title">Company</p>
-                            <p class="Background_text">Abbvie</p>
+                            <p class="Background_title">Brand names</p>
+                            <p class="Background_text">{{ overView.source }}</p>
                         </div>
                         <div class="Background_content Detail_line">
-                            <p class="Background_title">Actions</p>
-                            <p class="Background_text">Inhibitor antibody</p>
+                            <p class="Background_title">Biologic Classification</p>
+                            <p class="Background_text">{{ overView.source }}</p>
                         </div>
                         <div class="Background_content Detail_line">
-                            <p class="Background_title">Heavy chain type</p>
+                            <p class="Background_title">Target</p>
                             <p class="Background_text">IgG1</p>
                         </div>
                         <div class="Background_content Detail_line">
-                            <p class="Background_title">Bioavailability</p>
+                            <p class="Background_title">Other Name</p>
                             <p class="Background_text">64% (subcutaneous), 0% (By mouth)</p>
                         </div>
                         <div class="Background_content Detail_line">
-                            <p class="Background_title">Generic Name</p>
+                            <p class="Background_title">Light chain type</p>
                             <p class="Background_text">Adalimumab</p>
                         </div>
                         <div class="Background_content Detail_line">
-                            <p class="Background_title">Source</p>
+                            <p class="Background_title">Half-life</p>
                             <p class="Background_text">Phage display</p>
                         </div>
                         <div class="Background_content Detail_line">
-                            <p class="Background_title">Source</p>
+                            <p class="Background_title">Protein Weight (KDa)</p>
                             <p class="Background_text">Phage display</p>
                         </div>
                         <div class="Background_content" style="min-height: 130px;">
-                            <p class="Background_title">Conditions</p>
+                            <p class="Background_title">Structure</p>
                             <p class="Background_text" style="min-height: 130px;">
                             </p>
                         </div>
@@ -105,11 +105,11 @@
                 <p class="Detail_boxTitle">Clinical Trials</p>
                 <div class="Clinical_box">
                     <div class="Clinical_top Detail_line">
+                        <p class="Background_title line_right">NCT Number</p>
+                        <p class="Background_title line_right">Stage</p>
+                        <p class="Background_title line_right">Status</p>
                         <p class="Background_title line_right">Company</p>
-                        <p class="Background_title line_right">Company</p>
-                        <p class="Background_title line_right">Company</p>
-                        <p class="Background_title line_right">Company</p>
-                        <p class="Background_text">Company</p>
+                        <p class="Background_text">Condition</p>
                     </div>
                     <div class="Clinical_scoll">
                         <div class="Background_content Detail_line">
@@ -162,11 +162,11 @@
                 <p class="Detail_boxTitle">Toxicity and side effects</p>
                 <div class="Background_box">
                     <div class="Background_content Detail_line">
-                        <p class="Background_title">Relationship to Disease</p>
+                        <p class="Background_title">Toxicity</p>
                         <p class="Background_text">Adalimumab is a subcutaneously administered biological diseasemodifier for the treatment of rheumatoid arthritis and other chronicdebilitating diseases mediated by tumor necrosis factor</p>
                     </div>
                     <div class="Background_content">
-                        <p class="Background_title">Mechanism of action</p>
+                        <p class="Background_title">Mechanism ofaction</p>
                         <p class="Background_text">Adalimumab binds with specificity to tumor necrosis factor-alpha(TNF-alpha) and inhibits its interaction with the p55 and p75 cellsurface TNF receptors.Increased levels of TNF are also measured inpsoriasis plaques. In plaque psoriasis, treatment with adalimumabmay decrease the epidermal thickness and inflammatory cellinfiltration.</p>
                     </div>
                 </div>

src/view/article/index.vue

@@ -107,9 +107,11 @@ export default {
         }
         .el-table__row td{
             background-color: #fff !important;
+            cursor: pointer;
         }
         .el-table__row--striped td{
             background-color: #F0FAFE !important;
+            cursor: pointer;
         }
       }
     }

src/view/articleDetail/index.vue

@@ -7,7 +7,7 @@
             <p class="return-text">Back</p>
           </div>
           <p class="article_title">{{ overView.articleTitle }}</p>
-          <p class="article_text">{{ overView.articleContent }}</p>
+          <p class="article_text" v-html="overView.articleContent"></p>
         </div>
     </div>
   </template>

src/view/overView/index.vue

@@ -2,18 +2,20 @@
     <div class="box">
         <banner></banner>
         <p class="list_title">全览图</p>
-        <div class="list">
-            <div class="format-box" v-for="(one, i) in overView" :key="i">
-                <div class="images_box">
-                    <p class="images_title">{{one.catalog}}</p>
-                    <img class="icons-item-imgbox" src="@/assets/img/Mab004.jpg">
-                    <p class="images_weight">{{ one.name }}</p>
-                    <p class="images_text">{{one.moa}} </p>
-                    <p class="images_text">{{one.proteinWeight}}</p>
-                    <p class="images_text">({{one.company}})</p>
-                    <p class="images_footer">{{one.country}}, {{ one.stage }}</p>
-                </div>
-            </div>
+        <div class="list_box">
+          <div class="list" v-for="(item, index) in overView" :key="index" :class="index % 2 == 0 ? '' : 'list_active'">
+              <div class="format-box" v-for="(one, i) in item" :key="i">
+                  <div class="images_box">
+                      <p class="images_title">{{one.catalog}}</p>
+                      <img class="icons-item-imgbox" src="@/assets/img/Mab004.jpg">
+                      <p class="images_weight">{{ one.name }}</p>
+                      <p class="images_text">{{one.moa}} </p>
+                      <p class="images_text">{{one.proteinWeight}}</p>
+                      <p class="images_text">({{one.company}})</p>
+                      <p class="images_footer">{{one.country}}, {{ one.stage }}</p>
+                  </div>
+              </div>
+          </div>
         </div>
     </div>
   </template>
@@ -30,11 +32,20 @@ export default {
     };
   },
   methods: {
+    // 重组数据,没6条数据一组
+    recombination(list) {
+      let arr = []
+      for (let i = 0; i < list.length; i += 6) {
+        arr.push(list.slice(i, i + 6))
+      }
+      this.overView = arr
+    },
     changeSearchAll() {
       this.$api.post("/basb/searchAll", {
       }).then(res => {
         console.log(res)
-        this.overView = res.data
+        this.recombination(res.data)
+        // this.overView = res.data
       })
     }
   },
@@ -60,13 +71,21 @@ export default {
         font-size: 18px;
         font-weight: 600;
       }
-      .list{
+      .list_box{
         width: 1200px;
         margin: 30px auto 90px;
         display: flex;
         align-items: center;
         flex-wrap: wrap;
+      }
+      .list{
+        // width: 1200px;
+        // margin: 30px auto 90px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
         // margin: 10px 0.5%;
+        background-color: #fff;
         .format-box{
             width: 16.5%;
             border: 1px solid #DDDDDD;
@@ -98,14 +117,29 @@ export default {
                 }
             }
         }
+        .bg-color{
+          background-color: #007BC4;
+        }
         .format-box:hover{
             transform-origin: 0% 0;
-            transform: scale(1.5);
+            transform: scale(1.2);
             border: 1px solid #007BC4;
             background: #fff;
             z-index: 999;
         }
       }
+      .list_active{
+        .format-box{
+          background-color: #F0FAFE;
+          &:hover{
+            transform-origin: 0% 0;
+            transform: scale(1.2);
+            border: 1px solid #007BC4;
+            background: #F0FAFE;
+            z-index: 999;
+          }
+        }
+      }
     }
   }
   </style>