muck_truck_app/pages/cityCar/index.vue

<template>
	<view class="container">
		<uni-navbar title="车辆审批"></uni-navbar>
		<view class="box">
			<view class="commonMb commonMt">
				<view class="car-content" v-for="item in carList" :key="item.id">
					<view class="car-info commonBj">
						<view class="person-top">
							<view class="imgName">
								<image style="width: 60rpx;height: 60rpx;" src="../../static/images/city/gongsi.png"
									mode="widthFix"></image>
								<text>{{item.companyName}}</text>
							</view>
							<view class="shenpiButton" @tap="gotoCar(item.id)">
								审 批
							</view>
						</view>
						<view class="person-bottom" style="margin-top: 38rpx;">
							<view class="carinfo-bottom listText">
								<image style="width: 22rpx;height: 22rpx;" src="../../static/images/car/lb_01.png"
									mode="widthFix"></image>
								<text class="width100">车牌号: {{item.carNumber}}</text>
							</view>
							<view class="carinfo-bottom listText" style="margin-left: 60rpx;">
								<image style="width: 22rpx;height: 22rpx;" src="../../static/images/car/lb_01.png"
									mode="widthFix"></image>
								<text>车&nbsp;&nbsp;&nbsp;型: {{item.carType}}</text>
							</view>
						</view>
						<view class="person-bottom" style="margin-top: 0rpx;">
							<view class="carinfo-bottom listText">
								<image style="width: 22rpx;height: 22rpx;" src="../../static/images/car/lb_03.png"
									mode="widthFix"></image>
								<text class="width100">载重量: {{item.carCarry}}</text>
							</view>
							<view class="carinfo-bottom listText" style="margin-left: 60rpx;">
								<image style="width: 22rpx;height: 22rpx;" src="../../static/images/car/lb_02.png"
									mode="widthFix"></image>
								<text>车&nbsp;&nbsp;&nbsp;系: {{item.carSeries}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		carList
	} from "@/api/city/car.js"
	export default {
		data() {
			return {
				carList: []
			}
		},
		methods: {
			async getCarList() {
				const res = await carList()
				console.log('车辆列表', res);
				this.carList = res.rows.filter(item => {
					return item.auditType === 0
				})
				console.log(this.carList);
			},
			gotoCar(id) {
				this.$tab.navigateTo(`/pages/cityCarDetail/index?id=${id}`)
			}
		},
		onShow() {
			this.getCarList()
		}
	}
</script>

<style lang="scss" scoped>
	.width100 {
		width: 228rpx;
	}

	.person-bottom {
		display: flex;
		justify-content: start;
		align-items: center;
		flex-wrap: wrap;
	}

	.person-top {
		display: flex;
		align-items: center;
		justify-content: space-between;

		uni-text {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			margin-left: 25rpx;
		}
	}

	.imgName {
		display: flex;
		align-items: center;
	}

	.shenpiButton {
		width: 103rpx;
		height: 45rpx;
		background: linear-gradient(90deg, #FF2D04 0%, #FFA53E 100%);
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25);
		border-radius: 23rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 45rpx;
	}

	.car-content {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.car-info {
		padding: 18rpx 30rpx;
		box-sizing: border-box;
		// margin-top: 24rpx;

		.carInfo-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// margin-bottom: 17rpx; 

			.top-left {
				display: flex;
				align-items: center;

				uni-text {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 25rpx;
				}
			}

			.top-right {
				display: flex;
				align-items: center;

				uni-text {
					// font-size: 24rpx;
					// font-weight: 400;
					// color: #485B93;
					margin-left: 19rpx;
				}
			}
		}
	}

	.car-info:nth-child(1) {
		margin-top: 0rpx !important;
	}

	.carinfo-bottom::before {
		content: '';
		display: table;
	}

	.carinfo-bottom {
		display: flex;
		align-items: center;
		margin-bottom: 14rpx;

		uni-text {
			margin-left: 19rpx;
		}

	}
</style>