@charset "UTF-8";
@import "./lj-style-variable.less";
/**
* 业务模块通用样式
*
*/

/* 事件单 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */

.lj-card__header {
    padding: 5px 10px;
    background-color: unset;
    overflow: auto;

    .van-cell__title {
        font-size: 16px;

        & > span{
            font-weight: bold;
        }

        .van-cell__label {
            margin-top: 0;
        }
    }
    .van-cell__value {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-direction: column;
        .lj-status-badge {
            position: relative;
            padding: 0;
        }
    }
    .jc-card-label {
        display: flex;
        .title {
            padding-right: 6px;
            font-size: 12px;
            color: @light-label-secondary;
        }
    }
    .card-default {
        .card-status {
            display: flex;
            justify-content: flex-end;
        }
        .count-down {
            font-size: 12px;
            color: @light-system-red;
            line-height: 18px;
        }
    }
    .field {
        color: @light-label-tertiary;
        margin-right: 2px;
    }
    .field-value {
        color: @light-label-secondary;
    }
}

.eventmx-tag {
    display: flex;

    .eventmx-tag-left {
        flex: 1;

        span {
            font-size: 12px;
            // color: @light-label-secondary;
        }
    }
    .checkpoint-tag {
        background-color: @light-fill-quarternary;
        color: @light-label-primary;
        margin-left: 2px;
    }
    .eventmx-tag-right {
        flex-shrink: 0;

        .iconfont {
            font-size: 12px;
            padding-right: 1px;
        }

    }
    .duty-tag {
        background-color: rgba(255, 69, 58, 0.05);
        color: @light-system-red;
        .iconfont {
            font-size: 12px;
            padding-right: 1px;
        }
    }
    .duty-tag-item {
        margin-left: 2px;
        background-color: @light-barkground-secondary;
        border: 1px solid rgba(255, 69, 58, 0.05);
        color: @light-system-red;
    }
}
.reason-rel-cell {
    margin-bottom: 2px;
    &.van-cell {
        background-color: @light-fill-tertiary;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 4px;
    }
    .iconfont {
        font-size: 16px;
        margin-right: 4px;
    }
    .van-cell__label {
        margin-top: 0;
    }
    .rel-right {
        display: inline-flex;
        flex-direction: column;

        .rel-right-tag {
            display: inline-block;
            // margin-top: 2px;
            justify-content: flex-end;
            font-size: 12px;
            color: @light-label-secondary;
            line-height: 16px;
            // background-color: @light-barkground-secondary;
            + .rel-right-tag  {
                margin-top: 3px;
            }
        }
    }
}
/* 事件单 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */

/* 图片&视频，展示及选择 lj-img-pro lj-video-download ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
.lj-file-show_and_update {
    position: relative;
    .add-fj, .file-rel-item {
        float: left;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        margin-bottom: 10px;
        border-radius: 4px;
        // 32+ 10*3 + 10
        width: -moz-calc(~"33.33vw - 25px");
        width: -webkit-calc(~"33.33vw - 25px");
        width: calc(~"33.33vw - 25px");
        height: -moz-calc(~"33.33vw - 25px");
        height: -webkit-calc(~"33.33vw - 25px");
        height: calc(~"33.33vw - 25px");
        background-color: @light-fill-secondary;
        color: @light-label-primary;
        overflow: hidden;
        
    }
    .add-fj .iconfont {
        font-size: 36px;
    }
}

.lj-picture_and_video {
    position: relative;
    display: inline-block;

    .bottom-nav {
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 2px;
        background-color: rgba(0, 0, 0, 0.4);
        color: #fff;
        transition: all 0.2s ease-in-out;
        text-align: center;

        .iconfont {
            font-size: 14px;
        }
    }
    .bottom-nav-status {
        display: inline-block;
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        background-color: @light-system-gray1;
        color: #fff;
        transition: all 0.2s ease-in-out;
        text-align: center;

        &.show {
            bottom: 0;
        }
        .iconfont {
            font-size: 14px;
        }
        .dl-success {
            background-color: @museSuccess;
        }
        .dl-fail {
            background-color: @museError;
        }
    }
    .bottom-nav-text {
        font-weight: 400;
        font-size: 12px;
    }
    .control-bar {
        position: absolute;
        right: 2px;
        top: 2px;
        display: flex;
        .van-tag {
            margin-left: 2px;
        }
        &.center {
            top: 50%;
            right: unset;
            left: 50%;
            transform: translate(-50%, -50%);
            .van-tag {
                margin-left: 0;
            }
        }
        .tag-item {
            margin-left: 2px;
            display: flex;
            align-items: center;
            justify-content: center;

            padding: 2px 6px;
            background-color: rgba(0, 0, 0, 0.4);
            color: #fff;
            transition: all 0.2s ease-in-out;
            text-align: center;
            min-height: 18px;

            .iconfont {
                font-size: 16px;
            }
            &.del-item {
                background-color: @light-system-red;
            }
            &.download-item {
                background-color: @light-system-green1;
            }
            &.error-item {
                background-color: @light-system-red;
                opacity: 0.6;
            }
            &.text-btn {
                color: @musePrimary;
            }
            &.loading {
                background-color: transparent;
            }
        }
    }
}

.file-rel {
    position: relative;
    margin: 0 -5px;
    // display: flex;
    // width: 100%;
    .file-rel-item {
        display: inline-block;
        margin: 0 5px;
        margin-bottom: 5px;
        border-radius: 4px;
        overflow: hidden;
        /**
            1.event-detail-item padding 0 20px = 40px
            2.item-kind 24px + 10px  = 34px
            3..file-rel-item 0 5px = 10px * 3 = 30px
            4..file-rel 0 -5px = -10px
            sum(1.~4.) = 94 / 3 = 31.3333333 ≈ 32
         */
        width: -moz-calc(~"33.33vw - 32px");
        width: -webkit-calc(~"33.33vw - 32px");
        width: calc(~"33.33vw - 32px");
        height: -moz-calc(~"33.33vw - 32px");
        height: -webkit-calc(~"33.33vw - 32px");
        height: calc(~"33.33vw - 32px");
    }
}

