<template>
	<view>
		<view class="customer-service-bg" :style="{right:right+'rpx',bottom:bottom+'rpx'}">
			<view class="customer-service flex" @tap="toService">
				<image src="/static/public/icon-service.png" mode="widthFix" lazy-load></image>
				<button class="service-btn" open-type="contact">客服</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"customer-service",
		props:{
			right:{//距离右边多宽
				type:Number,
				default:28
			},
			bottom:{//距离底部多高
				type:Number,
				default:172
			}
		},
		computed: {
			// 主题颜色
			publicColor() {
				return '#0073bc'
			}
		},
		data() {
			return {};
		},
		methods:{
			toService(){
				console.log('咨询客服')
			},
		}
	}
</script>

<style>
.customer-service-bg{
	position: fixed;
	width: 120rpx;
	height: 120rpx;
	background-color: #FFFFFF;
	border-radius: 100%;
	box-shadow: 0 0 16rpx rgba(0,0,0,.4);
	animation: scale_name 1s linear alternate infinite;
	overflow: hidden;
}
.customer-service{
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
}
.customer-service image{
	width: 68rpx;
	height: 68rpx;
}
.customer-service .service-btn{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}
@keyframes scale_name{
	from{transform: scale(1);}
	to{transform: scale(1.1);}
}
</style>