修改商品详情中图片有空格问题

master
lemon橪 2021-11-19 15:49:42 +08:00
parent 98c5863973
commit 89dbd32351
1 changed files with 24 additions and 15 deletions

View File

@ -8,7 +8,8 @@
</div> </div>
</div> </div>
<u-empty class="empty" text="暂无商品介绍" mode="data" v-if="!res.mobileIntro"></u-empty> <u-empty class="empty" text="暂无商品介绍" mode="data" v-if="!res.mobileIntro"></u-empty>
<u-parse class="vhtml" :lazy-load="true" :use-cache="true" :show-with-animation="true" :html="res.mobileIntro"></u-parse> <u-parse class="vhtml" :lazy-load="true" :use-cache="true" :show-with-animation="true"
:html="res.mobileIntro"></u-parse>
</view> </view>
</view> </view>
</view> </view>
@ -21,17 +22,17 @@
</div> </div>
<!-- <u-divider>商品参数</u-divider> --> <!-- <u-divider>商品参数</u-divider> -->
<div class="param-list" v-if="goodsParams.length == 0"> <div class="param-list" v-if="goodsParams.length == 0">
<u-empty text="暂无商品参数" mode="list"></u-empty> <u-empty text="暂无商品参数" mode="list"></u-empty>
</div>
<div class="params-group" v-for="(group,groupIndex) in goodsParams" :key="groupIndex">
<view style="font-weight: bold;margin-left: 10px;">{{group.groupName}}</view>
<div class="param-list">
<div class="param-item" v-for="(param,index) in group.goodsParamsItemDTOList" :key="index">
<div class="param-left">{{param.paramName}}</div>
<div class="param-right">{{param.paramValue}}</div>
</div>
</div>
</div> </div>
<div class="params-group" v-for="(group,groupIndex) in goodsParams" :key="groupIndex">
<view style="font-weight: bold;margin-left: 10px;">{{group.groupName}}</view>
<div class="param-list">
<div class="param-item" v-for="(param,index) in group.goodsParamsItemDTOList" :key="index">
<div class="param-left">{{param.paramName}}</div>
<div class="param-right">{{param.paramValue}}</div>
</div>
</div>
</div>
</view> </view>
</view> </view>
</view> </view>
@ -43,16 +44,15 @@ import { getGoodsMessage } from "@/api/goods";
export default { export default {
data() { data() {
return { return {
goodsDetail: "" goodsDetail: "",
}; };
}, },
props: ["res", "goodsId", "goodsParams"], props: ["res", "goodsId", "goodsParams"],
async mounted() { async mounted() {
console.log(this.res) console.log(this.res);
let res = await getGoodsMessage(this.goodsId); let res = await getGoodsMessage(this.goodsId);
if (res.data.success) { if (res.data.success) {
this.goodsDetail = res.data.result; this.goodsDetail = res.data.result;
} }
}, },
}; };
@ -103,6 +103,11 @@ export default {
width: 100%; width: 100%;
} }
.vhtml {
/deep/ img {
display: block !important;
}
}
/deep/ img { /deep/ img {
width: 100%; width: 100%;
@ -126,7 +131,11 @@ export default {
width: 52rpx; width: 52rpx;
height: 6rpx; height: 6rpx;
background-image: linear-gradient(90deg, $price-color, $price-light-color); background-image: linear-gradient(
90deg,
$price-color,
$price-light-color
);
} }
} }
> .goods-detail-item { > .goods-detail-item {