qc-xjqxz-retro/src/App.less

.container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 750px;
    overflow: hidden;
    padding-bottom: 1rem;
}

.bg-box,
.bg-box .bg {
    position: absolute;
}

.bg-box {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    width: 7.5rem;
    height: 44.24rem;
    overflow: hidden;

    .bg-01 {
        width: 7.5rem;
        height: 4.24rem;
        background: url(./assets//image/bg_01.jpg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 7.5rem 4.24rem;
    }

    .bg-02 {
        width: 7.5rem;
        height: 5rem;
        background: url(./assets//image/bg_02.jpg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 7.5rem 5rem;
    }

    .bg-03 {
        width: 7.5rem;
        height: 10rem;
        background: url(./assets//image/bg_03.jpg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 7.5rem 10rem;
    }

    .bg-04 {
        width: 7.5rem;
        height: 12rem;
        background: url(./assets//image/bg_04.jpg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 7.5rem 12rem;
    }

    .bg-05 {
        width: 7.5rem;
        height: 13rem;
        background: url(./assets//image/bg_05.jpg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 7.5rem 13rem;
    }

    .bg.bg-top {
        width: 7.5rem;
        height: 7.25rem;
        background: url(./assets//image/newslist_top_pic.jpg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 7.5rem 7.25rem;
    }

    .bg.bg-btm {
        bottom: 0;
        width: 7.5rem;
        height: 4.06rem;
        background: url(./assets//image/newslist_btm_pic.jpg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 7.5rem 4.06rem;
    }
}

.mainbody {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 6rem;
}

.age-tip {
    position: absolute;
    top: 1.18rem;
    right: .2rem;
    display: inline-block;
    background: url(./assets/image/sp_public.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 5.03rem 4.87rem;
    width: .92rem;
    height: 1.2rem;
    background-position: -2.72rem .02rem;
}

.news-nav {
    width: 7rem;
    margin: 6.78rem auto 0;
    overflow: hidden;

    .fixed {
        position: fixed;
        z-index: 2;
        /* 确保它在其他内容上方 */
        transition: top 0.3s;
        top: 0;
        z-index: 2;
        background-color: #f8fbfd;
        width: 7.5rem;
        margin-left: -0.25rem;
        padding: 10px 0.5rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
}

.location-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    font-size: .22rem;
    color: #646464;

    .goback {
        display: inline-block;
        background: url(./assets/image/sp_public.png);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 5.03rem 4.87rem;
        width: .92rem;
        height: .44rem;
        background-position: -3.68rem .02rem;
        margin-right: .2rem;
        cursor: pointer;

        a {
            color: #646464;
        }
    }
}

.news-nav-con {
    position: relative;
    margin: .2rem auto 0;

    .news-nav-con-strategy {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.1rem;

        .left {
            display: inline-block;
            background: url(./assets/image/sp_public.png);
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 5.03rem 4.87rem;
            width: .15rem;
            height: .24rem;
            background-position: -4.88rem .02rem;
        }

        .right {
            display: inline-block;
            background: url(./assets/image/sp_public.png);
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 5.03rem 4.87rem;
            width: .15rem;
            height: .24rem;
            background-position: -4.65rem -1.12rem;
        }
    }

    .strategy-nav {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        height: 0.5rem;
        line-height: 0.5rem;
        max-width: 6.4rem;
        box-sizing: border-box;
    }

    ul {
        font-size: .24rem;
        color: #7d7d7d;
        margin-bottom: -1px;
        font-weight: 900;
        display: flex;
        height: 100%;

        li {
            padding: 0 .05rem;
            margin: 0 .1rem;
            box-sizing: border-box;
            height: 100%;
            cursor: pointer;
            outline: none;
            display: inline-flex;
            align-items: center;
            height: 100%;
            white-space: nowrap;
            /* 防止文本换行 */

            &.active {
                color: #78b6c8;
                border-bottom: .03rem solid #78b6c8;
            }
        }
    }
}

.news {
    background-color: #f8fbfd;

    .age-tip {
        top: 4.7rem;
        left: .15rem;
    }

    .news-nav-con {
        border-bottom: 1px solid #dcdcdc;
        text-align: center;

        ul {
            font-size: .24rem;
            color: #7d7d7d;
            margin-bottom: -1px;
            font-weight: 900;
            display: block;
            height: auto;

            li {
                display: inline-block;
                padding: .35rem .05rem;
                margin: 0 .4rem;
                cursor: pointer;
            }
        }
    }

    .news-tit-text {
        margin: 10px 0;
        font-weight: 500;

    }
}

.strategy {
    .bg-box .bg.bg-top {
        width: 7.5rem;
        height: 7.25rem;
        background: url(/src/assets/image/strategy_top_pic.jpg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 7.5rem 7.25rem;
    }
}

.sub-news-nav-con {
    margin: 0.08rem auto 0;


    .news-nav-con-strategy {

        .left {
            transform: scale(0.8);
        }

        .right {
            transform: scale(0.8);
        }
    }

    .strategy-nav {
        height: 0.38rem;
        line-height: 0.38rem;
    }

    ul {
        font-size: 0.18rem;

        li.active {
            border-bottom: 0.02rem solid #78b6c8;
        }
    }
}

.article-box {
    margin: .5rem auto 0;
    width: 7rem;

    .article-tit {
        text-align: center;
        color: #646464;
        font-size: .22rem;
        padding-bottom: .3rem;
        border-bottom: 1px solid #dcdcdc;

        h1 {
            margin: 0 auto;
            width: 6rem;
            font-size: .32rem;
            font-weight: 900;
            margin-bottom: .1rem;
        }
    }

    article {
        padding: .5rem .5rem .6rem;
        line-height: 1.8;
    }
    
}

.affix .ant-affix {
    z-index: 2;
}


.news-con {
    margin-top: .2rem;
    margin-bottom: 2rem;

    .ant-list-item {
        cursor: pointer;
    }
}