因为版权问题，选汽车的时候不能显示汽车自己真实的图片，下面我需要改成列表形式，下面记录一下代码
1、实现效果

2、源码

<div class="car-brand-list"><div v-for="(brand,index) in brandList" :key="index"><div class="brand-title">{{brand.name}}</div><div class="car-detail"><div class="car-item" v-for="(car,ii) in brand.car" :key="ii" @click.stop="open(brand,car)"><div class="item-img"><img :src="car.img" alt=""></div><div class="car-name"><p>{{car.name}}</p></div></div></div></div><!-- 车辆款式的年份选择 --><wux-popup closable :visible="visible" title="车辆款式" @close="close"><div class="car-batch-wrap"><div class="car-batch-item" v-for="(batch,index) in batchList" :key="index" @click="selectBatch(batch)">{{batch}}</div></div></wux-popup>
</div>

<style lang="less" scoped>@import "../../theme/orange.less";.car-brand-list {.brand-title {font-size: 14px;color: grey;height: 50rpx;background: #efefef;padding-left: 10rpx;display: flex;align-items: center;}}.car-detail {display: flex;flex-wrap: wrap;.car-item {height: 200rpx;width: calc(33.33vw - 20rpx);margin: 10rpx;box-shadow: #f4f4f4 0px 1px 2px 1px;.car-brand {height: 20px;font-size: 12px;color: grey;line-height: 20px;vertical-align: middle;text-align: center;}.item-img {width: 100%;height: 160rpx;display: flex;justify-content: center;align-items: center;img {max-width: 100%;max-height: 100%;display: block;}}.car-name {color: #545657;font-size: 12px;text-align: center;}}}.car-batch-wrap {display: flex;flex-wrap: wrap;position: relative;width: 100%;.car-batch-item {width: calc(50% - 20rpx);margin: 10rpx;box-shadow: #f4f4f4 0px 1px 2px 1px;background: @primary-color;height: 60rpx;display: flex;justify-content: center;align-items: center;font-size: 14px;color: white;border-radius: 2rpx;}}
</style>