优化

src/view/antibodyDetail/index.vue

@@ -34,16 +34,18 @@
                             <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">{{ overView.heavyChainType }}</p>
+                            <!-- <p class="Background_title">Heavy chain type</p> -->
+                            <p class="Background_title">Isotype</p>
+                            <p class="Background_text">{{ overView.isotype }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Bioavailability</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">{{ overView.genericName }}</p>
+                            <!-- <p class="Background_title">Generic Name</p> -->
+                            <p class="Background_title">Internal Name</p>
+                            <p class="Background_text">{{ overView.internalName }}</p>
                         </div>
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Source</p>
@@ -73,10 +75,10 @@
                             <p class="Background_title">Other Name</p>
                             <p class="Background_text">{{ overView.otherName }}</p>
                         </div>
-                        <div class="Background_content Detail_line">
+                        <!-- <div class="Background_content Detail_line">
                             <p class="Background_title">Light chain type</p>
                             <p class="Background_text">{{ overView.lightChainType }}</p>
-                        </div>
+                        </div> -->
                         <div class="Background_content Detail_line">
                             <p class="Background_title">Half-life</p>
                             <p class="Background_text">{{ overView.halfLife }}</p>
@@ -104,15 +106,15 @@
                     </div>
                     <div class="Background_content">
                         <p class="Background_title">Mechanism ofaction</p>
-                        <div class="Background_text"><p v-for="(one, i) in splitText(overView.mechanismOfActionOne)" :key="i">{{ one }}</p></div>
+                        <div class="Background_text"><p v-for="(one, i) in splitText(overView.mechanismOfActionTwo)" :key="i">{{ one }}</p></div>
                     </div>
                 </div>
             </div>
 
             <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Marketing</p>
-                <div class="Background_box" style="height: 200px;padding: 20px;">
-                    <img style="height: 100%;display: block;margin: auto;" :src="overView.marketingUrl" alt="">
+                <div class="Background_box" style="padding: 20px;">
+                    <img class="marketingUrl" style="width: 60%;display: block;margin: auto;" :src="overView.marketingUrl" alt="">
                 </div>
             </div>
 
@@ -126,7 +128,7 @@
                 </div>
             </div>
 
-            <div class="antibodyDetail_box">
+            <!-- <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Frontier Literature</p>
                 <div class="history_box">
                     <div class="history_content" v-for="(one, index) in overView.frontierLiteratureList" :key="index">
@@ -134,20 +136,21 @@
                         <p>{{ one.contentOne }}</p>
                     </div>
                 </div>
-            </div>
+            </div> -->
 
             <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Data Source</p>
                 <div class="source_box">
-                    <p v-for="(one, index) in overView.dataSourceList" :key="index">[{{ index + 1 }}] {{ one.contentOne }}</p>
+                    <!-- <p v-for="(one, index) in overView.dataSourceList" :key="index">[{{ index + 1 }}] {{ one.contentOne }}</p> -->
+                    <p v-for="(one, index) in sourceList" :key="index">[{{ index + 1 }}] {{ one }}</p>
                 </div>
             </div>
-            <div class="antibodyDetail_box">
+            <!-- <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Patent</p>
                 <div class="source_box">
-                    <p v-for="(one, index) in overView.patentList" :key="index">[{{ index + 1 }}] {{ one.contentTwo }}</p>
+                    <p v-for="(one, index) in sourceList" :key="index">[{{ index + 1 }}] {{ one }}</p>
                 </div>
-            </div>
+            </div> -->
         </div>
     </div>
   </template>
@@ -160,7 +163,8 @@ export default {
   },
   data() {
     return {
-      overView: {}
+      overView: {},
+      sourceList: ["https://go.drugbank.com", "https://clinicaltrials.gov/", "https://en.wikipedia.org", "https://db.dxy.cn"]
     };
   },
   methods: {
@@ -221,6 +225,7 @@ export default {
                 font-size: 14px;
                 line-height: 18px;
                 margin: 10px 0 20px;
+                padding: 10px;
             }
             .Background_box{
                 border: 1px solid #0259AE;
@@ -279,7 +284,7 @@ export default {
                             position: relative;
                         }
                         .Background_img{
-                            position: absolute;
+                            // position: absolute;
                             display: block;
                             min-height: 38px;
                             background: #fff;
@@ -288,9 +293,10 @@ export default {
                             box-sizing: border-box;
                             flex: 1;
                             width: 60%;
-                            left: 50%;
-                            top: 50%;
-                            transform: translate(-50%,-50%);
+                            //left: 50%;
+                            //top: 50%;
+                            // transform: translate(-50%,-50%);
+                            margin: auto;
                         }
                         
                     }
@@ -414,7 +420,7 @@ export default {
                 border: 1px solid #0259AE;
                 padding: 0.05rem 0.1rem;
                 box-sizing: border-box;
-                font-size: 0.14rem;
+                font-size: 0.12rem;
                 line-height: 0.18rem;
                 margin: 0.1rem 0 0.2rem;
             }
@@ -442,6 +448,9 @@ export default {
                         flex: 1;
                     }
                 }
+                .marketingUrl{
+                    width: 90% !important;
+                }
             }
             .Properties_box{
                 // display: flex;
@@ -475,7 +484,7 @@ export default {
                             position: relative;
                         }
                         .Background_img{
-                            position: absolute;
+                            // position: absolute;
                             display: block;
                             min-height: 0.36rem;
                             background: #fff;
@@ -484,9 +493,10 @@ export default {
                             box-sizing: border-box;
                             flex: 1;
                             width: 60%;
-                            left: 50%;
-                            top: 50%;
-                            transform: translate(-50%,-50%);
+                            // left: 50%;
+                            // top: 50%;
+                            // transform: translate(-50%,-50%);
+                            margin: auto;
                         }
                     }
                     .Background_content{