.search-bar { margin-top: 101rpx; width: 100%; height: 100rpx; background: #fff; /* border-top: 1rpx solid #f6f6f6; */ box-sizing: border-box; padding: 0 20rpx; display: flex; align-items: center; } .search-bar .category-type { width: calc(100% - 110rpx); height: 60rpx; /* background: #F4F4F4; */ display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 20rpx; position: relative; } .search-bar .category-type button { width: 155rpx !important; height: 55rpx; border-radius: 28rpx; border: 2rpx solid #29B9A5; font-weight: 500; background: #fff; font-size: 28rpx; color: #29B9A5; padding: 0; margin: 0; line-height: 55rpx; min-height: 55rpx !important; box-sizing: content-box !important; } .search-bar .category-type .select-btn { background: #29B9A5; color: #fff; } .search-bar .category-type .hover-btn { background: #29B9A5; color: #fff; } .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; } /* 列表样式 */ .list{ background-color: #fff; } .list-all{ height: 79rpx; padding: 35rpx 20rpx; background-color: #fff; } .list-all .logo{ float: left; width: 46rpx; height: 37rpx; } .list-all .logo image{ width: 100%; height: 100%; } .list-all .info{ float: left; margin-left: 11rpx; } .list-all .info .info-top{ height: 37rpx; font-size:32rpx; line-height: 37rpx; font-weight:500; color:rgba(51,51,51,1); } .list-all .info .info-bottom{ margin-top: 20rpx; height: 26rpx; font-size:26rpx; line-height: 26rpx; font-weight:500; color:rgba(173,174,179,1); } .list-all .right{ margin-top: 8rpx; float: right; height: 80rpx; width: 90rpx; } .list-all .right .right-top{ height:32rpx; font-size:32rpx; line-height: 32rpx; text-align: center; font-weight:500; color:rgba(240,133,38,1); } .list-all .right .info-bottom{ margin-top: 9rpx; height:22rpx; font-size:22rpx; line-height: 22rpx; font-weight:500; color:rgba(182,186,198,1); } .line{ margin-left: 77rpx; margin-right: 20rpx; height: 1rpx; background:rgba(241,241,241,1); }