电子商务网站网络拓扑,网站建设与管理期中考,如何做跨境购物网站,公司建网站会计分录因为版权问题#xff0c;选汽车的时候不能显示汽车自己真实的图片#xff0c;下面我需要改成列表形式#xff0c;下面记录一下代码 1、实现效果 2、源码
div classcar-brand-listdiv v-for(brand,index) in brandList :keyinde…因为版权问题选汽车的时候不能显示汽车自己真实的图片下面我需要改成列表形式下面记录一下代码 1、实现效果 2、源码
div classcar-brand-listdiv v-for(brand,index) in brandList :keyindexdiv classbrand-title{{brand.name}}/divdiv classcar-detaildiv classcar-item v-for(car,ii) in brand.car :keyii click.stopopen(brand,car)div classitem-imgimg :srccar.img alt/divdiv classcar-namep{{car.name}}/p/div/div/div/div!-- 车辆款式的年份选择 --wux-popup closable :visiblevisible title车辆款式 closeclosediv classcar-batch-wrapdiv classcar-batch-item v-for(batch,index) in batchList :keyindex clickselectBatch(batch){{batch}}/div/div/wux-popup
/divstyle langless scopedimport ../../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
