hb_sis_zhfx/src/views/NewPages/intelligent-alarm-center.vue

<template>
    <div class="intelligent-alarm-center">
        <div class="intelligent-alarm-center-btn">
            <div @click="clickBtn(index)" class="i-btn" v-for="(btn, index) of btns" :key="index" :class="{ active: index == btnIndex }">{{ btn }}</div>
        </div>
        <div class="intelligent-alarm-center-box">
            <div
                class="intelligent-alarm-center-item"
                v-for="(panel, index) of panels"
                :key="index"
                :class="{ active: index == panelIndex }"
                @click="clickItem(index)"
            >
                <div class="intelligent-alarm-center-icon">
                    <span class="i-svg-icon">
                        <SvgIcon :svgid="panel.icon"></SvgIcon>
                    </span>
                </div>
                <div class="intelligent-alarm-center-num">{{ panel.num }}</div>
                <div class="intelligent-alarm-center-name">{{ panel.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
    // 名称
    name: "intelligent-alarm-center",
    // 使用组件
    components: {
        SvgIcon,
    },
    // 数据
    data() {
        return {
            btns: ["光字牌", "实时报警", "历史报警"],
            btnIndex: 0,
            panels: [
                {
                    icon: "svg-jkp",
                    num: "5,916",
                    name: "智能经营管控系统",
                },
                {
                    icon: "svg-iac-yx",
                    num: "5,916",
                    name: "智能营销管控系统",
                },
                {
                    icon: "svg-iac-jc",
                    num: "5,916",
                    name: "智能工程管控系统",
                },
                {
                    icon: "svg-iac-dj",
                    num: "5,916",
                    name: "智能党建系统",
                },
                {
                    icon: "svg-iac-p",
                    num: "5,916",
                    name: "两票系统",
                },
                {
                    icon: "svg-iac-jj",
                    num: "5,916",
                    name: "智能经济运行系统",
                },
                {
                    icon: "svg-iac-oa",
                    num: "5,916",
                    name: "OA及生产管理系统",
                },
                {
                    icon: "svg-iac-wz",
                    num: "5,916",
                    name: "智能物资系统",
                },
                {
                    icon: "svg-iac-aq",
                    num: "5,916",
                    name: "智能安全系统",
                },
            ],
            panelIndex: 1,
        };
    },
    // 函数
    methods: {
        clickBtn: function(index) {
            this.btnIndex = index;
        },
        clickItem: function(index) {
            this.panelIndex = index;
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

<style lang="less">
.intelligent-alarm-center {
    widows: 100%;
    height: calc(100vh - 90px);
    overflow-y: auto;

    .intelligent-alarm-center-btn {
        display: flex;

        .i-btn {
            width: 11.296vh;
            height: 3.056vh;
            line-height: 3.056vh;
            background: #53626833;
            border: 1px solid #53626833;
            text-align: center;
            cursor: pointer;
            font-size: 1.296vh;
            color: #b3bdc0;
            transition: all 0.3s;

            + .i-btn {
                margin-left: 0.926vh;
            }

            &:hover,
            &.active {
                border: 1px solid #05bb4c;
                background: #05bb4c33;
                color: #05bb4c;
            }
        }
    }

    .intelligent-alarm-center-box {
        display: flex;
        flex-wrap: wrap;

        .intelligent-alarm-center-item {
            width: 360px;
            height: 14.259vh;
            background: #53626833;
            border: 1px solid #53626833;
            position: relative;
            overflow: hidden;
            margin: 1.481vh 1.481vh 0 0;
            cursor: pointer;
            transition: all 0.3s;

            .intelligent-alarm-center-icon {
                position: absolute;
                width: 13.889vh;
                height: 13.889vh;
                background: #7a909933;
                border-radius: 50%;
                right: -2.778vh;
                bottom: -2.778vh;
                display: flex;
                align-items: center;
                justify-content: center;

                .i-svg-icon {
                    font-size: 0;
                    line-height: 0;
                    svg {
                        width: 5.093vh;
                        height: 5.093vh;
                        use {
                            fill: #536268;
                            width: 5.093vh;
                            height: 5.093vh;
                        }
                    }
                }
            }

            .intelligent-alarm-center-num {
                font-size: 3.148vh;
                font-weight: 400;
                color: #ffffff;
                line-height: 3.241vh;
                margin: 3.704vh 0 0 2.407vh;
            }

            .intelligent-alarm-center-name {
                font-size: 1.481vh;
                font-weight: 400;
                color: #b3bdc0;
                line-height: 30px;
                margin: 1.481vh 0 0 2.407vh;
            }

            &:hover,
            &.active {
                background: #05bb4c33;
                border: 1px solid #05bb4c;
                margin-top: 0.556vh;

                .intelligent-alarm-center-icon {
                    background: #07ED5F33;

                    .i-svg-icon {
                        svg {
                            use {
                                fill: #05BB4C;
                            }
                        }
                    }
                }

                .intelligent-alarm-center-num {
                    color: #05BB4C;
                }

                .intelligent-alarm-center-name {
                    color: #FFFFFF;
                }
            }
        }
    }
}
</style>