douyin-card-message/serve/public/css/css.css

.main {
    max-width: 1400px;
    /*min-width: 1000px;*/
    margin: 0 auto;
    height: 100%;

    .navigation {
        height: 60px;
        line-height: 60px;

        .navigation-item {
            width: 80px;
            height: 60px;
            line-height: 60px;
            font-size: 16px;
            text-align: center;
            margin-left: 28px;
            cursor: pointer;

        }

    }

    img.logo-img {
        /*width: 140px;*/
        height: 36px;
    }
}

.mainCard {
    max-width: 1400px;
    /*min-width: 1000px;*/
    margin: 0 auto;
}

.font-28 {
    font-size: 20px;
}

.font-14 {
    font-size: 14px;
}

.font-16 {
    font-size: 16px;
}

.font-18 {
    font-size: 18px;
}

.font-20 {
    font-size: 20px;
}

.banner {
    height: 700px;
    background-image: url("../image/banner.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .bannerCard {
        min-width: 1000px;

        .title {
            font-size: 36px;
        }

        .desc—text {
            font-size: 20px;
        }
    }
}

.feature {
    .itemCard {
        height: 260px;
        background: #FFFFFF;
        box-shadow: 2px 2px 20px 0 rgba(219, 219, 219, 0.25);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
            width: 100px;
            height: 100px;
        }
    }
}

.flex-1 {
    flex: 1;

}

.price {
    background-color: #F9FAFF;
    overflow: auto;
    height: 100%;

    .head {
        height: 190px;
    }

    .td {
        height: 50px;
        display: flex;
        align-items: center;
        background-color: transparent;
    }

    .basicsCard {
        background-image: url("../image/jichu.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .basics {
        background-color: #F9FCFF;
    }

    /*高级版*/

    .advanceCard {
        background-image: url("../image/gaoji.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .advance {
        background-color: #FFFDF8;
    }

    /*企业版*/

    .enterpriseCard {
        background-image: url("../image/qiye.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .enterprise {
        background-color: #FFF9FA;
    }

}

.star {
    position: relative;
    width: 0;
    height: 0;
    margin-left: 5px;
    border-left: 6px solid transparent; /* 将宽度调整为12px的一半 */
    border-right: 6px solid transparent; /* 将宽度调整为12px的一半 */
    border-bottom: 10px solid #FFBD57; /* 将高度调整为12px的一半 */
}

.star:before {
    position: absolute;
    top: 3px; /* 将上方星尖位置调整为高度的1/4 */
    left: -6px; /* 将左侧星尖位置调整为宽度的一半 */
    width: 0;
    height: 0;
    border-left: 6px solid transparent; /* 将宽度调整为12px的一半 */
    border-right: 6px solid transparent; /* 将宽度调整为12px的一半 */
    border-top: 10px solid #FFBD57; /* 将高度调整为12px的一半 */
    content: '';
}

.evaluate {
    .evaluateCard {
        max-width: 1400px;
        /*min-width: 1000px;*/
        margin: 0 auto;
        overflow-x: auto;

        .itemCard {
            width: 295px;
            min-width: 295px;
            height: 156px;
            background: #FFFFFF;
            box-shadow: 2px 2px 10px 0px rgba(219, 219, 219, 0.25);
            border-radius: 5px 5px 5px 5px;
            margin-right: 28px;

            .userInfo {
                img {
                    width: 48px;
                    height: 48px;
                    border-radius: 100%;
                }

            }
        }
    }
}

::-webkit-scrollbar {

    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #dcdcdc; /* 滚动条滑块颜色 */
    border-radius: 5px; /* 圆角 */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 滚动条背景色 */
    border-radius: 5px; /* 圆角 */
}

.yanshi {
    height: 260px;
    background-image: url("../image/yanshi.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*min-width: 1000px;*/
}

.logo {
    height: 160px;
    width: 172px;
}

.footer {
    height: 310px;
    /*min-width: 1000px;*/
    background: #242424;


    .line {
        width: 2px;
        height: 202px;
        background: linear-gradient(180deg, #313131 0%, rgba(56, 58, 104, 0) 100%);
        border-radius: 0px 0px 0px 0px;
    }

    .xlin {
        margin: 0 auto;
        /*width: 1000px;*/
        background: linear-gradient(180deg, #313131 0%, rgba(56, 58, 104, 0) 100%);
        height: 2px;
    }
}

.cursor {
    cursor: pointer;
}

.text {
    color: #212529 !important;
}

.yanshiTitle {
    font-size: 26px;
}

.weixin {
    width: 110px;
    height: 110px;
}

/* 添加自定义样式 */

@media (max-width: 1200px) {

    .banner {
        height: 400px;
        background-image: url("../image/banner.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .bannerCard {
            min-width: auto;

            .title {
                font-size: 28px;
            }

            .desc—text {
                font-size: 18px;
            }
        }
    }
}

@media (max-width: 992px) {
    /* 在小于1000px时隐藏元素 */
    .hide-below-1000 {
        display: none !important;
    }

    .yanshiTitle {
        font-size: 24px;
    }

    .show-below-1000 {
        display: block !important;
    }

    .banner {
        height: 400px;
        background-image: url("../image/banner.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .bannerCard {
            min-width: auto;

            .title {
                font-size: 28px;
            }

            .desc—text {
                font-size: 18px;
            }
        }
    }
}

/* 添加自定义样式 */
@media (max-width: 576px) {

    .yanshiTitle {
        font-size: 18px;
    }

    .banner {
        height: 200px;
        background-image: url("../image/banner.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .bannerCard {
            min-width: auto;

            .title {
                font-size: 18px;
            }

            .desc—text {
                font-size: 12px;
            }
        }
    }

    .itemCard {
        height: 200px !important;

        img {
            width: 80px !important;
            height: 80px !important;
        }
    }
}

.phoneFooter {
    background: #242424;
}