hemall.terabimsoft.com.cn/plugins/shop_server/components/default/serviceBox.vue

<template>
  <div>
    <template v-if="basicSet.set && basicSet.set.pc_temp==1">
      <!-- 模板样式1 -->
      <div class="service" ref="service" v-if="basic_info.home && basic_info.home.mailInfo">
        <div class="service_mobile flex flex-a-c flex-j-c" v-if="basic_info.home.mailInfo.service_mobile">{{basic_info.home.mailInfo.service_mobile}}</div>
        <div class="service_mobile_link flex flex-a-c flex-j-c"><span @click.stop="toLink(basic_info.home.mailInfo.cservice,'1')" style="color:#333;">在线客服</span></div>
        <div class="service_qr">
          <img :src="basic_info.home.mailInfo.service_QRcode">
        </div>
        <div class="back_top" @click="toTop">
          <div><i class="iconfont icon-member-top" style="font-size:24px;"></i></div>
          <div>回到顶部</div>
        </div>
      </div>
      <!--<div class="service-small">-->
        <!--<div><i @mouseover="mouseOver" @mouseleave="mouseLeave" @click.stop="toLink(basic_info.home.mailInfo.cservice,'1')" class="iconfont icon-kefu"></i></div>-->
        <!--<div><i @click="toTop" class="iconfont icon-top_place"></i></div>-->
      <!--</div>-->
  </template>

  <template v-if="basicSet.set && basicSet.set.pc_temp==2">
    <!-- 模板样式二 -->
    <div class="service-temp02">
      <div class="service-temp02-item item1" @click.stop="toLink(basic_info.home.mailInfo.cservice,'1')">
        <i class="iconfont icon-member_kefu"></i>
        <div>在线咨询</div>
      </div>
      <div class="service-temp02-item item2 item-box" v-if="basic_info.home.mailInfo.service_mobile">
        <div class="phone-shows">
          <i class="iconfont icon-card_phone"></i>
          <div>咨询热线</div>
        </div>
        <div class="phone-hide">
          <i class="iconfont icon-card_phone"></i>
          <div class="phone-hide-left">
            <div>咨询电话</div>
            <div style="font-size:18px;font-weight: bold;">{{basic_info.home.mailInfo.service_mobile}}</div>
          </div>
        </div>
      </div>
      <div class="service-temp02-item item3 item-box" v-if="basic_info.home.mailInfo.service_QRcode">
        <div class="phone-shows">
          <i class="iconfont icon-all_wechat"></i>
          <div>微信咨询</div>
        </div>
        <div class="hover-box" >
          <img :src="basic_info.home.mailInfo.service_QRcode" alt="">
          <div>微信咨询</div>
          <div class="triangle-right"></div>
        </div>
      </div>
      <div class="service-temp02-item item4 item-box" v-if="basicSet.pc_temp2_set.wechat_code_src">
        <div class="phone-shows">
          <i class="iconfont icon-erweima1"></i>
          <div>公众号</div>
        </div>
        <div class="hover-box" >
          <img :src="basicSet.pc_temp2_set.wechat_code_src" alt="">
          <div>公众号</div>
          <div class="triangle-right"></div>
        </div>
      </div>
      <div class="back_top" @click="toTop">
        <div class="icon-show"><i class="iconfont icon-member-top" style="font-size:24px;"></i></div>
        <div class="text-show">回到顶部</div>
      </div>
    </div>
  </template>
  </div>
</template>

