样式调整

guanqb

2022-09-23 5b30979702fc61461af86ded10e11044026f1959

样式调整

 src/styles/element-ui/element-ui.css

New file
@@ -0,0 +1,33 @@
:deep(.el-table tr:nth-child(2n)) {
  background: #324e75;
  color: #fff;
}

:deep(.el-table tr:nth-child(2n-1)) {
  background: #26426a;
  color: #fff;
}

:deep(.el-table tr:hover td) {
  cursor: pointer;
  background-color: rgba(222, 176, 176, 0.2) !important;
}

:deep(.el-table::before) {
  height: 0px;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #1a3252;
  color: #ffffff !important;
}

:deep(.el-pagination.is-background .btn-next),
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .el-pager li) {
  background-color: #fff;
}

:deep(.el-pagination.is-background .el-pager li:hover) {
  color: #1a3252;
}

 src/styles/element-ui/element-ui.min.css

New file
@@ -0,0 +1 @@
:deep(.el-table tr:nth-child(2n)){background:#324e75;color:#fff}:deep(.el-table tr:nth-child(2n-1)){background:#26426a;color:#fff}:deep(.el-table tr:hover td){cursor:pointer;background-color:rgba(222,176,176,0.2) !important}:deep(.el-table::before){height:0px}:deep(.el-pagination.is-background .el-pager li:not(.disabled).active){background-color:#1a3252;color:#ffffff !important}:deep(.el-pagination.is-background .btn-next),:deep(.el-pagination.is-background .btn-prev),:deep(.el-pagination.is-background .el-pager li){background-color:#fff}:deep(.el-pagination.is-background .el-pager li:hover){color:#1a3252}

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

New file
@@ -0,0 +1,33 @@
// 表格  el-table!
:deep(.el-table tr:nth-child(2n)) {
    background: #324e75;
    color: #fff;
}
:deep(.el-table tr:nth-child(2n-1)) {
    background: #26426a;
    color: #fff;
}
:deep(.el-table tr:hover td) {
    cursor: pointer;
    background-color: rgba(222, 176, 176, 0.2)!important;
}
:deep(.el-table::before) {
    height: 0px;
}




// 分页  el-pagination！
:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
    background-color: #1a3252;
    color: #ffffff !important;
}
:deep(.el-pagination.is-background .btn-next),
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .el-pager li) {
    background-color: #fff;
}
:deep(.el-pagination.is-background .el-pager li:hover) {
    color: #1a3252;
}

 src/styles/public/index.scss

@@ -1 +1,2 @@
$bg-color-blue: rgba(7, 22, 37, 0.8);
$bg-color-blue: rgba(7, 22, 37, 0.8);


 src/views/activity/index.vue

@@ -52,7 +52,7 @@
                    <div
                        class="row-box"
                        :class="{on: currentClickIndex === index}"
                        v-for="(item, index) in activityList"
                        v-for="(item, index) in activityList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        :key="index"
                        @click="goAbDetail(item, index)"
                    >
@@ -77,13 +77,13 @@
                </div>

                <el-pagination
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    background
                    layout="prev, pager, next"
                    :total="activityList.length"
                    :page-size="pagesize"
                    pager-count="3"
                    :current-page="currentPage"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>
