diff --git a/components/index/MahjongCard.vue b/components/index/MahjongCard.vue
index 21f0593..610a7cb 100644
--- a/components/index/MahjongCard.vue
+++ b/components/index/MahjongCard.vue
@@ -1,309 +1,333 @@
 <template>
-	<view class="grid-item" @click="handleCardClick">
-		<uni-card margin="0px" padding="0px" spacing="0px">
-			<view
-				style="position:absolute;top:0;right:0;width:100%;  background: linear-gradient(to bottom, rgba(255, 108, 0, 0.9), rgba(255, 108, 0, 0.7));box-shadow: 0 2px 8px rgba(235,135,58, 0.3);z-index:999;border-radius:4px 4px 0 0;font-size:24rpx;color:#fff;font-weight: 500;    opacity: 0.7;">
-				<text style="padding-left:10rpx;">{{ item.status }}</text>
-			</view>
-			<view class="item-content column">
-				<!-- 麻将桌区域 -->
-				<view class="mahjong-table">
-					<!-- 九宫格布局 -->
-					<view style="width:300rpx;height: 300rpx;">
-						<view class="nine-grid-container">
-							<!-- 第一行 -->
-							<view class="grid-cell"></view>
-							<view class="grid-cell" :class="getCellClass(0)">
-								<view v-if="getPlayerAtPosition(0)" class="player-avatar">
-									<image :src="getPlayerAtPosition(0).avatar || ''" class="avatar-img"></image>
-								</view>
-								<view v-else-if="canJoinAtPosition(0)" class="join-button" @click.stop="handleJoin">
-									<text class="join-text">+</text>
-								</view>
-							</view>
-							<view class="grid-cell"></view>
-
-							<!-- 第二行 -->
-							<view class="grid-cell" :class="getCellClass(1)">
-								<view v-if="getPlayerAtPosition(1)" class="player-avatar">
-									<image :src="getPlayerAtPosition(1).avatar || ''" class="avatar-img"></image>
-								</view>
-								<view v-else-if="canJoinAtPosition(1)" class="join-button" @click.stop="handleJoin">
-									<text class="join-text">+</text>
-								</view>
-							</view>
-							<view class="grid-cell center-cell">
-								<!-- 麻将桌背景图 -->
-								<image src="/static/9.png" class="table-bg" mode=""></image>
-							</view>
-							<view class="grid-cell" :class="getCellClass(2)">
-								<view v-if="getPlayerAtPosition(2)" class="player-avatar">
-									<image :src="getPlayerAtPosition(2).avatar || ''" class="avatar-img"></image>
-								</view>
-								<view v-else-if="canJoinAtPosition(2)" class="join-button" @click.stop="handleJoin">
-									<text class="join-text">+</text>
-								</view>
-							</view>
-
-							<!-- 第三行 -->
-							<view class="grid-cell"></view>
-							<view class="grid-cell" :class="getCellClass(3)">
-								<view v-if="getPlayerAtPosition(3)" class="player-avatar">
-									<image :src="getPlayerAtPosition(3).avatar || ''" class="avatar-img"></image>
-								</view>
-								<view v-else-if="canJoinAtPosition(3)" class="join-button" @click.stop="handleJoin">
-									<text class="join-text">+</text>
-								</view>
-							</view>
-							<view class="grid-cell"></view>
+	<view class="grid" @click="handleCardClick">
+		<view class="grid-item">
+			<view style="height: 251rpx;">
+				<view class="nine-grid-container">
+					<view></view>
+					<view class="item">
+						<view class="item-avatar">
+							<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
+							</image>
 						</view>
 					</view>
-				</view>
-
-				<!-- 信息区域 -->
-				<view class="info-section">
-					<text class="info-text" style="font-size: 26rpx;font-weight: 600;color: #FA690B;">{{
-						item.description }}</text>
-					<text class="info-text" style="margin-top: -7rpx;">{{ item.room }}</text>
-					<text class="info-text" style="font-size: 22rpx;font-weight: 600;line-height:28rpx;">2025-09-06</text>
-					<text class="info-text" style="font-size: 22rpx;font-weight: 600;line-height:28rpx;">{{ item.time }}</text>
-					<text class="info-text" style="color:#FA690B;line-height:30rpx;margin-top:6rpx;">{{ item.requirements }}</text>
+					<view></view>
+					<view class="item">
+						<view class="item-avatar">
+							<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
+							</image>
+						</view>
+					</view>
+					<view></view>
+					<view class="item">
+						<view class="item-avatar">
+							<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
+							</image>
+						</view>
+					</view>
+					<view></view>
+					<view class="item">
+						<view class="item-avatar">
+							<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
+							</image>
+						</view>
+					</view>
+					<view></view>
 				</view>
 			</view>
