diff --git a/miniprogram/custom-tab-bar/index.wxml b/miniprogram/custom-tab-bar/index.wxml
index 9c68b12..5b90542 100644
--- a/miniprogram/custom-tab-bar/index.wxml
+++ b/miniprogram/custom-tab-bar/index.wxml
@@ -2,7 +2,9 @@
 <view class="tab-bar">
 
     <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
-        <view wx:if="{{index==0}}" >
+        <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
+            <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
+        <!-- <view wx:if="{{index==0}}" >
             <image wx:if="{{index!=selected}}"  src="{{item.iconPath}}"></image>
             <image wx:else class="bigicon" src="{{item.selectedIconPath}}"></image>
             <view wx:if="{{index!=selected}}" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
@@ -10,6 +12,6 @@
         <view wx:else>
             <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
             <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
-        </view>
+        </view> -->
     </view>
 </view>
\ No newline at end of file
diff --git a/miniprogram/images/my/my01.png b/miniprogram/images/my/my01.png
new file mode 100644
index 0000000..8ce7fde
Binary files /dev/null and b/miniprogram/images/my/my01.png differ
diff --git a/miniprogram/images/my/my02.png b/miniprogram/images/my/my02.png
new file mode 100644
index 0000000..3f3cdb5
Binary files /dev/null and b/miniprogram/images/my/my02.png differ
diff --git a/miniprogram/pages/message/message.js b/miniprogram/pages/message/message.js
index 857b3a4..c7f0c18 100644
--- a/miniprogram/pages/message/message.js
+++ b/miniprogram/pages/message/message.js
@@ -1,21 +1,15 @@
-// pages/message/message.js
+// pages/redGrider/redGrider.js
+const app = getApp()
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-
+        statusHeight: app.globalData.deviceInfo.statusHeight, // 自定义头部状态栏高度
+        navigationHeight: app.globalData.deviceInfo.navigationHeight,
     },
-    getInstance() {
-        if (typeof this.getTabBar === 'function' ) {
-          this.getTabBar((tabBar) => {
-            tabBar.setData({
-              selected: 1
-            })
-          })
-        }
-      },
+    
     /**
      * 生命周期函数--监听页面加载
      */
@@ -70,5 +64,12 @@ Page({
      */
     onShareAppMessage() {
 
-    }
+    },
+    back() {
+        console.log("dddddddddd")
+        //返回上一级，关闭当前页面
+        wx.navigateBack({
+            delta: 1
+        })
+    },
 })
