新主题，先不要发版

src/layout/index.scss

@@ -481,3 +481,27 @@
     color: white;
     background-color: var(--el-color-primary-dark-2);
 }
+
+//深色模式
+html.dark {
+    .hc-layout-box {
+        .hc-layout-header, .hc-layout-container .hc-layout-aside {
+            background: transparent;
+            .el-menu .el-menu-item.is-active::after {
+                display: none;
+            }
+        }
+        .hc-layout-container .hc-layout-main .hc-router-menu-bar {
+            background: #000834;
+            .hc-router-tab-item {
+                color: #7a7a7a;
+            }
+            .hc-router-tab-item.cur {
+                color: #ffffff;
+            }
+        }
+        .header-icon-bar {
+            border: 0;
+        }
+    }
+}

src/layout/index.vue

@@ -1,7 +1,7 @@
 <template>
     <el-container class="hc-layout-box">
-        <div v-show="appTheme === 'dark'" class="hc-app-bg-box">
-            <img :src="appViewBg" alt="" crossOrigin="anonymous">
+        <div v-if="appTheme === 'dark'" class="hc-app-bg-box">
+            <img :src="appViewBg" alt="">
         </div>
         <el-header class="hc-layout-header">
             <div class="hc-layout-header-logo" :style="`width: ${isCollapse ? '90px' : '200px'};`" @click="logoClick">
@@ -51,7 +51,7 @@
 </template>
 
 <script setup>
