90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
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>
|