yichael_zhongchuan_manager/components/login/chooseRole.vue

<template>
	<view class="df jcc fdc">
		<view class="login-righttitle">请选择角色</view>
		<view class="df jcc aic chooseBox">
			<view class="df aic fdc">
				<view>
					<img src="../../assets/login/loginPic2.png" />
				</view>
				<view class="chooseRole-btn-checked chooseRole-btn" @click="onChooseTClick">我是老师</view>
			</view>
			<view class="df aic fdc role-stu-box">
				<view>
					<img src="../../assets/login/loginPic3.png" />
				</view>
				<view class="chooseRole-btn-checked chooseRole-btn" @click="onChooseSClick">我是学生</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			onChooseTClick() {
				this.$emit("onChoose", "T")
			},
			onChooseSClick() {
				this.$emit("onChoose", "S")
			}
		}
	}
</script>

<style>
	.chooseBox {
		margin-top: 8vw;
	}

	.role-stu-box {
		margin-left: 5.2vw;
	}
	.chooseRole-btn{
		width: 12vw;
		height: 3.12vw;
		border-radius: 10px;
		font-size: 1.15vw;
		font-family: MicrosoftYaHei;
		line-height: 1.5vw;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 3.43vw;
	}

	.chooseRole-btn-unchecked {
		background: #F4F4F4;
		color: #626262;
	}

	.chooseRole-btn-checked {
		background: #EA252C;
		color: #FFFFFF;
	}
</style>