diagnosis_app/views/toRegister/index.vue

<template>
	<view class="content">
		<view class="head">
			<text class="head-highlight">AI</text>
			<text>辅助诊断</text>
		</view>
		<view class="title">
			<view class="stair-title">欢迎使用AI辅助诊断</view>
			<view class="second-title">请选择您的身份</view>
		</view>
		<view class="login-wrap">
			<view class="item" @click="check(item.id)" v-for="item in items" :key="item.id">
				<view class="icon" :class="type===item.id?'active':''">
					<image :src="item.icon" mode="widthFix"></image>
				</view>
				<div class="name">{{item.name}}</div>
			</view>		
		</view>
	</view>
</template>

<script>
import patient from 'static/images/login/patient.png';
import doctor from 'static/images/login/doctor.png';
	export default{
		data:()=>{
			return{
				type:1,
				items:[
					{
						id:2,
						name:'患者',
						icon:patient
					},
					{
						id:1,
						name:'医生',
						icon:doctor
					}					
				]
			}
		},
		methods:{
			check(type){
				this.type=type;	
				uni.navigateTo({
					url:`/pages/register/index?type=${type}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.head{
			font-size: 46upx;
			color: #666;
			font-weight: 600;
			padding: 128upx 0 158upx 0;
			text-align: center;
			.head-highlight{
				color: #3384ff;
				padding-right: 10upx;
			}
		}
		.title{
			.stair-title{
				color: #1890ff;
				font-size: 40upx;
				text-align: center;
			}
			.second-title{
				color: #666;
				font-size: 28upx;
				padding-top: 15upx;
				text-align: center;
			}
			
		}
		.login-wrap{
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 92upx;
			.item{
				&:nth-child(1){
					margin-right: 64upx;
				}
				&:nth-child(2){
					margin-left: 64upx;
				}				
				.icon{
					width: 200upx;
					height: 200upx;
					border: 4upx solid transparent;
					border-radius: 12px;	
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;					
					image{
						display: block;
						width: 50upx;
					}
					&.active{
						border-color: #1890FF;
					}
				}
				.name{
					padding-top: 13upx;
					text-align: center;
				}
			}
		}
	}
</style>