fx66/src/components/contact-we.vue

<template>
  <div class="contact-we">
    <div class="btn" v-on:click='show()'>
    	<i class="iconfont icon-kefu3"></i>
    	<span>联<br>系<br>客<br>服</span>
    </div>
		<div class="content" v-show='isActive'>
			<div class="wechat">
				<img src="../assets/img/weichatKefu.png">
			</div>
			<div class="phone">
				<p>电话咨询</p>
				<i class="iconfont icon-dianhua"></i>
				<p>+8617354718363</p>
			</div>
		</div>
  </div>
</template>

<script>
export default {
  name: 'contactWe',
  data () {
    return {
      isActive: false
    }
  },
  methods:{
  	show(){
  		this.isActive=!this.isActive
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.contact-we{
		position: fixed;
		top: 28%;
		right: 0;
		z-index: 999;
		.btn{
			width: 36px;
			height: 120px;
	    background: #20a0ff;
	    position: absolute;
	    margin-left: -36px;
	    border-top-left-radius: 10px;
	    border-bottom-left-radius: 10px;
	    cursor: pointer;
	    margin-top: 108px;
	    text-align: center;
	    i{
	    	font-size: 24px;
	    	color: white;
	    }
	    span{
	    	color: yellow;
	    	font-size: 14px;
	    	line-height: 1;
	    }
		}
		.content{
			box-shadow: 0 3px 5px 2px rgba(26,0,0,.4);
	    width: 150px;
	    background: #20a0ff;
	    border-top-left-radius: 10px;
	    border-bottom-left-radius: 10px;
	    padding-top: 10px;
	    padding-bottom: 10px;
	    .wechat{
	    	background: white;
	    	width: 130px;
	    	margin: 0 auto;
	    	border-radius: 10px;
	    	overflow: hidden;
	    	height: 140px;
	    }
	    .phone{
	    	height: 130px;
	    	width: 130px;
	    	margin: 0 auto;
	    	border-radius: 10px;
	    	padding: 10px 5px;
	    	margin-top: 10px;
	    	background: white;
	    	text-align: center;
	    	p:nth-child(1){
					border-bottom: 1px solid #e5e5e5;
					font-size: 14px;
			    color: #333;
			    font-weight: 700;
			    line-height: 30px;
			    text-align: left;
    			margin-left: 10px;
	    	}
	    	i{
	    		font-size: 32px;
	    		color: #1eb8ff;
	    	}
	    	p:nth-child(3){
					color: #333;
					font-weight: 700;
					font-size: 13px;
					line-height: 30px;
	    	}
	    }
		}
	}
</style>