完成个人中心页面

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;

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>