|
@@ -3,49 +3,46 @@
|
|
|
<navBar title="筛选" color="#000" />
|
|
<navBar title="筛选" color="#000" />
|
|
|
<!-- 列表 -->
|
|
<!-- 列表 -->
|
|
|
<view class="list flex justify-between">
|
|
<view class="list flex justify-between">
|
|
|
- <!-- 右侧列表 -->
|
|
|
|
|
- <view class="list-r">
|
|
|
|
|
- <scroll-view scroll-y="true" @scroll="scrolls" scroll-with-animation="true"
|
|
|
|
|
- :scroll-into-view="'bottomView' + current" style="width: 100%; height: 100%; padding-bottom: 20rpx">
|
|
|
|
|
- <block v-if="type">
|
|
|
|
|
- <view class="list-r-item" :id="'bottomView' + index" v-if="list.length > 0 && index != 3"
|
|
|
|
|
- v-for="(item, index) in list" :key="index">
|
|
|
|
|
- <view class="list-r-item-title">
|
|
|
|
|
- {{ item.name }}
|
|
|
|
|
|
|
+ <scroll-view scroll-y="true" @scroll="scrolls" scroll-with-animation="true"
|
|
|
|
|
+ :scroll-into-view="'bottomView' + current" style="width: 100%; height: 100%;">
|
|
|
|
|
+ <block v-if="type">
|
|
|
|
|
+ <view class="list-r-item" :id="'bottomView' + index" v-if="list.length > 0 && index != 3"
|
|
|
|
|
+ v-for="(item, index) in list" :key="index">
|
|
|
|
|
+ <view class="list-r-item-title">
|
|
|
|
|
+ {{ item.name }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="list-r-item-childs flex justify-around align-center flex-wrap">
|
|
|
|
|
+ <view class="list-r-item-childs-i flex justify-center align-center"
|
|
|
|
|
+ v-for="(ite, ind) in item.list" :class="ite.select == true ? 'activeRight' : ''"
|
|
|
|
|
+ @click="selectHyList(index, item.name, ite, ind)" :key="ind">
|
|
|
|
|
+ {{ ite.value }}
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="list-r-item-childs flex justify-around align-center flex-wrap">
|
|
|
|
|
- <view class="list-r-item-childs-i flex justify-center align-center"
|
|
|
|
|
- v-for="(ite, ind) in item.list" :class="ite.select == true ? 'activeRight' : ''"
|
|
|
|
|
- @click="selectHyList(index, item.name, ite, ind)" :key="ind">
|
|
|
|
|
- {{ ite.value }}
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="list-r-item-childs-i flex justify-center align-center"
|
|
|
|
|
- style="height: 0; padding: 0">
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <view class="list-r-item-childs-i flex justify-center align-center"
|
|
|
|
|
+ style="height: 0; padding: 0">
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </block>
|
|
|
|
|
- <block v-else>
|
|
|
|
|
- <view class="list-r-item" :id="'bottomView' + index" v-if="list.length > 0"
|
|
|
|
|
- v-for="(item, index) in list" :key="index">
|
|
|
|
|
- <view class="list-r-item-title">
|
|
|
|
|
- {{ item.name }}
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </block>
|
|
|
|
|
+ <block v-else>
|
|
|
|
|
+ <view class="list-r-item" :id="'bottomView' + index" v-if="list.length > 0"
|
|
|
|
|
+ v-for="(item, index) in list" :key="index">
|
|
|
|
|
+ <view class="list-r-item-title">
|
|
|
|
|
+ {{ item.name }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="list-r-item-childs flex justify-around align-center flex-wrap">
|
|
|
|
|
+ <view class="list-r-item-childs-i flex justify-center align-center"
|
|
|
|
|
+ v-for="(ite, ind) in item.list" :class="ite.select == true ? 'activeRight' : ''"
|
|
|
|
|
+ @click="selectHyList(index, item.name, ite, ind)" :key="ind">
|
|
|
|
|
+ {{ ite.value }}
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="list-r-item-childs flex justify-around align-center flex-wrap">
|
|
|
|
|
- <view class="list-r-item-childs-i flex justify-center align-center"
|
|
|
|
|
- v-for="(ite, ind) in item.list" :class="ite.select == true ? 'activeRight' : ''"
|
|
|
|
|
- @click="selectHyList(index, item.name, ite, ind)" :key="ind">
|
|
|
|
|
- {{ ite.value }}
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="list-r-item-childs-i flex justify-center align-center"
|
|
|
|
|
- style="height: 0; padding: 0">
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <view class="list-r-item-childs-i flex justify-center align-center"
|
|
|
|
|
+ style="height: 0; padding: 0">
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </block>
|
|
|
|
|
- <empty v-if="list.length == 0" />
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </block>
|
|
|
|
|
+ <empty v-if="list.length == 0" />
|
|
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
</view>
|
|
|
<!-- 底部按钮 -->
|
|
<!-- 底部按钮 -->
|
|
|
<view class="bottom flex justify-center">
|
|
<view class="bottom flex justify-center">
|
|
@@ -429,7 +426,7 @@
|
|
|
.list {
|
|
.list {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
- overflow: auto;
|
|
|
|
|
|
|
+ overflow: hidden;
|
|
|
.list-l {
|
|
.list-l {
|
|
|
width: 30%;
|
|
width: 30%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
@@ -443,40 +440,33 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .list-r {
|
|
|
|
|
|
|
+ .list-r-item {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
|
|
- border-left: 1rpx solid #f2f2f7;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
-
|
|
|
|
|
- .list-r-item {
|
|
|
|
|
|
|
+ margin-top: 40rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .list-r-item-title {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- margin-top: 40rpx;
|
|
|
|
|
-
|
|
|
|
|
- .list-r-item-title {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
|
|
+ color: #121212;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ padding-left: 30rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .list-r-item-childs {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ .list-r-item-childs-i {
|
|
|
|
|
+ width: calc((100% - 120rpx) / 2);
|
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
|
+ padding-top: 16rpx;
|
|
|
|
|
+ padding-bottom: 16rpx;
|
|
|
|
|
+ padding-left: 16rpx;
|
|
|
|
|
+ padding-right: 16rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
color: #121212;
|
|
color: #121212;
|
|
|
- font-size: 32rpx;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- padding-left: 30rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .list-r-item-childs {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
-
|
|
|
|
|
- .list-r-item-childs-i {
|
|
|
|
|
- width: calc((100% - 120rpx) / 2);
|
|
|
|
|
- margin-top: 20rpx;
|
|
|
|
|
- padding-top: 16rpx;
|
|
|
|
|
- padding-bottom: 16rpx;
|
|
|
|
|
- padding-left: 16rpx;
|
|
|
|
|
- padding-right: 16rpx;
|
|
|
|
|
- font-size: 26rpx;
|
|
|
|
|
- color: #121212;
|
|
|
|
|
- background: rgba(245, 248, 254, 1);
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- border-radius: 18rpx;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ background: rgba(245, 248, 254, 1);
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ border-radius: 18rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|