site_8g/src/app/globals.scss

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "../styles/iconfont/iconfont.css";
@import "../styles/iconfontPro/iconfont.css";

/* swiper */
@import "swiper/css";
@import "swiper/css/autoplay";
@import "swiper/css/pagination";
@import "swiper/css/virtual";

:root {
    --mobile-header-height: 0.48rem;
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-active-bg: #fff;
    --swiper-pagination-bullet-inactive-color: hsla(0, 0%, 100%, 0.8);
    //--primary-color: #ff6a01;

    --bg-color: #fefdee;
    --block-color: #1e252b;
    --block-foreground-color: #e2e9ef;
    --block-text-color: #a9b2bb;
    --block-text-desc-color: #5d7284;

    --primary-color: #11de68;
    --text-color: #fff;

    --tips-color: #dba40b;
    --tips-foreground-color: #1f2830;
    --adm-color-fill-content: #fefdee !important;

    --primary1: #fefdee;
    --primary2: #fde997;
    --primary3: #f9d22f;
    --primary4: #f5b800;
    --primary5: #6c6c6c;
    --primary6: #272932;
    --primary7: #3dfb9f;
    --primary8: #2ca446;
    --primary9: #fd0;
    --primary10: #134b1a;
    --primary11: #f78725;
    --primary12: #8ff99d;
    --primary13: #fff;
    --primary20: #ff5a00;
    --primary21: #24ee89;
    --primary22: #1a783596;
    --primary23: #1a7835;
    --primary24: #162c21;
    --primary-button: #0d910d;
    --textColor1: #272932;
    --textColor2: #6c6c6c;
    --textColor3: #fff;
    --textColor4: #ff383b;
    --textColor5: #0d910d;
    --textColor6: #ff5a00;
    --textColor7: #24ee89;
    --textColor8: #fd0;
    --textColor9: #dec38f;
    --textWhite: #fff;
    --main-background: #fde997;
    --gradient-left1: #fde997;
    --gradient-right1: #f1ca1b;
    --gradient-left2: #8d5314;
    --gradient-right2: #a75f1c;
    --gradient-left3: #fff;
    --gradient-right3: #fce896;
    --gradient-left4: #fde997;
    --gradient-right4: #f8c92d;
    --gradient-left5: #fff;
    --gradient-right5: #56c3fb;
    --gradient-left6: #63cd7b;
    --gradient-right6: #2ca446;
    --round-background: #a75f1c;
    --el-mask-color: #e3f7e3c4;
    --el-fill-color-light: #134b1a;
    --el-fill-color: #ff5a00;
    --el-border-color: "#ffffff";
    --mian-icon-color: #ff5a00;
    --borderRadius: 0.1rem;
}
.home-banner {
    --swiper-pagination-bullet-width: 0.23rem;
    --swiper-pagination-bullet-height: 0.05rem;
    --swiper-pagination-bullet-border-radius: 0.03rem;
    .swiper-pagination {
        position: initial;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 10px;
        .swiper-pagination-bullet {
            background: var(--main-background) !important;
            width: 0.06rem;
            opacity: 1 !important;
            &.swiper-pagination-bullet-active {
                width: 0.18rem;
                background: var(--textColor4) !important;
            }
        }
    }
}
.promotion-swiper {
    --swiper-pagination-bullet-width: 0.0833rem;
    --swiper-pagination-bullet-height: 0.0833rem;
    //--swiper-pagination-bottom: 0;
}

.sport-banner {
    --swiper-wrapper-transition-timing-function: linear;
}
/// antd-mobile
:root:root {
    --adm-color-background: transparent;
    //--adm-color-text: #fff;
    //--bg-color: #000000; // todo
    --adm-button-text-color: #fff;
    //--adm-color-primary: #fff;
}

* {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 0;
}

@font-face {
    font-family: myFont;
    src:
        url("/font/font.otf"),
        url("/font/font.woff2") format("woff2");
}

html,
body {
    height: 100%;
    position: relative;
    font-family: myFont !important;
    // font-family:
    //     helvetica neue,
    //     Helvetica,
    //     apple sd gothic neo,
    //     malgun gothic,
    //     Arial,
    //     sans-serif;
    box-sizing: border-box;
}

html {
    font-size: 144px;
}
body {
    position: relative;
    background: #f8f8f8;
}

#app {
    width: 100%;
    max-width: 4.02rem;
    margin: 0 auto;
    font-size: 0.14rem;
    background-color: var(--bg-color);

    position: relative;
    height: 100%;
    color: var(--textColor1);
    transform: translate(0, 0);
    overflow: hidden;
}
// dvh解决ios高度包含底部ui栏问题
.main-footer-header {
    height: calc(calc(100% - $-header-height) - $-footer-height);
    overflow: scroll;
}
.main-footer {
    height: 100%; // calc(100% - $-footer-height);
    // overflow-y: scroll;
    display: flex;
    flex-direction: column;
}
.main-header {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    &.hasFlag {
        &.stickyFlag {
            &::before {
                position: fixed;
                top: auto;
            }
        }
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 0.4rem;
            height: 0.5rem;
            background-image: url("/left_flag.webp");
            background-position: left top;
            background-size: 100% 100%;
            z-index: 3;
        }
    }
}

