book-hi/static/css/common.scss

$theme-color: #707bce;
$theme-dark-color: rgba(#e4c491, .8);
$bg-theme-color: rgba(#e4c491, .1);
$blue: #03A9F4;
$yellow: #f9ae3d;
$yellow-text: #f9ae3d;
$font-normal: #333333;
$font-middle: #666666;
$font-light: #333333;

view {
    font-size: 28rpx;
    box-sizing: border-box;
}

.page {
    background-color: #F5F5F5;
    min-height: 100vh;
}

.page-top {
    padding-top: 30rpx;
}

.flex,
.flex-box,
.flex-row {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-end {
    justify-content: flex-end;
}

.flex-align {
    align-items: center;
}

.flex-center {
    align-items: center;
    justify-content: center;
}

.flex-a-c {
    align-items: center;
}

.flex-j-c {
    justify-content: center;
}

.flex-j-e {
    justify-content: flex-end;
}

.space-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.text-center {
    text-align: center !important;
}

.pad {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

@keyframes circle {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.px-15 {
    padding-top: 15rpx;
    padding-bottom: 15rpx;
}

.input-placeholder {
    font-size: 26rpx;
    color: #999999;
}

.mb-20 {
    margin-bottom: 20rpx;
}

.c-4 {
    color: #ad2305;
}

.c-3 {
    color: #333739;
}

.c-5 {
    color: #545657;
}

.c-6 {
    color: #666769;
}

.c-9 {
    color: #999A9A;
}

.c-f {
    color: #FFFFFF;
}

.c-y {
    color: $yellow;
}

.text-y {
    color: $yellow-text;
}

.px-15 {
    padding-left: 15rpx;
    padding-right: 15rpx;
}

.bg-white {
    background-color: #FFFFFF;
}

.bg-gray {
    background-color: #ecf7f3;
}

.bg-gray-light {
    background-color: #FAFAFA;
}

.bg-gray-empha {
    background-color: #F1F2F3;
}

.border {
    border: 1rpx solid #EFEFEF;
}

.border-bottom {
    border-bottom: 1rpx solid #EFEFEF;
}

.btn {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 30rpx;
    padding-right: 30rpx;
    font-size: 14px;
    background-color: transparent;

    &.primary {
        background-color: $theme-color;
        color: #FFFFFF;
    }

    &.info {
        border: 1rpx solid #DCDCDC;
    }
}

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

.font-normal {
    font-weight: normal;
    font-style: normal;
}

@for $i from 0 through 30 {
    .ml-#{$i*2} {
        margin-left: #{$i * 2}rpx;
    }

    .mr-#{$i * 2} {
        margin-right: #{$i * 2}rpx;
    }

    .mt-#{$i * 2} {
        margin-top: #{$i * 2}rpx;
    }

    .mb-#{$i * 2} {
        margin-bottom: #{$i * 2}rpx;
    }

    .pad-#{$i * 2} {
        padding: #{$i * 2}rpx;
        box-sizing: border-box;
    }
}

@for $i from 0 through 20 {
    .pt-#{$i*2} {
        padding-top:#{$i * 2}rpx;
    }

    .px-#{$i * 2} {
        padding-left: #{$i* 2}rpx !important;
        padding-right: #{$i* 2}rpx !important;
    }

    .py-#{$i * 2} {
        padding-top: #{$i * 2}rpx !important;
        padding-bottom: #{$i * 2}rpx !important;
    }

    .pad-#{$i * 2} {
        padding:#{$i * 2}rpx;
    }

    .radius-#{$i * 2} {
        border-radius: #{$i * 2}rpx;
    }

    .font-#{20 + $i * 2} {
        font-size: #{22 + $i * 2}rpx;
    }
}

@for $i from 1 through 5 {
    .text-line#{$i} {
        overflow: hidden;
        display: -webkit-box !important;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-line-clamp: #{$i};
        -webkit-box-orient: vertical !important;
    }
}


.operat-btns {
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
}

.operat-btns .u-button+.u-button {
    margin-left: 14px;
}

// 超出省略,最多5行
@for $i from 12 through 30 {
    .font-#{$i} {
        // vue下，单行和多行显示省略号需要单独处理
        font-size: #{$i}+'px' !important;
    }
}

.common-title {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #101010;
    line-height: 19px;
}

.flex {
    display: flex;
}

.flex-j-b {
    justify-content: space-between;
}

.flex-1 {
    flex: 1;
}

.flex-a {
    display: flex;
    align-items: center;
}

.flex-a-s {
    align-items: flex-start;
}

.flex-a-c {
    align-items: center;
}

.flex-a-e {
    align-items: flex-end;
}

.flex-c {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-d {
    display: flex;
    flex-direction: column;
}

.common-text {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 13px;
    color: #666666;
    line-height: 24px;
    text-align: left;
}

.common-num-text {
    font-family: AlibabaSans102 V2 Num_Alipay;
    font-weight: normal;
    font-size: 18px;
    color: #111111;
    line-height: 24px;
    text-align: left;
}

.common-card {
    padding: 14px 12px 21px;
    background: #FFFFFF;
    border-radius: 10px;
    opacity: 1;
}

.white-bg {
    padding: 0;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 10px;
}

.common-tag {
    padding: 2px 4px;
    background: linear-gradient(180deg, #DBC4A3 0%, #D2B692 100%);
    border-radius: 3px 3px 3px 3px;
    opacity: 1;
    position: relative;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    margin-left: 6px;
}

.common-number-text {
    font-family: AlibabaSans102 V2 Num_Alipay;
    font-weight: normal;
    font-size: 16px;
    color: #111111;
    line-height: 28px;
}

.common-btn {
    width: 100%;
    height: 88rpx;
    background: #38C148;
    border-radius: 10rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;

    &.plain {
        border: 2rpx solid #38C148;
        color: #38C148;
        background: #ffffff;
    }
}

.color-primary {
    color: #707bce !important;
}

.team-title {
    font-size: 28rpx;
    color: #707bce;
}

.common-page {
    padding: 30rpx;
    box-sizing: border-box;
}

.common-text-2 {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
}

.bottom-fixed-con {
    padding: 16rpx 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    width: 100%;
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;

    button {
        width: 100%;
        flex: 1;
    }
}