market-app-ui/pages/login/chooseRole.vue

<template>
	<view class="u-page">
		<navigation-bar title="选择角色" background-color="#fff" front-color="#000000" />
		<u-list>
			<u-list-item v-for="(item, index) in roles" :key="index" >
				<!-- #fff7f7 -->
				<!-- <u-row customStyle="marginBottom:10px;backgroundColor: '#fff7f7';height: '200px'"> -->
				<u-row @click="choose(item)" :class="index==current? 'active-custom-style':'custom-style'">
					<u-col span="8">
						<view class="r-role">
							{{item.name}}
						</view>
					</u-col>
					<u-col span="4">
						<view class="l-role">
							<u-image :showLoading="true" :src="item.src" width="110px" height="142px" radius="10px"></u-image>
						</view>
					</u-col>
				</u-row>
			</u-list-item>
		</u-list>
		<!-- <u-button type="error" shape="circle" text="下一步" @click="next()"></u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roles: [{
						id: 1,
						name: "我是边民",
						src: require("@/static/images/role/bm.png")
					},
					{
						id: 2,
						name: "我是经销商",
						src: require("@/static/images/role/jxs.png")
					},
					{
						id: 3,
						name: "我是外籍商户",
						src: require("@/static/images/role/wjsh.png")
					},
					{
						id: 4,
						name: "我是司机",
						src: require("@/static/images/role/sj.png")
					},
				],
				// customStyle: {
				// 	marginBottom: '10px',
				// 	backgroundColor: '#fff7f7',
				// 	height: '200px'
				// }
				current: 1,
			}
		},
		methods: {
			choose(data) {
				this.$common.to('/pages/login/register?type='+data.id);
			},
			next(){
				uni.navigateTo({
					url:"/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0 30px;
	}

	.custom-style {
		margin-bottom: 10px;
		background-color: #fff7f7;
		height: 145px;
		border-radius: 10px;
	}
	
	.active-custom-style {
		margin-bottom: 10px;
		background-color: #fff7f7;
		height: 145px;
		border-radius: 10px;
		border: #f83d3d 1px solid;
	}
	

	.r-role {
		font-size: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.l-role {
		// margin-left: 10px;
		// position: absolute;
		// right: 10px;
		// bottom: 10px;
	}
</style>