样式调整

shuishen

2022-09-27 87f0d4a3fc1a05b4b3439e2458dd7c768a810948

样式调整

 src/styles/element-ui/element-ui.scss

@@ -1,8 +1,7 @@
// 表格  el-table!
// ------------------------------------------------------------------

.el-table tr th {
    background: rgba(0, 92, 169, 1.0) !important;
    background: rgb(1, 76, 137) !important;
    color: #fff !important;
}


 src/views/activity/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-09-26 16:23:34
 * @LastEditTime: 2022-09-27 09:18:54
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * 
@@ -532,6 +532,7 @@
            font-size: 24px;
            letter-spacing: 20px;
        }

        .search-box {
            padding: 0 10px;

@@ -548,37 +549,42 @@
                .category-value {
                    flex: 1;
                }

                input {
                    width: 209px;
                    height: 32px;
                    font-size: 12px;
                    text-indent: 1em;
                    color: #ffffff;
                    background-color: rgba(20, 50, 123, 1);
                    border: 1px solid rgba(20, 50, 123, 1);
                    background-color: transparent;
                    border: 1px solid rgb(0, 92, 169);
                    border-radius: 5px 0 0 5px;
                }

                input:focus {
                    outline: none;
                }

                input::-webkit-input-placeholder {
                    color: rgba(238, 238, 238, 0.7);
                }

                button {
                    font-size: 20px;
                    font-weight: 700;
                    width: 60px;
                    height: 32px;
                    background-color: rgba(29, 38, 105, 1);
                    background-color: rgb(0, 92, 169);
                    color: #fff;
                    border: 1px solid rgba(29, 38, 105, 1);
                    border: 1px solid rgb(0, 92, 169);
                    cursor: pointer;
                    border-radius: 0 5px 5px 0;
                    vertical-align: top;
                }

                button:active {
                    background-color: rgba(20, 50, 123, 1);
                    border: 1px solid rgba(20, 50, 123, 1);
                    background-color: rgb(0, 92, 169);
                    border: 1px solid rgb(0, 92, 169);
                }
            }
        }

 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-09-26 17:17:00
 * @LastEditTime: 2022-09-27 10:34:43
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -14,13 +14,8 @@
        <div class="left-container">
            <div class="person-box">
                <div class="title">
                    <div class="one-level">现有人员</div>
                    <i></i> 现有人员
                </div>

                <!-- <div class="sub-title">
                    <div class="one-level">实有人口总数</div>
                    <div class="two-level">183.16万人</div>
                </div>-->

                <div class="sub-tab">
                    <div class="tab">
@@ -41,7 +36,7 @@
            </div>
            <div class="land-box">
                <div class="title">
                    <div class="one-level">现有房屋</div>
                    <i></i> 现有房屋
                </div>

                <div class="sub-tab">
@@ -59,7 +54,7 @@
            </div>
            <div class="equipment-box">
                <div class="title">
                    <div class="one-level">现有设备</div>
                    <i></i> 现有设备
                </div>

                <div id="EquipmentEcharts" class="echarts-box"></div>
@@ -69,24 +64,21 @@
        <div class="right-container">
            <div class="case-box">
                <div class="title">
                    <div class="one-level">警情动态</div>
                    <i></i> 警情动态
                </div>

                <div id="EventChangeEcharts" class="echarts-box"></div>
            </div>
            <div class="alert-box">
                <div class="title">
                    <div class="one-level">历史警情(近一年)</div>
                    <i></i> 历史警情(近一年)
                </div>
                <!-- <div class="sub-title">
                    <div class="one-level">警情、案事件总量</div>
                    <div class="two-level">555578起</div>
                </div>-->

                <div id="EventCountEcharts" class="echarts-box"></div>
            </div>
            <div class="crowd-box">
                <div class="title">
                    <div class="one-level">重点人群</div>
                    <i></i> 重点人群
                </div>

                <div id="peopleList" class="echarts-box">
@@ -106,19 +98,19 @@
        </div>

        <div class="center-container">
            <div class="layers-control-btn">
            <div class="layers-control-btn house">
                <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox>
            </div>
            <div class="layers-control-btn">
            <div class="layers-control-btn car">
                <el-checkbox v-model="carLayerShow" @change="carChange">警车</el-checkbox>
            </div>
            <div class="layers-control-btn">
            <div class="layers-control-btn phone">
                <el-checkbox v-model="phoneLayerShow" @change="phoneChange">手台</el-checkbox>
            </div>
            <div class="layers-control-btn">
            <div class="layers-control-btn moitor">
                <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
            </div>
            <div class="layers-control-btn">
            <div class="layers-control-btn panorama">
                <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
            </div>
        </div>
@@ -1122,6 +1114,7 @@
            height: 35%;

            .echarts-box {
                overflow-x: hidden;
                overflow-y: auto;
            }
        }
