fx66/src/components/Contact.vue

<template>
    <div class="contact">
      <div class="title">
        <hr>
        <h3>联系我们 快速申请</h3>
        <hr>
      </div>
      <h4>Feel Free to Contact Us</h4>
      <ul class="contact-us">
        <li>
          <img src="../../static/images/phone.png" alt="">
          <img src="../../static/images/phoneHover.png" alt="" >
          <p>86-17354718363</p>
        </li>
        <li  @mouseover="overShow()" @mouseout="outHide()">
          <img src="../../static/images/wx.png" alt="">
          <img src="../../static/images/wxHover.png" alt="">
          <p>fx66kefu</p>
        </li>
      </ul>
      <img src="../../static/images/fx66kefufu.jpg" alt="" class="kefu-wx" v-show="show">

    </div>
</template>

<script>
    export default {
        name: "Contact",
      data(){
          return{
            show:false
          }
      },
      methods:{
          overShow:function(){
            this.show = true;
          },
        outHide:function(){
            this.show = false
        }
      }
    }
</script>

<style scoped>
.contact {
  width: 1200px;
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  padding-top: 50px;

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;

h3 {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

hr {
  width: 420px;
  height: 1px;
  background-color: #e5e5e5;
  border: 0;
}

}
h4{
  font-size: 16px;
  color: #999;
  margin-top: 12px;
}
}
.contact-us{
  margin-top: 50px;
  padding: 0 400px 70px;
  display: flex;
  justify-content: space-between;
  p{
    line-height: 1;
    font-size: 20px;
    clear: both;
  }
  li>img{
    margin-bottom: 20px;
    /*float: left;*/
  }
}
.contact-us>li>img:nth-child(2){
  display: none;
}
.kefu-wx{
  /*display: none;*/
  width: 120px;
  position: absolute;
  top: 0;
  margin: 150px 0 0 240px;
}
.contact-us>li:hover img:nth-child(1){
  display:none
}
.contact-us>li:hover img:nth-child(2){
  display: inline-block;
}
</style>