wei

src/components/homeHeader.vue

@@ -33,10 +33,10 @@
           </div>
           <!-- 移动端菜单 -->
           <el-menu class="el-menu-demo" default-active="1" background-color="#005bab" text-color="#ffffff" active-text-color="#ffffff" @select="handleSelect">
-            <el-menu-item index="contact">全览图</el-menu-item>
-            <el-menu-item index="contact">相关文章</el-menu-item>
+            <el-menu-item index="overView">全览图</el-menu-item>
+            <el-menu-item index="article">相关文章</el-menu-item>
             <el-menu-item index="product">产品详情</el-menu-item>
-            <el-menu-item index="contact">抗体数据库</el-menu-item>
+            <el-menu-item index="antibody">抗体数据库</el-menu-item>
             <el-menu-item index="profile">资料下载</el-menu-item>
             <!-- <el-menu-item index="contact">{{ $t("button.contactUs") }}</el-menu-item> -->
           </el-menu>

src/router/routerList.js

@@ -26,7 +26,7 @@ export default [
     meta: {
       pageTitle: "product",
       requireLogin: true,
-      fullScreen: false
+      fullScreen: true
     }
   }, {
     path: "/products/:id/:name/:catalog",
@@ -34,10 +34,10 @@ export default [
     component: () => import("@/view/product/details"),
     hidden: true,
     meta: {
-      pageTitle: "Product Detail",
-      chineseTitle: "产品详情",
-      navActive: "Product detail", // 匹配路由名字 产品详情
-      fullScreen: false
+      pageTitle: 'Product Detail',
+      chineseTitle: '产品详情',
+      navActive: 'Product detail', // 匹配路由名字 产品详情
+      fullScreen: true
     }
   }, {
     path: "/inquiry",
@@ -45,10 +45,10 @@ export default [
     component: () => import("@/view/inquiry/index"),
     hidden: true,
     meta: {
-      pageTitle: "Inquiry",
-      chineseTitle: "询价",
-      navActive: "inquiry", // 匹配路由名字 询价页inquiry
-      fullScreen: false
+      pageTitle: 'Inquiry',
+      chineseTitle: '询价',
+      navActive: 'inquiry', // 匹配路由名字 询价页
+      fullScreen: true
     }
   }, {
     path: "/privacy-policy",
@@ -59,7 +59,7 @@ export default [
       pageTitle: "Privacy Policy",
       chineseTitle: "隐私政策",
       navActive: "Privacy Policy", // 匹配路由名字 隐私政策
-      fullScreen: false
+      fullScreen: true
     }
   }, {
     path: "/mycart",
@@ -104,7 +104,7 @@ export default [
       navActive: "profile",
       fullScreen: true
     }
-  }, {
+  },{
     path: "/antibody",
     name: "antibody",
     component: () => import("@/view/antibody/index"),

src/view/home/index.vue

@@ -1,89 +1,63 @@
 <template>
   <div class="box">
-      <banner></banner>
-      <div class="list">
-        <el-row :gutter="14" class="type_f">
-          <el-col :span="6">
-            <div class="list_b" @click="$util.goRoute({ name: 'oneClickPlus' })">
-              <div class="list_title">mRNA</div>
-              <div class="slideBox">
-                <img
-                  class="list_img"
-                  src="@/assets/img/banner/mRNA2.png"
-                  alt=""
-                  srcset=""
-                />
-                <div class="slideBoxText">
-                  <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">mRNA Preparation</p></div>
-                  <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">mRNA-LNP Packaging & Quality control</p></div>
-                  <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">Kits</p></div>
-                </div>
-              </div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="list_b" @click="$util.goRoute({ name: 'oneClickPlus' })">
-              <div class="list_title">Mrna Mab</div>
-              <div class="slideBox">
-                <img
-                  class="list_img"
-                  src="@/assets/img/banner/mRNA3.png"
-                  alt=""
-                  srcset=""
-                />
-                <div class="slideBoxText">
-                  <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">Immunization</p></div>
-                </div>
-              </div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="list_b" @click="$util.goRoute({ name: 'oneClickPlus' })">
-              <div class="list_title">Mrna Car-T</div>
-              <div class="slideBox">
-                <img
-                  class="list_img"
-                  src="@/assets/img/banner/mRNA4.png"
-                  alt=""
-                  srcset=""
-                />
-                <div class="slideBoxText">
-                </div>
-              </div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="list_b" @click="$util.goRoute({ name: 'oneClickPlus' })">
-              <div class="list_title">Application Cases</div>
-              <div class="slideBox">
-                <img
-                  class="list_img"
-                  src="@/assets/img/banner/mRNA5.png"
-                  alt=""
-                  srcset=""
-                />
-                <div class="slideBoxText">
-                  <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">Mrna Mab cases</p></div>
-                  <div class="slideBoxcenter"><span class="slideBoxDrop">·</span><p class="slideBoxTitle">Mrna Car-T cases</p></div>
-                </div>
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-
-      </div>
+    <div class="banner">
+      <img class="banner_img" src="@/assets/img/home/banner.png" alt="" srcset="">
+    </div>
+    <div class="muen">
+      <el-tabs v-model="activeName" tab-position="left" style="height:400px;">
+        <el-tab-pane v-for="(one, i) in list" :key="i" :name="one.name">
+          <div class="tab-title" slot="label">
+            <img class="icon" :src="one.icon" alt="" srcset="">
+            {{one.title}}
+          </div>
+          <div class="contetn_box">
+            {{one.title}}
+          </div>
+        </el-tab-pane>
+      </el-tabs>
     </div>
   </div>
 </template>
 <script>
-import banner from "@/components/banner";
 export default {
   name: "indexIndex",
   components: {
-    banner
   },
   data() {
     return {
+      activeName: "",
+      list: [
+        {
+          name: "overall",
+          icon: require("@/assets/img/home/icon1.png"),
+          title: "整体外包",
+          comment: "overall"
+        },
+        {
+          name: "stage",
+          icon: require("@/assets/img/home/icon2.png"),
+          title: "阶段外包",
+          comment: "stage"
+        },
+        {
+          name: "antibody",
+          icon: require("@/assets/img/home/icon3.png"),
+          title: "抗体产生",
+          comment: "antibody"
+        },
+        {
+          name: "grafting",
+          icon: require("@/assets/img/home/icon4.png"),
+          title: "赋能嫁接",
+          comment: "grafting"
+        },
+        {
+          name: "protein",
+          icon: require("@/assets/img/home/icon5.png"),
+          title: "蛋白业务",
+          comment: "protein"
+        }
+      ]
     };
   },
   methods: {
@@ -93,88 +67,53 @@ export default {
   }
 };
 </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 {
+  .box /deep/ {
+    position: relative;
+    .banner{
+      width: 100%;
+      height: 649px;
+    }
+    .muen{
       width: 1200px;
-      margin: 30px auto 90px;
-      .type_t {
+      position: absolute;
+      left: 50%;
+      top: 20%;
+      transform: translateX(-50%);
+    }
+    .el-tabs__header{
+      background-color: #0C5ADB;
+      .el-tabs__nav-wrap:after{
         display: none;
       }
-      .list_b {
-        height: 260px;
-        cursor: pointer;
-        padding-top: 25px;
-        .slideBox{
-          .list_img {
-            width: 100%;
-            height: 160px;
-          }
-          .slideBoxText{
-            width: 100%;
-            height: 160px;
-            background: #dff3fe;
-            padding: 20px 10px;
-            box-sizing: border-box;
-            color: #0053a8;
-            font-size: 16px;
-            line-height: 24px;
-            display: none;
-            .slideBoxcenter{
-              display: flex;
-              .slideBoxDrop{
-                font-weight: 800;
-              }
-              .slideBoxTitle{
-                padding-left: 10px;
-                display: inline-block;
-              }
-            }
-          }
+      .el-tabs__nav-scroll{
+        .el-tabs__nav{
+          overflow: hidden;
         }
-        @keyframes move {
-          0% {
-            transform: translate(0, 0);
-            opacity: 0;
-          }
-          100% {
-            transform: translate(0, 0);
-            opacity: 1;
+        .el-tabs__item{
+          color: #fff;
+          width: 200px;
+          line-height: 80px;
+          height: 80px;
+          .tab-title{
+            display: flex;
+            align-items: center;
+            line-height: 80px;
+            height: 80px;
+            .icon{
+              display: inline-block;
+              width: 16px;
+              margin-right: 10px;
+            }
           }
         }
-        .slideBox:hover .list_img{
-          display: none;
-        }
-        .slideBox:hover .slideBoxText{
-          display: block;
-          animation: move;
-          animation-duration: .5s;
-          animation-fill-mode: forwards;
-        }
-        .list_title {
-          height: 50px;
-          background: #055AA8;
-          font-size: 16px;
-          margin-bottom: 5px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          line-height: 50px;
-          text-align: center;
-          color: #fff;
+        .is-active{
+          background-color: #1266F0 ;
         }
       }
     }
-    .footerbox {
-      display: none;
-    }
   }
+
 }
 </style>

src/view/inquiry/index.vue

@@ -1,204 +1,210 @@
 <template>
-  <div class="box">
-    <div class="topbox">
-      {{ $t("message.ProductInquiry") }}
-    </div>
-    <div class="contentbox">
-      <div class="topcontentbox">
-        <p>
-          <!-- Tips -->
-          {{ $t("inquiry.Tips") }}
-        </p>
-        <p>
-          <!-- Please leave us a message if you have any questions about our products. We will contact you within 24 hours by email. -->
-          {{ $t("inquiry.PleaseLeave") }}
-        </p>
+  <div class="content">
+    <banner></banner>
+    <div class="box">
+      <div class="topbox">
+        {{ $t("message.ProductInquiry") }}
       </div>
+      <div class="contentbox">
+        <div class="topcontentbox">
+          <p>
+            <!-- Tips -->
+            {{ $t("inquiry.Tips") }}
+          </p>
+          <p>
+            <!-- Please leave us a message if you have any questions about our products. We will contact you within 24 hours by email. -->
+            {{ $t("inquiry.PleaseLeave") }}
+          </p>
+        </div>
 
-      <div class="bottomcontentbox_b">
-        <p>
-          <!-- Product Information -->
-          {{ $t("inquiry.ProductInformation") }}
-        </p>
-        <div class="bottomcontentbox">
-          <el-form :inline="true">
-            <el-form-item>
-              <div class="input_box">
-                <span>
-                  <!-- Quick Add  -->
-                  {{ $t("inquiry.QuickAdd") }}:
-                </span>
-                <el-input
-                  class="catalogInput"
-                  v-model="catalog"
-                  placeholder=""
-                ></el-input>
-                <span @click="searchByCatalog">{{
-                  $t("button.addQuoteForm")
-                }}</span>
-              </div>
-            </el-form-item>
-            <el-form-item>
-              <div class="sample_info">
-                <el-form :inline="true">
-                  <el-form-item>
-                    <span style="color:#E50113">{{
-                      $t("inquiry.getFreeSampleInfo1")
-                    }}</span>
-                  </el-form-item>
-                  <el-form-item>
-                    <span style="color:#606266">{{
-                      $t("inquiry.getFreeSampleInfo2")
-                    }}</span>
-                  </el-form-item>
-                </el-form>
-              </div>
-            </el-form-item>
-          </el-form>
-          <el-table
-            :data="from.inquiryDetailList"
-            style="width: 100%; margin-bottom:2rem;"
-            :empty-text="$t('table.notable')"
-          >
-            <el-table-column
-              prop="catalog"
-              :label="$t('table.catalog')"
-              style="width:20% color:red;"
-            >
-            </el-table-column>
-            <el-table-column
-              prop="productName"
-              :label="$t('table.productName')"
-              style="width:20%"
-            >
-            </el-table-column>
-            <el-table-column
-              prop="date"
-              :label="$t('table.size')"
-              style="width:20%"
-            >
-              <template slot-scope="scope">
-                <div class="size_data">
+        <div class="bottomcontentbox_b">
+          <p>
+            <!-- Product Information -->
+            {{ $t("inquiry.ProductInformation") }}
+          </p>
+          <div class="bottomcontentbox">
+            <el-form :inline="true">
+              <el-form-item>
+                <div class="input_box">
+                  <span>
+                    <!-- Quick Add  -->
+                    {{ $t("inquiry.QuickAdd") }}:
+                  </span>
                   <el-input
-                    class="size_q"
-                    v-model="size"
+                    class="catalogInput"
+                    v-model="catalog"
                     placeholder=""
                   ></el-input>
-                  <el-select v-model="scope.row.unit" placeholder="">
-                    <el-option
-                      v-if="scope.row.unit == 'vial'"
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    >
-                    </el-option>
-                    <el-option
-                      v-if="scope.row.unit !== 'vial'"
-                      v-for="item in option"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    >
-                    </el-option>
-                  </el-select>
+                  <span @click="searchByCatalog">{{
+                    $t("button.addQuoteForm")
+                  }}</span>
+                </div>
+              </el-form-item>
+              <el-form-item>
+                <div class="sample_info">
+                  <el-form :inline="true">
+                    <el-form-item>
+                      <span style="color:#E50113">{{
+                        $t("inquiry.getFreeSampleInfo1")
+                      }}</span>
+                    </el-form-item>
+                    <el-form-item>
+                      <span style="color:#606266">{{
+                        $t("inquiry.getFreeSampleInfo2")
+                      }}</span>
+                    </el-form-item>
+                  </el-form>
                 </div>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="date"
-              :label="$t('table.quantity')"
-              style="width:20%"
+              </el-form-item>
+            </el-form>
+            <el-table
+              :data="from.inquiryDetailList"
+              style="width: 100%; margin-bottom:2rem;"
+              :empty-text="$t('table.notable')"
             >
-              <template slot-scope="scope">
-                <el-input-number
-                  v-model="scope.row.quantity"
-                  @change="handleChange"
-                  :min="1"
-                  label="描述文字"
-                ></el-input-number>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('table.delete')" style="width:20%">
-              <template slot-scope="scope">
-                <el-button type="text" size="small"
-                  ><img
-                    style="width:24px;"
-                    src="@/assets/img/delete.png"
-                    alt=""
-                    @click="deleteList(scope.$index)"
-                /></el-button>
-              </template>
-            </el-table-column>
-          </el-table>
+              <el-table-column
+                prop="catalog"
+                :label="$t('table.catalog')"
+                style="width:20% color:red;"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="productName"
+                :label="$t('table.productName')"
+                style="width:20%"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="date"
+                :label="$t('table.size')"
+                style="width:20%"
+              >
+                <template slot-scope="scope">
+                  <div class="size_data">
+                    <el-input
+                      class="size_q"
+                      v-model="size"
+                      placeholder=""
+                    ></el-input>
+                    <el-select v-model="scope.row.unit" placeholder="">
+                      <el-option
+                        v-if="scope.row.unit == 'vial'"
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                      <el-option
+                        v-if="scope.row.unit !== 'vial'"
+                        v-for="item in option"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date"
+                :label="$t('table.quantity')"
+                style="width:20%"
+              >
+                <template slot-scope="scope">
+                  <el-input-number
+                    v-model="scope.row.quantity"
+                    @change="handleChange"
+                    :min="1"
+                    label="描述文字"
+                  ></el-input-number>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('table.delete')" style="width:20%">
+                <template slot-scope="scope">
+                  <el-button type="text" size="small"
+                    ><img
+                      style="width:24px;"
+                      src="@/assets/img/delete.png"
+                      alt=""
+                      @click="deleteList(scope.$index)"
+                  /></el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
         </div>
-      </div>
 
-      <div class="footerbox_b">
-        <p>
-          <!-- Your Information -->
-          {{ $t("inquiry.YourInformation") }}
-        </p>
-        <div class="footerbox">
-          <div>
-            <el-input
-              class="inputbox"
-              v-model="from.name"
-              :placeholder="$t('input.fullname')"
-            ></el-input>
-            <div class="red-t">*</div>
+        <div class="footerbox_b">
+          <p>
+            <!-- Your Information -->
+            {{ $t("inquiry.YourInformation") }}
+          </p>
+          <div class="footerbox">
+            <div>
+              <el-input
+                class="inputbox"
+                v-model="from.name"
+                :placeholder="$t('input.fullname')"
+              ></el-input>
+              <div class="red-t">*</div>
+            </div>
+            <div>
+              <el-input
+                class="inputbox"
+                v-model="from.region"
+                :placeholder="$t('input.country')"
+              ></el-input>
+              <!-- <div class="red-t">*</div> -->
+            </div>
+            <div>
+              <el-input
+                class="inputbox"
+                v-model="from.company"
+                :placeholder="$t('input.companyInstitution')"
+              ></el-input>
+              <div class="red-t">*</div>
+            </div>
+            <div>
+              <el-input
+                class="inputbox"
+                v-model="from.email"
+                :placeholder="$t('input.email')"
+              ></el-input>
+              <div class="red-t">*</div>
+            </div>
+            <div>
+              <el-input
+                class="inputbox"
+                v-model="from.phone"
+                :placeholder="$t('input.tel')"
+              ></el-input>
+            </div>
+            <div>
+              <el-input
+                class="inputbox"
+                type="textarea"
+                :autosize="{ minRows: 4, maxRows: 6 }"
+                v-model="from.message"
+                :placeholder="$t('input.telFor')"
+              ></el-input>
+            </div>
+            <el-button class="buttonbox" type="primary" @click="postsubmit">{{
+              $t("button.submit")
+            }}</el-button>
           </div>
-          <div>
-            <el-input
-              class="inputbox"
-              v-model="from.region"
-              :placeholder="$t('input.country')"
-            ></el-input>
-            <!-- <div class="red-t">*</div> -->
-          </div>
-          <div>
-            <el-input
-              class="inputbox"
-              v-model="from.company"
-              :placeholder="$t('input.companyInstitution')"
-            ></el-input>
-            <div class="red-t">*</div>
-          </div>
-          <div>
-            <el-input
-              class="inputbox"
-              v-model="from.email"
-              :placeholder="$t('input.email')"
-            ></el-input>
-            <div class="red-t">*</div>
-          </div>
-          <div>
-            <el-input
-              class="inputbox"
-              v-model="from.phone"
-              :placeholder="$t('input.tel')"
-            ></el-input>
-          </div>
-          <div>
-            <el-input
-              class="inputbox"
-              type="textarea"
-              :autosize="{ minRows: 4, maxRows: 6 }"
-              v-model="from.message"
-              :placeholder="$t('input.telFor')"
-            ></el-input>
-          </div>
-          <el-button class="buttonbox" type="primary" @click="postsubmit">{{
-            $t("button.submit")
-          }}</el-button>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import banner from "@/components/banner";
 export default {
-  components: {},
+  components: {
+    banner
+  },
   name: "inquiry",
   data() {
     return {
@@ -356,6 +362,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 @media screen and (min-width: 751px) and (max-width: 9999px) {
+  .box{
+    width: 1200px;
+    margin: 40px auto 0;
+  }
   .sample_info span {
     font-size: 16px;
   }

src/view/privacyPolicy/index.vue

@@ -1,5 +1,6 @@
 <template>
-<div>
+<div class="content">
+  <banner></banner>
   <div class="box">
    <div class="topbox">
      Sanyou Biopharmaceutical Co., Ltd. Privacy Policy
@@ -145,8 +146,10 @@
 
 </template>
 <script>
+import banner from "@/components/banner";
 export default {
   components: {
+    banner
   },
   name: 'privacyPolicy',
   data () {
@@ -170,6 +173,8 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 751px) and (max-width: 9999px) {
 .box{
+  width: 1200px;
+  margin: 40px auto 0;
   overflow: hidden;
   margin-bottom: 3rem;
 }

src/view/product/details.vue

@@ -1,15 +1,107 @@
 <template>
-  <div>
-    <div class="pc-page">
-      <div class="box">
-        <div class="topbox">
-          <div style="display: flex;align-items: center;">
-            <div style="flex:1;font-weight: bold;">
-              {{ list.productName }}
+  <div class="box">
+    <banner></banner>
+    <div class="container">
+      <div class="pc-page">
+        <div class="box">
+          <div class="topbox">
+            <div style="display: flex;align-items: center;">
+              <div style="flex:1;font-weight: bold;">
+                {{ list.productName }}
+              </div>
+              <div
+                style="display: flex;align-items: center;margin-left: 20px;gap: 10px;flex:1;"
+              >
+                <div @click="clickCoa">
+                  <img
+                    src="@/assets/img/productDetail/coa.png"
+                    style="width: 43px;height: 47px;cursor: pointer;"
+                    alt=""
+                    class="butt_image"
+                  />
+                </div>
+                <div @click="clickMsds">
+                  <img
+                    src="@/assets/img/productDetail/msds.png"
+                    style="width: 43px;height: 47px;cursor: pointer;"
+                    alt=""
+                    class="butt_image"
+                  />
+                </div>
+              </div>
             </div>
-            <div
-              style="display: flex;align-items: center;margin-left: 20px;gap: 10px;flex:1;"
+          </div>
+          <div class="contentbox">
+            <info :list="list" v-loading="getProductDetaiLoading" />
+            <validation :list="list" v-loading="getProductDetaiLoading" />
+          </div>
+          <div class="rightbox">
+            <price-table
+              class="common-border"
+              :list="list"
+              :sku-list="skuList"
+              v-loading="getProductDetaiLoading"
+            />
+            <!-- 最近访问 -->
+            <recently-list
+              v-if="recentlyList.length > 0"
+              class="common-border"
+              :recentlyList="recentlyList"
+            />
+            <!-- <div
+              class="rightcenterbox common-border"
+              v-if="recentlyList.length > 0"
+            >
+              <div class="box-title">{{ $t("inquiry.RecentlyViewed") }}</div>
+              <div class="rightcenterbox_text">
+                <div
+                  class="topage"
+                  v-for="one in recentlyList.slice(0, 5)"
+                  :key="one.id"
+                  @click="tapRoduct(one)"
+                >
+                  <div class="list_name">
+                    {{ one.catalog }} / {{ one.product }}
+                  </div>
+                  <i class="el-icon-arrow-right"></i>
+                </div>
+              </div>
+            </div> -->
+            <!-- 相关产品 -->
+            <related-product
+              class="common-border"
+              v-if="relatedProductlist.length > 0"
+              :relatedProductlist="relatedProductlist"
+            />
+            <!-- <div
+              class="rightcenterbox common-border"
+              v-if="relatedProductlist.length > 0"
             >
+              <div class="box-title">{{ $t("button.RelatedProducts") }}</div>
+              <div class="rightcenterbox_text">
+                <div
+                  class="topage"
+                  v-for="one in relatedProductlist.slice(0, 5)"
+                  :key="one.id"
+                  @click="tapRoduct(one)"
+                >
+                  <div class="list_name">
+                    {{ one.catalog }} / {{ one.productName }}
+                  </div>
+                  <i class="el-icon-arrow-right"></i>
+                </div>
+              </div>
+            </div> -->
+          </div>
+        </div>
+      </div>
+      <div class="mobile-page">
+        <div class="box">
+          <div class="topbox">
+            <div class="product-title">
+              {{ list.productName }}
+            </div>
+            <div class="img-group">
               <div @click="clickCoa">
                 <img
                   src="@/assets/img/productDetail/coa.png"
@@ -29,117 +121,28 @@
             </div>
           </div>
         </div>
-        <div class="contentbox">
-          <info :list="list" v-loading="getProductDetaiLoading" />
-          <validation :list="list" v-loading="getProductDetaiLoading" />
-        </div>
-        <div class="rightbox">
-          <price-table
-            class="common-border"
-            :list="list"
-            :sku-list="skuList"
-            v-loading="getProductDetaiLoading"
-          />
-          <!-- 最近访问 -->
-          <recently-list
-            v-if="recentlyList.length > 0"
-            class="common-border"
-            :recentlyList="recentlyList"
-          />
-          <!-- <div
-            class="rightcenterbox common-border"
-            v-if="recentlyList.length > 0"
-          >
-            <div class="box-title">{{ $t("inquiry.RecentlyViewed") }}</div>
-            <div class="rightcenterbox_text">
-              <div
-                class="topage"
-                v-for="one in recentlyList.slice(0, 5)"
-                :key="one.id"
-                @click="tapRoduct(one)"
-              >
-                <div class="list_name">
-                  {{ one.catalog }} / {{ one.product }}
-                </div>
-                <i class="el-icon-arrow-right"></i>
-              </div>
-            </div>
-          </div> -->
-          <!-- 相关产品 -->
-          <related-product
-            class="common-border"
-            v-if="relatedProductlist.length > 0"
-            :relatedProductlist="relatedProductlist"
-          />
-          <!-- <div
-            class="rightcenterbox common-border"
-            v-if="relatedProductlist.length > 0"
-          >
-            <div class="box-title">{{ $t("button.RelatedProducts") }}</div>
-            <div class="rightcenterbox_text">
-              <div
-                class="topage"
-                v-for="one in relatedProductlist.slice(0, 5)"
-                :key="one.id"
-                @click="tapRoduct(one)"
-              >
-                <div class="list_name">
-                  {{ one.catalog }} / {{ one.productName }}
-                </div>
-                <i class="el-icon-arrow-right"></i>
-              </div>
-            </div>
-          </div> -->
-        </div>
+        <price-table
+          class="common-border"
+          :list="list"
+          :sku-list="skuList"
+          v-loading="getProductDetaiLoading"
+        />
+        <info :list="list" v-loading="getProductDetaiLoading" />
+        <validation :list="list" v-loading="getProductDetaiLoading" />
+        <!-- 最近访问 -->
+        <recently-list
+          v-if="recentlyList.length > 0"
+          class="common-border"
+          :recentlyList="recentlyList"
+        />
+        <!-- 相关产品 -->
+        <related-product
+          class="common-border"
+          v-if="relatedProductlist.length > 0"
+          :relatedProductlist="relatedProductlist"
+        />
       </div>
     </div>
-    <div class="mobile-page">
-      <div class="box">
-        <div class="topbox">
-          <div class="product-title">
-            {{ list.productName }}
-          </div>
-          <div class="img-group">
-            <div @click="clickCoa">
-              <img
-                src="@/assets/img/productDetail/coa.png"
-                style="width: 43px;height: 47px;cursor: pointer;"
-                alt=""
-                class="butt_image"
-              />
-            </div>
-            <div @click="clickMsds">
-              <img
-                src="@/assets/img/productDetail/msds.png"
-                style="width: 43px;height: 47px;cursor: pointer;"
-                alt=""
-                class="butt_image"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <price-table
-        class="common-border"
-        :list="list"
-        :sku-list="skuList"
-        v-loading="getProductDetaiLoading"
-      />
-      <info :list="list" v-loading="getProductDetaiLoading" />
-      <validation :list="list" v-loading="getProductDetaiLoading" />
-      <!-- 最近访问 -->
-      <recently-list
-        v-if="recentlyList.length > 0"
-        class="common-border"
-        :recentlyList="recentlyList"
-      />
-      <!-- 相关产品 -->
-      <related-product
-        class="common-border"
-        v-if="relatedProductlist.length > 0"
-        :relatedProductlist="relatedProductlist"
-      />
-    </div>
   </div>
 </template>
 <script>
@@ -151,6 +154,7 @@ import validation from "./components/validation.vue";
 import PriceTable from "./components/PriceTable";
 import RecentlyList from "./components/RecentlyList";
 import RelatedProduct from "./components/RelatedProduct";
+import banner from "@/components/banner";
 
 export default {
   components: {
@@ -158,7 +162,8 @@ export default {
     validation,
     PriceTable,
     RecentlyList,
-    RelatedProduct
+    RelatedProduct,
+    banner
   },
   name: "product",
   data() {
@@ -544,6 +549,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.container{
+  width: 1200px;
+  margin: 40px auto 0;
+}
 .common-border {
   border-top: 1px solid #0166b4;
   border-left: 1px solid #d6eaff;

src/view/product/index.vue

@@ -1,29 +1,47 @@
 <template>
-  <div class="antibody_box" ref="tablePar">
-    <table-list
-      v-loading="tableLoading"
-      :list="list"
-      type="2"
-      @my-sort-change="onSortFieldChange"
-    />
-    <!-- 加载更多 -->
-    <div
-      class="load_b"
-      v-if="list.length > 0 && pageable.page + 1 !== moreParams.totalPages"
-      @click="loadList"
-    >
-      <i v-if="loadShow" class="el-icon-loading"></i>
-      <span class="load">{{ $t("table.load") }}</span>
+  <div>
+    <banner></banner>
+    <div class="antibody_box" ref="tablePar">
+      <!-- 搜索 -->
+      <el-form :inline="true" :model="form" class="demo-form-inline">
+        <el-form-item label="抗体名称:">
+          <el-input v-model="form.antibodyName" placeholder="审批人"></el-input>
+        </el-form-item>
+        <el-form-item label="靶点名称:">
+          <el-input v-model="form.targetName" placeholder="审批人"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+       <!-- 列表 -->
+      <table-list
+        v-loading="tableLoading"
+        :list="list"
+        type="2"
+        @my-sort-change="onSortFieldChange"
+      />
+      <!-- 加载更多 -->
+      <div
+        class="load_b"
+        v-if="list.length > 0 && pageable.page + 1 !== moreParams.totalPages"
+        @click="loadList"
+      >
+        <i v-if="loadShow" class="el-icon-loading"></i>
+        <span class="load">{{ $t("table.load") }}</span>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import tableList from "@/components/tableList";
+import banner from "@/components/banner";
 
 let timer = null;
 export default {
   components: {
-    tableList
+    tableList,
+    banner
   },
   name: "antibody",
   data() {
@@ -38,6 +56,10 @@ export default {
         sortKey: undefined,
         sortValue: undefined
       },
+      form: {
+        antibodyName: "",
+        targetName: ""
+      },
       pageable: {
         page: 0,
         size: 10
@@ -50,6 +72,11 @@ export default {
     };
   },
   methods: {
+    // 查询
+    onSubmit() {
+      this.pageable.page = 0;
+      this.postlist();
+    },
     onSortFieldChange(params) {
       this.criteria.sortKey = params.field || undefined;
       this.criteria.sortValue = params.value || undefined;
@@ -145,6 +172,8 @@ export default {
 <style lang="scss" scoped>
 .antibody_box {
   display: block !important;
+  width: 1200px;
+  margin: 40px auto 0;
   .clout_box {
     margin-bottom: 2rem;
     .title {

src/view/profile/index.vue

@@ -73,7 +73,7 @@ export default {
 <style lang="scss" scoped>
 .content-box{
   width: 1200px;
-  margin: 30px auto 90px;
+  margin: 40px auto 0;
   background: #F4FAFF;
   .v-content{
     margin: auto;