1. 合并代码

README.md

@@ -35,3 +35,32 @@
 ### 构建
 
 `pnpm build`
+
+### 主题
+
+主题可以在 /views/vent/sys/setting/index.vue 中找到设置入口
+
+常规的颜色、变量在 /design/color.less 或 /design/themify/ 下添加，图片资源应在 /assets/images/themify/ 下添加
+
+各个页面的主题化标准模板可以参考登录页 /views/sys/login/Login.vue
+
+下面是配合主题化使用的工具，输入页面的 css 样式，即可输出标准模板所需的资源
+
+```javascript
+// 使用前请确保：1、所有需主题化的 url 引入请以 url(/@/xxx/xxx.yyy) 格式声明。2、除去注释。
+function themifyScript(str) {
+  const reg = /url\('?(\/[@|0-9|a-z|A-Z|\-|_]+)+.(png|svg)'?\)/g;
+  let strcopy = str;
+  let res = reg.exec(str);
+  let varstr = '';
+  while (res) {
+    const [url, image] = res;
+    const varname = `--image-${image.replace('/', '')}`;
+    varstr += `${varname}: ${url};`;
+    strcopy = strcopy.replace(url, `var(${varname})`);
+    res = reg.exec(str);
+  }
+
+  return [varstr, strcopy];
+}
+```

src/design/theme.less

