汽车列表 车型选择 源码备忘

版权声明：转载请评论留言 https://blog.csdn.net/solocao/article/details/86300500

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