uniapp-shikongwang/pages/center/index.vue

<template>
	<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;">
					<text>时空网的忠实网友</text>
					<text class="user-label">商户</text>
					<text class="user-label">管理员</text>
				</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="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 class="shop-list">
			<view class="lf-row-between lf-m-b-20">
				<view class="lf-font-36 lf-font-bold">商家工具</view>
				<view class="lf-font-28" style="color: #555555;">李大叔家的店</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>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page{
		overflow-x: hidden;
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.head{
		height: max-content;
		width: 750rpx;
		background-color: #FFFFFF;
		padding: 30rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		.user-img{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-color: #EEEEEE;
			margin-right: 20rpx;
		}
		.user-info{
			flex: auto;
			height: max-content;
		}
		.user-label{
			display: inline-block;
			font-size: 24rpx;
			color: #FFFFFF;
			background-color: #1E89FF;
			padding: 4rpx 16rpx;
			border-radius: 30rpx;
			margin-left: 8rpx;
		}
	}
	
	.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;
		}
	}
	
	.shop-list{
		margin-top: 20rpx;
		width: 750rpx;
		height: auto;
		background-color: #FFFFFF;
		padding: 30rpx 32rpx;
		padding-bottom: 0;
		box-sizing: border-box;
	}
</style>