Fix:5448 【商城小程序】在详情图区域上传多张图片,详情图现在是一列显示,改为一行显示,可左右滑动查看图片,不自动轮播
This commit is contained in:
@@ -2258,43 +2258,3 @@ export default {
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
.gift-wrap{
|
||||
position: relative;
|
||||
}
|
||||
.gift-bg{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.ll-text{
|
||||
margin-left: 250rpx;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
.gift-img{
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.gift-wrap{
|
||||
position: relative;
|
||||
}
|
||||
.gift-bg{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.ll-text{
|
||||
margin-left: 250rpx;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.ll-text{
|
||||
margin-left: 250rpx;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -74,16 +74,23 @@
|
||||
<view v-if="item.address" class="section-address">
|
||||
<text>定位:{{ item.address }}</text>
|
||||
</view>
|
||||
<view v-if="item.images && item.images.length" class="image-list">
|
||||
<image
|
||||
v-for="(img, imgIndex) in item.images"
|
||||
:key="imgIndex"
|
||||
:src="img"
|
||||
class="detail-image"
|
||||
mode="widthFix"
|
||||
@click="previewImage(item.images, imgIndex)"
|
||||
/>
|
||||
</view>
|
||||
<scroll-view
|
||||
v-if="item.images && item.images.length"
|
||||
class="image-scroll"
|
||||
scroll-x
|
||||
show-scrollbar="false"
|
||||
>
|
||||
<view class="image-list">
|
||||
<image
|
||||
v-for="(img, imgIndex) in item.images"
|
||||
:key="imgIndex"
|
||||
:src="img"
|
||||
class="detail-image"
|
||||
mode="aspectFill"
|
||||
@click="previewImage(item.images, imgIndex)"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="!detailList.length" class="empty-text">暂无图文内容</view>
|
||||
</view>
|
||||
@@ -248,21 +255,25 @@ export default {
|
||||
}
|
||||
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.image-scroll {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: calc(50% - 8rpx);
|
||||
width: 280rpx;
|
||||
height: 220rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.detail-image:nth-child(2n) {
|
||||
.detail-image:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user