neic-hefeng/src/components/area/gy-card.vue

/* 自定义tabs */
<template>
    <transition>
        <div :class='areaClass' @mouseover="hover = false"
             @mouseleave="hover = false" onselectstart="return false">
            <div :class="headerClass"> <!-- @dblclick="gyCardDbClick" -->
                <div :class='circleClass'></div>
                <span class="gy-card-title">{{ title }}</span>
                <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
                <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
            </div>
            <div :class='contentClass'>
                <el-scrollbar style="height: 100%">
                    <slot></slot>
                </el-scrollbar>
            </div>
        </div>
    </transition>
</template>

<script>
    /**
     * todo 拖动
     * todo 控制区
     *
     * 动态值:
     * 1. gy-card-area-label中的 height,margin-top
     * 2. gy-card-circle-yellow中的颜色
     * 3. gy-card-content-25 中的高度
     *
     * 使用事例:
     * <gy-card title="校验区" area-style="check" circle-style="green" content-style="44">
     * <div>动态内容</div>
     * </gy-card>
     */
    export default {
        name: 'gy-card',
        emits: ["parentRun"],
        props: {
            title: {
                type: String,
                default: '校验区',
                required: true
            },
            areaStyle: {
                type: String,
                default: 'check',
                required: true
            },
            circleStyle: {
                type: String,
                default: 'green',
                required: true
            },
            contentStyle: {
                type: String,
                default: '44',
                required: true
            }
        },
        data() {
            return {
                hover: false,
                big: false
            }
        },
        computed: {
            areaClass() {
                if (this.big) {
                    return `gy-card-area-big`;
                } else {
                    return `gy-card-area-${this.areaStyle}`;
                }
            },
            circleClass() {
                return `gy-card-circle gy-card-circle-${this.circleStyle}`;
            },
            contentClass() {
                if (this.big) {
                    return `gy-card-content-big`;
                } else {
                    return `gy-card-content-${this.contentStyle}`;
                }
            },
            headerClass() {
                if (this.hover) {
                    return `gy-card-header-hover`;
                } else {
                    return `gy-card-header`;
                }
            }
        },
        methods: {
            /* gyCardDbClick() {
                let big = this.big
                if (big) {
                    this.big = false
                } else {
                    this.big = false
                }
            }, */
        }
    }
</script>

<style scoped="scoped">
    .gy-card-header {
        position: relative;
        height: 40px;
        background-color: #292929;
        color: white;
        box-sizing: border-box;
    }

    .gy-card-content-89 {
        position: relative;
        height: calc(89vh - 50px);
        background-color: #000000;
        color: white;
        box-sizing: border-box;
        border-radius: 7px;
    }

    .gy-card-content-44 {
        position: relative;
        height: calc(44vh - 50px);
        background-color: #000000;
        color: white;
        box-sizing: border-box;
        border-radius: 7px;
    }

    .gy-card-content-37 {
        position: relative;
        height: calc(37vh - 50px);
        background-color: #000000;
        color: white;
        box-sizing: border-box;
        border-radius: 7px;
    }

    .gy-card-content-25 {
        position: relative;
        height: calc(25vh - 50px);
        background-color: #000000;
        color: white;
        box-sizing: border-box;
        border-radius: 7px;
    }

    .gy-card-circle{
        position: relative;
        top: 7px;
        display: inline-block;
        width: 7px;
        height: 7px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

    .gy-card-circle-green {
        background-color: #008000;
    }

    .gy-card-circle-yellow {
        background-color: #ffff00;
    }

    .gy-card-title {
        position: relative;
        top: 10px;
        left: 10px;
    }

    .gy-card-decoration01 {
        position: absolute;
        right: 80px;
    }

    .gy-card-decoration02 {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .gy-card-area-problem {
        position: relative;
        height: 89vh;
        background-color: #292929;
        border-radius: 7px;
        margin: 0px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-alarm {
        position: relative;
        height: 25vh;
        margin-top: 10px;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-check {
        position: relative;
        height: 44vh;
        background-color: #292929;
        border-radius: 7px;
        margin-top: 10px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-control {
        position: relative;
        width: 100%;
        height: 44vh;
        background-color: #292929;
        border-radius: 7px;
        margin: 0px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-label {
        position: relative;
        height: 25vh;
        margin-top: 10px;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-recommended {
        position: relative;
        height: 37vh;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-header-hover {
        position: relative;
        height: 40px;
        background-color: #292929;
        color: white;
        box-sizing: border-box;
    }

    .gy-card-area-problem:hover {
        position: relative;
        height: 89vh;
        background-color: #292929;
        border-radius: 7px;
        margin: 0px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-alarm:hover {
        position: relative;
        height: 25vh;
        margin-top: 10px;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

/*     .gy-card-area-check:hover {
        position: relative;
        height: 44vh;
        background-color: #292929;
        border-radius: 7px;
        margin: 0px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }
 */
/*     .gy-card-area-control:hover {
        position: relative;
        width: 100%;
        height: 44vh;
        background-color: #292929;
        border-radius: 7px;
        margin-top: 10px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    } */

    .gy-card-area-label:hover {
        position: relative;
        height: 25vh;
        margin-top: 10px;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-recommended:hover {
        position: relative;
        height: 37vh;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }


    .gy-card-area-big {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background-color: #292929;
        border-radius: 7px;
        margin: 0px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
        z-index: 900;
    }

    .gy-card-content-big {
        position: relative;
        height: calc(100vh - 50px);
        background-color: #000000;
        color: white;
        box-sizing: border-box;
        border-radius: 7px;
    }

    .el-scrollbar__wrap {
        overflow: scroll;
        width: 110%;
        height: 120%;
    }

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

</style>