修改侧边栏

src/components/popUp/index.vue

@@ -34,6 +34,9 @@ export default {
     // 关闭弹窗
     closePopUp() {
       this.$emit("closePopUp")
+    },
+    showPopUp () {
+      this.popUpShow = true
     }
   },
   created() {},

src/components/sidebox copy.vue

@@ -0,0 +1,720 @@
+<template>
+  <div class="sidebox-box">
+    <div class="fixedMessages">
+        <img src="@/assets/img/side/zn.png" alt="" class="fixed-messageImg" @click="drawer = true">
+        <div class="rig_tip" :class="{'rig_tip_en' : lang == 'en'}">{{ $t("tips.WebNavigation") }}</div>
+        <img src="@/assets/img/side/sideimg2.png" alt="" class="fixed-messageImg" v-if="!isWeekday()" @click="dialogVisible = true">
+        <div class="rig_tip" :class="{'rig_tip_en' : lang == 'en'}" v-if="!isWeekday()" @click="dialogVisible = true">{{ $t("tips.LeaveMessage") }}</div>
+        <img src="@/assets/img/side/sideimg3.png" alt="" class="fixed-messageImg" v-if="isWeekday()" @click="init">
+        <div class="rig_tip" :class="{'rig_tip_en' : lang == 'en'}" v-if="isWeekday()" @click="init">{{ $t("tips.OnlineChat") }}</div>
+        <div class="fixedMessagesBox" v-if="isTop" @click="goTop">
+          <img src="@/assets/img/side/sideimg4.png" alt="" class="fixedMessagesImg">
+          <p class="fixedMessagesText">TOP</p>
+        </div>
+    </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/zn.png" alt="" class="sideboxFixedImg">
+                </div>
+                <div class="sideboxFixedBox"></div>
+            </div>
+            <p class="sideboxTitle">{{ $t("table.Website") }}</p>
+            <div class="Contentbox">
+               <div class="singleBox" v-for="(one, i) in sideboxArr" :key="i" @click="gomenu(one)">
+                    <p class="singleBoxText">{{ one.name }}</p>
+                    <img class="singleBoxImg" :src="one.img" alt="">
+                </div>
+            </div>
+        </div>
+    </el-drawer>
+    <el-dialog
+      title=""
+      v-if="!$util.isMobileDevice()"
+      :visible.sync="dialogVisible"
+      width="1200px">
+      <div class="production_bottom_box">
+        <p class="production_bottom_title">{{ $t("input.Comments") }}</p>
+        <div class="submit_box">
+          <el-form label-position="left" ref="form" :model="form" label-width="130px">
+            <div class="el_input">
+              <el-form-item :label="$t('input.fullname') + ':'" required>
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('input.company') + ':'" required>
+                <el-input v-model="form.company"></el-input>
+              </el-form-item>
+            </div>
+            <div class="el_input">
+              <el-form-item :label="$t('input.email') + ':'" required>
+                <el-input v-model="form.email"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('input.tel') + ':'">
+                <el-input v-model="form.phone"></el-input>
+              </el-form-item>
+            </div>
+            <div class="el_input_message">
+              <el-form-item :label="$t('input.leaveaMessage') + ':'">
+                <el-input v-model="form.message" type="textarea" :rows="3"></el-input>
+              </el-form-item>
+            </div>
+          </el-form>
+          <div class="submit_bottom">
+            <p class="submit_bottom_text">{{ $t("input.Wewill") }}</p>
+            <p class="submit_bottom_button" @click="postSubmit" v-loading.fullscreen.lock="fullscreenLoading">{{ $t("input.submit") }}</p>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 移动端 -->
+    <el-dialog
+      v-if="$util.isMobileDevice()"
+      :title="$t('input.Comments')"
+      :visible.sync="dialogVisible"
+      width="90%">
+      <div class="production_bottom_box">
+        <!-- <p class="production_bottom_title">Leave Message</p> -->
+        <div class="submit_box">
+          <el-form label-position="left" ref="form" :model="form" label-width="140px">
+            <div class="el_input">
+              <el-form-item :label="$t('input.fullname') + ':'" required>
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+            </div>
+            <div class="el_input">
+              <el-form-item :label="$t('input.company') + ':'" required>
+                <el-input v-model="form.company"></el-input>
+              </el-form-item>
+            </div>
+            <div class="el_input">
+              <el-form-item :label="$t('input.email') + ':'" required>
+                <el-input v-model="form.email"></el-input>
+              </el-form-item>
+            </div>
+            <div class="el_input">
+              <el-form-item :label="$t('input.tel') + ':'">
+                <el-input v-model="form.phone"></el-input>
+              </el-form-item>
+            </div>
+            <div class="el_input_message">
+              <el-form-item :label="$t('input.leaveaMessage') + ':'">
+                <el-input v-model="form.message" type="textarea" :rows="3"></el-input>
+              </el-form-item>
+            </div>
+          </el-form>
+          <div class="submit_bottom">
+            <p class="submit_bottom_text">{{ $t("input.Wewill") }}</p>
+            <p class="submit_bottom_button" @click="postSubmit" v-loading.fullscreen.lock="fullscreenLoading">{{ $t("input.submit") }}</p>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 弹框 -->
+     <popUp :popUpShow="popUpShow" @closePopUp="closePopUp"></popUp>
+  </div>
+</template>
+<script>
+import popUp from "@/components/popUp/index.vue";
+import { toTop } from "@/js/util/utilList.js"
+import YSF from '@neysf/qiyu-web-sdk';
+export default {
+  name: "sidebox",
+  components: {
+    popUp
+  },
+  data() {
+    return {
+      popUpShow: false, // 弹框
+      lang: this.$i18n.locale,
+      drawer: false,
+      dialogVisible: false,
+      form: {
+        name: "",
+        company: "",
+        email: "",
+        phone: "",
+        message: ""
+      },
+      fullscreenLoading: false,
+      isTop: false, // 是否回到顶部
+      sideboxArr: [
+        {
+          "id": 0,
+          "linkCn": "https://sanyoubio.com.cn/?utm_source=www",
+          "linkEn": "https://sanyoubio.com/?utm_source=www",
+          "name": "Sanyou",
+          "img": require("@/assets/img/side/C-07.png")
+        },
+        {
+          "id": 1,
+          "linkCn": "https://crs.sanyoubio.com.cn/?utm_source=www",
+          "linkEn": "https://crs.sanyoubio.com/?utm_source=www",
+          "name": "CRS",
+          "img": require("@/assets/img/side/C-10.png")
+        },
+        {
+          "id": 2,
+          "linkCn": "https://www.mrna-mab.com",
+          "linkEn": "https://www.mrna-mab.com",
+          "name": "mRNA",
+          "img": require("@/assets/img/side/C-08.png")
+        },
+        {
+          "id": 3,
+          "linkCn": "https://abx.sanyoubio.com.cn/?utm_source=www",
+          "linkEn": "https://abx.sanyoubio.com/?utm_source=www",
+          "name": "Abx",
+          "img": require("@/assets/img/side/C-06.png")
+        },
+        {
+          "id": 4,
+          "linkCn": "https://bsab.sanyoubio.com.cn/?utm_source=www",
+          "linkEn": "https://bsab.sanyoubio.com/?utm_source=www",
+          "name": "BsAb",
+          "img": require("@/assets/img/side/C-04.png")
+        },
+        {
+          "id": 5,
+          "linkCn": "https://www.oneclick-plus.cn/?utm_source=www",
+          "linkEn": "https://www.oneclick-plus.com/?utm_source=www",
+          "name": "oneClick⁺",
+          "img": require("@/assets/img/side/C-05.png")
+        },
+        {
+          "id": 6,
+          "linkCn": "https://humab.sanyoubio.com.cn/?utm_source=www",
+          "linkEn": "https://humab.sanyoubio.com/?utm_source=www",
+          "name": "AI-STAL-huMab",
+          "img": require("@/assets/img/side/E1.png")
+        },
+        {
+          "id": 7,
+          "linkCn": "https://sdab.sanyoubio.com.cn?utm_source=www",
+          "linkEn": "https://sdab.sanyoubio.com?utm_source=www",
+          "name": "AI-STAL-SdAb",
+          "img": require("@/assets/img/side/E2.png")
+        },
+        {
+          "id": 8,
+          "linkCn": "https://mitmab.sanyoubio.com.cn?utm_source=www",
+          "linkEn": "https://mitmab.sanyoubio.com?utm_source=www",
+          "name": "AI-STAL-MIT mAb",
+          "img": require("@/assets/img/side/E3.png")
+        },
+        {
+          "id": 9,
+          "linkCn": "https://nm.sanyoubio.com.cn?utm_source=www",
+          "linkEn": "https://nm.sanyoubio.com?utm_source=www",
+          "name": "AI-STAL-NM",
+          "img": require("@/assets/img/side/E4.png")
+        }
+      ]
+    };
+  },
+  watch: {
+  },
+  created() {
+  },
+  mounted() {
+    // 监听滚动
+    window.addEventListener("scroll", this.handleScroll, true);
+  },
+  beforeDestroy() {
+    // 移除监听
+    window.removeEventListener("scroll", this.handleScroll, true);
+  },
+  methods: {
+    // 弹框
+    closePopUp() {
+      this.popUpShow = false;
+    },
+    // 判断是否是周一到周五 8点半到下午5点半  这段时间
+    isWeekday() {
+      if (this.lang == "cn") {
+        const now = new Date();
+        const weekday = now.getDay(); // 0-6 0代表周日
+        const hour = now.getHours(); // 0-23 
+        const minute = now.getMinutes(); // 0-59
+        console.log(weekday, hour, minute);
+        // 检查是否在周一到周五，且时间在 8:30 到 17:30 之间
+        if (weekday >= 1 && weekday <= 5) {
+          const totalMinutes = hour * 60 + minute;
+          const startMinutes = 8 * 60 + 30;
+          const endMinutes = 17 * 60 + 30;
+          console.log(totalMinutes, startMinutes, endMinutes, totalMinutes >= startMinutes && totalMinutes <= endMinutes);
+          return totalMinutes >= startMinutes && totalMinutes <= endMinutes;
+        }
+      }
+      return false;
+    },
+    init () {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      YSF.init("467cad5bb74586dff3727cc6e20b014f", {
+        hidden: 1 // hidden 表示是否隐藏访客端默认入口
+      }).then(ysf => {
+        ysf("config", {
+          title: "BsAb",
+          level: 1,
+          success: function () {
+            ysf("open")
+            loading.close();
+          },
+          error: function (err) {
+            this.$message.error(err);
+            loading.close();
+          }
+        })
+      }).catch(error => {
+        this.$message.error(error);
+        loading.close();
+      });
+    },
+    // 验证
+    verification() {
+      if (this.form.name == "") {
+        this.$message.error(
+          this.$t("input.fullname") + this.$t("input.empty")
+        );
+        return false;
+      } else if (this.form.company == "") {
+        this.$message.error(
+          this.$t("input.company") + this.$t("input.empty")
+        );
+        return false;
+      } else if (this.form.email == "") {
+        this.$message.error(this.$t("input.email") + this.$t("input.empty"));
+        return false;
+      } else if (!this.$util.isEmail(this.form.email)) {
+        this.$message.error(this.$t("input.email") + this.$t("input.emailY"));
+        return false;
+      } else {
+        return true;
+      }
+    },
+    postSubmit() {
+      if (this.verification()) {
+        this.fullscreenLoading = true;
+        this.$api.post("message/submitCommon", {
+          ...this.form,
+          source: 10
+        }).then(res => {
+          if (res.code == 0) {
+            // this.$message({
+            //   message: this.$t("input.YourMessage"),
+            //   type: "success"
+            // });
+            this.popUpShow = true
+            this.form = {
+              company: "",
+              email: "",
+              name: "",
+              phone: "",
+              message: ""
+            };
+            this.fullscreenLoading = false;
+            this.dialogVisible = false
+            window.gtag && window.gtag("event", "submit_message");
+          } else {
+            this.$message.error(res.msg);
+            this.fullscreenLoading = false;
+            this.dialogVisible = false
+          }
+        });
+      }
+    },
+    // 判断滚动条位置
+    handleScroll() {
+      var scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+      if (scrollTop > 100) {
+        this.isTop = true;
+      } else {
+        this.isTop = false;
+      }
+    },
+    // 回到顶部
+    goTop() {
+      toTop()
+      this.isTop = false;
+    },
+    gomenu(item) {
+      if (this.lang == "en") {
+        window.location.href = item.linkEn
+      } else {
+        window.location.href = item.linkCn
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 751px) and (max-width: 9999px) {
+    .sidebox-box{
+        position: fixed;
+        bottom: 30%;
+        right: 0px;
+        z-index: 9999;
+        .fixedMessages{
+          width: 100px;
+          background: #FFFFFF;
+          box-shadow: 0px 2px 27px 0px rgba(105,105,105,0.35);
+          border-top-left-radius: 10px;
+          border-bottom-left-radius: 10px;
+          padding-top: 32px;
+          overflow: hidden;
+            .fixed-messageImg{
+              display: block;
+              margin: 0 auto;
+              width: 65px;
+              background: linear-gradient(180deg, #22AB3A, #1880C1);
+              padding: 5px;
+              border-radius: 50%;
+              cursor: pointer;
+            }
+            .rig_tip{
+              margin: 4px auto 20px;
+              text-align: center;
+              font-size: 16px;
+              cursor: pointer;
+              
+            }
+            .rig_tip_en{
+              font-size: 12px;
+            }
+            .fixedMessagesBox{
+              margin: 0 auto 28px;
+              cursor: pointer;
+              .fixedMessagesImg{
+                display: block;
+                width: 20px;
+                margin: 0 auto;
+              }
+              .fixedMessagesText{
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                font-size: 18px;
+                color: #989898;
+                line-height: 1;
+                text-align: center;
+              }
+            }
+        }
+        .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%;
+                            cursor: pointer;
+                            .sideboxFixedImg{
+                                width: 50px;
+                                height: 50px;
+                                background: -webkit-gradient(linear, left top, left bottom, from(#22ab3a), to(#1880c1));
+                                padding: 5px;
+                                border-radius: 50%;
+                            }
+                        }
+                        .sideboxFixedBox{
+                            width: 40px;
+                            height: 3px;
+                            background: #fff;
+                        }
+                    }
+                    .sideboxTitle{
+                        background: #065ba9;
+                        font-size: 24px;
+                        text-align: center;
+                        color: #fff;
+                        height: 80px;
+                        line-height: 80px;
+                    }
+                    .Contentbox{
+                        // padding: 0 20px;
+                        .singleBox{
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            // margin-top: 20px;
+                            margin-top: 2px;
+                            cursor: pointer;
+                            padding: 10px 20px;
+                            &:hover{
+                                background: #065ba9;
+                                color: #fff;
+                            }
+                            .singleBoxText{
+                                font-size: 18px;
+                                font-weight: 600;
+                            }
+                            .singleBoxImg{
+                                width: 50px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .production_bottom_box{
+          width: 90%;
+          margin: 0 auto;
+          overflow: hidden;
+          .production_bottom_title{
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 18px;
+            color: #000;
+            line-height: 36px;
+          }
+          .submit_box /deep/{
+            width: 100%;
+            border-radius: 1px;
+            background: rgba(255, 255, 255, .9);
+            overflow: hidden;
+            .el-form{
+              width: 100%;
+              margin: 46px auto 0;
+              .el_input{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .el-input__inner{
+                  border: 1px solid #0466b5;
+                }
+                .el-form-item{
+                  width: 48%;
+                }
+              }
+              .el_input_message{
+                .el-textarea__inner{
+                  border: 1px solid #0466b5;
+                }
+                .el-form-item{
+                  width: 100%;
+                }
+              }
+            }
+            .submit_bottom{
+              margin: 20px 0 20px 130px;
+              width: 914px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .submit_bottom_text{
+                font-family: Source Han Sans CN;
+                font-weight: 500;
+                font-size: 16px;
+                color: #0466B5;
+                line-height: 36px;
+              }
+              .submit_bottom_button{
+                width: 330px;
+                height: 45px;
+                line-height: 45px;
+                background: #0466B5;
+                font-family: Source Han Sans CN;
+                font-weight: 500;
+                font-size: 18px;
+                color: #FFFFFF;
+                text-align: center;
+                cursor: pointer;
+              }
+            }
+          }
+        }
+    }
+
+}
+
+@media screen and (min-width: 0px) and (max-width: 750px) {
+    .sidebox-box{
+        position: fixed;
+        bottom: 30%;
+        right: 0px;
+        z-index: 9999;
+        .fixedMessages{
+          width: 0.7rem;
+          background: #FFFFFF;
+          box-shadow: 0px 2px 27px 0px rgba(105,105,105,0.35);
+          border-top-left-radius: 10px;
+          border-bottom-left-radius: 10px;
+          padding-top: 0.2rem;
+          overflow: hidden;
+            .fixed-messageImg{
+              display: block;
+              margin: 0 auto;
+              width: 0.4rem;
+              background: linear-gradient(180deg, #22AB3A, #1880C1);
+              padding: 5px;
+              border-radius: 50%;
+              cursor: pointer;
+            }
+            .rig_tip{
+              margin: 4px auto 0.2rem;
+              text-align: center;
+              font-size: 12px;
+              cursor: pointer;
+            }
+            .rig_tip_en{
+              font-size: 12px;
+            }
+            .fixedMessagesBox{
+              margin: 0 auto 0.25rem;
+              cursor: pointer;
+              .fixedMessagesImg{
+                display: block;
+                width: 0.2rem;
+                margin: 0 auto;
+              }
+              .fixedMessagesText{
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                font-size: 14px;
+                color: #989898;
+                line-height: 1;
+                text-align: center;
+              }
+            }
+        }
+        .el-drawer__wrapper /deep/{
+            .el-drawer{
+                width: 2.4rem !important;
+                .sideboxContent{
+                    .sideboxFixed{
+                        display: none;
+                    }
+                    .sideboxTitle{
+                        background: #065ba9;
+                        font-size: 0.218rem;
+                        text-align: center;
+                        color: #fff;
+                        height: 0.8rem;
+                        line-height: 0.8rem;
+                    }
+                    .Contentbox{
+                        padding: 0 0.2rem;
+                        .singleBox{
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            margin-top: 0.16rem;
+                            .singleBoxText{
+                                font-size: 0.164rem;
+                                font-weight: 600;
+                            }
+                            .singleBoxImg{
+                                width: 0.4rem;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .production_bottom_box{
+          width: 100% !important;
+          margin: 0 auto;
+          overflow: hidden;
+          .production_bottom_title{
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 18px;
+            color: #000;
+            line-height: 1;
+          }
+          .submit_box /deep/{
+            width: 100%;
+            border-radius: 1px;
+            background: rgba(255, 255, 255, .9);
+            overflow: hidden;
+            .el-form{
+              width: 100%;
+              margin: 0 auto;
+              .el_input{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .el-input__inner{
+                  border: 1px solid #0466b5;
+                }
+                .el-form-item{
+                  width: 48%;
+                }
+              }
+              .el_input_message{
+                .el-textarea__inner{
+                  border: 1px solid #0466b5;
+                }
+                .el-form-item{
+                  width: 100%;
+                }
+              }
+            }
+            .el_input{
+              width: 100%;
+              .el-form-item{
+                width: 100% !important;
+                .el-form-item__label{
+                  font-size: 12px !important;
+                }
+              }
+            }
+            .submit_bottom{
+              width: 100% !important;
+              margin: 0;
+              padding-left: 140px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              flex-wrap: wrap;
+              .submit_bottom_text{
+                font-family: Source Han Sans CN;
+                font-weight: 500;
+                color: #0466B5;
+                width: 100% !important;
+                font-size: 12px;
+                line-height: 20px;
+              }
+              .submit_bottom_button{
+                width: 100%;
+                height: 45px;
+                line-height: 45px;
+                background: #0466B5;
+                font-family: Source Han Sans CN;
+                font-weight: 500;
+                font-size: 18px;
+                color: #FFFFFF;
+                text-align: center;
+                cursor: pointer;
+                margin-top: 0.1rem;
+              }
+            }
+          }
+        }
+    }
+
+}
+</style>

src/components/sidebox.vue

@@ -1,16 +1,22 @@
 <template>
   <div class="sidebox-box">
-    <div class="fixedMessages">
-        <img src="@/assets/img/side/zn.png" alt="" class="fixed-messageImg" @click="drawer = true">
-        <div class="rig_tip" :class="{'rig_tip_en' : lang == 'en'}">{{ $t("tips.WebNavigation") }}</div>
-        <img src="@/assets/img/side/sideimg2.png" alt="" class="fixed-messageImg" v-if="!isWeekday()" @click="dialogVisible = true">
-        <div class="rig_tip" :class="{'rig_tip_en' : lang == 'en'}" v-if="!isWeekday()" @click="dialogVisible = true">{{ $t("tips.LeaveMessage") }}</div>
-        <img src="@/assets/img/side/sideimg3.png" alt="" class="fixed-messageImg" v-if="isWeekday()" @click="init">
-        <div class="rig_tip" :class="{'rig_tip_en' : lang == 'en'}" v-if="isWeekday()" @click="init">{{ $t("tips.OnlineChat") }}</div>
-        <div class="fixedMessagesBox" v-if="isTop" @click="goTop">
-          <img src="@/assets/img/side/sideimg4.png" alt="" class="fixedMessagesImg">
-          <p class="fixedMessagesText">TOP</p>
-        </div>
+    <div class="BoxS">
+      <div class="BoxSLeft" v-if="showLogo">
+        <img src="@/assets/img/side/rightLogo.png" alt="" @click="showLogo = false">
+      </div>
+      <div class="BoxSLeft" v-if="!showLogo">
+        <img src="@/assets/img/side/leftLogo.png" alt="" @click="showLogo = true">
+      </div>
+      <div class="fixedMessages" v-if="showLogo">
+          <img src="@/assets/img/side/1.png" alt="" class="fixed-messageImg" @click="gourl">
+          <div class="rig_tip" :class="{'rig_tip_en' : lang == 'en'}" v-html="$t('tips.InnovationWorks')"></div>
+          <img src="@/assets/img/side/2.png" alt="" class="fixed-messageImg" @click="dialogVisible = true">
+          <div class="rig_tip" :class="{'rig_tip_en' : lang == 'en'}" @click="dialogVisible = true">{{ $t("tips.LeaveMessage") }}</div>
+          <div class="fixedMessagesBox" v-if="isTop" @click="goTop">
+            <img src="@/assets/img/side/sideimg4.png" alt="" class="fixedMessagesImg">
+            <p class="fixedMessagesText">TOP</p>
+          </div>
+      </div>
     </div>
     <el-drawer
     title=""
@@ -23,7 +29,7 @@
                 </div>
                 <div class="sideboxFixedBox"></div>
             </div>
-            <p class="sideboxTitle">{{ $t("table.Website") }}</p>
+            <p class="sideboxTitle">{{ $t("headerButton.Website") }}</p>
             <div class="Contentbox">
                <div class="singleBox" v-for="(one, i) in sideboxArr" :key="i" @click="gomenu(one)">
                     <p class="singleBoxText">{{ one.name }}</p>
@@ -113,14 +119,14 @@
         </div>
       </div>
     </el-dialog>
-    <!-- 弹框 -->
-     <popUp :popUpShow="popUpShow" @closePopUp="closePopUp"></popUp>
+     <!-- 弹框 -->
+     <popUp ref="popUpRef"></popUp>
   </div>
 </template>
 <script>
-import popUp from "@/components/popUp/index.vue";
 import { toTop } from "@/js/util/utilList.js"
 import YSF from '@neysf/qiyu-web-sdk';
+import popUp from "@/components/popUp/index.vue";
 export default {
   name: "sidebox",
   components: {
@@ -128,7 +134,7 @@ export default {
   },
   data() {
     return {
-      popUpShow: false, // 弹框
+      showLogo: true,
       lang: this.$i18n.locale,
       drawer: false,
       dialogVisible: false,
@@ -228,26 +234,34 @@ export default {
     window.removeEventListener("scroll", this.handleScroll, true);
   },
   methods: {
-    // 弹框
-    closePopUp() {
-      this.popUpShow = false;
+    // 隐藏
+    initShowLogo() {
+      this.showLogo = false;
+    },
+    // 客服
+    openChat() {
+      this.dialogVisible = true
+    },
+    // 跳转大屏
+    gourl() {
+      // window.location.href = "https://sanyouofficialnew.jiinfo.cn/"
+      let url = this.lang == "cn" ? "https://www.clicklinks.cn/" : "https://www.clicklinks.com/"
+      window.location.href = url
     },
     // 判断是否是周一到周五 8点半到下午5点半  这段时间
     isWeekday() {
-      if (this.lang == "cn") {
-        const now = new Date();
-        const weekday = now.getDay(); // 0-6 0代表周日
-        const hour = now.getHours(); // 0-23 
-        const minute = now.getMinutes(); // 0-59
-        console.log(weekday, hour, minute);
-        // 检查是否在周一到周五，且时间在 8:30 到 17:30 之间
-        if (weekday >= 1 && weekday <= 5) {
-          const totalMinutes = hour * 60 + minute;
-          const startMinutes = 8 * 60 + 30;
-          const endMinutes = 17 * 60 + 30;
-          console.log(totalMinutes, startMinutes, endMinutes, totalMinutes >= startMinutes && totalMinutes <= endMinutes);
-          return totalMinutes >= startMinutes && totalMinutes <= endMinutes;
-        }
+      const now = new Date();
+      const weekday = now.getDay(); // 0-6 0代表周日
+      const hour = now.getHours(); // 0-23
+      const minute = now.getMinutes(); // 0-59
+      console.log(weekday, hour, minute);
+      // 检查是否在周一到周五，且时间在 8:30 到 17:30 之间
+      if (weekday >= 1 && weekday <= 5) {
+        const totalMinutes = hour * 60 + minute;
+        const startMinutes = 8 * 60 + 30;
+        const endMinutes = 17 * 60 + 30;
+        console.log(totalMinutes, startMinutes, endMinutes, totalMinutes >= startMinutes && totalMinutes <= endMinutes);
+        return totalMinutes >= startMinutes && totalMinutes <= endMinutes;
       }
       return false;
     },
@@ -262,7 +276,7 @@ export default {
         hidden: 1 // hidden 表示是否隐藏访客端默认入口
       }).then(ysf => {
         ysf("config", {
-          title: "BsAb",
+          title: "Humab",
           level: 1,
           success: function () {
             ysf("open")
@@ -308,11 +322,7 @@ export default {
           source: 10
         }).then(res => {
           if (res.code == 0) {
-            // this.$message({
-            //   message: this.$t("input.YourMessage"),
-            //   type: "success"
-            // });
-            this.popUpShow = true
+            this.$refs.popUpRef.showPopUp();
             this.form = {
               company: "",
               email: "",
@@ -342,6 +352,7 @@ export default {
       } else {
         this.isTop = false;
       }
+      this.showLogo = false
     },
     // 回到顶部
     goTop() {
@@ -363,32 +374,52 @@ export default {
 @media screen and (min-width: 751px) and (max-width: 9999px) {
     .sidebox-box{
         position: fixed;
-        bottom: 30%;
+        bottom: 10%;
         right: 0px;
         z-index: 9999;
+        .BoxS{
+          display: flex;
+          align-items: center;
+          height: 270px;
+          .BoxSLeft{
+            margin-left: 25px;
+            margin-right: 20px;
+            img{
+              width: 40px;
+              height: 40px;
+              cursor: pointer;
+            }
+          }
+        }
         .fixedMessages{
           width: 100px;
           background: #FFFFFF;
           box-shadow: 0px 2px 27px 0px rgba(105,105,105,0.35);
           border-top-left-radius: 10px;
           border-bottom-left-radius: 10px;
-          padding-top: 32px;
+          padding-top: 24px;
           overflow: hidden;
             .fixed-messageImg{
               display: block;
               margin: 0 auto;
-              width: 65px;
-              background: linear-gradient(180deg, #22AB3A, #1880C1);
-              padding: 5px;
+              width: 75px;
+              // background: linear-gradient(180deg, #22AB3A, #1880C1);
+              // padding: 5px;
               border-radius: 50%;
               cursor: pointer;
             }
+            .fixed-messageback{
+              background: linear-gradient(180deg, #22AB3A, #1880C1);
+              padding: 5px;
+            }
             .rig_tip{
               margin: 4px auto 20px;
               text-align: center;
+              font-weight: bold;
+              color: #0466B5;
               font-size: 16px;
               cursor: pointer;
-              
+
             }
             .rig_tip_en{
               font-size: 12px;
@@ -402,7 +433,7 @@ export default {
                 margin: 0 auto;
               }
               .fixedMessagesText{
-                font-family: Source Han Sans CN;
+
                 font-weight: bold;
                 font-size: 18px;
                 color: #989898;
@@ -459,7 +490,6 @@ export default {
                             display: flex;
                             align-items: center;
                             justify-content: space-between;
-                            // margin-top: 20px;
                             margin-top: 2px;
                             cursor: pointer;
                             padding: 10px 20px;
@@ -484,7 +514,7 @@ export default {
           margin: 0 auto;
           overflow: hidden;
           .production_bottom_title{
-            font-family: Source Han Sans CN;
+
             font-weight: bold;
             font-size: 18px;
             color: #000;
@@ -525,7 +555,7 @@ export default {
               align-items: center;
               justify-content: space-between;
               .submit_bottom_text{
-                font-family: Source Han Sans CN;
+
                 font-weight: 500;
                 font-size: 16px;
                 color: #0466B5;
@@ -536,7 +566,7 @@ export default {
                 height: 45px;
                 line-height: 45px;
                 background: #0466B5;
-                font-family: Source Han Sans CN;
+
                 font-weight: 500;
                 font-size: 18px;
                 color: #FFFFFF;
@@ -553,9 +583,23 @@ export default {
 @media screen and (min-width: 0px) and (max-width: 750px) {
     .sidebox-box{
         position: fixed;
-        bottom: 30%;
+        bottom: 10%;
         right: 0px;
         z-index: 9999;
+        .BoxS{
+          display: flex;
+          align-items: center;
+          height: 2rem;
+          z-index: 2;
+          .BoxSLeft{
+            margin-left: 0.1rem;
+            img{
+              width: 0.3rem;
+              height: 0.3rem;
+              cursor: pointer;
+            }
+          }
+        }
         .fixedMessages{
           width: 0.7rem;
           background: #FFFFFF;
@@ -567,15 +611,20 @@ export default {
             .fixed-messageImg{
               display: block;
               margin: 0 auto;
-              width: 0.4rem;
-              background: linear-gradient(180deg, #22AB3A, #1880C1);
-              padding: 5px;
+              width: 0.5rem;
+              // background: linear-gradient(180deg, #22AB3A, #1880C1);
+              // padding: 5px;
               border-radius: 50%;
               cursor: pointer;
             }
+            .fixed-messageback{
+              background: linear-gradient(180deg, #22AB3A, #1880C1);
+              padding: 5px;
+            }
             .rig_tip{
               margin: 4px auto 0.2rem;
               text-align: center;
+              color: #0466B5;
               font-size: 12px;
               cursor: pointer;
             }
@@ -591,7 +640,7 @@ export default {
                 margin: 0 auto;
               }
               .fixedMessagesText{
-                font-family: Source Han Sans CN;
+
                 font-weight: bold;
                 font-size: 14px;
                 color: #989898;
@@ -639,7 +688,7 @@ export default {
           margin: 0 auto;
           overflow: hidden;
           .production_bottom_title{
-            font-family: Source Han Sans CN;
+
             font-weight: bold;
             font-size: 18px;
             color: #000;
@@ -691,7 +740,7 @@ export default {
               justify-content: space-between;
               flex-wrap: wrap;
               .submit_bottom_text{
-                font-family: Source Han Sans CN;
+
                 font-weight: 500;
                 color: #0466B5;
                 width: 100% !important;
@@ -703,7 +752,7 @@ export default {
                 height: 45px;
                 line-height: 45px;
                 background: #0466B5;
-                font-family: Source Han Sans CN;
+
                 font-weight: 500;
                 font-size: 18px;
                 color: #FFFFFF;

src/langs/cn/index.js

@@ -667,8 +667,13 @@ export default {
     RemindFormat: "Remind: for asymmetry format, variable regions can be either distinct or identical upon needs."
   },
   tips: {
-    WebNavigation: '网站导航',
-    OnlineChat: '在线聊天',
-    LeaveMessage: '留言'
+    // WebNavigation: '网站导航',
+    // OnlineChat: '在线聊天',
+    // LeaveMessage: '留言',
+    // InnovationWorks: '原创新药<br/>创新工场'
+    WebNavigation: 'Web Navigation',
+    OnlineChat: 'Online Chat',
+    LeaveMessage: 'Leave Message',
+    InnovationWorks: 'Home'
   }
 }

src/langs/en/index.js

@@ -669,6 +669,7 @@ export default {
   tips: {
     WebNavigation: 'Web Navigation',
     OnlineChat: 'Online Chat',
-    LeaveMessage: 'Leave Message'
+    LeaveMessage: 'Leave Message',
+    InnovationWorks: 'Home'
   }
 }