|
|
@@ -6,15 +6,20 @@
|
|
|
<view class="bottom">
|
|
|
<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
|
|
|
<view class="list-scroll-view">
|
|
|
- <view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
|
|
|
- <view class="left">
|
|
|
- {{item.name||'暂无'}}
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <view class="name textOver">{{item.name||'暂无'}}</view>
|
|
|
- <view class="money">
|
|
|
- <text>收费标准</text>
|
|
|
- <text>￥{{item.money||'0'}}</text>
|
|
|
+ <!-- 瀑布流布局列表 -->
|
|
|
+ <view class="pubuBox">
|
|
|
+ <view class="pubuItem">
|
|
|
+ <view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
|
|
|
+ <view class="left">
|
|
|
+ {{item.name||'暂无'}}
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="name textOver">{{item.name||'暂无'}}</view>
|
|
|
+ <view class="money">
|
|
|
+ <text>收费标准</text>
|
|
|
+ <text>￥{{item.money||'0'}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -144,12 +149,24 @@
|
|
|
flex-grow: 1;
|
|
|
background-color: var(--f1Color);
|
|
|
|
|
|
+ .pubuBox {
|
|
|
+ padding: 2vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pubuItem {
|
|
|
+ column-count: 2;
|
|
|
+ column-gap: 2vw;
|
|
|
+ }
|
|
|
+
|
|
|
.list {
|
|
|
- width: 48%;
|
|
|
- margin: 2vw 0 0 0;
|
|
|
- border-radius: 5px;
|
|
|
- border: 1px solid var(--f5Color);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 2vw;
|
|
|
+ overflow: hidden;
|
|
|
background-color: var(--mainColor);
|
|
|
+ break-inside: avoid;
|
|
|
+ /*避免在元素内部插入分页符*/
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 2vw;
|
|
|
|
|
|
.left {
|
|
|
display: flex;
|
|
|
@@ -194,9 +211,7 @@
|
|
|
|
|
|
.list-scroll-view {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin: 0 3vw;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
}
|
|
|
|
