样式调整

shuishen

2022-11-28 4f209e33a1a159c0e9cbee05ae18d628feb46d74

样式调整

 public/img/box/1.png

 public/img/box/2.png

 public/img/box/box-bg.png

 src/views/home/components/bottomContainer.vue

@@ -1,30 +1,14 @@
c<template>
<template>
    <div class="container">
        <div class="header">
            <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>
                <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>
                <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
                <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
            </div>
        </div>

@@ -42,17 +26,11 @@
                    <span class="callContent">报警内容</span>
                </li>
            </ul>
            <vue-seamless-scroll
                :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr"
                class="warp"
            >
            <vue-seamless-scroll :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr"
                class="warp">
                <ul class="item">
                    <li
                        v-for="(item, index) in (historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr)"
                        :key="index"
                        :data-obj="JSON.stringify(item)"
                        class="row"
                    >
                    <li v-for="(item, index) in (historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr)"
                        :key="index" :data-obj="JSON.stringify(item)" class="row">
                        <!-- <span class="num" v-text="item.num"></span> -->
                        <span class="num" v-text="index + 1"></span>
                        <span class="type" v-text="item.type"></span>
@@ -288,6 +266,7 @@
                color: #fff;
            }
        }

        .history-tab {
            position: absolute;
            top: 10px;
@@ -295,6 +274,7 @@
            display: flex;
            border-radius: 6px;
            overflow: hidden;

            span {
                padding: 0 10px;
                height: 26px;

 src/views/home/components/leftContainer.vue

@@ -881,11 +881,15 @@
        flex-direction: column;
        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: 15px;
            left: 0;
            top: 13px;
            left: 6px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
@@ -895,15 +899,16 @@
        }

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

            .choosed {
                color: #fff;
@@ -953,6 +958,11 @@
        flex: 1;
        margin-top: 0;
        margin-bottom: 0;

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

    :deep(.el-table__body-wrapper) {

 src/views/home/components/rightContainer.vue

@@ -123,9 +123,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 - 52

            console.log(this.tableHeight, this.$refs.Container.offsetHeight, this.$refs.caseBox.offsetHeight, this.$refs.crowdBox.offsetHeight, this.$refs.alertBoxTitle.offsetHeight, 32)
            this.tableHeight = this.$refs.Container.offsetHeight - this.$refs.caseBox.offsetHeight - this.$refs.crowdBox.offsetHeight - this.$refs.alertBoxTitle.offsetHeight - 82
        })
        this.equipmentEchartsCarousel()
    },
@@ -668,11 +666,15 @@
        flex-direction: column;
        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: 15px;
            left: 0;
            top: 13px;
            left: 6px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
@@ -682,13 +684,14 @@
        }

        .title {
            padding: 0 18px 0 25px;
            margin-top: 8px;
            padding: 0 18px 0 30px;
            position: relative;
            text-align: left;
            height: 40px;
            line-height: 40px;
            height: 36px;
            line-height: 36px;
            font-size: 16px;
            background-image: linear-gradient(to right, #2e4aba, #010d3e);
            // background-image: linear-gradient(to right, #2e4aba, #010d3e);

            .timer {
                width: 250px;
@@ -759,6 +762,11 @@
        margin-top: 0;
        margin-bottom: 0;

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

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