个人中心页面

components/tm-tabbar/tm-tabbar.vue

@@ -59,7 +59,7 @@
 						text: '我的', 
 						iconPath: '/static/tabbar/my-unselect.png', 
 						selectedIconPath: '/static/tabbar/my-select.png', 
-						pagePath: 'pages/index/index'
+						pagePath: 'pages/home/home'
 					},{
 						text: '日历', 
 						iconPath: '/static/tabbar/calendar-unselect.png', 

pages.json

@@ -30,7 +30,16 @@
 				"enablePullDownRefresh": false
 			}
 		}
-	],
+	    ,{
+            "path" : "pages/home/home",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "个人中心",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "追踪方法学",

pages/home/home.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="home-page">
+		<view class="content-info">
+			<view class="top-box">
+				<image class="bgpic" src="/static/images/个人中心背景.png"></image>
+			</view>
+			<view class="avatar-box">
+				<image class="avatar" src="/static/images/小哥哥.png"></image>
+			</view>
+			<view class="info-box">
+				<text class="">
+					毛之易
+				</text>
+			</view>
+			<view class="function-box">
+				<view class="role-switch">
+					<text class="func-text">角色切换</text>
+					<image class="msgbubble" src="/static/images/消息气泡.png"></image>
+					<image class="icon-more" src="/static/images/icon更多.png"></image>
+					<text class="role">管理员</text>
+				</view>			
+				<view class="sys-setting">
+					<text class="func-text">系统设置</text>
+					<image class="icon-more" src="/static/images/icon更多.png"></image>
+				</view>
+			</view>
+			<view class="bg-box">
+				<view class="logout-box">
+					<text class=""></text>
+				</view>
+			</view>
+		</view>
+		<tm-tabbar :permission="1" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				nowPermission:'',//用户当前第一权限
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="less">
+	.top-box{
+		position: relative;
+		height: 350rpx;
+	}
+	.bgpic{
+		width: 750rpx;
+		height: 350rpx;
+	}
+	.info-box{
+		width: 700rpx;
+		height: 250rpx;
+		border-radius: 15rpx;
+		background-color: #FFFFFF;
+		position: absolute;
+		left: 25rpx;
+		right: 25rpx;
+		top: 226.25rpx;
+		box-shadow: 0px 10px 30px 0px rgba(0, 13, 51, 0.1);
+	}
+	.avatar-box{
+		width: 125rpx;
+		height: 125rpx;
+		position: absolute;
+		right: 75rpx;
+		top: 187.5rpx;
+		background: #FFFFFF;
+		z-index: 2;
+		border-radius:50%
+	}
+	.avatar{
+		width: 112.5rpx;
+		height: 112.5rpx;
+		margin-left: 6.25rpx;
+		margin-top: 6.25rpx;
+		border-radius:50%
+	}
+	.function-box{
+		position: absolute;
+		top: 496.25rpx;
+		width: 750rpx;
+	}
+	.role-switch{
+		height: 100rpx;
+		width: 725rpx;
+		margin-left: 25rpx;
+		background: #FFFFFF;
+		border-bottom: 0.62rpx solid #DADEE6;
+	}
+	.sys-setting{
+		height: 100rpx;
+		width: 725rpx;
+		margin-left: 25rpx;
+		background: #FFFFFF;
+	}
+	.func-text{
+		font-size: 22.5rpx;
+		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+		font-weight: 500;
+		color: #292C33;
+		line-height: 100rpx;
+		float: left;
+	}
+	.icon-more{
+		width: 12.37rpx;
+		height: 21.21rpx;
+		line-height: 100rpx;
+		float: right;
+		margin-top: 39.37rpx;
+		margin-right: 25rpx;
+	}
+	.msgbubble{
+		width: 50rpx;
+		height: 30rpx;
+		background: #FF4060;
+		border-radius: 24px;
+		float: left;
+		margin-top: 35rpx;
+		margin-left: 15rpx;
+	}
+	.bg-box{
+		width: 750rpx;
+		height: 416.25rpx;
+		position: absolute;
+		bottom: 87.5rpx;
+		background-color: #F5F6FA;
+		z-index: -1;
+	}
+	.role{
+		font-size: 22.5rpx;
+		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+		font-weight: 400;
+		color: #7A8599;
+		line-height: 100rpx;
+		float: right;
+		margin-right: 25rpx;
+	}
+</style>