src/router/routerList.js

@@ -62,15 +62,14 @@ export default [
       fullScreen: true
     }
   }, {
-    path: '/mycart',
-    name: 'mycart',
-    component: () => import('@/view/mycart/index'),
+    path: "/mycart",
+    name: "mycart",
+    component: () => import("@/view/mycart/index"),
     hidden: true,
     meta: {
-      pageTitle: 'My Cart',
-      chineseTitle: '购物车',
-      navActive: 'Mycart', // 购物车页
-      fullScreen: true
+      pageTitle: "My Cart",
+      chineseTitle: "购物车",
+      navActive: "Mycart" // 购物车页
     }
   }, {
     path: "/overView",
@@ -81,7 +80,7 @@ export default [
       pageTitle: "overView",
       chineseTitle: "全览图",
       navActive: "overView",
-      fullScreen: false
+      fullScreen: true
     }
   }, {
     path: "/article",
@@ -92,7 +91,7 @@ export default [
       pageTitle: "article",
       chineseTitle: "相关文章",
       navActive: "article",
-      fullScreen: false
+      fullScreen: true
     }
   }, {
     path: "/profile",
@@ -114,7 +113,18 @@ export default [
       pageTitle: "antibody",
       chineseTitle: "抗体数据库",
       navActive: "antibody",
-      fullScreen: false
+      fullScreen: true
+    }
+  }, {
+    path: "/antibodyDetail",
+    name: "antibodyDetail",
+    component: () => import("@/view/antibodyDetail/index"),
+    hidden: true,
+    meta: {
+      pageTitle: "antibodyDetail",
+      chineseTitle: "抗体数据库详情",
+      navActive: "antibodyDetail",
+      fullScreen: true
     }
   }
 ]

src/view/antibody/index.vue

