用户页

components/me-icon/me-icon.css

@@ -1,3 +1,6 @@
+.icon-arrow-right:before {
+  content: "\e90a";
+}
 .icon-info:before {
   content: "\e900";
 }

components/me-top/me-top.vue

@@ -2,7 +2,7 @@
 	<view class="me-top">
     <view class="status-bar" :style="{height: inject('globalData').statusBarH+'px'}"></view>
     <view class="capsule flex-c" :style="{height: inject('globalData').customBarH - inject('globalData').statusBarH+'px'}">
-      <view class="icon-ctr flex-c">
+      <view class="icon-ctr flex-c" v-if="isShowIcon">
         <image class="icon" mode="aspectFill" :src="inject('globalData').appIcon"></image>
       </view>
       <text class="title">{{title}}</text>
@@ -17,6 +17,11 @@ const props = defineProps({
   title: {
     type: String,
     required: true,
+  },
+  isShowIcon: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 });
 </script>

pages.json

@@ -1,5 +1,13 @@
 {
 	"pages": [
+		{
+			"path" : "pages/user/user",
+			"style" :
+			{
+				"navigationBarTitleText" : "我的",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path" : "pages/workbench/workbench",
 			"style" :
@@ -23,13 +31,6 @@
 				"navigationBarTitleText" : "登录",
 				"disableScroll": true
 			}
-		},
-		{
-			"path" : "pages/user/user",
-			"style" :
-			{
-				"navigationBarTitleText" : "我的"
-			}
 		}
 	],
 	"globalStyle": {

pages/index/index.vue

@@ -112,16 +112,11 @@ import MeIcon from "../../components/me-icon/me-icon";
 import MeButton from "../../components/me-button/me-button";
 import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
 import MeTop from "../../components/me-top/me-top.vue";
-const data = reactive({
-  globalData: {},
-})
-onLoad(() => {
-  data.globalData = inject('globalData')
-})
 
 const listMarginTop = computed(() => {
-  return (data.globalData.statusBarH + (data.globalData.customBarH - data.globalData.statusBarH)) * 2
+  return (inject('globalData').statusBarH + (inject('globalData').customBarH - inject('globalData').statusBarH)) * 2
 })
+
 </script>
 
 <style lang="scss" scoped>

pages/user/user.vue

@@ -1,22 +1,131 @@
 <template>
-	<view>
+  <view class="ctr">
-		
+    <view class="fixed-top">
-	</view>
+      <me-top title="我的" :is-show-icon="false"></me-top>
+    </view>
+
+    <me-empty-space :height="listMarginTop"></me-empty-space>
+    <view class="header flex-l">
+      <view class="avatar" :style="{background: 'var(--defaultUserAvatar)'}"></view>
+      <view class="info">
+        <view class="name">刘强西</view>
+        <view class="phone">18628195903</view>
+      </view>
+      <view class="decorate"></view>
+    </view>
+
+    <view class="menus">
+      <view class="item flex-sb" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
+        <view class="icon flex-c">
+          <me-icon type="icon-logout" color="var(--descriptionColor)" size="56rpx"></me-icon>
+        </view>
+        <view class="menu flex-sb">
+          <view class="left flex-l">退出登录</view>
+          <view class="right flex-r">
+            <me-icon type="icon-arrow-right" color="var(--contentBgColor)" size="56rpx"></me-icon>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <me-empty-space height="100"></me-empty-space>
+  </view>
 </template>
 
-<script>
+<script setup>
-	export default {
+import {onLoad, onShow} from '@dcloudio/uni-app'
-		data() {
+import {ref, reactive, computed, watch, inject} from 'vue'
-			return {
+import MeIcon from "../../components/me-icon/me-icon";
-				
+import MeButton from "../../components/me-button/me-button";
-			}
+import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
-		},
+import MeTop from "../../components/me-top/me-top.vue";
-		methods: {
+const listMarginTop = computed(() => {
-			
+  return (inject('globalData').statusBarH + (inject('globalData').customBarH - inject('globalData').statusBarH)) * 2
-		}
+})
-	}
 </script>
 
-<style>
+<style lang="scss" scoped>
-
+.ctr {
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  .fixed-top {
+    position: fixed;
+    top: 0;
+    background-color: var(--pageBgColor);
+    width: 100%;
+  }
+  .header {
+    width: 100%;
+    height: 200rpx;
+    background: var(--containerBgColor);
+    border-radius: 16rpx;
+    padding: 40rpx 32rpx;
+    margin-top: 20rpx;
+    box-sizing: border-box;
+    position: relative;
+    .avatar {
+      width: 120rpx;
+      height: 120rpx;
+      border-radius: 60rpx;
+    }
+    .info {
+      margin-left: 20rpx;
+      width: 482rpx;
+      height: 120rpx;
+      .name,.phone {
+        width: 100%;
+        height: 60rpx;
+        line-height: 60rpx;
+        text-align: left;
+      }
+      .name {
+        font-weight: 500;
+        font-size: 34rpx;
+        color: var(--titleColor);
+      }
+      .phone {
+        font-size: 30rpx;
+        color: var(--summaryColor);
+      }
+    }
+    .decorate {
+      width: 240rpx;
+      height: 200rpx;
+      position: absolute;
+      right: 0;
+      background: url("/static/img/user-bg.png") no-repeat center / 100%;
+      border-radius: 0 16rpx 16rpx 0;
+    }
+  }
+  .menus {
+    margin-top: 32rpx;
+    width: 100%;
+    background: var(--containerBgColor);
+    border-radius: 16rpx;
+    padding: 20rpx;
+    box-sizing: border-box;
+    .item {
+      width: 100%;
+      height: 120rpx;
+      .icon {
+        width: 100rpx;
+        height: 120rpx;
+      }
+      .menu {
+        width: 546rpx;
+        height: 120rpx;
+        .left {
+          width: 266rpx;
+          height: 100%;
+          font-size: 30rpx;
+          color: var(--titleColor);
+        }
+        .right {
+          width: 280rpx;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
 </style>