1

shuishen

2022-11-30 65159e0056f33bbd1185175725093fc91b997a5b

1

 public/img/box/1.png

Binary files differ

 public/img/box/22222222.png

 public/img/box/55.png

 public/img/box/b-t-box.png

 public/img/box/bottom-box.png

 public/img/box/box-bg.png

 public/img/box/title-bg.png

 src/components/select/index.vue

@@ -1,26 +1,17 @@
<template>
    <div class="selects-container">
        <!-- 选择框 -->
        <div
            :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow }"
            class="selects-box"
            @click="optionsShow = !optionsShow"
        >
        <div :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow }" class="selects-box"
            @click="optionsShow = !optionsShow">
            <div class="text" v-text="checkValue"></div>
            <i class="el-icon-arrow-down"></i>
        </div>
        <!-- 下拉框大盒子 -->
        <div
            :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options"
            :style="{ height: 35 * options.length + 'px' }"
        >
        <div :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options" :style="{ height: 35 * options.length + 'px' }">
            <!-- 下拉框 -->
            <div
                @click="cutValue(item, index)"
                v-for="(item, index) in options"
                :key="index"
            >{{item[optionsName]}}</div>
            <div @click="cutValue(item, index)" v-for="(item, index) in options" :key="index">{{ item[optionsName] }}
            </div>
        </div>
    </div>
</template>
@@ -59,7 +50,7 @@
            this.$emit("selectCheck", item, index)
        }
    }
};
}
</script>

<style lang="scss" scoped>
@@ -67,22 +58,27 @@
.options-box-show {
    display: block;
}

//隐藏下拉框
.options-box-hide {
    display: none;
}

//点击时改变选择框的边框颜色
.selects-box-show {
    border: 1px solid #e4e4e4;
    border: 1px solid rgba(0, 246, 255, .5);
    box-shadow: inset 0 0 6px rgba(0, 246, 255, .5);
}

//恢复边框颜色
.selects-box-hide {
    border: 1px solid rgba(20, 50, 123, 1);
}

