zhongze-front/src/pages/HogoodCoffee/index.less

//pc端样式
.hg-header {

    width: 100%;
    position: fixed;
    z-index: 9;
    transition: all 0.3s ease-in-out;
    background-color: #fff;
    .headerPC {
        height: 120px;
        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.15);
        padding: 0 114px;
    }

    .logo {
        transform: scale(.8);
        width: 339px;
        height: 106px;
        background: url("../common/images/hgkf.png") no-repeat center;
        background-size: 339px 106px;
    }

    .menu {
        height: 100%;
        display: flex;
        align-items: center;

        &>div {
            display: inline-block;
            padding: 0 30px;
            position: relative;
            height: 70px;
            cursor: pointer;

            &>a {
                line-height: 70px;
                z-index: 11;
                transition: all .3s ease;
                font-size: 26px;
            }

            &:hover {
                &>a {
                    color: #4D048C;
                }
            }
        }

        .menuClicked {
            &::before {
                display: none;
            }

            &>a {
                color: #4D048C;
                font-weight: bold;
            }
        }
    }
}

.hg-headerMb {
    .logo {
        display: none;
    }
}

.main {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;

    .content {
        .title {
            font-size: 70px;
            color: #000000;
            text-align: center;
            font-family: 'SemiBold';
            padding: 210px 0 50px 0;
        }
        .contents{
            width: 1300px;
            margin: 0 auto;
            line-height: 50px;
            font-size: 26px;
            color: #000;
            .flexBox{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 50px;
            }
            .p1{
                margin-bottom: 50px;
                line-height: 50px;
            }
            .p2{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 65px;
                .cont{
                    flex: 1;
                    margin-right: 44px;
                }
                img{
                    width: 568px;
                    height: 386px;
                }
            }
            .p3{
                width: 380px;
            }
            .p4{
                font-size: 50px;
                font-weight: bold;
                text-align: center;
                font-family: "思源";
                padding-right: 25px;
                span{
                    font-weight: 400;
                    font-family: "DIN-Medium";
                    white-space: nowrap;
                }
            }
            .p5{
                width: 898px;
                line-height: 50px;
            }

            .p6{
                font-size: 26px;
                font-weight: 700;
            }
        }
    }

    .atlas {
        .title {
            font-size: 70px;
            color: #000000;
            text-align: center;
            font-family: 'SemiBold';
            padding: 140px 0 50px 0;
        }

        .atlasCon {
            width: 1300px;
            margin: 0 auto 85px;

            .tit {
                width: 100%;
                font-size: 30px;
                text-align: center;
                margin-bottom: 35px;

                span {
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        width: 10px;
                        height: 10px;
                        border-radius: 50px;
                        background-color: #4D048C;
                        left: -15px;
                        top: 50%;
                        margin-top: -5px;
                    }
                }
            }

            .imgCon {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .imgLi {
                    width: 640px;
                    height: 450px;
                    position: relative;
                    margin-bottom: 20px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    span {
                        font-size: 20px;
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        bottom: 15px;
                        left: 0;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                    }
                }
            }
        }
    }

    .chart {
        width: 100%;
        height: 920px;
        max-width: 1920px;
        // background: url("../common/images/tbBj.png") no-repeat center;
        // background-size: 1920px 838px;
        // background-position: 0 0;
        position: relative;

        .budai{
            position: absolute;
            width: 167px;
            height: 150px;
            left: 0;
            bottom: 120px;
        }
        .yezi{
            position: absolute;
            width: 186px;
            height: 440px;
            right: 0;
            top: 0;
        }
        .title {
            font-size: 70px;
            color: #000000;
            text-align: center;
            font-family: 'SemiBold';
            padding: 150px 0 0 0;
        }

        .tbGif {
            width: 1600px;
            height: 660px;
            margin: 0 auto;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            video {
                width: 100%;
                height: 100%;

            }
        }
    }
}