\ No newline at end of file
diff --git a/miniprogram/pages/message/message.json b/miniprogram/pages/message/message.json
index 3928faa..f5e4efe 100644
--- a/miniprogram/pages/message/message.json
+++ b/miniprogram/pages/message/message.json
@@ -1,3 +1,8 @@
 {
-    "usingComponents": {}
-}
\ No newline at end of file
+    "navigationBarTitleText": "我的",
+    "navigationStyle": "custom",
+    "navigationBarTextStyle": "white",
+    "enablePullDownRefresh": true,
+    "backgroundColor": "#f8f8f8",
+    "backgroundTextStyle": "dark"
+  }
\ No newline at end of file
diff --git a/miniprogram/pages/message/message.wxml b/miniprogram/pages/message/message.wxml
index 324a389..5c19bc7 100644
--- a/miniprogram/pages/message/message.wxml
+++ b/miniprogram/pages/message/message.wxml
@@ -1,2 +1,32 @@
-<!--pages/message/message.wxml-->
-<text>pages/message/message.wxml</text>
+<view class="header">
+    <image src="../../images/back.png" class="back" style=" top: {{statusHeight}}px;" bindtap="back"></image>
+    <image class="header-bg" src="../../images/bg.png" mode="widthFix" />
+    <view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;">
+        我的
+    </view>
+</view>
+<view class="flex">
+    <view class="touxiang">
+        <image></image>
+    </view>
+    <view class="touxiang_text">alddd</view>
+</view>
+<view class="grid2outer">
+    <navigator url="" class="grid2 blue">
+        <view>
+            <view class="h1">个人信息</view>
+            <view class="h2">编辑信息内容</view>
+        </view>
+        <image src="../../images/my/my01.png" />
+    </navigator>
+    <view class="w40"></view>
+    <navigator url="" class="grid2 red">
+        <view>
+            <view class="h1">退出登录</view>
+            <view class="h2">点击退出页面</view>
+        </view>
+        <image src="../../images/my/my02.png" />
+    </navigator>
+
+
+</view>
\ No newline at end of file
diff --git a/miniprogram/pages/message/message.wxss b/miniprogram/pages/message/message.wxss
index 2251458..5c68be5 100644
--- a/miniprogram/pages/message/message.wxss
+++ b/miniprogram/pages/message/message.wxss
@@ -1 +1,261 @@
-/* pages/message/message.wxss */
\ No newline at end of file
+page {
+    width: 100%;
+    height: auto;
+    overflow-y: auto;
+    background: #f7f7f7;
+    font-family: PingFang SC;
+    background: linear-gradient(180deg, #E82C19 0%, #F7F7F9 50%);
+}
+
+.header {
+    width: 100%;
+    height: 150rpx;
+    /* position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000; */
+}
+
+.header .header-bg {
+    width: 100%;
+    height: 100%;
+    /* position: absolute;
+    z-index: 10;
+    left: 0;
+    top: 0; */
+    position: absolute;
+    height: 100%;
+    z-index: -999;
+}
+
+.header .navigation {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color:#fff;
+    font-size: 32rpx;
+    position: relative;
+    z-index: 1;
+}
+
+.w20 {
+    width: 38rpx;
+}
+
+.flex1 {
+    flex: 1;
+}
+
+.mtf80 {
+    margin-top: -80rpx;
+}
+
+.back {
+    width: 20rpx;
+    height: 20rpx;
+    margin-left: 20rpx;
+    position: absolute;
+    margin-top: 20rpx;
+    border-radius: 0rpx;
+    z-index: 2;
+}
+
+.list {
+    padding: 20rpx 35rpx;
+
+}
+
+.list .item {
+    padding: 50rpx 40rpx;
+
+    display: flex;
+    background-color: #fff;
+    border-radius: 10rpx;
+    margin-bottom: 20rpx;
+}
+
+.vcenter {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.list .item .icon {
+    width: 70rpx;
+    height: 70rpx;
+    margin-right: 20rpx;
+    border-radius: 0rpx;
+}
+
+.list .item .go {
+    width: 38rpx;
+    height: 38rpx;
+    margin-right: 20rpx;
+    border-radius: 0rpx;
+}
+
+.list .item .h1 {
+    font-size: 36rpx;
+
+    line-height: 1rem;
+    margin-bottom: 20rpx;
+}
+
+.list .item .h2 {
+    font-size: 28rpx;
+
+    line-height: 1rem;
+}
+
+.list .item .h2 .time {
+    float: right;
+}
+
+.color01 {
+    border-image: linear-gradient(124deg, #FFFFFF, #FFFFFF) 10 10;
+    background: linear-gradient(82deg, #FFFFFF 0%, #000000 0%, #F2FFFB 0%, #E5FFF9 100%);
+    color: #224D3F;
+}
+
+.color02 {
+    border-image: linear-gradient(124deg, #FFFFFF, #FFFFFF) 10 10;
+    background: linear-gradient(82deg, #F2FFFB 0%, #FFFFFF 0%, #F2FAFD 0%, #E5F6FF 100%);
+    box-shadow: 0px 4px 12px 0px rgba(202, 202, 202, 0.24);
+    color: #3B5B8C;
+}
+
+.color03 {
+    border-image: linear-gradient(146deg, #FFFFFF, #FFFFFF) 10 10;
+    background: linear-gradient(82deg, #F8FAFF 0%, #F9FFFD 0%, #F6FDFF 0%, #EBFAFF 100%);
+    box-shadow: 0px 4px 12px 0px rgba(202, 202, 202, 0.24);
+    color: #117589;
+}
+
+.color04 {
+    border-image: linear-gradient(146deg, #FFFFFF, #FFFFFF) 10 10;
+    background: linear-gradient(82deg, #FEFEF2 0%, #F2FAFD 0%, #FFFEFA 0%, #FEF8E8 100%);
+    box-shadow: 0px 6px 16px 0px rgba(202, 202, 202, 0.42);
+    color: #A96C35;
+}
+
+.color05 {
+    background: linear-gradient(82deg, #FEF2F3 0%, #FFFCFB 0%, #F8F4FF 0%, #EFE4FF 100%);
+    box-shadow: 0px 6px 16px 0px rgba(202, 202, 202, 0.4);
+    color: #856AAD;
+}
+
+.color06 {
+    background: linear-gradient(82deg, #E6EEFF 0%, #FAFCFF 0%, #EDF3FF 0%, #D8E5FF 100%);
+    box-shadow: 0px 6px 16px 0px rgba(202, 202, 202, 0.4);
+    color: #5374B2;
+}
+
+.color01 .h2 {
+    color: #6A8079;
+}
+
+.color02 .h2 {
+    color: #5E89B3;
+}
+
+.color03 .h2 {
+    color: #488D9A;
+}
+
+.color04 .h2 {
+    color: #B98A60;
+}
+
+.color05 .h2 {
+    color: #9484AC;
+}
+
+.color06 .h2 {
+    color: #6D89BF;
+}
+
+.grid2outer {
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx;
+
+}
+.flex {
+    display: flex;
+  
+    margin: 30rpx;
+
+}
+.touxiang image{
+    width: 110rpx;
+    height: 110rpx;
+    background-color: #fff;
+    border-radius: 100%;
+}
+.touxiang_text
+{
+  
+font-size: 36rpx;
+line-height: 110rpx;
+margin-left: 10rpx;
+font-weight: bold;
+color: #FFFFFF;
+}
+.grid2 {
+    flex: 1;
+    background: linear-gradient(90deg, #F5F9FE 0%, #FBFDFF 100%);
+    border-radius: 16rpx;
+    display: flex;
+    padding:15rpx 30rpx;
+    margin: 20rpx 0rpx 0rpx;
+    justify-content:space-between;
+}
+
+
+.grid2 .h1 {
+    font-size: 32rpx;
+    font-weight: bold;
+    line-height: 36rpx;
+    margin-top: 15rpx;
+}
+
+.grid2 .h2 {
+    height: 23rpx;
+    font-size: 24rpx;
+    line-height: 36rpx;
+}
+
+.grid2 image {
+    width:100rpx;
+    height: 100rpx;
+   
+}
+
+.blue {
+    background: linear-gradient(270deg, #E6F6F8 0%, #FFFFFF 100%);
+}
+
+.blue .h1 {
+    color: #4F9E97;
+}
+
+.blue .h2 {
+    color: #83B3AF;
+}
+
+.red {
+    background: linear-gradient(270deg, #FDF5F3 0%, #FFFFFF 100%);
+}
+
+.red .h1 {
+    color: #C29266;
+}
+
+.red .h2 {
+    color: #CEAA89;
+}
+
+.w40 {
+    width: 20rpx;
+}
\ No newline at end of file
diff --git a/miniprogram/pages/my/my.js b/miniprogram/pages/my/my.js
index 640e730..c7f0c18 100644
--- a/miniprogram/pages/my/my.js
+++ b/miniprogram/pages/my/my.js
@@ -1,13 +1,15 @@
-// pages/my/my.js
+// pages/redGrider/redGrider.js
+const app = getApp()
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-
+        statusHeight: app.globalData.deviceInfo.statusHeight, // 自定义头部状态栏高度
+        navigationHeight: app.globalData.deviceInfo.navigationHeight,
     },
-
+    
     /**
      * 生命周期函数--监听页面加载
      */
@@ -62,5 +64,12 @@ Page({
      */
     onShareAppMessage() {
 
-    }
+    },
+    back() {
+        console.log("dddddddddd")
+        //返回上一级，关闭当前页面
+        wx.navigateBack({
+            delta: 1
+        })
+    },
 })
\ No newline at end of file
diff --git a/miniprogram/pages/my/my.json b/miniprogram/pages/my/my.json
index 3928faa..f5e4efe 100644
--- a/miniprogram/pages/my/my.json
+++ b/miniprogram/pages/my/my.json
@@ -1,3 +1,8 @@
 {
-    "usingComponents": {}
-}
\ No newline at end of file
+    "navigationBarTitleText": "我的",
+    "navigationStyle": "custom",
+    "navigationBarTextStyle": "white",
+    "enablePullDownRefresh": true,
+    "backgroundColor": "#f8f8f8",
+    "backgroundTextStyle": "dark"
+  }
\ No newline at end of file
diff --git a/miniprogram/pages/my/my.wxml b/miniprogram/pages/my/my.wxml
index 2447d83..5c19bc7 100644
--- a/miniprogram/pages/my/my.wxml
+++ b/miniprogram/pages/my/my.wxml
@@ -1,2 +1,32 @@
-<!--pages/my/my.wxml-->
-<text>pages/my/my.wxml</text>
+<view class="header">
+    <image src="../../images/back.png" class="back" style=" top: {{statusHeight}}px;" bindtap="back"></image>
+    <image class="header-bg" src="../../images/bg.png" mode="widthFix" />
+    <view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;">
+        我的
+    </view>
+</view>
+<view class="flex">
+    <view class="touxiang">
+        <image></image>
+    </view>
+    <view class="touxiang_text">alddd</view>
+</view>
+<view class="grid2outer">
+    <navigator url="" class="grid2 blue">
+        <view>
+            <view class="h1">个人信息</view>
+            <view class="h2">编辑信息内容</view>
+        </view>
+        <image src="../../images/my/my01.png" />
+    </navigator>
+    <view class="w40"></view>
+    <navigator url="" class="grid2 red">
+        <view>
+            <view class="h1">退出登录</view>
+            <view class="h2">点击退出页面</view>
+        </view>
+        <image src="../../images/my/my02.png" />
+    </navigator>
+
+
+</view>
\ No newline at end of file
diff --git a/miniprogram/pages/my/my.wxss b/miniprogram/pages/my/my.wxss
index 1c3fe88..5c68be5 100644
--- a/miniprogram/pages/my/my.wxss
+++ b/miniprogram/pages/my/my.wxss
@@ -1 +1,261 @@
-/* pages/my/my.wxss */
\ No newline at end of file
+page {
+    width: 100%;
+    height: auto;
+    overflow-y: auto;
+    background: #f7f7f7;
+    font-family: PingFang SC;
+    background: linear-gradient(180deg, #E82C19 0%, #F7F7F9 50%);
+}
+
+.header {
+    width: 100%;
+    height: 150rpx;
+    /* position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000; */
+}
+
+.header .header-bg {
+    width: 100%;
+    height: 100%;
+    /* position: absolute;
+    z-index: 10;
+    left: 0;
+    top: 0; */
+    position: absolute;
+    height: 100%;
+    z-index: -999;
+}
+
+.header .navigation {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color:#fff;
+    font-size: 32rpx;
+    position: relative;
+    z-index: 1;
+}
+
+.w20 {
+    width: 38rpx;
+}
+
+.flex1 {
+    flex: 1;
+}
+
+.mtf80 {
+    margin-top: -80rpx;
+}
+
+.back {
+    width: 20rpx;
+    height: 20rpx;
+    margin-left: 20rpx;
+    position: absolute;
+    margin-top: 20rpx;
+    border-radius: 0rpx;
+    z-index: 2;
+}
+
+.list {
+    padding: 20rpx 35rpx;
+
+}
+
+.list .item {
+    padding: 50rpx 40rpx;
+
+    display: flex;
+    background-color: #fff;
+    border-radius: 10rpx;
+    margin-bottom: 20rpx;
+}
+
+.vcenter {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.list .item .icon {
+    width: 70rpx;
+    height: 70rpx;
+    margin-right: 20rpx;
+    border-radius: 0rpx;
+}
+
+.list .item .go {
+    width: 38rpx;
+    height: 38rpx;
+    margin-right: 20rpx;
+    border-radius: 0rpx;
+}
+
+.list .item .h1 {
+    font-size: 36rpx;
+
+    line-height: 1rem;
+    margin-bottom: 20rpx;
+}
+
+.list .item .h2 {
+    font-size: 28rpx;
+
+    line-height: 1rem;
+}
+
+.list .item .h2 .time {
+    float: right;
+}
+
+.color01 {
+    border-image: linear-gradient(124deg, #FFFFFF, #FFFFFF) 10 10;
+    background: linear-gradient(82deg, #FFFFFF 0%, #000000 0%, #F2FFFB 0%, #E5FFF9 100%);
+    color: #224D3F;
+}
+
+.color02 {
+    border-image: linear-gradient(124deg, #FFFFFF, #FFFFFF) 10 10;
+    background: linear-gradient(82deg, #F2FFFB 0%, #FFFFFF 0%, #F2FAFD 0%, #E5F6FF 100%);
+    box-shadow: 0px 4px 12px 0px rgba(202, 202, 202, 0.24);
+    color: #3B5B8C;
+}
+
+.color03 {
+    border-image: linear-gradient(146deg, #FFFFFF, #FFFFFF) 10 10;
+    background: linear-gradient(82deg, #F8FAFF 0%, #F9FFFD 0%, #F6FDFF 0%, #EBFAFF 100%);
+    box-shadow: 0px 4px 12px 0px rgba(202, 202, 202, 0.24);
+    color: #117589;
+}
+
+.color04 {
+    border-image: linear-gradient(146deg, #FFFFFF, #FFFFFF) 10 10;
+    background: linear-gradient(82deg, #FEFEF2 0%, #F2FAFD 0%, #FFFEFA 0%, #FEF8E8 100%);
+    box-shadow: 0px 6px 16px 0px rgba(202, 202, 202, 0.42);
+    color: #A96C35;
+}
+
+.color05 {
+    background: linear-gradient(82deg, #FEF2F3 0%, #FFFCFB 0%, #F8F4FF 0%, #EFE4FF 100%);
+    box-shadow: 0px 6px 16px 0px rgba(202, 202, 202, 0.4);
+    color: #856AAD;
+}
+
+.color06 {
+    background: linear-gradient(82deg, #E6EEFF 0%, #FAFCFF 0%, #EDF3FF 0%, #D8E5FF 100%);
+    box-shadow: 0px 6px 16px 0px rgba(202, 202, 202, 0.4);
+    color: #5374B2;
+}
+
+.color01 .h2 {
+    color: #6A8079;
+}
+
+.color02 .h2 {
+    color: #5E89B3;
+}
+
+.color03 .h2 {
+    color: #488D9A;
+}
+
+.color04 .h2 {
+    color: #B98A60;
+}
+
+.color05 .h2 {
+    color: #9484AC;
+}
+
+.color06 .h2 {
+    color: #6D89BF;
+}
+
+.grid2outer {
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx;
+
+}
+.flex {
+    display: flex;
+  
+    margin: 30rpx;
+
+}
+.touxiang image{
+    width: 110rpx;
+    height: 110rpx;
+    background-color: #fff;
+    border-radius: 100%;
+}
+.touxiang_text
+{
+  
+font-size: 36rpx;
+line-height: 110rpx;
+margin-left: 10rpx;
+font-weight: bold;
+color: #FFFFFF;
+}
+.grid2 {
+    flex: 1;
+    background: linear-gradient(90deg, #F5F9FE 0%, #FBFDFF 100%);
+    border-radius: 16rpx;
+    display: flex;
+    padding:15rpx 30rpx;
+    margin: 20rpx 0rpx 0rpx;
+    justify-content:space-between;
+}
+
+
+.grid2 .h1 {
+    font-size: 32rpx;
+    font-weight: bold;
+    line-height: 36rpx;
+    margin-top: 15rpx;
+}
+
+.grid2 .h2 {
+    height: 23rpx;
+    font-size: 24rpx;
+    line-height: 36rpx;
+}
+
+.grid2 image {
+    width:100rpx;
+    height: 100rpx;
+   
+}
+
+.blue {
+    background: linear-gradient(270deg, #E6F6F8 0%, #FFFFFF 100%);
+}
+
+.blue .h1 {
+    color: #4F9E97;
+}
+
+.blue .h2 {
+    color: #83B3AF;
+}
+
+.red {
+    background: linear-gradient(270deg, #FDF5F3 0%, #FFFFFF 100%);
+}
+
+.red .h1 {
+    color: #C29266;
+}
+
+.red .h2 {
+    color: #CEAA89;
+}
+
+.w40 {
+    width: 20rpx;
+}
\ No newline at end of file