tcm-cloud-uin-app/pages/login/multipleRoles.vue

<template>
	<view>
		<view class="text-area">
			<text>选择以下业务类型</text>
		</view>
		<view class="types">
			<view class="icon">
				<image src="./hospital.png" 
					style="height: 25px;width: 25px;margin-right: 30px;"></image>
			</view>
			<view style="display: flex;flex-direction: column;">
			<text style="font-size: 18px; " >行走药师</text>
			<text style="font-size: 14px;color: rgba(153, 153, 153, 1);margin-top: 8px; ">适用于行走的药师业务页面</text>
			</view>
		</view>
		<view class="types">
			<view class="icon">
				<image src="./check.png" 
					style="height: 25px;width: 25px;margin-right: 30px;"></image>
			</view>
			<view style="display: flex;flex-direction: column;">
			<text style="font-size: 18px; " >飞行检查</text>
			<text style="font-size: 14px;color: rgba(153, 153, 153, 1);margin-top: 8px; ">适用于飞行检查业务页面</text>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style>
	.text-area {
		margin-left: 20px;
		margin-top: 20px;
		font-size: 22px;
	}
	.types{
		margin-left: 25px;
		margin-top: 30px;
		width: 300px;
		height: 94px;
		opacity: 1;
		border-radius: 5px;
		border: 0.5px solid rgba(221, 221, 221, 1);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0px 16px 0px 16px;
		display: flex;
		flex-direction: row;
	}

</style>