p{
    margin: 0;
    padding: 0;
}
.banner {

    width: 100%;
    height: 1079px;
    background: url("../common/images/bannerBj.jpg") no-repeat center;
    background-size: 100% 1079px;
    position: relative;
    .title {
        font-size: 70px;
        color: #000000;
        text-align: center;
        font-family: 'SemiBold';
        padding: 120px 0 50px 0;
        z-index: 2;
        position: relative;
    }
    .gradientBg{
        width: 100%;
        height: 458px;
        background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
    .bannerSwiper {
        width: 1100px;
        height: 400px;
        margin: 0 auto;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .bannerS1 {
            img {
                display: none;
            }
        }

        .title {
            text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.28);
        }

       

        .swiper-button-disabled {
            cursor: no-drop;
            background: transparent;
            color: #ecf6fb;
            opacity: 0.6;

            &:hover {
                color: #ecf6fb;
                background: transparent;
            }
        }

    }
    .btn-prev,
    .btn-next {
        position: absolute;
        top: 258px;
        left: 50%;

        width: 85px;
        height: 85px;
        z-index: 2;
        text-align: center;
        color: #000000;
        background: transparent;
        transition: all .3s ease-in-out;
        cursor: pointer;
        border-radius: 45px;
        line-height: 85px;
        box-sizing: border-box;
        border: 1px solid #000000;

        span {
            font-size: 32px;
            display: inline-block;
            line-height: 85px;
            // transform: rotate(90deg);
        }

        &:hover {
            color: #fff;
            background: #4D048C;
            border-color: #4D048C;
        }
    }

    .btn-prev {
        margin-left: -650px;
    }

    .btn-next {
        margin-left: 575px;
    }
    .swiper-slide{
        height: 100%;
    }
    .swiper-slide-active{
        .slideCon{
            .swiper-title{
                background-color: #4D048C;
                color: #fff;
                border-radius: 50%;
                position: relative;
                &::after{
                    content: '';
                    position: absolute;
                    left: -6px;
                    top: -6px;
                    width: 90px;
                    height: 90px;
                    border: 1px solid #4D048C;
                    border-radius: 50%;
                }
                &::before{
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 86px;
                    width: 1px;
                    height: 100px;
                    background-color: #4D048C;
                }
                .pop{
                    // display: block;
                    opacity: 1;
                    visibility: visible; /* 使元素可见 */
                }
             }   
        }
     
    }

    .slideCon {
        // width: 175px;
        max-width: 1300px;
        height: 100%;
        box-sizing: border-box;
        margin: 0 auto;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        display: flex;
        padding-top: 12px;
        // align-items: center;
        // justify-content: center;
        cursor: pointer;

        .swiper-title {
            width: 80px;
            height: 80px;
            font-size: 26px;
            color: #000;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            font-family: DIN, DIN;

            .pop{
                // display: none;
                width: 725px;
                height: auto;
                background-color: #4D048C;
                color: #fff;
                line-height: 1.5;
                padding: 20px 20px;
                border-radius: 15px;
                position: absolute;
                left: -328.5px;
                top: 193px;
                box-sizing: border-box;
                font-size: 26px;
                opacity: 0;
                visibility: hidden; /* 使元素不可见 */
                transition: opacity .2s linear, visibility .2s linear; /* 添加过渡效果 */
                font-family: "微软雅黑";
                
                &::after{
                    content: '';
                    position: absolute;
                    left: -7px;
                    top: -7px;
                    width: 737px;
                    height: calc(100% + 12px);
                    border: 1px solid #4D048C;
                    border-radius: 22px;
                }
                span{
                    font-weight: 700;
                    font-family: DIN, DIN;
                }
            }
        }
        .swiper-title2{
            .pop{
                width: 725px;
                height: 160px;
                &::after{
                    content: '';
                    position: absolute;
                    left: -7px;
                    top: -7px;
                    width: 737px;
                    height: 172px;
                    border: 1px solid #4D048C;
                    border-radius: 22px;
                }
            }
        }
        
    }
    .line{
        width: 80px;
        height: 1px;
        background-color: #000;
        margin-top: 40.5px;
    }

    .bannerFooter{
        width: 100%;
        height: 115px;
        background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 24px;
        color: #FFFFFF;
        text-align: center;
        line-height: 115px;
    }
}


