ebike-ui/ebike-maintenance/pages/user/HelpPage/HelpPage.vue

<template>
	<view class="container">
		<view class="cu-list menu card-menu margin-bottom-xl shadow-lg radius">
			<view class="cu-item arrow">
				<view class="content flex"  @click="goToBillingRules">
					<text class="text-black text-bold">计费规则</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goToFaq">
				<view class="content flex">
					<text class="text-black text-bold">常见问题</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="openPhone">
				<view class="content flex">
					<text class="text-black text-bold">客服电话</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 普通弹窗 -->
	<uni-popup ref="popup" background-color="#fff" @change="change">
		<view class="popys">
			<view class="contact-title">
				客服电话
			</view>
			<view class="phone-number">
				400-888-88888
			</view>

		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const goToFaq = () => {
		uni.navigateTo({
			url: '/pages/user/HelpPage/HelpFaq'
		});
	}
	const goToBillingRules = () => {
		uni.navigateTo({
			url: '/pages/user/HelpPage/BillingRules'
		});
	}
	const popup = ref(null);
	const openPhone = () => {
		popup.value.open("center");
	}
</script>

<style>
	.container {
		background-color: white;
		height: 100vh;
	}

	.uni-popup .uni-popup__wrapper {
		border-radius: 10px;
	}

	.popys {
		text-align: center;
		width: 260px;
		height: 140px;
		background: linear-gradient(180deg, rgb(220 248 218), rgb(255, 255, 255));
		border-radius: 10px;
	}

	/* 设置客服电话标题样式 */
	.contact-title { 
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 3px;
		color: #333;
		padding-top: 40px;
		margin-bottom: 20px;
	}

	/* 设置客服电话号码样式 */
	.phone-number {
		font-size: 16px; 
		font-weight: bold; 
		color: rgb(59,183,55); 
	}
</style>