crs-double-resistance/src/components/homeHeader.vue

<template>
  <div class="header_app">
    <hea-der class="tophea_box"></hea-der>
    <div class="back-clor">
      <!-- <div class="topheader topheaderWeb">
        <div class="topheaderBox">
          <div class="topheaderContent" @click="gotoSanyou">
            <img class="headerImg" src="@/assets/img/header/logo1.png" alt="">
            <span class="headerText">Sanyou</span>
            <div class="headerBorder"></div>
          </div>
          <div class="topheaderContent" @click="gotoCRO">
            <img class="headerImg" src="@/assets/img/header/logo2.png" alt="">
            <span class="headerText">CRO</span>
            <div class="headerBorder"></div>
          </div>
          <div class="topheaderContent" @click="gotoCDO">
            <img class="headerImg" src="@/assets/img/header/logo3.png" alt="">
            <span class="headerText">CDO</span>
            <div class="headerBorder"></div>
          </div>
          <div class="topheaderContent" @click="gotoCPO">
            <img class="headerImg" src="@/assets/img/header/logo4.png" alt="">
            <span class="headerText">CPO</span>
            <div class="headerBorder"></div>
          </div>
          <div class="topheaderContent" @click="gotooneClick">
            <img class="headerImg" src="@/assets/img/header/logo5.png" alt="">
            <span class="headerText">CRS</span>
            <div class="headerBorder"></div>
          </div>
          <div class="topheaderContent" @click="gotoBsAb">
            <img class="headerImg" src="@/assets/img/header/logo6.png" alt="">
            <span class="headerText">oneClick⁺</span>
            <div class="headerBorder"></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="" />
        </div>
        <div class="input_box">

          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" text-color="#065BA9" active-text-color="#065BA9" @select="handleSelect">
            <el-menu-item index="home"><img class="el-menu-img" src="@/assets/img/doubleAntibody/S-17.png" alt="" srcset="" />Overview</el-menu-item>
            <el-menu-item index="configuration"><img class="el-menu-img" src="@/assets/img/doubleAntibody/S-18.png" alt="" srcset="" />Configuration</el-menu-item>
            <el-menu-item index="product"><img class="el-menu-img" src="@/assets/img/doubleAntibody/S-19.png" alt="" srcset="" />Product</el-menu-item>
            <el-menu-item index="antibody"><img class="el-menu-img" src="@/assets/img/doubleAntibody/S-23.png" alt="" srcset="" />Database</el-menu-item>
            <el-menu-item index="profile"><img class="el-menu-img" src="@/assets/img/doubleAntibody/S-21.png" alt="" srcset="" />Brochure</el-menu-item>
            <el-menu-item index="promotion"><img class="el-menu-img" src="@/assets/img/doubleAntibody/S-24.png" alt="" srcset="" />Promotion</el-menu-item>
          </el-menu>

        </div>
        <div class="header_c">
          <div class="clout">
            <img class="clout_img" src="@/assets/img/slogan.png" alt="" />
            <userInfo class="user_info"></userInfo>
          </div>
        </div>
         <!-- 移动端 -->
        <div style="display:none" class="menu" @click="tapcanceltpmd">
          <img class="menu_img" src="@/assets/img/menu.png" alt="" />
        </div>
        <div class="menubox" v-if="tapshowpmd">
          <div class="cancel" @click="tapcanceltpmdn">
            <img src="@/assets/img/dele.png" alt="" class="cancel_images" />
          </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="home">Overview</el-menu-item>
            <el-menu-item index="configuration">Configuration</el-menu-item>
            <el-menu-item index="product">Product</el-menu-item>
            <el-menu-item index="antibody">Database</el-menu-item>
            <el-menu-item index="profile">Brochure</el-menu-item>
            <el-menu-item index="promotion">Promotion</el-menu-item>
          </el-menu>
        </div>
      </div>
      <!-- <div class="topheader topheaderMove">
        <div class="topheaderBox">
          <div class="topheaderContent" @click="gotoSanyou">
            <img class="headerImg" src="@/assets/img/header/logo1.png" alt="">
            <span class="headerText">Sanyou</span>
            <div class="headerBorder"></div>
          </div>
          <div class="topheaderContent" @click="gotoCRO">
            <img class="headerImg" src="@/assets/img/header/logo2.png" alt="">
            <span class="headerText">CRO</span>
            <div class="headerBorder"></div>
          </div>
          <div class="topheaderContent" @click="gotoCDO">
            <img class="headerImg" src="@/assets/img/header/logo3.png" alt="">
            <span class="headerText">CDO</span>
            <div class="headerBorder"></div>
          </div>
          <div class="topheaderContent" @click="gotoCPO">
            <img class="headerImg" src="@/assets/img/header/logo4.png" alt="">
            <span class="headerText">CPO</span>
            <div class="headerBorder"></div>
          </div>
          <div class="topheaderContent" @click="gotooneClick">
            <img class="headerImg" src="@/assets/img/header/logo5.png" alt="">
            <span class="headerText">CRS</span>
            <div class="headerBorder"></div>
          </div>
          <div class="topheaderContent" @click="gotoBsAb">
            <img class="headerImg" src="@/assets/img/header/logo6.png" alt="">
            <span class="headerText">oneClick⁺</span>
            <div class="headerBorder"></div>
          </div>
        </div>
      </div> -->
    </div>
    <!-- <indexTaps></indexTaps> -->
  </div>
