官网悬停小窗口

1.开始状态，使用固定定位到相对位置，父元素相对定位，子元素固定定位

image.png

2.鼠标悬停状态（hover），改变距离右边的值（ right: 0;），使用过渡 (transition)

image.png

3.点击按钮出现二维码，绑定点击事件

image.png

4.鼠标移除，二维码消失

---

1.结构

 <div class="sidebar">
      <div class="WeChat" @click="sortShow" @mouseleave="wxleave">
        <img src="../../website/src/assets/homepage/weChat.png" />
        <div class="WeChat_text">微信咨询</div>
        <!-- 点击二维码显示 -->
        <div class="wechat_img" v-if="show">
          <img src="../../website/src/assets/homepage/wechat_card.png" />
          <!-- <div class="service">官方客服</div> -->
        </div>
      </div>
      <div class="Phone" @click="numberShow" @mouseleave="phoneleave">
        <img src="../../website/src/assets/homepage/phone.png" />
        <div class="Phone_text">电话咨询</div>
        <!-- 点击电话显示 -->
        <div class="phone_number" v-if="numbershow">0755-2569985</div>
      </div>
    </div>

​```

​```

2.js 鼠标点击显示隐藏，移除消失，v-if 绑定在标签上判断变量

export default {
  data() {
    return {
      show: false,
      numbershow: false,
    };
  },


  methods: {
    // 微信点击
    sortShow() {
      this.show = !this.show;
      return;
    },
    //电话点击
    numberShow() {
      this.numbershow = !this.numbershow;
      return;
    },
    // 微信移除
    wxleave() {
      this.show = false;
    },
    //  电话移除
    phoneleave() {
      this.numbershow = false;
    },

  }
};

3.样式

 .sidebar {
    .WeChat {
      position: fixed;
      top: 60%;
      right: -130px;
      width: 200px;
      height: 66px;
      border-top-left-radius: 60px;
      border-bottom-left-radius: 60px;
      background: #f6990e;
      z-index: 10000;
      transition: 0.5s;
      cursor: pointer;
      display: flex;
      img {
        width: 40px;
        height: 40px;
        margin-top: 10px;
        margin-left: 20px;
      }
      &:hover {
        right: 0;
        transition: 0.5s;
      }
      .WeChat_text {
        margin-top: 18px;
        margin-left: 10px;
        color: #ffffffff;
        font-size: 20px;
        font-family: "AlbbLight";
      }
      .wechat_img {
        position: fixed;
        right: 200px;
        top: 60%;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 6px;
        width: 224px;
        // padding: 20px 0;
        text-align: center;
        box-sizing: border-box;
        box-shadow: 0px 0px 10px rgba(153, 153, 153, 0.16);
        // display: none;

        img {
          width: 224px;
          height: 224px;
          margin: 0;
        }
        .service {
          text-align: center;
          color: #333333;
          font-size: 13px;
        }
      }
    }
    .Phone {
      position: fixed;
      top: 70%;
      right: -130px;
      background: #f6990e;
      z-index: 10000;
      width: 200px;
      height: 66px;
      border-top-left-radius: 60px;
      border-bottom-left-radius: 60px;
      cursor: pointer;
      transition: 0.5s;
      display: flex;
      img {
        width: 40px;
        height: 40px;
        margin-top: 14px;
        margin-left: 20px;
      }
      &:hover {
        right: 0;
        transition: 0.5s;
      }
      .Phone_text {
        margin-top: 19px;
        margin-left: 10px;
        color: #ffffffff;
        font-size: 20px;
        font-family: "AlbbLight";
      }
      .phone_number {
        position: fixed;
        right: 220px;
        top: 74%;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 6px;
        box-shadow: 0px 0px 10px rgba(153, 153, 153, 0.295);
        padding: 10px;
        box-sizing: border-box;
        font-size: 18px;
      }
    }
  }