reader/pages/index/index.less

.recommend {
    .header {
        position: relative;

        .headerBg {
            position: absolute;
            z-index: -2;
            width: 100%;
            height: 100%;
            background-color: white;
        }

        .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;

            .swiper-item {
                width: 100%;
                height: 100%;
                border-radius: 20rpx;
                overflow: hidden;
            }

        }
    }

    .firstClassify {
        padding-top: 34rpx;
        width: 100%;
        white-space: nowrap;
        background-color: white;

        .firstBox {
            text-align: center;
            display: inline-block;
            width: 98rpx;
            padding: 0rpx 20rpx;

            .icon {
                width: 60rpx;
                height: 58rpx;
            }

            .name {
                margin-top: 6rpx;
                font-weight: bold;
                font-size: 24rpx;
            }
        }
    }

    .demo-text-1 {
        background-color: rebeccapurple
    }

    .demo-text-2 {
        background-color: rgb(100, 153, 51)
    }

    .demo-text-3 {
        background-color: rgb(228, 119, 46)
    }

    .search {
        position: relative;
        background-color: white;
        padding: 30rpx 20rpx 22rpx;
        border-bottom-left-radius: 30rpx;
        border-bottom-right-radius: 30rpx;

        .searchImg {
            position: absolute;
            top: 42rpx;
            left: 42rpx;
            width: 24rpx;
            height: 24rpx;
        }

        .input {
            width: 100%;
            height: 50rpx;
            border-radius: 50rpx;
            background-color: #F2F6FC;
            box-sizing: border-box;
        }
    }

    .selectType {
        padding: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .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;
        }

        .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;
        }
    }
}