repairForMiniProgram/pages/select-identity/index.vue

<template>
	<view>
		<view class="content">
			<!-- 学生选择按钮 -->
			<button class="student" @click="getStudentId">
				<view class="stu">
					学生
				</view>
				<view class="stu_point">
					学生选择此项
				</view>
				<view class="stu_img">
					<image src="../../static/stu_img.svg" mode=""></image>
				</view>
			</button>

			<!-- 维修人员选择按钮 -->
			<button class="worker" @click="getlogin">
				<view class="work">
					维修人员
				</view>
				<view class="work_point">
					维修人员选择此项
				</view>
				<view class="work_img">
					<image src="../../static/work_img.svg" mode=""></image>
				</view>
			</button>
		</view>
	</view>
</template>

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

			}
		},
		methods: {
			//维修工登录跳转页面
			getlogin() {
				uni.reLaunch({
					url: '../login/login',
				})
			},
			//用户登录跳转页面
			async getStudentId() {
				uni.reLaunch({
					url: '../login-filter/login-filter'
				})
			},
		}
	}
</script>

<style>
	.content {
		flex-direction: column;
		display: flex;
		height: 100vh;
		padding: 0 10rpx;
	}

	.student {
		position: relative;
		width: 702rpx;
		height: 300rpx;
		margin-top: 200rpx;
		border-radius: 32rpx;
		background-color: rgba(42, 69, 228, 0.89);
	}

	.student .stu {
		position: absolute;
		top: 34rpx;
		left: 50rpx;
		font-size: 56rpx;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
	}

	.student .stu_point {
		position: absolute;
		top: 140rpx;
		left: 160rpx;
		font: 32rpx;
		color: rgba(255, 255, 255, 1);
	}

	.student image {
		position: absolute;
		right: 40rpx;
		top: 72rpx;
		width: 152rpx;
		height: 152rpx;
	}

	.worker {
		position: relative;
		width: 702rpx;
		height: 300rpx;
		margin-top: 114rpx;
		border-radius: 32rpx;
		background-color: rgba(42, 130, 228, 1);
	}

	.worker .work {
		position: absolute;
		top: 34rpx;
		left: 50rpx;
		font-size: 56rpx;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
	}

	.worker .work_point {
		position: absolute;
		top: 140rpx;
		left: 160rpx;
		font: 32rpx;
		color: rgba(255, 255, 255, 1);
	}

	.worker image {
		position: absolute;
		right: 40rpx;
		top: 72rpx;
		width: 152rpx;
		height: 152rpx;
	}
</style>