input {
    line-height: normal;
}

/* ant-design-ui */
.adm-toast-mask .adm-toast-main-icon .adm-toast-icon svg {
    margin: 0 auto;
}
.adm-input input,
.adm-text-area textarea {
    // color: #fff;
}
.adm-toast-main {
    word-break: keep-all !important;
    text-align: center !important;
}

.home-search {
    .adm-search-bar-input-box {
        border: none !important;
    }
    .adm-search-bar-active {
        border: 0.0069rem solid green;
    }
}
.layout-tabs {
    .adm-tabs-tab-wrapper {
        padding: 0 0.05rem;
    }
    .adm-tabs-header {
        border: none;
    }
}

.containerMask {
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
        background: rgba(0, 0, 0, 0.5);
    }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
// 表单
.custom-form {
    padding: 0 0.18rem;
    .adm-list-item-content {
        border-radius: 0.06rem;
        background-color: #191f25;
        margin-bottom: 0.1rem;
        padding: 0 0.1rem;
    }

    .adm-list-item {
        padding-left: 0;
    }
    .adm-form-item-child-inner {
        line-height: 1;
    }
}

@media (min-width: 320px) {
    html {
        font-size: 84.2667px;
    }
}
@media (min-width: 360px) {
    html {
        font-size: 96px;
    }
}
@media (min-width: 375px) {
    html {
        font-size: 100px;
    }
}
@media (min-width: 384px) {
    html {
        font-size: 102.4px;
    }
}

@media (min-width: 414px) {
    html {
        font-size: 110.4px;
    }
}
@media (min-width: 448px) {
    html {
        font-size: 119.466px;
    }
}
@media (min-width: 480px) {
    html {
        font-size: 128px;
    }
}
@media (min-width: 512px) {
    html {
        font-size: 136.53px;
    }
}
@media (min-width: 544px) {
    html {
        font-size: 144.066px;
    }
}
@media (min-width: 576px) {
    html {
        font-size: 144.6px;
    }
}
@media (min-width: 608px) {
    html {
        font-size: 144.1334px;
    }
}
@media (min-width: 640px) {
    html {
        font-size: 144.6666px;
    }
}
@media (min-width: 750px) {
    html {
        font-size: 144px;
    }
}
.customConfirm {
    background-color: #373737 !important;
    .adm-dialog-action-row {
        flex-direction: row-reverse;
        border-top: 0.5px solid #8f8f8f !important;
        button {
            color: #fff !important;
            &:nth-child(1) {
                border-right: none !important;
                border-left: 0.5px solid #8f8f8f !important;
                color: red !important;
            }
        }
    }
    .adm-dialog-footer {
    }
}
@keyframes NumberScorll {
    25%,
    75% {
        transform: translateY(-100%);
    }
    25.1%,
    75.1% {
        transform: translateY(100%);
    }
    0%,
    100% {
        transform: translateY(0);
    }
}
@keyframes Rotate {
    1%,
    100% {
        transform: rotate(0deg);
    }
    99.9% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: rotate(-5deg) scaleZ(1);
    }
    50% {
        transform: rotate(0) scale3d(1.1, 1.1, 1.1);
    }
    100% {
        transform: rotate(-5deg) scaleZ(1);
    }
}

.homeTabsContainer {
    .adm-tabs-tab-wrapper {
        padding: 0 !important;
    }
    .adm-tabs-tab {
        padding: 0 2px;
    }
    .adm-tabs-tab-line {
        height: 100%;
        background: linear-gradient(to right, var(--gradient-left6), var(--gradient-right6));
        border-radius: 0.1rem;
        z-index: 1;
    }
    .adm-tabs-header-mask {
        display: none;
        width: 0 !important;
    }
}
// .homeNotice {
//     p {
//         display: inline-block !important;
//     }
// }
.homeNoticeSwiper {
    .swiper-wrapper {
        display: flex;
        transition-timing-function: linear !important;
    }

    .swiper-slide {
        width: auto;
    }
    .textBox {
        letter-spacing: 1;
    }
}
.homeHr {
    background: url("/home/Vector.webp");
    background-size: auto 100%;
    height: 0.15rem;
    background-repeat: repeat-x;
    margin-bottom: 0.05rem;
    margin-top: 0.05rem;
    position: relative;
    &::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 0.7rem;
        height: 0.7rem;
        background: url("/home/left_cituan_bg.webp");
        background-size: 100% 100%;
        pointer-events: none;
    }
    &::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 1px;
        width: 0.7rem;
        height: 0.7rem;
        background: url("/home/right_cituan_bg.webp");
        background-size: 100% 100%;
        pointer-events: none;
    }
}
.bg-none {
    background-color: transparent !important;
}
.p-0 {
    padding: 0 !important;
}
.adm-popover-inner-content {
    background: rgb(91, 74, 47);
}