fix: 安全页面

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
+    "@kjgl77/datav-vue3": "^1.7.4",
     "@visactor/vchart": "^2.0.3",
     "dayjs": "^1.11.13",
     "echarts": "^6.0.0",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@element-plus/icons-vue':
         specifier: ^2.3.2
         version: 2.3.2(vue@3.5.22(typescript@5.8.3))
+      '@kjgl77/datav-vue3':
+        specifier: ^1.7.4
+        version: 1.7.4(vue@3.5.22(typescript@5.8.3))
       '@visactor/vchart':
         specifier: ^2.0.3
         version: 2.0.6
@@ -89,7 +92,7 @@ importers:
         version: 66.5.4(postcss@8.5.6)(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2))
       unplugin-auto-import:
         specifier: ^20.0.0
-        version: 20.2.0(@vueuse/core@9.13.0(vue@3.5.22(typescript@5.8.3)))
+        version: 20.2.0(@vueuse/core@10.11.1(vue@3.5.22(typescript@5.8.3)))
       unplugin-vue-components:
         specifier: ^29.0.0
         version: 29.1.0(@babel/parser@7.28.4)(vue@3.5.22(typescript@5.8.3))
@@ -650,6 +653,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -1052,6 +1059,21 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@jiaminghi/bezier-curve@0.0.9':
+    resolution: {integrity: sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==}
+
+  '@jiaminghi/c-render@0.4.3':
+    resolution: {integrity: sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==}
+
+  '@jiaminghi/charts@0.2.18':
+    resolution: {integrity: sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==}
+
+  '@jiaminghi/color@1.1.3':
+    resolution: {integrity: sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==}
+
+  '@jiaminghi/transition@1.1.11':
+    resolution: {integrity: sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -1068,6 +1090,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@kjgl77/datav-vue3@1.7.4':
+    resolution: {integrity: sha512-zYVTVKkklUxwtiNKS1qPBilm4rTW+WItfp0zVpaRAI8wgXkLSPbDR9xPq2+UcU/Jft7/DVdMfBp709E2ResuPQ==}
+
   '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
     resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
 
@@ -1348,6 +1373,9 @@ packages:
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@typescript-eslint/eslint-plugin@8.46.1':
     resolution: {integrity: sha512-rUsLh8PXmBjdiPY+Emjz9NX2yHvhS11v0SR6xNJkm5GM1MO9ea/1GoDKlHHZGrOJclL/cZ2i/vRUYVtjRhrHVQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1596,12 +1624,21 @@ packages:
       vue:
         optional: true
 
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
@@ -4062,6 +4099,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/runtime@7.28.4': {}
+
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -4363,6 +4402,28 @@ snapshots:
   '@img/sharp-win32-x64@0.34.4':
     optional: true
 
+  '@jiaminghi/bezier-curve@0.0.9':
+    dependencies:
+      '@babel/runtime': 7.28.4
+
+  '@jiaminghi/c-render@0.4.3':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@jiaminghi/bezier-curve': 0.0.9
+      '@jiaminghi/color': 1.1.3
+      '@jiaminghi/transition': 1.1.11
+
+  '@jiaminghi/charts@0.2.18':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@jiaminghi/c-render': 0.4.3
+
+  '@jiaminghi/color@1.1.3': {}
+
+  '@jiaminghi/transition@1.1.11':
+    dependencies:
+      '@babel/runtime': 7.28.4
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -4382,6 +4443,16 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@kjgl77/datav-vue3@1.7.4(vue@3.5.22(typescript@5.8.3))':
+    dependencies:
+      '@jiaminghi/c-render': 0.4.3
+      '@jiaminghi/charts': 0.2.18
+      '@jiaminghi/color': 1.1.3
+      '@vueuse/core': 10.11.1(vue@3.5.22(typescript@5.8.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
     dependencies:
       eslint-scope: 5.1.1
@@ -4589,6 +4660,8 @@ snapshots:
 
   '@types/web-bluetooth@0.0.16': {}
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.8.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -5014,6 +5087,16 @@ snapshots:
       typescript: 5.8.3
       vue: 3.5.22(typescript@5.8.3)
 
+  '@vueuse/core@10.11.1(vue@3.5.22(typescript@5.8.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.22(typescript@5.8.3))
+      vue-demi: 0.14.10(vue@3.5.22(typescript@5.8.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@9.13.0(vue@3.5.22(typescript@5.8.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
@@ -5024,8 +5107,17 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/metadata@10.11.1': {}
+
   '@vueuse/metadata@9.13.0': {}
 
+  '@vueuse/shared@10.11.1(vue@3.5.22(typescript@5.8.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.22(typescript@5.8.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/shared@9.13.0(vue@3.5.22(typescript@5.8.3))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.8.3))
@@ -6928,7 +7020,7 @@ snapshots:
       - postcss
       - supports-color
 
-  unplugin-auto-import@20.2.0(@vueuse/core@9.13.0(vue@3.5.22(typescript@5.8.3))):
+  unplugin-auto-import@20.2.0(@vueuse/core@10.11.1(vue@3.5.22(typescript@5.8.3))):
     dependencies:
       local-pkg: 1.1.2
       magic-string: 0.30.19
@@ -6937,7 +7029,7 @@ snapshots:
       unplugin: 2.3.10
       unplugin-utils: 0.3.1
     optionalDependencies:
-      '@vueuse/core': 9.13.0(vue@3.5.22(typescript@5.8.3))
+      '@vueuse/core': 10.11.1(vue@3.5.22(typescript@5.8.3))
 
   unplugin-utils@0.3.1:
     dependencies:

src/views/safety/index.vue

@@ -1,13 +1,376 @@
 <template>
-  <div>
-    安全
+  <div class="w-full h-full relative flex justify-between items-center">
+    <!-- 左侧面板 -->
+    <Panel>
+      <CardTitle>安全问题状态</CardTitle>
+
+      <div class="w-full h-200px flex gap-25px">
+        <chart :options="getPieOptions(data)" />
+        <div class="flex flex-col justify-center items-center pr-20px">
+          <div
+            v-for="item in data"
+            :key="item.name"
+            class="w-200px flex justify-between items-center border-b border-b-dashed border-b-[#ccc] h-40px"
+          >
+            <span
+              :style="{ borderColor: item.color }"
+              class="w-10px h-10px border-2 border-solid rounded-full mr-2 block"
+            ></span>
+            <span class="w-120px font-bold">{{ item.name }}</span>
+            <span class="font-bold italic">{{ item.value }}</span>
+          </div>
+        </div>
+      </div>
+
+      <CardTitle>安全问题类型</CardTitle>
+      <div class="w-full h-250px flex gap-10px p-10px box-border justify-between items-center">
+        <div class="bg-[rgba(29,66,110,0.6)] text-white w-full h-full flex-col flex-1">
+          <div
+            class="h-30px flex items-center justify-center border-b border-b-solid border-b-[#ccc] text-17px"
+          >
+            总计
+          </div>
+          <div class="w-full flex flex-col justify-center items-center h-[calc(100%-30px)]">
+            <img src="@/assets/images/bg-security.png" class="w-60px h-60px" />
+            <!-- <span class="font-bold italic text-20px color-[#31E4CF] mt-30px">1132</span> -->
+            <DigitalFlop :config="config5" />
+          </div>
+        </div>
+        <div class="bg-[rgba(29,66,110,0.6)] text-white h-full w-260px left-board">
+          <ScrollBoard :config="config" @mouseover="mouseoverHandler" @click="clickHandler" />
+        </div>
+      </div>
+
+      <CardTitle>安全问题排名</CardTitle>
+      <div class="text-white h-350px w-full pt-10px left-bottom-board">
+        <ScrollBoard :config="config1" @mouseover="mouseoverHandler" @click="clickHandler" />
+      </div>
+    </Panel>
+
+    <!-- 中间区域 -->
+    <div
+      class="h-full box-border pr-10px pl-10px middle-content flex-1 flex flex-col gap-10px justify-center"
+    >
+      <div class="">
+        <CardTitle>安全教育培训</CardTitle>
+        <div class="text-white h-470px w-full center-board">
+          <ScrollBoard :config="config2" @mouseover="mouseoverHandler" @click="clickHandler" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧面板 -->
+    <Panel>
+      <CardTitle>安全问题通报</CardTitle>
+      <div class="text-white h-400px w-full center-board right-top-board">
+        <ScrollBoard :config="config3" @mouseover="mouseoverHandler" @click="clickHandler" />
+      </div>
+
+      <CardTitle>分包问题数量统计</CardTitle>
+      <div class="w-full box-border p-10px h-450px">
+        <ScrollRankingBoard :config="config4" />
+      </div>
+    </Panel>
   </div>
 </template>
 
 <script setup lang="ts">
+import { reactive } from 'vue';
+import { ScrollBoard, ScrollRankingBoard, DigitalFlop } from '@kjgl77/datav-vue3';
+import Panel from '@/components/Panel.vue';
+import CardTitle from '@/components/CardTitle.vue';
+import Chart from '@/components/Chart/index.vue';
+import type { EChartsOption } from 'echarts';
+
+type DataItem = {
+  name: string;
+  value: number;
+  color: string;
+};
+
+const total = 1132;
+const data = [
+  { name: '未整改', value: 280, color: '#f56c6c' },
+  { name: '整改中', value: 320, color: '#409EFF' },
+  { name: '整改完成', value: 532, color: '#67C23A' },
+];
+const getPieOptions = (data: DataItem[]): EChartsOption => {
+  return {
+    series: [
+      // 外层主环
+      {
+        type: 'pie',
+        radius: ['65%', '90%'],
+        center: ['50%', '50%'],
+        data: data.map((item) => ({
+          value: item.value,
+          name: item.name,
+          itemStyle: { color: item.color },
+        })),
+        label: { show: false },
+        labelLine: { show: false },
+      },
+      // 单条虚线环
+      {
+        type: 'pie',
+        radius: ['59.5%', '70%'],
+        center: ['50%', '50%'],
+        silent: true,
+        z: 1,
+        itemStyle: {
+          color: 'transparent',
+          borderColor: '#00d9ff',
+          borderWidth: 2,
+          borderType: 'dashed',
+        },
+        label: { show: false },
+        data: [{ value: 1 }],
+      },
+      // 中间数字
+      {
+        type: 'pie',
+        radius: ['0%', '55%'],
+        center: ['50%', '50%'],
+        silent: true,
+        label: {
+          position: 'center',
+          formatter: `{c|${total}}`,
+          rich: {
+            c: {
+              fontSize: 36,
+              fontWeight: 600,
+              color: '#00d9ff',
+            },
+          },
+        },
+        data: [{ value: 1, itemStyle: { color: 'transparent' } }],
+      },
+    ],
+  };
+};
+
+const config = reactive({
+  header: ['名称', '数量'],
+  data: [
+    ['高处作业安全', '253'],
+    ['机械使用', '209'],
+    ['电气安全', '320'],
+    ['消防安全', '123'],
+    ['特种设备', '642'],
+    ['xxxx', '234'],
+    ['xxx', '667'],
+    ['xxx', '334'],
+    ['xxx', '234'],
+    ['xxx', '567'],
+  ],
+  index: false,
+  headerBGC: 'rgba(29, 66, 110, 0.6)',
+  evenRowBGC: 'rgba(29, 66, 110, 0.6)',
+  oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
+  align: ['center', 'center'],
+  headerHeight: 30,
+  rowNum: 5,
+  waitTime: 5000,
+});
+
+const config1 = reactive({
+  data: [
+    ['高处作业安全', '253'],
+    ['机械使用', '209'],
+    ['电气安全', '320'],
+    ['消防安全', '123'],
+    ['特种设备', '642'],
+    ['xxxx', '234'],
+    ['xxx', '667'],
+    ['xxx', '334'],
+    ['xxx', '234'],
+    ['xxx', '567'],
+  ],
+  evenRowBGC: 'rgba(29, 66, 110, 0.6)',
+  oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
+  align: ['center', 'left', 'center'],
+  index: true,
+  columnWidth: [50, 300],
+  rowNum: 6,
+  waitTime: 50005000,
+});
+
+const config2 = reactive({
+  header: ['培训内容', '培训分部', '培训时间', '培训人数'],
+  data: [
+    ['《筑牢安全防线：施工安全基础1培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基础2培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基础3培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基础4培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基234础培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基础234培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基础5培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基础23培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基础445培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基础5培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基础3培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基234础培训》', '部门一', '2023-12-11', '12'],
+    ['《筑牢安全防线：施工安全基础6培训》', '部门一', '2023-12-11', '12'],
+  ],
+  index: false,
+  headerBGC: 'rgba(29, 66, 110, 0.6)',
+  evenRowBGC: 'rgba(52, 139, 199, 0.298039215686275)',
+  oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
+  align: ['left', 'center', 'center', 'center'],
+  columnWidth: [500],
+  headerHeight: 48,
+  rowNum: 10,
+  waitTime: 5000,
+});
+
+const config3 = reactive({
+  header: ['问题描述', '发起时间', '整改人'],
+  data: [
+    ['高处作业未系安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系1安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系324安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系23安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系23安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系s安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系34安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系s安全带', '2024-11-08', '分包3-张三'],
+    ['高处作业未系安全带', '2024-11-08', '分包3-张三'],
+  ],
+  index: false,
+  headerBGC: 'rgba(29, 66, 110, 0.6)',
+  evenRowBGC: 'rgba(52, 139, 199, 0.298039215686275)',
+  oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
+  align: ['left', 'center', 'center', 'center'],
+  columnWidth: [200],
+  headerHeight: 48,
+  rowNum: 9,
+  waitTime: 5000,
+});
+
+const config4 = reactive({
+  data: [
+    {
+      name: 'F01',
+      value: 80,
+    },
+    {
+      name: 'A09',
+      value: 72,
+    },
+    {
+      name: 'A08',
+      value: 70,
+    },
+    {
+      name: 'A07',
+      value: 70,
+    },
+    {
+      name: 'A06',
+      value: 70,
+    },
+    {
+      name: 'A075',
+      value: 70,
+    },
+    {
+      name: 'A074',
+      value: 70,
+    },
+    {
+      name: 'A073',
+      value: 70,
+    },
+    {
+      name: 'A071',
+      value: 70,
+    },
+    {
+      name: 'A072',
+      value: 70,
+    },
+    {
+      name: 'A078',
+      value: 70,
+    },
+  ],
+  rowNum: 8,
+  waitTime: 5000,
+  color: '#fff',
+  fontSize: 17,
+});
+
+const config5 = reactive({
+  number: [1132],
+  content: '{nt}',
+});
+
+setInterval(() => {
+  config5.number = config5.number.map((num) => num + 100);
+}, 3000);
+
+const mouseoverHandler = (e: any) => {
+  console.log(e);
+};
 
+const clickHandler = (e: any) => {
+  console.log(e);
+};
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
+:deep(*) {
+  .el-descriptions__body {
+    background-color: transparent;
+  }
+  .el-descriptions__label {
+    color: #fff;
+  }
+  .el-descriptions__content {
+    color: #ccc;
+  }
+}
+:deep(.left-board .dv-scroll-board .header) {
+  height: 30px !important;
+  color: #31e4cf;
+}
+:deep(.left-board .row-item) {
+  font-size: 17px;
+  font-weight: 400;
+}
+:deep(.left-board .header-item) {
+  font-weight: 400;
+  font-size: 17px;
+}
 
-</style>
+:deep(.center-board .dv-scroll-board .header) {
+  height: 48px !important;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+}
+:deep(.left-bottom-board .dv-scroll-board .rows .ceil) {
+  font-size: 17px;
+  font-weight: 400;
+}
+:deep(.center-board .dv-scroll-board .rows .ceil) {
+  font-size: 16px;
+  color: rgba(247, 247, 247, 0.698039215686274);
+}
+:deep(.dv-scroll-ranking-board .ranking-info .rank) {
+  width: auto !important;
+  margin-right: 10px;
+}
+:deep(.dv-scroll-ranking-board .ranking-column) {
+  height: 14px;
+  border: none;
+  background-color: rgba(232, 232, 232, 0.27843137254902);
+}
+:deep(.dv-scroll-ranking-board .ranking-column .inside-column) {
+  height: 100%;
+  background-color: rgba(115, 235, 233, 1);
+}
+</style>