diff --git a/common/system/timeUtile.js b/common/system/timeUtile.js
index 6667bc3..c301cbf 100644
--- a/common/system/timeUtile.js
+++ b/common/system/timeUtile.js
@@ -14,7 +14,8 @@ function parseTimeString(timeStr) {
 /**
  * 将时间对象格式化为指定格式的字符串
  * @param {Date} date - 时间对象
- * @param {string} format - 格式字符串，如：yyyy-mm-dd HH:MM:ss
+ * @param {string} format - 格式字符串，如：yyyy-MM-dd HH:MM:ss
+ *                         注意：MM 在日期部分（yyyy-MM-dd）表示月份，在时间部分（HH:MM）表示分钟
  * @returns {string} 格式化后的时间字符串
  */
 function formatTime(date, format) {
@@ -25,13 +26,28 @@ function formatTime(date, format) {
     const minutes = String(date.getMinutes()).padStart(2, '0');
     const seconds = String(date.getSeconds()).padStart(2, '0');
 
-    return format
-        .replace('yyyy', year)
-        .replace('mm', month)
-        .replace('dd', day)
-        .replace('HH', hours)
-        .replace('MM', minutes)
-        .replace('ss', seconds);
+    // 使用临时占位符避免 MM 冲突
+    // 先处理日期部分的 MM（在 yyyy 和 dd 之间的 MM 表示月份）
+    let result = format.replace(/(yyyy-)(MM)(-dd)/g, '$1__MONTH__$3');
+    
+    // 再处理时间部分的 MM（在 HH 之后的 MM 表示分钟）
+    result = result.replace(/(HH:)(MM)/g, '$1__MINUTE__');
+    
+    // 替换所有其他标记
+    result = result.replace(/yyyy/g, year);
+    result = result.replace(/dd/g, day);
+    result = result.replace(/HH/g, hours);
+    result = result.replace(/mm/g, month);  // 小写 mm 始终表示月份
+    result = result.replace(/ss/g, seconds);
+    
+    // 最后替换临时占位符
+    result = result.replace(/__MONTH__/g, month);
+    result = result.replace(/__MINUTE__/g, minutes);
+    
+    // 处理剩余的 MM（如果还有，默认表示月份）
+    result = result.replace(/MM/g, month);
+    
+    return result;
 }
 
 /**
diff --git a/components/index/MahjongCard.vue b/components/index/MahjongCard.vue
index 607a903..ff24a24 100644
--- a/components/index/MahjongCard.vue
+++ b/components/index/MahjongCard.vue
@@ -12,28 +12,28 @@
 				<view class="nine-grid-container">
 					<view></view>
 					<view class="item">
-						<view v-if="getJoinPlayerAtPosition(1)" class="item-avatar">
+						<view v-if="getJoinPlayerAtPosition(1)" class="item-avatar center">
 							<image :src="getPlayerAtPosition(0)" class="avatar-img" mode="aspectFit"></image>
 						</view>
 					</view>
 					<view></view>
 
 					<view class="item">
-						<view v-if="getJoinPlayerAtPosition(2)" class="item-avatar">
+						<view v-if="getJoinPlayerAtPosition(2)" class="item-avatar center">
 							<image :src="getPlayerAtPosition(1)" class="avatar-img" mode="aspectFit"></image>
 						</view>
 					</view>
 					<view></view>
 
 					<view class="item">
-						<view v-if="getJoinPlayerAtPosition(3)" class="item-avatar">
+						<view v-if="getJoinPlayerAtPosition(3)" class="item-avatar center">
 							<image :src="getPlayerAtPosition(2)" class="avatar-img" mode="aspectFit"></image>
 						</view>
 					</view>
 					<view></view>
 
 					<view class="item">
-						<view v-if="getJoinPlayerAtPosition(4)" class="item-avatar">
+						<view v-if="getJoinPlayerAtPosition(4)" class="item-avatar center">
 							<image :src="getPlayerAtPosition(3)" class="avatar-img" mode="aspectFit"></image>
 						</view>
 					</view>
@@ -97,7 +97,13 @@ const playerPositions = computed(() => {
 	const joinedCount = joinPerson.length
 
 	// 根据总人数确定布局
-	if (personCount === 2) {
+	if (personCount === 1) {
+		// 1人局：只显示自己，头像放在左侧位置（第二行左）
+		return {
+			positions: [null, joinPerson[0] || null, null, null],
+			joinPositions: [false, false, false, false]
+		}
+	} else if (personCount === 2) {
 		// 2人局：第二行左边和右边
 		return {
 			positions: [null, joinPerson[0] || null, joinPerson[1] || null, null],
@@ -169,7 +175,10 @@ const getPlayerAtPosition = (position) => {
 const getJoinPlayerAtPosition = (index) => {
 	const personCount = props.item.personCount
 
-	if (personCount === 2) {
+	if (personCount === 1) {
+		// 1人局：仅展示左侧位置（索引2）
+		return index === 2
+	} else if (personCount === 2) {
 		// 2人局：第二行左边和右边
 		return [2, 3].includes(index)
 	} else if (personCount === 3) {
@@ -320,7 +329,7 @@ const handleJoin = () => {
 .info-text {
 	font-family: PingFang SC, PingFang SC;
 	font-weight: 400;
-	font-size:18rpx;
+	font-size:24rpx;
 	color: #575757;
 	text-align: left;
 	display: block;
diff --git a/pages/appointment/appointment-page.vue b/pages/appointment/appointment-page.vue
index dc1dce4..0172073 100644
--- a/pages/appointment/appointment-page.vue
+++ b/pages/appointment/appointment-page.vue
@@ -124,18 +124,19 @@
 
 				<card-container marginTop="30rpx">
 
-                <label-slect-field label="鸽子费">
-                    <com-appointment-radio-select :options="depositOptions" v-model="reservationInfo.deposit_fee" />
-                </label-slect-field>
-                <view v-if="reservationInfo.deposit_fee === -1" :style="{ height: lineHeight }"></view>
-                <label-slect-field v-if="reservationInfo.deposit_fee === -1" label="金额">
-                    <view class="input-wrapper">
-                        <up-input type="number" placeholder="请输入0-50" v-model="customDeposit" @input="onCustomDepositInput"></up-input>
-                    </view>
-                </label-slect-field>
-				<view :style="{ height: lineHeight }"></view>
-				<text class="note-text">鸽子费（保证金），参与人需缴纳鸽子费。若有参与者在预约后没有赴约，其鸽子费由在场的所有人平分。组局成功或失败后鸽子费将全额返还。</text>
-			</card-container>
+					<label-slect-field label="鸽子费">
+						<com-appointment-radio-select :options="depositOptions" v-model="reservationInfo.deposit_fee" />
+					</label-slect-field>
+					<view v-if="reservationInfo.deposit_fee === -1" :style="{ height: lineHeight }"></view>
+					<label-slect-field v-if="reservationInfo.deposit_fee === -1" label="金额">
+						<view class="input-wrapper">
+							<up-input type="number" placeholder="请输入0-50" v-model="customDeposit"
+								@input="onCustomDepositInput"></up-input>
+						</view>
+					</label-slect-field>
+					<view :style="{ height: lineHeight }"></view>
+					<text class="note-text">鸽子费（保证金），参与人需缴纳鸽子费。若有参与者在预约后没有赴约，其鸽子费由在场的所有人平分。组局成功或失败后鸽子费将全额返还。</text>
+				</card-container>
 
 				<view class="action-row">
 					<view class="center reset-button" @click="resetForm">
@@ -161,23 +162,23 @@
 			:defaultIndex="agePickerDefaultIndex" @confirm="onAgePickerConfirm" @cancel="() => agePickerVisible = false"
 			@close="() => agePickerVisible = false"></up-picker>
 
-		<uni-popup ref="submitPopupRef" type="center">
+		<uni-popup ref="submitPopupRef" type="center" :isMaskClick="false">
 
-			<view style="width: 90vw;height:300rpx;background-color: #fff;border-radius: 20rpx;">
+			<view style="width: 90vw; background-color: #fff; border-radius: 20rpx; padding: 20rpx;">
 				<view>
 					<view style="height: 80rpx;"></view>
 					<view style="font-size: 32rpx;font-weight: 500;color: #000;text-align: center;">发起预约成功！</view>
 					<view style="height:100rpx;"></view>
-					<view style="display: flex;width: 100%;height:100rpx;">
+					<view style="display: flex; width: 100%; height:100rpx;">
 						<button @click.stop open-type="share"
-							style=" background-color:#00AC4E;color: #fff;width: 50%;height: 100%; background-color:#00AC4E;"
-							class="center evaluate-btn" :data-item="reservation">
+							style="background-color:#00AC4E; color: #fff;width: 45%;height: 100%; margin-left: 0;" class="center"
+							:data-item="reservationData">
 							<text class="evaluate-btn-text">分享给好友</text>
 						</button>
 
 						<view
-							style="width: 50%;height: 100%;background-color: #f7f7f7;display: flex;align-items: center;justify-content: center;"
-							@click="submitPopupRef.close();">
+							style="width: 45%; height: 100%;background-color: #f7f7f7;display: flex;align-items: center;justify-content: center; border-radius: 10rpx;"
+							@click="handleClosePopup">
 							<text>关闭</text>
 						</view>
 					</view>
@@ -198,8 +199,12 @@
 	} from 'vue';
 	import {
 		getConfigData,
-		getSubscribeMessage
+		getSubscribeMessage,
+		configData
 	} from '@/common/server/config'
+	import {
+		onShareAppMessage
+	} from '@dcloudio/uni-app';
 	import {
 		usePay
 	} from '@/common/server/interface/user'
@@ -285,7 +290,7 @@
 		tomorrow.setDate(tomorrow.getDate() + 1);
 		const dayAfterTomorrow = new Date(today);
 		dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);
-		
+
 		let dateText = '';
 		if (targetDate.getTime() === today.getTime()) {
 			dateText = '今天';
@@ -298,11 +303,11 @@
 			const day = date.getDate();
 			dateText = `${month}月${day}日`;
 		}
-		
+
 		// 获取星期
 		const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
 		const weekday = weekdays[date.getDay()];
-		
+
 		return `${dateText} ${weekday}`;
 	}
 	/**
@@ -322,11 +327,11 @@
 	const onDatePickerConfirm = async (e) => {
 		console.log('日期选择器确认事件:', e);
 		console.log('datePickerValue.value:', datePickerValue.value);
-		
+
 		// up-datetime-picker 的 confirm 事件返回的是对象 { value: 毫秒级时间戳, mode: 'date' }
 		// 优先使用 v-model 绑定的 datePickerValue.value，因为它会在用户选择后自动更新
 		let timestampMs = datePickerValue.value;
-		
+
 		// 如果 v-model 的值无效，尝试从事件参数获取
 		if (!timestampMs || isNaN(timestampMs) || timestampMs <= 0) {
 			if (e && typeof e === 'object' && e.value !== undefined) {
@@ -335,9 +340,9 @@
 				timestampMs = e;
 			}
 		}
-		
+
 		console.log('提取的时间戳(毫秒):', timestampMs);
-		
+
 		// 确保是数字类型且有效
 		if (typeof timestampMs !== 'number' || isNaN(timestampMs) || timestampMs <= 0) {
 			console.error('日期选择器返回的时间戳无效:', e, 'datePickerValue:', datePickerValue.value);
@@ -348,7 +353,7 @@
 			datePickerVisible.value = false;
 			return;
 		}
-		
+
 		// 将日期转换为当天的 0 点（只取日期，不取时间）
 		const date = new Date(timestampMs);
 		if (isNaN(date.getTime())) {
@@ -360,17 +365,17 @@
 			datePickerVisible.value = false;
 			return;
 		}
-		
+
 		const year = date.getFullYear();
 		const month = date.getMonth();
 		const day = date.getDate();
 		const dateAtMidnight = new Date(year, month, day, 0, 0, 0);
-		
+
 		// 转换为秒级时间戳
 		const selectedTimestamp = Math.floor(dateAtMidnight.getTime() / 1000);
-		
+
 		console.log('转换后的秒级时间戳:', selectedTimestamp);
-		
+
 		// 验证转换后的时间戳是否有效
 		if (isNaN(selectedTimestamp) || selectedTimestamp <= 0) {
 			console.error('时间戳转换失败:', dateAtMidnight, selectedTimestamp);
@@ -381,13 +386,13 @@
 			datePickerVisible.value = false;
 			return;
 		}
-		
+
 		// 如果是同一天，不需要重新加载
 		if (selectedDate.value && selectedDate.value === selectedTimestamp) {
 			datePickerVisible.value = false;
 			return;
 		}
-		
+
 		// 更新选中的日期
 		selectedDate.value = selectedTimestamp;
 
@@ -404,7 +409,7 @@
 			console.log('重新加载房间详情, roomId:', reservationInfo.value.room_id, 'date:', selectedTimestamp);
 			await loadRoomDetailForReservation(reservationInfo.value.room_id, selectedTimestamp);
 		}
-		
+
 		datePickerVisible.value = false;
 	}
 
@@ -608,6 +613,28 @@
 	const tipsShow = () => {
 		submitPopupRef.value.open()
 	}
+
+	// 处理关闭弹窗，返回上一页
+	const handleClosePopup = () => {
+		submitPopupRef.value.close()
+		refreshPrevPageRoomList()
+		goBack()
+	}
+
+	// 刷新上一页的房间列表（发起预约入口页）
+	const refreshPrevPageRoomList = () => {
+		const pages = getCurrentPages()
+		if (!pages || pages.length < 2) return
+		const prevPage = pages[pages.length - 2]
+		const vm = prevPage?.$vm || prevPage
+		if (vm && typeof vm.loadRoomList === 'function') {
+			vm.loadRoomList()
+			return
+		}
+		if (vm && typeof vm.loadDates === 'function') {
+			vm.loadDates()
+		}
+	}
 	const maxPlayerCount = ref(0)
 
 	const peopleRange = ref([])
@@ -663,34 +690,58 @@
 		return gameRule ? gameRule.text : '';
 	}
 
-const smokingOptions = ref([
-	{ value: 2, text: '不禁烟' },
-	{ value: 1, text: '禁烟' },
-])
-const genderOptions = ref([
-	{ value: 0, text: '不限' },
-	{ value: 1, text: '男' },
-	{ value: 2, text: '女' },
-])
-const depositOptions = ref([
-	{ value: 0, text: '0元' },
-	{ value: 5, text: '5元' },
-	{ value: 10, text: '10元' },
-    { value: -1, text: '自定义' },
-])
+	const smokingOptions = ref([{
+			value: 2,
+			text: '不禁烟'
+		},
+		{
+			value: 1,
+			text: '禁烟'
+		},
+	])
+	const genderOptions = ref([{
+			value: 0,
+			text: '不限'
+		},
+		{
+			value: 1,
+			text: '男'
+		},
+		{
+			value: 2,
+			text: '女'
+		},
+	])
+	const depositOptions = ref([{
+			value: 0,
+			text: '0元'
+		},
+		{
+			value: 5,
+			text: '5元'
+		},
+		{
+			value: 10,
+			text: '10元'
+		},
+		{
+			value: -1,
+			text: '自定义'
+		},
+	])
 
-const currentValue = ref(0)
-const customDeposit = ref('')
+	const currentValue = ref(0)
+	const customDeposit = ref('')
 
-const onCustomDepositInput = (val) => {
-    // 仅保留数字与小数点，但需求是整数金额，按只允许数字处理
-    let v = String(val).replace(/[^0-9]/g, '')
-    if (v === '') v = '0'
-    let n = Number(v)
-    if (n > 50) n = 50
-    if (n < 0) n = 0
-    customDeposit.value = String(n)
-}
+	const onCustomDepositInput = (val) => {
+		// 仅保留数字与小数点，但需求是整数金额，按只允许数字处理
+		let v = String(val).replace(/[^0-9]/g, '')
+		if (v === '') v = '0'
+		let n = Number(v)
+		if (n > 50) n = 50
+		if (n < 0) n = 0
+		customDeposit.value = String(n)
+	}
 
 	const increment = () => {
 		if (currentValue.value < 5) {
@@ -752,6 +803,7 @@ const onCustomDepositInput = (val) => {
 			return false
 		}
 
+
 		if (!info.start_time || info.start_time === 0) {
 			uni.showToast({
 				title: '请选择开始时间',
@@ -835,27 +887,30 @@ const onCustomDepositInput = (val) => {
 		}
 
 
-    try {
-		var messageId = await getSubscribeMessage(reservationInfo.value.deposit_fee);
-		console.log("messageId", messageId);
-		var subscribeMessage = await requestSubscribeMessage(messageId);
-		console.log("message", subscribeMessage);
+		try {
+			var messageId = await getSubscribeMessage(reservationInfo.value.deposit_fee);
+			console.log("messageId", messageId);
+			var subscribeMessage = await requestSubscribeMessage(messageId);
+			console.log("message", subscribeMessage);
 
-		// 显示加载状态
-		uni.showLoading({
-			title: '提交中...'
-		})
+			// 显示加载状态
+			uni.showLoading({
+				title: '提交中...'
+			})
 
-        // 处理自定义鸽子费
-        let finalDeposit = reservationInfo.value.deposit_fee
-        if (finalDeposit === -1) {
-            const n = Number(customDeposit.value || 0)
-            if (isNaN(n) || n < 0 || n > 50) {
-                uni.showToast({ title: '自定义金额需在0-50之间', icon: 'none' })
-                return
-            }
-            finalDeposit = n
-        }
+			// 处理自定义鸽子费
+			let finalDeposit = reservationInfo.value.deposit_fee
+			if (finalDeposit === -1) {
+				const n = Number(customDeposit.value || 0)
+				if (isNaN(n) || n < 0 || n > 50) {
+					uni.showToast({
+						title: '自定义金额需在0-50之间',
+						icon: 'none'
+					})
+					return
+				}
+				finalDeposit = n
+			}
 
         // 准备提交数据
         const submitData = {
@@ -885,22 +940,22 @@ const onCustomDepositInput = (val) => {
 				return
 			}
 
-		var resPay = null;
-        if (submitData.deposit_fee > 0) {
-			resPay = await usePay(submitData.deposit_fee);
-			if (resPay == null) {
-				uni.showToast({
-					title: '鸽子费订单创建失败，请重新提交预约数据！',
-					icon: 'none'
-				})
-				return;
+			var resPay = null;
+			if (submitData.deposit_fee > 0) {
+				resPay = await usePay(submitData.deposit_fee);
+				if (resPay == null) {
+					uni.showToast({
+						title: '鸽子费订单创建失败，请重新提交预约数据！',
+						icon: 'none'
+					})
+					return;
+				}
+				subscribeMessage.result.paymentId = resPay.paymentId;
+				if (subscribeMessage.result != null) {
+					important_data = JSON.stringify(subscribeMessage.result);
+				}
+				submitData.important_data = important_data;
 			}
-			subscribeMessage.result.paymentId = resPay.paymentId;
-			if (subscribeMessage.result != null) {
-				important_data = JSON.stringify(subscribeMessage.result);
-			}
-			submitData.important_data = important_data;
-		}
 
 			// TODO: 调用后端API提交预约
 			// 调用后端API提交预约
@@ -967,7 +1022,7 @@ const onCustomDepositInput = (val) => {
 		const savedMaxPlayerCount = maxPlayerCount.value;
 		const savedPeopleRange = [...peopleRange.value];
 		const savedPeopleText = peopleText.value;
-		
+
 		reservationInfo.value = {
 			room_id: savedRoomId,
 			room_name: savedRoomName,
@@ -988,7 +1043,7 @@ const onCustomDepositInput = (val) => {
 		currentValue.value = 0
 		gameRuleRange.value = []
 		customDeposit.value = '' // 重置自定义鸽子费
-		
+
 		// 保留人数范围
 		maxPlayerCount.value = savedMaxPlayerCount;
 		peopleRange.value = savedPeopleRange;
@@ -1009,11 +1064,18 @@ const onCustomDepositInput = (val) => {
 	 * 加载房间详情，用于预约页面
 	 */
 	const loadRoomDetailForReservation = async (roomId, date) => {
-		console.log('loadRoomDetailForReservation 调用参数:', { roomId, date, dateType: typeof date });
-		
+		console.log('loadRoomDetailForReservation 调用参数:', {
+			roomId,
+			date,
+			dateType: typeof date
+		});
+
 		// 验证参数
 		if (!roomId || !date) {
-			console.error('loadRoomDetailForReservation 参数无效:', { roomId, date });
+			console.error('loadRoomDetailForReservation 参数无效:', {
+				roomId,
+				date
+			});
 			uni.showToast({
 				title: '参数错误',
 				icon: 'none'
@@ -1021,7 +1083,7 @@ const onCustomDepositInput = (val) => {
 			roomDetailLoading.value = false;
 			return;
 		}
-		
+
 		// 确保 date 是数字类型
 		const dateTimestamp = Number(date);
 		if (isNaN(dateTimestamp) || dateTimestamp <= 0) {
@@ -1033,14 +1095,14 @@ const onCustomDepositInput = (val) => {
 			roomDetailLoading.value = false;
 			return;
 		}
-		
+
 		roomDetailLoading.value = true;
 		try {
 			console.log('调用 getRoomDetail, roomId:', roomId, 'date:', dateTimestamp);
 			const detail = await getRoomDetail(roomId, dateTimestamp);
 			if (detail) {
 				roomDetail.value = detail;
-				
+
 				// 设置容量和人数范围
 				if (detail.capacity && detail.capacity > 0) {
 					maxPlayerCount.value = detail.capacity;
@@ -1048,7 +1110,7 @@ const onCustomDepositInput = (val) => {
 					peopleText.value = "请选择游玩人数";
 					t.push({
 						value: 1,
-						text:'无需组局'
+						text: '无需组局'
 					});
 					for (let i = 2; i <= detail.capacity; i++) {
 						t.push({
@@ -1083,7 +1145,7 @@ const onCustomDepositInput = (val) => {
 		if (config != null && config.config != null) {
 			gameTypeRange.value = [...config.config.playingMethodOptions];
 		}
-		
+
 		// 必须从房间页跳转，需要传入房间信息
 		if (!options || !options.roomId) {
 			uni.showToast({
@@ -1095,12 +1157,12 @@ const onCustomDepositInput = (val) => {
 			}, 1500);
 			return;
 		}
-		
+
 		// 接收房间信息
 		const roomId = Number(options.roomId);
 		const roomName = decodeURIComponent(options.roomName || '未知房间');
 		const date = Number(options.date);
-		
+
 		if (!roomId || !date) {
 			uni.showToast({
 				title: '房间信息不完整',
@@ -1111,12 +1173,12 @@ const onCustomDepositInput = (val) => {
 			}, 1500);
 			return;
 		}
-		
+
 		// 自动填充房间信息
 		reservationInfo.value.room_id = roomId;
 		reservationInfo.value.room_name = roomName;
 		selectedDate.value = date;
-		
+
 		// 加载房间详情，获取可预约时段和容量信息
 		await loadRoomDetailForReservation(roomId, date);
 	})
@@ -1188,6 +1250,53 @@ const onCustomDepositInput = (val) => {
 		reservationInfo.value.max_age = maxAge
 		agePickerVisible.value = false
 	}
+
+	// 分享处理函数
+	onShareAppMessage(({
+		from,
+		target,
+		webViewUrl
+	}) => {
+		console.log('onShareAppMessage', from, target, webViewUrl);
+		var resid = 0;
+		if (target != null && target.dataset && target.dataset.item) {
+			var item = target.dataset.item;
+			console.log('item', item);
+			// reservationData 的结构包含 id 字段
+			if (item && item.id) {
+				resid = item.id;
+			} else if (item && item.data && item.data.id) {
+				// 兼容数据结构
+				resid = item.data.id;
+			}
+		}
+		// 如果从 reservationData 获取不到，尝试从当前值获取
+		if (resid === 0 && reservationData.value) {
+			if (reservationData.value.id) {
+				resid = reservationData.value.id;
+			} else if (reservationData.value.data && reservationData.value.data.id) {
+				resid = reservationData.value.data.id;
+			}
+		}
+		console.log('分享的预约ID:', resid);
+
+		// 同步获取分享配置（因为 onShareAppMessage 需要同步返回）
+		const path = "pages/index/loading?id=" + resid;
+		// 直接访问 configData.value，避免异步调用
+		if (configData.value && configData.value.config) {
+			return {
+				title: configData.value.config.shareTitle || '山雀搭子 - 麻将组局',
+				path: path,
+				imageUrl: configData.value.config.shareImage || ''
+			};
+		}
+		// 默认配置
+		return {
+			title: '山雀搭子 - 麻将组局',
+			path: path,
+			imageUrl: ''
+		};
+	});
 </script>
 
 <style lang="scss">
diff --git a/pages/appointment/book-room-page.vue b/pages/appointment/book-room-page.vue
index ab9597a..4eb67ea 100644
--- a/pages/appointment/book-room-page.vue
+++ b/pages/appointment/book-room-page.vue
@@ -1,82 +1,74 @@
 <template>
 	<view class="content column">
 
-		<view class="column" style="width: 100%; height: 308rpx; background-color: white;">
-			<view style="flex: 1;"></view>
+		<view class="column header-container">
+			<view class="flex-1"></view>
 			<text class="page-title">发起预约</text>
-			<view class="row" style="width: 90%; height: 120rpx; margin: 20rpx auto 0;">
-				<view class="column center" v-for="(item, index) in dateList" :key="index" :style="setBgColor(index)"
-					@click="clickTime(index)" style="width: 96rpx; height: 100%;">
-					<text style="font-size: 26rpx;">{{ item.time }}</text>
-					<text style="font-size: 22rpx;">{{ item.weekday }}</text>
+			<view class="row date-row">
+				<view class="column center date-item" v-for="(item, index) in dateList" :key="index"
+					:style="setBgColor(index)" @click="clickTime(index)">
+					<text class="date-item-time">{{ item.time }}</text>
+					<text class="date-item-weekday">{{ item.weekday }}</text>
 
 				</view>
 			</view>
 		</view>
 
-		<text style="margin-top: 20rpx; margin-left: 32rpx; font-size: 24rpx;">{{ getBusinessAnnouncement() }}</text>
+		<text class="announcement-text">{{ getBusinessAnnouncement() }}</text>
 
-		<view class="row"
-			style="width: 686rpx; height: 56rpx; background-color: #2ED9BF; border-radius: 5rpx; margin: 20rpx auto 0; align-items: center;">
-			<text style="font-size: 22rpx; color: #262626; margin-left: 16rpx;">查看当前时段空闲时间</text>
-			<up-switch style="margin-right: 16rpx; margin-left: auto; " v-model="value" @change="change"
-				size="20"></up-switch>
+		<view class="row toggle-bar">
+			<text class="toggle-label">查看当前时段空闲时间</text>
+			<up-switch class="toggle-switch" v-model="value" @change="change" size="20"></up-switch>
 		</view>
 
-		<view class="" style="width: 100%; flex: 1; margin-top: 12rpx; overflow-y: auto;">
+		<view class="list-container">
 
 			<!-- 加载状态 -->
-			<view v-if="loading" class="center" style="padding: 60rpx 0;">
-				<text style="color: #999;">加载中...</text>
+			<view v-if="loading" class="center loading-placeholder">
+				<text class="muted-text">加载中...</text>
 			</view>
 
 			<!-- 空数据提示 -->
-			<view v-else-if="roomList.length === 0" class="center" style="padding: 60rpx 0;">
-				<text style="color: #999;">暂无房间数据</text>
+			<view v-else-if="roomList.length === 0" class="center loading-placeholder">
+				<text class="muted-text">暂无房间数据</text>
 			</view>
 
 			<!-- 房间列表 -->
-			<view class="" v-for="item in roomList" :key="item.id"
-				style="position: relative; width: 706rpx; height: 270rpx; border-radius: 20rpx; background-color: white; margin: 0 auto 20rpx;"
-				@click.stop="handleRoomClick(item)">
+			<view class="room-card" v-for="item in roomList" :key="item.id" @click.stop="handleRoomClick(item)">
 
 
-				<image :src="item.image_url || '/static/default_room.jpg'"
-					style="width: 180rpx; height: 156rpx; background-color: #DEDEDE; border-radius: 14rpx; position: absolute; top: 10rpx; left: 10rpx;"
-					mode="aspectFill"></image>
+				<image :src="item.image_url || '/static/default_room.jpg'" class="room-image" mode="aspectFill"></image>
 
-				<view class="column" style=" position: absolute; left: 200rpx; top: 20rpx;">
-					<text style="font-size: 28rpx;">{{ item.name }}</text>
-					<text style="font-size: 20rpx;">{{ item.room_type_name }}</text>
+				<view class="column room-info">
+					<text class="room-name">{{ item.name }}</text>
+					<text class="room-type">{{ item.room_type_name }}</text>
 
-					<text style="font-size: 24rpx; margin-top: 24rpx;">{{ item.standard_price_desc || '价格详询' }}</text>
-					<text style="font-size: 24rpx; color: #FF0000;">会员价{{ item.member_price_desc || '详询' }}</text>
+					<text class="room-price">{{ item.standard_price_desc || '价格详询' }}</text>
+					<text class="room-member-price">会员价{{ item.member_price_desc || '详询' }}</text>
 				</view>
 
-				<text v-if="item.status === 'using'"
-					style="font-size: 20rpx; position: absolute; top: 10rpx; right: 16rpx; color: #FF9901;">当前使用中</text>
+				<!-- <text v-if="item.status === 'using'" class="room-status-using">当前使用中</text> -->
 
 				<view class="center reservation-btn" :class="{ 'reservation-btn-disabled': !hasAvailableSlots(item) }"
 					@click.stop="hasAvailableSlots(item) && handleReservation(item)">
 					预约
 				</view>
 
-				<view class="row" style="align-items: center; position: absolute; left: 10rpx; bottom: 60rpx;">
-					<view style="width: 24rpx; height: 4rpx; background-color: #FF9901;"></view>
-					<text style="font-size: 16rpx; color: #323232; margin-left: 8rpx;">已预定时段</text>
-					<view style="width: 24rpx; height: 4rpx; background-color: #52c41a; margin-left: 22rpx;"></view>
-					<text style="font-size: 16rpx; color: #323232; margin-left: 8rpx;">可预定时段</text>
-					<view style="width: 24rpx; height: 4rpx; background-color: #E6E6E6; margin-left: 22rpx;"></view>
-					<text style="font-size: 16rpx; color: #323232; margin-left: 8rpx;">不可预定时段</text>
+				<view class="row legend-row">
+					<view class="legend-block legend-reserved"></view>
+					<text class="legend-text">已预定时段</text>
+					<view class="legend-block legend-available"></view>
+					<text class="legend-text">可预定时段</text>
+					<view class="legend-block legend-unavailable"></view>
+					<text class="legend-text">不可预定时段</text>
 				</view>
 
-				<view class="row" style="align-items: center; position: absolute; left: 10rpx; bottom: 14rpx;">
+				<view class="row slot-row">
 
-					<view class="column center" style="margin-right: 20rpx;" v-for="slot in item.time_slots"
-						:key="slot.slot_type">
-						<view :style="{ width: '70rpx', height: '4rpx', backgroundColor: getSlotColor(slot.status) }">
+					<view class="column center slot-item" v-for="slot in item.time_slots" :key="slot.slot_type">
+						<view class="slot-bar" :style="{ backgroundColor: getSlotColor(slot.status) }">
 						</view>
-						<text style="font-size: 12rpx; margin-top: 4rpx;">{{ slot.slot_name }}</text>
+						<text class="slot-label">{{ slot.slot_name }}</text>
 					</view>
 
 				</view>
@@ -90,16 +82,16 @@
 			<view class="room-detail-popup">
 				<!-- 关闭按钮 -->
 				<view class="popup-close" @click="closeRoomDetail">
-					<text style="font-size: 40rpx; color: #999;">×</text>
+					<text class="popup-close-text">×</text>
 				</view>
 
 				<!-- 加载状态 -->
 				<view v-if="roomDetailLoading" class="popup-loading center">
-					<text style="color: #999;">加载中...</text>
+					<text class="popup-loading-text">加载中...</text>
 				</view>
 
 				<!-- 房间详情内容 -->
-				<scroll-view v-else-if="roomDetail" scroll-y class="popup-content" :style="{ maxHeight: '80vh' }">
+				<scroll-view v-else-if="roomDetail" scroll-y class="popup-content">
 					<!-- 图片轮播 -->
 					<view class="detail-swiper-container">
 						<swiper v-if="roomDetailImages && roomDetailImages.length > 0" class="detail-swiper"
@@ -164,13 +156,8 @@
 							<view v-for="slot in roomDetail.time_slots" :key="slot.slot_type" class="time-slot-item">
 								<view class="time-slot-header">
 									<text class="time-slot-name">{{ slot.slot_name }}</text>
-									<view :style="{
-										width: '12rpx',
-										height: '12rpx',
-										borderRadius: '50%',
-										backgroundColor: getSlotColor(slot.status),
-										marginLeft: '12rpx'
-									}"></view>
+									<view class="time-slot-dot" :style="{ backgroundColor: getSlotColor(slot.status) }">
+									</view>
 								</view>
 								<view class="time-slot-content">
 									<text class="time-slot-status">{{ getSlotStatusText(slot.status) }}</text>
@@ -204,585 +191,785 @@
 </template>
 
 <script>
-import { getAvailableDates, getRoomListWithSlotsNew, getRoomDetail } from '@/common/server/interface/sq.js';
-import { getConfigData } from '@/common/server/config';
-export default {
-	data() {
-		return {
-			currentTimeIndex: 0,
-			dateList: [],
-			value: false,
-			roomList: [],
-			loading: false,
-			selectedDate: null, // 当前选中的日期时间戳
-			roomDetail: null, // 房间详情数据
-			roomDetailLoading: false, // 房间详情加载状态
-			configData: null,
-		}
-	},
-
-	onLoad() {
-		this.loadDates();
-		getConfigData().then(data => {
-			this.configData = data;
-		});
-	},
-
-	methods: {
-		change(e) {
-			console.log('change', e);
-			// 开关切换时重新加载房间列表
-			this.loadRoomList();
-		},
-		getBusinessAnnouncement() {
-			return this.configData.config.businessAnnouncement??"营业时间：早00点 至 晚23点";
-		},
-
-		/**
-		 * 加载可选日期列表
-		 */
-		async loadDates() {
-			try {
-				const res = await getAvailableDates();
-				if (res && res.length > 0) {
-					// 将接口返回的数据格式转换为页面使用的格式
-					this.dateList = res.map(item => ({
-						time: item.dateText,
-						weekday: item.dateDisplay,
-						timestamp: item.date // 保存时间戳用于查询
-					}));
-					// 默认选中第一个日期（今天）
-					this.selectedDate = this.dateList[0].timestamp;
-					this.currentTimeIndex = 0;
-					// 加载房间列表
-					this.loadRoomList();
-				}
-			} catch (error) {
-				console.error('加载日期列表失败', error);
-				uni.showToast({
-					title: '加载日期失败',
-					icon: 'none'
-				});
+	import {
+		getAvailableDates,
+		getRoomListWithSlotsNew,
+		getRoomDetail
+	} from '@/common/server/interface/sq.js';
+	import {
+		getConfigData
+	} from '@/common/server/config';
+	export default {
+		data() {
+			return {
+				currentTimeIndex: 0,
+				dateList: [],
+				value: false,
+				roomList: [],
+				loading: false,
+				selectedDate: null, // 当前选中的日期时间戳
+				roomDetail: null, // 房间详情数据
+				roomDetailLoading: false, // 房间详情加载状态
+				configData: null,
 			}
 		},
 
-		/**
-		 * 从 dateDisplay 中提取星期部分
-		 * @param {string} dateDisplay 例如："12月06日 周五"
-		 * @returns {string} 例如："周五"
-		 */
-		extractWeekday(dateDisplay) {
-			const parts = dateDisplay.split(' ');
-			return parts.length > 1 ? parts[1] : '';
-		},
 
-		/**
-		 * 加载房间列表
-		 */
-		async loadRoomList() {
-			if (!this.selectedDate) return;
-
-			this.loading = true;
-			try {
-				const showOnlyAvailable = this.value; // 开关状态
-				const currentTimeSlot = this.getCurrentTimeSlot();
-
-				const res = await getRoomListWithSlotsNew(
-					this.selectedDate,
-					showOnlyAvailable,
-					showOnlyAvailable ? currentTimeSlot : null
-				);
-
-				if (res) {
-					this.roomList = res;
-				} else {
-					this.roomList = [];
-				}
-			} catch (error) {
-				console.error('加载房间列表失败', error);
-				uni.showToast({
-					title: '加载房间失败',
-					icon: 'none'
-				});
-				this.roomList = [];
-			} finally {
-				this.loading = false;
-			}
-		},
-
-		/**
-		 * 获取当前时段类型
-		 * @returns {number} 0=凌晨, 1=上午, 2=下午, 3=晚上
-		 */
-		getCurrentTimeSlot() {
-			const hour = new Date().getHours();
-			if (hour >= 0 && hour < 6) return 0;   // 凌晨
-			if (hour >= 6 && hour < 12) return 1;  // 上午
-			if (hour >= 12 && hour < 18) return 2; // 下午
-			return 3;                              // 晚上
-		},
-
-		/**
-		 * 根据时段状态获取背景色
-		 * @param {string} status available/reserved/unavailable/using
-		 * @returns {string} 颜色值
-		 */
-		getSlotColor(status) {
-			const colorMap = {
-				'available': '#52c41a',    // 绿色
-				'reserved': '#FF9901',     // 橙色
-				'unavailable': '#E6E6E6',  // 灰色
-				'using': '#1890ff'         // 蓝色
-			};
-			return colorMap[status] || '#E6E6E6';
-		},
-
-		//设置背景
-		setBgColor(index) {
-			if (this.currentTimeIndex == index) {
-				return {
-					backgroundColor: "#20BBA4",
-					color: "#FFFFFF",
-				}
-			} else {
-				return {
-					backgroundColor: "#FFFFFF",
-					color: "#000000",
-				}
-			}
-		},
-
-		clickTime(index) {
-			this.currentTimeIndex = index;
-			this.selectedDate = this.dateList[index].timestamp;
-			// 切换日期时重新加载房间列表
-			this.loadRoomList();
-		},
-
-		/**
-		 * 点击预约按钮
-		 */
-		handleReservation(room) {
-			if (!room || !room.id) return;
-
-			// 跳转到预约页面，传递房间信息
-			const params = {
-				roomId: room.id,
-				roomName: room.name || '未知房间',
-				date: this.selectedDate, // 选中的日期时间戳
-			};
-
-			// 如果有容量信息，也传递
-			if (room.capacity) {
-				params.capacity = room.capacity;
-			}
-
-			const query = Object.keys(params)
-				.map(key => `${key}=${encodeURIComponent(params[key])}`)
-				.join('&');
-
-			uni.navigateTo({
-				url: `/pages/appointment/appointment-page?${query}`
+		onLoad() {
+			this.loadDates();
+			console.log("onLoad");
+			getConfigData().then(data => {
+				this.configData = data;
 			});
 		},
 
-		/**
-		 * 点击房间卡片，显示详情弹窗
-		 */
-		async handleRoomClick(room) {
-			if (!room || !room.id) return;
+		methods: {
+			change(e) {
+				console.log('change', e);
+				// 开关切换时重新加载房间列表
+				this.loadRoomList();
+			},
+			getBusinessAnnouncement() {
+				return this.configData.config.businessAnnouncement ?? "营业时间：早00点 至 晚23点";
+			},
 
-			this.roomDetailLoading = true;
-			this.roomDetail = null;
-
-			// 打开弹窗
-			this.$refs.roomDetailPopup.open();
-
-			try {
-				const detail = await getRoomDetail(room.id, this.selectedDate);
-				if (detail) {
-					this.roomDetail = detail;
-				} else {
+			/**
+			 * 加载可选日期列表
+			 */
+			async loadDates() {
+				try {
+					const res = await getAvailableDates();
+					if (res && res.length > 0) {
+						// 将接口返回的数据格式转换为页面使用的格式
+						this.dateList = res.map(item => ({
+							time: item.dateText,
+							weekday: item.dateDisplay,
+							timestamp: item.date // 保存时间戳用于查询
+						}));
+						// 默认选中第一个日期（今天）
+						this.selectedDate = this.dateList[0].timestamp;
+						this.currentTimeIndex = 0;
+						// 加载房间列表
+						this.loadRoomList();
+					}
+				} catch (error) {
+					console.error('加载日期列表失败', error);
 					uni.showToast({
-						title: '获取房间详情失败',
+						title: '加载日期失败',
+						icon: 'none'
+					});
+				}
+			},
+
+			/**
+			 * 从 dateDisplay 中提取星期部分
+			 * @param {string} dateDisplay 例如："12月06日 周五"
+			 * @returns {string} 例如："周五"
+			 */
+			extractWeekday(dateDisplay) {
+				const parts = dateDisplay.split(' ');
+				return parts.length > 1 ? parts[1] : '';
+			},
+
+			/**
+			 * 加载房间列表
+			 */
+			async loadRoomList() {
+				if (!this.selectedDate) return;
+
+				this.loading = true;
+				try {
+					const showOnlyAvailable = this.value; // 开关状态
+					const currentTimeSlot = this.getCurrentTimeSlot();
+
+					const res = await getRoomListWithSlotsNew(
+						this.selectedDate,
+						showOnlyAvailable,
+						showOnlyAvailable ? currentTimeSlot : null
+					);
+
+					if (res) {
+						this.roomList = res;
+					} else {
+						this.roomList = [];
+					}
+				} catch (error) {
+					console.error('加载房间列表失败', error);
+					uni.showToast({
+						title: '加载房间失败',
+						icon: 'none'
+					});
+					this.roomList = [];
+				} finally {
+					this.loading = false;
+				}
+			},
+
+			/**
+			 * 获取当前时段类型
+			 * @returns {number} 0=凌晨, 1=上午, 2=下午, 3=晚上
+			 */
+			getCurrentTimeSlot() {
+				const hour = new Date().getHours();
+				if (hour >= 0 && hour < 6) return 0; // 凌晨
+				if (hour >= 6 && hour < 12) return 1; // 上午
+				if (hour >= 12 && hour < 18) return 2; // 下午
+				return 3; // 晚上
+			},
+
+			/**
+			 * 根据时段状态获取背景色
+			 * @param {string} status available/reserved/unavailable/using
+			 * @returns {string} 颜色值
+			 */
+			getSlotColor(status) {
+				const colorMap = {
+					'available': '#52c41a', // 绿色
+					'reserved': '#FF9901', // 橙色
+					'unavailable': '#E6E6E6', // 灰色
+					'using': '#FF9901' // 蓝色
+				};
+				return colorMap[status] || '#E6E6E6';
+			},
+
+			//设置背景
+			setBgColor(index) {
+				if (this.currentTimeIndex == index) {
+					return {
+						backgroundColor: "#20BBA4",
+						color: "#FFFFFF",
+					}
+				} else {
+					return {
+						backgroundColor: "#FFFFFF",
+						color: "#000000",
+					}
+				}
+			},
+
+			clickTime(index) {
+				this.currentTimeIndex = index;
+				this.selectedDate = this.dateList[index].timestamp;
+				// 切换日期时重新加载房间列表
+				this.loadRoomList();
+			},
+
+			/**
+			 * 点击预约按钮
+			 */
+			handleReservation(room) {
+				if (!room || !room.id) return;
+
+				// 跳转到预约页面，传递房间信息
+				const params = {
+					roomId: room.id,
+					roomName: room.name || '未知房间',
+					date: this.selectedDate, // 选中的日期时间戳
+				};
+
+				// 如果有容量信息，也传递
+				if (room.capacity) {
+					params.capacity = room.capacity;
+				}
+
+				const query = Object.keys(params)
+					.map(key => `${key}=${encodeURIComponent(params[key])}`)
+					.join('&');
+
+				uni.navigateTo({
+					url: `/pages/appointment/appointment-page?${query}`
+				});
+			},
+
+			/**
+			 * 点击房间卡片，显示详情弹窗
+			 */
+			async handleRoomClick(room) {
+				if (!room || !room.id) return;
+
+				this.roomDetailLoading = true;
+				this.roomDetail = null;
+
+				// 打开弹窗
+				this.$refs.roomDetailPopup.open();
+
+				try {
+					const detail = await getRoomDetail(room.id, this.selectedDate);
+					if (detail) {
+						this.roomDetail = detail;
+					} else {
+						uni.showToast({
+							title: '获取房间详情失败',
+							icon: 'none'
+						});
+						this.closeRoomDetail();
+					}
+				} catch (error) {
+					console.error('加载房间详情失败', error);
+					uni.showToast({
+						title: '加载房间详情失败',
 						icon: 'none'
 					});
 					this.closeRoomDetail();
+				} finally {
+					this.roomDetailLoading = false;
 				}
-			} catch (error) {
-				console.error('加载房间详情失败', error);
-				uni.showToast({
-					title: '加载房间详情失败',
-					icon: 'none'
-				});
-				this.closeRoomDetail();
-			} finally {
-				this.roomDetailLoading = false;
+			},
+
+			/**
+			 * 关闭房间详情弹窗
+			 */
+			closeRoomDetail() {
+				this.$refs.roomDetailPopup.close();
+				this.roomDetail = null;
+			},
+
+			/**
+			 * 从详情弹窗中点击预约
+			 */
+			handleReservationFromDetail() {
+				if (this.roomDetail) {
+					this.closeRoomDetail();
+					// 延迟一下，等弹窗关闭动画完成
+					setTimeout(() => {
+						// 从详情中获取房间信息并跳转
+						const params = {
+							roomId: this.roomDetail.id,
+							roomName: this.roomDetail.name || '未知房间',
+							date: this.selectedDate,
+						};
+
+						if (this.roomDetail.capacity) {
+							params.capacity = this.roomDetail.capacity;
+						}
+
+						const query = Object.keys(params)
+							.map(key => `${key}=${encodeURIComponent(params[key])}`)
+							.join('&');
+
+						uni.navigateTo({
+							url: `/pages/appointment/appointment-page?${query}`
+						});
+					}, 300);
+				}
+			},
+
+			/**
+			 * 获取时段状态文本
+			 */
+			getSlotStatusText(status) {
+				const statusMap = {
+					'available': '可预约',
+					'reserved': '已预约',
+					'unavailable': '不可预约',
+					'using': '使用中'
+				};
+				return statusMap[status] || '未知';
+			},
+
+			/**
+			 * 判断房间是否还有可预约的时段
+			 * @param {Object} room 房间对象
+			 * @returns {boolean} true表示还有可预约时段，false表示已全部约满
+			 */
+			hasAvailableSlots(room) {
+				if (!room || !room.time_slots || !Array.isArray(room.time_slots)) {
+					return false;
+				}
+				// 检查是否有状态为 'available' 的时段
+				return room.time_slots.some(slot => slot.status === 'available');
 			}
 		},
 
-		/**
-		 * 关闭房间详情弹窗
-		 */
-		closeRoomDetail() {
-			this.$refs.roomDetailPopup.close();
-			this.roomDetail = null;
-		},
-
-		/**
-		 * 从详情弹窗中点击预约
-		 */
-		handleReservationFromDetail() {
-			if (this.roomDetail) {
-				this.closeRoomDetail();
-				// 延迟一下，等弹窗关闭动画完成
-				setTimeout(() => {
-					// 从详情中获取房间信息并跳转
-					const params = {
-						roomId: this.roomDetail.id,
-						roomName: this.roomDetail.name || '未知房间',
-						date: this.selectedDate,
-					};
-
-					if (this.roomDetail.capacity) {
-						params.capacity = this.roomDetail.capacity;
-					}
-
-					const query = Object.keys(params)
-						.map(key => `${key}=${encodeURIComponent(params[key])}`)
-						.join('&');
-
-					uni.navigateTo({
-						url: `/pages/appointment/appointment-page?${query}`
-					});
-				}, 300);
+		computed: {
+			/**
+			 * 计算属性：房间图片列表
+			 */
+			roomDetailImages() {
+				if (!this.roomDetail) return [];
+				if (this.roomDetail.images && this.roomDetail.images.length > 0) {
+					return this.roomDetail.images;
+				}
+				if (this.roomDetail.image_url) {
+					return [this.roomDetail.image_url];
+				}
+				return [];
 			}
-		},
-
-		/**
-		 * 获取时段状态文本
-		 */
-		getSlotStatusText(status) {
-			const statusMap = {
-				'available': '可预约',
-				'reserved': '已预约',
-				'unavailable': '不可预约',
-				'using': '使用中'
-			};
-			return statusMap[status] || '未知';
-		},
-
-		/**
-		 * 判断房间是否还有可预约的时段
-		 * @param {Object} room 房间对象
-		 * @returns {boolean} true表示还有可预约时段，false表示已全部约满
-		 */
-		hasAvailableSlots(room) {
-			if (!room || !room.time_slots || !Array.isArray(room.time_slots)) {
-				return false;
-			}
-			// 检查是否有状态为 'available' 的时段
-			return room.time_slots.some(slot => slot.status === 'available');
-		}
-	},
-
-	computed: {
-		/**
-		 * 计算属性：房间图片列表
-		 */
-		roomDetailImages() {
-			if (!this.roomDetail) return [];
-			if (this.roomDetail.images && this.roomDetail.images.length > 0) {
-				return this.roomDetail.images;
-			}
-			if (this.roomDetail.image_url) {
-				return [this.roomDetail.image_url];
-			}
-			return [];
 		}
 	}
-}
 </script>
 
 <style lang="scss">
-.content {
-	width: 100%;
-	height: 100vh;
-	background-color: #F7F7F7;
-}
+	.content {
+		width: 100%;
+		height: 100vh;
+		background-color: #F7F7F7;
+	}
 
-/* 页面标题 */
-.page-title {
-	margin-top: 100rpx;
-	text-align: center;
-	margin-bottom: 20rpx;
-}
+	.loading-placeholder {
+		padding: 60rpx 0;
+	}
 
-/* 房间详情弹窗样式 */
-.room-detail-popup {
-	width: 680rpx;
-	max-height: 80vh;
-	background-color: #FFFFFF;
-	border-radius: 20rpx;
-	position: relative;
-	overflow: hidden;
-}
+	.muted-text {
+		color: #999999;
+	}
 
-.popup-close {
-	position: absolute;
-	top: 10rpx;
-	right: 10rpx;
-	width: 60rpx;
-	height: 60rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 10;
-	background-color: rgba(0, 0, 0, 0.3);
-	border-radius: 50%;
-}
+	.header-container {
+		width: 100%;
+		height: 308rpx;
+		background-color: #FFFFFF;
+	}
 
-.popup-loading {
-	padding: 100rpx 0;
-	min-height: 400rpx;
-}
+	.flex-1 {
+		flex: 1;
+	}
 
-.popup-content {
-	width: 100%;
-}
+	.date-row {
+		width: 90%;
+		height: 120rpx;
+		margin: 20rpx auto 0;
+	}
 
-/* 图片轮播容器 */
-.detail-swiper-container {
-	width: 100%;
-	height: 400rpx;
-	background-color: #DEDEDE;
-}
+	.date-item {
+		width: 96rpx;
+		height: 100%;
+		border-radius: 8rpx;
+	}
 
-.detail-swiper {
-	width: 100%;
-	height: 100%;
-}
+	.date-item-time {
+		font-size: 26rpx;
+	}
 
-.detail-swiper-image {
-	width: 100%;
-	height: 100%;
-}
+	.date-item-weekday {
+		font-size: 22rpx;
+	}
 
-/* 详情区域 */
-.detail-section {
-	padding: 30rpx;
-	border-bottom: 1rpx solid #F0F0F0;
-}
+	.announcement-text {
+		margin-top: 20rpx;
+		margin-left: 32rpx;
+		font-size: 24rpx;
+	}
 
-.detail-section:last-child {
-	border-bottom: none;
-}
+	.toggle-bar {
+		width: 686rpx;
+		height: 56rpx;
+		background-color: #2ED9BF;
+		border-radius: 5rpx;
+		margin: 20rpx auto 0;
+		align-items: center;
+	}
 
-.detail-title-row {
-	display: flex;
-	align-items: center;
-	margin-bottom: 10rpx;
-}
+	.toggle-label {
+		font-size: 22rpx;
+		color: #262626;
+		margin-left: 16rpx;
+	}
 
-.detail-room-name {
-	font-size: 36rpx;
-	font-weight: bold;
-	color: #262626;
-	flex: 1;
-}
+	.toggle-switch {
+		margin-right: 16rpx;
+		margin-left: auto;
+	}
 
-.detail-status-tag {
-	padding: 4rpx 16rpx;
-	border-radius: 8rpx;
-	font-size: 20rpx;
-}
+	.list-container {
+		width: 100%;
+		flex: 1;
+		margin-top: 12rpx;
+		overflow-y: auto;
+	}
 
-.detail-status-tag.using {
-	background-color: #FF9901;
-	color: #FFFFFF;
-}
+	/* 页面标题 */
+	.page-title {
+		margin-top: 100rpx;
+		text-align: center;
+		margin-bottom: 20rpx;
+	}
 
-.detail-status-tag.available {
-	background-color: #52c41a;
-	color: #FFFFFF;
-}
+	.room-card {
+		position: relative;
+		width: 706rpx;
+		height: 270rpx;
+		border-radius: 20rpx;
+		background-color: #FFFFFF;
+		margin: 0 auto 20rpx;
+	}
 
-.detail-room-type {
-	font-size: 24rpx;
-	color: #999999;
-	margin-bottom: 20rpx;
-}
+	.room-image {
+		width: 180rpx;
+		height: 156rpx;
+		background-color: #DEDEDE;
+		border-radius: 14rpx;
+		position: absolute;
+		top: 10rpx;
+		left: 10rpx;
+	}
 
-.detail-price-row {
-	display: flex;
-	align-items: center;
-	margin-bottom: 10rpx;
-}
+	.room-info {
+		position: absolute;
+		left: 200rpx;
+		top: 20rpx;
+	}
 
-.detail-price-label {
-	font-size: 24rpx;
-	color: #666666;
-}
+	.room-name {
+		font-size: 28rpx;
+	}
 
-.detail-price-value {
-	font-size: 28rpx;
-	color: #262626;
-	font-weight: 500;
-}
+	.room-type {
+		font-size: 20rpx;
+	}
 
-.detail-price-member {
-	font-size: 28rpx;
-	color: #FF0000;
-	font-weight: 500;
-}
+	.room-price {
+		font-size: 24rpx;
+		margin-top: 24rpx;
+	}
 
-.detail-info-row {
-	display: flex;
-	align-items: center;
-	margin-top: 20rpx;
-}
+	.room-member-price {
+		font-size: 24rpx;
+		color: #FF0000;
+	}
 
-.detail-info-label {
-	font-size: 24rpx;
-	color: #666666;
-}
+	.room-status-using {
+		font-size: 20rpx;
+		position: absolute;
+		top: 10rpx;
+		right: 16rpx;
+		color: #FF9901;
+	}
 
-.detail-info-value {
-	font-size: 24rpx;
-	color: #262626;
-}
+	.legend-row {
+		align-items: center;
+		position: absolute;
+		left: 10rpx;
+		bottom: 60rpx;
+	}
 
-.detail-section-title {
-	font-size: 28rpx;
-	font-weight: bold;
-	color: #262626;
-	margin-bottom: 20rpx;
-	display: block;
-}
+	.legend-block {
+		width: 24rpx;
+		height: 4rpx;
+	}
 
-.detail-description {
-	font-size: 26rpx;
-	color: #666666;
-	line-height: 1.6;
-}
+	.legend-reserved {
+		background-color: #FF9901;
+	}
 
-/* 设施标签 */
-.amenities-container {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 16rpx;
-}
+	.legend-available {
+		background-color: #52c41a;
+		margin-left: 22rpx;
+	}
 
-.amenity-tag {
-	padding: 8rpx 20rpx;
-	background-color: #F5F5F5;
-	border-radius: 8rpx;
-	font-size: 24rpx;
-	color: #666666;
-}
+	.legend-unavailable {
+		background-color: #E6E6E6;
+		margin-left: 22rpx;
+	}
 
-/* 时段状态 */
-.time-slots-container {
-	display: flex;
-	flex-direction: column;
-	gap: 20rpx;
-}
+	.legend-text {
+		font-size: 24rpx;
+		color: #323232;
+		margin-left: 8rpx;
+	}
 
-.time-slot-item {
-	background-color: #F8F8F8;
-	border-radius: 12rpx;
-	padding: 20rpx;
-}
+	.slot-row {
+		align-items: center;
+		position: absolute;
+		left: 10rpx;
+		bottom: 14rpx;
+	}
 
-.time-slot-header {
-	display: flex;
-	align-items: center;
-	margin-bottom: 12rpx;
-}
+	.slot-item {
+		margin-right: 20rpx;
+	}
 
-.time-slot-name {
-	font-size: 26rpx;
-	font-weight: 500;
-	color: #262626;
-}
+	.slot-bar {
+		width: 70rpx;
+		height: 4rpx;
+	}
 
-.time-slot-content {
-	display: flex;
-	flex-direction: column;
-	gap: 8rpx;
-}
+	.slot-label {
+		font-size: 18rpx;
+		margin-top: 4rpx;
+	}
 
-.time-slot-status {
-	font-size: 24rpx;
-	color: #666666;
-}
+	/* 房间详情弹窗样式 */
+	.room-detail-popup {
+		width: 680rpx;
+		max-height: 80vh;
+		background-color: #FFFFFF;
+		border-radius: 20rpx;
+		position: relative;
+		overflow: hidden;
+	}
 
-.time-slot-price {
-	display: flex;
-	align-items: center;
-	gap: 20rpx;
-}
+	.popup-close {
+		position: absolute;
+		top: 10rpx;
+		right: 10rpx;
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+		background-color: rgba(0, 0, 0, 0.3);
+		border-radius: 50%;
+	}
 
-.time-slot-price-text {
-	font-size: 22rpx;
-	color: #666666;
-}
+	.popup-close-text {
+		font-size: 40rpx;
+		color: #999999;
+	}
 
-.time-slot-price-text.member {
-	color: #FF0000;
-}
+	.popup-loading {
+		padding: 100rpx 0;
+		min-height: 400rpx;
+	}
 
-/* 底部操作按钮 */
-.popup-footer {
-	display: flex;
-	align-items: center;
-	padding: 20rpx 30rpx;
-	border-top: 1rpx solid #F0F0F0;
-	gap: 20rpx;
-}
+	.popup-loading-text {
+		color: #999999;
+	}
 
-.popup-btn {
-	flex: 1;
-	height: 80rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 12rpx;
-	font-size: 28rpx;
-	font-weight: 500;
-}
+	.popup-content {
+		width: 100%;
+		max-height: 80vh;
+	}
 
-.popup-btn.secondary {
-	background-color: #F5F5F5;
-	color: #666666;
-}
+	/* 图片轮播容器 */
+	.detail-swiper-container {
+		width: 100%;
+		height: 400rpx;
+		background-color: #DEDEDE;
+	}
 
-.popup-btn.primary {
-	background-color: #20BBA4;
-	color: #FFFFFF;
-}
+	.detail-swiper {
+		width: 100%;
+		height: 100%;
+	}
 
-.popup-btn.disabled {
-	background-color: #CCCCCC;
-	color: #FFFFFF;
-	opacity: 0.6;
-}
+	.detail-swiper-image {
+		width: 100%;
+		height: 100%;
+	}
 
-/* 房间列表预约按钮样式 */
-.reservation-btn {
-	width: 92rpx;
-	height: 46rpx;
-	background-color: #20BBA4;
-	border-radius: 52rpx;
-	font-size: 26rpx;
-	color: white;
-	position: absolute;
-	bottom: 94rpx;
-	right: 10rpx;
-}
+	/* 详情区域 */
+	.detail-section {
+		padding: 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
 
-.reservation-btn-disabled {
-	background-color: #CCCCCC;
-	opacity: 0.8;
-}
+	.detail-section:last-child {
+		border-bottom: none;
+	}
+
+	.detail-title-row {
+		display: flex;
+		align-items: center;
+		margin-bottom: 10rpx;
+	}
+
+	.detail-room-name {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #262626;
+		flex: 1;
+	}
+
+	.detail-status-tag {
+		padding: 4rpx 16rpx;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+	}
+
+	.detail-status-tag.using {
+		background-color: #FF9901;
+		color: #FFFFFF;
+	}
+
+	.detail-status-tag.available {
+		background-color: #52c41a;
+		color: #FFFFFF;
+	}
+
+	.detail-room-type {
+		font-size: 24rpx;
+		color: #999999;
+		margin-bottom: 20rpx;
+	}
+
+	.detail-price-row {
+		display: flex;
+		align-items: center;
+		margin-bottom: 10rpx;
+	}
+
+	.detail-price-label {
+		font-size: 24rpx;
+		color: #666666;
+	}
+
+	.detail-price-value {
+		font-size: 28rpx;
+		color: #262626;
+		font-weight: 500;
+	}
+
+	.detail-price-member {
+		font-size: 28rpx;
+		color: #FF0000;
+		font-weight: 500;
+	}
+
+	.detail-info-row {
+		display: flex;
+		align-items: center;
+		margin-top: 20rpx;
+	}
+
+	.detail-info-label {
+		font-size: 24rpx;
+		color: #666666;
+	}
+
+	.detail-info-value {
+		font-size: 24rpx;
+		color: #262626;
+	}
+
+	.detail-section-title {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #262626;
+		margin-bottom: 20rpx;
+		display: block;
+	}
+
+	.detail-description {
+		font-size: 26rpx;
+		color: #666666;
+		line-height: 1.6;
+	}
+
+	/* 设施标签 */
+	.amenities-container {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 16rpx;
+	}
+
+	.amenity-tag {
+		padding: 8rpx 20rpx;
+		background-color: #F5F5F5;
+		border-radius: 8rpx;
+		font-size: 24rpx;
+		color: #666666;
+	}
+
+	/* 时段状态 */
+	.time-slots-container {
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+	}
+
+	.time-slot-item {
+		background-color: #F8F8F8;
+		border-radius: 12rpx;
+		padding: 20rpx;
+	}
+
+	.time-slot-header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 12rpx;
+	}
+
+	.time-slot-dot {
+		width: 12rpx;
+		height: 12rpx;
+		border-radius: 50%;
+		margin-left: 12rpx;
+	}
+
+	.time-slot-name {
+		font-size: 26rpx;
+		font-weight: 500;
+		color: #262626;
+	}
+
+	.time-slot-content {
+		display: flex;
+		flex-direction: column;
+		gap: 8rpx;
+	}
+
+	.time-slot-status {
+		font-size: 24rpx;
+		color: #666666;
+	}
+
+	.time-slot-price {
+		display: flex;
+		align-items: center;
+		gap: 20rpx;
+	}
+
+	.time-slot-price-text {
+		font-size: 22rpx;
+		color: #666666;
+	}
+
+	.time-slot-price-text.member {
+		color: #FF0000;
+	}
+
+	/* 底部操作按钮 */
+	.popup-footer {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		border-top: 1rpx solid #F0F0F0;
+		gap: 20rpx;
+	}
+
+	.popup-btn {
+		flex: 1;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 12rpx;
+		font-size: 28rpx;
+		font-weight: 500;
+	}
+
+	.popup-btn.secondary {
+		background-color: #F5F5F5;
+		color: #666666;
+	}
+
+	.popup-btn.primary {
+		background-color: #20BBA4;
+		color: #FFFFFF;
+	}
+
+	.popup-btn.disabled {
+		background-color: #CCCCCC;
+		color: #FFFFFF;
+		opacity: 0.6;
+	}
+
+	/* 房间列表预约按钮样式 */
+	.reservation-btn {
+		width: 92rpx;
+		height: 46rpx;
+		background-color: #20BBA4;
+		border-radius: 52rpx;
+		font-size: 26rpx;
+		color: white;
+		position: absolute;
+		bottom: 94rpx;
+		right: 10rpx;
+	}
+
+	.reservation-btn-disabled {
+		background-color: #CCCCCC;
+		opacity: 0.8;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 8659476..a4bb52e 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -55,7 +55,7 @@
 
 
 
-		<uni-popup ref="userInfo_popup" type="center">
+	<!-- 	<uni-popup ref="userInfo_popup" type="center">
 
 			<view class="column" style="width: 500rpx; background-color: white; padding: 20rpx;">
 
@@ -97,7 +97,7 @@
 
 			</view>
 
-		</uni-popup>
+		</uni-popup> -->
 
 
 	</view>
diff --git a/pages/index/loading.vue b/pages/index/loading.vue
index 0f73316..f1e5785 100644
--- a/pages/index/loading.vue
+++ b/pages/index/loading.vue
@@ -1,6 +1,6 @@
 <template>
 	<view class="loading-container">
-		<image class="logo" src="/static/Logo.jpg" mode="widthFix"></image>
+		<image class="logo" src="/static/logo.png" mode="widthFix"></image>
 		<view class="spinner"></view>
 		<text class="tip">{{ tips_text }}</text>
 	</view>
diff --git a/pages/me/me-page.vue b/pages/me/me-page.vue
index d8a1bd7..73976a1 100644
--- a/pages/me/me-page.vue
+++ b/pages/me/me-page.vue
@@ -100,10 +100,10 @@
 				<text style="font-size: 30rpx; margin-top: 26rpx; margin-left: 36rpx;">常用功能</text>
 
 				<view class="row" style="flex-wrap: wrap; justify-content: flex-start; margin: 40rpx;">
-					<view class="column" v-for="item in commonActions" :key="item.label"
-						@click="handleCommonAction(item)"
-						style="width: 25%; align-items: center; margin-bottom: 30rpx;">
+					<view class="column common-action-item" v-for="item in commonActions" :key="item.label"
+						@click="handleCommonAction(item)">
 						<image :src="item.icon" style="width: 50rpx; height: 50rpx;" mode=""></image>
+						<view v-if="item.action === 'message' && unreadCount > 0" class="red-dot"></view>
 						<text style="font-size: 24rpx; margin-top: 20rpx;">{{ item.label }}</text>
 					</view>
 				</view>
@@ -124,6 +124,7 @@ import {
 } from '@/common/server/user'
 import { navigateToAgreement } from '@/common/system/router'
 import { sqInterface } from '@/common/server/interface/sq'
+import { getUnreadCount } from '@/common/server/interface/message'
 import ReservationEvaluate from '@/components/com/page/reservation-evaluate.vue'
 import ContainerBase from '@/components/com/page/container-base.vue'
 import {
@@ -139,6 +140,7 @@ import ReservationItem from '@/components/com/page/reservation-item.vue'
 const rateValue = ref(4.5)
 const loading = ref(false)
 const _containerBase = ref(null)
+const unreadCount = ref(0)
 
 
 // 当前预约信息
@@ -146,16 +148,15 @@ const currentAppointment = ref(null)
 
 
 
-
 // 常用功能 - 动态项
 const commonActions = [
-	{ label: '预约记录', icon: '@@:app/static/me/wodd.png', action: 'appointment' },
+	{ label: '预约记录', icon: '@@:app/static/me/wdyy.png', action: 'appointment' },
 	{ label: '订单记录', icon: '@@:app/static/me/wodd.png', action: 'payment' },
 	{ label: '常见问题', icon: '@@:app/static/me/cjwt.png', action: 'faq' },
 	{ label: '黑名单', icon: '@@:app/static/me/hmd.png', action: 'blacklist' },
 	{ label: '联系我们', icon: '@@:app/static/me/lxwm.png', action: 'contact' },
-	{ label: '我的消息', icon: '@@:app/static/me/lxwm.png', action: 'message' },
-	{ label: '我的收益', icon: '@@:app/static/me/lxwm.png', action: 'revenue' },
+	{ label: '我的消息', icon: '@@:app/static/me/wdxx.png', action: 'message' },
+	{ label: '我的收益', icon: '@@:app/static/me/wdsy.png', action: 'revenue' },
 ]
 
 const handleCommonAction = (item) => {
@@ -294,6 +295,28 @@ const loadCurrentAppointment = async () => {
 	}
 }
 
+// 加载未读消息数量并更新红点状态
+const loadUnreadCount = async () => {
+	const _isLogin = await isLogin();
+	if (!_isLogin) {
+		unreadCount.value = 0;
+		uni.hideTabBarRedDot({ index: 2 });
+		return;
+	}
+	try {
+		const count = await getUnreadCount();
+		unreadCount.value = count;
+		if (count > 0) {
+			uni.showTabBarRedDot({ index: 2 });
+		} else {
+			uni.hideTabBarRedDot({ index: 2 });
+		}
+	} catch (error) {
+		console.error('加载未读消息失败:', error);
+		uni.hideTabBarRedDot({ index: 2 });
+	}
+}
+
 onShareAppMessage(({ from, target, webViewUrl }) => {
 	// console.log('onShareAppMessage', from, target, webViewUrl);
 	var resid = 0;
@@ -311,6 +334,7 @@ onShow(async () => {
 	// getUserInfoData();
 	loadCurrentAppointment();
 	await loadUserInfo();
+	await loadUnreadCount();
 })
 onLoad(async () => {
 
@@ -336,4 +360,21 @@ onLoad(async () => {
 	border-radius: 10rpx;
 	z-index: 9999;
 }
+
+.common-action-item {
+	position: relative;
+	width: 25%;
+	align-items: center;
+	margin-bottom: 30rpx;
+}
+
+.red-dot {
+	position: absolute;
+	top: 0;
+	right: 35rpx;
+	width: 14rpx;
+	height: 14rpx;
+	border-radius: 50%;
+	background-color: #ff3b30;
+}
 </style>
\ No newline at end of file
diff --git a/pages/me/my-earnings-page.vue b/pages/me/my-earnings-page.vue
index 6c1d332..575343b 100644
--- a/pages/me/my-earnings-page.vue
+++ b/pages/me/my-earnings-page.vue
@@ -114,7 +114,7 @@
 				</view>
 
 				<view class="center"
-					style="width: 304rpx; height: 90rpx; background-color: #00AC4E; color: #FFFFFF; margin: 30rpx auto 0; font-size: 32rpx;"
+					style="width: 304rpx; height: 90rpx; background-color: #00AC4E; color: #FFFFFF; margin: 30rpx auto 30rpx; border-radius: 20rpx; font-size: 32rpx;"
 					@click="submitWithdraw">
 					申请提现
 				</view>
diff --git a/static/Logo.jpg b/static/Logo.jpg
deleted file mode 100644
index f630c2d..0000000
Binary files a/static/Logo.jpg and /dev/null differ