.select{ padding: 20rpx 0; display: flex; border-bottom: 1px solid #ddd; font-size: 36rpx; } .select-btn{ flex: 1; align-items: center; justify-content: center; display: flex; border-right: 1px solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 28rpx; } .select-btn:last-child{ border: none } .venue-list{ width: 690rpx; margin: 0 auto; padding-bottom: 20rpx; } .venue-box{ display: flex; justify-content: space-between; padding: 15rpx; border: 1px solid #ddd; border-radius: 10rpx; margin-top: 20rpx; } .venue-pic{ width: 35%; height: 180rpx; border-radius: 10rpx; overflow: hidden; } .venue-img{ width: 100%; height: 100%; } .venue-info{ width: 63%; } .venue-title{ display: flex; justify-content: space-between; } .venue-name{ display: inline-block; font-size: 34rpx; } .venue-pay{ background: green; color: #fff; display: inline-block; width: 50rpx; text-align: center; font-size: 36rpx; } .venue-address{ font-size: 28rpx; color: #BBBBBB; margin-top: 20rpx; } .hide-select{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6) } .select-box{ background: #fff; width: 100%; padding: 20rpx 30rpx; box-sizing: border-box; } .select-btn-box{ display: inline-block; width: 158rpx; height: 60rpx; color: #5E5E5E; text-align: center; line-height: 60rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10rpx; box-sizing: border-box; margin-right: 10rpx; margin-bottom: 10rpx; background: #CBCBCB; border-radius: 35rpx; } .select-btn-box.active{ background:rgba(75,122,254,1); font-weight: bold; color: #fff; } .select-btn-box:nth-child(4n){ margin-right: 0 } .no-data{ padding: 150rpx 0; text-align: center; } .no-data image{ width: 250rpx; height: 250rpx; }