MTP20_WEB_GLOBAL/src/packages/tc/assets/themes/global/global.less

[class*='g-image'] {
    position: relative;
    object-fit: cover;
    overflow: hidden;

    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #fff url("../../images/avatar.png") no-repeat center;
        background-size: cover;
    }
}

.g-price {
    &-normal {
        color: #333333;
    }

    &-up {
        color: #ff3333;
    }

    &-down {
        color: #0baf1f;
    }
}

.g-risk {
    &-green {
        color: #0baf1f;
    }

    &-red {
        color: #ff3333;
    }

    &-orange {
        color: orange;
    }

    &-yellow {
        color: #ebce12;
    }
}

.g-form {
    &__container {
        display: flex;
        flex-direction: column;
        padding-bottom: 16px;

        /* 父元素的第一个子元素 */
        .van-cell-group--inset:first-of-type {
            margin-top: 16px;
        }

        /* 相邻兄弟元素 */
        .van-cell-group--inset+.van-cell-group--inset {
            margin-top: 12px;
        }

        .van-field {
            &__right-icon {
                align-self: normal;
            }

            .van-stepper {
                display: flex;
                align-items: center;
                width: 100%;

                &__input {
                    flex: 1;
                }
            }
        }
    }

    &__footer {
        display: flex;
        align-items: center;

        &:empty {
            display: none;
        }

        &.inset {
            gap: 10px;
            padding: 10px 16px;
        }
    }
}

.g-flex {
    display: flex;
    flex-direction: column;
    height: 100%;

    &--row {
        flex-direction: row;
    }

    &__body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    &__footer {
        margin-top: auto;
    }
}

.g-color {
    &--up {
        color: var(--color-up);
    }

    &--down {
        color: var(--color-down);
    }
}

.g-block {
    &--bg {
        background: #fff url('../../images/block-bg.png') no-repeat center bottom;
        background-size: 100%;
    }
}

/* 导航列表 */
.g-navmenu {
    .app-iconfont {
        height: 100%;

        .g-icon {
            width: 18px;
            height: 18px;
            font-size: 18px;
        }

        &__label {
            font-size: 13px;
            margin-left: 12px
        }
    }
}

/* 商品列表 */
.g-goods-list {
    padding: 10px;

    .list {
        padding: 10px 10px 0 10px;

        &-item {
            display: flex;
            border-radius: 10px;
            height: 110px;
            overflow: hidden;
            background-color: #fff;
            padding: 10px;

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

            .img {
                position: relative;
                border-radius: 8px;
                overflow: hidden;

                &.mask::after {
                    content: '已结束';
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    font-size: 12px;
                    color: #fff;
                    background-color: rgba(0, 0, 0, .5);
                }

                img {
                    width: 90px;
                    height: 90px;
                    object-fit: cover;
                }
            }

            .info {
                flex: 1;
                display: flex;
                flex-direction: column;
                margin-left: 15px;

                .title {
                    color: #333;
                    font-size: 15px;
                }

                .desc {
                    display: flex;
                    flex-direction: column;
                    color: #666;
                    font-size: 12px;
                    margin-top: auto;
                }

                .price {
                    color: var(--van-tag-danger-color);
                    margin-top: 8px;

                    .buyprice,
                    .sellprice {
                        padding-bottom: 1px;
                    }
                }
            }
        }
    }
}

.g-goods-waterfall {
    padding: 10px;

    .goods {
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;

        &-image {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 120px;
            font-size: 0;
            border-radius: 8px;
            overflow: hidden;

            &.mask::after {
                content: '已结束';
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                font-size: 14px;
                color: #fff;
                background-color: rgba(0, 0, 0, .5);
            }
        }

        &-info {
            padding: 10px;

            &__title {
                font-size: 13px;
                margin-bottom: 5px;
            }

            &__desc {
                font-size: 12px;
                color: #999;
                margin-bottom: 5px;
            }

            &__price {
                color: #f2270c;

                .unit {
                    font-size: 12px;
                }

                .integer {
                    font-size: 15px;
                }
            }
        }
    }
}

