diff --git a/pages/mine/api.js b/pages/mine/api.js
index 52e8d26..c1d6742 100644
--- a/pages/mine/api.js
+++ b/pages/mine/api.js
@@ -17,6 +17,7 @@ export const updateNickname = (params) => {
 export const userLogout = (params) => {
   return post('/app-api/member/auth/logout', params)
 }
+
 /**
  * @desc 用户个人信息
  */
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index 4e688cb..676705a 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -1,235 +1,389 @@
 <script setup>
-import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
-import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
-import CustomTabBar from '@/components/CustomTabBar.vue'
-import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
-import LoginPopup from '@/components/login.vue';
-import { getUserInfo } from './api.js';
-import { useUserStore } from '@/store/user.js';
+	import {
+		ref,
+		onMounted,
+		getCurrentInstance,
+		nextTick
+	} from 'vue';
+	import {
+		onLoad,
+		onShow,
+		onReady,
+		onHide,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app';
+	import CustomTabBar from '@/components/CustomTabBar.vue'
+	import {
+		getSystemSafeArea,
+		getSystemInfo,
+		isEmpty,
+		showToast,
+		showLoadingToast,
+		closeToast
+	} from '@/common/common.js';
+	import LoginPopup from '@/components/login.vue';
+	import {
+		getUserInfo
+	} from './api.js';
+	import {
+		useUserStore
+	} from '@/store/user.js';
 
-import { useI18n } from 'vue-i18n';
-const { t, locale } = useI18n();
+	import {
+		useI18n
+	} from 'vue-i18n';
+	const {
+		t,
+		locale
+	} = useI18n();
 
-const props = defineProps(['status']);
-const { proxy } = getCurrentInstance();
+	const props = defineProps(['status']);
+	const {
+		proxy
+	} = getCurrentInstance();
 
-const userStore = useUserStore();
+	const userStore = useUserStore();
 
-const tabList = ref([]); //tab列表
-const tabsIndex = ref(0); //当前选中的tab索引
-// const modelTypeList = ref([]);
-const tabsLeft = ref(0); //下划线移动的距离
-const finished = ref(false); //数据是否全部加载完成
-const windowWidth = ref(0); //tab元素的宽度
-const orderRows = ref([]); //订单列表
-const showLogin = ref(false); //显示登录
-const triggered = ref(false); //是否下拉刷新状态，true为是
-const loading = ref(false); // 添加loading状态
-const productData = ref();
-const scrollHeight = ref(0); //scroll-view滚动高度
+	const tabList = ref([]); //tab列表
+	const tabsIndex = ref(0); //当前选中的tab索引
+	// const modelTypeList = ref([]);
+	const tabsLeft = ref(0); //下划线移动的距离
+	const finished = ref(false); //数据是否全部加载完成
+	const windowWidth = ref(0); //tab元素的宽度
+	const orderRows = ref([]); //订单列表
+	const showLogin = ref(false); //显示登录
+	const triggered = ref(false); //是否下拉刷新状态，true为是
+	const loading = ref(false); // 添加loading状态
+	const productData = ref();
+	const scrollHeight = ref(0); //scroll-view滚动高度
 
-const pageView = ref({});
+	const pageView = ref({});
 
-// 控制登录弹窗显示
-const toggleLoginPopup = () => {
-  showLogin.value = !showLogin.value;
-};
+	// 控制登录弹窗显示
+	const toggleLoginPopup = () => {
+		showLogin.value = !showLogin.value;
+	};
 
+	//用户信息
+	const userName = ref();
 
+	// 设备数据数组
+	const deviceList = ref([
+		{
+			id: 1,
+			name: 'Sweekar Alpha',
+			level: 'Lv.5 Childhood',
+			battery: '92%',
+			bluetooth: 'ON',
+			isCurrent: true
+		},
+		{
+			id: 2,
+			name: 'Little Beta',
+			level: 'Lv.1 Infancy',
+			battery: '92%',
+			bluetooth: 'ON',
+			isCurrent: false
+		}
+	]);
 
-/**
- * @desc 获取可视内容高度
- */
-const getContentHeight = (e) => {
-  pageView.value = e;
-};
+	/**
+	 * @desc 处理设备点击事件
+	 */
+	const handleDeviceClick = (clickedDeviceId) => {
+		deviceList.value.forEach(device => {
+			device.isCurrent = device.id === clickedDeviceId;
+		});
+	};
 
-/**
- * @desc 跳转至详情页面
- */
-const toDetailPage = (productId) => {
-  uni.navigateTo({
-    url: '/pages/product/detail',
-  });
-};
+	/**
+	 * @desc 获取可视内容高度
+	 */
+	const getContentHeight = (e) => {
+		pageView.value = e;
+	};
 
-const userData = ref();
-//获取首页数据
-const getUserInformation = async()=>{
-	const res = await getUserInfo();
-	
-	userData.value = res.data;
-	console.log('data',userData.value);
-	
-	
-	
-}
+	/**
+	 * @desc 跳转至详情页面
+	 */
+	const toDetailPage = (productId) => {
+		uni.navigateTo({
+			url: '/pages/product/detail',
+		});
+	};
 
-onLoad(()=>{
-	getUserInformation();
-	
-});
+	const userData = ref();
+	//获取首页数据
+	const getUserInformation = async () => {
+		const res = await getUserInfo();
 
-// 模拟数据
+		userData.value = res.data;
+		userStore.updateUserInfo('nickname', userData.value.nickname);
+		console.log('用户名', userStore.userName);
+		userName.value = userData.value.nickname;
 
-/**
- * @desc 处理预订事件
- */
-const handleBook = (productId) => {
-  // 这里可以添加预订逻辑，比如跳转到详情页
-  uni.navigateTo({
-    url: `/pages/product/detail?id=${productId}`,
-  });
-};
+	}
 
-/**
- * @desc 跳转至登录页面
- */
-const toLoginPage = (productId) => {
-	userStore.logout()
-  uni.navigateTo({
-    url: '/pages/login/index',
-  });
-};
+	onLoad(() => {
+		getUserInformation();
 
-onMounted(() => {
-  // 示例：在页面加载完成后自动显示登录弹窗
-  // setTimeout(() => {
-  //   showLogin.value = true;
-  // }, 1000);
-});
+	});
 
-// 测试缓存中的数据
+	// 模拟数据
 
-const test = () =>{
-	console.log('登录数据',userStore.token);
-}
+	/**
+	 * @desc 处理预订事件
+	 */
+	const handleBook = (productId) => {
+		// 这里可以添加预订逻辑，比如跳转到详情页
+		uni.navigateTo({
+			url: `/pages/product/detail?id=${productId}`,
+		});
+	};
 
+	/**
+	 * @desc 跳转至登录页面
+	 */
+	const toLoginPage = (productId) => {
+		userStore.logout()
+		uni.navigateTo({
+			url: '/pages/login/index',
+		});
+	};
+
+	onMounted(() => {
+		getUserInformation();
+		// 示例：在页面加载完成后自动显示登录弹窗
+		// setTimeout(() => {
+		//   showLogin.value = true;
+		// }, 1000);
+	});
+
+	// 测试缓存中的数据
+
+	const test = () => {
+		console.log('登录数据', userStore.token);
+	}
 </script>
 
 <template>
-  <view class="bg-[#fff]">
-    <!-- 页面内容区域 -->
-    <view class="flex flex-col">
-      <!-- 个人页头部区域 -->
-      <view class="profile-header p-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white">
-        <view class="flex items-center">
-          <image 
-            src="/static/images/avatar.png" 
-            class="w-16 h-16 rounded-full border-2 border-white mr-4"
-            style="background-color: #ddd;"
-			@click="test()"
-          />
-          <view class="flex-1">
-            <view class="font-bold text-lg">用户昵称</view>
-            <view class="text-sm opacity-80">ID: 123456789</view>
-          </view>
-          <button 
-            class="bg-white text-blue-600 px-4 py-2 rounded-full text-sm font-medium"
-			@click="toLoginPage"
-            
-          >
-            {{ userStore.isLogin ? '退出登录' : '登录' }}
-          </button>
-        </view>
-      </view>
-      
-      <!-- 功能列表 -->
-      <view class="p-4">
-        <view class="bg-white rounded-xl shadow-sm p-4 mb-4">
-          <view class="font-semibold text-lg mb-3">个人中心</view>
-          
-          <view class="space-y-3">
-            <view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
-              <view class="flex items-center">
-                <view class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
-                  <text class="text-blue-600 text-sm">👤</text>
-                </view>
-                <text>个人信息</text>
-              </view>
-              <text class="text-gray-400 text-sm">></text>
-            </view>
-            
-            <view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
-              <view class="flex items-center">
-                <view class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
-                  <text class="text-green-600 text-sm">🔒</text>
-                </view>
-                <text>账户安全</text>
-              </view>
-              <text class="text-gray-400 text-sm">></text>
-            </view>
-            
-            <view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
-              <view class="flex items-center">
-                <view class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
-                  <text class="text-yellow-600 text-sm">💬</text>
-                </view>
-                <text>消息通知</text>
-              </view>
-              <text class="text-gray-400 text-sm">></text>
-            </view>
-            
-            <view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
-              <view class="flex items-center">
-                <view class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
-                  <text class="text-red-600 text-sm">⚙️</text>
-                </view>
-                <text>设置</text>
-              </view>
-              <text class="text-gray-400 text-sm">></text>
-            </view>
-          </view>
-        </view>
-        
-        <!-- 操作按钮 -->
-        <view class="mt-6">
-          <button 
-            class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 rounded-xl font-medium"
-            @tap="toggleLoginPopup"
-          >
-            {{ userStore.isLogin ? '退出登录' : '立即登录' }}
-          </button>
-        </view>
-      </view>
-    </view>
-    
-  
-    
-    <CustomTabBar />
-  </view>
+	<view class="bg-[#fff]">
+		<!-- 页面内容区域 -->
+		<view class="flex flex-col">
+			<!-- 个人页头部区域 -->
+			<view class="profile-header px-4 pt-4 bg-gradient-to-r from-blue-500 to-purple-600">
+				<view class="flex items-center text-thme">
+					<view
+						class="w-16 h-16 rounded-full border-2 border-theme border-solid mr-4 p-3 bg-[#ddd] overflow-hidden">
+						<!-- 直接使用原生 image 标签 -->
+						<image src="/static/image/head.png" class="w-full h-full object-cover" @click="test()" />
+					</view>
+
+					<view class="flex flex-col justify-center items-start gap-1">
+						<view class="font-bold text-lg text-black">{{userName}}</view>
+						<view class="text-sm opacity-80 text-black">Sweekar Guardian since 2023</view>
+						<!-- 在线状态 -->
+						<view class="border-round-theme rounded-lg flex justify-center p-1 items-center">
+							<text class="text-[10px]">Online</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 功能区域分割线 -->
+			<uv-divider line-color="#333333" hairline="false"></uv-divider>
+
+			<!-- 功能列表 -->
+			<view class="p-4 flex flex-col">
+				<!-- MY DEVICES -->
+				<view class="flex flex-col p-1 gap-3">
+					<!-- title -->
+					<view class="flex gap-1 justify-between">
+						<view class="flex gap-2 items-center">
+							<text class="font-bold">|</text>
+							<text class="text-sm font-bold">MY DEVICES</text>
+						</view>
+						<text class="text-sm text-[#808080]">{{deviceList.length}} Active</text>
+					</view>
+					<!-- 功能模块 -->
+					<view 
+						v-for="(device, index) in deviceList" 
+						:key="device.id"
+						class="border-round-theme rounded-lg flex flex-col justify-center items-start p-4 gap-2 cursor-pointer"
+						:class="device.isCurrent?'shadow-[4px_4px_1px_0_rgba(0,0,0,1)]':''"
+						@click="handleDeviceClick(device.id)"
+						>
+						<!-- 上半部分 -->
+						<view class="flex items-center gap-2 w-full">
+							<!-- 图标部分 -->
+							<view
+								class="border-round-theme bg-[#ddd] rounded-lg w-10 h-10 flex justify-center items-center">
+								<u-icon name="phone"></u-icon>
+							</view>
+
+							<!-- 设备信息 -->
+							<view class="flex flex-col flex-1">
+								<text class="font-bold text-[16px] break-words">{{device.name}}</text>
+								<text class="text-xs text-[#808080]">{{device.level}}</text>
+							</view>
+							<!-- 电量和蓝牙 -->
+							<view class="flex">
+								<!-- tag -->
+								<view
+									v-if="device.isCurrent"
+									class="flex justify-center items-center  border-round-theme bg-theme h-4 w-10 rounded-full ">
+									<text class="text-[8px] text-white">CURRENT</text>
+								</view>
+								<view
+									class="border-round-theme rounded-lg w-10 h-10 flex flex-col justify-center items-center mr-1">
+									<u-icon name="phone"></u-icon>
+									<text class="text-[8px]">{{device.battery}}</text>
+								</view>
+								<view
+									class="border-round-theme rounded-lg w-10 h-10 flex flex-col justify-center items-center mr-1">
+									<u-icon name="phone"></u-icon>
+									<text class="text-[8px]">{{device.bluetooth}}</text>
+								</view>
+
+							</view>
+						</view>
+						<!-- 底部按钮 -->
+						<view class="w-full" v-if="device.isCurrent">
+							<view class="border-round-theme rounded-lg bg-theme flex justify-center items-center p-2 gap-1">
+								<u-icon name="list" color="#fff"></u-icon>
+								<text class="text-white text-sm">CONTROL CONSOLE</text>
+							</view>
+						</view>
+					</view>
+				
+				<!-- 添加模块 -->
+				<view class="border border-dashed border-[#808080] rounded-lg flex justify-center items-center p-2 gap-2 cursor-pointer">
+					<uv-icon name="plus" color="#808080"></uv-icon>
+					<text class="text-[#808080]">Link New Sweekar</text>
+				</view>
+				
+				<!-- GENERAL -->
+				<view class="flex flex-col p-1 gap-3">
+					<!-- title -->
+					<view class="flex gap-1 justify-between">
+						<view class="flex gap-2 items-center">
+							<text class="font-bold">|</text>
+							<text class="text-sm font-bold">GENERAL</text>
+						</view>
+					</view>
+					<!-- 功能模块 -->
+					<view class="flex flex-col border border-round-theme rounded-lg p-4">
+						<view class="flex justify-between">
+							<!-- icon + name -->
+							<view class="flex gap-2">
+								<uv-icon name="account" size="20" bold="true"></uv-icon>
+								<text class="font-bold text-sm"> Account Info</text>
+							</view>
+							
+							<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
+						</view>
+						<uv-divider line-color="#808080" hairline="false"></uv-divider>
+						<view class="flex justify-between">
+							<!-- icon + name -->
+							<view class="flex gap-2">
+								<uv-icon name="setting" size="20" bold="true"></uv-icon>
+								<text class="font-bold text-sm"> App Settings</text>
+							</view>
+							
+							<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
+						</view>
+						<uv-divider line-color="#808080" hairline="false"></uv-divider>
+						<view class="flex justify-between">
+							<!-- icon + name -->
+							<view class="flex gap-2">
+								<uv-icon name="empty-permission" size="20" bold="true"></uv-icon>
+								<text class="font-bold text-sm"> Privacy & Data</text>
+							</view>
+							
+							<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
+						</view>
+						
+						
+					</view>
+					
+				</view>
+				
+				<!-- SUPPORT -->
+				<view class="flex flex-col p-1 gap-3">
+					<!-- title -->
+					<view class="flex gap-1 justify-between">
+						<view class="flex gap-2 items-center">
+							<text class="font-bold">|</text>
+							<text class="text-sm font-bold">SUPPORT</text>
+						</view>
+					</view>
+					<!-- 功能模块 -->
+					<view class="flex flex-col border border-round-theme rounded-lg p-4">
+						<view class="flex justify-between">
+							<!-- icon + name -->
+							<view class="flex gap-2">
+								<uv-icon name="question-circle" size="20" bold="true"></uv-icon>
+								<text class="font-bold text-sm"> Help Center</text>
+							</view>
+							
+							<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
+						</view>
+						<uv-divider line-color="#808080" hairline="false" ></uv-divider>
+						<view class="flex justify-between"  @click="toLoginPage">
+							<!-- icon + name -->
+							<view class="flex gap-2">
+								<uv-icon name="lock" size="20" bold="true"></uv-icon>
+								<text class="font-bold text-sm"> {{ userStore.isLogin ? 'Log Out' : 'Log In' }}</text>
+							</view>
+							
+							<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
+						</view>
+						
+						
+						
+					</view>
+					
+				</view>
+				
+				</view>
+
+				
+			</view>
+		
+		
+		</view>
+
+		<CustomTabBar />
+	</view>
 </template>
 
 <style scoped lang="scss">
-:deep(.u-count-down__text) {
-  color: #ab002d !important;
-  font-size: 13px !important;
-}
+	:deep(.u-count-down__text) {
+		color: #ab002d !important;
+		font-size: 13px !important;
+	}
 
-.navigation {
-  border-bottom: 1px solid #f2f2f2;
-}
+	.navigation {
+		border-bottom: 1px solid #f2f2f2;
+	}
 
-.navi-title-center {
-  left: 50%;
-  transform: translateX(-50%);
-}
+	.navi-title-center {
+		left: 50%;
+		transform: translateX(-50%);
+	}
 
-.line {
-  transition: 0.3s all;
-}
-
-.search {
-  :deep(.u-search) {
-    flex: 1;
-  }
-}
-
-.profile-header {
-  min-height: 200rpx;
-  display: flex;
-  align-items: center;
-}
+	.line {
+		transition: 0.3s all;
+	}
 
+	.search {
+		:deep(.u-search) {
+			flex: 1;
+		}
+	}
 
+	.profile-header {
+		min-height: 200rpx;
+		display: flex;
+		align-items: center;
+	}
 </style>
diff --git a/static/image/head.png b/static/image/head.png
new file mode 100644
index 0000000..388fd53
Binary files /dev/null and b/static/image/head.png differ