wei

src/components/banner/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="banner_box">
     <div class="hoem_box">
-      <img class="backout_img" src="@/assets/img/banner/mRNA1.jpg" alt="" srcset="" />
+      <img class="backout_img" src="@/assets/img/bannerLogo.jpg" alt="" srcset="" />
+      <div class="banner_content">
+        <p class="banner_title">双特异性抗体参比品</p>
+        <p class="banner_text">Bispecific reference antibody</p>
+      </div>
       <img class="backout_img_move" src="@/assets/img/banner/mRNA1.jpg" alt="" srcset="" />
     </div>
   </div>
@@ -35,144 +39,26 @@ export default {
         // height: 698px;
         // height: 30rem;
       }
-      .backout_img_move{
-        display: none;
-      }
-      .clout {
-        position: absolute;
-        // width: 1200px;
+      .banner_content{
         width: 100%;
-        left: 50%;
-        bottom: 0%;
-        transform: translate(-50%, 0%);
-        text-align: center;
-        .title {
-          font-size: 3.75rem;
-          text-align: center;
-          margin-bottom: 1rem;
-          font-family: Arial;
-          font-weight: 600;
-          color: #ffffff;
-          white-space: nowrap;
-        }
-        .title_img{
-          margin-bottom: 1.8rem;
-          width: 23rem;
-        }
-        .title_d {
-          margin-bottom: 7.5rem;
-          font-size: 2rem;
-          font-family: Arial;
-          font-weight: 400;
-          color: #fff;
-          line-height: 1;
-          text-align: center;
-          white-space: nowrap;
-        }
-        .title_d_move{
-          display: none;
-        }
-        .clout_banner_box{
-          width: 100%;
-          height: 119px;
-          // opacity: 0.15;
-          background: rgba(22, 88, 160, 0.15);
-          display: flex;
-          align-items: center;
-        }
-        .clout_box{
+        position: absolute;
+        top: 150px;
+        left: 0;
+        color: #fff;
+        .banner_title{
           width: 1200px;
           margin: 0 auto;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          .clout_box_content{
-            width: 24%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .clout_left_content{
-              display: flex;
-              align-items: center;
-              .clout_box_img{
-                margin-right: 11px;
-              }
-              .clout_details{
-                text-align: left;
-                .clout_box_num{
-                  font-family: Source Han Sans CN;
-                  font-weight: bold;
-                  font-size: 18px;
-                  color: #FFFFFF;
-                  line-height: 24px;
-                }
-                .clout_box_text{
-                  font-family: Source Han Sans CN;
-                  font-weight: bold;
-                  font-size: 18px;
-                  color: #FFFFFF;
-                  line-height: 24px;
-                }
-              }
-            }
-            .clout_line{
-              width: 1px;
-              height: 20px;
-              background: #FFFFFF;
-              opacity: 0.32;
-            }
-          }
-          .clout_box_content:last-child .clout_line{
-            display: none;
-          }
+          font-size: 32px;
         }
-        .input /deep/ {
-          width: 60%;
-          margin: 3.2rem auto 0;
-          .input-with-select {
-            height: 3.375rem;
-            .el-input__inner {
-              height: 3.375rem;
-              &:focus {
-                border-color: #fff;
-              }
-            }
-            .el-input-group__append {
-              width: 3.375rem;
-              background-color: #0053a8;
-              border: none;
-              .el-icon-search {
-                color: #fff;
-              }
-            }
-          }
+        .banner_text{
+          width: 1200px;
+          margin: 15px auto 0;
+          font-size: 22px;
         }
       }
-    }
-    .list {
-      width: 1200px;
-      // width: 62.5%;
-      margin: 30px auto 90px;
-      .type_t {
+      .backout_img_move{
         display: none;
       }
-      .list_b {
-        cursor: pointer;
-        .list_img {
-          width: 100%;
-        }
-        .list_title {
-          font-size: 18px;
-          margin-top: 12px;
-          font-family: Arial;
-          font-weight: 400;
-          text-align: center;
-          // color: #005bab;
-        }
-      }
-    }
-    .footerbox {
-      display: none;
     }
   }
 }

src/view/antibody/index.vue

@@ -57,7 +57,7 @@ export default {
   },
   mounted() {},
   created() {
-    // this.changeSearchAll()
+    this.changeSearchAll()
   }
 };
 </script>

src/view/antibodyDetail/index.vue

@@ -49,59 +49,51 @@
                             <p class="Background_title">Source</p>
                             <p class="Background_text">{{ overView.source }}</p>
                         </div>
-                        <div class="Background_content">
+                        <div class="Background_bottom">
                             <p class="Background_title">Conditions</p>
                             <p class="Background_text">
