展开我的页面设计

App.vue

@@ -12,8 +12,12 @@
 	}
 </script>
 
-<style lang="scss">
+<style>
 	/*每个页面公共css */
+	@import './static/fonts/iconfont.css';
+</style>
+
+<style lang="scss">
 	// 引入uView UI基础样式
-	@import './uni_modules/vk-uview-ui/index.scss'
+	@import './uni_modules/vk-uview-ui/index.scss';
 </style>

pages.json

@@ -40,9 +40,10 @@
 			{
 				"navigationBarTitleText": "我的",
 				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#8dccff",
 				"app-plus": {
-					"titleNView": false,
-					"autoBackButton": false
+					"autoBackButton": false,
+					"titleNView": true
 				}
 			}
 		},

pages/chat/chat.vue

@@ -132,6 +132,10 @@
 					justify-content: space-between;
 					align-items: center;
 					padding: 30rpx 0;
+					
+					&:active {
+						background-color: $uni-bg-color-hover;
+					}
 					.icon-box {
 						width: 15%;
 						display: flex;

pages/chatDetail/chatDetail.vue

@@ -65,6 +65,9 @@
 				background-color: $uni-text-color-inverse;
 				margin-bottom: 30rpx;
 				border-radius: $uni-card-border-radius;
+				&:active {
+					background-color: $uni-bg-color-hover;
+				}
 				.header-box {
 					display: flex;
 					align-items: center;

pages/personalCenter/personalCenter.vue

@@ -1,6 +1,138 @@
 <template>
 	<view class="container">
-		我的
+		<view class="user-box">
+			<view class="icon-name-box">
+				<view class="icon-box">
+					<cover-image class="icon" :src="`/static/chat-icon/${user.icon}.png`"></cover-image>
+				</view>
+				<view class="name-box">
+					<view class="name" v-if="authority">
+						<view class="text">
+							{{user.username}}
+						</view>
+						<view class="iconfont icon-xiugai"></view>
+					</view>
+					<view class="function" v-else>
+						<view class="function-item">
+							登录
+						</view>/
+						<view class="function-item">
+							注册
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="info-box">
+				<view class="info-item-box">
+					<view class="label">
+						任职机构:
+					</view>
+					<view class="text">
+						{{authority ? user.employment : ''}}
+					</view>
+				</view>
+				<view class="info-item-box">
+					<view class="label">
+						机构备案证号:
+					</view>
+					<view class="text">
+						{{authority ? user.recordCertificateNumber : ''}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="certificate-box">
+			<view class="title-box">
+				我的证明
+			</view>
+			<view class="list-box">
+				<view class="list-item-box" :class="[authority ? 'zhongjie-front-zhiyin' : 'zhongjie-front-login']">
+				</view>
+				<view class="list-item-box" :class="[authority ? 'zhongjie-back-zhiyin' : 'zhongjie-back-login']">
+				</view>
+				<view class="list-item-box" :class="[authority ? 'anjie-back-zhiyin' : 'anjie-back-login']">
+				</view>
+			</view>
+		</view>
+		<view class="menu-box">
+			<view class="menu-item-box">
+				<view class="icon-box">
+					<view class="iconfont icon-qianbi"></view>
+				</view>
+				<view class="content-box">
+					会缴缴交
+				</view>
+				<view class="suffix-box">
+					<view class="iconfont icon-chevron-right"></view>
+				</view>
+			</view>
+			<view class="menu-item-box">
+				<view class="icon-box">
+					<view class="iconfont icon-dingdan"></view>
+				</view>
+				<view class="content-box">
+					我的订单
+				</view>
+				<view class="suffix-box">
+					<view class="iconfont icon-chevron-right"></view>
+				</view>
+			</view>
+			<view class="menu-item-box">
+				<view class="icon-box">
+					<view class="iconfont icon-xiazai"></view>
+				</view>
+				<view class="content-box">
+					视频缓存
+				</view>
+				<view class="suffix-box">
+					<view class="iconfont icon-chevron-right"></view>
+				</view>
+			</view>
+			<view class="menu-item-box">
+				<view class="icon-box">
+					<view class="iconfont icon-shoucang"></view>
+				</view>
+				<view class="content-box">
+					我的收藏
+				</view>
+				<view class="suffix-box">
+					<view class="iconfont icon-chevron-right"></view>
+				</view>
+			</view>
+			<view class="menu-item-box">
+				<view class="icon-box">
+					<view class="iconfont icon-anquan"></view>
+				</view>
+				<view class="content-box">
+					常见问题
+				</view>
+				<view class="suffix-box">
+					<view class="iconfont icon-chevron-right"></view>
+				</view>
+			</view>
+			<view class="menu-item-box">
+				<view class="icon-box">
+					<view class="iconfont icon-yonghuzu"></view>
+				</view>
+				<view class="content-box">
+					联系我们
+				</view>
+				<view class="suffix-box">
+					<view class="iconfont icon-chevron-right"></view>
+				</view>
+			</view>
+			<view class="menu-item-box">
+				<view class="icon-box">
+					<view class="iconfont icon-shezhi"></view>
+				</view>
+				<view class="content-box">
+					退出/切换账号
+				</view>
+				<view class="suffix-box">
+					<view class="iconfont icon-chevron-right"></view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,15 +140,178 @@
 	import { ref } from 'vue'
 	import { onLoad } from '@dcloudio/uni-app'
 	
+	const user = ref({
+		icon: 'jiaoyu',
+		username: '某某某',
+		employment: '广州市xx地产有限公司',
+		recordCertificateNumber: '123xxxx'
+	})
+	
+	const authority = ref('')
 	onLoad(() => {
+		// authority.value = uni.getStorageSync('authority')
 	})
 </script>
 
 <style lang="scss" scoped>
+	$certificate-width: 220rpx;
+	$certificate-height: 300rpx;
 	.container {
 		height: 100vh;
 		width: 100vw;
-		background-color: $uni-bg-color;
 		padding: 0 20rpx;
+		background: rgb(141, 204, 255);
+		background: -moz-linear-gradient(   90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
+		background: -webkit-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
+		background: -o-linear-gradient(     90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
+		background: -ms-linear-gradient(    90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
+		background: linear-gradient(       180deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
+		
+		.user-box { 
+			padding: 0 40rpx;
+			.icon-name-box {
+				display: flex;
+				align-items: center;
+				gap: 30rpx;
+				margin-bottom: 15rpx;
+				.icon-box {
+					width: 90rpx;
+					height: 90rpx;
+					background-color: #fff;
+					border-radius: 50%;
+					overflow: hidden;
+					-webkit-box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(168, 221, 239, 0.75);
+					-moz-box-shadow:    0rpx 0rpx 10rpx 0rpx rgba(168, 221, 239, 0.75);
+					box-shadow:         0rpx 0rpx 10rpx 0rpx rgba(168, 221, 239, 0.75);
+					.icon {
+						height: 100%;
+						width: 100%;
+						object-fit: cover;
+					}
+				}
+				.name-box {
+					font-size: $uni-title-font-size-1;
+					letter-spacing: 5rpx;
+					
+					.name {
+						display: flex;
+						gap: 5rpx;
+						.iconfont {
+							font-size: $uni-font-size-3;
+						}
+					}
+					.function {
+						display: flex;
+						gap: 5rpx;
+					}
+				}
+			}
+			.info-box {
+				.info-item-box {
+					display: flex;
+					align-items: center;
+					gap: 10rpx;
+					margin-bottom: 10rpx;
+					font-size: $uni-font-size-1;
+					font-weight: bold;
+					letter-spacing: 3rpx;
+				}
+			}
+		}
+		
+		.certificate-box {
+			padding: 0 20rpx;
+			margin-top: 20rpx;
+			.title-box {
+				font-size: $uni-title-font-size-3;
+				font-weight: bold;
+			}
+			.list-box {
+				padding: 20rpx 50rpx;
+				width: 100%;
+				display: flex;
+				gap: 130rpx;
+				
+				overflow-x: scroll;
+				overflow-y: hidden;
+				white-space:nowrap;
+				
+				.list-item-box {
+					flex-shrink: 0;
+					height: $certificate-height;
+					width: $certificate-width;
+					background-color: #fff;
+					
+					&:nth-child(1) {
+						background-color: #fff;
+					}
+				}
+				
+				.zhengshu-empty {
+					@include backgroundImg('/static/images/zhengshu/zhengshu-empty.png')
+				}
+				.zhongjie-front-login {
+					@include backgroundImg('/static/images/zhengshu/zhongjie-front-login.png')
+				}
+				.zhongjie-front-zhiyin {
+					@include backgroundImg('/static/images/zhengshu/zhongjie-front-zhiyin.png')
+				}
+				.zhongjie-back {
+					@include backgroundImg('/static/images/zhengshu/zhongjie-back.png')
+				}
+				.zhongjie-back-login {
+					@include backgroundImg('/static/images/zhengshu/zhongjie-back-login.png')
+				}
+				.zhongjie-back-zhiyin {
+					@include backgroundImg('/static/images/zhengshu/zhongjie-back-zhiyin.png')
+				}
+				.anjie-back {
+					@include backgroundImg('/static/images/zhengshu/anjie-back.png')
+				}
+				.anjie-back-login {
+					@include backgroundImg('/static/images/zhengshu/anjie-back-login.png')
+				}
+				.anjie-back-zhiyin {
+					@include backgroundImg('/static/images/zhengshu/anjie-back-zhiyin.png')
+				}
+			}
+		}
+		
+		.menu-box {
+			padding: 20rpx 20rpx;
+			margin: 10rpx 0;
+			background-color: #fff;
+			width: 100%;
+			border-radius: $uni-card-border-radius;
+			
+			-webkit-box-shadow: 0px 0px 12rpx 0px rgba(50, 50, 50, 0.25);
+			-moz-box-shadow:    0px 0px 12rpx 0px rgba(50, 50, 50, 0.25);
+			box-shadow:         0px 0px 12rpx 0px rgba(50, 50, 50, 0.25);
+			
+			.menu-item-box {
+				height: 100rpx;
+				font-size: $uni-font-size-1;
+				padding:  10rpx;
+				display: flex;
+				gap: 10rpx;
+				align-items: center;
+				border-radius: $uni-card-border-radius;
+				&:active {
+					background-color: $uni-bg-color-hover;
+				}
+				.icon-box {
+					width: 5%;
+					font-weight: bold;
+				}
+				.content-box {
+					width: 75%;
+					letter-spacing: 3rpx;
+				}
+				.suffix-box {
+					width: 20%;
+					text-align: right;
+				}
+			}
+		}
 	}
 </style>

static/fonts/iconfont.css

@@ -0,0 +1,103 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4808041 */
+  src: url('./static/fonts/iconfont.woff2?t=1736584627279') format('woff2'),
+       url('./static/fonts/iconfont.woff?t=1736584627279') format('woff'),
+       url('./static/fonts/iconfont.ttf?t=1736584627279') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-qianbi:before {
+  content: "\e69d";
+}
+
+.icon-dingdan:before {
+  content: "\e617";
+}
+
+.icon-shezhi:before {
+  content: "\e614";
+}
+
+.icon-xiazai:before {
+  content: "\e64f";
+}
+
+.icon-shoucang:before {
+  content: "\e633";
+}
+
+.icon-anquan:before {
+  content: "\e663";
+}
+
+.icon-yonghuzu:before {
+  content: "\e607";
+}
+
+.icon-xiugai:before {
+  content: "\e63e";
+}
+
+.icon-shijian:before {
+  content: "\e640";
+}
+
+.icon-time:before {
+  content: "\e656";
+}
+
+.icon-chevron-left:before {
+  content: "\e7ee";
+}
+
+.icon-chevron-right:before {
+  content: "\e7ef";
+}
+
+.icon-filter:before {
+  content: "\e805";
+}
+
+.icon-filter-filled:before {
+  content: "\e806";
+}
+
+.icon-menu:before {
+  content: "\e828";
+}
+
+.icon-search:before {
+  content: "\e845";
+}
+
+.icon-comment:before {
+  content: "\e668";
+}
+
+.icon-comment-filling:before {
+  content: "\e689";
+}
+
+.icon-home-fill:before {
+  content: "\e857";
+}
+
+.icon-home:before {
+  content: "\e858";
+}
+
+.icon-user-s:before {
+  content: "\e634";
+}
+
+.icon-user-line:before {
+  content: "\e635";
+}
+

static/fonts/iconfont.json

@@ -0,0 +1,163 @@
+{
+  "id": "4808041",
+  "name": "member_center",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "637499",
+      "name": "钱币",
+      "font_class": "qianbi",
+      "unicode": "e69d",
+      "unicode_decimal": 59037
+    },
+    {
+      "icon_id": "728125",
+      "name": "订单",
+      "font_class": "dingdan",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "1106434",
+      "name": "设置",
+      "font_class": "shezhi",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "4292798",
+      "name": "下载",
+      "font_class": "xiazai",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "6684299",
+      "name": "收藏",
+      "font_class": "shoucang",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "12331644",
+      "name": "安全",
+      "font_class": "anquan",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "41598842",
+      "name": "用户组",
+      "font_class": "yonghuzu",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "11121493",
+      "name": "修改",
+      "font_class": "xiugai",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "37226669",
+      "name": "时间",
+      "font_class": "shijian",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "1272738",
+      "name": "时间",
+      "font_class": "time",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "42800186",
+      "name": "chevron-left",
+      "font_class": "chevron-left",
+      "unicode": "e7ee",
+      "unicode_decimal": 59374
+    },
+    {
+      "icon_id": "42800191",
+      "name": "chevron-right",
+      "font_class": "chevron-right",
+      "unicode": "e7ef",
+      "unicode_decimal": 59375
+    },
+    {
+      "icon_id": "42800304",
+      "name": "filter",
+      "font_class": "filter",
+      "unicode": "e805",
+      "unicode_decimal": 59397
+    },
+    {
+      "icon_id": "42800305",
+      "name": "filter-filled",
+      "font_class": "filter-filled",
+      "unicode": "e806",
+      "unicode_decimal": 59398
+    },
+    {
+      "icon_id": "42800414",
+      "name": "menu",
+      "font_class": "menu",
+      "unicode": "e828",
+      "unicode_decimal": 59432
+    },
+    {
+      "icon_id": "42800502",
+      "name": "search",
+      "font_class": "search",
+      "unicode": "e845",
+      "unicode_decimal": 59461
+    },
+    {
+      "icon_id": "15838447",
+      "name": "comment",
+      "font_class": "comment",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "15838586",
+      "name": "comment-filling",
+      "font_class": "comment-filling",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "34453215",
+      "name": "home-fill",
+      "font_class": "home-fill",
+      "unicode": "e857",
+      "unicode_decimal": 59479
+    },
+    {
+      "icon_id": "34453216",
+      "name": "home",
+      "font_class": "home",
+      "unicode": "e858",
+      "unicode_decimal": 59480
+    },
+    {
+      "icon_id": "6119260",
+      "name": "用户-实色",
+      "font_class": "user-s",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "6119261",
+      "name": "用户",
+      "font_class": "user-line",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    }
+  ]
+}

uni.scss

@@ -33,13 +33,14 @@ $uni-text-color-disable:#c0c0c0;
 /* 背景颜色 */
 $uni-bg-color:#f7f7f7;
 $uni-bg-color-grey:#f8f8f8;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+$uni-bg-color-hover:#f1f1f1; //点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4); //遮罩颜色
 
 /* 边框颜色 */
 $uni-border-color:#c8c7cc;
 
 /* 标题尺寸 */
+$uni-title-font-size-1: 36rpx;
 $uni-title-font-size-2: 26rpx;
 $uni-title-font-size-3: 24rpx;