diff --git a/web/src/App.vue b/web/src/App.vue
index edc38c8..d466d32 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <a-config-provider
+  :locale="locale"
     :theme="{
       token: {
         colorPrimary: '#143d7d'
@@ -9,6 +10,12 @@
   <router-view />
   </a-config-provider>
 </template>
+<script setup>
+import {ref} from 'vue'
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
+const locale = ref(zhCN)
+
+</script>
 
 <style lang="scss">
 #app {
diff --git a/web/src/components/ComTable.vue b/web/src/components/ComTable.vue
index e3a3f1c..3d9794d 100644
--- a/web/src/components/ComTable.vue
+++ b/web/src/components/ComTable.vue
@@ -1,56 +1,54 @@
 <template>
-  <div class="comtable" >
+  <div class="comtable">
     <div class="table" ref="comtable">
       <a-table
-      bordered
-      :loading="loading"
-      :columns="columns"
-      :scroll="scroll"
-      :data-source="data.realTableData"
-      :pagination="false"
-      :row-class-name="rowClassName"
-      row-key="id"
-      :expand-icon="expandIcon"
-      :row-selection="
-        data.newTableOpt.select
-          ? {
-              selectedRowKeys: data.selectedRowKeys,
-              onChange: onSelectChange
-            }
-          : false
-      "
-      :expanded-row-keys="data.newTableOpt.expand?data.expandedKeys:null"
-      size="middle"
-      :indent-size="30"
-      @resizeColumn="handleResizeColumn"
-    >
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.scopedSlots">
-          <slot
-            v-bind="record"
-            :name="column.scopedSlots ? column.scopedSlots.customRender : ''"
-          ></slot>
-        </template>
-      </template>
-      <template v-if="data.newTableOpt.expand" #expandedRowRender="{ record }">
-            <a-table
-              size="small"
-              :columns="innerColumns"
-              :data-source="record.currentLimitList"
-              :pagination="false"
-            >
-              <template #bodyCell="{ column, record }">
-                <template v-if="column.key === 'type'">
-                  <span>
-                    {{ getType(record.type) }}
-                  </span>
-                </template>
-              </template>
-            </a-table>
+        bordered
+        :loading="loading"
+        :columns="columns"
+        :scroll="scroll"
+        :data-source="data.realTableData"
+        :pagination="false"
+        :row-class-name="rowClassName"
+        row-key="id"
+        :expand-icon="expandIcon"
+        :row-selection="
+          data.newTableOpt.select
+            ? {
+                selectedRowKeys: data.selectedRowKeys,
+                onChange: onSelectChange
+              }
+            : false
+        "
+        :expanded-row-keys="data.newTableOpt.expand ? data.expandedKeys : null"
+        size="middle"
+        :indent-size="30"
+        @resizeColumn="handleResizeColumn"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.scopedSlots">
+            <slot
+              v-bind="record"
+              :name="column.scopedSlots ? column.scopedSlots.customRender : ''"
+            ></slot>
           </template>
-
-    </a-table>
-
+        </template>
+        <template v-if="data.newTableOpt.expand" #expandedRowRender="{ record }">
+          <a-table
+            size="small"
+            :columns="innerColumns"
+            :data-source="record.currentLimitList"
+            :pagination="false"
+          >
+            <template #bodyCell="{ column, record_ }">
+              <template v-if="column.key === 'type'">
+                <span>
+                  {{ getType(record_.type) }}
+                </span>
+              </template>
+            </template>
+          </a-table>
+        </template>
+      </a-table>
     </div>
 
     <div class="pagination" v-if="data.newTableOpt.page">
@@ -61,16 +59,20 @@
         @change="onChange"
         show-size-changer
         show-quick-jumper
-        :show-total="(total) => `共 ${total} 条`"
         :page-size-options="data.pageSizeOptions"
       >
       </a-pagination>
+      <div style="color: #7f8fa4; height: 30px; line-height: 30px; margin: 0 10px">
+        共<span style="color: aqua; font-size: 18px; margin: 0 2px">{{
+          data.newPageOption.total
+        }}</span
+        >页
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-
 // <a-select :dropdownMatchSelectWidth="false" size="small" placement="top" />
 import {
   nextTick,
@@ -81,13 +83,13 @@ import {
   watch,
   defineProps,
   defineEmits,
-  defineExpose,
+  defineExpose
 } from 'vue'
 
 const comtable = ref('')
 const props = defineProps({
-  columns: { type: Array },
-  tableData: { type: Array },
+  columns: { type: Array, default: () => [] },
+  tableData: { type: Array, default: () => [] },
   tableOption: {
     type: Object,
     default: () => {
@@ -116,23 +118,22 @@ const props = defineProps({
     default: () => {
       return []
     }
-  },
-  rowClick: {
-    default: () => {}
-  },
-  tableH: {
-    type: Number,
-
-  },
+  }
+  // rowClick: {
+  //   default: () => {}
+  // },
+  // tableH: {
+  //   type: Number,
 
+  // },
 })
 function handleResizeColumn(w, col) {
   col.width = w
 }
 const mountedScroll = () => {
-  data.newColumns = [...props.columns]
-  data.realTableData = [...props.tableData]
-  // tableScoll()
+  // data.newColumns = [...props.columns]
+  // data.realTableData = [...props.tableData]
+  // // tableScoll()
 }
 const emit = defineEmits(['handlePagesizeChange'])
 const data = reactive({
@@ -157,7 +158,7 @@ const data = reactive({
 const loading = ref(false)
 const scroll = ref({})
 
-onMounted(async() => {
+onMounted(async () => {
   data.newColumns = [...props.columns]
   data.realTableData = [...props.tableData]
   await nextTick()
@@ -196,7 +197,7 @@ watch(
       const pageH = data.newTableOpt.page ? 42 : 0
       scroll.value = { y: n - pageH - 56 }
     }
-  },
+  }
   // { deep: true, immediate: true }
 )
 
@@ -218,7 +219,6 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
 </script>
 
 <style lang="scss" scoped>
-@use '../style/color.scss' as *;
 .comtable {
   border-radius: 8px;
   font-size: 14px;
@@ -227,8 +227,8 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  .table{
-    flex:1
+  .table {
+    flex: 1;
   }
 
   .pagination {
@@ -238,48 +238,41 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
     // margin-bottom: 10px;
     min-width: 420px;
     height: 32px;
-
   }
 
-  ::v-deep .ant-table-thead > tr > th {
-    border-inline: 1px solid var(--theme-bg) !important;
-    background: var(--table-header-bg);
-    color: var(--theme-text-default);
-    border-bottom: none;
-    // &.ant-table-column-has-sorters{
-    //   &::hover{
-    //      background: var(--table-header-bg) !important;
-
-    //   }
-    // }
-    &:last-child {
-      border-inline-end: 1.5px solid var(--table-header-bg) !important;
-    }
-    &:nth-last-child(2) {
-      border-inline-end: 1.5px solid var(--table-header-bg) !important;
-    }
+  :deep(.ant-table) {
+    border-radius:20px 20px 0 0 !important;
+    overflow: hidden; /* 确保圆角生效 */
   }
-
-  :deep(.ant-table-container > .ant-table-content > table) {
-    border-inline-start: 1px solid var(--theme-bg) !important;
+  :deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container){
+    border-inline-start:none!important;
   }
-  :deep(.ant-pagination-item-link) {
-    color: var(--theme-text-default) !important;
-
-    height: 100% !important;
-    display: block !important;
+  :deep(.ant-table-thead ){
+    background: linear-gradient(0deg, rgba(61, 254, 250, 0.2), rgba(61, 254, 250, 0.2)),
+      linear-gradient(
+        90deg,
+        rgba(61, 254, 250, 0) 0%,
+        rgba(0, 255, 251, 0.15) 50.17%,
+        rgba(61, 254, 250, 0) 100%
+      )!important;
+  }
+  :deep(.ant-table-thead > tr > th) {
+    border-inline: 1px solid transparent !important;
+    background: transparent;
+    color: #fff !important;
+    border-bottom: none !important; /* 可选：去除底部边框 */
   }
-
 }
 
 :deep(
-  .ant-table-wrapper
-    .ant-table.ant-table-bordered
-    > .ant-table-container
-    > .ant-table-header
-    > table
-) {
+    .ant-table-wrapper
+      .ant-table.ant-table-bordered
+      > .ant-table-container
+      > .ant-table-header
+      > table
+  ) {
   border-top: none !important;
+  border-inline-start: none !important;
 }
 :deep(.ant-checkbox-checked .ant-checkbox-inner) {
   background-color: var(--table-header-bg) !important;
@@ -290,76 +283,80 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
 }
 
 :deep(.ant-pagination) {
-
+  .ant-pagination-item-link {
+    color: #fff !important;
+    height: 100% !important;
+    display: block !important;
+  }
   .ant-pagination-prev,
   .ant-pagination-next {
-    background: var(--theme-bg) !important;
-    color: var(--theme-text-default) !important;
+    background: transparent !important;
+    color: #fff !important;
+    border: 1px solid $page-border;
+    button {
+      box-sizing: border-box;
+    }
   }
   .ant-select-selector {
     border: none !important;
   }
   .ant-select-arrow {
-    color: var(--theme-text-default) !important;
+    color: #fff !important;
   }
 
   span.ant-input-affix-wrapper,
   .ant-select,
   .ant-picker {
     width: 110px !important;
-    border-radius: 8px !important;
   }
   .ant-select-selection-item {
-    color: var(--theme-text-default) !important;
+    color: #fff !important;
+    border: 1px solid $page-border;
   }
   .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
-    background-color: var(--theme-bg) !important;
-    border-radius: 8px !important;
+    background-color: transparent !important;
   }
   .ant-pagination-total-text,
   .ant-pagination-options-quick-jumper {
-    color: var(--theme-text-default) !important;
+    color: #fff !important;
     margin-inline-end: 9px !important;
   }
   .ant-pagination-options-quick-jumper input {
-    background-color: var(--theme-bg) !important;
-    border: none !important;
-    color: var(--theme-text-default) !important;
+    background-color: transparent !important;
+    // border: none !important;
+    color: #fff !important;
   }
   .ant-pagination-options .ant-pagination-options-size-changer .ant-select-selector {
-    color: var(--theme-text-default) !important;
-    background-color: var(--theme-bg) !important;
+    padding: 0px !important;
+    color: #fff !important;
+    background-color: transparent !important;
+
+    .ant-select-selection-item {
+      padding: 0 10px;
+    }
   }
   .ant-select-dropdown {
     top: -210px !important;
   }
-   .ant-pagination-item  {
-    &:not(.ant-pagination-item-active):hover{
-      background: var(--theme-bg) !important;
+  .ant-pagination-item {
+    &:not(.ant-pagination-item-active):hover {
+      background: #1c797a !important;
     }
-    a{
-    color: var(--theme-text-default) !important;
-
-    }
-  }
-  .ant-pagination-item-ellipsis {
-    color: var(--theme-text-default) !important;
-  }
-  .ant-pagination-item-active {
-    border-color: transparent !important;
-    font-size: 16px;
-    background: var(--theme-bg1) !important;
     a {
-      color: var(--theme-text2) !important;
+      color: #fff;
+      border-radius: 2px;
+      background: #1c797a !important;
     }
   }
+
+  .ant-pagination-item-active {
+    border: 1px solid transparent;
+    color: #fff;
+    background: #1c797a !important;
+  }
 }
-:deep(
-  .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > thead > tr > th
-) {
-  &:nth-last-child(2) {
-    border-inline-end: 1px solid var(--table-header-bg) !important;
-  }
+:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container >.ant-table-body >table >tbody>tr>td){
+      border-inline-end: none!important;
 }
 //表格样式
 :deep(.ant-table-tbody) {
@@ -368,20 +365,18 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
   > tr {
     &:hover {
       > .ant-table-cell {
-        background-color: var(--table-select) !important;
+        
+        // background-color: red !important;
       }
-
-    }
-    td {
-      border: 1px solid var(--theme-bg-default) !important; /* 第一行单元格边框为红色 */
     }
+  
   }
-  // td.ant-table-cell.ant-table-cell-row-hover {
-  //   // background-color: var(--table-select) !important;
-  // }
 }
 :deep(.ant-table-body) {
-  background: var(--theme-bg) !important;
+  color:#fff;
+  background: $table-bg !important;
+  border: 1px solid $table-border;
+  border-radius: 0px 0px 20px 20px;
   .ant-table-cell {
     background: var(--theme-bg) !important;
   }
@@ -396,20 +391,21 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
     padding: 8px !important;
     margin: 0 !important;
   }
-}
-:deep(.ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container) {
-  border-inline-start: none !important;
 
-  :deep(.ant-progress .ant-progress-text) {
-    color: var(--theme-text-default) !important;
+  .ant-empty-description{
+    color:#fff;
   }
 }
+
 :deep(.ant-table-wrapper) {
   .ant-table-cell-scrollbar,
   .ant-table.ant-table-bordered > .ant-table-container {
     box-shadow: none !important;
-  }
 
+&>.ant-table-body >table >tbody>tr>td{
+  border-bottom: none !important;
+}
+  }
 }
 
 :deep(.ant-table-wrapper .ant-table) {
@@ -417,28 +413,28 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
 }
 
 :deep(
-  .ant-table-wrapper
-    .ant-table.ant-table-bordered
-    > .ant-table-container
-    > .ant-table-body
-    > table
-    > tbody
-    > tr
-    > .ant-table-cell-fix-right-first::after
-) {
-  border-inline-end: 1px solid var(--theme-bg) !important;
+    .ant-table-wrapper
+      .ant-table.ant-table-bordered
+      > .ant-table-container
+      > .ant-table-body
+      > table
+      > tbody
+      > tr
+      > .ant-table-cell-fix-right-first::after
+  ) {
+  // border-inline-end: 1px solid var(--theme-bg) !important;
 }
 :deep(
-  .ant-table-wrapper
-    .ant-table.ant-table-bordered
-    > .ant-table-container
-    > .ant-table-header
-    > table
-    > thead
-    > tr
-    > .ant-table-cell-fix-right-first::after
-) {
-  border-inline-end: 1px solid var(--theme-bg) !important;
+    .ant-table-wrapper
+      .ant-table.ant-table-bordered
+      > .ant-table-container
+      > .ant-table-header
+      > table
+      > thead
+      > tr
+      > .ant-table-cell-fix-right-first::after
+  ) {
+  // border-inline-end: 1px solid var(--theme-bg) !important;
 }
 
 :deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
diff --git a/web/src/components/SearchBox.vue b/web/src/components/SearchBox.vue
index 4fa733a..e90ded8 100644
--- a/web/src/components/SearchBox.vue
+++ b/web/src/components/SearchBox.vue
@@ -30,6 +30,7 @@
                 :show-time="{ format: 'HH:mm:ss' }"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 v-model:value="formData[item.key]"
+                @change="$emit('onSearch', formData)"
               />
             </div>
             <!-- 输入框 -->
@@ -51,7 +52,7 @@
 
       <!-- <div :class="[searchOptions.length > 4 ? 'top-right-column' : 'top-right']"> -->
       <div class="top-right">
-        <a-button class="ant-btn-search" @click="changeData">
+        <!-- <a-button class="ant-btn-search" @click="changeData">
           <template #icon>
             <i class="iconfont icon-sousu btn-close" />
           </template>
@@ -62,7 +63,7 @@
             <i class="iconfont icon-chongzhi btn-close" />
           </template>
           重置
-        </a-button>
+        </a-button> -->
       </div>
     </div>
     <div class="bottom">
@@ -187,6 +188,7 @@ input:-internal-autofill-selected {
   color: var(--theme-text-default) !important;
 }
 .search {
+  color:#fff;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -229,6 +231,14 @@ input:-internal-autofill-selected {
 
     .date-picker {
       width: 360px;
+
+      .ant-picker{
+            background: transparent;
+    border: 1px solid #00B9D0;
+    .ant-picker-input >input{
+      color: #fff!important;
+    }
+      }
     }
 
     .ant-select,
@@ -243,8 +253,7 @@ input:-internal-autofill-selected {
     }
 
     .label {
-      width: 80px;
-      // margin-right: 20px;
+      width: 40px;
       color: var(--theme-text-default);
     }
     .top-right,
diff --git a/web/src/components/statisticalAnalysis/energyEchart.vue b/web/src/components/statisticalAnalysis/energyEchart.vue
new file mode 100644
index 0000000..29c662e
--- /dev/null
+++ b/web/src/components/statisticalAnalysis/energyEchart.vue
@@ -0,0 +1,450 @@
+<template>
+  <div class="content">
+    <div class="content-echarts">
+      <div v-for="(chart, index) in chartOptions" :key="index">
+        <div class="content-header">
+          <div class="verline"></div>
+          <span>{{ chart.title }}</span>
+        </div>
+        <div :ref="`chartContainer${index}`" class="chart-container"></div>
+      </div>
+    </div>
+    <div class="content-table">
+       
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      ></ComTable>
+    </div>
+  </div>
+</template>
+<script>
+import {postReq} from '@/request/api'
+import ComTable from '@/components/ComTable'
+export default {
+  name: 'StatisicalAnView',
+  components: { ComTable },
+  props: {
+    tableInfo:{
+      type: Object,
+      default: () => ({}), // 默认空对象
+      required: false,    // 非必须
+    },
+    columns: {
+      type: Array,
+      default: () => [], // 默认空对象
+      required: false // 非必须
+    },
+    chartOptions: {
+      type: Array,
+      default: () => [], // 默认空对象
+      required: false // 非必须
+    },
+    chartData: {
+      type: Object,
+      default: () => ({}), // 默认空对象
+      required: false // 非必须
+    }
+  },
+  data() {
+    return {
+      paramsDate: {},
+      tableData: [],
+      tableOption: {
+        scroll: {
+          x: 1500
+        }
+      },
+      tableH: 0,
+      pageOption: {
+        current: 1,
+        pageSize: 15,
+        total: 1
+      },
+      //   chartOptions: [
+      //     {
+      //       title: '充放电分析',
+      //       type: 'bar',
+      //       dataKey: 'sales',
+      //       infoKeys: [
+      //         { key: 'key1', label: '日充电电量', lineColor: '#2A82E4' },
+      //         { key: 'key2', label: '日放电电量', lineColor: '#5AABF2' }
+      //       ]
+      //     },
+      //     {
+      //       title: '运行状态分析',
+      //       type: 'bar',
+      //       dataKey: 'users',
+      //       infoKeys: [
+      //         { key: 'key1', label: '日故障次数', lineColor: '#0CDAF5' },
+      //         { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
+      //         { key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
+      //       ]
+      //     },
+      //     {
+      //       title: '电压与电流分析',
+      //       type: 'line',
+      //       dataKey: 'stock',
+      //       infoKeys: [
+      //         {
+      //           key: 'key1',
+      //           label: '电压',
+      //           lineColor: '#3F80F2',
+      //           colorStart: ' rgba(10, 250, 106, 0.15)',
+      //           colorEnd: ' rgba(171, 255, 249, 0.3)'
+      //         },
+      //         {
+      //           key: 'key2',
+      //           label: '电流',
+      //           lineColor: '#A9A6FF',
+      //           colorStart: ' rgba(10, 250, 106, 0.15)',
+      //           colorEnd: ' rgba(171, 255, 249, 0.3)'
+      //         }
+      //       ]
+      //     },
+      //     {
+      //       title: '功率分析',
+      //       type: 'line',
+      //       dataKey: 'yearly',
+      //       infoKeys: [
+      //         {
+      //           key: 'key1',
+      //           label: '功率',
+      //           lineColor: '#00FFFB',
+      //           colorStart: ' rgba(10, 250, 106, 0.15)',
+      //           colorEnd: ' rgba(171, 255, 249, 0.3)'
+      //         }
+      //       ]
+      //     }
+      //   ],
+      //   chartData: {
+      //     sales: [
+      //       {
+      //         date: '2025-08-30',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-29',
+      //         key1: 8,
+      //         key2: 5,
+      //         key3: 5,
+      //         key4: 7
+      //       },
+      //       {
+      //         date: '2025-08-28',
+      //         key1: 0,
+      //         key2: 10,
+      //         key3: 20,
+      //         key4: 4
+      //       },
+      //       {
+      //         date: '2025-08-27',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-26',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-25',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-24',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-23',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-22',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-21',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-20',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-19',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-18',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       },
+      //       {
+      //         date: '2025-08-17',
+      //         key1: 10,
+      //         key2: 0,
+      //         key3: 15,
+      //         key4: 5
+      //       }
+      //     ],
+      //     users: [
+      //       { value: 40, name: 'A' },
+      //       { value: 60, name: 'B' }
+      //     ],
+      //     stock: [30, 50, 80],
+      //     yearly: [100, 120, 90, 110]
+      //   },
+      chartInstances: [] // 存储 ECharts 实例
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 确保 DOM 完全渲染
+      this.initCharts()
+      window.addEventListener('resize', this.handleResize)
+    })
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+    this.chartInstances.forEach((chart) => chart && chart.dispose())
+  },
+  methods: {
+    async getList() {
+      let that = this
+      this.$refs.comTable.loading = true
+      const query = {
+        ...this.paramsDate,
+        pageSize: this.pageOption.pageSize,
+        pageNumber: this.pageOption.current
+      }
+      try {
+        const res = await postReq(query, this.tableInfo.getUrl)
+        if (res.code === 200) {
+          this.$refs.comTable.loading = false
+          this.tableData = res.data.records
+          this.pageOption = {
+            current: res.data.pageNumber,
+            pageSize: res.data.pageSize,
+            total: res.data.totalRow
+          }
+          this.getScrollDateFail = false
+        } else {
+          throw res
+        }
+      } catch (error) {
+        that.tableData = []
+        that.$refs.comTable.loading = false
+      }
+    },
+    initCharts() {
+      this.chartOptions.forEach((option, index) => {
+        // Vue 2 的 $refs 在 v-for 中是数组，需要取 [0]
+        const dom = this.$refs[`chartContainer${index}`][0]
+        console.log(dom, 'ddddddddddddddd')
+        if (!dom) return
+
+        const chart = this.$echarts.init(dom)
+        this.chartInstances.push(chart) // 存储实例
+
+        // 设置图表配置
+        chart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            top: 20,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '5%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            data: this.processData(option.infoKeys, option.dataKey, this.chartData[option.dataKey])
+              .dates,
+            axisLine: {
+              lineStyle: { type: 'dashed', color: '#435463' }
+            },
+            axisLabel: {
+              color: '#fff'
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              lineStyle: { type: 'dashed', color: '#435463' }
+            },
+            axisLabel: {
+              color: '#fff'
+            }
+          },
+          series: option.infoKeys.map((info, i) => {
+            return {
+              name: info.label,
+              smooth: true,
+              type: option.type,
+              barWidth: 10,
+              itemStyle: {
+                borderRadius: [10, 10, 0, 0],
+                color: info.lineColor
+              },
+              emphasis: {
+                focus: 'series'
+              },
+              areaStyle: {
+                global: false,
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: info.colorStart }, // 顶部颜色
+                    { offset: 1, color: info.colorEnd } // 底部颜色
+                  ]
+                }
+              },
+              global: false,
+              showSymbol: false,
+              data: this.processData(
+                option.infoKeys,
+                option.dataKey,
+                this.chartData[option.dataKey]
+              ).values[i]
+            }
+          })
+        })
+      })
+    },
+    processData(keysList, dataKey, data) {
+      const keys = keysList.map((item) => item.key)
+      console.log(keys, dataKey, data, 'dddddddddddddddddddddddddddd')
+      data.sort((a, b) => {
+        return new Date(a.date) - new Date(b.date)
+      })
+      const dates = data.map((item) => item.date)
+      const values = []
+
+      keys.forEach((item, index) => {
+        values[index] = data.map((dataValue) => dataValue[keys[index]])
+      })
+      console.log(dates, values, 'dates')
+      return {
+        dates,
+        values
+      }
+    },
+    handleResize() {
+      this.chartInstances.forEach((chart) => chart && chart.resize())
+    },
+ 
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.current = pageOption.current
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  height: calc(100% - 38px);
+  overflow: scroll;
+}
+.content-echarts {
+  display: flex;
+  flex-wrap: wrap;
+  height: calc(750px - 38px);
+  color: #fff;
+
+  & > div {
+    padding: 20px 5px;
+    // margin-right: 10px;
+    background-color: rgba(33, 105, 195, 0.12);
+    border-radius: 2px;
+    width: calc(50% - 15px);
+    height: calc(50% - 10px);
+
+    &:nth-child(odd) {
+      margin-right: 10px;
+    }
+    .chart-container {
+      width: 100%;
+      height: 100%;
+    }
+
+    .content-header {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      margin-left: 3%;
+      .verline {
+        margin-right: 10px;
+        background: linear-gradient(
+            180deg,
+            rgba(0, 230, 172, 1) 0%,
+            rgba(0, 210, 255, 1) 98.78%,
+            rgba(0, 210, 255, 1) 100%
+          ),
+          rgba(1, 223, 239, 1);
+        width: 4px;
+        height: 20px;
+        border-radius: 6px;
+      }
+    }
+  }
+}
+
+.content-table {
+  margin-top: 20px;
+  min-height: 500px;
+  width: 100%;
+  padding-right: 10px;
+}
+</style>
diff --git a/web/src/router/index.js b/web/src/router/index.js
index c722c0a..6a84bbd 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -26,6 +26,12 @@ export const routes = [
         title: '运行监控',
         component: () => import(/* webpackChunkName: "monitor" */ '@/views/monitor.vue')
       },
+      {
+        path: 'statisticalAnalysis',
+        name: 'statisticalAnalysis',
+        title: '统计分析',
+        component: () => import(/* webpackChunkName: "monitor" */ '@/views/statisticalAnalysis.vue')
+      },
       {
         path: 'system',
         name: 'system',
diff --git a/web/src/style/color.scss b/web/src/style/color.scss
index a3698dc..2aac6db 100644
--- a/web/src/style/color.scss
+++ b/web/src/style/color.scss
@@ -1,5 +1,12 @@
-$bg1-color:#052f4d;
-$bg2-color:#2169c31f;
-$bg3-color:#00d2ff1f;
+$bg1-color: #052f4d;
+$bg2-color: #2169c31f;
+$bg3-color: #00d2ff1f;
 
-$text-color:#A6B8DD
\ No newline at end of file
+$text-color: #a6b8dd;
+
+$green: #27a188;
+$tab-border: #1489c0;
+
+$table-border: #1c797a;
+$table-bg: #072e4a;
+$page-border: #cad2dd;
diff --git a/web/src/utils/config.js b/web/src/utils/config.js
new file mode 100644
index 0000000..bc82c81
--- /dev/null
+++ b/web/src/utils/config.js
@@ -0,0 +1,39 @@
+const copyRight =
+  'Copyright © 2016-2024 Jiangsu YuHong.All Rights Reserved.江苏禹弘科技有限公司 版权所有'
+const companyName1 = '江苏禹弘科技有限公司'
+const copyRight1 = 'Copyright © 2016 - 2024'
+const themeColor = {
+  '--theme-bg-default': { light: '#fff', dark: '#111111' },
+  '--theme-bg': { light: '#eceff4', dark: '#2c2c2c' },
+  '--theme-bg1': { light: '#065758', dark: '#065758' },
+  '--theme-bg2': { light: '#0657584d', dark: '#CDDDDE' },
+  '--theme-bg3': { light: '#00968826', dark: '#00968826' },
+  '--theme-bg4': { light: 'rgba(6, 87, 88, 0.75)', dark: 'rgba(6, 87, 88, 0.75)' },
+
+  // 字体颜色
+  '--theme-text-default': { light: '#000000', dark: '#ffffff' },
+  '--theme-text': { light: '#065758', dark: '#065758' },
+  '--theme-text1': { light: 'rgba(0,0,0,0.5)', dark: '#040909FF' },
+  '--theme-text2': { light: '#ffffff', dark: '#ffffff' },
+  '--theme-text3': { light: 'rgba(0,0,0,0.5)', dark: 'rgba(255,255,255,0.5)' },
+  '--theme-text4': { light: 'rgba(0,0,0,0.75)', dark: 'rgba(255,255,255,0.75)' },
+  '--theme-text5': { light: 'rgba(0,0,0,0.65)', dark: 'rgba(255,255,255,0.65)' },
+  '--theme-text6': { light: 'rgba(0,0,0,0.3)', dark: 'rgba(255,255,255,0.3)' }, // placeholder颜色
+
+  // 按钮颜色
+  '--theme-btn1': { light: '#FF921B', dark: '#FF921B' },
+  '--theme-btn2': { light: '#ca4d2a', dark: '#ca4d2a' },
+  '--theme-btn3': { light: '#065758', dark: '#065758' },
+
+  // 阴影颜色
+  '--shadow-color1': { light: '#0657584d', dark: '#065758a6' },
+  '--shadow-color': { light: 'rgba(0, 0, 0, 0.25)', dark: 'rgba(255, 255, 255, 0.25)' },
+
+  // 表格颜色
+  '--table-header-bg': { light: '#5d9292', dark: '#065253' }, // 65%
+  '--table-tag': { light: '#D6DEEB', dark: '#D6DEEB' },
+  '--theme-opert-bg': { light: '#FFFFFF', dark: '#2c2c2c' },
+  '--table-select': { light: '#c4d4d9', dark: '#384846' }
+}
+
+export { copyRight, copyRight1, themeColor, companyName1 }
diff --git a/web/src/views/MainView.vue b/web/src/views/MainView.vue
index dff508f..6656df9 100644
--- a/web/src/views/MainView.vue
+++ b/web/src/views/MainView.vue
@@ -51,7 +51,11 @@ export default {
         },
         {
           name: '运行监控',
-          path: '/monitor'
+          path: '/main/monitor'
+        },
+        {
+          name: '统计分析',
+          path: '/main/statisticalAnalysis'
         },
         {
           name: '系统管理',
diff --git a/web/src/views/statisticalAnalysis.vue b/web/src/views/statisticalAnalysis.vue
new file mode 100644
index 0000000..154aa43
--- /dev/null
+++ b/web/src/views/statisticalAnalysis.vue
@@ -0,0 +1,704 @@
+<template>
+  <div class="statisicalAn">
+    <div style="display: flex; justify-content: space-between">
+      <div class="tab-header">
+        <div v-for="item in tabList" :key="item.key" class="tab">
+          <span
+            :class="[activeKey == item.key ? 'actived' : 'uactived']"
+            @click="activeKey = item.key"
+            >{{ item.name }}</span
+          >
+        </div>
+      </div>
+      <searchBox
+        class="searchBox"
+        ref="searchBox"
+        :btn-option-list="[]"
+        :search-options="searchOptions"
+        :title-option="{ title: '', info: '' }"
+        @onSearch="onSearch"
+      >
+      </searchBox>
+    </div>
+    <div class="content">
+      <energyEchart
+        :chart-options="echartsInfo[activeKey].chartOptions"
+        :chart-data="echartsInfo[activeKey].chartData"
+        :columns="tableList[activeKey].columns"
+        :table-info="tableList[activeKey].tableInfo"
+      ></energyEchart>
+    </div>
+  </div>
+</template>
+
+<script>
+import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
+import searchBox from '@/components/SearchBox.vue'
+export default {
+  name: 'StatisicalAnView',
+  components: { energyEchart, searchBox },
+
+  data() {
+    return {
+      paramsDate: {},
+
+      searchOptions: [
+        {
+          label: '日期',
+          type: 'datePick',
+          value: [],
+          key: 'time'
+        }
+      ],
+      echartsInfo: {
+        0: {
+          chartOptions: [
+            {
+              title: '充放电分析',
+              type: 'bar',
+              dataKey: 'sales',
+              infoKeys: [
+                { key: 'key1', label: '日充电电量', lineColor: '#2A82E4' },
+                { key: 'key2', label: '日放电电量', lineColor: '#5AABF2' }
+              ]
+            },
+            {
+              title: '运行状态分析',
+              type: 'bar',
+              dataKey: 'users',
+              infoKeys: [
+                { key: 'key1', label: '日故障次数', lineColor: '#0CDAF5' },
+                { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
+                { key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
+              ]
+            },
+            {
+              title: '电压与电流分析',
+              type: 'line',
+              dataKey: 'stock',
+              infoKeys: [
+                {
+                  key: 'key1',
+                  label: '电压',
+                  lineColor: '#3F80F2',
+                  colorStart: ' rgba(10, 250, 106, 0.15)',
+                  colorEnd: ' rgba(171, 255, 249, 0.3)'
+                },
+                {
+                  key: 'key2',
+                  label: '电流',
+                  lineColor: '#A9A6FF',
+                  colorStart: ' rgba(10, 250, 106, 0.15)',
+                  colorEnd: ' rgba(171, 255, 249, 0.3)'
+                }
+              ]
+            },
+            {
+              title: '功率分析',
+              type: 'line',
+              dataKey: 'yearly',
+              infoKeys: [
+                {
+                  key: 'key1',
+                  label: '功率',
+                  lineColor: '#00FFFB',
+                  colorStart: ' rgba(10, 250, 106, 0.15)',
+                  colorEnd: ' rgba(171, 255, 249, 0.3)'
+                }
+              ]
+            }
+          ],
+          chartData: {
+            sales: [
+              {
+                date: '2025-08-30',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-29',
+                key1: 8,
+                key2: 5,
+                key3: 5,
+                key4: 7
+              },
+              {
+                date: '2025-08-28',
+                key1: 0,
+                key2: 10,
+                key3: 20,
+                key4: 4
+              },
+              {
+                date: '2025-08-27',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-26',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-25',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-24',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-23',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-22',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-21',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-20',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-19',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-18',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-17',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              }
+            ],
+            users: [
+              {
+                date: '2025-08-30',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-29',
+                key1: 8,
+                key2: 5,
+                key3: 5,
+                key4: 7
+              },
+              {
+                date: '2025-08-28',
+                key1: 0,
+                key2: 10,
+                key3: 20,
+                key4: 4
+              },
+              {
+                date: '2025-08-27',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-26',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-25',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-24',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-23',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-22',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-21',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-20',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-19',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-18',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-17',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              }
+            ],
+            stock: [
+              {
+                date: '2025-08-30',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-29',
+                key1: 8,
+                key2: 5,
+                key3: 5,
+                key4: 7
+              },
+              {
+                date: '2025-08-28',
+                key1: 0,
+                key2: 10,
+                key3: 20,
+                key4: 4
+              },
+              {
+                date: '2025-08-27',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-26',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-25',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-24',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-23',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-22',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-21',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-20',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-19',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-18',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-17',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              }
+            ],
+            yearly: [
+              {
+                date: '2025-08-30',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-29',
+                key1: 8,
+                key2: 5,
+                key3: 5,
+                key4: 7
+              },
+              {
+                date: '2025-08-28',
+                key1: 0,
+                key2: 10,
+                key3: 20,
+                key4: 4
+              },
+              {
+                date: '2025-08-27',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-26',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-25',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-24',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-23',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-22',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-21',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-20',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-19',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-18',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              },
+              {
+                date: '2025-08-17',
+                key1: 10,
+                key2: 0,
+                key3: 15,
+                key4: 5
+              }
+            ]
+          }
+        }
+      },
+      activeKey: '0',
+      tabList: [
+        {
+          key: '0',
+          name: '储能设备'
+        },
+        {
+          key: '1',
+          name: '光伏设备'
+        },
+        {
+          key: '2',
+          name: '充电设备'
+        }
+      ],
+      tableList: {
+        0: {
+          columns: [
+            {
+              title: '设备ID',
+              dataIndex: 'key1',
+              key: 'key1',
+              width: 120,
+              ellipsis: true
+            },
+            {
+              title: '设备名称',
+              dataIndex: 'key2',
+              key: 'key2',
+              width: 120,
+              ellipsis: true
+            },
+            {
+              title: '设备类型',
+              dataIndex: 'key3',
+              key: 'key3',
+              width: 120,
+              ellipsis: true
+            },
+            {
+              title: '充电电量',
+              dataIndex: 'key4',
+              key: 'key4',
+              width: 120,
+              ellipsis: true
+            },
+            {
+              title: '充电时长',
+              dataIndex: 'key5',
+              key: 'key5',
+              width: 120,
+              ellipsis: true
+            },
+            {
+              title: '放电时长',
+              dataIndex: 'key6',
+              key: 'key6',
+              width: 120,
+              ellipsis: true
+            },
+            {
+              title: '放电电量',
+              dataIndex: 'key7',
+              key: 'key7',
+              width: 120,
+              ellipsis: true
+            },
+            {
+              title: '故障次数',
+              dataIndex: 'key8',
+              key: 'key8',
+              width: 120,
+              ellipsis: true
+            },
+            {
+              title: '日期',
+              dataIndex: 'key9',
+              key: 'key9',
+              width: 120,
+              ellipsis: true
+            }
+          ],
+          tableInfo: {
+            tableId: '',
+            geturl: ''
+          }
+
+          //   tableData:[
+          //     {
+          //       key1:'1515151515',
+          //       key2:'设备1111',
+          //       key3:'类型',
+          //       key4:'电量',
+          //       key5:'时长',
+          //       key6:'时长',
+          //       key7:'dianl',
+          //       key8:'时长',
+          //       key9:'时长11',
+          //     },
+          //     {
+          //       key1:'1515151515',
+          //       key2:'设备1111',
+          //       key3:'类型',
+          //       key4:'电量',
+          //       key5:'时长',
+          //       key6:'时长',
+          //       key7:'dianl',
+          //       key8:'时长',
+          //       key9:'时长11',
+          //     },
+          //     {
+          //       key1:'1515151515',
+          //       key2:'设备1111',
+          //       key3:'类型',
+          //       key4:'电量',
+          //       key5:'时长',
+          //       key6:'时长',
+          //       key7:'dianl',
+          //       key8:'时长',
+          //       key9:'时长11',
+          //     },
+          //     {
+          //       key1:'1515151515',
+          //       key2:'设备1111',
+          //       key3:'类型',
+          //       key4:'电量',
+          //       key5:'时长',
+          //       key6:'时长',
+          //       key7:'dianl',
+          //       key8:'时长',
+          //       key9:'时长11',
+          //     },
+          //   ]
+        }
+      }
+    }
+  },
+  mounted() {},
+  beforeUnmount() {},
+  methods: {
+    onSearch(data) {
+      this.paramsDate.startTime = data.time ? data.time[0] : ''
+      this.paramsDate.endTime = data.time ? data.time[1] : ''
+      this.pageOption.current = 1
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import url(@/style/color.scss);
+.statisicalAn {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  background: $bg1-color;
+  border-radius: 15px;
+  .tab-header {
+    display: flex;
+
+    .tab {
+      & > span {
+        font-size: 14px;
+        margin-right: 15px;
+        display: inline-block;
+        padding: 10px 50px;
+        cursor: pointer;
+        border: 1px solid $tab-border;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .actived {
+    color: #ffffff;
+
+    background-color: $green;
+  }
+  .uactived {
+    color: #a6b8dd;
+    background-color: $bg2-color;
+  }
+}
+.content {
+  overflow: scroll;
+  height: calc(100% - 15px);
+  margin-top: 10px;
+}
+</style>