/* 订单列表 */
.g-order-list {
    padding: 10px;
    padding-bottom: 0;

    &__box {
        &:not(:first-child) {
            margin-top: 10px;
        }

        background-color: #fff;
        border-radius: 8px;
        padding: 12px;

    }

    &__titlebar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        .left {
            h4 {
                font-weight: bold;
            }

            span {
                font-size: 12px;
                color: #999;
            }
        }

        .right {
            font-size: 12px;
            color: #999;
        }
    }

    &__content {
        font-size: 12px;

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            li {
                display: flex;
                justify-content: space-between;
                line-height: 24px;
                width: calc(~"50% - 12px");

                span {
                    &:first-child {
                        color: #999;
                        white-space: nowrap;
                        padding-right: 12px;
                    }
                }
            }
        }
    }

    &__btnbar {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 10px;

        .van-button {
            width: 80px;
            border-width: 1px;
        }
    }
}

.g-detail {
    &__buy {
        background-color: #fff;

        .topic {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            background-image: linear-gradient(to right, #ee0a24, #ff6034);
            padding: 10px 12px;

            &-left {
                .price-text {
                    font-size: 12px;
                }

                .price-integer {
                    font-size: 22px;
                }
            }

            &-right {
                display: flex;
                flex-direction: column;
                font-size: 12px;
            }
        }

        .title {
            font-size: 15px;
            font-weight: bold;
            line-height: 24px;
            padding: 12px;
            padding-bottom: 0;

            .van-tag {
                font-weight: normal;
            }

            span {
                margin-right: 5px;
            }
        }

        .desc {
            padding: 0 12px;
        }

        .qty {
            font-size: 12px;
            color: #999;
            padding: 5px 12px 0 12px;
        }

        .info {
            background-color: #fff;
            padding: 10px;

            ul {
                display: flex;
                flex-wrap: wrap;
                font-size: 13px;

                li {
                    display: flex;
                    justify-content: space-between;
                    width: 50%;
                    padding: 4px 12px;

                    span {
                        &:first-child {
                            color: #999;
                        }
                    }
                }
            }
        }
    }

    &__desc {
        background-color: #fff;
        margin-top: 12px;
    }

    &__footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 44px;
        background-color: #fff;

        .price {
            padding-left: 16px;

            &-text,
            &-unit {
                font-size: 12px;
            }

            &-unit {
                color: #f2270c;
            }

            &-integer {
                font-size: 16px;
                color: #f2270c;
            }
        }

        .submit {
            align-self: stretch;
            display: flex;
            margin-left: auto;

            &-button {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                min-width: 100px;
                font-weight: bold;
                color: #fff;
                padding: 0 24px;

                &.warning {
                    background-image: linear-gradient(to right, #ffd01e, #ff8917);
                    background-color: #ff8a17;
                }

                &.danger {
                    background-image: linear-gradient(to right, #ff6034, #ee0a24);
                    background-color: #ee270a;
                }
            }
        }
    }
}

.g-qty-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    &__stepper {
        display: flex;
        align-items: center;
        gap: 5px;
        width: 100%;

        .van-stepper {
            flex: 1;
            display: flex;

            &__input {
                flex: 1;
            }
        }
    }

    .van-radio-group {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 10px;
    }

    .van-radio {
        width: calc(~'100% / 3');
        padding: 2px;
        margin-right: 0;

        .van-radio__icon {
            display: none;
        }

        &__label {
            display: block;
            width: 100%;
            font-size: 12px;
            text-align: center;
            color: #666;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 2px;
            margin-left: 0;
        }

        &[aria-checked="true"] {
            .van-radio__label {
                color: var(--van-radio-checked-icon-color);
                border-color: var(--van-radio-checked-icon-color);
            }
        }
    }
}

.van {
    &-dialog {
        &__message {
            font-size: 14px;
            line-height: 22px;
        }
    }

    &-tabs {
        &--list {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        &--list &__content {
            flex: 1;
            overflow-y: auto;

            .van-tab__panel {
                height: 100%;
            }
        }
    }
}