shixian.shi
2023-11-23 adc88bd9e76644badbbe006913addfa7cbe5d89c
web-pages/src/views/home/assets/css/banner.scss
New file
@@ -0,0 +1,78 @@
.banner-comp{
    width: 100%;
    height: p(942);
    .swiper-container{
        width: 100%;
        height: 100%;
    }
    .swiper-pagination{
        left: p(80);
        width: p(15) !important;
        top: 48% !important;
        // overflow: initial;
        .swiper-pagination-bullet{
            width: p(15);
            height: p(15) !important;
            border-radius: p(3);
            background: #1664ff !important;
            opacity: 1
        }
        .swiper-pagination-bullet-active-next{
            transform: scale(.33)
        }
        .swiper-pagination-bullet-active-prev{
            transform: scale(.33)
        }
    }
    .hiddenPagination{
        .swiper-pagination{
            display: none;
        }
    }
    .item{
        width: 100%;
        height: 100%;
        position: relative;
        .banner-bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .content{
            top: p(330);
            left: p(216);
            position: absolute;
            z-index: 2;
            display: flex;
            flex-direction: column;
            .yjqd{
                letter-spacing: 3px;
               color: #ffffff;
                font-size: p(68);
            }
            .text{
                font-size: p(17);
                letter-spacing: 1px;
               color: #d4d4d4;
            }
            .lxwm{
                color: #ffffff;
                font-size: p(16);
                width: p(124);
                height: p(38);
                background-color: #165dff;
                border-radius: 4px;
                text-align: center;
                line-height: p(38);
                margin-top: p(33);
                cursor: pointer;
            }
            .lxwm:hover{
                background-color: #316fff;
            }
        }
    }
}