-                                <span class="drop">・</span>Ankylosing Spondylitis<br/>
-                                <span class="drop">・</span>Ankylosing Spondylitis<br/>
-                                <span class="drop">・</span>Ankylosing Spondylitis<br/>
-                                <span class="drop">・</span>Ankylosing Spondylitis<br/>
-                                <span class="drop">・</span>Ankylosing Spondylitis<br/>
-                                <span class="drop">・</span>Ankylosing Spondylitis<br/>
-                                <span class="drop">・</span>Ankylosing Spondylitis<br/>
-                                <span class="drop">・</span>Ankylosing Spondylitis
+                                <span class="drop">・</span><span v-html="formatText(overView.conditions)"></span>
                             </p>
                         </div>
                     </div>
                     <div class="Properties_content Properties_Right">
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Brand names</p>
-                            <p class="Background_text">{{ overView.source }}</p>
+                            <p class="Background_text">{{ overView.brandNames }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Biologic Classification</p>
-                            <p class="Background_text">{{ overView.source }}</p>
+                            <p class="Background_text">{{ overView.biologicClassification }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Target</p>
-                            <p class="Background_text">IgG1</p>
+                            <p class="Background_text">{{ overView.target }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Other Name</p>
-                            <p class="Background_text">64% (subcutaneous), 0% (By mouth)</p>
+                            <p class="Background_text">{{ overView.otherName }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Light chain type</p>
-                            <p class="Background_text">Adalimumab</p>
+                            <p class="Background_text">{{ overView.lightChainType }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Half-life</p>
-                            <p class="Background_text">Phage display</p>
+                            <p class="Background_text">{{ overView.halfLife }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Protein Weight (KDa)</p>
-                            <p class="Background_text">Phage display</p>
+                            <p class="Background_text">{{ overView.proteinWeight }}</p>
                         </div>
-                        <div class="Background_content" style="min-height: 130px;">
+                        <div class="Background_bottom">
                             <p class="Background_title">Structure</p>
-                            <p class="Background_text" style="min-height: 130px;">
-                            </p>
+                            <img class="Background_img" :src="overView.structureUrl" alt="">
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div class="antibodyDetail_box">
+            <!-- <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Clinical Trials</p>
                 <div class="Clinical_box">
                     <div class="Clinical_top Detail_line">
@@ -156,18 +148,18 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> -->
 
             <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Toxicity and side effects</p>
                 <div class="Background_box">
                     <div class="Background_content Detail_line">
                         <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>
+                        <p class="Background_text">{{ overView.toxicity }}</p>
                     </div>
                     <div class="Background_content">
                         <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>
+                        <p class="Background_text">{{ overView.mechanismOfActionOne }}</p>
                     </div>
                 </div>
             </div>
@@ -273,6 +265,9 @@ export default {
         console.log(res)
         this.overView = res.data
       })
+    },
+    formatText(text) {
+      return text.replace(/;;/g, "<br>");
     }
   },
   mounted() {},
@@ -331,6 +326,7 @@ export default {
                         color: #0259AE;
                     }
                     .Background_text{
+                        min-height: 38px;
                         background: #fff;
                         border-left: 1px solid #DDDDDD;
                         padding: 10px;
@@ -347,8 +343,39 @@ export default {
                     margin: 5px 0 20px;
                     font-size: 14px;
                     line-height: 18px;
-                    // display: flex;
-                    // flex-direction: column;
+                    display: flex;
+                    flex-direction: column;
+                    .Background_bottom{
+                        display: flex;
+                        align-items: center;
+                        background: #F0FAFE;
+                        flex: 1;
+                        .Background_title{
+                            width: 240px;
+                            padding: 10px;
+                            box-sizing: border-box;
+                            color: #0259AE;
+                        }
+                        .Background_text{
+                            min-height: 38px;
+                            background: #fff;
+                            border-left: 1px solid #DDDDDD;
+                            padding: 10px;
+                            box-sizing: border-box;
+                            flex: 1;
+                            height: 100%;
+                        }
+                        .Background_img{
+                            min-height: 38px;
+                            background: #fff;
+                            border-left: 1px solid #DDDDDD;
+                            padding: 10px;
+                            box-sizing: border-box;
+                            flex: 1;
+                            height: 100%;
+                            width: 100px;
+                        }
+                    }
                     .Background_content{
                         display: flex;
                         align-items: center;
@@ -360,6 +387,7 @@ export default {
                             color: #0259AE;
                         }
                         .Background_text{
+                            min-height: 38px;
                             background: #fff;
                             border-left: 1px solid #DDDDDD;
                             padding: 10px;