OfficeApp/subpkg/property/buyCar.vue

<template>
	<view class="box">
	<view class="car-list" v-for="item,index in carList" :key="index">
		<view class="car-info">
			<view class="car-info-l">
				<view class="">
					<u--image :src="a" width="150rpx" height="150rpx"
						style="margin-right:20rpx"></u--image>
				</view>
				<view class="car-info-c">
					<view class="lincense">
						车牌号: 12121545454
					</view>
					<view class="lincense">
						行驶里程: 1212KM
					</view>
					<view class="lincense">
						当前状态: 平台公司闲置中
					</view>
				</view>
			</view>
			
			<view class="car-info-r">
				选择该车辆为监管车辆
				<view class="" style="margin: 10rpx 50rpx;">
					  <checkbox @tap='change'   activeBorderColor='red'  color="#FFCC33" backgroundColor='#FFCC33'></checkbox>
				</view>
			</view>
			
		</view>
	</view>
	
	
	<view class="bottom">
		<view class="" @tap="open">
			已选择2辆车
		</view>
		<view class="bottom-btn">
			<u-button type="primary" text="确定"></u-button>
		</view>
	</view>
	
	<!-- 组件 -->
	<u-popup :show="showPop" mode="bottom"  @close="close" @open="open">
	        <view class="pop">
	           <view class="check-car-list" v-for="item,index in checkList" :key="index">
	           	<u--image :src="a" width="150rpx" height="150rpx"
	           		></u--image>
				<view class=""  style="margin-top: 10rpx;">
					dsfdsfdf
				</view>
					<view class="pop-check" >
						  <checkbox   activeBorderColor='red'  color="#FFCC33" backgroundColor='#FFCC33'></checkbox>
					</view>
	           </view>
	        </view>
		</u-popup>
	</view>
</template>

<script scoped>
// import { methods } from '../../uni_modules/uview-ui/libs/mixin/mixin'
	export default{
		data(){
			return{
					a:"https://tse3-mm.cn.bing.net/th/id/OIP-C.0xzWZj1_A-nzJiUBxrk8XQHaEo?w=298&h=186&c=7&r=0&o=5&pid=1.7",
					carList:[1,1,1,1,1,1,,1,1,],
					showPop:false,
					checkList:[1,1,1,1,1,1,1,1]
				}
		
		}
	
	,methods:{
		close() {
			this.showPop=false
		},
		open(){
			this.showPop=true
		},
		change(e){
			console.log(e)
		}
	}
	
	}
</script>

<style lang="scss" scoped>
	.box{
		padding-bottom: 100rpx;
	}
	.car-list{
		padding: 20rpx;
		// padding-bottom: 200rpx;
		.car-info{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.car-info-l{
				display: flex;
			}
			.car-info-c{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.car-info-r{
				max-width: 20vw;
			}
		}
	}
	.pop{
		min-height: 40vh;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20rpx 10rpx; 
		padding-right: 0;
		padding-bottom: 100rpx;
		.check-car-list{
			// margin-right: 30rpx;
			width: 182.5rpx;
			display: flex;
			// justify-content: ;
			flex-direction: column;
			align-items: center;
			position: relative;
		}
		.pop-check{
			position: absolute;
			right: 0;
			top: -5rpx;
		}
	}
	.bottom{
		background-color: white;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		z-index: 1000000;
		width: 100vw;
		box-sizing: border-box;
		border-radius: 30rpx 30rpx 0 0;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
   justify-content: space-between;
.bottom-btn{
	width: 200rpx;
}

	}
</style>