.fj-box {
    position: relative;
    .add-fj, .file-rel-item {
        float: left;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        margin-bottom: 10px;
        border-radius: 4px;
        // 32+ 32 +20
        width: -moz-calc(~"33.33vw - 34px");
        width: -webkit-calc(~"33.33vw - 34px");
        width: calc(~"33.33vw - 34px");
        height: -moz-calc(~"33.33vw - 34px");
        height: -webkit-calc(~"33.33vw - 34px");
        height: calc(~"33.33vw - 34px");
        background-color: @light-fill-secondary;
        color: @light-label-primary;
        overflow: hidden;
        
    }
    .add-fj .iconfont {
        font-size: 36px;
    }
}
/* 图片&视频，展示及选择 lj-img-pro lj-video-download ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */


/* 详情页彩色背景 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
.main-body-bg {
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 170px; // 72+ 78
        background: linear-gradient(138.09deg, #1890FF 19.93%, #0052D4 77.42%);
        box-shadow: inset 0px -4px 8px rgba(0, 0, 0, 0.2);
        width: 180%;
        left: -40%;
        border-radius: 0 0 50% 50%;
    }
    &.state-red {
        &::before {
            background: linear-gradient(138.09deg, #FF3B30 19.93%, #DA0000 77.42%);
        }
    }
    &.state-orange {
        &::before {
            background: linear-gradient(138.09deg, #FFC045 19.93%, #FF9500 77.42%);
        }
    }
    &.state-indigo {
        &::before {
            background: linear-gradient(138.09deg, #7A78FF 19.93%, #5856D6 77.42%);
        }
    }
    &.state-green1 {
        &::before {
            background: linear-gradient(138.09deg, #34C759 19.93%, #219653 77.42%);
        }
    }
    &.state-teal {
        &::before {
            background: linear-gradient(138.09deg, #1890FF 19.93%, #0052D4 77.42%);
        }
    }
    &.state-gray1 {
        &::before {
            background: linear-gradient(138.09deg, #828282 19.93%, #4F4F4F 77.42%);
        }
    }

}
.detail-control {
    padding: 0 12px;
    padding-bottom: 10px;
    display: flex;
    .btn {
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.04), 0px 0px 3px 0px rgba(0,0,0,0.08);

        .iconfont {
            font-size: 14px;
        }
        &.inresult {
            box-shadow: 0px 2px 5px 0px rgba(24, 143, 255, 0.1), 0px 0px 3px 0px rgba(24, 143, 255, 0.14);
        }

        & + .btn {
            margin-left: 8px;
        }
    }
    .draft-icon {
        font-size: 14px;
    }
    // .detail-badge
    // {
    //     display: block;
    //     flex: 1;
    //     & + .detail-badge {
    //         margin-left: 10px;
    //     }
    // }
}

/* 详情页彩色背景 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */

.lj-layout-grid-3 {
    display: grid;
    // height: 500px;
    /* grid-template: "a a a" 40px "b c c" 40px "b c c" 40px / 1fr 1fr 1fr; */
    grid: auto-flow / 1fr 1fr 1fr;
    column-gap: 8px;
    row-gap: 4px;
}
.lj-layout-grid-2 {
    display: grid;
    // height: 500px;
    /* grid-template: "a a a" 40px "b c c" 40px "b c c" 40px / 1fr 1fr 1fr; */
    grid: auto-flow / 1fr 1fr;
    column-gap: 8px;
    row-gap: 4px;
}

/* van-tabs slot:title 的 van-badge--fixed 样式调整 */
.tabs-badge {
    .van-badge--fixed{
      font-size: 10px;
      white-space: nowrap;
    }
}


.van-cell {
    &.base-cell {
        .van-cell__title {
            margin-right: 12px;
            width: 6.2em;
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 0;
        }
        .van-cell__value {
            text-align: left;
        }
    }
}