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

pkg_product/views/healthFoods.vue

@@ -93,35 +93,69 @@
         <text>{{ tab.name }}</text>
       </view>
     </view>
-    <view class="v12-justify-between sanctup-items v12-mt-3">
-      <view v-for="(item, index) in items" :key="index" class="v12-pa-1" @click="toStore(item)">
-        <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"></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 class="waterfall-box v12-mt-3 v12-px-2">
+      <view class="waterfall-column">
+        <view v-for="(item, index) in leftItems" :key="index" class="v12-pa-1" @click="toStore(item)">
+          <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 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="waterfall-column">
+        <view v-for="(item, index) in rightItems" :key="index" class="v12-pa-1" @click="toStore(item)">
+          <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 class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
         </view>
       </view>
     </view>
@@ -158,6 +192,12 @@ export default {
     wellnessButtonSrc() {
       const config = this.topImageConfig || {}
       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) {
@@ -346,17 +386,29 @@ export default {
   display: grid;
   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{
   width: 52rpx;
   height: 52rpx;
   border-radius: 50%;
 }
 .img{
-  width: 320rpx;
-  height: 320rpx;
-  // background: #707070;
+  width: 100%;
   border-radius: 16rpx;
   position: relative;
+  overflow: hidden;
+  max-height: 460rpx;
+  display: block;
+  min-height: 200rpx;
 }
 .sanctum-wrap{
   min-height: 100vh;

pkg_product/views/healthSanctum.vue

@@ -63,35 +63,69 @@
       </view> -->
       <text class=" v12-font-34 v12-dark-text v12-mr-5 v12-font-bold">大家都在看</text>
     </view>
-    <view class="v12-justify-between sanctup-items v12-mt-3">
-      <view v-for="(item, index) in items" :key="index" class="v12-pa-1" @click="toStore(item)">
-        <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"></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 class="waterfall-box v12-mt-3 v12-px-2">
+      <view class="waterfall-column">
+        <view v-for="(item, index) in leftItems" :key="index" class="v12-pa-1" @click="toStore(item)">
+          <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 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="waterfall-column">
+        <view v-for="(item, index) in rightItems" :key="index" class="v12-pa-1" @click="toStore(item)">
+          <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 class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
         </view>
       </view>
     </view>
@@ -128,7 +162,12 @@ export default {
     wellnessButtonSrc() {
       const config = this.topImageConfig || {}
       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) {
@@ -308,17 +347,29 @@ export default {
   display: grid;
   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{
   width: 52rpx;
   height: 52rpx;
   border-radius: 50%;
 }
 .img{
-  width: 320rpx;
-  height: 320rpx;
-  // background: #707070;
+  width: 100%;
   border-radius: 16rpx;
   position: relative;
+  overflow: hidden;
+  max-height: 460rpx;
+  display: block;
+  min-height: 200rpx;
 }
 .sanctum-wrap{
   min-height: 100vh;