@@ -94,6 +94,8 @@ export default {
   @media screen and (min-width: 751px) and (max-width: 9999px) {
     .box {
       .article /deep/{
+        width: 1200px;
+        margin: 30px auto 90px;
         .el-table__row td{
             background-color: #fff !important;
         }

src/view/antibodyDetail/index.vue

@@ -0,0 +1,337 @@
+<template>
+    <div class="box">
+        <banner></banner>
+        <div class="article">
+            <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>
+            <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>
+                    </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>
+                    </div>
+                </div>
+            </div>
+
+            <div class="antibodyDetail_box">
+                <p class="Detail_boxTitle">Properties</p>
+                <div class="Properties_box">
+                    <div class="Properties_content">
+                        <div class="Background_content Detail_line">
+                            <p class="Background_title">Company</p>
+                            <p class="Background_text">Abbvie</p>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <p class="Background_title">Actions</p>
+                            <p class="Background_text">Inhibitor antibody</p>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <p class="Background_title">Heavy chain type</p>
+                            <p class="Background_text">IgG1</p>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <p class="Background_title">Bioavailability</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_text">Adalimumab</p>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <p class="Background_title">Source</p>
+                            <p class="Background_text">Phage display</p>
+                        </div>
+                        <div class="Background_content">
+                            <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
+                            </p>
+                        </div>
+                    </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>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <p class="Background_title">Actions</p>
+                            <p class="Background_text">Inhibitor antibody</p>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <p class="Background_title">Heavy chain type</p>
+                            <p class="Background_text">IgG1</p>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <p class="Background_title">Bioavailability</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_text">Adalimumab</p>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <p class="Background_title">Source</p>
+                            <p class="Background_text">Phage display</p>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <p class="Background_title">Source</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_text" style="min-height: 130px;">
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="antibodyDetail_box">
+                <p class="Detail_boxTitle">Clinical Trials</p>
+                <div class="Clinical_box">
+                    <div class="Clinical_top Detail_line">
+                        <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>
+                    </div>
+                    <div class="Clinical_scoll">
+                        <div class="Background_content Detail_line">
+                            <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>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <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>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <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>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <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>
+                        </div>
+                        <div class="Background_content Detail_line">
+                            <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>
+                        </div>
+                        <div class="Background_content">
+                            <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>
+                        </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">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>
+                    </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>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+  </template>
+<script>
+import banner from "@/components/banner";
+export default {
+  name: "antibodyDetail",
+  components: {
+    banner
+  },
+  data() {
+    return {
+      list: [
+        {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }
+      ]
+    };
+  },
+  methods: {
+  },
+  mounted() {},
+  created() {
+  }
+};
+</script>
+<style lang="scss" scoped>
+  @media screen and (min-width: 751px) and (max-width: 9999px) {
+    .box {
+      .article{
+        width: 1200px;
+        margin: 30px auto 90px;
+        .Detail_line{
+            border-bottom: 1px solid #DDDDDD;
+        }
+        .line_right{
+            border-right: 1px solid #DDDDDD;
+        }
+        .drop{
+            color: #0259AE;
+            font-size: 18px;
+        }
+        .antibodyDetail_title{
+            font-size: 20px;
+            font-weight: 600;
+        }
+        .antibodyDetail_box{
+            margin-top: 20px;
+            .Detail_boxTitle{
+                font-size: 16px;
+                font-weight: 600;
+            }
+            .Detail_boxContent{
+                border: 2px solid #0259AE;
+                padding: 5px 10px;
+                box-sizing: border-box;
+                font-size: 14px;
+                line-height: 18px;
+                margin: 5px 0 20px;
+            }
+            .Background_box{
+                border: 2px solid #0259AE;
+                margin: 5px 0 20px;
+                font-size: 14px;
+                line-height: 18px;
+                .Background_content{
+                    display: flex;
+                    align-items: center;
+                    background: #F0FAFE;
+                    .Background_title{
+                        width: 240px;
+                        padding: 10px;
+                        box-sizing: border-box;
+                        color: #0259AE;
+                    }
+                    .Background_text{
+                        background: #fff;
+                        border-left: 1px solid #DDDDDD;
+                        padding: 10px;
+                        box-sizing: border-box;
+                        flex: 1;
+                    }
+                }
+            }
+            .Properties_box{
+                display: flex;
+                .Properties_content{
+                    width: 50%;
+                    border: 2px solid #0259AE;
+                    margin: 5px 0 20px;
+                    font-size: 14px;
+                    line-height: 18px;
+                    // display: flex;
+                    // flex-direction: column;
+                    .Background_content{
+                        display: flex;
+                        align-items: center;
+                        background: #F0FAFE;
+                        .Background_title{
+                            width: 240px;
+                            padding: 10px;
+                            box-sizing: border-box;
+                            color: #0259AE;
+                        }
+                        .Background_text{
+                            background: #fff;
+                            border-left: 1px solid #DDDDDD;
+                            padding: 10px;
+                            box-sizing: border-box;
+                            flex: 1;
+                        }
+                    }
+                }
+                .Properties_Right{
+                    border-left: none !important;
+                }
+            }
+            .Clinical_box{
+                border: 2px solid #0259AE;
+                margin: 5px 0 20px;
+                font-size: 14px;
+                line-height: 18px;
+                .Clinical_top{
+                    display: flex;
+                    align-items: center;
+                    background: #F0FAFE;
+                    color: #0259AE;
+                    padding-right: 16px;
+                    .Background_title{
+                        width: 15%;
+                        padding: 10px ;
+                        box-sizing: border-box;
+                    }
+                    .Background_text{
+                        width: 40%;
+                        padding: 10px ;
+                        box-sizing: border-box;
+                    }
+                }
+                .Clinical_scoll{
+                    height: 190px;
+                    overflow-y: scroll;
+                    .Background_content{
+                        display: flex;
+                        align-items: center;
+                        .Background_title{
+                            width: 15%;
+                            padding: 10px ;
+                            box-sizing: border-box;
+                        }
+                        .Background_text{
+                            width: 40%;
+                            padding: 10px ;
+                            box-sizing: border-box;
+                        }
+                    }
+                }
+            }
+        }
+      }
+    }
+  }
+</style>

src/view/article/index.vue

@@ -104,6 +104,8 @@ export default {
   @media screen and (min-width: 751px) and (max-width: 9999px) {
     .box {
       .article /deep/{
+        width: 1200px;
+        margin: 30px auto 90px;
         .el-table__row td{
             background-color: #fff !important;
         }

src/view/overView/index.vue

@@ -93,10 +93,12 @@ export default {
   @media screen and (min-width: 751px) and (max-width: 9999px) {
     .box {
       .list{
+        width: 1200px;
+        margin: 30px auto 90px;
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        margin: 10px 0.5%;
+        // margin: 10px 0.5%;
         .format-box{
             width: 16.5%;
             border: 1px solid #DDDDDD;