Fx66/src/components/ContactWe.vue

<template>
  <div class="con-ctnr">
    <div class="con-btn" @click="conShow">
      <img src="../assets/img/kefu.png">
      <span>
        联<br>系<br>客<br>服
      </span>
    </div>
    <div class="contant" v-show="state">
      <div class="wechat">
        <img src="../assets/img/wechat.png">
      </div>
      <div class="phone">
        <h6>电话咨询</h6>
        <img src="../assets/img/phone.png">
        <p>+8617354718363</p>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        state:false
      }
    },
    methods:{
      conShow(){
        this.state = !this.state;
      }
    }
  }
</script>
<style scoped>
  .con-ctnr{
    height: 313px;
    .con-btn{
      width: 36px;
      height: 120px;
      margin-left: -36px;
      background-color: #20a0ff;
      position: absolute;
      cursor: pointer;
      margin-top: 108px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      img{
        margin-top: 8px;
      }
      span{
        color: #fffc00;
        font-size: 14px;
      }
    }
    .contant{
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      background: #20a0ff;
      padding: 10px 0;
      box-shadow: 0 3px 5px 2px rgba(26,0,0,.4);
      width: 150px;
      .wechat{
        background-color: #fff;
        width: 130px;
        margin: 0 auto;
        border-radius: 10px;
      }
      .phone{
        background-color: #fff;
        margin-top: 10px;
        border-radius: 10px;
        width: 130px;
        margin: 10px auto 0px;
        padding: 10px 0;
        h6{
          text-align: left;
          margin-left: 10px;
          font-size: 14px;
          color: #333;
          font-weight: 700;
          line-height: 30px;
          border-bottom: 1px solid #e5e5e5;
        }
        img{
          margin-top: 10px;
        }
        p{
          font-size: 14px;
          color: #333;
          font-weight: 700;
          line-height: 30px;
        }
      }
    }
  }
</style>