因为版权问题,选汽车的时候不能显示汽车自己真实的图片,下面我需要改成列表形式,下面记录一下代码
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>