diff --git a/common/env.js b/common/env.js
index 76a9eb4..95811de 100644
--- a/common/env.js
+++ b/common/env.js
@@ -9,6 +9,8 @@ const development = {
     // baseUrl: 'https://ydsapi.zpc-xy.com',
     baseUrl: 'http://1.15.21.245:2401',
     host: ['http://1.15.21.245:2401'],
+    // baseUrl: 'http://localhost:2015',
+    // host: ['http://localhost:2015'],
     imageUrl: 'https://guyu-1308826010.cos.ap-shanghai.myqcloud.com',
 
 };
diff --git a/common/server/interface/user.js b/common/server/interface/user.js
index 401b023..fd1cde8 100644
--- a/common/server/interface/user.js
+++ b/common/server/interface/user.js
@@ -51,4 +51,26 @@ export const getUserInfo = async () => {
         return res.data;
     }
     return null;
+}
+
+/**
+ * 修改用户信息
+ * @param {*} nickName 
+ * @param {*} avatar 
+ * @param {*} sex 
+ * @param {*} birthday 
+ * @returns 
+ */
+export const editUserInfo = async (nickName, avatar, sex, birthday) => {
+
+    const res = await request.post("user/EditUserInfo", {
+        nickName,
+        avatar,
+        sex,
+        birthday
+    });
+    if (res.code == 0) {
+        return true;
+    }
+    return false;
 }
\ No newline at end of file
diff --git a/common/server/user.js b/common/server/user.js
index cdea6c1..1aeafbb 100644
--- a/common/server/user.js
+++ b/common/server/user.js
@@ -1,4 +1,4 @@
-import { getUserInfo } from '@/common/server/interface/user'
+import { getUserInfo, editUserInfo } from '@/common/server/interface/user'
 import { ref } from 'vue'
 
 export var userInfo = ref(null);
@@ -6,7 +6,7 @@ export var userInfo = ref(null);
 export const loadUserInfo = async () => {
     const res = await getUserInfo();
     if (res == null) {
-   
+
         userInfo.value = null;
         uni.removeStorageSync('tokenInfo');
         uni.removeStorageSync('userInfo');
@@ -16,3 +16,10 @@ export const loadUserInfo = async () => {
     uni.setStorageSync('userInfo', res);
 }
 
+export const updateUserInfo = async (nickName, avatar, sex, birthday) => {
+    const res = await editUserInfo(nickName, avatar, sex, birthday);
+    if (!res) {
+        return;
+    }
+    loadUserInfo();
+}
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 67ea24d..4f24cf2 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -9,9 +9,9 @@
 				</view>
 			</view>
 
-			<view style="z-index: 100;margin-top:10rpx;"
-				v-if="homeData != null && homeData.advertList != null && homeData.advertList.length > 0">
-				<view style="width: 100%;width:100%;display:flex;justify-content: center;">
+			<view style="z-index: 100;margin-top:10rpx;height:532rpx;">
+				<view style="width: 100%;width:100%;display:flex;justify-content: center;"
+					v-if="homeData != null && homeData.advertList != null && homeData.advertList.length > 0">
 					<view class="" style="width:97%; height: 386rpx;border-radius: 25rpx;">
 						<swiper class="img-swiper" :indicator-dots="false" circular autoplay interval="3000">
 							<swiper-item v-for="(item, index) in homeData.advertList" :key="index">
@@ -174,189 +174,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% 100%'
-	};
-}
-// 响应式数据
-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')}`
+			// 生成已加入的玩家
+			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
 			})
 		}
+	}
 
-		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 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
 		})
 	}
-}
 
-// 分页查询方法
-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
+	// 生命周期
+	onMounted(() => {
+		// 初始化模拟数据
+		initMockData()
 	})
-}
 
-// 生命周期
-onMounted(() => {
-	// 初始化模拟数据
-	initMockData()
-})
-
-onLoad(async () => {
-	if (!homeData.value) preloadHomeData();
-	if (!configData.value) preloadConfigData();
-});
+	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/pages/me/edit-info.vue b/pages/me/edit-info.vue
index 1b98192..c4a7986 100644
--- a/pages/me/edit-info.vue
+++ b/pages/me/edit-info.vue
@@ -1,182 +1,347 @@
 <template>
 	<view class="content column">
 