@@ -84,6 +84,13 @@ html[data-theme='light'] {
 @vent-configurable-module-bg: var(--vent-configurable-module-bg);
 @vent-configurable-bg: var(--vent-configurable-bg);
 @vent-base-light-bg-opcity: var(--vent-base-light-bg-opcity);
+@vent-configurable-module-border-bd: var(--vent-configurable-module-border-bd);
+@vent-gas-list-item-bg-img: var(--vent-gas-list-item-bg-img);
+@vent-configurable-home-bg-img: var(--vent-configurable-home-bg-img);
+@vent-configurable-home-timeline: var(--vent-configurable-home-timeline);
+@vent-configurable-home-light-border: var(--vent-configurable-home-light-border);
+// vent/gas 模块下重要文本的颜色
+@vent-gas-primary-text: var(--vent-gas-primary-text);
 
 // 下面的代码负责将主题相关的选择器、图片前缀等 less 变量声明
 @theme-dark: ~"html[data-theme='dark2']";

src/design/themify/dark.less

@@ -5,4 +5,10 @@ html[data-theme='dark2'] {
     --vent-configurable-bg: #09316a;
     --vent-configurable-module-bg: #3df6ff22;
     --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
+
+    --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
+    --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
+    --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
+    --vent-configurable-home-light-border: #3df6ff;
+    --vent-gas-primary-text: #00c8d9;
 }

src/design/themify/deepblue.less

@@ -8,4 +8,11 @@ html[data-theme='deepblue'] {
     --vent-configurable-bg: #02132c;
     --vent-configurable-module-bg: #0d2037;
     --vent-configurable-module-border-bd: linear-gradient(#3b4c65 0%, #3b4c65 60%, #000723);
+
+    --vent-gas-list-item-bg-img: linear-gradient(to right, #3d82be55, #3977e500);
+    --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
+    --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
+    --vent-configurable-home-light-border: #3df6ff;
+    --vent-gas-primary-text: #dfdfdf;
+
 }

src/design/themify/light.less

@@ -5,4 +5,10 @@ html[data-theme='light'] {
     --vent-configurable-bg: #09316a;
     --vent-configurable-module-bg: #3df6ff22;
     --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
+
+    --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
+    --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
+    --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
+    --vent-configurable-home-light-border: #3df6ff;
+    --vent-gas-primary-text: #00c8d9;
 }

src/design/themify/vent1.less

@@ -5,4 +5,10 @@ html[data-theme='vent1'] {
     --vent-configurable-bg: #09316a;
     --vent-configurable-module-bg: #259ccf22;
     --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
+
+    --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
+    --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
+    --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
+    --vent-configurable-home-light-border: #3df6ff;
+    --vent-gas-primary-text: #00c8d9;
 }

src/design/vent/color.less

@@ -14,17 +14,10 @@
 @vent-table-no-hover: #00bfff10;
 @vent-form-item-boder: #3ad8ff77;
 @ventSpace: zxm;
-// vent/gas 模块下重要文本的颜色
-@vent-gas-primary-text: #00c8d9;
 // vent/gas 模块下Tab相关的颜色
 @vent-gas-tab-bg: #10427a;
 @vent-gas-tab-bg-avtived: #166ab5;
 @vent-gas-tab-border: #2cb6ff;
 // vent/gas 各模块的基准背景色
 @vent-gas-primary-bg: #0091ff;
-@vent-gas-primary-trasparent-bg: #0091ff12;
-// vent/gas 模块下的客制ListItem组件背景色
-@vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
-@vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
-@vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
-@vent-configurable-home-light-border: #3df6ff;
+@vent-gas-primary-trasparent-bg: #0091ff12;

src/layouts/default/setting/handler.ts

@@ -160,6 +160,7 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
 
     // ============header==================
     case HandlerEnum.HEADER_THEME:
+      console.log('debug here');
       updateHeaderBgColor(value);
       return { headerSetting: { bgColor: value } };
 

src/logics/initAppConfig.ts

@@ -20,7 +20,7 @@ import { getCommonStoragePrefix, getStorageShortName } from '/@/utils/env';
 import { primaryColor } from '../../build/config/themeConfig';
 import { Persistent } from '/@/utils/cache/persistent';
 import { deepMerge } from '/@/utils';
-import { ThemeEnum } from '/@/enums/appEnum';
+// import { ThemeEnum } from '/@/enums/appEnum';
 
 // Initial project configuration
 export function initAppConfigStore() {
@@ -35,8 +35,8 @@ export function initAppConfigStore() {
     grayMode,
     themeColor,
 
-    headerSetting: { bgColor: headerBgColor } = {},
-    menuSetting: { bgColor } = {},
+    // headerSetting: { bgColor: headerBgColor } = {},
+    // menuSetting: { bgColor } = {},
   } = projCfg;
   try {
     if (themeColor && themeColor !== primaryColor) {
@@ -52,16 +52,18 @@ export function initAppConfigStore() {
 
   // init dark mode
   updateDarkTheme(darkMode);
-  if (darkMode === ThemeEnum.DARK) {
-    updateHeaderBgColor();
-    updateSidebarBgColor();
-  } else if (darkMode === ThemeEnum.VENT1) {
-    updateHeaderBgColor();
-    updateSidebarBgColor();
-  } else {
-    headerBgColor && updateHeaderBgColor(headerBgColor);
-    bgColor && updateSidebarBgColor(bgColor);
-  }
+  updateHeaderBgColor();
+  updateSidebarBgColor();
+  // if (darkMode === ThemeEnum.DARK) {
+  //   updateHeaderBgColor();
+  //   updateSidebarBgColor();
+  // } else if (darkMode === ThemeEnum.VENT1) {
+  //   updateHeaderBgColor();
+  //   updateSidebarBgColor();
+  // } else {
+  //   headerBgColor && updateHeaderBgColor(headerBgColor);
+  //   bgColor && updateSidebarBgColor(bgColor);
+  // }
   // init store
   localeStore.initLocale();
 

src/views/vent/home/configurable/components/ModuleBDDual.vue

@@ -162,10 +162,10 @@
 
   @{theme-deepblue} {
     .dane-bd {
-      --image-module-title: url('@/assets/images/home-container/configurable/firehome/module-title.png');
-      --image-common-border: url('@/assets/images/home-container/configurable/firehome/common-border.png');
-      --image-common-border2: url('@/assets/images/home-container/configurable/firehome/common-border2.png');
-      --image-module-title-long: url('@/assets/images/home-container/configurable/firehome/module-title-long.png');
+      --image-module-title: url('@/assets/images/themify/deepblue/configurable/firehome/module-title.png');
+      --image-common-border: url('@/assets/images/themify/deepblue/configurable/firehome/common-border.png');
+      --image-common-border2: url('@/assets/images/themify/deepblue/configurable/firehome/common-border2.png');
+      --image-module-title-long: url('@/assets/images/themify/deepblue/configurable/firehome/module-title-long.png');
     }
   }
 

src/views/vent/home/configurable/components/detail/ComplexList.vue

@@ -49,20 +49,20 @@
 
     @{theme-deepblue} {
       .list {
-        --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
-        --image-img-7: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
-        --image-img-8: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
-        --image-img-9: url(/@/assets/images/home-container/configurable/firehome/img-9.png);
-        --image-list_bg_1: url(/@/assets/images/home-container/configurable/dusthome/list_bg_1.png);
+        --image-img-3: url(/@/assets/images/themify/deepblue/configurable/firehome/img-3.png);
+        --image-img-7: url(/@/assets/images/themify/deepblue/configurable/firehome/img-7.png);
+        --image-img-8: url(/@/assets/images/themify/deepblue/configurable/firehome/img-8.png);
+        --image-img-9: url(/@/assets/images/themify/deepblue/configurable/firehome/img-9.png);
+        --image-list_bg_1: url(/@/assets/images/themify/deepblue/configurable/dusthome/list_bg_1.png);
       }
     }
 
     .list {
-        --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
-        --image-img-7: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
-        --image-img-8: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
-        --image-img-9: url(/@/assets/images/home-container/configurable/firehome/img-9.png);
-        --image-list_bg_1: url(/@/assets/images/home-container/configurable/dusthome/list_bg_1.png);
+      --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
+      --image-img-7: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
+      --image-img-8: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
+      --image-img-9: url(/@/assets/images/home-container/configurable/firehome/img-9.png);
+      --image-list_bg_1: url(/@/assets/images/home-container/configurable/dusthome/list_bg_1.png);
       padding: 5px 20px;
       position: relative;
       width: 100%;

src/views/vent/home/configurable/components/detail/CustomGallery.vue

@@ -36,21 +36,73 @@
 <style lang="less" scoped>
   @import '@/design/vent/color.less';
   @import '@/design/theme.less';
-
   @{theme-deepblue} {
     .gallery {
-      --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
+      --image-gallery_center: url(/@/assets/images/themify/deepblue/configurable/gallery_center.png);
+      --image-gallery_1: url(/@/assets/images/themify/deepblue/configurable/gallery_1.png);
+      --image-deco_2: url(/@/assets/images/themify/deepblue/configurable/deco_2.png);
+      --image-deco_3: url(/@/assets/images/themify/deepblue/configurable/deco_3.png);
+      --image-deco_4: url(/@/assets/images/themify/deepblue/configurable/deco_4.png);
+      --image-img-2: url(/@/assets/images/themify/deepblue/configurable/firehome/img-2.png);
+      --image-img-1: url(/@/assets/images/themify/deepblue/configurable/firehome/img-1.png);
+      --image-img-8: url(/@/assets/images/themify/deepblue/configurable/dusthome/img-8.png);
+      --image-img-9: url(/@/assets/images/themify/deepblue/configurable/dusthome/img-9.png);
+      --image-sbzs: url(/@/assets/images/themify/deepblue/configurable/dusthome/sbzs.png);
+      --image-pwkqs: url(/@/assets/images/themify/deepblue/configurable/dusthome/pwkqs.png);
+      --image-lwsl: url(/@/assets/images/themify/deepblue/configurable/dusthome/lwsl.png);
+      --image-dwsl: url(/@/assets/images/themify/deepblue/configurable/dusthome/dwsl.png);
+      --image-img-1: url(/@/assets/images/themify/deepblue/configurable/firehome/img-1.png);
+      --image-img-7: url(/@/assets/images/themify/deepblue/configurable/dusthome/img-7.png);
+      --image-img-4: url(/@/assets/images/themify/deepblue/configurable/firehome/img-4.png);
+      --image-bottom1: url('/@/assets/images/themify/deepblue/alarm/bottom1.png');
+      --image-center-bg: url('/@/assets/images/themify/deepblue/alarm/center-bg.png');
+      --image-warning-icon-bg1: url(/@/assets/images/themify/deepblue/alarm/warning-icon-bg1.png);
+      --image-warning-icon-bg-a1: url(/@/assets/images/themify/deepblue/alarm/warning-icon-bg-a1.png);
+      --image-data-bg: url(/@/assets/images/themify/deepblue/alarm/data-bg.png);
+      --image-icon-vent: url(/@/assets/images/themify/deepblue/alarm/icon-vent.svg);
+      --image-icon-bg: url(/@/assets/images/themify/deepblue/alarm/icon-bg.png);
+      --image-icon-device: url(/@/assets/images/themify/deepblue/alarm/icon-device.svg);
+      --image-icon-dust: url(/@/assets/images/themify/deepblue/alarm/icon-dust.svg);
+      --image-icon-gas: url(/@/assets/images/themify/deepblue/alarm/icon-gas.svg);
+      --image-gallery_I_2: url(/@/assets/images/themify/deepblue/configurable/dusthome/gallery_I_2.png);
+      --image-gallery_I_1: url(/@/assets/images/themify/deepblue/configurable/dusthome/gallery_I_1.png);
     }
   }
-
   .gallery {
+    --image-gallery_center: url(/@/assets/images/home-container/configurable/gallery_center.png);
+    --image-gallery_1: url(/@/assets/images/home-container/configurable/gallery_1.png);
+    --image-deco_2: url(/@/assets/images/home-container/configurable/deco_2.png);
+    --image-deco_3: url(/@/assets/images/home-container/configurable/deco_3.png);
+    --image-deco_4: url(/@/assets/images/home-container/configurable/deco_4.png);
+    --image-img-2: url(/@/assets/images/home-container/configurable/firehome/img-2.png);
+    --image-img-1: url(/@/assets/images/home-container/configurable/firehome/img-1.png);
+    --image-img-8: url(/@/assets/images/home-container/configurable/dusthome/img-8.png);
+    --image-img-9: url(/@/assets/images/home-container/configurable/dusthome/img-9.png);
+    --image-sbzs: url(/@/assets/images/home-container/configurable/dusthome/sbzs.png);
+    --image-pwkqs: url(/@/assets/images/home-container/configurable/dusthome/pwkqs.png);
+    --image-lwsl: url(/@/assets/images/home-container/configurable/dusthome/lwsl.png);
+    --image-dwsl: url(/@/assets/images/home-container/configurable/dusthome/dwsl.png);
+    --image-img-1: url(/@/assets/images/home-container/configurable/firehome/img-1.png);
+    --image-img-7: url(/@/assets/images/home-container/configurable/dusthome/img-7.png);
+    --image-img-4: url(/@/assets/images/home-container/configurable/firehome/img-4.png);
+    --image-bottom1: url('/@/assets/images/vent/alarm/bottom1.png');
+    --image-center-bg: url('/@/assets/images/vent/alarm/center-bg.png');
+    --image-warning-icon-bg1: url(/@/assets/images/vent/alarm/warning-icon-bg1.png);
+    --image-warning-icon-bg-a1: url(/@/assets/images/vent/alarm/warning-icon-bg-a1.png);
+    --image-data-bg: url(/@/assets/images/vent/alarm/data-bg.png);
+    --image-icon-vent: url(/@/assets/images/vent/alarm/icon-vent.svg);
+    --image-icon-bg: url(/@/assets/images/vent/alarm/icon-bg.png);
+    --image-icon-device: url(/@/assets/images/vent/alarm/icon-device.svg);
+    --image-icon-dust: url(/@/assets/images/vent/alarm/icon-dust.svg);
+    --image-icon-gas: url(/@/assets/images/vent/alarm/icon-gas.svg);
+    --image-gallery_I_2: url(/@/assets/images/home-container/configurable/dusthome/gallery_I_2.png);
+    --image-gallery_I_1: url(/@/assets/images/home-container/configurable/dusthome/gallery_I_1.png);
     position: relative;
     width: 100%;
     height: 100%;
   }
-
   .gallery-item_center_A {
-    background: url(@/assets/images/home-container/configurable/gallery_center.png) no-repeat;
+    background: var(--image-gallery_center) no-repeat;
     width: 144px;
     height: 126px;
     left: calc(50% - 72px);
@@ -59,7 +111,7 @@
     background-size: 100% 100%;
   }
   .gallery > .gallery-item_A {
-    background: url(@/assets/images/home-container/configurable/gallery_1.png) no-repeat;
+    background: var(--image-gallery_1) no-repeat;
     width: 90px;
     height: 90px;
     position: absolute;
@@ -81,9 +133,8 @@
     bottom: 20px;
     right: 60px;
   }
-
   .gallery-item_center_B {
-    background: url(/@/assets/images/home-container/configurable/deco_2.png) no-repeat;
+    background: var(--image-deco_2) no-repeat;
     width: 100%;
     height: 90%;
     top: 5%;
@@ -91,11 +142,8 @@
     background-position: center;
     background-size: auto 100%;
   }
-  // .gallery .gallery-item__value {
-  //   display: none;
-  // }
   .gallery > .gallery-item_B {
-    background: url(/@/assets/images/home-container/configurable/deco_3.png) no-repeat;
+    background: var(--image-deco_3) no-repeat;
     position: absolute;
     text-align: center;
     background-position: center;
@@ -113,7 +161,6 @@
     height: 60px;
     line-height: 60px;
     top: 50px;
-    // right: 34%;
     right: calc(50% - 70px);
   }
   .gallery > .gallery-item_B:nth-child(4) {
@@ -133,12 +180,10 @@
   .gallery-item_B > .gallery-item__label {
     display: none;
   }
-
   .gallery-item_center_C {
-    background: url(/@/assets/images/home-container/configurable/deco_4.png) no-repeat;
+    background: var(--image-deco_4) no-repeat;
     width: 100%;
     height: 100%;
-    // top: 5%;
     position: absolute;
     background-position: center;
     background-size: auto 100%;
@@ -153,29 +198,26 @@
   .gallery-item_C > .gallery-item__value {
     font-size: 20px;
   }
-
   .gallery_D {
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .gallery-item_center_D {
-    background: url(/@/assets/images/home-container/configurable/firehome/img-2.png) no-repeat;
+    background: var(--image-img-2) no-repeat;
     background-size: auto 100%;
     width: 100px;
     height: 100px;
   }
   .gallery > .gallery-item_D {
-    background-image: url(/@/assets/images/home-container/configurable/firehome/img-1.png);
+    background-image: var(--image-img-1);
     background-size: 100% auto;
     width: 213px;
     height: 87px;
     text-align: center;
-    // line-height: 35px;
     padding-top: 17px;
     padding-left: 40px;
     display: none;
-
     .gallery-item__value {
       font-size: 24px;
     }
@@ -183,9 +225,8 @@
   .gallery > .gallery-item_D:nth-child(2) {
     display: block;
   }
-
   .gallery-item_center_E {
-    background: url(/@/assets/images/home-container/configurable/dusthome/img-8.png) no-repeat;
+    background: var(--image-img-8) no-repeat;
     width: 200px;
     height: 200px;
     left: calc(50% - 100px);
@@ -194,13 +235,12 @@
     background-size: 100% auto;
   }
   .gallery > .gallery-item_E {
-    background: url(/@/assets/images/home-container/configurable/dusthome/img-9.png) no-repeat;
+    background: var(--image-img-9) no-repeat;
     width: 100px;
     height: 90px;
     position: absolute;
     text-align: center;
     background-size: 100% 100%;
-
     .gallery-item__label {
       height: 60px;
       text-align: center;
@@ -212,37 +252,32 @@
   }
   .gallery > .gallery-item_E:nth-child(2) {
     top: calc(50% - 100px);
-    // top: 20px;
     left: calc(50% - 150px);
-    // left: 80px;
     .gallery-item__label {
-      background-image: url(/@/assets/images/home-container/configurable/dusthome/sbzs.png);
+      background-image: var(--image-sbzs);
     }
   }
   .gallery > .gallery-item_E:nth-child(3) {
     top: calc(50% - 100px);
     right: calc(50% - 150px);
     .gallery-item__label {
-      background-image: url(/@/assets/images/home-container/configurable/dusthome/pwkqs.png);
+      background-image: var(--image-pwkqs);
     }
   }
   .gallery > .gallery-item_E:nth-child(4) {
     bottom: calc(50% - 100px);
     left: calc(50% - 150px);
     .gallery-item__label {
-      background-image: url(/@/assets/images/home-container/configurable/dusthome/lwsl.png);
+      background-image: var(--image-lwsl);
     }
   }
   .gallery > .gallery-item_E:nth-child(5) {
     bottom: calc(50% - 100px);
     right: calc(50% - 150px);
     .gallery-item__label {
-      background-image: url(/@/assets/images/home-container/configurable/dusthome/dwsl.png);
+      background-image: var(--image-dwsl);
     }
   }
-
-  // .gallery-item_center_F {
-  // }
   .gallery > .gallery-item_F {
     width: 120px;
     height: 60px;
@@ -253,8 +288,7 @@
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;
-    background-image: url(/@/assets/images/home-container/configurable/firehome/img-1.png);
-
+    background-image: var(--image-img-1);
     .gallery-item__value {
       font-size: 20px;
     }
@@ -266,8 +300,7 @@
     height: 120px;
     line-height: 120px;
     padding: 0;
-    background-image: url(/@/assets/images/home-container/configurable/dusthome/img-7.png);
-
+    background-image: var(--image-img-7);
     .gallery-item__label {
       display: none;
     }
@@ -288,7 +321,6 @@
     bottom: calc(50% - 62px);
     left: calc(50% + 60px);
   }
-
   .gallery > .gallery-item_G {
     width: 120px;
     height: 120px;
@@ -298,8 +330,7 @@
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;
-    background-image: url(/@/assets/images/home-container/configurable/firehome/img-4.png);
-
+    background-image: var(--image-img-4);
     .gallery-item__value {
       font-size: 20px;
     }
@@ -338,18 +369,15 @@
     right: calc(50% - 230px);
     transform: scale(0.7);
   }
-
   .gallery_H {
-    background-image: url('/@/assets/images/vent/alarm/bottom1.png'), url('/@/assets/images/vent/alarm/center-bg.png');
+    background-image: var(--image-bottom1), var(--image-center-bg);
     background-repeat: no-repeat, no-repeat;
     background-size:
       auto 90%,
       auto 90%;
-    // background-size: contain;
     background-position: center, center;
     position: relative;
   }
-
   .gallery > .gallery-item_H {
     width: 100px;
     height: 70px;
@@ -365,7 +393,7 @@
     width: 300px;
     height: 200px;
     padding-top: 50px;
-    background-image: url(/@/assets/images/vent/alarm/warning-icon-bg1.png), url(/@/assets/images/vent/alarm/warning-icon-bg-a1.png);
+    background-image: var(--image-warning-icon-bg1), var(--image-warning-icon-bg-a1);
     background-size:
       auto 100%,
       auto 46%;
@@ -377,8 +405,7 @@
   .gallery > .gallery-item_H:nth-child(3) {
     top: calc(50% - 60px);
     left: calc(50% - 170px);
-    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-vent.svg),
-      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-image: var(--image-data-bg), var(--image-icon-vent), var(--image-icon-bg);
     background-size:
       100% auto,
       auto 46%,
@@ -391,8 +418,7 @@
   .gallery > .gallery-item_H:nth-child(4) {
     top: calc(50% + 10px);
     left: calc(50% - 170px);
-    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-device.svg),
-      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-image: var(--image-data-bg), var(--image-icon-device), var(--image-icon-bg);
     background-size:
       100% auto,
       auto 46%,
@@ -405,8 +431,7 @@
   .gallery > .gallery-item_H:nth-child(5) {
     top: calc(50% - 60px);
     right: calc(50% - 170px);
-    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-dust.svg),
-      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-image: var(--image-data-bg), var(--image-icon-dust), var(--image-icon-bg);
     background-size:
       100% auto,
       auto 46%,
@@ -419,8 +444,7 @@
   .gallery > .gallery-item_H:nth-child(6) {
     top: calc(50% + 10px);
     right: calc(50% - 170px);
-    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-gas.svg),
-      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-image: var(--image-data-bg), var(--image-icon-gas), var(--image-icon-bg);
     background-size:
       100% auto,
       auto 46%,
@@ -430,7 +454,6 @@
       center 80%,
       center bottom;
   }
-
   .gallery > .gallery-item_I {
     width: 120px;
     height: 30px;
@@ -438,12 +461,11 @@
     background-size: 100% auto;
     background-repeat: no-repeat;
     background-position: bottom;
-    background-image: url(/@/assets/images/home-container/configurable/dusthome/gallery_I_2.png);
+    background-image: var(--image-gallery_I_2);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 10px;
-
     .gallery-item__value {
       font-size: 20px;
     }
@@ -455,8 +477,7 @@
     height: 102px;
     line-height: 102px;
     padding: 0;
-    background-image: url(/@/assets/images/home-container/configurable/dusthome/gallery_I_1.png);
-
+    background-image: var(--image-gallery_I_1);
     .gallery-item__label {
       display: none;
     }
@@ -482,7 +503,6 @@
     bottom: calc(50% - 35px);
     left: calc(50% + 70px);
   }
-
   .gallery-item__value_red {
     color: red;
   }

src/views/vent/home/configurable/components/detail/CustomList.vue

@@ -41,17 +41,47 @@
   //   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/color.less';
   /* Timeline 相关的样式 */
 
+  @{theme-deepblue} {
+    .list {
+      --image-list_bg_default: url(/@/assets/images/themify/deepblue/configurable/list_bg_default.png);
+      --image-triangle_icon: url(/@/assets/images/themify/deepblue/configurable/triangle_icon.png);
+      --image-list_bg_b: url(/@/assets/images/themify/deepblue/configurable/list_bg_b.png);
+      --image-deco_1: url(/@/assets/images/themify/deepblue/configurable/deco_1.png);
+      --image-list_bg_c: url(/@/assets/images/themify/deepblue/configurable/list_bg_c.png);
+      --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/configurable/list_bg_defflip.png);
+      --image-list_bg_d: url(/@/assets/images/themify/deepblue/configurable/list_bg_d.png);
+      --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/configurable/list_bg_defflip.png);
+      --image-list_bg_e: url(/@/assets/images/themify/deepblue/configurable/list_bg_e.png);
+      --image-list: url(/@/assets/images/themify/deepblue/configurable/firehome/list.png);
+      --image-list_bg_h: url(/@/assets/images/themify/deepblue/configurable/list_bg_h.png);
+      --image-list_bg_i: url('/@/assets/images/themify/deepblue/configurable/list_bg_i.png');
+    }
+  }
+
   .list {
+    --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
+    --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
+    --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
+    --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
+    --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
+    --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
+    --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
+    --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
+    --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
+    --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
+    --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
+    --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
     padding: 5px 20px;
     position: relative;
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
     background-size: 100% 100%;
-    background-image: url(/@/assets/images/home-container/configurable/list_bg_default.png);
+    background-image: var(--image-list_bg_default);
   }
 
   .list_A {
@@ -67,7 +97,7 @@
     background-repeat: no-repeat;
     width: 25px;
     height: 29px;
-    background-image: url(/@/assets/images/home-container/configurable/triangle_icon.png);
+    background-image: var(--image-triangle_icon);
   }
 
   .list-item__content_B {
@@ -76,13 +106,13 @@
     display: flex;
     background-position: left bottom;
     background-size: 100% auto;
-    background-image: url(/@/assets/images/home-container/configurable/list_bg_b.png);
+    background-image: var(--image-list_bg_b);
   }
   .list__image_B {
     width: 77px;
     height: 77px;
     background-repeat: no-repeat;
-    background-image: url(/@/assets/images/home-container/configurable/deco_1.png);
+    background-image: var(--image-deco_1);
     background-size: auto;
     margin-right: 20px;
   }
@@ -97,7 +127,7 @@
     display: flex;
     background-position: center;
     background-size: 100% 100%;
-    background-image: url(/@/assets/images/home-container/configurable/list_bg_c.png);
+    background-image: var(--image-list_bg_c);
     margin-bottom: 10px;
     text-align: center;
   }
@@ -106,7 +136,7 @@
   }
 
   .list_D {
-    background-image: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
+    background-image: var(--image-list_bg_defflip);
   }
   .list__wrapper_D {
     display: flex;
@@ -117,15 +147,11 @@
   }
   .list-item_D {
     flex-basis: 25%;
-    // width: 80px;
     height: 60px;
     background-repeat: no-repeat;
-    // padding: 25px 50px 0 50px;
-    // display: flex;
     background-position: center;
     background-size: auto 100%;
-    background-image: url(/@/assets/images/home-container/configurable/list_bg_d.png);
-    // margin-bottom: 10px;
+    background-image: var(--image-list_bg_d);
     text-align: center;
     margin-bottom: 10px;
   }
@@ -137,7 +163,7 @@
   }
 
   .list_E {
-    background-image: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
+    background-image: var(--image-list_bg_defflip);
   }
   .list__wrapper_E {
     display: flex;
@@ -148,15 +174,11 @@
   }
   .list-item_E {
     flex-basis: 25%;
-    // width: 80px;
     height: 70px;
     background-repeat: no-repeat;
-    // padding: 25px 50px 0 50px;
-    // display: flex;
     background-position: center;
     background-size: auto 100%;
-    background-image: url(/@/assets/images/home-container/configurable/list_bg_e.png);
-    // margin-bottom: 10px;
+    background-image: var(--image-list_bg_e);
     text-align: center;
     margin: 5px 0px;
     padding-top: 32px;
@@ -173,7 +195,7 @@
     display: flex;
     background-position: center;
     background-size: 100% auto;
-    background-image: url(/@/assets/images/home-container/configurable/firehome/list.png);
+    background-image: var(--image-list);
     margin-top: 10px;
     text-align: center;
   }
@@ -235,8 +257,6 @@
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    // position: relative;
-    // top: -8px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 18px;
     color: aliceblue;
@@ -252,7 +272,7 @@
     display: flex;
     background-position: bottom;
     background-size: 100% auto;
-    background-image: url(/@/assets/images/home-container/configurable/list_bg_h.png);
+    background-image: var(--image-list_bg_h);
     margin-bottom: 10px;
     text-align: center;
   }
@@ -273,7 +293,7 @@
     height: 63px;
     align-items: center;
     text-align: center;
-    background-image: url('/@/assets/images/home-container/configurable/list_bg_i.png');
+    background-image: var(--image-list_bg_i);
     background-repeat: no-repeat;
     background-size: auto 100%;
     margin: 5px 10px;
@@ -301,51 +321,10 @@
     top: 50%;
     height: 50%;
     left: 70px;
-    // color: #00fbfe;
     position: absolute;
     font-size: 18px;
   }
 
-  // .list-item__icon_red {
-  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_5.png');
-  // }
-  // .list-item__icon_orange {
-  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_4.png');
-  // }
-  // .list-item__icon_yellow {
-  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_3.png');
-  // }
-  // .list-item__icon_green {
-  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_2.png');
-  // }
-  // .list-item__icon_blue {
-  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_1.png');
-  // }
-  // .list-item__icon {
-  //   width: 33px;
-  //   height: 35px;
-  //   margin-left: 50px;
-  //   background-repeat: no-repeat;
-  //   background-position: center center;
-  // }
-  // .list-item__dot {
-  //   width: 10px;
-  //   height: 10px;
-  //   margin-left: 70px;
-  //   background-color: @vent-gas-primary-bg;
-  //   border-radius: 5px;
-  //   position: relative;
-  // }
-  // .list-item__dot::before {
-  //   content: '';
-  //   position: absolute;
-  //   top: -3px;
-  //   left: -3px;
-  //   width: 16px;
-  //   height: 16px;
-  //   border-radius: 8px;
-  //   border: 1px solid @vent-gas-tab-border;
-  // }
   .list-item__label {
     flex-basis: 55%;
   }

src/views/vent/home/configurable/components/detail/CustomTable.vue

@@ -45,14 +45,30 @@
   }
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @import '@/design/vent/color.less';
 
   @font-face {
     font-family: 'douyuFont';
-    src: url('@/assets/font/douyuFont.otf');
+    src: url('/@/assets/font/douyuFont.otf');
+  }
+
+  @{theme-deepblue} {
+    .table__content {
+      --image-content-label: url(/@/assets/images/themify/deepblue/company/content-label.png);
+      --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
+      --image-list-head: url('/@/assets/images/themify/deepblue/configurable/firehome/list-head.png');
+      --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
+      --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
+    }
   }
 
   .table__content {
+    --image-content-label: url(/@/assets/images/company/content-label.png);
+    --image-content-text: url('/@/assets/images/company/content-text.png');
+    --image-list-head: url('/@/assets/images/home-container/configurable/firehome/list-head.png');
+    --image-content-text: url('/@/assets/images/company/content-text.png');
+    --image-content-text: url('/@/assets/images/company/content-text.png');
     height: 100%;
     box-sizing: border-box;
     display: flex;
@@ -66,40 +82,35 @@
       display: flex;
       justify-content: space-around;
       align-items: center;
-      // background: url('@/assets/images/company/content-label.png') no-repeat;
       .label-t {
-        // color: #3df6ff;
         text-align: center;
         font-size: 14px;
       }
     }
     .table__content_label_A {
-      // border: 1px solid @vent-gas-tab-border;
-      background-image: url(@/assets/images/company/content-label.png);
+      background-image: var(--image-content-label);
       background-size: 100% 100%;
       background-repeat: no-repeat;
       color: #31b9ef;
     }
     .table__content_label_B {
-      // border: 1px solid @vent-gas-tab-border;
       background-image: linear-gradient(to top, #04698c, #04698c00);
       background-size: 100% 100%;
       background-repeat: no-repeat;
       color: #31b9ef;
     }
     .table__content_label_C {
-      // border: 1px solid @vent-gas-tab-border;
       background-position: center 100%;
       background-size: 100% 25px;
       background-repeat: no-repeat;
-      background-image: url('@/assets/images/company/content-text.png');
+      background-image: var(--image-content-text);
       height: 40px;
 
       .label-t {
         background-repeat: no-repeat;
         background-size: 80% auto;
         background-position: center;
-        background-image: url('/@/assets/images/home-container/configurable/firehome/list-head.png');
+        background-image: var(--image-list-head);
       }
     }
 
@@ -123,29 +134,23 @@
           text-align: center;
         }
       }
-
-      // .table__content__list_item_B {
-      //   border: 1px solid @vent-gas-tab-border;
-      // }
     }
 
     .table__content_list_A {
       .table__content_list_row {
-        // background-position: center;
         background-size: 100% auto;
         background-repeat: no-repeat;
         background-position: center bottom;
-        background-image: url('@/assets/images/company/content-text.png');
+        background-image: var(--image-content-text);
       }
     }
     .table__content_list_C {
       .table__content_list_row {
         min-height: 50px;
-        // background-position: center;
         background-size: 100% auto;
         background-repeat: no-repeat;
         background-position: center bottom;
-        background-image: url('@/assets/images/company/content-text.png');
+        background-image: var(--image-content-text);
       }
     }
   }

src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -63,14 +63,49 @@
   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/color.less';
+
+  @{theme-deepblue} {
+    .mini-board {
+      --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+      --image-value-bg: url('/@/assets/images/themify/deepblue/value-bg.png');
+      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent-param-bg.png');
+      --image-mini-board-1: url('/@/assets/images/themify/deepblue/home/mini-board-1.png');
+      --image-board_bg_1: url('/@/assets/images/themify/deepblue/configurable/board_bg_1.png');
+      --image-miehuo: url('/@/assets/images/themify/deepblue/configurable/firehome/miehuo.png');
+      --image-value-bg-2: url('/@/assets/images/themify/deepblue/value-bg-2.png');
+      --image-board_bg_3: url('/@/assets/images/themify/deepblue/configurable/board_bg_3.png');
+      --image-hycd: url(/@/assets/images/themify/deepblue/configurable/dusthome/hycd.png);
+      --image-dyfl: url(/@/assets/images/themify/deepblue/configurable/dusthome/dyfl.png);
+      --image-jdjl: url(/@/assets/images/themify/deepblue/configurable/dusthome/jdjl.png);
+      --image-board_bg_3: url('/@/assets/images/themify/deepblue/configurable/board_bg_3.png');
+      --image-board_bg_2: url('/@/assets/images/themify/deepblue/configurable/board_bg_2.png');
+      --image-board_bg_5: url('/@/assets/images/themify/deepblue/configurable/board_bg_5.png');
+      --image-board_bg_4: url('/@/assets/images/themify/deepblue/configurable/board_bg_4.png');
+    }
+  }
 
   .mini-board {
+    --image-area3: url('/@/assets/images/company/area3.png');
+    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+    --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
+    --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
+    --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
+    --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
+    --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
+    --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+    --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
+    --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
+    --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
+    --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+    --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
+    --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
+    --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
     height: 50px;
     line-height: 25px;
     width: 130px;
     padding: 0 5px 0 5px;
-    // box-sizing: border-box;
     text-align: center;
     background-size: 100% 100%;
     position: relative;
@@ -79,13 +114,13 @@
   .mini-board_A {
     width: 120px;
     height: 60px;
-    background-image: url('@/assets/images/company/area3.png');
+    background-image: var(--image-area3);
     background-size: 100% 100%;
   }
   .mini-board_B {
     width: 131px;
     height: 64px;
-    background-image: url('@/assets/images/vent/value-bg.png');
+    background-image: var(--image-value-bg);
     background-size: 100% auto;
     background-position: center bottom;
     background-repeat: no-repeat;
@@ -93,12 +128,12 @@
   .mini-board_C {
     width: 121px;
     height: 69px;
-    background-image: url('@/assets/images/vent/vent-param-bg.png');
+    background-image: var(--image-vent-param-bg);
   }
   .mini-board_D {
     width: 105px;
     height: 58px;
-    background-image: url('@/assets/images/vent/home/mini-board-1.png');
+    background-image: var(--image-mini-board-1);
     background-position: center bottom;
     background-repeat: no-repeat;
   }
@@ -106,7 +141,7 @@
     width: 30%;
     height: 180px;
     padding: 20px 5px;
-    background-image: url('/@/assets/images/home-container/configurable/board_bg_1.png');
+    background-image: var(--image-board_bg_1);
     background-position: center bottom;
     background-repeat: no-repeat;
     background-size: 100% 100%;
@@ -114,7 +149,7 @@
   .mini-board_F {
     width: 140px;
     height: 70px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
+    background-image: var(--image-miehuo);
     background-size: 100% 80%;
     background-position: center bottom;
     background-repeat: no-repeat;
@@ -122,7 +157,7 @@
   .mini-board_G {
     width: 98px;
     height: 70px;
-    background-image: url('@/assets/images/vent/value-bg-2.png');
+    background-image: var(--image-value-bg-2);
     background-size: 100% auto;
     background-position: center bottom;
     background-repeat: no-repeat;
@@ -130,7 +165,7 @@
   .mini-board_H {
     width: 174px;
     height: 104px;
-    background-image: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+    background-image: var(--image-board_bg_3);
     background-size: 100% auto;
     background-position: center bottom;
     background-repeat: no-repeat;
@@ -144,8 +179,6 @@
     height: 30px;
     line-height: 30px;
   }
-  // .mini-board__label_A {
-  // }
 
   .mini-board__value_B {
     color: @vent-gas-primary-text;
@@ -166,8 +199,6 @@
     font-size: 20px;
     font-weight: bold;
   }
-  // .mini-board__label_C {
-  // }
 
   .mini-board__value_D {
     font-size: 20px;
@@ -214,30 +245,30 @@
 
   .mini-board_E:nth-child(1) {
     .mini-board__label_E {
-      background-image: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
+      background-image: var(--image-hycd);
     }
   }
   .mini-board_E:nth-child(2) {
     .mini-board__label_E {
-      background-image: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
+      background-image: var(--image-dyfl);
     }
   }
   .mini-board_E:nth-child(3) {
     .mini-board__label_E {
-      background-image: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
+      background-image: var(--image-jdjl);
     }
   }
 
   .mini-board_H_low_risk {
-    background-image: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+    background-image: var(--image-board_bg_3);
   }
   .mini-board_H_risk {
-    background-image: url('/@/assets/images/home-container/configurable/board_bg_2.png');
+    background-image: var(--image-board_bg_2);
   }
   .mini-board_H_high_risk {
-    background-image: url('/@/assets/images/home-container/configurable/board_bg_5.png');
+    background-image: var(--image-board_bg_5);
   }
   .mini-board_H_warning {
-    background-image: url('/@/assets/images/home-container/configurable/board_bg_4.png');
+    background-image: var(--image-board_bg_4);
   }
 </style>

src/views/vent/home/configurable/components/detail/TimelineList.vue

@@ -27,26 +27,42 @@
   );
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @import '@/design/vent/color.less';
   /* Timeline 相关的样式 */
 
+  @{theme-deepblue} {
+    .timeline-item {
+      --image-warn_icon_5: url('/@/assets/images/themify/deepblue/configurable/warn_icon_5.png');
+      --image-warn_icon_4: url('/@/assets/images/themify/deepblue/configurable/warn_icon_4.png');
+      --image-warn_icon_3: url('/@/assets/images/themify/deepblue/configurable/warn_icon_3.png');
+      --image-warn_icon_2: url('/@/assets/images/themify/deepblue/configurable/warn_icon_2.png');
+      --image-warn_icon_1: url('/@/assets/images/themify/deepblue/configurable/warn_icon_1.png');
+    }
+  }
+
   .timeline-item {
+    --image-warn_icon_5: url('/@/assets/images/home-container/configurable/warn_icon_5.png');
+    --image-warn_icon_4: url('/@/assets/images/home-container/configurable/warn_icon_4.png');
+    --image-warn_icon_3: url('/@/assets/images/home-container/configurable/warn_icon_3.png');
+    --image-warn_icon_2: url('/@/assets/images/home-container/configurable/warn_icon_2.png');
+    --image-warn_icon_1: url('/@/assets/images/home-container/configurable/warn_icon_1.png');
     height: 20%;
   }
   .timeline-item__icon_red {
-    background-image: url('@/assets/images/home-container/configurable/warn_icon_5.png');
+    background-image: var(--image-warn_icon_5);
   }
   .timeline-item__icon_orange {
-    background-image: url('@/assets/images/home-container/configurable/warn_icon_4.png');
+    background-image: var(--image-warn_icon_4);
   }
   .timeline-item__icon_yellow {
-    background-image: url('@/assets/images/home-container/configurable/warn_icon_3.png');
+    background-image: var(--image-warn_icon_3);
   }
   .timeline-item__icon_green {
-    background-image: url('@/assets/images/home-container/configurable/warn_icon_2.png');
+    background-image: var(--image-warn_icon_2);
   }
   .timeline-item__icon_blue {
-    background-image: url('@/assets/images/home-container/configurable/warn_icon_1.png');
+    background-image: var(--image-warn_icon_1);
   }
   .timeline-item__icon {
     width: 33px;