equipment-rental-mini/pages/menus/menu/menu.vue

<template>
	<view class="mine-area">
		<view class="big-circle"></view>
		<view class="avatar-area z10" >
			<u-avatar :src="src" size="80" shape="circle"></u-avatar>
		</view>
		<view class="menu-area z10">
			<view class="basic-msg">
				<text class="basic-name">{{name}}</text>
				<text class="basic-amount">借用中设备:{{amount}}</text>
			</view>
			<u-list>
				<u-list-item>
					<view class="menu-list" @click="toPersonInfo">
						<i class="iconfont icon-ditu"></i>
						<text>我的信息</text>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="menu-list" @click="toBorrowRecord">
						<i class="iconfont icon-qianbao"></i>
						<text>借用记录</text>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="menu-list">
						<i class="iconfont icon-a-shezhi2"></i>
						<text>故障上报</text>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="menu-list">
						<i class="iconfont icon-baogaoguanli"></i>
						<text>故障处理</text>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="menu-list">
						<i class="iconfont icon-dangewenjian"></i>
						<text>使用指南</text>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="menu-list">
						<i class="iconfont icon-bangzhu"></i>
						<text>关于我们</text>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import cache from '@/utils/storage.js'
	export default {
		data() {
			return {
				src: 'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215735941.jpg',
				name: cache.session.getJSON('nickName'),
				amount:2
			};
		},
		methods:{
			toPersonInfo(){
				uni.navigateTo({
					url:'/pages/menus/mine/mine'
				})
			},
			toBorrowRecord(){
				uni.navigateTo({
					url:'/pages/menus/borrow-record/borrow-record'
				})
			}
		}
	}
</script>

<style lang="scss">
.mine-area{
	background-color: #000;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.big-circle{
	width: 937px;
	height: 937px;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 1;
}
.avatar-area{
	position: absolute;
	top: 25%;
	left: 20%;
	transform: translateY(-50%);
}
.z10{
	z-index: 10;
}
.menu-area{
	height: 65%;
	width: 100%;
	position: absolute;
	bottom: 0;
	padding: 0 100rpx;
	box-sizing: border-box;
}
.menu-list{
	display: flex;
	align-items: center;
	font-size: 30rpx;
	padding: 20rpx 0 ;
	.iconfont{
		font-size: 38rpx;
		padding-right: 20rpx;
	}
}
.basic-msg{
	display: flex;
	margin-bottom: 40rpx;
	flex-direction: column;
	.basic-name{
		font-size: 32rpx;
		line-height: 150%;
	}
	.basic-amount{
		color: rgba(128, 128, 128, 1);
		font-size: 26rpx;
		line-height: 150%;
	}
}
</style>