-		<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
-			<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
-			<text style="font-size: 30rpx;">修改信息</text>
-			<view style="width: 40rpx;"></view>
+		<view class="header">
+			<image src="/static/back.png" class="back-icon" @click="goBack()" mode=""></image>
+			<text class="header-title">修改信息</text>
+			<view class="header-spacer"></view>
 		</view>
 
-		<view class="column" style="width: 90%; margin: 80rpx auto 0;">
+		<view class="form-container">
 
-			<view class="row"
-				style="justify-content: space-between; width: 100%; align-items: center; margin-top: 40rpx; font-size: 26rpx;">
-				<text style="">我的UID</text>
-				<text style="">{{ user.id }}</text>
+			<view class="form-row">
+				<text class="form-label">我的UID</text>
+				<text class="form-value">{{ user.id }}</text>
 			</view>
 
-			<view style="width: 100%; height: 1rpx; background-color: antiquewhite; margin-top: 20rpx;"></view>
+			<view class="divider"></view>
 
-			<view class="row"
-				style="justify-content: space-between; width: 100%; align-items: center;margin-top:20rpx;">
-
-				<text style="font-size: 26rpx;">我的头像</text>
+			<view class="form-row avatar-row">
+				<text class="form-label">我的头像</text>
 				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
-					<image :src="user.avatarImage"
-						style="width: 70rpx; height: 70rpx; background-color: aquamarine; border-radius: 50%;" mode="">
+					<image :src="user.avatarImage" class="avatar-image" mode="">
 					</image>
 				</button>
-
 			</view>
 
-			<view style="width: 100%; height: 1rpx; background-color: antiquewhite; margin-top: 20rpx;"></view>
+			<view class="divider"></view>
 
-			<view class="row"
-				style="justify-content: space-between; width: 100%; align-items: center; margin-top: 40rpx; font-size: 26rpx;">
-
-				<text style="">我的昵称</text>
-
-				<input type="nickname" v-model="user.nickName" style="text-align: right;" />
+			<view class="form-row">
+				<text class="form-label">我的昵称</text>
+				<input type="nickname" v-model="user.nickName" class="form-input" />
 			</view>
 
-			<view style="width: 100%; height: 1rpx; background-color: antiquewhite; margin-top: 20rpx;"></view>
+			<view class="divider"></view>
 
-			<view class="row"
-				style="justify-content: space-between; width: 100%; align-items: center; margin-top: 40rpx; font-size: 26rpx;">
+			<view class="form-row">
+				<text class="form-label">我的年龄</text>
+				<text class="form-value">{{ calculatedAge }}岁</text>
+			</view>
 
-				<text style="">我的年龄</text>
+			<view class="divider"></view>
 
-				<picker mode="selector" :value="ageIndex" :range="ageOptions" @change="onAgeChange">
+			<view class="form-row">
+				<text class="form-label">我的性别</text>
+				<picker mode="selector" :value="genderIndex" :range="GENDER_OPTIONS" @change="onGenderChange">
 					<view class="picker-text">
-						{{ ageOptions[ageIndex] }}岁
+						{{ currentGender }}
 					</view>
 				</picker>
 			</view>
 
-			<view style="width: 100%; height: 1rpx; background-color: antiquewhite; margin-top: 20rpx;"></view>
+			<view class="divider"></view>
 
-			<view class="row"
-				style="justify-content: space-between; width: 100%; align-items: center; margin-top: 40rpx; font-size: 26rpx;">
-
-				<text style="">我的性别</text>
-
-				<picker mode="selector" :value="genderIndex" :range="genderOptions" @change="onGenderChange">
+			<view class="form-row">
+				<text class="form-label">我的生日</text>
+				<picker mode="date" :value="user.birthday" @change="onBirthdayChange">
 					<view class="picker-text">
-						{{ genderOptions[genderIndex] }}
+						{{ user.birthday || '请选择生日' }}
 					</view>
 				</picker>
 			</view>
 
-			<view style="width: 100%; height: 1rpx; background-color: antiquewhite; margin-top: 20rpx;"></view>
-
-
-
+			<view class="divider"></view>
 		</view>
 
-
+		<!-- 保存按钮 -->
+		<view class="save-button-container">
+			<button class="save-button" @click="saveUserInfo" :disabled="isSaving">
+				{{ isSaving ? '保存中...' : '保存修改' }}
+			</button>
+		</view>
 	</view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { userInfo } from '@/common/server/user'
