special/pages/tabbar/mine/mine.vue

<template>
	<view>
		<u-navbar class="u-navbar-box" title="我的" placeholder bgColor="transparent" left-icon-size="0" />
		<view class="top-box">
			<u-image class="bg-box" width="690rpx" height="270rpx" src="/static/mine/user-center-bg.png" />
			<div class="avatar-name">
				<u-image class="avatar" width="116rpx" bgColor="transparent" height="116rpx"
					src="/static/mine/avatar-def.png" />
				<view class="name">{{user.name}}</view>
			</div>
			<div class="abs-right">
				<u-image bgColor="transparent" width="220rpx" height="258rpx" src="/static/mine/user-center-img.png" />
			</div>
		</view>
		<u-cell-group :border="false" :customStyle="{background: '#fff', margin: '30rpx', borderRadius: '20rpx'}">
			<u-cell icon="setting-fill" title="我的申请" isLink url="/pages/subpack/pages/application/list">
				<template #icon>
					<u-image src="/static/mine/task.png" bgColor="transparent" width="36rpx" height="36rpx" />
				</template>
			</u-cell>
			<u-cell icon="integral-fill" title="个人信息" isLink :border="false" url="/pages/subpack/pages/myInfo/info">
				<template #icon>
					<u-image src="/static/mine/myself.png" bgColor="transparent" width="36rpx" height="36rpx" />
				</template>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const user = ref({
		name: '李大川'
	})
</script>
<style>
	page {
		background-color: #F6F8FD;
	}
</style>
<style lang="scss" scoped>
	:deep(.u-image) {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	:deep(.u-navbar__content__title) {
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}

	.top-box {
		position: relative;
		margin: 30rpx;

		.avatar-name {
			position: absolute;
			top: 77rpx;
			left: 40rpx;
			display: flex;
			align-items: center;

			.name {
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				margin-left: 30rpx;
			}
		}

		.abs-right {
			position: absolute;
			bottom: 20rpx;
			right: 40rpx;
		}

	}
</style>