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

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

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

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

@@ -1,6 +1,6 @@
 <template>
 	<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="content flex"  @click="goToBillingRules">
 					<text class="text-black text-bold">计费规则</text>