+import { ref, computed, onMounted } from 'vue'
+import { userInfo, updateUserInfo } from '@/common/server/user'
 
-// 性别选项
-const genderOptions = ['男', '女']
+// 常量配置
+const GENDER_OPTIONS = ['男', '女']
+
+// 响应式数据
 const genderIndex = ref(0)
+const isSaving = ref(false)
 
-// 年龄选项 (18-90岁)
-const ageOptions = Array.from({ length: 73 }, (_, i) => i + 18)
-const ageIndex = ref(0)
-
+// 用户信息
 const user = ref({
-	avatarImage: userInfo.value.avatarImage,
-	nickName: userInfo.value.nickName,
-	age: userInfo.value.age ?? 18,
-	id: userInfo.value.id,
-	sex: userInfo.value.sex == 1 ? '男' : '女'
+	avatarImage: userInfo.value.avatarImage || '',
+	nickName: userInfo.value.nickName || '',
+	id: userInfo.value.id || '',
+	sex: userInfo.value.sex == 1 ? '男' : '女',
+	birthday: userInfo.value.birthday ?? "1990-01-01"
 })
 
-onLoad(() => {
-	console.log("userInfo", userInfo.value);
-	// 根据用户性别设置picker的初始值
-	if (userInfo.value.sex === '女') {
-		genderIndex.value = 1
-	} else {
-		genderIndex.value = 0
+// 计算属性
+const currentGender = computed(() => GENDER_OPTIONS[genderIndex.value])
+
+// 根据生日计算年龄
+const calculatedAge = computed(() => {
+	if (!user.value.birthday) return 0
+
+	const today = new Date()
+	const birthDate = new Date(user.value.birthday)
+
+	let age = today.getFullYear() - birthDate.getFullYear()
+	const monthDiff = today.getMonth() - birthDate.getMonth()
+
+	// 如果还没到生日，年龄减1
+	if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+		age--
 	}
 
-	// 根据用户年龄设置picker的初始值
-	const userAge = userInfo.value.age ?? 18
-	const ageIndexValue = Math.max(0, Math.min(72, userAge - 18))
-	ageIndex.value = ageIndexValue
+	return age
+})
+
+// 初始化picker索引
+const initializePickerIndexes = () => {
+	// 设置性别索引
+	genderIndex.value = userInfo.value.sex === '女' ? 1 : 0
+}
+
+onMounted(() => {
+	console.log("userInfo", userInfo.value)
+	initializePickerIndexes()
 })
 // 方法
 const goBack = () => {
-	// 返回上一页
-	uni.navigateBack({
-		delta: 1
-	});
+	uni.navigateBack({ delta: 1 })
 }
+
 /**
-* 选择头像
-*/
+ * 选择头像
+ */
 const onChooseAvatar = (e) => {
-	if (e && e.detail && e.detail.avatarUrl) {
-		// user.value.avatarImage = e.detail.avatarUrl;
-		convertToBase64(user.value.avatarImage);
+	const { avatarUrl } = e?.detail || {}
+	console.log("avatarUrl", avatarUrl);
+
+	if (avatarUrl) {
+		convertToBase64(avatarUrl)
 	}
 }
+
 /**
  * 性别选择变化
  */
 const onGenderChange = (e) => {
-	genderIndex.value = e.detail.value
-	user.value.sex = genderOptions[genderIndex.value]
+	const selectedIndex = e.detail.value
+	genderIndex.value = selectedIndex
+	user.value.sex = GENDER_OPTIONS[selectedIndex]
 }
 
+
 /**
- * 年龄选择变化
+ * 生日选择变化
  */
-const onAgeChange = (e) => {
-	ageIndex.value = e.detail.value
-	user.value.age = ageOptions[ageIndex.value]
+const onBirthdayChange = (e) => {
+	user.value.birthday = e.detail.value
 }
 
 /**
  * 将图片转换为Base64
  */
 const convertToBase64 = (filePath) => {
-	console.log(filePath);
+	if (!filePath) {
+		showErrorToast('图片路径无效')
+		return
+	}
+
 	uni.getFileSystemManager().readFile({
-		filePath: filePath,
+		filePath,
 		encoding: "base64",
 		success: (res) => {
-			user.value.avatarImage = "data:image/png;base64," + res.data;
+			user.value.avatarImage = `data:image/png;base64,${res.data}`
 		},
 		fail: (err) => {
-			console.error("读取文件失败:", err);
-			uni.showToast({
-				title: "图片处理失败",
-				icon: "none",
-			});
+			console.error("读取文件失败:", err)
+			showErrorToast("图片处理失败")
 		},
-	});
+	})
+}
+
+/**
+ * 保存用户信息
+ */
+const saveUserInfo = async () => {
+	if (isSaving.value) return
+
+	// 验证必填字段
+	if (!user.value.nickName.trim()) {
+		showErrorToast('请输入昵称')
+		return
+	}
+
+	if (!user.value.birthday) {
+		showErrorToast('请选择生日')
+		return
+	}
+
+	isSaving.value = true
+
+	try {
+		// 准备保存的数据
+		const saveData = {
+			avatarImage: user.value.avatarImage,
+			nickName: user.value.nickName.trim(),
+			sex: user.value.sex === '男' ? 1 : 2,
+			birthday: user.value.birthday,
+		}
+
+		console.log('保存用户信息:', saveData)
+
+		// 这里应该调用实际的API保存数据
+		// await updateUserInfo(saveData)
+		//async (nickName, avatar, sex, birthday)
+		await updateUserInfo(user.value.nickName.trim(), user.value.avatarImage,
+			user.value.sex === '男' ? 1 : 2,
+			user.value.birthday
+		);
+		// 模拟API调用延迟
+		// await new Promise(resolve => setTimeout(resolve, 1000))
+
+		// 更新全局用户信息
+		// Object.assign(userInfo.value, saveData)
+
+		uni.showToast({
+			title: '保存成功',
+			icon: 'success',
+			duration: 2000
+		})
+
+		// 延迟返回上一页
+		setTimeout(() => {
+			uni.navigateBack({ delta: 1 })
+		}, 1500)
+
+	} catch (error) {
+		console.error('保存失败:', error)
+		showErrorToast('保存失败，请重试')
+	} finally {
+		isSaving.value = false
+	}
+}
+
+/**
+ * 显示错误提示
+ */
+const showErrorToast = (message) => {
+	uni.showToast({
+		title: message,
+		icon: "none",
+		duration: 2000
+	})
 }
 </script>
 
 <style lang="scss">
+// 变量定义
+$primary-color: #333;
+$border-color: antiquewhite;
+$font-size-normal: 26rpx;
+$font-size-title: 30rpx;
+$avatar-size: 70rpx;
+$border-radius: 50%;
+$container-width: 90%;
+$header-margin-top: 100rpx;
+$form-margin-top: 80rpx;
+$row-margin-top: 40rpx;
+$divider-margin-top: 20rpx;
+
 .content {
 	width: 100%;
 	height: 100vh;
 }
 
+// 头部样式
+.header {
+	width: $container-width;
+	margin: $header-margin-top auto 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.back-icon {
+	width: 40rpx;
+	height: 40rpx;
+}
+
+.header-title {
+	font-size: $font-size-title;
+}
+
+.header-spacer {
+	width: 40rpx;
+}
+
+// 表单容器样式
+.form-container {
+	width: $container-width;
+	margin: $form-margin-top auto 0;
+}
+
+// 表单行样式
+.form-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	margin-top: $row-margin-top;
+	font-size: $font-size-normal;
+
+	&.avatar-row {
+		margin-top: $divider-margin-top;
+	}
+}
+
+.form-label {
+	font-size: $font-size-normal;
+}
+
+.form-value {
+	font-size: $font-size-normal;
+}
+
+.form-input {
+	text-align: right;
+	font-size: $font-size-normal;
+}
+
+// 分割线样式
+.divider {
+	width: 100%;
+	height: 1rpx;
+	background-color: $border-color;
+	margin-top: $divider-margin-top;
+}
+
+// 头像相关样式
 .avatar-wrapper {
-	margin: 0rpx;
+	margin: 0;
 	float: right;
 	border-radius: 128rpx;
 	overflow: hidden;
-	border: 0rpx solid #F3F3F3;
+	border: 0;
 	background-color: transparent;
 	padding: 0;
 	line-height: normal;
@@ -188,14 +353,56 @@ const convertToBase64 = (filePath) => {
 	.avatar {
 		width: 170rpx;
 		height: 160rpx;
-		border-radius: 50%;
+		border-radius: $border-radius;
 	}
 }
 
+.avatar-image {
+	width: $avatar-size;
+	height: $avatar-size;
+	background-color: aquamarine;
+	border-radius: $border-radius;
+}
+
+// Picker样式
 .picker-text {
 	display: flex;
 	align-items: center;
-	color: #333;
-	font-size: 26rpx;
+	color: $primary-color;
+	font-size: $font-size-normal;
+}
+
+// 保存按钮样式
+.save-button-container {
+	width: $container-width;
+	margin: 60rpx auto 0;
+	padding-bottom: 40rpx;
+}
+
+.save-button {
+	width: 100%;
+	height: 80rpx;
+	background: linear-gradient(135deg, #F36903 0%, #E55A00 100%);
+	color: white;
+	border: none;
+	border-radius: 40rpx;
+	font-size: 32rpx;
+	font-weight: 500;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 8rpx 20rpx rgba(243, 105, 3, 0.3);
+	transition: all 0.3s ease;
+
+	&:active {
+		transform: translateY(2rpx);
+		box-shadow: 0 8rpx 20rpx rgba(243, 105, 3, 0.3);
+	}
+
+	&:disabled {
+		background: #ccc;
+		box-shadow: none;
+		transform: none;
+	}
 }
 </style>
\ No newline at end of file
diff --git a/pages/me/me-page.vue b/pages/me/me-page.vue
index 35bd4ce..345cb51 100644
--- a/pages/me/me-page.vue
+++ b/pages/me/me-page.vue
@@ -314,17 +314,9 @@ const clasePop = () => {
 }
 
 const toAppointment = () => {
-	// 未登录状态，提示登录
-	if (!userInfo.uid) {
-		uni.showModal({
-			title: '提示',
-			content: '请先登录查看预约记录',
-			showCancel: false,
-			success: () => {
-				uni.navigateTo({
-					url: '/pages/me/login'
-				});
-			}
+	if (userInfo.value == null) {
+		uni.navigateTo({
+			url: '/pages/me/login'
 		});
 		return;
 	}
@@ -336,7 +328,7 @@ const toAppointment = () => {
 
 const toEditInfo = () => {
 	// 未登录状态，跳转到登录页面
-	if (userInfo == null) {
+	if (userInfo.value == null) {
 		uni.navigateTo({
 			url: '/pages/me/login'
 		});
@@ -348,21 +340,12 @@ const toEditInfo = () => {
 }
 
 const toBlacklist = () => {
-	// 未登录状态，提示登录
-	if (!userInfo.uid) {
-		uni.showModal({
-			title: '提示',
-			content: '请先登录查看黑名单',
-			showCancel: false,
-			success: () => {
-				uni.navigateTo({
-					url: '/pages/me/login'
-				});
-			}
+	if (userInfo.value == null) {
+		uni.navigateTo({
+			url: '/pages/me/login'
 		});
 		return;
 	}
-
 	uni.navigateTo({
 		url: '/pages/me/blacklist-page'
 	});
@@ -379,31 +362,6 @@ const toLogin = () => {
 	});
 }
 
-// 加载用户数据 - 未登录状态
-const loadUserData = async () => {
-	loading.value = true
-	try {
-		// 未登录状态，不加载用户数据
-		// 保持默认的未登录状态
-		userInfo.nickname = '未登录'
-		userInfo.uid = ''
-		userInfo.rating = 0
-		userInfo.reputation = 0
-		userInfo.cardQuality = 0
-		userInfo.cardSkill = 0
-		userInfo.pigeonCount = 0
-
-	} catch (error) {
-		console.error('加载用户数据失败:', error)
-		uni.showToast({
-			title: '加载失败',
-			icon: 'error'
-		})
-	} finally {
-		loading.value = false
-	}
-}
-
 // 加载当前预约信息 - 未登录状态
 const loadCurrentAppointment = async () => {
 	try {
@@ -418,7 +376,6 @@ const loadCurrentAppointment = async () => {
 
 // 组件挂载时加载数据
 onMounted(() => {
-	loadUserData()
 	loadCurrentAppointment()
 })
 
@@ -428,9 +385,8 @@ onShow(() => {
 	// getUserInfoData();
 })
 onLoad(async () => {
-	console.log('kiad');
 	await loadUserInfo();
-})
+});
 </script>
 
 <style lang="scss">