wei

src/App.vue

@@ -6,6 +6,7 @@
         <div :class="$route.meta.fullScreen ? 'content' :'content_app'">
           <!-- <keep-alive include="AntigenPreparation"> -->
             <router-view :key="key"/>
+            <sidebox class="fixed-message"></sidebox>
           <!-- </keep-alive> -->
         </div>
         <footerbox></footerbox>
@@ -113,12 +114,14 @@
 <script>
 import homeHeader from "@/components/homeHeader";
 import footerbox from "@/components/footerbox";
+import sidebox from "@/components/sidebox";
 
 export default {
   name: "App",
   components: {
     homeHeader,
-    footerbox
+    footerbox,
+    sidebox
   },
   data() {
     return {
@@ -305,23 +308,10 @@ v-cloak {
 }
 .fixed-message{
   position: fixed;
-  bottom: 10px;
+  bottom: 30%;
   right: 20px;
   z-index: 9;
-  background: #065ba9;
-  display: flex;
-  align-items: center;
-  // width: 175px;
-  // height: 64px;
-  padding: 8px 15px;
-  border-radius: 30px;
   cursor: pointer;
-  .fixed-message-text{
-    font-size: 14px;
-    color: #fff;
-    text-align: center;
-    margin-left: 10px;
-  }
 }
 .production_bottom_box{
   width: 90%;
@@ -503,27 +493,7 @@ v-cloak {
     // padding: 0.2rem;
   }
   .fixed-message{
-    position: fixed;
-    bottom: .6rem;
-    right: .1rem;
-    z-index: 9;
-    background: #065ba9;
-    display: flex;
-    align-items: center;
-    // width: 175px;
-    // height: 64px;
-    padding: 0.05rem .1rem;
-    border-radius: 30px;
-    cursor: pointer;
-    img{
-      width: 0.2rem;
-    }
-    .fixed-message-text{
-      font-size: .12rem;
-      color: #fff;
-      text-align: center;
-      margin-left: .1rem;
-    }
+    display: none;
   }
 }
 // loading

src/components/homeHeader.vue

@@ -2,7 +2,7 @@
   <div class="header_app">
     <hea-der class="tophea_box"></hea-der>
     <div class="back-clor">
-      <div class="topheader topheaderWeb">
+      <!-- <div class="topheader topheaderWeb">
         <div class="topheaderBox">
           <div class="topheaderContent" @click="gotoSanyou">
             <img class="headerImg" src="@/assets/img/header/logo1.png" alt="">
@@ -35,7 +35,7 @@
             <div class="headerBorder"></div>
           </div>
         </div>
-      </div>
+      </div> -->
       <div class="header_top">
         <div class="logo" @click="$util.goRoute({ name: 'home' })">
           <img class="logo_img" src="@/assets/img/logo.png" alt="" srcset="" />

src/components/sidebox.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="sidebox-box">
+    <div @click="drawer = true" class="fixed-messages">
+        <img src="@/assets/img/side/sideicon.png" alt="" class="fixed-messageImg">
+    </div>
+    <el-drawer
+    title=""
+    :visible.sync="drawer"
+    :with-header="false">
+        <div class="sideboxContent">
+            <div class="sideboxFixed">
+                <div class="sideboxFixedImgBox" @click="drawer = false">
+                    <img src="@/assets/img/side/sideicon.png" alt="" class="sideboxFixedImg">
+                </div>
+                <div class="sideboxFixedBox"></div>
+            </div>
+            <p class="sideboxTitle">三优生物网站总览</p>
+            <div class="Contentbox">
+                <div class="singleBox" @click="gotoSanyou">
+                    <p class="singleBoxText">Sanyou</p>
+                    <img class="singleBoxImg" src="@/assets/img/side/C-07.png" alt="">
+                </div>
+                <div class="singleBox" @click="gotoCRO">
+                    <p class="singleBoxText">CRO</p>
+                    <img class="singleBoxImg" src="@/assets/img/side/C-01.png" alt="">
+                </div>
+                <div class="singleBox" @click="gotoCDO">
+                    <p class="singleBoxText">CDO</p>
+                    <img class="singleBoxImg" src="@/assets/img/side/C-02.png" alt="">
+                </div>
+                <div class="singleBox" @click="gotoCPO">
+                    <p class="singleBoxText">CPO</p>
+                    <img class="singleBoxImg" src="@/assets/img/side/C-03.png" alt="">
+                </div>
+                <div class="singleBox" @click="gotoCRS">
+                    <p class="singleBoxText">CRS</p>
+                    <img class="singleBoxImg" src="@/assets/img/side/C-10.png" alt="">
+                </div>
+                <div class="singleBox" @click="gotooneClick">
+                    <p class="singleBoxText">oneClick⁺</p>
+                    <img class="singleBoxImg" src="@/assets/img/side/C-05.png" alt="">
+                </div>
+                <!-- <div class="singleBox" @click="gotomRNA">
+                    <p class="singleBoxText">mRNA</p>
+                    <img class="singleBoxImg" src="@/assets/img/side/C-08.png" alt="">
+                </div> -->
+                <div class="singleBox" @click="gotoAbx">
+                    <p class="singleBoxText">Abx</p>
+                    <img class="singleBoxImg" src="@/assets/img/side/C-06.png" alt="">
+                </div>
+                <!-- <div class="singleBox" @click="gotoBSAb">
+                    <p class="singleBoxText">BSAb</p>
+                    <img class="singleBoxImg" src="@/assets/img/side/C-04.png" alt="">
+                </div> -->
+                <div class="singleBox" @click="gotoHumab">
+                    <p class="singleBoxText">Humab</p>
+                    <img class="singleBoxImg" src="@/assets/img/side/C-09.png" alt="">
+                </div>
+            </div>
+        </div>
+    </el-drawer>
+  </div>
+</template>
+<script>
+export default {
+  name: "sidebox",
+  components: {
+  },
+  data() {
+    return {
+      lang: this.$i18n.locale,
+      drawer: false
+    };
+  },
+  watch: {
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    gotoSanyou() {
+      if (this.lang == "en") {
+        window.location.href = "https://sanyoubio.com/";
+      } else {
+        window.location.href = "https://sanyoubio.com.cn/";
+      }
+    },
+    gotoCRO() {
+      if (this.lang == "en") {
+        window.location.href = "https://sanyoubio.com/service?value=pointCRO";
+      } else {
+        window.location.href = "https://sanyoubio.com.cn/service?value=pointCRO";
+      }
+    },
+    gotoCDO() {
+      if (this.lang == "en") {
+        window.location.href = "https://sanyoubio.com/service?value=pointCDO";
+      } else {
+        window.location.href = "https://sanyoubio.com.cn/service?value=pointCDO";
+      }
+    },
+    gotoCPO() {
+      if (this.lang == "en") {
+        window.location.href = "https://sanyoubio.com/service?value=pointCPO";
+      } else {
+        window.location.href = "https://sanyoubio.com.cn/service?value=pointCPO";
+      }
+    },
+    gotoCRS() {
+      if (this.lang == "en") {
+        window.location.href = "https://crs.sanyoubio.com/?utm_source=www";
+      } else {
+        window.location.href = "https://crs.sanyoubio.com.cn/?utm_source=www";
+      }
+    },
+    gotooneClick() {
+      if (this.lang == "en") {
+        window.location.href = "https://www.oneclick-plus.com/?utm_source=www";
+      } else {
+        window.location.href = "https://www.oneclick-plus.cn/?utm_source=www";
+      }
+    },
+    gotomRNA() {
+      if (this.lang == "en") {
+      } else {
+      }
+    },
+    gotoAbx() {
+      if (this.lang == "en") {
+        window.location.href = "https://abx.sanyoubio.com/?utm_source=www";
+      } else {
+        window.location.href = "https://abx.sanyoubio.com.cn/?utm_source=www";
+      }
+    },
+    gotoBSAb() {
+      if (this.lang == "en") {
+        window.location.href = "https://bsab.sanyoubio.com/?utm_source=www";
+      } else {
+        window.location.href = "https://bsab.sanyoubio.com.cn/?utm_source=www";
+      }
+    },
+    gotoHumab() {
+      if (this.lang == "en") {
+        window.location.href = "https://humab.sanyoubio.com/?utm_source=www";
+      } else {
+        window.location.href = "https://humab.sanyoubio.com.cn/?utm_source=www";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 751px) and (max-width: 9999px) {
+    .sidebox-box{
+        z-index: 9999;
+        .fixed-message{
+            .fixed-messageImg{
+            }
+        }
+        .el-drawer__wrapper /deep/{
+            .el-drawer{
+                width: 320px !important;
+                .sideboxContent{
+                    .sideboxFixed{
+                        position: fixed;
+                        bottom: 30%;
+                        right: 320px;
+                        z-index: 9;
+                        display: flex;
+                        align-items: center;
+                        .sideboxFixedImgBox{
+                            width: 65px;
+                            height: 65px;
+                            background: #fff;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            border-radius: 50%;
+                            .sideboxFixedImg{
+                                width: 50px;
+                                height: 50px;
+                            }
+                        }
+                        .sideboxFixedBox{
+                            width: 40px;
+                            height: 3px;
+                            background: #fff;
+                        }
+                    }
+                    .sideboxTitle{
+                        background: #065ba9;
+                        font-size: 32px;
+                        text-align: center;
+                        color: #fff;
+                        height: 80px;
+                        line-height: 80px;
+                    }
+                    .Contentbox{
+                        padding: 0 50px;
+                        .singleBox{
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            margin-top: 20px;
+                            .singleBoxText{
+                                font-size: 24px;
+                                font-weight: 600;
+                            }
+                            .singleBoxImg{
+                                width: 50px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+</style>