liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix：4906 【商城小程序】康养和旅居类目下页面内容偏左，需按效果图调整，并做成瀑布流形式

Browse Source
This commit is contained in:
linxi
2026-02-28 10:49:06 +08:00
parent b572976e08
commit be90afefe5
2 changed files with 162 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/healthFoods.vue
+81 -29
View File
@@ -93,35 +93,69 @@
<text>{{ tab.name }}</text> <text>{{ tab.name }}</text>
</view> </view>
</view> </view>
<view class="v12-justify-between sanctup-items v12-mt-3"> <view class="waterfall-box v12-mt-3 v12-px-2">
<view v-for="(item, index) in items" :key="index" class="v12-pa-1" @click="toStore(item)"> <view class="waterfall-column">
<view class="img"> <view v-for="(item, index) in leftItems" :key="index" class="v12-pa-1" @click="toStore(item)">
<video <view class="img">
class="img" <video
:src="item.cover" class="img"
:play-btn-position="'center'" :src="item.cover"
:show-fullscreen-btn="false" :play-btn-position="'center'"
:show-center-play-btn="false" :show-fullscreen-btn="false"
:show-play-btn="false" :show-center-play-btn="false"
:controls="false" :show-play-btn="false"
:poster="item.cover + '?vframe/jpg/offset/1'" :controls="false"
v-if="item.coverType === 2"> :poster="item.cover + '?vframe/jpg/offset/1'"
</video> v-if="item.coverType === 2">
<image v-else class="img" :src="item.cover"></image> </video>
<view class="v12-white-text address"> <image v-else class="img" :src="item.cover" mode="widthFix"></image>
<image <view class="v12-white-text address">
class="map-icon v12-mr-1" <image
:src="webUrl + '/orderIcon/map_white.png'" class="map-icon v12-mr-1"
></image> :src="webUrl + '/orderIcon/map_white.png'"
<text class="v12-font-28">{{ item.areaName }}</text> ></image>
<text class="v12-font-28">{{ item.areaName }}</text>
</view>
</view>
<view v-if="item.intro" class="v12-font-bold v12-font-28 v12-mt-1 more-t desc-txt">{{ item.intro }}</view>
<view class="v12-justify-start v12-align-center v12-my-1">
<view class="atr">
<image class="atr" :src="item.avatar"></image>
</view>
<view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
</view> </view>
</view> </view>
<view v-if="item.intro" class="v12-font-bold v12-font-28 v12-mt-1 more-t desc-txt">{{ item.intro }}</view> </view>
<view class="v12-justify-start v12-align-center v12-my-1"> <view class="waterfall-column">
<view class="atr"> <view v-for="(item, index) in rightItems" :key="index" class="v12-pa-1" @click="toStore(item)">
<image class="atr" :src="item.avatar"></image> <view class="img">
<video
class="img"
:src="item.cover"
:play-btn-position="'center'"
:show-fullscreen-btn="false"
:show-center-play-btn="false"
:show-play-btn="false"
:controls="false"
:poster="item.cover + '?vframe/jpg/offset/1'"
v-if="item.coverType === 2">
</video>
<image v-else class="img" :src="item.cover" mode="widthFix"></image>
<view class="v12-white-text address">
<image
class="map-icon v12-mr-1"
:src="webUrl + '/orderIcon/map_white.png'"
></image>
<text class="v12-font-28">{{ item.areaName }}</text>
</view>
</view>
<view v-if="item.intro" class="v12-font-bold v12-font-28 v12-mt-1 more-t desc-txt">{{ item.intro }}</view>
<view class="v12-justify-start v12-align-center v12-my-1">
<view class="atr">
<image class="atr" :src="item.avatar"></image>
</view>
<view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
</view> </view>
<view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
</view> </view>
</view> </view>
</view> </view>
@@ -158,6 +192,12 @@ export default {
wellnessButtonSrc() { wellnessButtonSrc() {
const config = this.topImageConfig || {} const config = this.topImageConfig || {}
return config.wellnessButtonImageFocus || config.wellnessButtonImage || '' return config.wellnessButtonImageFocus || config.wellnessButtonImage || ''
},
leftItems() {
return this.items.filter((item, index) => index % 2 === 0)
},
rightItems() {
return this.items.filter((item, index) => index % 2 !== 0)
} }
}, },
onLoad(opts) { onLoad(opts) {
@@ -346,17 +386,29 @@ export default {
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
} }
.waterfall-box {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.waterfall-column {
width: 48%;
display: flex;
flex-direction: column;
}
.atr{ .atr{
width: 52rpx; width: 52rpx;
height: 52rpx; height: 52rpx;
border-radius: 50%; border-radius: 50%;
} }
.img{ .img{
width: 320rpx; width: 100%;
height: 320rpx;
// background: #707070;
border-radius: 16rpx; border-radius: 16rpx;
position: relative; position: relative;
overflow: hidden;
max-height: 460rpx;
display: block;
min-height: 200rpx;
} }
.sanctum-wrap{ .sanctum-wrap{
min-height: 100vh; min-height: 100vh;
pkg_product/views/healthSanctum.vue
+81 -30
View File
@@ -63,35 +63,69 @@
</view> --> </view> -->
<text class=" v12-font-34 v12-dark-text v12-mr-5 v12-font-bold">大家都在看</text> <text class=" v12-font-34 v12-dark-text v12-mr-5 v12-font-bold">大家都在看</text>
</view> </view>
<view class="v12-justify-between sanctup-items v12-mt-3"> <view class="waterfall-box v12-mt-3 v12-px-2">
<view v-for="(item, index) in items" :key="index" class="v12-pa-1" @click="toStore(item)"> <view class="waterfall-column">
<view class="img"> <view v-for="(item, index) in leftItems" :key="index" class="v12-pa-1" @click="toStore(item)">
<video <view class="img">
class="img" <video
:src="item.cover" class="img"
:play-btn-position="center" :src="item.cover"
:show-fullscreen-btn="false" :play-btn-position="center"
:show-center-play-btn="flase" :show-fullscreen-btn="false"
:show-play-btn="false" :show-center-play-btn="flase"
:controls="false" :show-play-btn="false"
:poster="item.cover + '?vframe/jpg/offset/1'" :controls="false"
v-if="item.coverType === 2"> :poster="item.cover + '?vframe/jpg/offset/1'"
</video> v-if="item.coverType === 2">
<image v-else class="img" :src="item.cover"></image> </video>
<view class="v12-white-text address"> <image v-else class="img" :src="item.cover" mode="widthFix"></image>
<image <view class="v12-white-text address">
class="map-icon v12-mr-1" <image
:src="webUrl + '/orderIcon/map_white.png'" class="map-icon v12-mr-1"
></image> :src="webUrl + '/orderIcon/map_white.png'"
<text class="v12-font-28">{{ item.areaName }}</text> ></image>
<text class="v12-font-28">{{ item.areaName }}</text>
</view>
</view>
<view v-if="item.intro" class="v12-font-bold v12-font-28 v12-mt-1 more-t desc-txt">{{ item.intro }}</view>
<view class="v12-justify-start v12-align-center v12-my-1">
<view class="atr">
<image class="atr" :src="item.avatar"></image>
</view>
<view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
</view> </view>
</view> </view>
<view v-if="item.intro" class="v12-font-bold v12-font-28 v12-mt-1 more-t desc-txt">{{ item.intro }}</view> </view>
<view class="v12-justify-start v12-align-center v12-my-1"> <view class="waterfall-column">
<view class="atr"> <view v-for="(item, index) in rightItems" :key="index" class="v12-pa-1" @click="toStore(item)">
<image class="atr" :src="item.avatar"></image> <view class="img">
<video
class="img"
:src="item.cover"
:play-btn-position="center"
:show-fullscreen-btn="false"
:show-center-play-btn="flase"
:show-play-btn="false"
:controls="false"
:poster="item.cover + '?vframe/jpg/offset/1'"
v-if="item.coverType === 2">
</video>
<image v-else class="img" :src="item.cover" mode="widthFix"></image>
<view class="v12-white-text address">
<image
class="map-icon v12-mr-1"
:src="webUrl + '/orderIcon/map_white.png'"
></image>
<text class="v12-font-28">{{ item.areaName }}</text>
</view>
</view>
<view v-if="item.intro" class="v12-font-bold v12-font-28 v12-mt-1 more-t desc-txt">{{ item.intro }}</view>
<view class="v12-justify-start v12-align-center v12-my-1">
<view class="atr">
<image class="atr" :src="item.avatar"></image>
</view>
<view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
</view> </view>
<view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
</view> </view>
</view> </view>
</view> </view>
@@ -128,7 +162,12 @@ export default {
wellnessButtonSrc() { wellnessButtonSrc() {
const config = this.topImageConfig || {} const config = this.topImageConfig || {}
return config.wellnessButtonImage || config.wellnessButtonImageFocus || '' return config.wellnessButtonImage || config.wellnessButtonImageFocus || ''
keyword: '' },
leftItems() {
return this.items.filter((item, index) => index % 2 === 0)
},
rightItems() {
return this.items.filter((item, index) => index % 2 !== 0)
} }
}, },
onLoad(opts) { onLoad(opts) {
@@ -308,17 +347,29 @@ export default {
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
} }
.waterfall-box {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.waterfall-column {
width: 48%;
display: flex;
flex-direction: column;
}
.atr{ .atr{
width: 52rpx; width: 52rpx;
height: 52rpx; height: 52rpx;
border-radius: 50%; border-radius: 50%;
} }
.img{ .img{
width: 320rpx; width: 100%;
height: 320rpx;
// background: #707070;
border-radius: 16rpx; border-radius: 16rpx;
position: relative; position: relative;
overflow: hidden;
max-height: 460rpx;
display: block;
min-height: 200rpx;
} }
.sanctum-wrap{ .sanctum-wrap{
min-height: 100vh; min-height: 100vh;