1. 用quasar遇到<div> 的高度问题,未指定height,div下面包裹着好几层,下面的图片超出了div的高度,也就是高度不够,没有自适应图片的高度,解决方法是加上一个“no-wrap”,具体原因还有待分析。目前已知的是如果Hot-list显示的话div高度和旁边Hot-list的列表高度有关
<div class="column col-auto no-wrap"> <div class="col-auto column"> <!-- 优惠券 --> <div v-if="couponInfo.length" class="col column text-weight-bold"> <div class="col-auto"> <span>优惠领取</span> </div> <div class="row col q-mt-md" v-for="coupon in couponInfo" :key="coupon.coupon_link" > <q-btn color="accent" :size="buttonSize" unelevated> <a target="_blank" class="text-white text-weight-bold" :href="coupon.actual_coupon_link" style=" 230px" > {{ coupon.coupon_info }}</a > </q-btn> </div> </div> <!-- 详细文字 --> <div class="col-auto q-mt-lg"> <span class="text-weight-bold col" v-if="detail.emphsis != 'null'"> {{ detail.emphsis }}</span > <div class="col-auto" v-html="part" v-for="part in detailParts" :key="part"></div> </div> </div> <!-- 大图 --> <div class="col"> <div class="column items-center q-pb-lg"> <q-img v-for="bigImage in bigImages" :key="bigImage" :src="bigImage" width="60%" height="60%" > </q-img> </div> <q-img v-if="bigImages.length == 0" :src="detail.mainImageUrl" width="60%" height="60%" > </q-img> </div> </div> </div> </div>