Jingde-town-wechat-uniapp/pages/index/center.vue

<template>
	<view class="page">

		<navbar title="个人中心" />

		<view class="head">
			<view class="headImage">
				<image src="" mode=""></image>
			</view>
			<view class="info">
				<view class="name">
					微信用户
				</view>
				<view class="tips">
					加入时间：2024-03-03
				</view>
			</view>
			<view class="setting">
				<!-- <uv-icon name="setting" size="40rpx"></uv-icon> -->
			</view>
		</view>

		<view class="line">
			<uv-cell-group>
				
				<!-- 我的收藏 -->
				<uv-cell icon="setting-fill" title="我的收藏"
				isLink>
					<template #icon>
						<image src="/static/image/center/1.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
				
				<!-- 我的预约 -->
				<uv-cell icon="setting-fill" title="我的预约"
				isLink>
					<template #icon>
						<image src="/static/image/center/2.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
				
				<!-- 我的订单 -->
				<uv-cell icon="setting-fill" title="我的订单"
				@click="$utils.navigateTo('/pages_order/order/order')"
				isLink>
					<template #icon>
						<image src="/static/image/center/3.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
				
				<!-- 我的地址 -->
				<uv-cell icon="setting-fill" title="我的地址"
				@click="$utils.navigateTo('/pages_order/mine/address')"
				isLink>
					<template #icon>
						<image src="/static/image/center/1.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
				
				<!-- 加入志愿者 -->
				<uv-cell icon="setting-fill" title="加入志愿者"
				isLink>
					<template #icon>
						<image src="/static/image/center/4.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>


		<tabber select="2" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	export default {
		components: {
			tabber,
		},
		computed: {
		},
		data() {
			return {
				show: false,
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 200rpx;
		min-height: 100vh;
		background-color: #FFFDF6;
		.line{
			margin: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			overflow: hidden;
			box-shadow: 0 0 10rpx 10rpx #00000007;
			.uv-cell-icon{
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
			/deep/ .uv-cell__body{
				padding: 40rpx 30rpx;
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}

	.head {
		display: flex;
		background-color: $uni-color;
		padding: 60rpx 40rpx;
		align-items: center;
		position: relative;
		color: #fff;
		.headImage {
			width: 120rpx;
			height: 120rpx;
			background-image: url(/static/image/center/3.png);
			background-size: 100% 100%;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 40rpx;
		}

		.info {
			font-size: 28rpx;

			.name {
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}

			.tips {
				font-size: 26rpx;
			}
		}

		.setting {
			position: absolute;
			right: 50rpx;
			top: 50rpx;
		}
	}

	
</style>