attiya/ebike-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

帮助中心-计费规则页面开发

Browse Source
This commit is contained in:
小朱 2025-04-14 16:49:31 +08:00
parent 8316feb78c
commit 4f2d57153e
2 changed files with 44 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
ebike-maintenance/pages/user/HelpPage/BillingRules.vue
View File

@ -1,35 +1,53 @@
<template> <template>
<view class="billing-rules"> <view class="billing-rules">
<text class="title">计费规则</text> <view class="billing-header">计费规则</view>
<view class="content">
<text>这里是计费规则的详细描述。</text> <view class="billing-item">
</view> <view class="item-title">起步价</view>
</view> <view class="item-value">￥1.50元</view>
</view>
<view class="billing-item">
<view class="item-title">包含时长</view>
<view class="item-value">30分钟以内</view>
</view>
</view>
</template> </template>
<script setup> <script setup>
// Vue 3 中的 <script setup> 语法 import {
// 使用 Composition API 来编写逻辑 ref
} from 'vue';
import { ref } from 'vue';
const message = ref("这里是计费规则的详细描述"); const message = ref("这里是计费规则的详细描述");
</script> </script>
<style scoped> <style scoped>
.billing-rules { .billing-rules {
padding: 20px; height: 100vh;
} background-color: white;
padding: 20px;
}
.title { .billing-header {
font-size: 24px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #333; margin-bottom: 16px;
} }
.content { .billing-item {
margin-top: 10px; display: flex;
font-size: 16px; justify-content: space-between;
color: #555; margin-bottom: 12px;
} }
</style>
.item-title {
font-size: 13px;
color: #333;
}
.item-value {
font-size: 13px;
color: #666;
}
</style>

2
ebike-maintenance/pages/user/HelpPage/HelpPage.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<view class="container"> <view class="container">
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius"> <view class="cu-list menu card-menu margin-bottom-xl shadow-lg radius">
<view class="cu-item arrow"> <view class="cu-item arrow">
<view class="content flex" @click="goToBillingRules"> <view class="content flex" @click="goToBillingRules">
<text class="text-black text-bold">计费规则</text> <text class="text-black text-bold">计费规则</text>