.search-bar { width: 100%; height: 120rpx; background: #fff; border-top: 1rpx solid #f6f6f6; box-sizing: border-box; padding: 0 20rpx; display: flex; align-items: center; } .search-bar-top{ margin-top: 100rpx; } .search-bar .condition { width: calc(100% - 110rpx); height: 60rpx; border-radius: 30rpx; /* border-radius: 6rpx; */ background: #F4F4F4; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 20rpx; position: relative; } .search-bar .condition .option-list { position: absolute; z-index: 100; width: 100%; left: 0; top: 60rpx; box-sizing: border-box; background: #f4f4f4; padding: 0rpx 20rpx; margin-top: 4rpx; border-radius: 6rpx; } .option-list .list-item { background: #f4f4f4; color: #BABABA; font-size: 26rpx; height: 60rpx; display: flex; align-items: center; justify-content: space-between; } .search-bar .condition .select-condition { color: #BABABA; font-size: 26rpx; } .search-bar .condition .trigger { width: 0; height: 0; border: 12rpx solid transparent; border-top: 15rpx solid #c2c2c2; position: relative; top: 8rpx; transform: rotate(0deg); transform-origin: center 7rpx; transition: transform 0.4s; } .search-bar .condition .trigger.reverse { transform: rotate(180deg); transform-origin: center 7rpx; transition: transform 0.4s; } .search-bar .order { height: 100%; width: 100rpx; display: flex; align-items: center; margin-left: 20rpx; position: relative; perspective: 3000; } .search-bar .order .front { position: absolute; width: 100rpx; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotateY(180deg); transform-origin: center; transition: transform 0.4s linear; visibility: hidden; left: 0; top: 0; } .search-bar .order .front.select { transform: rotateY(0deg); transition: transform 0.4s linear; visibility: visible; } .search-bar .order .back { position: absolute; width: 100rpx; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotateY(-180deg); transition: transform 0.4s linear; visibility: hidden; left: 0; top: 0; } .search-bar .order .back.select { transform: rotateY(0deg); transition: transform 0.4s linear; visibility: visible; } .search-bar .order text { font-size: 26rpx; color: #29B9A5; display: inline-block; } .search-bar .order .front image { width: 28rpx; height: 22rpx; margin-left: 8rpx; } .search-bar .order .back image { width: 28rpx; height: 22rpx; margin-right: 8rpx; } /* end */ .list-item { width: 100%; background: #fff; box-sizing: border-box; padding: 0 20rpx; border-bottom: 1rpx solid #F1F1F1; } .hover-list-item { background: #f7f7f7; } .list-item .street { width: 100%; height: 68rpx; display: flex; align-items: flex-end; } .list-item .street .order { width: 50rpx; height: 32rpx; border-radius: 8rpx 6rpx; color: #fff; font-size: 30rpx; font-weight: bold; text-align: center; line-height: 32rpx; background: #FD6A62; transform: skewX(-12deg); margin-right: 10rpx; } .list-item .street .street-name { font-size: 30rpx; color: #333; position: relative; top: 4rpx; } /* 九宫格 */ .jgg{ width: 100%; margin-top: 3rpx; padding-bottom: 40rpx; } .jgg .line{ height: 125rpx; width: 100%; } .jgg .line .center{ height: 125rpx; width: 33.3333%; float: left; } .jgg .line .center .num-top{ height: 100rpx; width: 100%; text-align: center; font-size:38rpx; font-weight:bold; color:rgba(41,185,165,1); line-height:138rpx; } .jgg .line .center .num-bottom{ height: 25rpx; width: 100%; text-align: center; font-size:25rpx; font-weight:500; color:rgba(146,148,155,1); line-height:25rpx; } .height-line{ height: 1rpx; background: #F1F1F1; }