From 2fae2b2bcfdfaef3e9977e47d67f4d36f8902035 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Mon, 15 Sep 2025 00:28:33 +0800
Subject: [PATCH] 3

---
 pages/appointment/appointment-page.vue | 86 ++++++++++++++++++++++----
 1 file changed, 73 insertions(+), 13 deletions(-)

diff --git a/pages/appointment/appointment-page.vue b/pages/appointment/appointment-page.vue
index f2f81d3..5a7e859 100644
--- a/pages/appointment/appointment-page.vue
+++ b/pages/appointment/appointment-page.vue
@@ -2,7 +2,7 @@
 	<com-page-container-base ref="_containerBase">
 		<view class="content column">
 
-			<text style="margin-top: 100rpx; text-align: center;">发起预约</text>
+			<text class="page-title">发起预约</text>
 
 			<card-container marginTop="30rpx">
 				<label-field label="预定时长">
@@ -25,7 +25,7 @@
 			<card-container marginTop="30rpx">
 
 				<label-field label="组局名称">
-					<view style="border: 1px solid #515151 ;border-radius: 4px;">
+					<view class="input-wrapper">
 						<up-input placeholder="请输入内容" border="surround" v-model="reservationInfo.title"></up-input>
 					</view>
 				</label-field>
@@ -47,7 +47,7 @@
 				</label-field>
 				<view :style="{ height: lineHeight }"></view>
 				<label-field label="其他补充">
-					<view style="border: 1px solid #515151 ;border-radius: 4px;">
+					<view class="input-wrapper">
 						<up-input placeholder="请输入其他补充内容" v-model="reservationInfo.extra_info"></up-input>
 					</view>
 				</label-field>
@@ -65,15 +65,14 @@
 				</label-slect-field>
 				<view :style="{ height: lineHeight }"></view>
 				<label-slect-field label="年龄范围">
-					<view @click="openAgePicker"
-						style="font-size: 28rpx;width: 100%;display: flex;align-items: center;height: 60rpx;">
+					<view @click="openAgePicker" class="clickable-row">
 						{{ getAgeRangeText() }}
 					</view>
 				</label-slect-field>
 				<view :style="{ height: lineHeight }"></view>
 				<label-slect-field label="信誉">
-					<view style="display:flex;align-items:center;">
-						<text style="font-size: 25.86rpx;width: 120rpx;">大于等于</text>
+					<view class="flex-center-row">
+						<text class="inline-label">大于等于</text>
 						<view class="counter-container">
 							<view @click="decrement" :disabled="currentValue <= 0">
 								<uni-icons type="minus" size="24" color="#00AC4E" />
@@ -95,17 +94,15 @@
 					<com-appointment-radio-select :options="depositOptions" v-model="reservationInfo.deposit_fee" />
 				</label-slect-field>
 				<view :style="{ height: lineHeight }"></view>
-				<text
-					style="font-size: 24rpx; margin-left: 20rpx; margin-bottom: 20rpx;">鸽子费（保证金），参与人需缴纳鸽子费。若有参与者在预约后没有赴约，其鸽子费由在场的所有人平分。组局成功或失败后鸽子费将全额返还。</text>
+				<text class="note-text">鸽子费（保证金），参与人需缴纳鸽子费。若有参与者在预约后没有赴约，其鸽子费由在场的所有人平分。组局成功或失败后鸽子费将全额返还。</text>
 			</card-container>
 
-			<view class="center"
-				style="width: 90%; border-radius: 10rpx; margin: 30rpx auto 0; background-color: #00AC4E;">
+			<view class="center submit-button">
 				<text style="margin: 20rpx; color: white;">发起预约</text>
 			</view>
 
-			<view class="center" style="width: 90%; margin: 20rpx auto 20rpx;">
-				<text style="color: #979797; font-size: 24rpx;">组局成功后，发起者可通过店员领取线下红包</text>
+			<view class="center note-container">
+				<text class="muted-text">组局成功后，发起者可通过店员领取线下红包</text>
 			</view>
 
 
@@ -472,6 +469,65 @@ const onAgePickerConfirm = (e) => {
 	background-color: #F7F7F7;
 }
 
+/* 页面标题 */
+.page-title {
+	margin-top: 100rpx;
+	text-align: center;
+}
+
+/* 输入外层统一样式 */
+.input-wrapper {
+	border: 1px solid #515151;
+	border-radius: 4px;
+}
+
+/* 可点击的行（年龄范围显示） */
+.clickable-row {
+	font-size: 28rpx;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	height: 60rpx;
+}
+
+/* 内联标签（信誉左侧“⼤于等于”） */
+.inline-label {
+	font-size: 25.86rpx;
+	width: 120rpx;
+}
+
+/* 通用居中容器 */
+.center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* 提交按钮容器样式 */
+.submit-button {
+	width: 90%;
+	border-radius: 10rpx;
+	margin: 30rpx auto 0;
+	background-color: #00AC4E;
+}
+
+/* 备注容器及文本 */
+.note-container {
+	width: 90%;
+	margin: 20rpx auto 20rpx;
+}
+
+.muted-text {
+	color: #979797;
+	font-size: 24rpx;
+}
+
+.note-text {
+	font-size: 24rpx;
+	margin-left: 20rpx;
+	margin-bottom: 20rpx;
+}
+
 .counter-container {
 	display: flex;
 	align-items: center;
@@ -508,4 +564,8 @@ const onAgePickerConfirm = (e) => {
 	border: 1px solid #007aff !important;
 	border-radius: 6px;
 }
+
+.flex-center-row {
+	display: flex;
+}
 </style>
\ No newline at end of file