fx66/src/components/rightHelper.vue

<template>
    <div class="helper-container" :class="{'extend':isExtend}">
      <div @click="handleShowDetail" class="button">
        <i class="icon iconfont">&#xe618;</i>
        <p class="btn-text">在线客服</p>
      </div>
      <div class="helper-detail">
        <div class="detail-top">
          <img class="qw-img" :src="require('../assets/contant.png')"/>
        </div>
        <div class="detail-bottom">
          <h1 class="hot-line-title">电话咨询</h1>
          <hr class="divider"/>
          <i class="icon phone"></i>
          <p class="hot-line">400-1565-899</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "rightHelper",
      data(){
        return{
          isExtend:false
        }
      },
      methods:{
        handleShowDetail(){
          this.isExtend=!this.isExtend;
        }
      }

    }
</script>

<style scoped lang="less">
  @import "../assets/less/_variable.less";
  @lightBlue:#0485d8;
  .helper-container{
    z-index: 10;
    transition: all 0.25s ease;
    &.extend{
      left: 100%;
      transform: translate(-100%,-50%);
    }
    position: fixed;
    top: 50%;
    left: calc(100% - 32px);
    transform: translateY(-50%);
    & .button{
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      padding: 1px;
      width: 32px;
      height: 120px;
      background-color: @lightBlue;
      border-radius:10px 0 0 10px;
      box-shadow: 2px 0 2px #4f4f4f;
      & .icon{
        display: inline-block;
        margin-top: 5px;
        width: 22px;
        height: 22px;
        color: white;
      }
      & .btn-text{
        font-size: 14px;
        line-height: 1.2;
        width: 14px;
        margin: 10px auto 0;
        color: #fffc00;
      }
    }
    & .helper-detail{
      padding: 1px;
      border-radius:10px 0 0 10px;
      margin-left: 32px;
      background-color: @lightBlue;
      & .detail-top{
        border-radius: 10px;
        width: 128px;
        height: 290px;
        background-color: white;
        margin: 6px;
        & .qw-img{
          margin-top: 12px;
        }
      }
      & .detail-bottom{
        padding: 1px;
        border-radius: 10px;
        width: 128px;
        height: 122px;
        background-color: white;
        margin: 6px;
        & .hot-line-title{
          margin-top: 10px;
          font-size: 13px;
          color:@lightBlack;
          font-weight: 700;
        }
        & .divider{
          margin: 0 5px;
        }
        & .icon.phone{
          display: inline-block;
          width: 31px;
          height: 37px;
          margin-top: 10px;
          background: url(../assets/phone.png) 50% 50% no-repeat;

        }
        & .hot-line{
          font-size: 14px;
          color: @lightBlack;
          font-weight: 700;
        }
      }
    }
  }
</style>