@@ -183,7 +183,8 @@
            searchActivity: '',
            selectTime: '',
            navType: 0,
            currentPage: 4,
            currentPage: 1,
            pagesize: 4,
            treeData: [{
                id: 1,
                label: '数据地图',
@@ -385,12 +386,6 @@

    },
    methods: {
        sizeChange (val) {
            console.log(`每页 ${val} 条`)
        },
        currentChange (val) {
            console.log(`当前页: ${val}`)
        },
        treeCheckClick (e1, e2) {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'activeLayer',
@@ -491,7 +486,10 @@
            })

            analyseLayer.addOverlay(analysePolygon)
        }
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
        },
    },
    destroyed () {
        this.$EventBus.$emit('mapClearLayer', {
@@ -515,6 +513,9 @@
</script>

<style scoped lang="scss">
@import '@/styles/public/index.scss';
@import '@/styles/element-ui/element-ui.scss';

.container {
    height: 100%;
    position: relative;
@@ -526,7 +527,7 @@
        width: 400px;
        height: 100%;
        color: #fff;
        background: rgba(7, 22, 37, 0.8);
        background: $bg-color-blue;

        .search-box {
            padding: 0 10px;
@@ -584,12 +585,11 @@
                    }
                }
                .row-box:hover {
                    background-color: rgba(255, 255, 255, 0.5);
                    color: #000;
                    background-color: rgba(222, 176, 176, 0.2);
                }

                .row-box.on {
                    background: rgba(255, 64, 0, 0.58);
                    background: rgba(222, 176, 176, 0.2);
                }

                :deep(.el-dialog) {
@@ -616,7 +616,7 @@
        flex-direction: column;
        width: 240px;
        color: #fff;
        background: rgba(7, 22, 37, 0.8);
        background: $bg-color-blue;
        :deep(.el-tree-node__content) {
            background: transparent;
        }
@@ -633,7 +633,7 @@
        padding: 10px;
        border-radius: 10px 0 0 10px;
        color: #fff;
        background: rgba(7, 22, 37, 0.8);
        background: $bg-color-blue;
        overflow-x: hidden;
        overflow-y: auto;


 src/views/home/index.vue

@@ -131,9 +131,9 @@
            </div>
        </div>

        <div class="region-select">
        <!-- <div class="region-select">
            <map-select @va="childValue" :num="count" :sel="sel"></map-select>
        </div>
        </div>-->

        <div class="top-container">
            <div class="selectBox">
@@ -1126,6 +1126,7 @@

<style scoped lang="scss">
@import '@/styles/public/index.scss';
@import '@/styles/element-ui/element-ui.scss';

.container {
    color: #fff;
@@ -1154,7 +1155,7 @@
        right: 0;
        width: 400px;
        height: calc(100% - 80px);
        background: rgba(7, 22, 37, 0.8);
        background: $bg-color-blue;

        .case-box {
            height: 30%;
@@ -1166,21 +1167,6 @@
            .el-table__row.statistics-warning-row {
                background: #ff0000;
            }
        }
        :deep(.el-table tr:nth-child(2n)) {
            background: #324e75;
            color: #fff;
        }
        :deep(.el-table tr:nth-child(2n-1)) {
            background: #26426a;
            color: #fff;
        }
        :deep(.el-table tr:hover td) {
            cursor: pointer;
            background-color: rgba(222, 176, 176, 0.2);
        }
        :deep(.el-table::before) {
            height: 0px;
        }
    }


 src/views/police/index.vue

@@ -338,6 +338,8 @@
</script>

<style scoped lang="scss">
@import '@/styles/element-ui/element-ui.scss';

.container {
    display: flex;
    flex-direction: column;
@@ -418,40 +420,6 @@
            // background-color: #fff;
            .list-box {
                flex: 1;
                :deep(.el-table tr:nth-child(2n)) {
                    background: #324e75;
                    color: #fff;
                }
                :deep(.el-table tr:nth-child(2n-1)) {
                    background: #26426a;
                    color: #fff;
                }
                :deep(.el-table tr:hover td) {
                    cursor: pointer;
                    background-color: rgba(222, 176, 176, 0.2);
                }
                :deep(.el-table::before) {
                    height: 0px;
                }
            }
            .pages {
                :deep(.el-pagination.is-background
                        .el-pager
                        li:not(.disabled).active) {
                    background-color: #1a3252;
                    color: #ffffff !important;
                }
                // :depp(.el-pager li:not(.disabled).active) {
                //     background-color: #009688;
                // }
                :deep(.el-pagination.is-background .btn-next),
                :deep(.el-pagination.is-background .btn-prev),
                :deep(.el-pagination.is-background .el-pager li) {
                    background-color: #95a0ad;
                }
                :deep(.el-pagination.is-background .el-pager li:hover) {
                    color: #1a3252;
                }
            }
        }
    }

 src/views/video/index.vue

@@ -98,7 +98,6 @@
    methods: {
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
            console.log(this.currentPage)  //点击第几页
        },
        getData () {
            for (let i = 0; i < 5; i++) {
@@ -160,6 +159,7 @@
</script>

<style scoped lang="scss">
@import '@/styles/element-ui/element-ui.scss';
.container {
    position: relative;
    width: 400px;
@@ -184,7 +184,7 @@
            outline: none;
        }
        input::-webkit-input-placeholder {
            color: #ffffff;
            color: rgba(238, 238, 238, 0.7);
        }
        button {
            font-size: 24px;
@@ -206,40 +206,6 @@
        height: 765px;
        .list-box {
            height: 765px;
            :deep(.el-table tr:nth-child(2n)) {
                background: #324e75;
                color: #fff;
            }
            :deep(.el-table tr:nth-child(2n-1)) {
                background: #26426a;
                color: #fff;
            }
            :deep(.el-table tr:hover td) {
                cursor: pointer;
                background-color: rgba(222, 176, 176, 0.2);
            }
            :deep(.el-table::before) {
                height: 0px;
            }
        }
        .pages {
            :deep(.el-pagination.is-background
                    .el-pager
                    li:not(.disabled).active) {
                background-color: #1a3252;
                color: #ffffff !important;
            }
            // :depp(.el-pager li:not(.disabled).active) {
            //     background-color: #009688;
            // }
            :deep(.el-pagination.is-background .btn-next),
            :deep(.el-pagination.is-background .btn-prev),
            :deep(.el-pagination.is-background .el-pager li) {
                background-color: #95a0ad;
            }
            :deep(.el-pagination.is-background .el-pager li:hover) {
                color: #1a3252;
            }
        }
    }
}