-		</uni-card>
+			<view style="width: 100%;display: flex;align-items: center;justify-content: center;">
+				<view style="width: 90%;">
+					<view
+						style="color: #000000;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 28rpx;text-align: left;font-style: normal;text-transform: none;">
+						{{item.description}}
+					</view>
+					<view
+						style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 18rpx;color: #575757;text-align: left;font-style: normal;text-transform: none;">
+						{{item.time}}
+					</view>
+					<view
+						style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 18rpx;color: #575757;text-align: left;font-style: normal;text-transform: none;">
+						{{item.room}}
+					</view>
+					<view
+						style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 18rpx;color: #575757;text-align: left;font-style: normal;text-transform: none;">
+						{{item.requirements}}
+					</view>
+				</view>
+			</view>
+
+		</view>
 	</view>
 </template>
 
 <script setup>
-import { defineProps, defineEmits, computed } from 'vue'
+	import {
+		defineProps,
+		defineEmits,
+		computed
+	} from 'vue'
 
-// 定义 props
-const props = defineProps({
-	item: {
-		type: Object,
-		required: true,
-		default: () => ({
-			id: '',
-			status: '',
-			description: '',
-			time: '',
-			room: '',
-			requirements: '',
-			personCount: 4,//总人数
-			joinPerson: [
-				{
+	// 定义 props
+	const props = defineProps({
+		item: {
+			type: Object,
+			required: true,
+			default: () => ({
+				id: '',
+				status: '',
+				description: '',
+				time: '',
+				room: '',
+				requirements: '',
+				personCount: 4, //总人数
+				joinPerson: [{
 					id: 1,
 					name: '张三',
 					avatar: '',
 					phone: '',
-				}
-			],//已加入人
-		})
-	}
-})
-
-// 定义 emits
-const emit = defineEmits(['click', 'join'])
-
-// 计算属性：获取玩家位置布局
-const playerPositions = computed(() => {
-	const { personCount, joinPerson } = props.item
-	const joinedCount = joinPerson.length
-
-	// 根据总人数确定布局
-	if (personCount === 2) {
-		// 2人局：第二行左边和右边
-		return {
-			positions: [null, joinPerson[0] || null, joinPerson[1] || null, null],
-			joinPositions: [null, !joinPerson[0], !joinPerson[1], null]
+				}], //已加入人
+			})
 		}
-	} else if (personCount === 3) {
-		// 3人局：第一行中间、第二行左边和右边
-		return {
-			positions: [joinPerson[2] || null, joinPerson[0] || null, joinPerson[1] || null, null],
-			joinPositions: [!joinPerson[2], !joinPerson[0], !joinPerson[1], null]
+	})
+
+	// 定义 emits
+	const emit = defineEmits(['click', 'join'])
+
+	// 计算属性：获取玩家位置布局
+	const playerPositions = computed(() => {
+		const {
+			personCount,
+			joinPerson
+		} = props.item
+		const joinedCount = joinPerson.length
+
+		// 根据总人数确定布局
+		if (personCount === 2) {
+			// 2人局：第二行左边和右边
+			return {
+				positions: [null, joinPerson[0] || null, joinPerson[1] || null, null],
+				joinPositions: [null, !joinPerson[0], !joinPerson[1], null]
+			}
+		} else if (personCount === 3) {
+			// 3人局：第一行中间、第二行左边和右边
+			return {
+				positions: [joinPerson[2] || null, joinPerson[0] || null, joinPerson[1] || null, null],
+				joinPositions: [!joinPerson[2], !joinPerson[0], !joinPerson[1], null]
+			}
+		} else {
+			// 4人局：标准布局（上、左、右、下）
+			return {
+				positions: [
+					joinPerson[2] || null, // 第一行中间
+					joinPerson[0] || null, // 第二行左边
+					joinPerson[1] || null, // 第二行右边
+					joinPerson[3] || null // 第三行中间
+				],
+				joinPositions: [
+					!joinPerson[2], // 第一行中间
+					!joinPerson[0], // 第二行左边
+					!joinPerson[1], // 第二行右边
+					!joinPerson[3] // 第三行中间
+				]
+			}
 		}
-	} else {
-		// 4人局：标准布局（上、左、右、下）
-		return {
-			positions: [
-				joinPerson[2] || null, // 第一行中间
-				joinPerson[0] || null, // 第二行左边
-				joinPerson[1] || null, // 第二行右边
-				joinPerson[3] || null  // 第三行中间
-			],
-			joinPositions: [
-				!joinPerson[2], // 第一行中间
-				!joinPerson[0], // 第二行左边
-				!joinPerson[1], // 第二行右边
-				!joinPerson[3]  // 第三行中间
-			]
+	})
+
+	// 获取指定位置的玩家
+	const getPlayerAtPosition = (position) => {
+		return playerPositions.value.positions[position]
+	}
+
+	// 判断指定位置是否可以加入
+	const canJoinAtPosition = (position) => {
+		const {
+			personCount,
+			joinPerson
+		} = props.item
+		const joinedCount = joinPerson.length
+
+		// 如果已满员，不能加入
+		if (joinedCount >= personCount) {
+			return false
 		}
-	}
-})
 
-// 获取指定位置的玩家
-const getPlayerAtPosition = (position) => {
-	return playerPositions.value.positions[position]
-}
-
-// 判断指定位置是否可以加入
-const canJoinAtPosition = (position) => {
-	const { personCount, joinPerson } = props.item
-	const joinedCount = joinPerson.length
-
-	// 如果已满员，不能加入
-	if (joinedCount >= personCount) {
-		return false
+		// 直接使用计算属性中的 joinPositions
+		return playerPositions.value.joinPositions[position]
 	}
 
-	// 直接使用计算属性中的 joinPositions
-	return playerPositions.value.joinPositions[position]
-}
-
-// 获取单元格样式类
-const getCellClass = (position) => {
-	if (getPlayerAtPosition(position)) {
-		return 'player-cell'
-	} else if (canJoinAtPosition(position)) {
-		return 'join-cell'
+	// 获取单元格样式类
+	const getCellClass = (position) => {
+		if (getPlayerAtPosition(position)) {
+			return 'player-cell'
+		} else if (canJoinAtPosition(position)) {
+			return 'join-cell'
+		}
+		return ''
 	}
-	return ''
-}
 
-// 处理卡片点击事件
-const handleCardClick = () => {
-	emit('click', props.item)
-}
+	// 处理卡片点击事件
+	const handleCardClick = () => {
+		emit('click', props.item)
+	}
 
-// 处理加入按钮点击事件
-const handleJoin = () => {
-	emit('join', props.item)
-}
+	// 处理加入按钮点击事件
+	const handleJoin = () => {
+		emit('join', props.item)
+	}
 </script>
 
 <style lang="scss" scoped>
-.item-content {
-	height: 540rpx;
-	color: white;
-	border-radius: 10rpx;
-	font-size: 32rpx;
-}
+	.grid {
+		width: 100%;
+		display: flex;
+		align-content: center;
+		justify-content: center;
+	}
 
-.mahjong-table {
-	width: 100%;
-	background-color: #D4D4D4;
-	border-radius: 10rpx 10rpx 0 0;
-	display: flex;
-    justify-content: center;
-}
+	.grid-item {
+		width: 320rpx;
+		height: 400rpx;
+		background: #FFFFFF;
+		box-shadow: -4rpx 12rpx 7rpx 0rpx rgba(0, 0, 0, 0.25);
+		border-radius: 27rpx 27rpx 27rpx 27rpx;
+		border: 4rpx solid #006C1A
+	}
 
-.status-tag {
-	position: absolute;
-	left: 15rpx;
-	top: 15rpx;
-	font-size: 16rpx;
-	color: black;
-	z-index: 10;
-}
+	.item-content {
+		height: 540rpx;
+		color: white;
+		border-radius: 10rpx;
+		font-size: 32rpx;
+	}
 
-/* 九宫格容器 */
-.nine-grid-container {
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-template-rows: 1fr 1fr 1fr;
-	width: 100%;
-	height: 100%;
-	padding: 20rpx;
-	box-sizing: border-box;
-}
+	.item {
+		display: flex;
+		align-content: center;
+		justify-content: center;
+		align-items: center;
+	}
 
-/* 网格单元格 */
-.grid-cell {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-}
+	.item-avatar {
+		width: 60rpx;
+		height: 60rpx;
+		background-color: #60AA72;
+		border-radius: 50rpx;
+	}
 
-/* 玩家头像单元格 */
-.player-cell {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+	.mahjong-table {
+		width: 100%;
+		background-color: #D4D4D4;
+		border-radius: 10rpx 10rpx 0 0;
+		display: flex;
+		justify-content: center;
+	}
 
-/* 中心单元格（麻将桌） */
-.center-cell {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+	.status-tag {
+		position: absolute;
+		left: 15rpx;
+		top: 15rpx;
+		font-size: 16rpx;
+		color: black;
+		z-index: 10;
+	}
 
-/* 加入按钮单元格 */
-.join-cell {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+	/* 九宫格容器 */
+	.nine-grid-container {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-rows: 1fr 1fr 1fr;
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		background: url('@@:app/static/index_logo.png') no-repeat center center;
+		background-size: 50%;
+	}
 
-/* 麻将桌背景图 */
-.table-bg {
-	width: 80rpx;
-	height: 80rpx;
-}
+	/* 网格单元格 */
+	.grid-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+	}
 
-/* 玩家头像 */
-.player-avatar {
-	width: 60rpx;
-	height: 60rpx;
-	background-color: white;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-}
+	/* 玩家头像单元格 */
+	.player-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-.avatar-img {
-	width: 100%;
-	height: 100%;
-	background-color: aqua;
-	border-radius: 50%;
-}
+	/* 中心单元格（麻将桌） */
+	.center-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-/* 加入按钮 */
-.join-button {
-	width: 60rpx;
-	height: 60rpx;
-	background-color: white;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-	cursor: pointer;
-	transition: all 0.3s ease;
-}
+	/* 加入按钮单元格 */
+	.join-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-.join-button:hover {
-	transform: scale(1.1);
-	background-color: #f0f0f0;
-}
+	/* 麻将桌背景图 */
+	.table-bg {
+		width: 80rpx;
+		height: 80rpx;
+	}
 
-.join-text {
-	color: black;
-	font-size: 24rpx;
-	font-weight: bold;
-}
+	/* 玩家头像 */
+	.player-avatar {
+		width: 60rpx;
+		height: 60rpx;
+		background-color: white;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+	}
 
-.info-section {
-	padding: 10rpx;
-}
+	.avatar-img {
 
-.info-text {
-	font-size: 24rpx;
-	color: black;
-	display: block;
-}
-</style>
+		border-radius: 50%;
+		width: 60rpx;
+		height: 60rpx;
+	}
+
+	/* 加入按钮 */
+	.join-button {
+		width: 60rpx;
+		height: 60rpx;
+		background-color: white;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+		cursor: pointer;
+		transition: all 0.3s ease;
+	}
+
+	.join-button:hover {
+		transform: scale(1.1);
+		background-color: #f0f0f0;
+	}
+
+	.join-text {
+		color: black;
+		font-size: 24rpx;
+		font-weight: bold;
+	}
+
+	.info-section {
+		padding: 10rpx;
+	}
+
+	.info-text {
+		font-size: 24rpx;
+		color: black;
+		display: block;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4f24cf2..c1e22b0 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -4,10 +4,13 @@
 		<z-paging ref="pagePaging" v-model="dataList" @query="queryList" :refresher-enabled="true"
 			:loading-more-enabled="true" :auto="true" :empty-view-text="'暂无麻将局数据'" :empty-view-img="'/static/empty.png'"
 			:refresher-threshold="80" :loading-more-threshold="50" style="flex: 1; width: 95%; margin-top: 10rpx;">
-			<view style="z-index: 100;position: sticky;top :0;">
-				<view :style="{ height: statusBarHeight + 'px' }" style="background-color: #fff;" class="status-bar">
+			<template #top>
+				<view style="z-index: 100;position: sticky;top :0;">
+					<view :style="{ height: statusBarHeight + 'px' }" style="background-color: #fff;"
+						class="status-bar">
+					</view>
 				</view>
-			</view>
+			</template>
 
 			<view style="z-index: 100;margin-top:10rpx;height:532rpx;">
 				<view style="width: 100%;width:100%;display:flex;justify-content: center;"
@@ -16,7 +19,8 @@
 						<swiper class="img-swiper" :indicator-dots="false" circular autoplay interval="3000">
 							<swiper-item v-for="(item, index) in homeData.advertList" :key="index">
 								<image :src="item.imageUrl" mode="scaleToFill" class="slide-img"
-									style="border-radius:25rpx;"> </image>
+									style="border-radius:25rpx;">
+								</image>
 							</swiper-item>
 						</swiper>
 					</view>
@@ -174,195 +178,195 @@
 </template>
 
 <script setup>
-	import {
-		ref,
-		reactive,
-		onMounted
-	} from 'vue'
-	import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
-	import MahjongCard from '@/components/index/MahjongCard.vue'
-	import {
-		homeData,
-		preloadHomeData
-	} from '@/common/server/index'
-	import {
-		configData,
-		getConfigData,
-		preloadConfigData
-	} from '@/common/server/config'
-	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
-	const getBackgroundImg = () => {
-		return {
-			background: `url(${configData.value.config.defaultImage}) 100% 100% `,
-			backgroundSize: '100%',
-			backgroundRepeat: "no-repeat",
-			backgroundRepeatX: "0px",
-			backgroundSize: "100%",
-			backgroundRepeatY: "0px",
-			backgroundPositionX: "0px",
-			backgroundPositionY: statusBarHeight.value + "px",
-		};
-	}
-	// 响应式数据
-	const title = ref('Hello')
-	const imgList = ref([1, 2, 3, 4, 5])
-	const dataList = ref([]) // 分页数据列表
-	const rateValue = ref(3.5)
-	const mockData = ref([]) // 模拟数据源
+import {
+	ref,
+	reactive,
+	onMounted
+} from 'vue'
+import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
+import MahjongCard from '@/components/index/MahjongCard.vue'
+import {
+	homeData,
+	preloadHomeData
+} from '@/common/server/index'
+import {
+	configData,
+	getConfigData,
+	preloadConfigData
+} from '@/common/server/config'
+const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
+const getBackgroundImg = () => {
+	return {
+		background: `url(${configData.value.config.defaultImage}) 100% 100% `,
+		backgroundSize: '100%',
+		backgroundRepeat: "no-repeat",
+		backgroundRepeatX: "0px",
+		backgroundSize: "100%",
+		backgroundRepeatY: "0px",
+		backgroundPositionX: "0px",
+		backgroundPositionY: statusBarHeight.value + "px",
+	};
+}
+// 响应式数据
+const title = ref('Hello')
+const imgList = ref([1, 2, 3, 4, 5])
+const dataList = ref([]) // 分页数据列表
+const rateValue = ref(3.5)
+const mockData = ref([]) // 模拟数据源
 
-	// 组件引用
-	const pagePaging = ref(null)
-	const cardInfo = ref(null)
-	const userInfo = ref(null)
+// 组件引用
+const pagePaging = ref(null)
+const cardInfo = ref(null)
+const userInfo = ref(null)
 
-	// 初始化模拟数据
-	const initMockData = () => {
-		mockData.value = []
-		for (let i = 1; i <= 50; i++) {
-			// 随机生成不同人数的麻将局
-			const personCount = [2, 3, 4][Math.floor(Math.random() * 3)]
-			const joinedCount = Math.floor(Math.random() * (personCount + 1))
+// 初始化模拟数据
+const initMockData = () => {
+	mockData.value = []
+	for (let i = 1; i <= 50; i++) {
+		// 随机生成不同人数的麻将局
+		const personCount = [2, 3, 4][Math.floor(Math.random() * 3)]
+		const joinedCount = Math.floor(Math.random() * (personCount + 1))
 
-			// 生成已加入的玩家
-			const joinPerson = []
-			for (let j = 0; j < joinedCount; j++) {
-				joinPerson.push({
-					id: j + 1,
-					name: `玩家${j + 1}`,
-					avatar: '',
-					phone: `138****${String(j + 1).padStart(4, '0')}`
-				})
-			}
-
-			mockData.value.push({
-				id: i,
-				title: `麻将局 ${i}`,
-				status: joinedCount >= personCount ? '已满员' : '组局中',
-				time: '20：00 ~ 04：30 共8小时30分钟',
-				room: `304包厢-大包，${personCount}人`,
-				description: '休闲局，随便来',
-				requirements: '麻将、斗地主、不可吸烟、性别不限、信誉≧4.0',
-				personCount: personCount,
-				joinPerson: joinPerson
+		// 生成已加入的玩家
+		const joinPerson = []
+		for (let j = 0; j < joinedCount; j++) {
+			joinPerson.push({
+				id: j + 1,
+				name: `玩家${j + 1}`,
+				avatar: '',
+				phone: `138****${String(j + 1).padStart(4, '0')}`
 			})
 		}
-	}
 
-	// 分页查询方法
-	const queryList = (pageNo, pageSize) => {
-		console.log(`加载第${pageNo}页，每页${pageSize}条数据`)
-
-		// 模拟网络请求延迟
-		setTimeout(() => {
-			const startIndex = (pageNo - 1) * pageSize
-			const endIndex = startIndex + pageSize
-			const pageData = mockData.value.slice(startIndex, endIndex)
-
-			// 调用 z-paging 的完成方法
-			pagePaging.value.complete(pageData)
-
-			// 如果是第一页，显示加载完成提示
-			// if (pageNo === 1) {
-			// 	uni.showToast({
-			// 		title: '刷新成功',
-			// 		icon: 'success',
-			// 		duration: 1500
-			// 	})
-			// }
-		}, 100) // 模拟1秒网络延迟
-	}
-
-	// 手动刷新
-	const refreshData = () => {
-		pagePaging.value.reload()
-	}
-
-	// 清空数据
-	const clearData = () => {
-		pagePaging.value.clear()
-	}
-
-	// 弹窗相关方法
-	const openPop = () => {
-		cardInfo.value.open()
-	}
-
-	const clasePop = () => {
-		cardInfo.value.close()
-	}
-
-	const openUserPop = () => {
-		userInfo.value.open()
-	}
-
-	const closeUserPop = () => {
-		userInfo.value.close()
-	}
-
-	const onChange = (e) => {
-		console.log('rate发生改变:' + JSON.stringify(e))
-	}
-
-	// 处理加入麻将局事件
-	const handleJoin = (item) => {
-		console.log('加入麻将局:', item)
-		// 这里可以添加加入逻辑，比如调用API
-		uni.showToast({
-			title: '加入成功',
-			icon: 'success',
-			duration: 1500
+		mockData.value.push({
+			id: i,
+			title: `麻将局 ${i}`,
+			status: joinedCount >= personCount ? '已满员' : '组局中',
+			time: '20：00 ~ 04：30 共8小时30分钟',
+			room: `304包厢-大包，${personCount}人`,
+			description: '休闲局，随便来',
+			requirements: '麻将、斗地主、不可吸烟、性别不限、信誉≧4.0',
+			personCount: personCount,
+			joinPerson: joinPerson
 		})
 	}
+}
 
-	// 生命周期
-	onMounted(() => {
-		// 初始化模拟数据
-		initMockData()
+// 分页查询方法
+const queryList = (pageNo, pageSize) => {
+	console.log(`加载第${pageNo}页，每页${pageSize}条数据`)
+
+	// 模拟网络请求延迟
+	setTimeout(() => {
+		const startIndex = (pageNo - 1) * pageSize
+		const endIndex = startIndex + pageSize
+		const pageData = mockData.value.slice(startIndex, endIndex)
+
+		// 调用 z-paging 的完成方法
+		pagePaging.value.complete(pageData)
+
+		// 如果是第一页，显示加载完成提示
+		// if (pageNo === 1) {
+		// 	uni.showToast({
+		// 		title: '刷新成功',
+		// 		icon: 'success',
+		// 		duration: 1500
+		// 	})
+		// }
+	}, 100) // 模拟1秒网络延迟
+}
+
+// 手动刷新
+const refreshData = () => {
+	pagePaging.value.reload()
+}
+
+// 清空数据
+const clearData = () => {
+	pagePaging.value.clear()
+}
+
+// 弹窗相关方法
+const openPop = () => {
+	cardInfo.value.open()
+}
+
+const clasePop = () => {
+	cardInfo.value.close()
+}
+
+const openUserPop = () => {
+	userInfo.value.open()
+}
+
+const closeUserPop = () => {
+	userInfo.value.close()
+}
+
+const onChange = (e) => {
+	console.log('rate发生改变:' + JSON.stringify(e))
+}
+
+// 处理加入麻将局事件
+const handleJoin = (item) => {
+	console.log('加入麻将局:', item)
+	// 这里可以添加加入逻辑，比如调用API
+	uni.showToast({
+		title: '加入成功',
+		icon: 'success',
+		duration: 1500
 	})
+}
 
-	onLoad(async () => {
-		if (!homeData.value) preloadHomeData();
-		if (!configData.value) preloadConfigData();
-	});
+// 生命周期
+onMounted(() => {
+	// 初始化模拟数据
+	initMockData()
+})
+
+onLoad(async () => {
+	if (!homeData.value) preloadHomeData();
+	if (!configData.value) preloadConfigData();
+});
 </script>
 
 <style lang="scss">
-	.content {
-		height: 100vh;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: flex-start;
+.content {
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
 
-	}
+}
 
-	.img-swiper {
-		width: 100%;
-		height: 386rpx;
-	}
+.img-swiper {
+	width: 100%;
+	height: 386rpx;
+}
 
-	.slide-img {
-		width: 100%;
-		height: 100%;
+.slide-img {
+	width: 100%;
+	height: 100%;
 
-	}
+}
 
-	/* 网格容器 - 2列布局 */
-	.grid-container {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		/* 2列，每列宽度相等 */
-		gap: 20rpx;
-		/* 网格间距（行列间距相同） */
-		padding: 0 15rpx;
-	}
+/* 网格容器 - 2列布局 */
+.grid-container {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	/* 2列，每列宽度相等 */
+	gap: 20rpx;
+	/* 网格间距（行列间距相同） */
+	padding: 0 15rpx;
+}
 
-	/* 网格项内容 */
-	.item-content {
-		height: 630rpx;
-		// background-color: #E6E6E6;
-		color: white;
-		border-radius: 10rpx;
-		font-size: 32rpx;
-	}
+/* 网格项内容 */
+.item-content {
+	height: 630rpx;
+	// background-color: #E6E6E6;
+	color: white;
+	border-radius: 10rpx;
+	font-size: 32rpx;
+}
 </style>
\ No newline at end of file
diff --git a/static/tabbar/appointment.png b/static/tabbar/appointment.png
index f15e5fa..787b1af 100644
Binary files a/static/tabbar/appointment.png and b/static/tabbar/appointment.png differ
diff --git a/static/tabbar/appointment_s.png b/static/tabbar/appointment_s.png
index f4e6fd3..842f45f 100644
Binary files a/static/tabbar/appointment_s.png and b/static/tabbar/appointment_s.png differ
diff --git a/static/tabbar/home.png b/static/tabbar/home.png
index 6184829..009b0be 100644
Binary files a/static/tabbar/home.png and b/static/tabbar/home.png differ
diff --git a/static/tabbar/home_s.png b/static/tabbar/home_s.png
index d2eb8db..da33e5e 100644
Binary files a/static/tabbar/home_s.png and b/static/tabbar/home_s.png differ
diff --git a/static/tabbar/me.png b/static/tabbar/me.png
index e349809..352d4d4 100644
Binary files a/static/tabbar/me.png and b/static/tabbar/me.png differ
diff --git a/static/tabbar/me_s.png b/static/tabbar/me_s.png
index 4642673..86032c1 100644
Binary files a/static/tabbar/me_s.png and b/static/tabbar/me_s.png differ