diff --git a/components.d.ts b/components.d.ts
index e0bd056..faa0764 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     Container: typeof import('./components/com/page/container.vue')['default']
     ContainerBase: typeof import('./components/com/page/container-base.vue')['default']
+    LabelField: typeof import('./components/com/appointment/label-field.vue')['default']
     MahjongCard: typeof import('./components/index/MahjongCard.vue')['default']
     NoData: typeof import('./components/com/page/no-data.vue')['default']
     NoEmpty: typeof import('./components/com/index/NoEmpty.vue')['default']
@@ -18,6 +19,7 @@ declare module 'vue' {
     ReservationPopup: typeof import('./components/com/index/ReservationPopup.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TimeSelectCell: typeof import('./components/com/appointment/time-select-cell.vue')['default']
     UniNavBar: typeof import('./components/uni-nav-bar/uni-nav-bar.vue')['default']
     UniStatusBar: typeof import('./components/uni-nav-bar/uni-status-bar.vue')['default']
   }
diff --git a/components/com/appointment/label-field.vue b/components/com/appointment/label-field.vue
new file mode 100644
index 0000000..c3a1b49
--- /dev/null
+++ b/components/com/appointment/label-field.vue
@@ -0,0 +1,45 @@
+<template>
+	<view class="label-field">
+		<view class="spacer-20"></view>
+		<view class="flex-1">
+			<text class="label-field__label">{{ label }}</text>
+			<view class="label-field__body">
+				<slot />
+			</view>
+		</view>
+		<view class="spacer-20"></view>
+	</view>
+</template>
+
+<script setup>
+const props = defineProps({
+	label: { type: String, default: '' }
+})
+</script>
+
+<style scoped lang="scss">
+.label-field {
+	width: 100%;
+	display: flex;
+}
+
+.spacer-20 { width: 20rpx; }
+.flex-1 { flex: 1; }
+
+.label-field__label {
+	font-size: 26rpx;
+	margin-top: 20rpx;
+	font-family: PingFang SC, PingFang SC;
+	font-weight: 500;
+	color: #515151;
+	text-align: left;
+	font-style: normal;
+	text-transform: none;
+}
+
+.label-field__body {
+	width: 100%;
+	margin-top: 10rpx;
+
+}
+</style>
diff --git a/components/com/appointment/time-select-cell.vue b/components/com/appointment/time-select-cell.vue
new file mode 100644
index 0000000..20ae530
--- /dev/null
+++ b/components/com/appointment/time-select-cell.vue
@@ -0,0 +1,78 @@
+<template>
+	<view class="row time-row">
+		<view class="label-wrap">
+			<text class="label-text">{{ label }}</text>
+		</view>
+		<view class="value-wrap">
+			<view class="cell-box" @click="onSelect">
+				<view class="content-flex">
+					<slot />
+				</view>
+				<view class="icon-wrap">
+					<image :src="icon" class="icon-img"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+const props = defineProps({
+	label: { type: String, default: '' },
+	icon: { type: String, default: '' }
+})
+const emit = defineEmits(['select'])
+const onSelect = () => emit('select')
+</script>
+
+<style scoped lang="scss">
+.time-row {
+	display: flex;
+}
+
+.label-wrap {
+	width: 130rpx;
+	line-height: 50rpx;
+	height: 60rpx;
+}
+
+.label-text {
+	font-size: 28rpx;
+	color: #515151;
+	font-weight: 500;
+	text-transform: none;
+	font-style: normal;
+	font-family: PingFang SC, PingFang SC;
+}
+
+.value-wrap {
+	flex: 1;
+	line-height: 60rpx;
+	height: 60rpx;
+}
+
+.cell-box {
+	height: 50rpx;
+	line-height: 50rpx;
+	border-radius: 15rpx;
+	border: 2rpx solid #515151;
+	padding-left: 20rpx;
+	display: flex;
+}
+
+.content-flex {
+	flex: 1;
+}
+
+.icon-wrap {
+	width: 70rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.icon-img {
+	width: 40rpx;
+	height: 40rpx;
+}
+</style>
diff --git a/pages/appointment/appointment-page.vue b/pages/appointment/appointment-page.vue
index b0ed083..7948313 100644
--- a/pages/appointment/appointment-page.vue
+++ b/pages/appointment/appointment-page.vue
@@ -7,46 +7,13 @@
 			<view class=""
 				style="width: 90%; background-color: #FFFFFF; border-radius: 10rpx; margin: 30rpx auto 0; display: flex; justify-content: center; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);">
 				<view class="column" style="width: 95%; margin-bottom: 20rpx; margin-top: 25rpx;">
-
-					<view class="row" style="display: flex;">
-
-						<view style="width:130rpx;line-height:50rpx;height: 60rpx;">
-							<text
-								style="font-size: 28rpx;color: #515151;text-transform:none;font-style: normal;font-family: PingFang SC, PingFang SC;">开始时间</text>
-						</view>
-
-						<view class="" style="flex: 1;line-height: 60rpx;height: 60rpx;">
-							<view
-								style="height:50rpx;line-height: 50rpx;border-radius:15rpx;border:2rpx solid #515151;padding-left: 20rpx;display: flex;"
-								@click="openUpDatesTimePicker()">
-								<view style="flex: 1;">{{ getDayDescription(startTimeStr) }}</view>
-								<view style="width:70rpx;display: flex;justify-content: center;align-items: center;">
-									<image src="@@:app/static/time_start.png" style="width: 40rpx;height: 40rpx;">
-									</image>
-								</view>
-							</view>
-
-						</view>
-					</view>
+					<time-select-cell label="开始时间" icon="@@:app/static/time_start.png" @select="openUpDatesTimePicker">
+						{{ getDayDescription(startTimeStr) }}
+					</time-select-cell>
 					<view style="height:20rpx;"></view>
-					<view class="row" style="display: flex;">
-
-						<view style="width:130rpx;line-height:50rpx;height: 60rpx;">
-							<text
-								style="font-size: 28rpx;color: #515151;text-transform: none;font-style: normal;font-family: PingFang SC, PingFang SC;">结束时间</text>
-						</view>
-						<view class="" style="flex: 1;line-height: 60rpx;height: 60rpx;">
-							<view
-								style="height:50rpx;line-height: 50rpx;border-radius:15rpx;border:2rpx solid #515151;padding-left: 20rpx;display: flex;"
-								@click="openUpDatesTimePickerEnd()">
-								<view style="flex: 1;">{{ getDayDescription(endTimeStr) }}</view>
-								<view style="width:70rpx;display: flex;justify-content: center;align-items: center;">
-									<image src="@@:app/static/time_end.png" style="width: 40rpx;height: 40rpx;">
-									</image>
-								</view>
-							</view>
-						</view>
-					</view>
+					<time-select-cell label="结束时间" icon="@@:app/static/time_end.png" @select="openUpDatesTimePickerEnd">
+						{{ getDayDescription(endTimeStr) }}
+					</time-select-cell>
 				</view>
 			</view>
 
@@ -54,43 +21,34 @@
 
 			<view class="column"
 				style="width: 90%; border-radius: 10rpx; margin: 40rpx auto 0; background-color: #FFFFFF; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);">
-				<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">组局名称</text>
 
-				<view class=""
-					style="width: 89%; background-color: white; margin: 20rpx auto 0; height: 70rpx; border-radius: 10rpx; display: flex; align-items: center; padding-left: 20rpx; border: 1rpx solid #515151;">
-					<input class="uni-input" placeholder="请输入组局名称" style="font-size: 24rpx; width: 100%;" />
-				</view>
+				<label-field label="组局名称">
+					<view class="" style="width:100%;margin-top: 10rpx;">
+						<input class="uni-input" placeholder="请输入组局名称" style="font-size: 24rpx; width: 89%;" />
+					</view>
+				</label-field>
 
-				<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">房间</text>
+				<label-field label="房间">
+					<uni-data-select class="custom-select" v-model="roomValue" :localdata="range" @change="change"></uni-data-select>
+				</label-field>
 
-				<view class="" style="width: 92%; margin: 20rpx auto 0; border-radius: 50rpx;">
-					<uni-data-select class="custom-select" v-model="roomValue" :localdata="range"
-						@change="change"></uni-data-select>
-				</view>
-
-				<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">人数</text>
-
-				<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
+				<label-field label="人数">
 					<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
-				</view>
+				</label-field>
 
-				<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">玩法类型</text>
-
-				<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
+				<label-field label="玩法类型">
 					<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
-				</view>
+				</label-field>
 
-				<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">具体规则</text>
-
-				<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
+				<label-field label="具体规则">
 					<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
-				</view>
+				</label-field>
 
-				<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">其他补充</text>
-				<view class=""
-					style="width: 89%; background-color: white; border-radius: 10rpx; margin: 20rpx auto 20rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx;  border: 1rpx solid #515151;">
-					<input class="uni-input" placeholder="请输入补充信息" style="font-size: 24rpx; width: 100%;" />
-				</view>
+				<label-field label="其他补充">
+					<view class="" style="width: 89%; background-color: white; border-radius: 10rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx; border: 1rpx solid #515151;">
+						<input class="uni-input" placeholder="请输入补充信息" style="font-size: 24rpx; width: 100%;" />
+					</view>
+				</label-field>
 
 			</view>
 
@@ -204,6 +162,9 @@
 import { ref } from 'vue';
 import { getDayDescription } from '@/common/system/timeUtile';
 import { union } from 'lodash';
+import TimeSelectCell from '@/components/com/appointment/time-select-cell.vue'
+import LabelField from '@/components/com/appointment/label-field.vue'
+
 const _containerBase = ref(null)
 const startTimeStr = ref(0)
 const endTimeStr = ref(0)