smartmeter-app/pages/compoents/pages_mine.vue

<template>
	<view class="view_body">
		<view class="view_body_images">
			<u-navbar :is-back="false" title='我的' title-color="#000" :border-bottom="false" :background="true" id="navbar">
			</u-navbar>
			<view class="view_header">
				<view>
					<view>
						<image src="https://file.langsi.online/yasiimg/web/static/uxaCSTBJAo7SkGHtheRR" mode=""></image>
					</view>
					<view class="view_images">
						<text>LUlY老师</text>
						<u-button type="warning" size="mini">认证教师</u-button>
					</view>
				</view>
				<view class="view_sniht">
					
				</view>
			</view>
			<view class="view_reative">
				<view>
					<text>学生人数</text>
					<text>320</text>
				</view>
				<view>
					<text>安排题数（道）</text>
					<text>4300</text>
				</view>
				<view>
					<text>总完成度</text>
					<text>43</text>
				</view>
				<view>
					<text>今日完成度</text>
					<text>43</text>
				</view>
			</view>
			<view class="view_centre">
				<view>
					<view class="view_centre_images">
						<image src="https://file.langsi.online/yasiimg/web/static/uif1JIGCJXguCEO3Mdqx" mode=""></image>
					</view>
					<text>作业安排</text>
				</view>
				<view>
					<view class="view_centre_images">
						<image src="https://file.langsi.online/yasiimg/web/static/u4BHxtTvVDGUDFaKPHz2" mode=""></image>
					</view>
					<text>学生管理</text>
				</view>
				<view>
					<view class="view_centre_images">
						<image src="https://file.langsi.online/yasiimg/web/static/uPqAU9hXDLOa1zrX4xJX" mode=""></image>
					</view>
					<text>班级管理</text>
				</view>
				<view>
					<view class="view_centre_images">
						<image src="https://file.langsi.online/yasiimg/web/static/uWHKotvBvHfXxwFzHiMP" mode=""></image>
					</view>
					<text>切换题库</text>
				</view>
			</view>
			<view class="view_footer">
				<view>
					<view class="view_icon">
						<u-icon name="question-circle" color="#2D7CE6"></u-icon>
					</view>
					<view class="wz">
						<view class="">
							帮助中心
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="icon">
					<view class="view_icon">
						<u-icon name="question-circle" color="#2D7CE6"></u-icon>
					</view>
					<view class="wz">
						<view class="">
							关于我们
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="icon">
					<view class="view_icon">
						<u-icon name="question-circle" color="#2D7CE6"></u-icon>
					</view>
					<view class="wz">
						<view class="">
							退出登录
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.view_body {

		height: 100vh;
		background: linear-gradient(180deg, #E1EEFF 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 96rpx 34rpx;

		.view_body_images {
			height: 347rpx;
			background-image: url('https://file.langsi.online/yasiimg/web/static/u4sEWPTO8OQ8hzPMUdVX');
			background-size: cover;
			background-position: center;

		}

		.view_reative {
			z-index: 100;
			height: 154rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			background: linear-gradient(180deg, #E1EEFF 0%, #FFFFFF 100%);
			// background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #FFFFFF;
			margin-top: 32rpx;

			view {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
		}

		.view_reative view text:nth-child(1) {
			height: 32rpx;
			font-size: 20rpx;
			font-family: 'PingFang', 'PingFang';
			font-weight: 500;
			color: #2E4975;
			line-height: 32rpx;
		}

		.view_reative view text:nth-child(2) {
			height: 46rpx;
			font-size: 36rpx;
			font-family: 'PingFang', 'PingFang';
			font-weight: 800;
			color: #2E4975;
			line-height: 47rpx;
		}

		.view_header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				display: flex;
			}

			image {
				display: flex;
				justify-content: space-between;
				width: 124rpx;
				height: 124rpx;
				border-radius: 803rpx 803rpx 803rpx 803rpx;

			}
		}

		.view_images {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;

			text {
				height: 58rpx;
				font-size: 32rpx;
				font-family: 'PingFang', 'PingFang';
				font-weight: 800;
				color: #2E4975;
				line-height: 58rpx;
			}
		}

		.view_centre {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			height: 150rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			overflow: hidden;
			margin-top: 50rpx;

			view {
				display: flex;
				flex-direction: column;
				// text-align: center;
				justify-content: center;
				align-items: center;
			}

			text {
			font-size: 24rpx;
			font-weight: 700;
			color: #20314C;
			}

			.view_centre_images {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 12rpx;

			}
		}

		.view_footer {
			width: 686rpx;
			margin: 20rpx auto;
			background: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 32rpx 40rpx;

			view {
				display: flex;

			}

			.wz {
				width: 550rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #EEEEEE;
				padding-bottom: 34rpx;

			}

			.view_icon {
				width: 35rpx;
				height: 40rpx;
			}

			.icon {
				margin-top: 20rpx;
			}
			

		}
		.view_sniht{
			width: 35rpx;
			height: 75rpx;
			// background-color: red;
			background: url('https://file.langsi.online/yasiimg/web/static/uv2PZzLhKjm907ZBqqXn') no-repeat center;
			background-size: 100% auto;
		}
	

	}
</style>