.guide-container{ padding-top:262rpx } .list-view{ height:calc(100vh - 272rpx) } .select{ position:fixed;top:0; width:100%; z-index:3 } .search-collect,.search-left,.search-right,.search-wrapper{ display:flex; align-items:center } .search-wrapper{ width:100%; box-sizing:border-box; padding:24rpx 20rpx 10rpx 20rpx } .search-wrapper .search-left{ width:580rpx; height:70rpx; box-sizing:border-box; margin-right:20rpx; padding:0 20rpx; background:#f5f6f7; border-radius:10rpx; -webkit-border-radius:10rpx; -moz-border-radius:10rpx; -ms-border-radius:10rpx; -o-border-radius:10rpx } .search-wrapper .search-left image{ flex-shrink:0; display:block; width:26rpx; height:30rpx; box-sizing:border-box; margin-right:20rpx } .search-wrapper .search-left input{ flex:1;height:100%; font-size:26rpx; font-weight:500; color:#333 } .search-wrapper .search-left .input-placeholder{ font-size:26rpx; font-weight:500; color:#999 } .search-wrapper .search-right{ font-size:34rpx; font-weight:500; color:#333 } .search-wrapper .search-right image{ display:block; width:28rpx; height:24rpx; box-sizing:border-box; margin-right:8rpx } .m-filter{ display:flex; justify-content:space-between; align-items:center; width:420rpx; height:58rpx; box-sizing:border-box; margin:20rpx 0 0 20rpx; padding:0 20rpx; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:#f4f4f4; border-radius:29rpx; -webkit-border-radius:29rpx; -moz-border-radius:29rpx; -ms-border-radius:29rpx; -o-border-radius:29rpx } .m-filter text{ width:100%; font-size:26rpx; font-family:Source Han Serif SC; font-weight:500; color:#bababa } .m-filter image{ flex-shrink:0; display:block; width:32rpx; height:32rpx } .tabs-wrapper{ position:relative; width:100%; min-height:89rpx; box-sizing:border-box; padding:30rpx 20rpx 0 20rpx; box-shadow:0rpx 10rpx 20rpx -5rpx rgba(217,217,217,.43) } .tabs-wrapper .tabs{ width:100%; white-space:nowrap } .tabs-wrapper .tabs .tabs-list{ display:flex; align-items:center; box-sizing:border-box } .tabs-wrapper .tabs .tabs-list .tabs-item{ position:relative; height:60rpx; box-sizing:border-box; margin-right:39rpx; padding-bottom:26rpx; font-size:28rpx; font-family:Source Han Serif SC; font-weight:400;color:#999; line-height:1 } .tabs-wrapper .tabs .tabs-list .tabs-on{ font-weight:500; color:#333; transition:all .2s; -webkit-transition:all .2s; -moz-transition:all .2s; -ms-transition:all .2s; -o-transition:all .2s } .tabs-wrapper .tabs .tabs-list .tabs-on::after{ content:''; position:absolute; left:50%; bottom:0; width:50rpx; height:6rpx; margin-left:-25rpx; background:#e2281b; border-radius:3rpx; -webkit-border-radius:3rpx; -moz-border-radius:3rpx; -ms-border-radius:3rpx; -o-border-radius:3rpx } .tabs-wrapper .tabs-down{ position:absolute; top:4rpx;right:0rpx; display:flex; justify-content:center; align-items:center; width:80rpx; height:80rpx; background:linear-gradient(90deg,rgba(255,255,255,0) 0,#fff 100%) } .tabs-wrapper .tabs-down image{ display:block; width:24rpx; height:13rpx } .tabs-no{ height:0; overflow:hidden; transition:height .5s; -webkit-transition:height .5s; -moz-transition:height .5s; -ms-transition:height .5s; -o-transition:height .5s } .filter-wrapper{ width:100%; height:0; overflow:scroll; transition:height .5s; -webkit-transition:height .5s; -moz-transition:height .5s; -ms-transition:height .5s; -o-transition:height .5s } .filter-wrapper .filter-arrow{ display:flex; justify-content:flex-end; align-items:center; box-sizing:border-box } .filter-wrapper .filter-arrow view{ display:flex; justify-content:center; align-items:center; box-sizing:border-box; width:80rpx; height:80rpx } .filter-wrapper .filter-arrow image{ display:block; width:24rpx; height:13rpx } .filter-wrapper .filter-list{ display:flex; align-items:center; flex-wrap:wrap; width:100%; box-sizing:border-box; padding-left:20rpx } .filter-wrapper .filter-list .filter-item{ height:46rpx; box-sizing:border-box; margin-right:20rpx; margin-bottom:28rpx; padding:0 24rpx; font-size:26rpx; font-weight:400; color:#333; text-align:center; line-height:46rpx; background:#f4f4f4; border:1rpx solid #f7f7f7; border-radius:23rpx; -webkit-border-radius:23rpx; -moz-border-radius:23rpx; -ms-border-radius:23rpx; -o-border-radius:23rpx } .show-wrapper{ height:440rpx; transition:height .5s; -webkit-transition:height .5s; -moz-transition:height .5s; -ms-transition:height .5s; -o-transition:height .5s } .tabs-mask{ position:absolute; top:0; right:0; z-index:2; width:100%; height:260rpx; background:rgba(0,0,0,.3); transition:height .5s; -webkit-transition:height .5s; -moz-transition:height .5s; -ms-transition:height .5s; -o-transition:height .5s } .show-mask{ height:100vh; transition:height .5s; -webkit-transition:height .5s; -moz-transition:height .5s; -ms-transition:height .5s; -o-transition:height .5s } .m-list .item .title{ width:100%; text-overflow:-o-ellipsis-lastline; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical } .m-nothing{ padding-top:200rpx } .m-nothing image{ margin:0 auto }