-import { nextTick, onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
 import { useRouter } from 'vue-router'
 import { initButtons } from '~sto/app'
@@ -91,6 +91,13 @@ onMounted(() => {
     initButtons()
 })
 
+//监听
+watch(() => [
+    store.getTheme,
+], ([theme]) => {
+    appTheme.value = theme
+})
+
 //路由信息
 const routerMenuLoad = ({ key }) => {
     menuBarKey.value = key

src/styles/page/using/query.scss

@@ -1,3 +1,435 @@
+.hc-search-hot-key {
+    position: relative;
+    color: #9A9A9A;
+    padding: 16px;
+    font-size: 14px;
+}
+
+.hc-search-screening-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    font-size: 14px;
+    .title {
+        position: relative;
+    }
+    .screening-key {
+        position: relative;
+        padding: 1px 12px;
+        border-radius: 100px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        transition: background 0.2s, color 0.2s;
+        &:hover {
+            background: var(--el-color-primary-light-8);
+        }
+        &.cut {
+            background: var(--el-color-primary);
+            color: white;
+            cursor: default;
+        }
+    }
+    .screening-key + .screening-key {
+        margin-left: 10px;
+    }
+}
+.hc-search-screening-item + .hc-search-screening-item {
+    margin-top: 14px;
+}
+
+
+.hc-query-content-header-box {
+    position: relative;
+    display: flex;
+    padding: 16px 0;
+    margin-bottom: 24px;
+    align-items: center;
+    border-bottom: 1px dashed #dcdcdc;
+    .header {
+        position: relative;
+        flex: 1;
+    }
+    .extra {
+        position: relative;
+    }
+}
+
+.hc-gather-card-box {
+    position: relative;
+    height: calc(100% - 180px);
+    .hc-card-item-main {
+        position: relative;
+        height: 100%;
+    }
+    .hc-card-item-file {
+        display: none;
+        margin-top: 24px;
+        .hc-icon-close {
+            font-size: 20px;
+        }
+    }
+    &.file-table {
+        .hc-card-item-main {
+            height: calc(100% - 344px);
+        }
+        .hc-card-item-file {
+            display: block;
+            height: 320px;
+        }
+    }
+}
+
+
+
+.hc-carry-spot-checks-pdf {
+    position: relative;
+    flex: 1 1 auto;
+    height: 100%;
+    transition: 0.2s;
+    .hc-csc-pdf-btn {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        color: white;
+        font-size: 25px;
+        z-index: 111;
+        cursor: pointer;
+        width: 36px;
+        height: 40px;
+        display: flex;
+        padding-left: 6px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 150px 0 0 150px;
+        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
+        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        background-size: 200%;
+        transition: background-position 0.5s;
+        &:hover {
+            background-position: 100% 0;
+        }
+    }
+}
+.hc-carry-spot-checks-data {
+    position: relative;
+    height: 100%;
+    width: 480px;
+    padding-left: 14px;
+    border-left: 1px solid #e9e9e9;
+    transition: 0.2s;
+    .hc-csc-switch {
+        position: relative;
+        margin-bottom: 10px;
+    }
+    .hc-csc-info-box {
+        position: relative;
+        background: #E7EEF4;
+        border-radius: 10px;
+        padding: 12px;
+        height: 244px;
+        margin-bottom: 20px;
+        .hc-info-text-item {
+            position: relative;
+            font-size: 14px;
+            display: flex;
+            align-items: flex-start;
+            .title {
+                font-weight: bold;
+            }
+            .content {
+                flex: 1;
+                position: relative;
+                color: #101010;
+            }
+        }
+        .hc-info-text-item + .hc-info-text-item {
+            margin-top: 8px;
+        }
+    }
+    .hc-csc-data-box {
+        position: relative;
+        background: #E7EEF4;
+        border-radius: 10px;
+        padding: 12px;
+        height: calc(100% - 400px);
+        margin-bottom: 16px;
+        .hc-csc-associated-row {
+            position: relative;
+            text-align: left;
+            display: flex;
+            align-items: center;
+        }
+        .hc-table-info-btn {
+            position: absolute;
+            right: -5px;
+            top: -12px;
+            color: white;
+            font-size: 20px;
+            z-index: 111;
+            cursor: pointer;
+            border-radius: 50px;
+            width: 34px;
+            height: 34px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
+            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+            background-size: 200%;
+            transition: background-position 0.5s;
+            &:hover {
+                background-position: 100% 0;
+            }
+        }
+    }
+    .hc-csc-action-box {
+        position: relative;
+        background: white;
+        border-radius: 10px;
+        padding: 12px;
+        height: 70px;
+        .header-box {
+            position: relative;
+            display: flex;
+            align-items: center;
+            .title {
+                flex: 1;
+                color: #9A9A9A;
+                font-size: 15px;
+            }
+        }
+        .btn-box {
+            position: relative;
+            text-align: center;
+        }
+    }
+}
+.hc-collapse-item-title {
+    flex: 1;
+    position: relative;
+    margin-left: 24px;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+    .icon {
+        margin-right: 10px;
+        color: #FFAF2D;
+        font-size: 24px;
+    }
+    .title {
+        flex: 1;
+        position: relative;
+        user-select: none;
+        color: #50545E;
+        font-size: 16px;
+        font-weight: 400;
+    }
+}
+
+.hc-file-cabinet-gui {
+    position: relative;
+    height: 100%;
+    display: flex;
+    padding: 24px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: flex-start;
+    justify-content: flex-start;
+    .gui-item {
+        position: relative;
+        height: 100%;
+        width: 25%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .gui-view {
+            position: relative;
+            cursor: pointer;
+            transition: transform .2s;
+            img {
+                width: 100%;
+            }
+            .num {
+                position: absolute;
+                left: 50%;
+                top: 13.5%;
+                color: white;
+                font-weight: bold;
+                font-size: 14px;
+            }
+            &:hover {
+                transform: scale(1.3);
+            }
+        }
+    }
+    &.hidden {
+        visibility: hidden;
+    }
+}
+
+//视频
+.hc-gui-video {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: -8%;
+    z-index: -1;
+    opacity: 0;
+    video {
+        width: 100%;
+        height: 100%;
+    }
+    &.animate__zoomIn {
+        z-index: 2;
+        opacity: 1;
+        animation-duration: 1s;
+    }
+}
+
+.hc-gui-info-drawer {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    overflow-y: hidden;
+    overflow-x: auto;
+    .hc-gui-info-img {
+        position: relative;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        //justify-content: center;
+        flex: 1;
+        .gui-info-img {
+            position: relative;
+            height: 100%;
+            padding-bottom: 10px;
+            img {
+                position: relative;
+                height: 100%;
+            }
+            .gui-file-item-box {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                display: flex;
+                padding: 18px;
+                flex-direction: row;
+                flex-wrap: wrap;
+                align-items: center;
+                align-content: flex-start;
+                justify-content: flex-start;
+                .gui-file-item {
+                    position: relative;
+                    display: flex;
+                    width: 25%;
+                    height: 19.6%;
+                    padding: 1%;
+                    .item {
+                        position: relative;
+                        background: #927a6a;
+                        height: 100%;
+                        width: 12%;
+                        padding: 6px 3px;
+                        font-size: 13px;
+                        border: 1px solid #5d4848;
+                        border-radius: 3px;
+                        writing-mode: vertical-lr;
+                        text-orientation: upright;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        cursor: pointer;
+                        transition: transform .2s;
+                        &.query {
+                            background: #ffddc6;
+                            color: #101010;
+                        }
+                        &.cur, &:hover {
+                            z-index: 22;
+                            color: white;
+                            background: #A16222;
+                            border: 1px solid #bbbbbb;
+                            transform: scale(1.2);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .hc-gui-info-data {
+        position: relative;
+        height: 100%;
+        //width: 400px;
+        padding-left: 40px;
+        .hc-gui-data-container {
+            position: relative;
+            height: calc(100% - 70px);
+            img {
+                height: 550px;
+            }
+            .hc-gui-info-item-box {
+                position: absolute;
+                top: 58px;
+                left: 38px;
+                right: 28px;
+                height: 400px;
+                overflow: hidden;
+                .hc-gui-info-item {
+                    position: relative;
+                    height: 100%;
+                    width: 100%;
+                    .info-item {
+                        position: relative;
+                        display: flex;
+                        color: #101010;
+                        .title {
+                            margin-right: 14px;
+                            font-weight: bold;
+                            span + span {
+                                margin-left: 29px;
+                            }
+                        }
+                        .text {
+                            flex: 1;
+                        }
+                    }
+                    .info-item-name {
+                        color: #101010;
+                        margin-top: 30px;
+                        line-height: 1.8;
+                    }
+                    .hc-info-item-bottom {
+                        position: absolute;
+                        bottom: 4px;
+                        right: -2px;
+                        left: 4px;
+                    }
+                    .info-item + .info-item {
+                        margin-top: 14px;
+                    }
+                }
+            }
+        }
+        .btn-box {
+            position: relative;
+            height: 50px;
+            display: flex;
+            padding-right: 10px;
+            justify-content: flex-end;
+            align-items: flex-end;
+        }
+    }
+}
+
+
 //tag框
 .flex_box{
     position: absolute;

src/styles/page/using/scoped/query.scss

@@ -1,430 +0,0 @@
-.hc-search-hot-key {
-    position: relative;
-    color: #9A9A9A;
-    padding: 16px;
-    font-size: 14px;
-}
-
-.hc-search-screening-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    font-size: 14px;
-    .title {
-        position: relative;
-    }
-    .screening-key {
-        position: relative;
-        padding: 1px 12px;
-        border-radius: 100px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        transition: background 0.2s, color 0.2s;
-        &:hover {
-            background: var(--el-color-primary-light-8);
-        }
-        &.cut {
-            background: var(--el-color-primary);
-            color: white;
-            cursor: default;
-        }
-    }
-    .screening-key + .screening-key {
-        margin-left: 10px;
-    }
-}
-.hc-search-screening-item + .hc-search-screening-item {
-    margin-top: 14px;
-}
-
-
-.hc-query-content-header-box {
-    position: relative;
-    display: flex;
-    padding: 16px 0;
-    margin-bottom: 24px;
-    align-items: center;
-    border-bottom: 1px dashed #dcdcdc;
-    .header {
-        position: relative;
-        flex: 1;
-    }
-    .extra {
-        position: relative;
-    }
-}
-
-.hc-gather-card-box {
-    position: relative;
-    height: calc(100% - 180px);
-    .hc-card-item-main {
-        position: relative;
-        height: 100%;
-    }
-    .hc-card-item-file {
-        display: none;
-        margin-top: 24px;
-        .hc-icon-close {
-            font-size: 20px;
-        }
-    }
-    &.file-table {
-        .hc-card-item-main {
-            height: calc(100% - 344px);
-        }
-        .hc-card-item-file {
-            display: block;
-            height: 320px;
-        }
-    }
-}
-
-
-
-.hc-carry-spot-checks-pdf {
-    position: relative;
-    flex: 1 1 auto;
-    height: 100%;
-    transition: 0.2s;
-    .hc-csc-pdf-btn {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        color: white;
-        font-size: 25px;
-        z-index: 111;
-        cursor: pointer;
-        width: 36px;
-        height: 40px;
-        display: flex;
-        padding-left: 6px;
-        align-items: center;
-        justify-content: center;
-        border-radius: 150px 0 0 150px;
-        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
-        background-size: 200%;
-        transition: background-position 0.5s;
-        &:hover {
-            background-position: 100% 0;
-        }
-    }
-}
-.hc-carry-spot-checks-data {
-    position: relative;
-    height: 100%;
-    width: 480px;
-    padding-left: 14px;
-    border-left: 1px solid #e9e9e9;
-    transition: 0.2s;
-    .hc-csc-switch {
-        position: relative;
-        margin-bottom: 10px;
-    }
-    .hc-csc-info-box {
-        position: relative;
-        background: #E7EEF4;
-        border-radius: 10px;
-        padding: 12px;
-        height: 244px;
-        margin-bottom: 20px;
-        .hc-info-text-item {
-            position: relative;
-            font-size: 14px;
-            display: flex;
-            align-items: flex-start;
-            .title {
-                font-weight: bold;
-            }
-            .content {
-                flex: 1;
-                position: relative;
-                color: #101010;
-            }
-        }
-        .hc-info-text-item + .hc-info-text-item {
-            margin-top: 8px;
-        }
-    }
-    .hc-csc-data-box {
-        position: relative;
-        background: #E7EEF4;
-        border-radius: 10px;
-        padding: 12px;
-        height: calc(100% - 400px);
-        margin-bottom: 16px;
-        .hc-csc-associated-row {
-            position: relative;
-            text-align: left;
-            display: flex;
-            align-items: center;
-        }
-        .hc-table-info-btn {
-            position: absolute;
-            right: -5px;
-            top: -12px;
-            color: white;
-            font-size: 20px;
-            z-index: 111;
-            cursor: pointer;
-            border-radius: 50px;
-            width: 34px;
-            height: 34px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
-            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
-            background-size: 200%;
-            transition: background-position 0.5s;
-            &:hover {
-                background-position: 100% 0;
-            }
-        }
-    }
-    .hc-csc-action-box {
-        position: relative;
-        background: white;
-        border-radius: 10px;
-        padding: 12px;
-        height: 70px;
-        .header-box {
-            position: relative;
-            display: flex;
-            align-items: center;
-            .title {
-                flex: 1;
-                color: #9A9A9A;
-                font-size: 15px;
-            }
-        }
-        .btn-box {
-            position: relative;
-            text-align: center;
-        }
-    }
-}
-.hc-collapse-item-title {
-    flex: 1;
-    position: relative;
-    margin-left: 24px;
-    display: flex;
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-    .icon {
-        margin-right: 10px;
-        color: #FFAF2D;
-        font-size: 24px;
-    }
-    .title {
-        flex: 1;
-        position: relative;
-        user-select: none;
-        color: #50545E;
-        font-size: 16px;
-        font-weight: 400;
-    }
-}
-
-.hc-file-cabinet-gui {
-    position: relative;
-    height: 100%;
-    display: flex;
-    padding: 24px;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    align-content: flex-start;
-    justify-content: flex-start;
-    .gui-item {
-        position: relative;
-        height: 100%;
-        width: 25%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .gui-view {
-            position: relative;
-            cursor: pointer;
-            transition: transform .2s;
-            img {
-                width: 100%;
-            }
-            .num {
-                position: absolute;
-                left: 50%;
-                top: 13.5%;
-                color: white;
-                font-weight: bold;
-                font-size: 14px;
-            }
-            &:hover {
-                transform: scale(1.3);
-            }
-        }
-    }
-    &.hidden {
-        visibility: hidden;
-    }
-}
-
-//视频
-.hc-gui-video {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: -8%;
-    z-index: -1;
-    opacity: 0;
-    video {
-        width: 100%;
-        height: 100%;
-    }
-    &.animate__zoomIn {
-        z-index: 2;
-        opacity: 1;
-        animation-duration: 1s;
-    }
-}
-
-.hc-gui-info-drawer {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    overflow-y: hidden;
-    overflow-x: auto;
-    .hc-gui-info-img {
-        position: relative;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        //justify-content: center;
-        flex: 1;
-        .gui-info-img {
-            position: relative;
-            height: 100%;
-            padding-bottom: 10px;
-            img {
-                position: relative;
-                height: 100%;
-            }
-            .gui-file-item-box {
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                display: flex;
-                padding: 18px;
-                flex-direction: row;
-                flex-wrap: wrap;
-                align-items: center;
-                align-content: flex-start;
-                justify-content: flex-start;
-                .gui-file-item {
-                    position: relative;
-                    display: flex;
-                    width: 25%;
-                    height: 19.6%;
-                    padding: 1%;
-                    .item {
-                        position: relative;
-                        background: #927a6a;
-                        height: 100%;
-                        width: 12%;
-                        padding: 6px 3px;
-                        font-size: 13px;
-                        border: 1px solid #5d4848;
-                        border-radius: 3px;
-                        writing-mode: vertical-lr;
-                        text-orientation: upright;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        cursor: pointer;
-                        transition: transform .2s;
-                        &.query {
-                            background: #ffddc6;
-                            color: #101010;
-                        }
-                        &.cur, &:hover {
-                            z-index: 22;
-                            color: white;
-                            background: #A16222;
-                            border: 1px solid #bbbbbb;
-                            transform: scale(1.2);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    .hc-gui-info-data {
-        position: relative;
-        height: 100%;
-        //width: 400px;
-        padding-left: 40px;
-        .hc-gui-data-container {
-            position: relative;
-            height: calc(100% - 70px);
-            img {
-                height: 550px;
-            }
-            .hc-gui-info-item-box {
-                position: absolute;
-                top: 58px;
-                left: 38px;
-                right: 28px;
-                height: 400px;
-                overflow: hidden;
-                .hc-gui-info-item {
-                    position: relative;
-                    height: 100%;
-                    width: 100%;
-                    .info-item {
-                        position: relative;
-                        display: flex;
-                        color: #101010;
-                        .title {
-                            margin-right: 14px;
-                            font-weight: bold;
-                            span + span {
-                                margin-left: 29px;
-                            }
-                        }
-                        .text {
-                            flex: 1;
-                        }
-                    }
-                    .info-item-name {
-                        color: #101010;
-                        margin-top: 30px;
-                        line-height: 1.8;
-                    }
-                    .hc-info-item-bottom {
-                        position: absolute;
-                        bottom: 4px;
-                        right: -2px;
-                        left: 4px;
-                    }
-                    .info-item + .info-item {
-                        margin-top: 14px;
-                    }
-                }
-            }
-        }
-        .btn-box {
-            position: relative;
-            height: 50px;
-            display: flex;
-            padding-right: 10px;
-            justify-content: flex-end;
-            align-items: flex-end;
-        }
-    }
-}

src/styles/page/using/scoped/stats.scss

@@ -1,57 +1,65 @@
-.hc-project-box {
-    position: relative;
-    display: flex;
-    align-items: center;
-    .project-icon {
-        font-size: 30px;
-        color: var(--el-color-primary);
+.hc-using-stats-page {
+    .el-scrollbar__bar.is-vertical {
+        right: -10px;
     }
-    .project-alias {
-        color: var(--el-color-primary);
-        font-size: 22px;
-        margin-left: 10px;
-    }
-}
-
-.hc-chart-flex {
-    position: relative;
-    overflow: hidden;
-    height: 620px;
-    margin-bottom: 30px;
-    .hc-chart-card-box {
+    .hc-project-box {
         position: relative;
-        height: 100%;
-        background: #E7EEF4;
-        border-radius: 10px;
-        &.gird {
-            height: 300px;
+        display: flex;
+        align-items: center;
+        padding-bottom: 10px;
+        margin-bottom: 14px;
+        border-bottom: 1px solid #e9e9e9;
+        .project-icon {
+            font-size: 24px;
+            color: var(--el-color-primary);
         }
-        .header {
-            position: relative;
-            font-weight: bold;
-            padding: 24px 24px 16px;
-            color: #999;
+        .project-alias {
+            color: var(--el-color-primary);
+            font-size: 22px;
+            margin-left: 6px;
         }
-        .body {
+    }
+    .hc-chart-flex {
+        position: relative;
+        overflow: hidden;
+        height: 620px;
+        margin-bottom: 20px;
+        .hc-chart-card-box {
             position: relative;
-            height: calc(100% - 64px);
-            padding: 5px;
-            &.num-text {
-                color: #666666;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 5em;
-                .size-data {
-                    position: absolute;
-                    font-size: 20px;
-                    bottom: 8px;
-                    right: 14px;
+            height: 100%;
+            background: white;
+            border-radius: 10px;
+            &.gird {
+                height: 300px;
+            }
+            .header {
+                position: relative;
+                font-weight: bold;
+                padding: 24px 24px 16px;
+                color: #999;
+            }
+            .body {
+                position: relative;
+                height: calc(100% - 64px);
+                padding: 5px;
+                &.num-text {
+                    color: #666666;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 5em;
+                    .size-data {
+                        position: absolute;
+                        font-size: 20px;
+                        bottom: 8px;
+                        right: 14px;
+                    }
                 }
             }
         }
+        .hc-chart-card-box.gird + .hc-chart-card-box.gird {
+            margin-top: 20px;
+        }
     }
-    .hc-chart-card-box.gird + .hc-chart-card-box.gird {
-        margin-top: 20px;
-    }
+
 }

src/styles/theme/using/stats.scss

@@ -1,16 +1,6 @@
 html.dark .hc-using-stats-page {
-    .el-card.hc-card-box {
-        border: 0;
-        box-shadow: none;
-        --el-card-padding: 0;
-        --el-card-border-radius: 0;
-        .el-card__header {
-            padding: 0;
-            border-bottom: 1px solid rgba(242, 245, 248, 0.29);
-        }
-        .el-card__body {
-            padding-top: 24px;
-        }
+    .hc-project-box {
+        border-color: rgba(242, 245, 248, 0.29);
     }
     .hc-chart-flex .hc-chart-card-box {
         color: white;

src/views/using/components/echarts/BarChart.vue

@@ -98,9 +98,9 @@ const setOptions = (AxisData, seriesData) => {
         },
         legend: {
             data: name,
-            // textStyle: {
-            //     color: AppTheme.value === 'dark' ? '#FFFFFF' : '#000000',
-            // },
+             textStyle: {
+                 color: AppTheme.value === 'dark' ? '#FFFFFF' : '#000000',
+            },
             color: AppTheme.value === 'dark' ? '#FFFFFF' : '#000000',
         },
         xAxis: [
@@ -112,9 +112,6 @@ const setOptions = (AxisData, seriesData) => {
                     overflow: 'breakAll',
                     interval: 0,
                     rotate: 0,
-                    // textStyle: {
-                    //     color: AppTheme.value === 'dark' ? '#FFFFFF' : '#000000',
-                    // },
                     color: AppTheme.value === 'dark' ? '#FFFFFF' : '#000000',
                 },
             },
@@ -122,7 +119,6 @@ const setOptions = (AxisData, seriesData) => {
         yAxis: [
             {
                 type: 'value',
-                //interval: 30,
                 axisLabel: {
                     formatter: '{value}' + label,
                 },

src/views/using/query.vue

@@ -464,7 +464,7 @@
                             </div>
                         </template>
                         <el-tree
-                            ref="nodetreeEl" 
+                            ref="nodetreeEl"
                             v-loading="nodetreeElloading" class="col_tree" node-key="id" :props="defaultProps" show-checkbox lazy :load="loadNode" :data="item.Nodetreedata"
                         >
                             <template #default="{ node, data }">
@@ -899,7 +899,7 @@ const nodeTreeModalSave = () => {
     })
    const ids = [...allCheckIds, ...halfKeys]
 
-   searchForm.value.nodeIds = ids.join(',') 
+   searchForm.value.nodeIds = ids.join(',')
    nodeTreeModal.value = false
    activeName.value = []
 
@@ -1313,9 +1313,9 @@ const singleId = ref('')
 
 // }
 const changeCheckColId = async (item)=>{
- 
+
     const ids = arrToId(Nodetreedata.value).split(',')
- 
+
     //  if (item.checkColId) {
     //     nextTick(()=>{
     //         nodetreeEl?.value[treeIndex.value].setCheckedKeys(ids, true)
@@ -1323,7 +1323,7 @@ const changeCheckColId = async (item)=>{
     //  } else {
     //     nodetreeEl?.value[treeIndex.value].setCheckedKeys([], false)
     //  }
-    
+
 }
 const nodeTreeArrLoad = ref(false)
 const getnodeTabData = async ()=>{
@@ -1364,7 +1364,7 @@ const collapseChange = async (key) => {
     checkNodeid.value = key[key.length - 1]
    await getNodetreedata()
 
-   
+
 }
 const nodetreeElloading = ref(false)
 const getNodetreedata = async ()=>{
@@ -1586,10 +1586,6 @@ const mediaMicChange = (data) => {
 }
 </script>
 
-<style lang="scss" scoped>
-@import '~style/using/scoped/query.scss';
-</style>
-
 <style lang="scss">
 @import '~style/using/query.scss';
 .col_tree{

src/views/using/stats.vue

@@ -1,66 +1,64 @@
 <template>
-    <div class="hc-page-box hc-using-stats-page">
-        <hc-new-card scrollbar>
-            <template #header>
-                <div class="hc-project-box">
-                    <HcIcon name="stack" class="project-icon" />
-                    <span class="project-alias">{{ projectInfo?.projectAlias }}</span>
-                </div>
-            </template>
-            <div class="hc-chart-flex">
-                <el-row :gutter="20" class="h-full">
-                    <el-col :span="8" class="h-full">
-                        <div class="hc-chart-card-box">
-                            <div class="header">原生、数字化文件数量（份）</div>
-                            <div v-loading="isNativeLoading" class="body">
-                                <BarChart ref="nativeChartRef" :config="nativeChartConfig" :datas="nativeChartData" />
-                            </div>
+    <el-scrollbar class="hc-using-stats-page">
+        <div class="hc-project-box">
+            <HcIcon name="stack" class="project-icon" />
+            <span class="project-alias">{{ projectInfo?.projectAlias }}</span>
+        </div>
+        <div class="hc-chart-flex">
+            <el-row :gutter="20" class="h-full">
+                <el-col :span="8" class="h-full">
+                    <div class="hc-chart-card-box">
+                        <div class="header">原生、数字化文件数量（份）</div>
+                        <div v-loading="isNativeLoading" class="body">
+                            <BarChart ref="nativeChartRef" :config="nativeChartConfig" :datas="nativeChartData" />
                         </div>
-                    </el-col>
-                    <el-col :span="8" class="h-full">
-                        <div class="hc-chart-card-box gird">
-                            <HcBorderNeon align="right" neon />
-                            <div class="header">档案总存储</div>
-                            <div class="body num-text">
-                                <span class="font-FZGongYHJW">{{ tableData[0]?.auto || 0 }}卷</span>
-                                <div v-loading="isSizeLoading" class="size-data">电子文件存储量：{{ allArchiveFileSizedata }}</div>
-                            </div>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="h-full">
+                    <div class="hc-chart-card-box gird">
+                        <HcBorderNeon align="right" neon />
+                        <div class="header">档案总存储</div>
+                        <div class="body num-text">
+                            <span class="font-FZGongYHJW">{{ tableData[0]?.auto || 0 }}卷</span>
+                            <div v-loading="isSizeLoading" class="size-data">电子文件存储量：{{ allArchiveFileSizedata }}</div>
                         </div>
-                        <div class="hc-chart-card-box gird">
-                            <HcBorderNeon align="right" />
-                            <div class="header">已组案卷</div>
-                            <div v-loading="isHasBeenLoading" class="body">
-                                <ArrRoundChart ref="hasBeenChartRef" :config="hasBeenChartConfig" :datas="hasBeenChartData" />
-                            </div>
+                    </div>
+                    <div class="hc-chart-card-box gird">
+                        <HcBorderNeon align="right" />
+                        <div class="header">已组案卷</div>
+                        <div v-loading="isHasBeenLoading" class="body">
+                            <ArrRoundChart ref="hasBeenChartRef" :config="hasBeenChartConfig" :datas="hasBeenChartData" />
                         </div>
-                    </el-col>
-                    <el-col :span="8" class="h-full">
-                        <div class="hc-chart-card-box gird">
-                            <HcBorderNeon align="left" />
-                            <div class="header">档案年限占比</div>
-                            <div v-loading="isFixedLoading" class="body">
-                                <!-- <RoundPieChart ref="fixedChartRef" :datas="fixedChartData" /> -->
-                                <ArrRoundChart ref="fixedChartRef" :config="fixedChartConfig" :datas="fixedChartData" />
-                            </div>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="h-full">
+                    <div class="hc-chart-card-box gird">
+                        <HcBorderNeon align="left" />
+                        <div class="header">档案年限占比</div>
+                        <div v-loading="isFixedLoading" class="body">
+                            <!-- <RoundPieChart ref="fixedChartRef" :datas="fixedChartData" /> -->
+                            <ArrRoundChart ref="fixedChartRef" :config="fixedChartConfig" :datas="fixedChartData" />
                         </div>
-                        <div class="hc-chart-card-box gird">
-                            <HcBorderNeon align="left" neon />
-                            <div class="header">已销毁案卷</div>
-                            <div v-loading="isDestroyLoading" class="body">
-                                <ArrRoundChart ref="destroyChartRef" :config="destroyChartConfig" :datas="destroyChartData" />
-                            </div>
+                    </div>
+                    <div class="hc-chart-card-box gird">
+                        <HcBorderNeon align="left" neon />
+                        <div class="header">已销毁案卷</div>
+                        <div v-loading="isDestroyLoading" class="body">
+                            <ArrRoundChart ref="destroyChartRef" :config="destroyChartConfig" :datas="destroyChartData" />
                         </div>
-                    </el-col>
-                </el-row>
-            </div>
-
-            <el-table v-loading="isLoading" :data="tableData" lazy :load="loadData" border row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-                <el-table-column prop="name" label="归档目录文件夹" />
-                <el-table-column prop="auto" label="已组卷" align="center" width="100" />
-                <el-table-column prop="deleted" label="已销毁" align="center" width="100" />
-            </el-table>
-        </hc-new-card>
-    </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <el-table
+            v-loading="isLoading" :data="tableData" lazy :load="loadData" border row-key="id"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        >
+            <el-table-column prop="name" label="归档目录文件夹" />
+            <el-table-column prop="auto" label="已组卷" align="center" width="100" />
+            <el-table-column prop="deleted" label="已销毁" align="center" width="100" />
+        </el-table>
+    </el-scrollbar>
 </template>
 
 <script setup>
@@ -286,7 +284,7 @@ const loadData = (tree, treeNode, resolve)=>{
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '~style/using/scoped/stats.scss';
 </style>