<script>
  import {mapState} from "vuex";

	export default {
	  props: [],
    data() {
      return {
      };
    },
    computed: {
      ...mapState(["basicSet", "basic_info"]),
    },
    mounted() {
      // console.log("sssssssssssss",this.basic_info)
    },
    methods: {
      mouseOver() {
        this.$refs.service.style.display = 'block';
      },
      mouseLeave() {
        this.$refs.service.style.display = 'none';
      },
      toTop() {
        window.scrollTo(0, 0);
      },
      toLink(item,flag) {
        if(item.url) {
          window.open(item.url, "_blank");
        }else if(flag ==1 && item) {
          window.open(item, "_blank");
        }
      },
    }
  };
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .service {
    position: fixed;
    text-align: center;
    width: 100px;
    bottom: 150px;
    right: 2%;
    z-index: 3;
    box-shadow: 0px 2px 10px 0px rgba(171, 171, 171, 0.28);
    background-color: #ffffff;
    .service_mobile {
      height: 50px;
      border-bottom: solid 1px #f4f4f4;
      word-break: break-all;
      padding: 0 3px;
    }
    .service_mobile_link {
      height: 50px;
      border-bottom: solid 1px #f4f4f4;
      cursor: pointer;
    }
    .service_qr {
      width: 70px;
      height: 70px;
      margin: 10px auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .back_top {
      cursor: pointer;
      margin-bottom: 10px;
    }
  }
  .service-temp02{
    position: fixed;
    text-align: center;
    width: 64px;
    bottom: 150px;
    right: 2%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    .service-temp02-item{
      display: flex;
      width: 62px;
      border-radius: 5px;
      text-align: center;
      margin-bottom: 9px;
      box-sizing: border-box;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      i{
        font-size: 26px;
      }
      &:hover{
       cursor: pointer;
        i{
          transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          transition: transform 0.5s;
        }
      }
    }
    .item1{
      background: var(--color);
      font-size: 16px;
      line-height: 1;
      height: 120px;
      padding: 15px;
      color: #fff;
      line-height: 22px;
      font-weight: bold;
      position: relative;
      i{
        font-weight: 400;
      }
    }
    .item2,.item3,.item4{
      height: 62px;
      border: 1px solid var(--color);
      font-size: 10px;
      color: var(--color);
      background: #fff;
      i{
        font-size: 30px;
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transition: transform 0.5s;
      }
      &:hover{
        background: var(--color);
        color: #fff;
      }
    }
    .item-box{
      position: relative;
      .phone-shows{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 100%;
      }
      .phone-hide{
        display: flex;
        width: 60px;
        color: #fff;
        align-items: center;
        height: 62px;
        position: absolute;
        right: 0px;
        top: -1px;
        padding: 0 15px;
        text-align: left;
        background: var(--color);
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 5px;
        border: 1px solid var(--color);
        z-index: -1;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        i{
          margin-right: 6px;
        }
      }
    }
    .item2{
      &:hover{
        .phone-shows{
          display: none;
        }
        .phone-hide{
          z-index: 1;
          width: 230px;
        }
      }
    }
    .hover-box{
      height: 160px;
      width: 140px;
      position: absolute;
      right: 84px;
      min-height: 90px;
      border-radius: 3px;
      text-align: center;
      background: var(--color);
      font-size: 13px;
      color: #ffffff;
      line-height: 12px;
      top: -51px;
      font-size: 10px;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      img{
        width: 120px;
        height: 120px;
      }
      .triangle-right {
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-left: 10px solid var(--color);
        border-bottom: 5px solid transparent;
        position: absolute;
        right: -10px;
        top: 50%;
        margin-top: -5px;
      }
    }
    .item3:hover,.item4:hover{
      .hover-box{
        display: flex
      }
    }
    .back_top{
      box-shadow: 0px 5px 10px 0px #d4c5c54f;
      display: block;
      width: 62px;
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      text-align: center;
      background: #fff;
      .icon-show{
        color: var(--color);
        display: block;
      }
      .text-show{
        display: none;
      }
      &:hover{
        background: var(--color);
        color: #fff;
        cursor: pointer;
        .icon-show{
          display: none;
        }
        .text-show{
          display: block;
          font-size: 12px;
        }
      }
    }
  }

  /*.service-small {*/
    /*display: none;*/
    /*position: fixed;*/
    /*text-align: center;*/
    /*width: 50px;*/
    /*bottom: 150px;*/
    /*right: 0;*/
    /*z-index: 3;*/
    /*cursor: pointer;*/
    /*.icon-kefu {*/
      /*color: var(--color);*/
      /*font-size: 50px;*/
    /*}*/
    /*.icon-top_place {*/
      /*color: var(--color);*/
      /*font-size: 50px;*/
    /*}*/
  /*}*/
  /*.service-small:hover {*/
    /*.service {*/
      /*display: block;*/
    /*}*/
  /*}*/


  @media screen and (min-width: 320px) and (max-width: 1500px) {
    .service {
      width: 76px;
      right: 1%;
      /*display: none;*/
      /*bottom: 270px;*/
    }
    /*.back_top {*/
      /*display: none;*/
    /*}*/
    /*.service-small {*/
      /*display: block;*/
    /*}*/
  }
</style>