index.less

@imgSrc: '@/assets/images/demonstration';

.right_item {
    .r_title_wrap {
        width: 100%;
        height: 123px;
        background: url('@{imgSrc}/新产品动态bg.png') no-repeat center center;
        background-size: 100% 100%;
        padding: 30px 0 0 25px;

        .r_title_sub {
            background: url('@{imgSrc}/tip.png') no-repeat left center;
            background-size: 35px 36px;
            padding-left: 35px;
            font-size: 16px;
            height: 36px;
            line-height: 36px;
        }

        .r_title {
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            padding-left: 5px;
            line-height: 32px;
            letter-spacing: 1px;
            background: linear-gradient(0deg, #92D2FF 0%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .r_list {
        height: 350px;
        overflow: hidden;

        .r_list_item[type='jump']:hover {
            // bottom: -8px;
            filter: brightness(130%)
        }

        .r_list_item[type='jump']:hover .r_list_item_tip {
            opacity: 1;
        }


        .r_list_item:not(:last-child) {
            margin-bottom: 10px;
        }

        .r_list_item {
            width: 370px;
            height: 48px;
            font-size: 16px;
            letter-spacing: 1px;
            text-align: center;
            font-weight: bold;
            line-height: 46px;
            position: relative;
            left: 0;
            color: #fff;
            transition: all 0.3s;
        }

        .r_list_item[type='jump'] {
            cursor: pointer;
        }

        .r_list_item[type='jump']:active {
            opacity: 0.8;
        }

        .r_list_item_tip {
            width: 37px;
            height: 40px;
            background: url('@{imgSrc}/新产品动态_选中.png') no-repeat center center;
            background-size: 100% 100%;
            position: absolute;
            transition: all 0.3s;
            top: 0;
            left: -30px;
            opacity: 0;

        }

        .r_list_item[rIndex='r_1'] {
            background: url('@{imgSrc}/bg1.png') no-repeat left center;
            background-size: 100% 100%;
        }


        .r_list_item[rIndex='r_2'] {
            background: url('@{imgSrc}/bg2.png') no-repeat left center;
            background-size: 100% 100%;
        }


        .r_list_item[rIndex='r_3'] {
            background: url('@{imgSrc}/bg3.png') no-repeat left center;
            background-size: 100% 100%;
        }


        .r_list_item[rIndex='r_4'] {
            background: url('@{imgSrc}/bg4.png') no-repeat left center;
            background-size: 100% 100%;
        }

        .r_list_item[rIndex='r_5'] {
            background: url('@{imgSrc}/bg5.png') no-repeat left center;
            background-size: 100% 100%;
        }

        .r_list_item[rIndex='r_0'] {
            background: url('@{imgSrc}/bg6.png') no-repeat left center;
            background-size: 100% 100%;
        }

        .r_list_item[name='敬请期待'] {
            background: url('@{imgSrc}/敬请期待.png') no-repeat left center;
            background-size: 100% 100%;
        }

    }



}

:global {
    .right_item {
        .swiper-wrapper {
            .swiper-slide {
                width: 100%;
                height: 58px;
            }
        }
    }

}