hotel-tablecloth-uniapp-24-08-29/components/config/customerServicePopup.vue

<template>
	<!-- 联系客服弹框 -->
	<uv-overlay :show="show" @click="close">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="title">联系客服</view>
				<view class="center">确定拨打客服电话?</view>
				<view class="bottom">
					<view>
						<uv-button type="info" shape="circle" text="取消" :custom-style="customStyle1"
							@click="close"></uv-button>
					</view>
					<view>
						<uv-button type="info" shape="circle" text="确定" :custom-style="customStyle2"
							@click="confirm"></uv-button>
					</view>
				</view>
			</view>
		</view>
	</uv-overlay>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
			}
		},

		computed: {
			customStyle1() {
				return {
					height: '60rpx',
					background: '#FFF',
					color: '#000000',
					fontSize: '36rpx',
					borderRadius: '40rpx', //圆角

					// nvue中必须是下方的写法
					'border-top-right-radius': '40rpx',
					'border-bottom-left-radius': '40rpx',
					'border-bottom-right-radius': '40rpx',
					'width': '150rpx',
				}
			},
			customStyle2() {
				return {
					height: '60rpx',
					background: '#fd5100',
					color: '#FFF',
					fontSize: '34px',
					borderRadius: '40rpx', //圆角
					// nvue中必须是下方的写法
					'border-top-right-radius': '40rpx',
					'border-bottom-left-radius': '40rpx',
					'border-bottom-right-radius': '40rpx',
					'width': '150rpx',
				}
			}
		},
		methods: {
			open(){
				this.show = true
			},
			close(){
				this.show = false
			},
			confirm() {
				this.show = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

	}

	.rect {
		width: 600rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.title {
			padding: 10rpx 0 0 15rpx;
			background-color: #fd5100;
			color: #FFF;
			text-align: left;
			width: 100%;
			height: 18%;
			font-size: 36rpx;
		}

		.center {
			height: 40%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
		}

		.bottom {
			display: flex;
			justify-content: center;
			gap: 50rpx;
		}
	}
</style>