squi-HD/src/components/Card/index.scss

@import '../../styles/utils.scss';
.el-loading-mask {
    background-color: rgba(255, 255, 255, 0.3);
}

.card-container {
    width: 470px;
    height: 472px;
    width: px2rem(470px * 2);
    height: px2rem(770px / 2 * 2);
    background-position: top center;
    background-size: cover;
    z-index: 1;
    box-sizing: border-box;
    padding: px2rem(60px * 2) px2rem(30px * 2) px2rem(25px * 2);
    display: flex;
    flex-direction: column;
    color: #fff;
    animation: fadeInBottom 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    >div {
        flex: 1;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background: #39d6fe;
            border-radius: 3px;
        }
    }
    &-bg-message-list {
        background-image: url('../../assets/card-bg/frame_information.png');
    }
    &-bg-incident-info {
        background-image: url('../../assets/card-bg/frame_sjxx.png');
    }
    &-bg-command-chain {
        background-image: url('../../assets/card-bg/frame_zhtx@2x.png');
        margin-top: px2rem(-63px * 2);
    }
    &-bg-incident-plan {
        margin-top: px2rem(20px *2);
        background-image: url('../../assets/card-bg/frame_czfa.png');
    }
    &-bg-emergency-linkage {
        background-image: url('../../assets/card-bg/frame_yjld.png');
    }
    &-bg-emergency-plan {
        background-image: url('../../assets/card-bg/frame_yjya@2x.png');
    }
    &-bg-accident-scene {
        background-image: url('../../assets/card-bg/frame_sgxc@2x.png');
        width: px2rem(472px * 2);
        height: px2rem(302px * 2);
        margin-top: px2rem(20px * 2);
        >div {
            height: px2rem(302px * 2 - 60px * 2 - 25px * 2);
        }
        .el-carousel__container {
            height: px2rem(302px * 2 - 60px * 2 - 25px * 2);
        }
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: px2rem(302px * 2 - 60px * 2 - 25px * 2);
            margin: 0;
            text-align: center;
        }
        .el-carousel__item:nth-child(2n) {
            // background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
            // background-color: #d3dce6;
        }
    }
    &-bg-execution-log {
        width: 939px;
        height: 554px;
        width: px2rem(472px * 2);
        height: px2rem(789px * 2);
        background-image: url('../../assets/card-bg/frame_czfa@2x.png');
    }
    &-bg-live-monitoring {
        width: 943px;
        height: 939px;
        width: px2rem(472px * 2);
        height: px2rem(469px * 2);
        background-image: url('../../assets/card-bg/frame_skjc@2x.png');
        .livec {
            height: px2rem((469px * 2 - 60px * 2 - 25px *2)/2 - 10px*2);
            margin-top: px2rem(20px *2);
            overflow: hidden;
        }
    }
}