pet-front/components/CustomerService/index.vue

<template>
	<button plain class="customer-service-btn" open-type="contact">
		<image src="@/static/images/ydd/chat.png" mode="widthFix"></image>
	</button>
</template>

<script setup>
// 客服按钮组件 - 可以接收props来自定义位置等属性
const props = defineProps({
	// 距离右边的距离
	right: {
		type: String,
		default: '20rpx'
	},
	// 距离底部的距离
	bottom: {
		type: String,
		default: '400rpx'
	},
	// 按钮宽度
	width: {
		type: String,
		default: '97rpx'
	}
})
</script>

<style lang="scss" scoped>
.customer-service-btn {
	position: fixed;
	right: v-bind(right);
	bottom: v-bind(bottom);
	z-index: 9999;
	border: none;
	padding: 0;
	width: v-bind(width);
	height: auto;
	background: transparent;

	image {
		width: 100%;
		height: auto;
	}
}
</style>