为什么两张图片不显示,left样式没有宽度,父级有宽度,子级的30%没有,
什么问题
<template>
<div class="store-info" v-if="storeInfo">
<div class="left">
<img :src="img_url" class="left-img" />
</div>
<div class="right">
<div class="store-name">
<div class="name">{{ storeInfo.name }}</div>
<div class="insurance">
<span class="insurance-span" v-for="item in storeInfo.supports" :key="item.id">{{
item.icon_name
}}</span>
</div>
</div>
<div class="score-distance">
<div class="score-wrap">
<div class="score">{{ storeInfo.rating }}<span class="score-span">分</span></div>
<div class="sales">月售{{ storeInfo.recent_order_num }}</div>
</div>
<div class="distance-wrap">
<div class="time">{{ storeInfo.order_lead_time }}</div>
<div class="distance">{{ storeInfo.distance }}</div>
</div>
</div>
<div class="shipping-info">
<div class="price-wrap">
<div class="send-price">起送 ¥{{ storeInfo.float_minimum_order_amount }}</div>
<div class="freight">配送费 ¥{{ storeInfo.float_delivery_fee }}</div>
</div>
<div class="staff-wrap">
<div class="staff">{{ storeInfo.delivery_mode.text }}</div>
<div class="punctuality">{{ storeInfo.supports[1].name }}</div>
</div>
</div>
<div class="evaluation-wrap">
<span class="evaluation">{{ evaluation }}</span>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.store-info {
display: flex;
height: 100px;
padding: 10px;
margin: 0 10px 10px;
background-color: #fff;
border-radius: 10px;
.left {
width: 30%;
height: 100%;
overflow: hidden;
border-radius: 10px;
margin-right: 10px;
.left-img {
display: flex;
width: 100%;
height: 100%;
}
}
.right {
flex: 70%;
display: flex;
flex-direction: column;
justify-content: space-around;
.store-name {
display: flex;
justify-content: space-between;
.name {
color: rgb(0, 0, 0);
font-size: 15px;
font-weight: 600;
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.insurance {
color: #666;
font-size: 12px;
.insurance-span {
border: 1px solid rgba(151, 151, 151, 0.2);
margin-right: 5px;
}
}
}
.score-distance {
display: flex;
justify-content: space-between;
align-items: center;
.score-wrap {
display: flex;
align-items: center;
}
.score {
color: rgb(230, 98, 22);
font-weight: bold;
font-size: 16px;
margin-right: 10px;
.score-span {
padding-left: 3px;
font-size: 12px;
}
}
.score-wrap,
.distance-wrap {
font-size: 12px;
color: #666;
}
.time {
margin-bottom: 3px;
}
}
.shipping-info {
font-size: 13px;
color: #666;
display: flex;
align-items: center;
justify-content: space-between;
.price-wrap {
display: flex;
align-items: center;
.send-price {
margin-right: 10px;
}
.freight {
color: rgb(66, 66, 66);
}
}
.staff-wrap {
display: flex;
font-size: 10px;
.staff {
background-color: #3190e8;
color: #fff;
border: 1px solid #3190e8;
margin-right: 3px;
}
.punctuality {
color: #3190e8;
border: 1px solid #3190e8;
}
}
}
.evaluation {
line-height: 20px;
background-color: rgba(230, 98, 22, 0.1);
color: #e66216;
font-size: 14px;
padding: 6px;
border-radius: 5px;
}
}
}
</style>
把right的样式也贴出来,猜测是flex使用不当导致的