双抗详情

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">{{ overView.summary }}</div>
+                <div class="Detail_boxContent"> <p v-for="(one, i) in splitText(overView.summary)" :key="i">{{ one }}</p></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">{{ overView.relationshipToDisease }}</p>
+                        <div class="Background_text"><p v-for="(one, i) in splitText(overView.relationshipToDisease)" :key="i">{{ one }}</p></div>
                     </div>
                     <div class="Background_content">
                         <p class="Background_title">Mechanism of action</p>
-                        <p class="Background_text">{{ overView.mechanismOfActionOne }}</p>
+                        <div class="Background_text"><p v-for="(one, i) in splitText(overView.mechanismOfActionOne)" :key="i">{{ one }}</p></div>
                     </div>
                 </div>
             </div>
@@ -51,9 +51,9 @@
                         </div>
                         <div class="Background_bottom">
                             <p class="Background_title">Conditions</p>
-                            <p class="Background_text">
-                                <span class="drop">・</span><span v-html="formatText(overView.conditions)"></span>
-                            </p>
+                            <div class="Background_text">
+                                <p v-for="(one, i) in splitText(overView.conditions)" :key="i"><span class="drop">・</span>{{one}}</p>
+                            </div>
                         </div>
                     </div>
                     <div class="Properties_content Properties_Right">
@@ -87,7 +87,9 @@
                         </div>
                         <div class="Background_bottom">
                             <p class="Background_title">Structure</p>
-                            <img class="Background_img" :src="overView.structureUrl" alt="">
+                            <div class="Background_text">
+                                <img class="Background_img" :src="overView.structureUrl" alt="">
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -155,43 +157,28 @@
                 <div class="Background_box">
                     <div class="Background_content Detail_line">
                         <p class="Background_title">Toxicity</p>
-                        <p class="Background_text">{{ overView.toxicity }}</p>
+                        <div class="Background_text"><p v-for="(one, i) in splitText(overView.toxicity)" :key="i">{{ one }}</p></div>
                     </div>
                     <div class="Background_content">
                         <p class="Background_title">Mechanism ofaction</p>
-                        <p class="Background_text">{{ overView.mechanismOfActionOne }}</p>
+                        <div class="Background_text"><p v-for="(one, i) in splitText(overView.mechanismOfActionOne)" :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;">
+                <div class="Background_box" style="height: 200px;padding: 20px;">
+                    <img style="height: 100%;display: block;margin: auto;" :src="overView.marketingUrl" alt="">
                 </div>
             </div>
 
             <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">History</p>
                 <div class="history_box">
-                    <div class="history_content">
+                    <div class="history_content" v-for="(one, i) in splitText(overView.history)" :key="i">
                         <p class="drop">・</p>
-                        <p>Adalimumab was the first fully human monoclonal antibody approved by the US Foodand Drug Administration (FDA). The drug candidate was discovered initially using CAT'sphage display technology and named D2E7.</p>
-                    </div>
-                    <div class="history_content">
-                        <p class="drop">・</p>
-                        <p>Adalimumab was the first fully human monoclonal antibody approved by the US Foodand Drug Administration (FDA). The drug candidate was discovered initially using CAT'sphage display technology and named D2E7.</p>
-                    </div>
-                    <div class="history_content">
-                        <p class="drop">・</p>
-                        <p>Adalimumab was the first fully human monoclonal antibody approved by the US Foodand Drug Administration (FDA). The drug candidate was discovered initially using CAT'sphage display technology and named D2E7.</p>
-                    </div>
-                    <div class="history_content">
-                        <p class="drop">・</p>
-                        <p>Adalimumab was the first fully human monoclonal antibody approved by the US Foodand Drug Administration (FDA). The drug candidate was discovered initially using CAT'sphage display technology and named D2E7.</p>
-                    </div>
-                    <div class="history_content">
-                        <p class="drop">・</p>
-                        <p>Adalimumab was the first fully human monoclonal antibody approved by the US Foodand Drug Administration (FDA). The drug candidate was discovered initially using CAT'sphage display technology and named D2E7.</p>
+                        <p>{{ one }}</p>
                     </div>
                 </div>
             </div>
@@ -199,25 +186,9 @@
             <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Frontier Literature</p>
                 <div class="history_box">