.selects-container {
    width: 100%;
    height: 100%;
    background: $bg-color;
    background: $select-box-bg-color;

    .selects-box {
        padding: 0 10px;
@@ -122,13 +118,13 @@
            justify-content: flex-start;
            align-items: center;
            line-height: 35px;
            background: rgba(20, 50, 123, 1); //下拉框默认背景
            background: rgba(33, 61, 106, 0.8); //下拉框默认背景
            cursor: pointer;
        }

        //鼠标移到下拉框时的背景
        div:hover {
            background: rgba(17, 52, 88, 0.8);
            background: rgba(36, 120, 162, 0.8);
            color: white;
        }


 src/styles/scssFile.scss

@@ -1,3 +1,15 @@
$bg-color: rgba(16, 29, 74, 0.8);
$bg-color: rgba(2, 27, 121, 0.8);

$el-dialog-bg-color: rgba(16, 29, 74, 1);
$el-dialog-bg-color: rgba(16, 29, 74, 1);

$select-box-bg-color: rgba(2, 27, 121, 0.8);

$sub-tab-bg-color: linear-gradient(to bottom, rgba(2, 27, 121, .8), rgba(5, 117, 230, .8));

$sub-tab-border-color: rgba(20, 50, 123, 1);

$sub-tab-on-border-color: rgb(0, 188, 212);

.select-on-tab {
    box-shadow: 0 0 10px $sub-tab-on-border-color;
}

 src/views/home/components/bottomContainer.vue

@@ -1,11 +1,11 @@
<template>
    <div class="container">
        <div class="header">
            <div class="bottom-title">警情动态</div>
            <div class="history-tab">
                <span class="beforetime" :class="{ choosed: historytype == 0 }" @click="historyTabClick(0)">实时</span>
                <span class="beforetime" :class="{ choosed: historytype == 1 }" @click="historyTabClick(1)">历史</span>
            </div>
            <div class="bottom-title">警情动态</div>
            <div class="timeTab" v-show="historytype">
                <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
                <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
@@ -196,55 +196,33 @@
    position: relative;
    height: 100%;
    width: 100%;
    background-image: url(/img/box/bottom-box.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .header {
        position: relative;
        width: 100%;
        height: 36px;

        .bottom-title::before {
            content: '';
            top: 0;
            left: 0;
            position: absolute;
            width: 0px;
            height: 0px;
            border: 18px solid #3366e2;
            border-bottom-color: transparent;
            border-left-color: transparent;
            transform: translate(-100%, 0);
        }
        height: 56px;

        .bottom-title {
            margin: 0 auto;
            position: absolute;
            left: 0;
            right: 0;
            width: 26%;
            height: 36px;
            line-height: 36px;
            top: 0;
            left: 18px;
            height: 56px;
            line-height: 56px;
            color: #fff;
            text-align: center;
            background: #3366e2;
        }

        .bottom-title::after {
            content: '';
            top: 0;
            right: 0;
            position: absolute;
            width: 0px;
            height: 0px;
            border: 18px solid #3366e2;
            border-bottom-color: transparent;
            border-right-color: transparent;
            transform: translate(100%, 0);
            font-size: 16px;
            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
        }

        .timeTab {
            position: absolute;
            top: 10px;
            right: 10px;
            top: 22px;
            right: 12px;
            display: flex;
            border-radius: 6px;
            overflow: hidden;
@@ -254,11 +232,11 @@
                height: 26px;
                text-align: center;
                line-height: 26px;
                background: rgb(1, 76, 137);
                background: $sub-tab-bg-color;
            }

            .beforetime {
                color: rgb(98, 95, 95);
                color: #99CCCC;
                cursor: pointer;
            }

@@ -269,8 +247,8 @@

        .history-tab {
            position: absolute;
            top: 10px;
            left: 10px;
            top: 22px;
            right: 96px;
            display: flex;
            border-radius: 6px;
            overflow: hidden;
@@ -280,11 +258,11 @@
                height: 26px;
                text-align: center;
                line-height: 26px;
                background: rgb(1, 76, 137);
                background: $sub-tab-bg-color;
            }

            .beforetime {
                color: rgb(98, 95, 95);
                color: #99CCCC;
                cursor: pointer;
            }

@@ -295,9 +273,11 @@
    }

    .body {
        margin: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 56px);
        margin: 12px;
        margin-top: 10px;
        margin-bottom: 14px;
        width: calc(100% - 24px);
        height: calc(100% - 80px);

        /* 解决自定义滚动条 x 轴显示问题 */
        .warp {

 src/views/home/components/leftContainer.vue

@@ -2,42 +2,41 @@
    <div class="container">
        <div class="person-box">
            <div class="title">
                <div>
                    <span class="peopleTap" :class="{ choosed: peopletype == 0 }"
                        @click="peopleTabClick(0)">现有人员</span>/
                    <span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                <div class="title-tab">
                    <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/<span
                        :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                </div>
                <div>
                    共
                    <span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>/
                    <span class="peopleNum" :class="{ choosed: peopletype == 1 }">1</span>人
                <div class="title-num">
                    共<span :class="{ choosed: peopletype == 0 }">100</span>/<span
                        :class="{ choosed: peopletype == 1 }">1</span>人
                </div>
            </div>
            <div class="sub-tab" v-show="peopletype == 0">
                <div class="tab" :class="{ on: tabType == 0 }" @click="personTabClick(0)">
            <div class="sub-tab " v-show="peopletype == 0">
                <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                    <div class="num">164.57万人</div>
                    <div class="type">户籍人口</div>
                </div>
                <div class="tab" :class="{ on: tabType == 1 }" @click="personTabClick(1)">
                <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                    <div class="num">17.52万人</div>
                    <div class="type">流动人口</div>
                </div>
                <div class="tab" :class="{ on: tabType == 2 }" @click="personTabClick(2)">
                <div class="tab" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                    <div class="num">91995人</div>
                    <div class="type">境外人口</div>
                </div>
            </div>
            <div id="PersonEcharts" class="echarts-box"></div>
            <div id="PersonEcharts" class="echarts-box">
            </div>
            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
        </div>
        <div class="house-box">
            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div class="tab" :class="{ on: tabTypeTwo == 0 }" @click="houseTabClick(0)">
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                    <div class="num">182万户</div>
                    <div class="num">实有房屋</div>
                </div>
                <div class="tab" :class="{ on: tabTypeTwo == 1 }" @click="houseTabClick(1)">
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                    <div class="num">634个</div>
                    <div class="num">关注场所</div>
                </div>
@@ -47,11 +46,11 @@
        <div class="land-box">
            <div class="title">现有地</div>
            <div class="sub-tab">
                <div class="tab" :class="{ on: tabTypeThree == 0 }" @click="landTabClick(0)">
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                    <div class="num">634个</div>
                    <div class="num">小区</div>
                </div>
                <div class="tab" :class="{ on: tabTypeThree == 1 }" @click="landTabClick(1)">
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                    <div class="num">634个</div>
                    <div class="num">责任区</div>
                </div>
@@ -66,6 +65,10 @@
let houseMyChart
let landMyChart
let keyPersonmyChart

let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62']

const myLandColors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']

export default {
    data () {
@@ -315,8 +318,20 @@
        initHouseOptions (xDate, y1Date, y2Date) {
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2) + '万人'
                        } else {
                            msg = params.value + '人'
                        }

                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>'`
                        return msg
                    }
                },
                color: ['#2967c4', '#112d54'],
                color: myColor,
                xAxis: {
                    type: 'value',
                    splitLine: {
@@ -351,29 +366,28 @@
                        data: y1Date,
                        type: 'bar',
                        zlevel: 2,
                        tooltip: {
                            trigger: 'item',
                            formatter: params => {
                                let msg
                                if (params.value > 10000) {
                                    msg = (params.value / 10000).toFixed(2) + '万人'
                                } else {
                                    msg = params.value + '人'
                                }
                                msg = ` <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #2d71d7;"></span> ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
                                return msg
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 30, 30, 0],
                                color: function (params) {
                                    var num = myColor.length
                                    return myColor[params.dataIndex % num]
                                },
                            }
                        },
                    },
                    {
                        data: y2Date,
                        show: true,
                        type: 'bar',
                        barGap: '-100%',
                        tooltip: {
                            trigger: 'item',
                            show: false

                        }
                        barWidth: '35%', //统计条宽度 
                        itemStyle: {
                            normal: {
                                color: 'rgba(102, 102, 102,0.5)'
                            },
                        },
                        z: 1,
                    }
                ],
                grid: {
@@ -413,7 +427,9 @@
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}个</strong>'
                    formatter: params => {
                        return `${params.marker} ${params.name}: ${params.value} 个`
                    }
                },
                xAxis: {
                    type: 'category',
@@ -442,6 +458,16 @@
                    {
                        data: yDate,
                        type: 'bar',
                        barWidth: '24%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [30, 30, 0, 0],
                                color: function (params) {
                                    var num = Math.floor(Math.random() * (myLandColors.length - 1) + 1)
                                    return myLandColors[params.dataIndex % num]
                                },
                            }
                        },
                    }
                ],
                grid: {
@@ -465,7 +491,7 @@
                yDate = [881, 2211, 6414, 4321, 1232]
            }

            landMyChart.setOption(this.initPersonOptions(xDate, yDate), true)
            landMyChart.setOption(this.initLandOptions(xDate, yDate), true)
        },

        peopleTabClick (type) {
@@ -825,20 +851,6 @@
    .person-box {
        height: 300px;

        .peopleTap {
            color: rgb(98, 95, 95);
            cursor: pointer;
        }

        .choosed {
            color: #fff;
        }

        .peopleNum {
            color: rgb(98, 95, 95);
            font-size: 14px;
        }

        .word {
            color: #fff;
            font-size: 14px;
@@ -851,8 +863,8 @@
        .back {
            color: #fff;
            position: absolute;
            top: 104px;
            left: 374px;
            top: 120px;
            right: 16px;
            width: 20px;
            height: 20px;
            font-size: 20px;
@@ -879,36 +891,48 @@
        margin: 8px;
        display: flex;
        flex-direction: column;
        background: $bg-color;
        // background: $bg-color;

        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title::after {
            content: '';
            position: absolute;
            top: 13px;
            left: 6px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #43bafe;
            box-shadow: 0px 0px 8px 2px #43bafe;
            margin-left: 8px;
        }

        .title {
            margin-top: 8px;
            padding: 0 18px 0 30px;
            padding: 0 18px 0 18px;
            position: relative;
            text-align: left;
            height: 36px;
            line-height: 36px;
            height: 54px;
            line-height: 54px;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            // background-image: linear-gradient(to right, #2e4aba, #010d3e);
            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
            color: #fff;

            .title-tab {
                span {
                    color: #99CCCC;
                    cursor: pointer;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .title-num {
                color: #fff;

                span {
                    color: #99CCCC;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .choosed {
                color: #fff;
@@ -932,23 +956,20 @@
            .tab {
                margin: 0 10px;
                flex: 1;
                background: rgba(29, 38, 105, 1);
                border: 1px solid rgba(20, 50, 123, 1);
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;

                &>div {
                    height: 26px;
                    line-height: 26px;
                    height: 22px;
                    line-height: 22px;
                }
            }

            .tab.on {
                border: 1px solid rgb(3, 108, 255);
            }
        }

        .echarts-box {
            padding: 10px;
            padding: 12px;
            padding-top: 0;
            flex: 1;
            width: 100%;
        }
@@ -960,8 +981,8 @@
        margin-bottom: 0;

        .title {
            height: 34px;
            line-height: 34px;
            height: 54px;
            line-height: 54px;
        }
    }


 src/views/home/components/rightContainer.vue

@@ -14,13 +14,17 @@

        <div class="alert-box" ref="alertBox">
            <div class="title" ref="alertBoxTitle">
                <span style="margin-right:130px">安保活动</span>
                <span class="activity" :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>
                <span>/</span>
                <span class="activity" :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
                <div>
                    安保活动
                </div>
                <div class="title-tab">
                    <span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/<span
                        :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
                </div>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table :height="tableHeight" :data="acttype == 0 ? underwayArr : historyArr" style="width: 100%"
                <el-table size="small" :height="tableHeight" :data="acttype == 0 ? underwayArr : historyArr"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick">
@@ -34,10 +38,13 @@

        <div class="crowd-box" ref="crowdBox">
            <div class="title">
                <span style="margin-right:130px">现有设备</span>
                <span class="equiment" :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>
                <span>/</span>
                <span class="activity" :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
                <div>
                    现有设备
                </div>
                <div class="title-tab">
                    <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/<span
                        :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
                </div>
            </div>
            <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
        </div>
@@ -123,7 +130,7 @@

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
            this.tableHeight = this.$refs.Container.offsetHeight - this.$refs.caseBox.offsetHeight - this.$refs.crowdBox.offsetHeight - this.$refs.alertBoxTitle.offsetHeight - 82
            this.tableHeight = this.$refs.Container.offsetHeight - this.$refs.caseBox.offsetHeight - this.$refs.crowdBox.offsetHeight - this.$refs.alertBoxTitle.offsetHeight - 62
        })
        this.equipmentEchartsCarousel()
    },
@@ -664,34 +671,51 @@
        margin: 8px;
        display: flex;
        flex-direction: column;
        background: $bg-color;
        // background: $bg-color;

        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title::after {
            content: '';
            position: absolute;
            top: 13px;
            left: 6px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #43bafe;
            box-shadow: 0px 0px 8px 2px #43bafe;
            margin-left: 8px;
        }
        // .title::after {
        //     content: '';
        //     position: absolute;
        //     top: 13px;
        //     left: 6px;
        //     width: 10px;
        //     height: 10px;
        //     border-radius: 50%;
        //     background: #43bafe;
        //     box-shadow: 0px 0px 8px 2px #43bafe;
        //     margin-left: 8px;
        // }

        .title {
            margin-top: 8px;
            padding: 0 18px 0 30px;
            display: flex;
            justify-content: space-between;
            padding: 0 18px 0 18px;
            position: relative;
            text-align: left;
            height: 36px;
            line-height: 36px;
            height: 54px;
            line-height: 54px;
            font-size: 16px;
            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
            color: #fff;
            // background-image: linear-gradient(to right, #2e4aba, #010d3e);

            .title-tab {
                color: #99CCCC;

                span {
                    cursor: pointer;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .timer {
                width: 250px;
@@ -705,17 +729,6 @@
                font-weight: 700;
                margin-left: 50%;
                letter-spacing: 1px;
            }

            .activity,
            .equiment {
                font-size: 16px;
                color: rgb(98, 95, 95);
                cursor: pointer;
            }

            .choosed {
                color: #fff;
            }
        }

@@ -732,8 +745,7 @@
            .tab {
                margin: 0 10px;
                flex: 1;
                background: rgba(29, 38, 105, 1);
                border: 1px solid rgba(20, 50, 123, 1);
                background: $sub-tab-bg-color;
                cursor: pointer;

                &>div {
@@ -741,14 +753,10 @@
                    line-height: 26px;
                }
            }

            .tab.on {
                border: 1px solid rgb(3, 108, 255);
            }
        }

        .echarts-box {
            padding: 10px;
            padding: 12px;
            flex: 1;
        }

@@ -763,14 +771,18 @@
        margin-bottom: 0;

        .title {
            height: 34px;
            line-height: 34px;
            height: 54px;
            line-height: 54px;
        }

        .echarts-box {
            overflow-x: hidden;
            overflow-y: auto;
        }

        :deep(.el-table__header-wrapper) {
            height: 40px;
        }
    }
}
</style>

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-26 14:53:59
 * @LastEditTime: 2022-11-29 10:16:01
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -1550,7 +1550,6 @@
        bottom: 8px;
        height: 300px;
        width: calc(100% - 800px);
        background-color: $bg-color;
        box-sizing: border-box;
        z-index: 99;
    }
@@ -1566,7 +1565,6 @@
        .map-select {
            margin: 0 5px;
            flex: 1;
            background: rgba(29, 38, 105, 1);
        }
    }


 src/views/lyout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-26 10:45:02
 * @LastEditTime: 2022-11-30 14:33:10
 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue
 * @Description: 
 * 
@@ -12,17 +12,34 @@
    <div class="wrapper">
        <div class="main-header">
            <!-- <div class="title"></div> -->
            <div class="menu-list left">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    :class="{ on: currentUrl.indexOf(item.path) != -1 }" @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList" :key="index">
                    <span>
                        {{ item.menuName }}
                    </span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">{{
                                subItem.menuName
                        }}</div>
                    </div>
                </div>
            </div>

            <div class="title">
                <img src="../../../public/img/icon.png" />
                <!-- <img src="../../../public/img/icon.png" /> -->
                <h3>社区警务平台</h3>
            </div>

            <!-- 菜单导航 -->
            <div class="menu-list">
            <div class="menu-list right">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    :class="{ on: currentUrl.indexOf(item.path) != -1 }" @click="goToPath(item)"
                    v-for="(item, index) in menuList" :key="index">
                    {{ item.menuName }}
                    v-for="(item, index) in menuRightList" :key="index">
                    <span>
                        {{ item.menuName }}
                    </span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">{{
                                subItem.menuName
@@ -33,7 +50,9 @@

            <!-- 用户登录展示的 -->
            <div class="user-infor">
                <i class="el-icon-user-solid"></i>
                <div>
                    <i class="el-icon-user-solid"></i>
                </div>
            </div>
        </div>

@@ -59,7 +78,7 @@
export default {
    data () {
        return {
            menuList: [
            menuLeftList: [
                {
                    menuName: '首页',
                    path: '/lyout/home'
@@ -72,7 +91,9 @@
                    menuName: '警力资源',
                    path: '/lyout/police'

                },
                }
            ],
            menuRightList: [
                {
                    menuName: '视频监控',
                    path: '/lyout/video',
@@ -229,12 +250,32 @@
        font-size: 44px;
        font-weight: bold;
        color: #fff;
        background: $bg-blue;
        z-index: 99;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(/img/box/title-bg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            z-index: -1;
            opacity: 0.8;
        }

        .title {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 450px;
            font-size: 24px;
            // text-align: center;
@@ -249,36 +290,68 @@
            }
        }

        .menu-list.left {
            margin-left: 72px;

            .nav-list {
                background: rgba(5, 13, 64, .8);
                // border-radius: 10px 16px 10px 16px;
                transform: skew(58deg);
                box-shadow: inset 0 0 10px rgb(14, 98, 130);

                &>span {
                    transform: skew(-58deg);
                }
            }
        }

        .menu-list.right {
            margin-right: 72px;

            .nav-list {
                background: rgba(5, 13, 64, .8);
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-58deg);
                box-shadow: inset 0 0 10px rgb(14, 98, 130);

                &>span {
                    transform: skew(58deg);
                }
            }
        }

        .menu-list {
            margin-right: 60px;
            display: flex;
            align-items: center;

            .nav-list.on {
                // color: rgba(32, 106, 181, 1);
                border-bottom: 2px solid #409eff;
                box-sizing: border-box;
                // border-bottom: 2px solid #409eff;
                color: rgba(252, 189, 86, 1);
            }

            .nav-list {
                margin: 0 15px;
                position: relative;
                padding: 0 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                width: 132px;
                height: 36px;
                font-size: 18px;
                font-weight: 400;
                font-weight: bold;
                letter-spacing: 0.5px;
                cursor: pointer;
                border-bottom: 3px solid transparent;

                .sub-nav-list {
                    border-top: 14px solid transparent;
                    position: absolute;
                    top: 40px;
                    top: 28px;
                    left: 72px;
                    width: 100%;
                    cursor: default;
                    z-index: 999;
                    transform: skew(58deg);

                    div {
                        height: 36px;
@@ -310,6 +383,22 @@
            line-height: 60px;
            text-align: center;
            font-size: 24px;

            div {
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background: rgba(5, 13, 64, .8);
                box-shadow: inset 0 0 10px rgb(14, 98, 130);
                border-radius: 50%;
            }
        }
    }