Web_TracerMethodology/pages/home/home.vue

<template>
	<view class="home-page">
		<view class="content-info">
			<view class="top-box">
				<image class="bgpic" src="/static/images/个人中心背景.png"></image>
			</view>
			<view class="avatar-box">
				<image class="avatar" src="/static/images/小哥哥.png"></image>
			</view>
			<view class="info-box">
				<text class="">
					毛之易
				</text>
			</view>
			<view class="function-box">
				<view class="role-switch">
					<text class="func-text">角色切换</text>
					<image class="msgbubble" src="/static/images/消息气泡.png"></image>
					<image class="icon-more" src="/static/images/icon更多.png"></image>
					<text class="role">管理员</text>
				</view>			
				<view class="sys-setting">
					<text class="func-text">系统设置</text>
					<image class="icon-more" src="/static/images/icon更多.png"></image>
				</view>
			</view>
			<view class="bg-box">
				<view class="logout-box">
					<text class=""></text>
				</view>
			</view>
		</view>
		<tm-tabbar :permission="1" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowPermission:'',//用户当前第一权限
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	.top-box{
		position: relative;
		height: 350rpx;
	}
	.bgpic{
		width: 750rpx;
		height: 350rpx;
	}
	.info-box{
		width: 700rpx;
		height: 250rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		position: absolute;
		left: 25rpx;
		right: 25rpx;
		top: 226.25rpx;
		box-shadow: 0px 10px 30px 0px rgba(0, 13, 51, 0.1);
	}
	.avatar-box{
		width: 125rpx;
		height: 125rpx;
		position: absolute;
		right: 75rpx;
		top: 187.5rpx;
		background: #FFFFFF;
		z-index: 2;
		border-radius:50%
	}
	.avatar{
		width: 112.5rpx;
		height: 112.5rpx;
		margin-left: 6.25rpx;
		margin-top: 6.25rpx;
		border-radius:50%
	}
	.function-box{
		position: absolute;
		top: 496.25rpx;
		width: 750rpx;
	}
	.role-switch{
		height: 100rpx;
		width: 725rpx;
		margin-left: 25rpx;
		background: #FFFFFF;
		border-bottom: 0.62rpx solid #DADEE6;
	}
	.sys-setting{
		height: 100rpx;
		width: 725rpx;
		margin-left: 25rpx;
		background: #FFFFFF;
	}
	.func-text{
		font-size: 22.5rpx;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #292C33;
		line-height: 100rpx;
		float: left;
	}
	.icon-more{
		width: 12.37rpx;
		height: 21.21rpx;
		line-height: 100rpx;
		float: right;
		margin-top: 39.37rpx;
		margin-right: 25rpx;
	}
	.msgbubble{
		width: 50rpx;
		height: 30rpx;
		background: #FF4060;
		border-radius: 24px;
		float: left;
		margin-top: 35rpx;
		margin-left: 15rpx;
	}
	.bg-box{
		width: 750rpx;
		height: 416.25rpx;
		position: absolute;
		bottom: 87.5rpx;
		background-color: #F5F6FA;
		z-index: -1;
	}
	.role{
		font-size: 22.5rpx;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #7A8599;
		line-height: 100rpx;
		float: right;
		margin-right: 25rpx;
	}
</style>