-                    <div class="history_content">
-                        <p class="drop">・</p>
-                        <p>Adalimumab was the first fully human monoclonal antibody approved by the US Foodand Drug Administration (FDA). The drug candidate was discovered initially using CAT'sphage display technology and named D2E7.</p>
-                    </div>
-                    <div class="history_content">
-                        <p class="drop">・</p>
-                        <p>Adalimumab was the first fully human monoclonal antibody approved by the US Foodand Drug Administration (FDA). The drug candidate was discovered initially using CAT'sphage display technology and named D2E7.</p>
-                    </div>
-                    <div class="history_content">
-                        <p class="drop">・</p>
-                        <p>Adalimumab was the first fully human monoclonal antibody approved by the US Foodand Drug Administration (FDA). The drug candidate was discovered initially using CAT'sphage display technology and named D2E7.</p>
-                    </div>
-                    <div class="history_content">
-                        <p class="drop">・</p>
-                        <p>Adalimumab was the first fully human monoclonal antibody approved by the US Foodand Drug Administration (FDA). The drug candidate was discovered initially using CAT'sphage display technology and named D2E7.</p>
-                    </div>
-                    <div class="history_content">
+                    <div class="history_content" v-for="(one, index) in overView.frontierLiteratureList" :key="index">
                         <p class="drop">・</p>
-                        <p>Adalimumab was the first fully human monoclonal antibody approved by the US Foodand Drug Administration (FDA). The drug candidate was discovered initially using CAT'sphage display technology and named D2E7.</p>
+                        <p>{{ one.contentOne }}</p>
                     </div>
                 </div>
             </div>
@@ -225,21 +196,13 @@
             <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Data Source</p>
                 <div class="source_box">
-                    <p>[1] https://go.drugbank.com/drugs/DB00051</p>
-                    <p>[1] https://go.drugbank.com/drugs/DB00051</p>
-                    <p>[1] https://go.drugbank.com/drugs/DB00051</p>
-                    <p>[1] https://go.drugbank.com/drugs/DB00051</p>
-                    <p>[1] https://go.drugbank.com/drugs/DB00051</p>
+                    <p v-for="(one, index) in overView.dataSourceList" :key="index">[{{ index + 1 }}] {{ one.contentOne }}</p>
                 </div>
             </div>
             <div class="antibodyDetail_box">
                 <p class="Detail_boxTitle">Patent</p>
                 <div class="source_box">
-                    <p>[1] https://go.drugbank.com/drugs/DB00051</p>
-                    <p>[1] https://go.drugbank.com/drugs/DB00051</p>
-                    <p>[1] https://go.drugbank.com/drugs/DB00051</p>
-                    <p>[1] https://go.drugbank.com/drugs/DB00051</p>
-                    <p>[1] https://go.drugbank.com/drugs/DB00051</p>
+                    <p v-for="(one, index) in overView.patentList" :key="index">[{{ index + 1 }}] {{ one.contentOne }}</p>
                 </div>
             </div>
         </div>
@@ -258,6 +221,12 @@ export default {
     };
   },
   methods: {
+    // 根据;;分割字符串
+    splitText(text) {
+      if (text) {
+        return text.split(";;");
+      }
+    },
     changeSearchById() {
       this.$api.post("/basb/searchById", {
         id: this.$route.query.id
@@ -308,11 +277,11 @@ export default {
                 box-sizing: border-box;
                 font-size: 14px;
                 line-height: 18px;
-                margin: 5px 0 20px;
+                margin: 10px 0 20px;
             }
             .Background_box{
                 border: 2px solid #0259AE;
-                margin: 5px 0 20px;
+                margin: 10px 0 20px;
                 font-size: 14px;
                 line-height: 18px;
                 .Background_content{
@@ -340,7 +309,7 @@ export default {
                 .Properties_content{
                     width: 50%;
                     border: 2px solid #0259AE;
-                    margin: 5px 0 20px;
+                    margin: 10px 0 20px;
                     font-size: 14px;
                     line-height: 18px;
                     display: flex;
@@ -364,17 +333,23 @@ export default {
                             box-sizing: border-box;
                             flex: 1;
                             height: 100%;
+                            position: relative;
                         }
                         .Background_img{
+                            position: absolute;
+                            display: block;
                             min-height: 38px;
                             background: #fff;
-                            border-left: 1px solid #DDDDDD;
+                            // border-left: 1px solid #DDDDDD;
                             padding: 10px;
                             box-sizing: border-box;
                             flex: 1;
-                            height: 100%;
-                            width: 100px;
+                            width: 60%;
+                            left: 50%;
+                            top: 50%;
+                            transform: translate(-50%,-50%);
                         }
+                        
                     }
                     .Background_content{
                         display: flex;
@@ -443,11 +418,11 @@ export default {
             }
             .history_box{
                 border: 2px solid #0259AE;
-                padding: 5px 10px;
+                padding: 20px 10px;
                 box-sizing: border-box;
                 font-size: 14px;
                 line-height: 18px;
-                margin: 5px 0 20px;
+                margin: 10px 0 20px;
                 .history_content{
                     display: flex;
                     margin-bottom: 15px;
@@ -455,11 +430,11 @@ export default {
             }
             .source_box{
                 border: 2px solid #0259AE;
-                padding: 5px 10px;
+                padding: 20px 10px;
                 box-sizing: border-box;
                 font-size: 14px;
                 line-height: 22px;
-                margin: 5px 0 20px;
+                margin: 10px 0 20px;
                 color: #0259AE;
             }
         }