.recommend .header { position: relative; } .recommend .header .headerBg { position: absolute; z-index: -2; width: 100%; height: 100%; background-color: white; } .recommend .header .swiper { margin: 0 auto; width: 710rpx; height: 216rpx; border-radius: 20rpx; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } .recommend .header .swiper .swiper-item { width: 100%; height: 100%; border-radius: 20rpx; overflow: hidden; } .recommend .firstClassify { padding-top: 34rpx; width: 100%; white-space: nowrap; background-color: white; } .recommend .firstClassify .firstBox { text-align: center; display: inline-block; width: 98rpx; padding: 0rpx 20rpx; } .recommend .firstClassify .firstBox .icon { width: 60rpx; height: 58rpx; } .recommend .firstClassify .firstBox .name { margin-top: 6rpx; font-weight: bold; font-size: 24rpx; } .recommend .demo-text-1 { background-color: rebeccapurple; } .recommend .demo-text-2 { background-color: #649933; } .recommend .demo-text-3 { background-color: #e4772e; } .recommend .search { position: relative; background-color: white; padding: 30rpx 20rpx 22rpx; border-bottom-left-radius: 30rpx; border-bottom-right-radius: 30rpx; } .recommend .search .searchImg { position: absolute; top: 42rpx; left: 42rpx; width: 24rpx; height: 24rpx; } .recommend .search .input { width: 100%; height: 50rpx; border-radius: 50rpx; background-color: #F2F6FC; box-sizing: border-box; } .recommend .selectType { padding: 30rpx; display: flex; align-items: center; justify-content: space-between; } .recommend .selectType .type { padding: 14rpx 0rpx; width: 200rpx; box-sizing: border-box; text-align: center; border: 1rpx solid #9f9f9fa4; border-radius: 50rpx; color: #1A1A1A; font-size: 24rpx; } .recommend .selectType .currentType { border: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; background-color: white; font-weight: bold; }