jinNiucourseMall_uniapp/components/FloatingCustomerService/index.vue

<template>
	<view class="floating-customer-service">
		<button open-type="contact" class="contact-btns">
			<image src="https://kntobs.jnmyunl.com/shop/images/customer.png" mode="aspectFit" />
			<view class="text">客服投诉</view>
		</button>
	</view>
</template>

<script>
	export default {
		name: "FloatingCustomerService",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.floating-customer-service {
		position: fixed;
		right: 30rpx;
		bottom: 15%; // Slightly higher to avoid tabbar overlap
		z-index: 9999;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
		background-color: #2BC7B9;
		overflow: hidden;

		.contact-btns {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
			background: transparent;
			border: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&::after {
				border: none;
			}

			image {
				width: 50%;
				height: 50%;
				margin-bottom: 2rpx;
			}

			.text {
				font-size: 20rpx;
				color: #fff;
				line-height: 1;
				font-weight: bold;
			}
		}
	}
</style>