update

mobile-code/src/pages/user/index.vue

@@ -2,16 +2,37 @@
 	<div class="app-content">
 		<div class="user-wrap">
 			<!-- 未登录 -->
-			<template>
-				<div class="no-login-attr">
-					<img src="../../static/images/user/attr-default.png" alt="" mode="widthFix">
+			<template v-if="false">
+				<div class="no-login-attr login-attr-wrap">
+					<img src="../../static/images/user/attr-default.png" alt mode="widthFix" />
 				</div>
 				<div class="button-wrap">
 					<div class="button-com">申请会员</div>
 				</div>
 			</template>
 			<!-- 未登录 -->
-			<template></template>
+			<template v-else>
+				<div class="is-login-attr">
+					<div class="user-wrap-top">
+						<div class="user-blo-left">
+							<div class="user-name">冯宝宝</div>
+							<div class="user-level">
+								<div class="user-level-icon">
+									<img src alt />
+								</div>
+								<div>成长值 280/1000</div>
+							</div>
+						</div>
+						<div class="user-blo-right login-attr-wrap">
+							<img src="../../static/images/user/attr-default.png" alt />
+						</div>
+					</div>
+					<div class="user-wrap-bottom">
+						<div class="level-lint"></div>
+						<div>ID 13927762</div>
+					</div>
+				</div>
+			</template>
 		</div>
 		<div class="surplus-wrap">
 			<div class="surplus-left">
@@ -88,54 +109,95 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.user-wrap {
-	height: 220px;
-	background-image: url('../../static/images/user/bg.png');
-	background-repeat: no-repeat;
-	background-size: 100% 100%;
-	padding-top: 42px;
-	.no-login-attr {
-		width: 90px;
-		height: 90px;
-		margin: 0 auto;
-		margin-bottom: 12px;
-	}
-	.button-wrap {
-		@include direction(center, center);
+	.user-wrap {
+		height: 220px;
+		background-image: url('../../static/images/user/bg.png');
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		padding-top: 42px;
+		color: #f5e5e5;
+		.login-attr-wrap {
+			width: 90px;
+			height: 90px;
+		}
+		.no-login-attr {
+			margin: 0 auto;
+			margin-bottom: 12px;
+		}
+		.is-login-attr {
+			padding: 0 20px 0 48px;
+			.user-wrap-top {
+				@include direction(center, space-between);
+				.user-name {
+					font-size: 36px;
+					font-weight: 500;
+					margin-bottom: 16px;
+					color: #fff;
+				}
+				.user-level {
+					@include direction(center, center);
+				}
+				.user-blo-right {
+					margin-right: 30px;
+				}
+			}
+			.user-wrap-bottom {
+				.level-lint {
+					border-bottom: 4px solid $mainColor;
+					border-radius: 4px;
+					margin-top: 20px;
+					margin-bottom: 10px;
+					position: relative;
+					&::before {
+						position: absolute;
+						top: 0;
+						left: 0;
+						display: inline-block;
+						content: '';
+						background-color: #FFE4BD;
+						width: 200px;
+						height: 4px;
+						border-radius: 4px;
+					}
+				}
+			}
+		}
+		.button-wrap {
+			@include direction(center, center);
+		}
 	}
-}
-.surplus-wrap {
-	@include direction(flex-end, space-between);
-	padding: 10px 50px 34px;
-	background-color: #fff;
-	.surplus-left {
-		color: $fontColor3;
-		.my-surplus {
-			font-size: 46px;
-			margin-top: 14px;
-			color: #333;
-			font-weight: bold;
+	.surplus-wrap {
+		@include direction(flex-end, space-between);
+		padding: 10px 50px 34px;
+		background-color: #fff;
+		.surplus-left {
+			color: $fontColor3;
+			.my-surplus {
+				font-size: 46px;
+				margin-top: 14px;
+				color: #333;
+				font-weight: bold;
+			}
+		}
+		.surplus-right {
+			margin-bottom: 10px;
+			.button-com {
+				margin-left: 20px;
+			}
 		}
 	}
-	.surplus-right {
-		margin-bottom: 10px;
-		.button-com {
-			margin-left: 20px;
+	.list-content {
+		margin-bottom: 20px;
+		// padding: 0 20px;
+		background-color: #fff;
+		.tui-list-cell {
+			padding-left: 50px;
+			padding-right: 50px;
 		}
 	}
-}
-.list-content {
-	margin-bottom: 20px;
-	// padding: 0 20px;
-	background-color: #fff;
-	.tui-list-cell {
-		padding-left: 50px;
-		padding-right: 50px;
+	img {
+		width: 100%;
+		height: 100%;
+		display: inline-block;
 	}
-}
-img {
-	width: 100%;
-	height: 100%;
-	display: inline-block;
-}
 </style>