guosen-ldt-shop/pages/test/test.vue

<template>
	<view class="">
		<u-modal  v-model="show" title="请选择物料种类" confirm-color="#EF9944">
			<view class="modal-content">
				<view @click="activeIndex=0" class="item" :class="{'active':activeIndex==0}">
					<view class="flex">
						<image class="img1" src="/static/icon/paycode.png" mode=""></image>
						<text class="center">付款码</text>
					</view>
					<view class="">
						<image v-if="activeIndex==0" class="img2 center" src="/static/icon/checked.png" mode=""></image>
					</view>
				</view>
				<view @click="activeIndex=1" class="item" :class="{'active':activeIndex==1}">
					<view class="flex">
						<image class="img3" src="/static/icon/order.png" mode=""></image>
						<text class="center">点餐码</text>
					</view>
					<view class="">
						<image v-if="activeIndex==1" class="img2 center" src="/static/icon/checked.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			show:true,
			activeIndex:0
		};
	},
	onLoad() {
		
	},
	methods:{
		
	}
};
</script>

<style lang="scss" scoped>
	.modal-content{
		padding:70rpx 30rpx;
		
		.img1{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			margin-left: 20rpx;
		}
		.img2{
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
		}
		.img3{
			width: 42rpx;
			height: 42rpx;
			margin-right: 20rpx;
			margin-left: 20rpx;
		}
		
		 .item{
			display: flex;
			justify-content: space-between;
			background-color: #f7f7f7;
			border-radius: 50rpx;
			padding: 20rpx;
			margin-bottom: 50rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #696969;
			
		}
		
		.active {
			color: #0b0100;
			// background-color:rgba(255, 148, 71,.3);
			background-color: #fef6e1;
			
			
			image{
				transform: scale(1.3);
			}
			
			text{
				transform: scale(1.1);
			}
		}
	}
</style>