</template>

<script>
import userInfo from "@/components/userInfo";
import heaDer from "@/components/header";
export default {
  components: {
    heaDer,
    // indexTaps,
    userInfo
  },
  name: "homeHeader",
  data() {
    return {
      showMove: localStorage.getItem("user"),
      tapshowpmd: false,
      activeIndex: "",
      tapshow: false,
      activity: true,
      activityshow: true
    };
  },
  methods: {
    gotoSanyou() {
      window.location.href = "https://sanyoubio.com/";
    },
    gotoCRO() {
      window.location.href = "https://sanyoubio.com/service?value=pointCRO";
    },
    gotoCDO() {
      window.location.href = "https://sanyoubio.com/service?value=pointCDO";
    },
    gotoCPO() {
      window.location.href = "https://sanyoubio.com/service?value=pointCPO";
    },
    gotooneClick() {
      window.location.href = "https://crs.sanyoubio.com/?utm_source=www";
    },
    gotoBsAb() {
      window.location.href = "https://www.oneclick-plus.com/?utm_source=www";
    },
    tapcancel() {
      this.tapshow = false;
    },
    tapcanceltpmd() {
      this.tapshowpmd = true;
    },
    tapcanceltpmdn() {
      this.tapshowpmd = false;
    },
    handleSelect(key, keyPath) {
      if (key) {
        this.$util.goRoute({ name: key });
      } else {
        this.$message("Launching soon", 3000);
      }
      this.tapshowpmd = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 751px) and (max-width: 9999px) {
  .tophea_box {
    display: none;
  }
  .el-dropdown-menu /deep/ {
    margin-top: 6px;
    padding: 0;
    background: #012c53;
    color: #fff;
    border: none;
    .el-dropdown-menu__item {
      color: #fff;
    }
    .el-dropdown-menu__item:hover {
      background: #00396c;
    }
  }

  .header_app {
    position: sticky;
    top: 0;
    z-index: 9999;
    .back-clor {
      width: 100%;
      background-color: #fff;
      box-shadow: 0px 0px 40px 0px rgba(5,28,129,0.32);
      .header_top {
        width: 1200px;
        min-height: 80px;
        margin: auto;
        display: flex;
        align-items: center;
        // padding: 10px 0;
        // padding: 0.625rem 0;
        .logo {
          width: 96px;
          //  margin-right: 40px;
          cursor: pointer;
          .logo_img {
            display: block;
            width: 100%;
          }
          .logo_d {
            color: #0053a8;
            padding-bottom: 0.625rem;
            border-bottom: 1px solid #0053a8;
          }
        }
        .input_box /deep/ {
          // margin-left: 2.25rem;
          flex: 1;
          .dropDown-img{
            width: 0.5rem;
            margin-left: 0.4rem;
          }
          .drop-down{
            z-index: 999;
            position: absolute;
            top: 80px;
            width: 200px;
            margin-left: 30px;
            background: #065BA9;
            padding: 0 1rem;
            box-sizing: border-box;
            display: none;
            overflow: hidden;
            box-shadow: 0px 0px 40px 0px rgba(5,28,129,0.32);
          }
          @keyframes move-drop {
              0% {
                opacity: 0;
                margin-top: 30px;
              }
              100% {
                opacity: 1;
                margin-top: 0px;
              }
          }
          .el-menu-item:hover .drop-down{
              display: block;
              animation: move-drop;
              animation-duration: .5s;
              animation-fill-mode: forwards;
          }
          .drop-text{
              text-align: center;
              font-size: 12px;
              line-height: 1;
              padding: 1rem 0;
              box-sizing: border-box;
              color: #fff;
              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
              a{
                text-decoration: none;
              }
          }
          .drop-text:last-child{
              border: none;
          }
          .el-menu {
            border-bottom: none;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            .el-menu-item {
              // flex: 1;
              text-align: center;
              height: 80px;
              line-height: 80px;
              border-bottom: none;
              padding: 0 5px;
              position: relative;
              font-size: 18px;
              font-family: "Arial-BoldMT", Arial;
              // font-weight: normal;
              color: #005bab;
              font-weight: 500;
              &:hover {
                // background-color: #fff;

              }
              // &::before {
              //   position: absolute;
              //   width: 1px;
              //   height: 1.25rem;
              //   background-color: #d9e6f2;
              //   left: 0;
              //   top: 0.3125rem;
              //   transform: translateX(-50%);
              //   content: "";
              // }
              &:nth-of-type(1)::before {
                width: 0;
              }
            }
            .is-active {
              color: #FFF !important;
              background-color: #0053a8;
              // background-color: #fff;
              // border-bottom: none;
              position: relative;
              &::after {
                position: absolute;
                width: 70%;
                height: 1px;
                // background-color: #0053A8;
                content: "";
                left: 50%;
                bottom: -6px;
                transform: translateX(-50%);
                border-radius: 8rpx;
              }
            }
          }
        }
        .header_c {
          position: relative;
          // margin-left: 1%;
          .clout {
            font-weight: normal;
            display: flex;
            align-items: center;
            font-family: Arial;
            .clout_img {
              display: none;
              width: 260px;
            }
          }
          .clout_active {
            position: absolute;
            width: 3px;
            height: 20px;
            background: rgba(0, 91, 171, 0.2);
            top: 50%;
            left: -0.8rem;
            transform: translateY(-50%);
          }
        }
      }
    }
    .tap_telephone {
      height: 50px;
      position: fixed;
      bottom: 70px;
      right: 0;
      background-color: #005bab;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
      border-radius: 8px 0px 0px 8px;
      display: flex;
      align-items: center;
      padding: 0 22px 0 12px;
      cursor: pointer;
      z-index: 999;
      .telephone_img {
        width: 24px;
        margin-right: 8px;
        .telephone_i {
          width: 100%;
        }
      }
      .telephone_name {
        font-size: 20px;
        font-family: Arial;
        font-weight: normal;
        color: #ffffff;
      }
    }
    .taps {
      position: fixed;
      width: 100%;
      bottom: 0;
      right: 0;
      z-index: 999;
      .taps_s {
        display: inline-block;
        padding: 1.25rem 1.25rem 2rem;
        position: absolute;
        bottom: 3rem;
        right: 1.4rem;
        background-color: #f9fbfd;
        border-radius: 0.4rem;
        .taps_a {
          position: relative;
          display: inline-block;
          padding: 1.25rem 1.25rem 2rem;
          position: relative;
          background-color: #f9fbfd;
          border-radius: 0.4rem;
          .logo {
            display: flex;
            align-items: center;
            margin-bottom: 38px;
            .logo_img {
              width: 80px;
            }
            .logo_d {
              // font-size: 14px;
              // font-style:oblique;
              // font-family: "Arial-BoldMT",Arial;
              // font-weight: bold;
              // color: #005BAB;
              margin-left: 1rem;
              // position: relative;
              .clout_img {
                width: 260px;
              }
              // &::after{
              //  position: absolute;
              //   width: 3px;
              //   height: 1.6rem;
              //   background: rgba(0, 91, 171, 0.2);
              //   content: "";
              //   left:-1rem;
              //   top: 50%;
              //   transform: translateY(-50%);
              // }
            }
          }
          .taps_d {
            color: #000;
            font-weight: 600;
            font-size: 18px;
            margin-top: 0.4rem;
            margin-bottom: 3rem;
          }
          .taps_num {
            display: flex;
            align-items: center;
            .num_images {
              width: 24px;
            }
            .num {
              color: #005bab;
              margin-left: 8px;
              font-family: Arial;
              font-size: 14px;
            }
          }
          .taps_num + .taps_num {
            margin-top: 24px;
          }
          .taps_num_t {
            cursor: pointer;
          }
          .cancel {
            position: absolute;
            top: -0.8rem;
            right: -0.5rem;
            cursor: pointer;
            .cancel_images {
              width: 1.5rem;
            }
          }
          .taps_bot {
            font-size: 14px;
            font-family: Arial;
            color: #313131;
            margin-top: 22px;
          }
        }
      }
    }
    .activity {
      position: fixed;
      // bottom: 0;
      bottom: 20%;
      right: 0;
      z-index: 999;
      .taps_s {
        .activity_d {
          width: 200px;
          position: relative;
          margin-right: 0px;
          .images {
            width: 100%;
            cursor: pointer;
          }
          .images_icon {
            width: 20px;
            position: absolute;
            top: 6px;
            right: 6px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .el-menu-demo /deep/{
    .el-menu-img{
      width: 24px;
      margin-right: 5px;
    }
    .is-active{
      .el-submenu__title{
        font-size: 16px !important;
        border-bottom: none !important;
      }
    }
    .el-submenu{
      flex: 1;
      text-align: center;
      .el-submenu__title{
        font-weight: 700;
        font-size: 18px;
        height: 80px;
        line-height: 80px;
      }
    }
    .el-icon-arrow-down{
      color: #065BA9 !important;
    }
    .el-icon-arrow-down:before{
      content: "\e790" !important;
    }
  }
  .topheader{
    border-bottom: 1px solid rgb(204, 228, 255);
    width: 100%;
    background: #fff;
    .topheaderBox{
      width: 1200px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      .topheaderContent{
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
        .headerImg{
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }
        .headerText{
          font-size: 18px;
          padding: 20px 0;
        }
        .headerBorder{
          position: absolute;
          left: 145px;
          height: 20px;
          border-right: 1px solid #DDEDFF;
        }
      }
      .topheaderContent:nth-child(1) .headerBorder{
        left: 165px;
      }
      .topheaderContent:last-child .headerBorder{
        border: 0;
      }
    }
  }
  .topheader:hover{
    background: linear-gradient(to right, #00A3F0, #00BF90);
    .headerText{
      color: #fff;
    }
  }
  .topheaderMove{
    display: none;
  }
}
@media screen and (min-width: 751px) and(max-width: 1000px) {
  .header_top {
    width: 100% !important;
    padding: 0 20px !important;
    .input_box {
      .el-menu-item {
        padding: 0 4px !important;
        font-size: 14px !important;
      }
    }
    .logo {
      margin-right: 10px !important;
    }
  }
}
@media screen and (min-width: 0px) and (max-width: 750px) {
  .tophea_box {
    display: block;
  }
  .go_landing {
    width: 100%;
    background-color: #273949;
    .center_landing {
      padding: 0 0.2rem 0 0.28rem;
      height: 0.32rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .center_landingl {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .block-col-2 /deep/ {
          cursor: pointer;
          margin-right: 0.16rem;
          .el-dropdown {
            height: 0.32rem;
            line-height: 0.32rem;
            width: 0.88rem;
            display: block;
          }
          .el-dropdown-link {
            color: #fff;
            margin-left: 0.12rem;
          }
          .el-icon-arrow-down {
            margin-left: 0.1rem;
          }
          .el-dropdown:hover {
            background: #005bab;
          }
        }
        .center_text {
          display: none;
        }
        .center_textpmd {
          color: #fff;
          font-size: 12px;
        }
      }
      .center_landingpmd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .landingpmd_img {
          width: 0.24rem;
          height: 0.24rem;
          margin-right: 0.12rem;
        }
        .landingpmd_imgf {
          width: 0.24rem;
          height: 0.24rem;
        }
      }
      .center_landingr {
        display: none;
      }
    }
  }
  .el-dropdown-menu /deep/ {
    margin-top: 6px;
    padding: 0;
    background: #012c53;
    color: #fff;
    border: none;
    .el-dropdown-menu__item {
      color: #fff;
    }
    .el-dropdown-menu__item:hover {
      background: #00396c;
    }
  }

  .input_box {
    display: none;
  }
  .clout_active {
    display: none;
  }
  .menu {
    display: block !important;
  }
  .tap_telephone {
    height: 0.5rem;
    position: fixed;
    bottom: 1rem;
    right: 0.16rem;
    background-color: #005bab;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    padding: 0 0.09rem;
    cursor: pointer;
    z-index: 98;
    .telephone_img {
      width: 0.32rem;
      .telephone_i {
        width: 100%;
      }
    }
    .telephone_name {
      display: none;
      font-size: 0.14rem;
      font-family: Arial;
      font-weight: normal;
      color: #ffffff;
    }
  }
  //  弹框
  .taps {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    .taps_s {
      display: inline-block;
      padding: 0.25rem;
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: #f9fbfd;
      .taps_a {
        position: relative;
        display: inline-block;
        position: relative;
        background-color: #f9fbfd;
        .logo {
          display: flex;
          align-items: center;
          margin-bottom: 0.38rem;
          .logo_img {
            width: 20%;
          }
          .logo_d {
            // font-size: 0.12rem;
            // font-style:oblique;
            // font-family: "Arial-BoldMT",Arial;
            // font-weight: normal;
            // color: #005BAB;
            margin-left: 0.2rem;
            // position: relative;
            .clout_img {
              width: 260px;
            }
            // &::after{
            //  position: absolute;
            //   width: 0.02rem;
            //   height: 0.1rem;
            //   background: rgba(0, 91, 171, 0.2);
            //   content: "";
            //   left:-0.1rem;
            //   top: 50%;
            //   transform: translateY(-50%);
            // }
          }
        }
        .taps_num {
          display: flex;
          align-items: center;
          .num_images {
            width: 0.24rem;
          }
          .num {
            color: #005bab;
            margin-left: 0.08rem;
            font-family: Arial;
            font-size: 0.14rem;
          }
        }
        .taps_num + .taps_num {
          margin-top: 0.2rem;
        }
        .cancel {
          position: absolute;
          top: -0.15rem;
          right: -0.15rem;
          cursor: pointer;
          .cancel_images {
            width: 0.24rem;
          }
        }
        .taps_bot {
          font-size: 0.14rem;
          font-family: Arial;
          color: #313131;
          margin-top: 0.2rem;
        }
      }
    }
  }
  .header_app {
    .back-clor {
      width: 100%;
      background-color: #fff;
      .header_top {
        width: 100%;
        height: 0.48rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .logo {
          width: 15%;
          margin: 0;
          .logo_img {
            display: block;
            width: 100%;
          }
        }
        .menu {
          width: 6%;
          .menu_img {
            display: block;
            width: 100%;
          }
        }
        .header_c {
          border-left: 2px solid rgba(0, 91, 171, 0.2);
          padding-left: 0.1rem;
          .user_info {
            display: none;
          }
          .clout {
            display: flex;
            align-items: center;
            .clout_img {
              width: 260px;
            }
          }
        }
      }
    }
  }
  .menubox /deep/{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #005bab;
    z-index: 9999;
    .cancel {
      width: 100%;
      height: 0.45rem;
      // border-bottom: 1px solid #f1f1f1;
      display: flex;
      align-items: center;
      justify-content: right;
      .cancel_images {
        width: 0.3rem;
        margin-right: 0.2rem;
      }
    }
    p {
      width: 100%;
      height: 0.45rem;
      line-height: 0.45rem;
      text-indent: 0.24rem;
      color: white;
      font-size: 0.14rem;
      border-bottom: 1px solid #f1f1f1;
      a {
        color: white;
        text-decoration: none;
        font-size: 0.14rem;
      }
    }
    .el-submenu{
      border-top: 1px solid #f1f1f1;
      .el-submenu__title{
        font-size: 0.14rem;
        background-color: #005bab !important;
        .el-submenu__icon-arrow{
          color: #fff !important;
        }
      }
      .el-menu-item{
        border: none !important;
      }
    }
    .el-menu-item{
      color: white;
      text-decoration: none;
      font-size: 0.14rem !important;
      border-top: 1px solid #f1f1f1;
      background-color: #005bab !important;
    }
    .el_menus{
      border: none !important;
    }
  }
  .activity {
    display: none;
  }
  .topheader{
    width: 100%;
    .topheaderBox{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0.1rem 0.1rem;
      .topheaderContent{
        display: flex;
        align-items: center;
        flex-direction: column;
        .headerImg{
          width: 0.35rem;
          height: 0.35rem;
          margin: 0 0 0.05rem 0;
        }
        .headerText{
          width: 100%;
          padding: 0;
          font-size: 0.1rem;
          color: #6c6c6c;
          text-align: center;
          line-height: 1;
        }
        .headerBorder{
          display: none;
        }
      }
    }
  }
  .topheaderWeb{
    display: none;
  }
}
</style>