Bläddra i källkod

[Feat 0000]省局密闭采空区首页前端样式开发

wangkeyi 5 månader sedan
förälder
incheckning
b9c971a680

BIN
src/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb-1.png


BIN
src/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb-2.png


BIN
src/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb-3.png


BIN
src/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb-4.png


BIN
src/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb-5.png


BIN
src/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb1.png


BIN
src/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb2.png


BIN
src/assets/images/sealedGoaf/configurable/table/table1-label.png


BIN
src/assets/images/sealedGoaf/views/home/module-title.png


+ 720 - 0
src/views/sealedGoafSys/home/configurable.data.sealedGoaf.ts

@@ -0,0 +1,720 @@
+import type { Config } from '@/views/vent/deviceManager/configurationTable/types';
+
+export const testConfigSealedGoaf: Config[] = [
+  // 1. 矿井状况
+  {
+    deviceType: 'goafsInfo',
+    moduleName: '矿井状况',
+    pageType: 'sealed_goaf',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: { show: false, value: '' },
+        slot: { show: false, value: '' },
+      },
+      background: { show: false, type: 'video', link: '' },
+      layout: {
+        direction: 'row',
+        items: [{ name: 'board', basis: '100%' }],
+      },
+      list: [],
+      board: [
+        {
+          type: 'CKQMB',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '生产矿井',
+              value: '219',
+            },
+            {
+              label: '建设矿井',
+              value: '219',
+            },
+            {
+              label: '停产停建',
+              value: '17',
+            },
+            {
+              label: '长期停产停建',
+              value: '17',
+            },
+            {
+              label: '实施关闭',
+              value: '2',
+            },
+            {
+              label: '情况变化',
+              value: '1',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:200px;',
+      version: '原版',
+      position: 'top:30px;left:10px;',
+      headerPosition: 'centerBottom',
+    },
+  },
+  // 2. 当日生产状态
+  {
+    deviceType: 'spray_auto',
+    moduleName: '当日生产状态',
+    pageType: 'sealed_goaf',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: { show: false, value: '' },
+        slot: { show: false, value: '' },
+      },
+      background: { show: false, type: 'video', link: '' },
+      layout: {
+        direction: 'row',
+        items: [{ name: 'board', basis: '100%' }],
+      },
+      list: [],
+      board: [
+        {
+          type: 'CKQMB',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '正在生产',
+              value: '210',
+            },
+            {
+              label: '正在建设',
+              value: '27',
+            },
+            {
+              label: '停产',
+              value: '17',
+            },
+            {
+              label: '停工',
+              value: '1',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:150px;',
+      version: '原版',
+      position: 'top:225px;left:10px;',
+    },
+  },
+  // 3. 煤层自燃倾向性
+  {
+    deviceType: 'deviceInfo',
+    moduleName: '煤层自燃倾向性',
+    pageType: 'sealed_goaf',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      chart: [
+        {
+          type: 'pie_halo',
+          readFrom: '',
+          legend: { show: false, formatter: '{b}:{c}\n{d}%' },
+          xAxis: [{ show: false }],
+          yAxis: [{ show: false, name: '风量', position: 'left' }],
+          series: [{ readFrom: 'piechart', xprop: 'label', yprop: 'valMock', label: '' }],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:270px;',
+      version: '原版',
+      position: 'top:370px;left:10px;',
+      headerPosition: 'centerBottom',
+    },
+  },
+  // 4. 联网状态
+  {
+    deviceType: 'coalFireFeature',
+    moduleName: '联网状态',
+    pageType: 'sealed_goaf',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '30%',
+          },
+          {
+            name: 'table',
+            basis: '70%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'CKQMB1',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '应接入',
+              value: '210',
+            },
+            {
+              label: '在线',
+              value: '27',
+            },
+            {
+              label: '中断',
+              value: '17',
+            },
+            {
+              label: '未接入',
+              value: '1',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'CKQMB',
+          // parser: 'json',
+          readFrom: 'tableArray',
+          columns: [
+            {
+              name: ' ',
+              prop: 'index',
+            },
+            {
+              name: '应接入',
+              prop: 'yjr',
+            },
+            {
+              name: '在线',
+              prop: 'zx',
+            },
+            {
+              name: '中断',
+              prop: 'zd',
+            },
+            {
+              name: '未接入',
+              prop: 'wjr',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        boardArray: [
+          {
+            label: '低风险',
+            value: '210',
+          },
+          {
+            label: '一般风险',
+            value: '27',
+          },
+          {
+            label: '较高风险',
+            value: '17',
+          },
+          {
+            label: '高风险',
+            value: '1',
+          },
+        ],
+        tableArray: [
+          {
+            index: '执法一处',
+            yjr: '73',
+            zx: '73',
+            zd: '0',
+            wjr: '0',
+          },
+          {
+            index: '执法二处',
+            yjr: '73',
+            zx: '73',
+            zd: '0',
+            wjr: '0',
+          },
+          {
+            index: '执法三处',
+            yjr: '73',
+            zx: '73',
+            zd: '0',
+            wjr: '0',
+          },
+          {
+            index: '执法四处',
+            yjr: '73',
+            zx: '73',
+            zd: '0',
+            wjr: '0',
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:440px;height:350px;',
+      version: '原版',
+      position: 'top:600px;left:10px;',
+    },
+  },
+  // 5. 密闭情况总览
+  {
+    deviceType: '',
+    moduleName: '密闭情况总览',
+    pageType: 'sealed_goaf',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '30%',
+          },
+          {
+            name: 'table',
+            basis: '70%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'CKQMB1',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '低风险',
+              value: '210',
+            },
+            {
+              label: '一般风险',
+              value: '27',
+            },
+            {
+              label: '较高风险',
+              value: '17',
+            },
+            {
+              label: '高风险',
+              value: '1',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'CKQMB',
+          // parser: 'json',
+          readFrom: 'tableArray',
+          columns: [
+            {
+              name: ' ',
+              prop: 'index',
+            },
+            {
+              name: '低风险',
+              prop: 'dfx',
+            },
+            {
+              name: '一般风险',
+              prop: 'ybfx',
+            },
+            {
+              name: '较高风险',
+              prop: 'jgfx',
+            },
+            {
+              name: '高风险',
+              prop: 'gfx',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        boardArray: [
+          {
+            label: '低风险',
+            value: '210',
+          },
+          {
+            label: '一般风险',
+            value: '27',
+          },
+          {
+            label: '较高风险',
+            value: '17',
+          },
+          {
+            label: '高风险',
+            value: '1',
+          },
+        ],
+        tableArray: [
+          {
+            index: '执法一处',
+            dfx: '50',
+            ybfx: '20',
+            jgfx: '0',
+            gfx: '0',
+          },
+          {
+            index: '执法二处',
+            dfx: '50',
+            ybfx: '20',
+            jgfx: '0',
+            gfx: '0',
+          },
+          {
+            index: '执法三处',
+            dfx: '50',
+            ybfx: '20',
+            jgfx: '0',
+            gfx: '0',
+          },
+          {
+            index: '执法四处',
+            dfx: '50',
+            ybfx: '20',
+            jgfx: '0',
+            gfx: '0',
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:440px;height:355px;',
+      version: '原版',
+      position: 'top:10px;right:10px;',
+    },
+  },
+  // 6. 采空区密闭预警分析
+  {
+    deviceType: 'goafMonitoring',
+    moduleName: '采空区密闭预警分析',
+    pageType: 'sealed_goaf',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '40%',
+          },
+          {
+            name: 'table',
+            basis: '60%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'CKQMB1',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '低风险',
+              value: '210',
+            },
+            {
+              label: '一般风险',
+              value: '27',
+            },
+            {
+              label: '较高风险',
+              value: '17',
+            },
+            {
+              label: '高风险',
+              value: '1',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'CKQMB',
+          // parser: 'json',
+          readFrom: 'tableArray',
+          columns: [
+            {
+              name: ' ',
+              prop: 'index',
+            },
+            {
+              name: '低风险',
+              prop: 'dfx',
+            },
+            {
+              name: '一般风险',
+              prop: 'ybfx',
+            },
+            {
+              name: '较高风险',
+              prop: 'jgfx',
+            },
+            {
+              name: '高风险',
+              prop: 'gfx',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        boardArray: [
+          {
+            label: '低风险',
+            value: '210',
+          },
+          {
+            label: '一般风险',
+            value: '27',
+          },
+          {
+            label: '较高风险',
+            value: '17',
+          },
+          {
+            label: '高风险',
+            value: '1',
+          },
+        ],
+        tableArray: [
+          {
+            index: '执法一处',
+            dfx: '50',
+            ybfx: '20',
+            jgfx: '0',
+            gfx: '0',
+          },
+          {
+            index: '执法二处',
+            dfx: '50',
+            ybfx: '20',
+            jgfx: '0',
+            gfx: '0',
+          },
+          {
+            index: '执法三处',
+            dfx: '50',
+            ybfx: '20',
+            jgfx: '0',
+            gfx: '0',
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:440px;height:300px;',
+      version: '原版',
+      position: 'top:365px;right:10px;',
+    },
+  },
+  // 7. 当日报警情况统计
+  {
+    deviceType: 'RealtimeMonitor',
+    moduleName: '当日报警情况统计',
+    pageType: 'sealed_goaf',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'CKQMB2',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: 'CO超限',
+              value: '210',
+            },
+            {
+              label: 'CH4超限',
+              value: '27',
+            },
+            {
+              label: 'C2H4超限',
+              value: '17',
+            },
+            {
+              label: 'C2H2超限',
+              value: '1',
+            },
+            {
+              label: 'O2超限',
+              value: '210',
+            },
+            {
+              label: '温度超限',
+              value: '27',
+            },
+            {
+              label: '压差超限',
+              value: '17',
+            },
+            {
+              label: '设备断连',
+              value: '1',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:210px;',
+      version: '原版',
+      position: 'top:660px;right:10px;',
+    },
+  },
+];

+ 87 - 0
src/views/sealedGoafSys/home/sealedGoaf.vue

@@ -0,0 +1,87 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <!-- 渲染所有模块 -->
+    <ModuleCommon
+      v-for="cfg in cfgs"
+      :key="cfg.deviceType + cfg.moduleName"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="data"
+      :visible="true"
+    />
+    <!-- <Three3D :modal-name="modalName" /> -->
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted, onUnmounted, ref } from 'vue';
+  import { useInitConfigs, useInitPage } from '@/views/vent/home/configurable/hooks/useInit';
+  import { testConfigSealedGoaf } from './configurable.data.sealedGoaf';
+  import ModuleCommon from '@/views/vent/home/configurable/components/ModuleCommon.vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+
+  const { title = '省局采空区密闭监测与分析系统' } = useGlobSetting();
+  const { data, updateData, mainTitle } = useInitPage(title);
+
+  const cfgs = computed(() => configs.value);
+  const { configs, fetchConfigs } = useInitConfigs();
+
+  onMounted(() => {
+    fetchConfigs('sealed_goaf').then(() => {
+      configs.value = testConfigSealedGoaf;
+    });
+  });
+
+  // 数据处理函数
+  onUnmounted(() => {});
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
+  .company-home {
+    --image-module-title: url('/@/assets/images/sealedGoaf/views/home/module-title.png');
+
+    width: 100%;
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: #d7effe;
+    :deep(.vent-box1-bg) {
+      .box1-top {
+        background: unset;
+        height: 45px;
+        padding-top: 10px;
+        .title {
+          height: 25px;
+          background: var(--image-module-title) no-repeat;
+          color: #234e8e;
+          justify-content: left;
+          background-size: cover;
+          font-size: 20px;
+          padding-left: 10px;
+          div {
+            margin-top: -12px;
+          }
+        }
+      }
+      .box-container {
+        background-color: unset;
+        &::before {
+          background-image: none;
+        }
+        &::after {
+          background-image: none;
+        }
+      }
+      .box1-bottom {
+        background: none;
+      }
+    }
+  }
+</style>

+ 5 - 2
src/views/vent/deviceManager/configurationTable/types.ts

@@ -179,7 +179,10 @@ export interface ModuleDataBoard extends ReadFrom {
     | 'R'
     | 'S'
     | 'T'
-    | 'U';
+    | 'U'
+    | 'CKQMB'
+    | 'CKQMB1'
+    | 'CKQMB2';
   /** 展示牌布局,决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top' | 'new-top' | 'new1-top' | 'new2-top' | 'new3-top';
   /** 核心配置,每个展示牌对应一项 */
@@ -334,7 +337,7 @@ export interface ModuleDataChart extends ReadFrom {
 
 export interface ModuleDataTable extends ReadFrom {
   /** 表格的预设样式 */
-  type: 'A' | 'B' | 'C' | 'D';
+  type: 'A' | 'B' | 'C' | 'D' | 'CKQMB';
   /** 是否自动滚动 */
   autoScroll?: boolean;
   /** 核心配置,每个表格列对应一项 */

+ 37 - 0
src/views/vent/home/configurable/components/detail/CustomTable.vue

@@ -85,6 +85,7 @@
     --image-list-head: url('/@/assets/images/home-container/configurable/firehome/list-head.png');
     --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
     --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
+    --image-content-label-ckqmb: url('/@/assets/images/sealedGoaf/configurable/table/table1-label.png');
     height: 100%;
     box-sizing: border-box;
     display: flex;
@@ -196,5 +197,41 @@
         background: #092b3a;
       }
     }
+    .table__content_label_CKQMB {
+      background-image: var(--image-content-label-ckqmb);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      color: #000000;
+    }
+    .table__content_list_CKQMB {
+      font-weight: bold;
+      font-size: 18px;
+    }
+    /* 第一个子元素:黑色 */
+    .table__content_list_row .table__content__list_item_CKQMB:nth-child(1) {
+      font-size: 12px;
+      text-align: left;
+      color: #000000;
+    }
+
+    /* 第二个子元素:蓝色 */
+    .table__content_list_row .table__content__list_item_CKQMB:nth-child(2) {
+      color: #1890ff;
+    }
+
+    /* 第三个子元素:黄色 */
+    .table__content_list_row .table__content__list_item_CKQMB:nth-child(3) {
+      color: #ffc107;
+    }
+
+    /* 第四个子元素:橙色 */
+    .table__content_list_row .table__content__list_item_CKQMB:nth-child(4) {
+      color: #ff7a45;
+    }
+
+    /* 第五个子元素:红色 */
+    .table__content_list_row .table__content__list_item_CKQMB:nth-child(5) {
+      color: #ff4d4f;
+    }
   }
 </style>

+ 107 - 0
src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -216,6 +216,13 @@
     --image-board_bg_8: url('/@/assets/images/home-container/configurable/board_bg_8.png');
     --image-board_bg_9: url('/@/assets/images/home-container/configurable/board_bg_9.png');
     --image-board_bg_10: url('/@/assets/images/home-container/configurable/board_bg_10.png');
+    --image-board-bg-ckqmb-1: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb-1.png');
+    --image-board-bg-ckqmb-2: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb-2.png');
+    --image-board-bg-ckqmb-3: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb-3.png');
+    --image-board-bg-ckqmb-4: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb-4.png');
+    --image-board-bg-ckqmb-5: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb-5.png');
+    --image-board-bg-ckqmb1: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb1.png');
+    --image-board-bg-ckqmb2: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-ckqmb2.png');
 
     --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
     --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
@@ -477,6 +484,106 @@
     background-image: var(--image-board-bg-o);
     background-size: 100% 100%;
   }
+  .mini-board_CKQMB {
+    width: 220px;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px 0 20px;
+    background-image: var(--image-board-bg-ckqmb-1);
+    background-size: 100% 100%;
+  }
+  .mini-board_CKQMB:nth-child(2) {
+    background-image: var(--image-board-bg-ckqmb-2);
+  }
+  .mini-board_CKQMB:nth-child(3) {
+    background-image: var(--image-board-bg-ckqmb-3);
+  }
+  .mini-board_CKQMB:nth-child(4) {
+    background-image: var(--image-board-bg-ckqmb-4);
+  }
+  .mini-board_CKQMB:nth-child(5) {
+    background-image: var(--image-board-bg-ckqmb-5);
+  }
+  .mini-board_CKQMB:nth-child(6) {
+    background-image: var(--image-board-bg-ckqmb-1);
+  }
+  .mini-board__label_CKQMB {
+    color: #000000;
+    font-size: 13px;
+    font-family: 'Microsoft YaHei';
+    font-weight: bold;
+    padding-bottom: 6px;
+  }
+  .mini-board__value_CKQMB {
+    width: 55px;
+    color: #000000;
+    font-size: 25px;
+    padding-bottom: 13px;
+    font-family: 'Microsoft YaHei';
+  }
+  .mini-board_CKQMB1 {
+    width: 100px;
+    height: 90px;
+    background-image: var(--image-board-bg-ckqmb1);
+    background-size: 100% 100%;
+    padding-top: 28px;
+  }
+
+  .mini-board__label_CKQMB1 {
+    color: #000000;
+    font-size: 14px;
+    font-family: 'Microsoft YaHei';
+  }
+  .mini-board__value_CKQMB1 {
+    color: #000000;
+    font-size: 22px;
+    font-family: 'Microsoft YaHei';
+    padding-bottom: 10px;
+  }
+  /* 1. 第一个容器:label和value为蓝色 */
+  .mini-board_CKQMB1:nth-child(1) .mini-board__label_CKQMB1,
+  .mini-board_CKQMB1:nth-child(1) .mini-board__value_CKQMB1 {
+    color: #1890ff;
+  }
+
+  /* 2. 第二个容器:label和value为黄色 */
+  .mini-board_CKQMB1:nth-child(2) .mini-board__label_CKQMB1,
+  .mini-board_CKQMB1:nth-child(2) .mini-board__value_CKQMB1 {
+    color: #ffc107;
+  }
+
+  /* 3. 第三个容器:label和value为橙色 */
+  .mini-board_CKQMB1:nth-child(3) .mini-board__label_CKQMB1,
+  .mini-board_CKQMB1:nth-child(3) .mini-board__value_CKQMB1 {
+    color: #ff7a45;
+  }
+
+  /* 4. 第四个容器:label和value为红色 */
+  .mini-board_CKQMB1:nth-child(4) .mini-board__label_CKQMB1,
+  .mini-board_CKQMB1:nth-child(4) .mini-board__value_CKQMB1 {
+    color: #ff4d4f;
+  }
+  .mini-board_CKQMB2 {
+    width: 96px;
+    height: 71px;
+    background-image: var(--image-board-bg-ckqmb2);
+    background-size: 100% 100%;
+    padding-top: 8px;
+  }
+
+  .mini-board__label_CKQMB2 {
+    color: #000000;
+    font-size: 14px;
+    font-family: 'Microsoft YaHei';
+  }
+  .mini-board__value_CKQMB2 {
+    color: #2b6ff0;
+    font-size: 22px;
+    font-family: 'Microsoft YaHei';
+    padding-bottom: 6px;
+  }
 
   .mini-board_P {
     width: 97px;