diff --git a/pkg_product/views/healthFoods.vue b/pkg_product/views/healthFoods.vue
index 374197d..e90257b 100644
--- a/pkg_product/views/healthFoods.vue
+++ b/pkg_product/views/healthFoods.vue
@@ -93,35 +93,69 @@
{{ tab.name }}
-
-
-
-
-
-
-
- {{ item.areaName }}
+
+
+
+
+
+
+
+
+ {{ item.areaName }}
+
+
+ {{ item.intro }}
+
+
+
+
+ {{ item.name }}
- {{ item.intro }}
-
-
-
+
+
+
+
+
+
+
+
+ {{ item.areaName }}
+
+
+ {{ item.intro }}
+
+
+
+
+ {{ item.name }}
- {{ item.name }}
@@ -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;
diff --git a/pkg_product/views/healthSanctum.vue b/pkg_product/views/healthSanctum.vue
index eb508dc..68c6bfc 100644
--- a/pkg_product/views/healthSanctum.vue
+++ b/pkg_product/views/healthSanctum.vue
@@ -63,35 +63,69 @@
-->
大家都在看
-
-
-
-
-
-
-
- {{ item.areaName }}
+
+
+
+
+
+
+
+
+ {{ item.areaName }}
+
+
+ {{ item.intro }}
+
+
+
+
+ {{ item.name }}
- {{ item.intro }}
-
-
-
+
+
+
+
+
+
+
+
+ {{ item.areaName }}
+
+
+ {{ item.intro }}
+
+
+
+
+ {{ item.name }}
- {{ item.name }}
@@ -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;