From 5fc3a45361b72ddc13a8f5b9d96dcf9ea9bcf936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LAPTOP-D7TKRI82=5C=E9=82=93?= <52643018@qq.com>
Date: Tue, 22 Jun 2021 11:49:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/styles/common.css |   4 ++
 pages/center/index.vue   | 129 ++++++++++++++++++++++++++++-----------
 2 files changed, 98 insertions(+), 35 deletions(-)

diff --git a/common/styles/common.css b/common/styles/common.css
index 534f5db..a68d65d 100644
--- a/common/styles/common.css
+++ b/common/styles/common.css
@@ -125,6 +125,10 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
 	flex-wrap: wrap;
 }
 
+.lf-text-vertical{
+	vertical-align: middle;
+}
+
 .lf-line-1{
 	overflow: hidden;
 	white-space: nowrap;
diff --git a/pages/center/index.vue b/pages/center/index.vue
index 88ee79b..e2d0f22 100644
--- a/pages/center/index.vue
+++ b/pages/center/index.vue
@@ -1,13 +1,61 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">
-				uView - 多平台快速开发的UI框架
-			</text>
+	<view>
+		<view class="lf-flex head">
+			<image class="user-img"></image>
+			<view class="user-info">
+				<view class="lf-font-40 lf-font-bold" style="width: 500rpx;">时空网的忠实网友</view>
+				<view class="lf-m-t-20 lf-font-28">
+					<text>ID 78873</text>
+					<text class="lf-m-l-30">135****7547</text>
+				</view>
+			</view>
 		</view>
-		<view class="link-demo">
-			<u-link :color="$u.color['primary']" :under-line="true" href="http://www.uviewui.com">Link超链接组件演示</u-link>
+		<view class="list">
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">我的收藏</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">联系客服</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">意见反馈</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">常见问题</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">退出登录</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -16,7 +64,7 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				
 			}
 		},
 		onLoad() {
@@ -28,35 +76,46 @@
 	}
 </script>
 
-<style lang="scss" scoped>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 40rpx;
-	}
-	
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 100rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
+<style>
+	page{
+		overflow-x: hidden;
+		background-color: #f5f5f5;
 	}
-
-	.text-area {
+</style>
+<style lang="scss" scoped>
+	.head{
+		height: max-content;
+		width: 750rpx;
+		background-color: #FFFFFF;
+		padding: 30rpx 32rpx;
+		box-sizing: border-box;
 		display: flex;
-		justify-content: center;
-	}
-	
-	.title {
-		font-size: 28rpx;
-		color: $u-content-color;
+		.user-img{
+			width: 150rpx;
+			height: 150rpx;
+			border-radius: 50%;
+			background-color: #EEEEEE;
+			margin-right: 20rpx;
+		}
+		.user-info{
+			flex: auto;
+			height: max-content;
+		}
 	}
 	
-	.link-demo {
-		margin-top: 80rpx;
+	.list{
+		margin-top: 20rpx;
+		padding: 0 32rpx;
+		background-color: #FFFFFF;
+		width: 100%;
+		height: auto;
+		.list-item{
+			border-bottom: 1rpx solid #EEEEEE;
+			height: 110rpx;
+			box-sizing: border-box;
+			&:last-child{
+				border-bottom: none;
+			}
+		}
 	}
 </style>