src/router/routerList.js

@@ -18,8 +18,7 @@ export default [
       requireLogin: true,
       fullScreen: true
     }
-  },
-  {
+  }, {
     path: "/product",
     name: "product",
     component: () => import("@/view/product/index"),
@@ -62,5 +61,27 @@ export default [
       navActive: "Privacy Policy", // 匹配路由名字 隐私政策
       fullScreen: false
     }
+  }, {
+    path: "/overView",
+    name: "overView",
+    component: () => import("@/view/overView/index"),
+    hidden: true,
+    meta: {
+      pageTitle: "overView",
+      chineseTitle: "蛋白计算器",
+      navActive: "overView",
+      fullScreen: false
+    }
+  }, {
+    path: "/article",
+    name: "article",
+    component: () => import("@/view/article/index"),
+    hidden: true,
+    meta: {
+      pageTitle: "article",
+      chineseTitle: "蛋白计算器",
+      navActive: "article",
+      fullScreen: false
+    }
   }
 ]

src/view/article/index.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="box">
+        <banner></banner>
+        <div class="article">
+            <template>
+                <el-table
+                    :data="list"
+                    stripe
+                    style="width: 100%">
+                    <el-table-column type="index" label="序号" width="80" />
+                    <el-table-column prop="name" label="货号" />
+                    <el-table-column prop="name" label="原研公司" />
+                    <el-table-column
+                        prop="date"
+                        label="MOA"
+                        width="180"
+                        column-key="date"
+                        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
+                        :filter-method="filterHandler"
+                        >
+                    </el-table-column>
+                    <el-table-column prop="name" label="上市国家" />
+                    <el-table-column prop="name" label="抗体名称" />
+                    <el-table-column prop="name" label="文章题目" />
+                </el-table>
+            </template>
+        </div>
+    </div>
+  </template>
+<script>
+import banner from "@/components/banner";
+export default {
+  name: "article",
+  components: {
+    banner
+  },
+  data() {
+    return {
+      list: [
+        {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }
+      ]
+    };
+  },
+  methods: {
+  },
+  mounted() {},
+  created() {
+  }
+};
+</script>
+  <style lang="scss">
+  .site-header-suggestion-select {
+    .el-autocomplete-suggestion__wrap {
+      max-height: 380px;
+    }
+  }
+  </style>
+  <style lang="scss" scoped>
+  @media screen and (min-width: 751px) and (max-width: 9999px) {
+    .box {
+      .article /deep/{
+        .el-table__row td{
+            background-color: #fff !important;
+        }
+        .el-table__row--striped td{
+            background-color: #F0FAFE !important;
+        }
+      }
+    }
+  }
+  </style>

src/view/overView/index.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="box">
+        <banner></banner>
+        <div class="list">
+            <div class="format-box" v-for="(one, i) in list" :key="i">
+                <div class="images_box">
+                    <p class="images_title">CHBA068</p>
+                    <img class="icons-item-imgbox" :src="one.fileUrl">
+                    <p class="images_weight">Blinatumomab</p>
+                    <p class="images_text">TCE 54.05</p>
+                    <p class="images_text">kDa</p>
+                    <p class="images_text">(Amgen)</p>
+                    <p class="images_footer">US, Approved</p>
+                </div>
+            </div>
+        </div>
+    </div>
+  </template>
+<script>
+import banner from "@/components/banner";
+export default {
+  name: "overView",
+  components: {
+    banner
+  },
+  data() {
+    return {
+      list: [
+        {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }, {
+          name: "12",
+          fileUrl: "/static/img/mRNA1.af470f1.jpg"
+        }
+      ]
+    };
+  },
+  methods: {
+  },
+  mounted() {},
+  created() {
+  }
+};
+</script>
+  <style lang="scss">
+  .site-header-suggestion-select {
+    .el-autocomplete-suggestion__wrap {
+      max-height: 380px;
+    }
+  }
+  </style>
+  <style lang="scss" scoped>
+  @media screen and (min-width: 751px) and (max-width: 9999px) {
+    .box {
+      .list{
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        margin: 10px 0.5%;
+        .format-box{
+            width: 16.5%;
+            border: 1px solid #DDDDDD;
+            transition: transform 0.3s ease;
+            .images_box{
+                padding: 8px;
+                box-sizing: border-box;
+                text-align: center;
+                .images_title{
+                    font-size: 12px;
+                    font-weight: 600;
+                    text-align: left;
+                }
+                .images_weight{
+                    font-size: 14px;
+                    font-weight: 600;
+                }
+                .images_text{
+                    font-size: 12px;
+                }
+                .images_footer{
+                    font-size: 12px;
+                    margin-top: 10px;
+                }
+                .icons-item-imgbox{
+                    width: 100%;
+                    height: 100px;
+                }
+            }
+        }
+        .format-box:hover{
+            transform-origin: 0% 0;
+            transform: scale(1.5);
+            border: 1px solid #007BC4;
+            background: #fff;
+            z-index: 999;
+        }
+      }
+    }
+  }
+  </style>