@media screen and (min-width: 1500px) and (max-width: 1900px) {
    .hg-header{
        .headerPC{
            height: 80px;
            padding: 0 50px;
        }
        .logo{
            transform: scale(0.7);
        }
        .menu {
            &>div {
                &>a {
                    font-size: 20px;
                }
            }
        }
    }
    .main{
        
        .chart{
            background-size: 100% auto;
            .tbGif{
                width: 80%;
                height: auto;
            }
        }
    }
}
@media screen and (min-width: 1300px) and (max-width: 1600px) {
    .hg-header{
        .headerPC{
            height: 80px;
            
            padding: 0 50px;
        }
        .logo{
            transform: scale(0.7);
            margin-left: -135px;
        }
        .menu {
            &>div {
                &>a {
                    font-size: 20px;
                }
            }
        }
    }
    .main{
        .content{
            .contents{
                width: 95%;
                .p6{
                    font-size: 22px;
                    white-space: nowrap;
                }
                .p3{
                    width: 600px;
                }
                .p5{
                    width: 1100px;
                }
                .p4{
                    padding-right: 0;
                }
            }
        }
        .chart{
            background-size: 100% auto;
            .tbGif{
                width: 80%;
                height: auto;
            }
        }
    }
}

@media screen and (min-width: 801px) and (max-width: 1300px) {
    .hg-header{
        .headerPC{
            height: 80px;
            padding: 0 50px;
        }
        .logo{
            transform: scale(0.7);
            margin-left: -115px;
        }
        .menu {
            &>div {
                &>a {
                    font-size: 18px;
                }
            }
        }
    }
    .main{
        .atlas{
            .atlasCon{
                width: 95%;
                    margin: 0 auto;
                .imgCon{
                    
                    .imgLi{
                        height: auto;
                        width: calc(50% - 20px);
                    }
                }
            }
        }
        .content{
            .contents{
                width: 95%;
                .p6{
                    font-size: 22px;
                }
                .p2{
                    img{
                        transform: scale(0.8);
                    }
                }
            }
        }
        .chart{
            background-size: 100% auto;
            .tbGif{
                width: 80%;
                height: auto;
            }
        }
    }
    .banner{
        .bannerSwiper{
            transform: scale(0.8);
        }
        .btn-prev,
        .btn-next{
            top: 283px;
            transform: scale(0.8);

        }
        .btn-prev{
            margin-left: -525px;
        }
        .btn-next{
            margin-left:445px ;
        }
    }

}

// @media screen and (min-width:800px) {

//     .goTop {
//         .goTopBtn {
//             background: #ffffff;

//             .btnShow {
//                 .btnIcon {
//                     background-color: #0056A7;
//                 }
//             }

//             &:hover {
//                 background: #ffffff;

//             }
//         }
//     }
// }

.mTxt {
    display: none;
}

//移动端样式
// @media screen and (max-width:800px) {
//     .pcTxt {
//         display: none;
//     }

//     .mTxt {
//         display: block;
//     }

//     .banner {
//         width: 100%;
//         height: 100vh;

//         .swiper {
//             width: 100%;
//             height: 100%;
//         }

//         .slideCon {
//             padding: 0 15px;
//             padding-top: 130px;
//             height: auto;

//             .title {
//                 font-size: 30px;
//                 line-height: 48px;

//                 br {
//                     display: block;
//                 }
//             }
//         }

//         .btn-prev,
//         .btn-next {
//             display: none;
//         }

//         .bannerSwiper {
//             .bannerS1 {
//                 img {
//                     display: block;
//                 }

//                 video {
//                     display: none;
//                 }
//             }

//             .swiper-pagination {
//                 display: block;
//                 bottom: 60px;

//                 .swiper-pagination-bullet {
//                     width: 6px;
//                     height: 6px;
//                     margin: 0 6px;

//                     &::before {
//                         left: -3px;
//                         top: -3px;
//                         width: 10px;
//                         height: 10px;
//                     }
//                 }
//             }
//         }
//     }


//     .society {
//         padding-bottom: 110px;
//         display: flex;
//         flex-direction: column-reverse;

//         .societyCon {
//             position: relative;
//             color: #231F20;
//             padding-top: 0px;
//             padding-left: 15px;
//             padding-right: 15px;
//             box-sizing: border-box;

//             .text {
//                 margin-top: 40px;
//                 margin-bottom: 30px;
//             }

//             .btn {
//                 display: none;
//             }
//         }

//         &>.btn {
//             display: block;
//             margin-top: 80px;
//         }
//     }
// }