@@ -1140,10 +1133,23 @@
            padding: 0 10px;

            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 18px;
                position: relative;
                text-align: left;
                height: 40px;
                line-height: 40px;
                font-size: 20px;

                i {
                    position: absolute;
                    top: 6px;
                    left: 0;
                    width: 8px;
                    height: 28px;
                    border-radius: 4px;
                    background: #43bafe;
                    box-shadow: 0px 0px 8px 2px #43bafe;
                }
            }

            .sub-title {
@@ -1190,9 +1196,84 @@
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            width: 78px;
            height: 29px;
            background-color: rgba(16, 29, 74, 0.9);
            width: 96px;
            height: 40px;
            border-radius: 20px;
            background-color: $bg-color;

            :deep(.el-checkbox__inner) {
                border-radius: 50%;
            }
        }

        .house {
            :deep(.el-checkbox__inner) {
                background: rgb(255, 221, 136);
                border-color: rgb(255, 221, 136);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(255, 183, 0);
                    border-color: rgb(255, 183, 0);
                }
            }
        }

        .car {
            :deep(.el-checkbox__inner) {
                background: rgb(79, 114, 252);
                border-color: rgb(79, 114, 252);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(0, 24, 120);
                    border-color: rgb(0, 24, 120);
                }
            }
        }

        .phone {
            :deep(.el-checkbox__inner) {
                background: rgb(209, 179, 255);
                border-color: rgb(209, 179, 255);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(102, 0, 255);
                    border-color: rgb(102, 0, 255);
                }
            }
        }

        .moitor {
            :deep(.el-checkbox__inner) {
                background: rgb(147, 190, 255);
                border-color: rgb(147, 190, 255);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(96, 160, 255);
                    border-color: rgb(96, 160, 255);
                }
            }
        }

        .panorama {
            :deep(.el-checkbox__inner) {
                background: rgb(184, 206, 239);
                border-color: rgb(184, 206, 239);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(18, 91, 201);
                    border-color: rgb(18, 91, 201);
                }
            }
        }
    }


 src/views/house/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-09-26 17:03:10
 * @LastEditTime: 2022-09-27 09:20:26
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -668,8 +668,8 @@
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: rgba(20, 50, 123, 1);
            border: 1px solid rgba(20, 50, 123, 1);
            background-color: transparent;
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
        }
        input:focus {
@@ -683,15 +683,15 @@
            font-weight: 700;
            width: 80px;
            height: 100%;
            background-color: rgba(29, 38, 105, 1);
            background-color: rgb(0, 92, 169);
            color: #fff;
            border: 1px solid rgba(29, 38, 105, 1);
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }
        button:active {
            background-color: rgba(20, 50, 123, 1);
            border: 1px solid rgba(20, 50, 123, 1);
            background-color: rgb(0, 92, 169);
            border: 1px solid rgb(0, 92, 169);
        }
    }


 src/views/police/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-09-26 16:23:49
 * @LastEditTime: 2022-09-27 09:20:02
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -357,15 +357,14 @@
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: rgb(104, 94, 94);
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            background-color: rgba(29, 38, 105, 1);
            border-bottom: 1px solid #33566c;
        }

        .choosed {
            background-color: rgba(20, 50, 123, 1);
            color: #fff;
            border: 1px solid rgba(20, 50, 123, 1);
            background-color: rgb(0, 92, 169);
        }
    }

@@ -380,8 +379,8 @@
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: rgba(20, 50, 123, 1);
            border: 1px solid rgba(20, 50, 123, 1);
            background-color: transparent;
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
        }
        input:focus {
@@ -395,15 +394,15 @@
            font-weight: 700;
            width: 80px;
            height: 100%;
            background-color: rgba(29, 38, 105, 1);
            background-color: rgb(0, 92, 169);
            color: #fff;
            border: 1px solid rgba(29, 38, 105, 1);
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }
        button:active {
            background-color: rgba(20, 50, 123, 1);
            border: 1px solid rgba(20, 50, 123, 1);
            background-color: rgb(0, 92, 169);
            border: 1px solid rgb(0, 92, 169);
        }
    }


 src/views/video/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-09-26 17:02:55
 * @LastEditTime: 2022-09-27 09:19:30
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
@@ -161,6 +161,8 @@

<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 400px;
    height: 100%;
@@ -177,37 +179,49 @@
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: rgba(20, 50, 123, 1);
            border: 1px solid rgba(20, 50, 123, 1);
            background-color: transparent;
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
        }

        input:focus {
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: rgba(238, 238, 238, 0.7);
        }

        button {
            font-size: 24px;
            font-weight: 700;
            width: 80px;
            height: 100%;
            background-color: rgba(29, 38, 105, 1);
            background-color: rgb(0, 92, 169);
            color: #fff;
            border: 1px solid rgba(29, 38, 105, 1);
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: rgba(20, 50, 123, 1);
            border: 1px solid rgba(20, 50, 123, 1);
            background-color: rgb(0, 92, 169);
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .list-show {
        height: 765px;
        .list-box {
            height: 765px;
        flex: 1;

        & > div {
            height: 100%;
            display: flex;
            flex-direction: column;

            // background-color: #fff;
            .list-box {
                flex: 1;
            }
        }
    }
}