[Feat 0000] 登录页、设备预警页面、可配置首页各个首页及模块的主题化开发

src/assets/images/themify/deepblue/alarm/icon-device.svg

@@ -0,0 +1,20 @@
+<svg id="组_15309" data-name="组 15309" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55.336" height="55.336" viewBox="0 0 55.336 55.336">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.113" y1="0.088" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#33578a" stop-opacity="0.2"/>
+      <stop offset="1" stop-color="#33578a"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.785" y1="0.935" x2="0.224" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d6f4ff"/>
+      <stop offset="0.259" stop-color="#d6f4ff" stop-opacity="0"/>
+      <stop offset="1" stop-color="#d6f4ff" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="0.295" x2="0.946" y2="0.843" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#0a84ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <circle id="椭圆_2596" data-name="椭圆 2596" cx="27.668" cy="27.668" r="27.668" opacity="0.5" fill="url(#linear-gradient)"/>
+  <path id="路径_55647" data-name="路径 55647" d="M27.668,2.767A24.9,24.9,0,0,0,10.06,45.276,24.9,24.9,0,0,0,45.276,10.06,24.738,24.738,0,0,0,27.668,2.767m0-2.767A27.668,27.668,0,1,1,0,27.668,27.668,27.668,0,0,1,27.668,0Z" fill="url(#linear-gradient-2)"/>
+  <path id="路径_55648" data-name="路径 55648" d="M149.163,157.69v3.115H173.63v-2.82a6.408,6.408,0,0,0-.97-12.741H151.3a6.407,6.407,0,0,0-2.137,12.446Zm20.579-7.777a1.944,1.944,0,1,1-1.94,1.948v-.008A1.944,1.944,0,0,1,169.742,149.913Zm-7.762,0a1.944,1.944,0,1,1-1.94,1.948v-.008A1.939,1.939,0,0,1,161.981,149.913Zm-7.769,0a1.944,1.944,0,1,1-1.94,1.948v-.008A1.944,1.944,0,0,1,154.211,149.913Zm15.781-12.385L171.6,135.5a9.337,9.337,0,0,0-.811-.584,17.769,17.769,0,0,0-2.122-1.205c-5.586-2.714-11.642-2.645-17.282,2.1l1.637,1.993c4.768-4.01,9.778-4.07,14.53-1.751a15.524,15.524,0,0,1,1.827,1.038Q169.7,137.3,169.992,137.528Zm-3.828,1.433a9.823,9.823,0,0,0-11.256,1.364l1.637,1.993a7.316,7.316,0,0,1,8.5-1.023,10.088,10.088,0,0,1,1.076.614c.182.121.3.2.341.243l1.607-2.024A9.96,9.96,0,0,0,166.164,138.961Zm-5.033-9.725a19.786,19.786,0,0,1,8.83,2.1,21.506,21.506,0,0,1,2.539,1.448c.258.167.478.326.667.462l.2.159,1.607-2.024c-.2-.167-.561-.432-1.069-.773a23.851,23.851,0,0,0-2.842-1.614,22.276,22.276,0,0,0-9.975-2.357,20.389,20.389,0,0,0-13.105,5.154l1.637,1.993a17.9,17.9,0,0,1,11.506-4.548Z" transform="translate(-134.312 -116.052)" fill="url(#linear-gradient-3)"/>
+</svg>

src/assets/images/themify/deepblue/alarm/icon-dust.svg

@@ -0,0 +1,28 @@
+<svg id="组_14020" data-name="组 14020" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55.336" height="55.336" viewBox="0 0 55.336 55.336">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.113" y1="0.088" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#33578a" stop-opacity="0.2"/>
+      <stop offset="1" stop-color="#33578a"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.785" y1="0.935" x2="0.224" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d6f4ff"/>
+      <stop offset="0.259" stop-color="#d6f4ff" stop-opacity="0"/>
+      <stop offset="1" stop-color="#d6f4ff" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="0.295" x2="0.946" y2="0.843" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#0a84ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <circle id="椭圆_2596" data-name="椭圆 2596" cx="27.668" cy="27.668" r="27.668" opacity="0.5" fill="url(#linear-gradient)"/>
+  <path id="路径_55647" data-name="路径 55647" d="M27.668,2.767A24.9,24.9,0,0,0,10.06,45.276,24.9,24.9,0,0,0,45.276,10.06,24.738,24.738,0,0,0,27.668,2.767m0-2.767A27.668,27.668,0,1,1,0,27.668,27.668,27.668,0,0,1,27.668,0Z" fill="url(#linear-gradient-2)"/>
+  <g id="组_14032" data-name="组 14032" transform="translate(11.036 12.959)">
+    <path id="路径_55460" data-name="路径 55460" d="M396.31,91.567m4.117,0a4.118,4.118,0,1,1-4.117-4.118A4.118,4.118,0,0,1,400.427,91.567Z" transform="translate(-379.979 -87.45)" fill="url(#linear-gradient-3)"/>
+    <path id="路径_55461" data-name="路径 55461" d="M638.078,587.7m4.12,0a4.119,4.119,0,1,1-4.12-4.119A4.12,4.12,0,0,1,642.2,587.7Z" transform="translate(-629.985 -566.678)" fill="url(#linear-gradient-3)"/>
+    <path id="路径_55462" data-name="路径 55462" d="M20.043,579.658m4.119,0a4.119,4.119,0,1,1-4.119-4.119A4.119,4.119,0,0,1,24.162,579.658Z" transform="translate(9.102 -558.914)" fill="url(#linear-gradient-3)"/>
+    <path id="路径_55463" data-name="路径 55463" d="M394.829,795.88m2.689,0a2.689,2.689,0,1,1-2.689-2.69A2.69,2.69,0,0,1,397.519,795.88Z" transform="translate(-377.069 -769.151)" fill="url(#linear-gradient-3)"/>
+    <path id="路径_55464" data-name="路径 55464" d="M837.3,340.608m2.689,0a2.689,2.689,0,1,1-2.689-2.689A2.69,2.69,0,0,1,839.99,340.608Z" transform="translate(-834.611 -329.388)" fill="url(#linear-gradient-3)"/>
+    <path id="路径_55465" data-name="路径 55465" d="M290.638,386.894m2.689,0a2.689,2.689,0,1,1-2.689-2.689A2.689,2.689,0,0,1,293.327,386.894Z" transform="translate(-269.328 -374.096)" fill="url(#linear-gradient-3)"/>
+    <path id="路径_55466" data-name="路径 55466" d="M30.952,219.982m2.689,0a2.689,2.689,0,1,1-2.689-2.689A2.689,2.689,0,0,1,33.641,219.982Z" transform="translate(-0.797 -212.87)" fill="url(#linear-gradient-3)"/>
+  </g>
+</svg>

src/assets/images/themify/deepblue/alarm/icon-fire.svg

@@ -0,0 +1,20 @@
+<svg id="组_15310" data-name="组 15310" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55.336" height="55.336" viewBox="0 0 55.336 55.336">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.113" y1="0.088" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#33578a" stop-opacity="0.2"/>
+      <stop offset="1" stop-color="#33578a"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.785" y1="0.935" x2="0.224" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d6f4ff"/>
+      <stop offset="0.259" stop-color="#d6f4ff" stop-opacity="0"/>
+      <stop offset="1" stop-color="#d6f4ff" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="0.295" x2="0.946" y2="0.843" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#0a84ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <circle id="椭圆_2596" data-name="椭圆 2596" cx="27.668" cy="27.668" r="27.668" opacity="0.5" fill="url(#linear-gradient)"/>
+  <path id="路径_55647" data-name="路径 55647" d="M27.668,2.767A24.9,24.9,0,0,0,10.06,45.276,24.9,24.9,0,0,0,45.276,10.06,24.738,24.738,0,0,0,27.668,2.767m0-2.767A27.668,27.668,0,1,1,0,27.668,27.668,27.668,0,0,1,27.668,0Z" fill="url(#linear-gradient-2)"/>
+  <path id="路径_55647-2" data-name="路径 55647" d="M178.554,111c1.722.574,2.3-1,1.579-1.579a6.272,6.272,0,0,1-2.583-7.032c.861-2.87,3.157-4.018,3.157-8.324,0,0,2.87,2.153,2.3,5.454,2.87-3.3,1.579-7.606,1-9.616,7.319,3.875,13.634,12.342,6.315,19.518-.861.718,0,2.009,1.292,1.579,19.949-11.338,4.88-28.273,2.3-30.282.861,2.009,1,5.167-.718,6.745-3.014-11.338-10.333-13.634-10.333-13.634.861,5.884-3.3,12.2-7.176,17.078a13.018,13.018,0,0,0-1.435-6.171c-.287,4.162-3.588,7.606-4.449,11.912-1.148,5.741.861,9.9,8.755,14.352h0Z" transform="translate(-157.979 -64.807)" fill="url(#linear-gradient-3)"/>
+</svg>

src/assets/images/themify/deepblue/alarm/icon-gas.svg

@@ -0,0 +1,24 @@
+<svg id="组_15311" data-name="组 15311" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55.336" height="55.336" viewBox="0 0 55.336 55.336">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.113" y1="0.088" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#33578a" stop-opacity="0.2"/>
+      <stop offset="1" stop-color="#33578a"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.785" y1="0.935" x2="0.224" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d6f4ff"/>
+      <stop offset="0.259" stop-color="#d6f4ff" stop-opacity="0"/>
+      <stop offset="1" stop-color="#d6f4ff" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="0.295" x2="0.946" y2="0.843" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#0a84ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <circle id="椭圆_2596" data-name="椭圆 2596" cx="27.668" cy="27.668" r="27.668" opacity="0.5" fill="url(#linear-gradient)"/>
+  <path id="路径_55647" data-name="路径 55647" d="M27.668,2.767A24.9,24.9,0,0,0,10.06,45.276,24.9,24.9,0,0,0,45.276,10.06,24.738,24.738,0,0,0,27.668,2.767m0-2.767A27.668,27.668,0,1,1,0,27.668,27.668,27.668,0,0,1,27.668,0Z" fill="url(#linear-gradient-2)"/>
+  <g id="图标_瓦斯预警" transform="translate(11.522 12.072)">
+    <path id="路径_55296" data-name="路径 55296" d="M21.939,57.661a3.969,3.969,0,0,0-.848.081A9.462,9.462,0,0,1,17.7,60.648a4.55,4.55,0,0,0-.263,1.494V64.2a7.1,7.1,0,0,1-14.209,0V52.675a1.615,1.615,0,0,0-3.229,0V64.219A10.354,10.354,0,1,0,20.708,64.2V62.16a1.263,1.263,0,1,1,2.524,0v5.43a1.615,1.615,0,0,0,3.229,0V62.16A4.548,4.548,0,0,0,21.939,57.661Z" transform="translate(0 -43.371)" fill="url(#linear-gradient-3)"/>
+    <path id="路径_55297" data-name="路径 55297" d="M51.407,61.833a4.521,4.521,0,0,0-3.391,2.906A9.237,9.237,0,0,0,51.407,61.833Zm-9.486,3.773c-.019.223-.019.425-.019.646v2.059a1.272,1.272,0,1,1-2.543,0V64.7a9.476,9.476,0,0,1-3.229-2.766v6.378a4.5,4.5,0,1,0,9-.019V66.253c0-.2,0-.383.019-.585a10.173,10.173,0,0,1-3.229-.061ZM53.164,55.94v.4a9.042,9.042,0,0,1-.425,2.785,7.169,7.169,0,0,1,6.62,7.124v5.43a1.636,1.636,0,0,0,.463,1.15,1.627,1.627,0,0,0,2.766-1.15v-5.43A10.376,10.376,0,0,0,53.163,55.94Z" transform="translate(-30.296 -47.463)" fill="url(#linear-gradient-3)"/>
+    <path id="路径_55298" data-name="路径 55298" d="M41.368,3.44a8.5,8.5,0,1,0,8.5,8.5A8.5,8.5,0,0,0,41.368,3.44Zm-.927,15.147.927-5.717h-3.7l4.629-7.623-.927,5.711h3.7Z" transform="translate(-27.563 -3.44)" fill="url(#linear-gradient-3)"/>
+  </g>
+</svg>

src/assets/images/themify/deepblue/alarm/icon-vent.svg

@@ -0,0 +1,20 @@
+<svg id="组_15312" data-name="组 15312" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55.336" height="55.336" viewBox="0 0 55.336 55.336">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.113" y1="0.088" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#33578a" stop-opacity="0.2"/>
+      <stop offset="1" stop-color="#33578a"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.785" y1="0.935" x2="0.224" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d6f4ff"/>
+      <stop offset="0.259" stop-color="#d6f4ff" stop-opacity="0"/>
+      <stop offset="1" stop-color="#d6f4ff" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="0.295" x2="0.946" y2="0.843" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#0a84ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <circle id="椭圆_2596" data-name="椭圆 2596" cx="27.668" cy="27.668" r="27.668" opacity="0.5" fill="url(#linear-gradient)"/>
+  <path id="路径_55647" data-name="路径 55647" d="M27.668,2.767A24.9,24.9,0,0,0,10.06,45.276,24.9,24.9,0,0,0,45.276,10.06,24.738,24.738,0,0,0,27.668,2.767m0-2.767A27.668,27.668,0,1,1,0,27.668,27.668,27.668,0,0,1,27.668,0Z" fill="url(#linear-gradient-2)"/>
+  <path id="路径_55649" data-name="路径 55649" d="M91.3,137.791a.834.834,0,0,1-.852-.816v-1.632a.834.834,0,0,1,.852-.816h22.993a1.633,1.633,0,1,0,0-3.264h-7.654a.834.834,0,0,1-.852-.816v-1.632a.834.834,0,0,1,.852-.816h7.654a4.9,4.9,0,1,1,0,9.791Zm-5.11,6.527a.834.834,0,0,1-.852-.816v-1.632a.834.834,0,0,1,.852-.816h20.439a.834.834,0,0,1,.852.816V143.5a.834.834,0,0,1-.852.816Zm8.516,6.527a.834.834,0,0,1-.852-.816V148.4a.834.834,0,0,1,.852-.816h5.11a.834.834,0,0,1,.852.816v1.632a.834.834,0,0,1-.852.816Zm8.516-3.264h11.071a4.9,4.9,0,1,1,0,9.791h-7.663a.834.834,0,0,1-.852-.816v-1.632a.834.834,0,0,1,.852-.816h7.663a1.633,1.633,0,1,0,0-3.264H103.218a.834.834,0,0,1-.852-.816V148.4a.834.834,0,0,1,.852-.816Z" transform="translate(-74.698 -115.018)" fill="url(#linear-gradient-3)"/>
+</svg>

src/assets/images/themify/deepblue/inner-icon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.633" height="31.635" viewBox="0 0 38.633 31.635">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f0faff"/>
+      <stop offset="1" stop-color="#0a84ff"/>
+    </linearGradient>
+  </defs>
+  <g id="内" transform="translate(-532.21 -469.512)" style="isolation: isolate">
+    <g id="组_13974" data-name="组 13974" style="isolation: isolate">
+      <path id="路径_55620" data-name="路径 55620" d="M538.239,501.147H532.21V473.516h16.1v-4h6.2v4h16.324v23.54a3.788,3.788,0,0,1-1.166,2.815,3.9,3.9,0,0,1-2.839,1.145h-7.347l1.32-3.609h3.08a1,1,0,0,0,.7-.286.95.95,0,0,0,.308-.725l.044-18.789H554.519v.924l-1.1,2.2h4.8l5.059,14.3h-6.2l-4.445-12.672-6.292,12.672h-6.2l8.183-16.5v-.924H538.239Z" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

src/assets/images/themify/deepblue/outer-icon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.972" height="31.724" viewBox="0 0 37.972 31.724">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f0faff"/>
+      <stop offset="1" stop-color="#0a84ff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_56251" data-name="路径 56251" d="M384.985,495.214l1.672-3.784h7.172l.792-3.741h-3.432l-4-13.244h5.984l2.508,8.273,2.552-12.056H385.821l3.168-7h6.468l-1.232,2.64h11.748l-6.6,28.908H384.985Zm27.28.088h-5.456V463.578h5.456Zm7.744-28.292,2.948,25.564H417.5l-2.948-25.564Z" transform="translate(-384.985 -463.578)" fill="url(#linear-gradient)"/>
+</svg>

src/components/vent/customHeader.vue

@@ -82,8 +82,19 @@
   }
 </style>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @ventSpace: zxm;
+
+  @{theme-deepblue} {
+    .vent-custom-header {
+      --image-vent-header1: url('/@/assets/images/themify/deepblue/vent-header1.png');
+      --image-select-bg: url('/@/assets/images/themify/deepblue/home/select-bg.png');
+    }
+  }
+
   .vent-custom-header {
+    --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
+    --image-select-bg: url('/@/assets/images/vent/home/select-bg.png');
     width: 100%;
     height: fit-content;
     .vent-home-header {
@@ -93,7 +104,7 @@
       top: 0;
       // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
       // height: 100px;
-      background: url('/@/assets/images/vent/vent-header1.png') no-repeat;
+      background: var(--image-vent-header1) no-repeat;
       height: 89px;
       background-size: contain;
       display: flex;
@@ -107,7 +118,7 @@
         color: #fff;
         font-size: 32px;
         font-family: 'ysbtFont';
-        background-image: linear-gradient(#ffffff 50%, #60f4ff);
+        background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
         -webkit-background-clip: text;
         color: transparent;
       }
@@ -117,7 +128,7 @@
       height: 34px;
       top: 60px;
       // background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
-      background: url('/@/assets/images/vent/home/select-bg.png') no-repeat;
+      background: var(--image-select-bg) no-repeat;
       background-size: contain;
       padding: 0 0 0 40px;
       // padding: 0 0 0 180px;

src/components/vent/ventBox1.vue

@@ -22,14 +22,29 @@
 </script>
 
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .vent-box1-bg {
+      --image-box1-top: url('/@/assets/images/themify/deepblue/border/box1-top.png');
+      --image-box1-bottom: url('/@/assets/images/themify/deepblue/border/box1-bottom.png');
+      --container-color: #0e223b;
+      --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
+    }
+  }
+
   .vent-box1-bg {
+    --image-box1-top: url('/@/assets/images/vent/border/box1-top.png');
+    --image-box1-bottom: url('/@/assets/images/vent/border/box1-bottom.png');
+    --container-color: #00213236;
+    --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
     width: 100%;
     min-height: 80px;
     position: relative;
     .box1-top {
       width: 100%;
       height: 35px;
-      background: url('/@/assets/images/vent/border/box1-top.png') no-repeat;
+      background: var(--image-box1-top) no-repeat;
       background-size: 100% 100%;
       .title {
         width: 100%;
@@ -51,8 +66,9 @@
         padding: 10px;
         color: #fff;
         // background-color: #0097ff05;
-        background-color: #00213236;
+        background-color: var(--container-color);
         backdrop-filter: blur(5px);
+        border-radius: 0 0 20px 20px;
 
         &::before {
           content: '';
@@ -62,7 +78,7 @@
           left: 0;
           width: 1px;
           height: calc(100% - 10px);
-          background-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+          background-image: var(--container-image);
         }
         &::after {
           content: '';
@@ -72,14 +88,14 @@
           top: 5px;
           width: 1px;
           height: calc(100% - 10px);
-          background: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+          background: var(--container-image);
         }
       }
     }
     .box1-bottom {
       width: 100%;
       height: 35px;
-      background: url('/@/assets/images/vent/border/box1-bottom.png') no-repeat;
+      background: var(--image-box1-bottom) no-repeat;
       background-size: 100% 100%;
       position: absolute;
       bottom: 0px;

src/design/theme.less

@@ -80,6 +80,7 @@ html[data-theme='light'] {
 
 // 下面的代码负责将 themify 文件夹下声明的 css 变量赋给 less 变量
 @themify-text-primary: var(--themify-text-primary);
+@vent-base-light-bg: var(--vent-base-light-bg);
 
 // 下面的代码负责将主题相关的选择器、图片前缀等 less 变量声明
 @theme-dark: ~"html[data-theme='dark2']";

src/design/themify/dark.less

@@ -1,3 +1,4 @@
 html[data-theme='dark2'] {
     --themify-text-primary: #ddd;
+    --vent-base-light-bg: #60f4ff;
 }

src/design/themify/deepblue.less

@@ -1,3 +1,4 @@
 html[data-theme='deepblue'] {
     --themify-text-primary: #ddd;
+    --vent-base-light-bg: #60f4ff;
 }

src/design/themify/light.less

@@ -1,3 +1,4 @@
 html[data-theme='light'] {
     --themify-text-primary: #333;
+    --vent-base-light-bg: #60f4ff;
 }

src/design/themify/vent1.less

@@ -1,3 +1,4 @@
 html[data-theme='vent1'] {
     --themify-text-primary: #fff;
+    --vent-base-light-bg: #60f4ff;
 }

src/layouts/default/header/components/user-dropdown/ThemeSelect.vue

@@ -18,7 +18,7 @@
   const config = {
     maskClosable: false,
     canFullscreen: false,
-    width: '300px',
+    width: '320px',
     minHeight: 20,
     maxHeight: 20,
     showCancelBtn: false,

src/utils/ui.js

@@ -1,3 +1,5 @@
+import { ThemeEnum } from '../enums/appEnum';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 // 中间背景雨
 export function rainBg(className, bgClassName) {
   var c = document.querySelector(`.${className}`);
@@ -76,3 +78,23 @@ export function rainBg(className, bgClassName) {
 export const getAssetURL = (imagePath) => {
   return new URL(`../assets/images/${imagePath}`, import.meta.url).href;
 };
+
+export const getThemifyImagesURL = (imagePath) => {
+  const { getDarkMode } = useRootSetting();
+  switch (getDarkMode.value) {
+    case ThemeEnum.DEEPBLUE:
+      return new URL(`../assets/images/themify/deepblue/${imagePath}`, import.meta.url).href;
+
+    case ThemeEnum.LIGHT:
+      return new URL(`../assets/images/themify/light/${imagePath}`, import.meta.url).href;
+
+    case ThemeEnum.DARK:
+      return new URL(`../assets/images/themify/dark/${imagePath}`, import.meta.url).href;
+
+    case ThemeEnum.VENT1:
+      return new URL(`../assets/images/themify/vent1/${imagePath}`, import.meta.url).href;
+
+    default:
+      return new URL(`../assets/images/vent/${imagePath}`, import.meta.url).href;
+  }
+};

src/views/sys/login/Login.vue

@@ -87,31 +87,25 @@
 
   @{theme-deepblue} {
     .login-container {
-      background: #021632;
-      &::before {
-        background-image: none;
-      }
-    }
-
-    .top-header {
-      .top-bg {
-        background-image: url('/@/assets/images/themify/deepblue/login/top.png');
-      }
-      .login-icon {
-        background-image: url('/@/assets/images/themify/deepblue/login/icon.png');
-      }
-    }
-
-    .bottom {
-      background-image: url('/@/assets/images/themify/deepblue/login/down.png');
+      --image-top: url('/@/assets/images/themify/deepblue/login/top.png');
+      --image-icon: url('/@/assets/images/themify/deepblue/login/icon.png');
+      --image-down: url('/@/assets/images/themify/deepblue/login/down.png');
+      --image-bg: none;
+      --container-bg: #021632;
     }
   }
 
   .login-container {
+    --image-top: url('/@/assets/images/vent/login/top.png');
+    --image-icon: url('/@/assets/images/vent/login/icon.png');
+    --image-down: url('/@/assets/images/vent/login/down.png');
+    --image-bg: url('/@/assets/images/vent/login/bg.png');
+    --container-bg: linear-gradient(to bottom, #000c37, #001e63);
+    --login-bg: linear-gradient(to bottom, #000c3766, #001e6366);
     color: @themify-text-primary;
     width: 100vw;
     height: 100%;
-    background: linear-gradient(to bottom, #000c37, #001e63);
+    background: var(--container-bg);
     padding: 0 !important;
     position: relative;
     &::before {
@@ -121,7 +115,7 @@
       height: 100%;
       top: 0px;
       left: 0;
-      background-image: url('/@/assets/images/vent/login/bg.png');
+      background-image: var(--image-bg);
       background-size: cover;
     }
     .login-bg {
@@ -130,7 +124,7 @@
       height: 100%;
       top: 0;
       left: 0;
-      background: linear-gradient(to bottom, #000c3766, #001e6366);
+      background: var(--login-bg);
     }
     .top-header {
       width: 100%;
@@ -144,7 +138,7 @@
         width: 100%;
         height: 129px;
 
-        background-image: url('/@/assets/images/vent/login/top.png');
+        background-image: var(--image-top);
         background-size: 100% auto;
       }
       .login-icon {
@@ -152,7 +146,7 @@
         width: 237px;
         height: 274px;
         top: 10px;
-        background-image: url('/@/assets/images/vent/login/icon.png');
+        background-image: var(--image-icon);
       }
       .title {
         position: absolute;
@@ -172,7 +166,7 @@
       position: fixed;
       bottom: 0;
       left: 0;
-      background-image: url('/@/assets/images/vent/login/down.png');
+      background-image: var(--image-down);
       background-size: 100% auto;
     }
 

src/views/sys/login/LoginForm.vue

@@ -141,25 +141,19 @@
 
   @{theme-deepblue} {
     .login-box {
-      .input-box {
-        background: url('/@/assets/images/themify/deepblue/login/input-normal.png') !important;
-        &:focus {
-          background: url('/@/assets/images/themify/deepblue/login/input-down.png') !important;
-        }
-      }
-
-      .btn-box {
-        .btn {
-          background: url('/@/assets/images/themify/deepblue/login/btn-bg.png');
-          &:active {
-            background: url('/@/assets/images/themify/deepblue/login/btn-bg-hover.png');
-          }
-        }
-      }
+      --image-input-normal: url('/@/assets/images/themify/deepblue/login/input-normal.png');
+      --image-input-down: url('/@/assets/images/themify/deepblue/login/input-down.png');
+      --image-btn-bg: url('/@/assets/images/themify/deepblue/login/btn-bg.png');
+      --image-btn-bg-hover: url('/@/assets/images/themify/deepblue/login/btn-bg-hover.png');
     }
   }
 
   .login-box {
+    --image-input-normal: url('/@/assets/images/vent/login/input-normal.png');
+    --image-input-down: url('/@/assets/images/vent/login/input-down.png');
+    --image-btn-bg: url('/@/assets/images/vent/login/btn-bg.png');
+    --image-btn-bg-hover: url('/@/assets/images/vent/login/btn-bg-hover.png');
+
     position: relative;
     margin-top: 10px;
     :deep(.@{ventSpace}-form-item) {
@@ -206,7 +200,7 @@
       padding-left: 20px !important;
       background-color: transparent !important;
       background-size: 100% auto;
-      background: url('/@/assets/images/vent/login/input-normal.png') !important;
+      background: var(--image-input-normal) !important;
       &:focus,
       &:active {
         background: #ffffff00 !important;
@@ -215,7 +209,7 @@
         box-shadow: none !important;
       }
       &:focus {
-        background: url('/@/assets/images/vent/login/input-down.png') !important;
+        background: var(--image-input-down) !important;
       }
       :deep(.@{ventSpace}-input) {
         width: 100%;
@@ -251,10 +245,10 @@
         padding-top: 20px;
         width: 562px;
         height: 137px;
-        background: url('/@/assets/images/vent/login/btn-bg.png');
+        background: var(--image-btn-bg);
         background: 100% auto;
         &:active {
-          background: url('/@/assets/images/vent/login/btn-bg-hover.png');
+          background: var(--image-btn-bg-hover);
         }
       }
     }

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

@@ -128,11 +128,23 @@
 </script>
 
 <style scoped lang="less">
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .dane-bd {
+      --image-module-title: url('@/assets/images/home-container/configurable/firehome/module-title.png');
+    }
+  }
+
   .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');
     position: absolute;
     width: 100%;
     height: 100%;
-    background-image: url('@/assets/images/home-container/configurable/firehome/module-title.png');
+    background-image: var(--image-module-title);
     background-repeat: no-repeat;
     background-position: center top;
     background-size: 100% auto;
@@ -194,7 +206,7 @@
   }
 
   .dane-l {
-    background: url('@/assets/images/home-container/configurable/firehome/common-border.png') no-repeat;
+    background: var(--image-common-border) no-repeat;
     background-size: 100% auto;
   }
 
@@ -204,12 +216,12 @@
   }
 
   .dane-s {
-    background: url('@/assets/images/home-container/configurable/firehome/common-border2.png') no-repeat;
+    background: var(--image-common-border2) no-repeat;
     background-size: 100% auto;
   }
 
   .dane-w {
-    background-image: url('@/assets/images/home-container/configurable/firehome/module-title-long.png');
+    background-image: var(--image-module-title-long);
     background-size: 100% 37px;
   }
 

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

@@ -156,11 +156,23 @@
 </script>
 
 <style scoped lang="less">
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .dane-bd {
+      --image-module-title: url('@/assets/images/home-container/configurable/firehome/module-title.png');
+    }
+  }
+
   .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');
     position: absolute;
     width: 100%;
     height: 100%;
-    background-image: url('@/assets/images/home-container/configurable/firehome/module-title.png');
+    background-image: var(--image-module-title);
     background-repeat: no-repeat;
     background-position: center top;
     background-size: 100% auto;
@@ -222,7 +234,7 @@
   }
 
   .dane-l {
-    background: url('@/assets/images/home-container/configurable/firehome/common-border.png') no-repeat;
+    background: var(--image-common-border) no-repeat;
     background-size: 100% auto;
   }
 
@@ -232,12 +244,12 @@
   }
 
   .dane-s {
-    background: url('@/assets/images/home-container/configurable/firehome/common-border2.png') no-repeat;
+    background: var(--image-common-border2) no-repeat;
     background-size: 100% auto;
   }
 
   .dane-w {
-    background-image: url('@/assets/images/home-container/configurable/firehome/module-title-long.png');
+    background-image: var(--image-module-title-long);
     background-size: 100% 37px;
   }
 

src/views/vent/home/configurable/components/enhanced/moduleBottom.vue

@@ -23,7 +23,17 @@
   }
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .module-bottom {
+      --image-model_bottom_title_bg_expand: url('@/assets/images/home-container/configurable/model_bottom_title_bg_expand.png');
+    }
+  }
+
   .module-bottom {
+    --image-model_bottom_title_bg_expand: url('@/assets/images/home-container/configurable/model_bottom_title_bg_expand.png');
+    --image-expand: url('@/assets/images/home-container/configurable/expand.svg');
     --bg-height: 33px;
     color: #fff;
     box-sizing: border-box;
@@ -38,7 +48,7 @@
       width: 100%;
       height: var(--bg-height);
       line-height: var(--bg-height);
-      background: url('@/assets/images/home-container/configurable/model_bottom_title_bg_expand.png') no-repeat;
+      background: var(--image-model_bottom_title_bg_expand) no-repeat;
       background-size: 100% 100%;
       position: relative;
       text-align: left;
@@ -59,7 +69,7 @@
     .action-btn {
       width: 18px;
       height: 18px;
-      background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
+      background: var(--image-expand) no-repeat center;
       position: absolute;
       left: 0;
       top: 0;

src/views/vent/home/configurable/components/enhanced/moduleLeft.vue

@@ -23,7 +23,18 @@
   }
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .module-left {
+      --image-model_left_title_bg_expand: url('@/assets/images/home-container/configurable/model_left_title_bg_expand.png');
+    }
+  }
+
   .module-left {
+    --image-model_left_title_bg_expand: url('@/assets/images/home-container/configurable/model_left_title_bg_expand.png');
+    --image-model_left_title_bg: url('@/assets/images/home-container/configurable/model_left_title_bg.png');
+    --image-expand: url('@/assets/images/home-container/configurable/expand.svg');
     --bg-height: 33px;
     color: #fff;
     box-sizing: border-box;
@@ -38,7 +49,7 @@
       width: 100%;
       height: var(--bg-height);
       line-height: var(--bg-height);
-      background: url('@/assets/images/home-container/configurable/model_left_title_bg_expand.png') no-repeat;
+      background: var(--image-model_left_title_bg_expand) no-repeat;
       background-size: 100% 100%;
       position: relative;
       text-align: right;
@@ -49,7 +60,7 @@
       width: 50%;
       height: var(--bg-height);
       line-height: var(--bg-height);
-      background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
+      background: var(--image-model_left_title_bg) no-repeat;
       background-size: 100% 100%;
       position: relative;
       text-align: right;
@@ -60,7 +71,7 @@
     .action-btn {
       width: 18px;
       height: 18px;
-      background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
+      background: var(--image-expand) no-repeat center;
       position: absolute;
       right: 0;
       top: 0;

src/views/vent/home/configurable/components/enhanced/moduleRight.vue

@@ -23,7 +23,18 @@
   }
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .module-right {
+      --image-model_right_title_bg_expand: url('@/assets/images/home-container/configurable/model_right_title_bg_expand.png');
+    }
+  }
+
   .module-right {
+    --image-model_right_title_bg_expand: url('@/assets/images/home-container/configurable/model_right_title_bg_expand.png');
+    --image-model_right_title_bg: url('@/assets/images/home-container/configurable/model_right_title_bg.png');
+    --image-expand: url('@/assets/images/home-container/configurable/expand.svg');
     --bg-height: 33px;
     color: #fff;
     box-sizing: border-box;
@@ -38,7 +49,7 @@
       width: 100%;
       height: var(--bg-height);
       line-height: var(--bg-height);
-      background: url('@/assets/images/home-container/configurable/model_right_title_bg_expand.png') no-repeat;
+      background: var(--image-model_right_title_bg_expand) no-repeat;
       background-size: 100% 100%;
       position: relative;
       text-align: left;
@@ -49,7 +60,7 @@
       width: 50%;
       height: var(--bg-height);
       line-height: var(--bg-height);
-      background: url('@/assets/images/home-container/configurable/model_right_title_bg.png') no-repeat;
+      background: var(--image-model_right_title_bg) no-repeat;
       background-size: 100% 100%;
       position: relative;
       text-align: left;
@@ -61,7 +72,7 @@
     .action-btn {
       width: 18px;
       height: 18px;
-      background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
+      background: var(--image-expand) no-repeat center;
       position: absolute;
       left: 0;
       top: 0;

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

@@ -66,7 +66,6 @@
   watch(
     () => props.data,
     (d) => {
-      console.log('debug changed');
       init(d);
       selectHandler({ key: options.value[0]?.value });
     },

src/views/vent/home/configurable/components/original/moduleBottom.vue

@@ -21,7 +21,16 @@
   }
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .module-left {
+      --image-model_original_title_bg_expand: url('@/assets/images/home-container/configurable/model_original_title_bg_expand.png');
+    }
+  }
+
   .module-content {
+    --image-model_original_title_bg_expand: url('@/assets/images/home-container/configurable/model_original_title_bg_expand.png');
     --bg-height: 33px;
     color: #fff;
     box-sizing: border-box;
@@ -33,7 +42,7 @@
   .module-content__title__expand {
     width: 100%;
     height: var(--bg-height);
-    background: url('@/assets/images/home-container/configurable/model_original_title_bg_expand.png') no-repeat;
+    background: var(--image-model_original_title_bg_expand) no-repeat;
     background-size: 100% 100%;
     position: relative;
     text-align: center;

src/views/vent/home/configurable/components/original/moduleLeft.vue

@@ -21,7 +21,16 @@
   }
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .module-left {
+      --image-model_original_title_bg: url('@/assets/images/home-container/configurable/model_original_title_bg.png');
+    }
+  }
+
   .module-content {
+    --image-model_original_title_bg: url('@/assets/images/home-container/configurable/model_original_title_bg.png');
     --bg-height: 33px;
     color: #fff;
     box-sizing: border-box;
@@ -33,7 +42,7 @@
   .module-content__title__expand {
     width: 100%;
     height: var(--bg-height);
-    background: url('@/assets/images/home-container/configurable/model_original_title_bg.png') no-repeat;
+    background: var(--image-model_original_title_bg) no-repeat;
     background-size: 100% 100%;
     position: relative;
     text-align: center;

src/views/vent/home/configurable/dust.vue

@@ -100,12 +100,21 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
   @font-face {
     font-family: 'douyuFont';
     src: url('../../../../assets/font/douyuFont.otf');
   }
 
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
+    }
+  }
+
   .company-home {
+    --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
     width: 100%;
     height: 100%;
     color: @white;
@@ -115,7 +124,7 @@
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('@/assets/images/vent/home/modal-top.png') no-repeat center;
+      background: var(--image-modal-top) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {

src/views/vent/home/configurable/dustBD.vue

@@ -108,22 +108,37 @@
   }
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
   @font-face {
     font-family: 'douyuFont';
     src: url('../../../../assets/font/douyuFont.otf');
   }
 
+  @{theme-deepblue} {
+    .company-home {
+      --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
+    }
+  }
+
   .company-home {
+    --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
+    --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
+    --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
+    --image-common-border2: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
+    --image-img-5: url(/@/assets/images/home-container/configurable/firehome/img-5.png);
+    --image-ggxt: url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
+    --image-zjxt: url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
     width: 100%;
     height: 100%;
     color: @white;
     position: relative;
-    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
+    background: var(--image-bg) no-repeat center;
 
     .top-bg {
       width: 100%;
       height: 86px;
-      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
+      background: var(--image-fire-title) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -186,7 +201,7 @@
     top: 50px;
     left: 10px;
     width: 440px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
+    background-image: var(--image-qkjaq);
     background-color: #000723;
     background-repeat: no-repeat;
     background-position: center;
@@ -247,7 +262,7 @@
     right: 0;
     top: 50px;
     width: 450px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
+    background-image: var(--image-common-border2);
     background-color: #000723;
     background-repeat: no-repeat;
     background-position: center;
@@ -261,8 +276,7 @@
       height: 70%;
       font-size: 20px;
       font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
-        url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
+      background-image: var(--image-img-5), var(--image-ggxt);
       background-size:
         auto 100%,
         auto auto;
@@ -280,8 +294,7 @@
       height: 70%;
       font-size: 20px;
       font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
-        url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
+      background-image: var(--image-img-5), var(--image-zjxt);
       background-size:
         auto 100%,
         auto auto;

src/views/vent/home/configurable/fire.vue

@@ -100,12 +100,21 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
   @font-face {
     font-family: 'douyuFont';
     src: url('../../../../assets/font/douyuFont.otf');
   }
 
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
+    }
+  }
+
   .company-home {
+    --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
     width: 100%;
     height: 100%;
     color: @white;
@@ -115,7 +124,7 @@
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('@/assets/images/vent/home/modal-top.png') no-repeat center;
+      background: var(--image-modal-top) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {

src/views/vent/home/configurable/fireBD.vue

@@ -134,22 +134,36 @@
   }
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
   @font-face {
     font-family: 'douyuFont';
     src: url('../../../../assets/font/douyuFont.otf');
   }
 
+  @{theme-deepblue} {
+    .company-home {
+      --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
+    }
+  }
+
   .company-home {
+    --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
+    --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
+    --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
+    --image-common-border2: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
+    --image-znzjxt: url(/@/assets/images/home-container/configurable/firehome/znzjxt.png);
+    --image-znzdxt: url(/@/assets/images/home-container/configurable/firehome/znzdxt.png);
     width: 100%;
     height: 100%;
     color: @white;
     position: relative;
-    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
+    background: var(--image-bg) no-repeat center;
 
     .top-bg {
       width: 100%;
       height: 86px;
-      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
+      background: var(--image-fire-title) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -212,7 +226,7 @@
     top: 40px;
     left: 10px;
     width: 440px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
+    background-image: var(--image-qkjaq);
     background-color: #000723;
     background-repeat: no-repeat;
     background-position: center;
@@ -274,7 +288,7 @@
     right: 10px;
     top: 50px;
     width: 440px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
+    background-image: var(--image-common-border2);
     background-color: #000723;
     background-repeat: no-repeat;
     background-position: center;
@@ -282,14 +296,13 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
-    z-index: 1;
 
     .tcontent-l {
       flex: 1;
       height: 100%;
       font-size: 16px;
       font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/znzjxt.png);
+      background-image: var(--image-znzjxt);
       background-size: auto 100%;
       background-repeat: no-repeat;
       background-position: center;
@@ -301,7 +314,7 @@
       height: 100%;
       font-size: 16px;
       font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/znzdxt.png);
+      background-image: var(--image-znzdxt);
       background-size: auto 100%;
       background-repeat: no-repeat;
       background-position: center;

src/views/vent/home/configurable/fireWZ.vue

@@ -96,22 +96,37 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
   @font-face {
     font-family: 'douyuFont';
     src: url('../../../../assets/font/douyuFont.otf');
   }
 
+  @{theme-deepblue} {
+    .company-home {
+      --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
+    }
+  }
+
   .company-home {
+    --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
+    --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
+    --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
+    --image-common-border2: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
+    --image-img-5: url(/@/assets/images/home-container/configurable/firehome/img-5.png);
+    --image-ggxt: url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
+    --image-zjxt: url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
     width: 100%;
     height: 100%;
     color: @white;
     position: relative;
-    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
+    background: var(--image-bg) no-repeat center;
 
     .top-bg {
       width: 100%;
       height: 86px;
-      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
+      background: var(--image-fire-title) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -173,7 +188,7 @@
     height: 115px;
     top: 50px;
     width: 450px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
+    background-image: var(--image-qkjaq);
     background-color: #000723;
     background-repeat: no-repeat;
     background-position: center;
@@ -234,7 +249,7 @@
     right: 0;
     top: 50px;
     width: 450px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
+    background-image: var(--image-common-border2);
     background-color: #000723;
     background-repeat: no-repeat;
     background-position: center;
@@ -248,8 +263,7 @@
       height: 70%;
       font-size: 20px;
       font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
-        url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
+      background-image: var(--image-img-5), var(--image-ggxt);
       background-size:
         auto 100%,
         auto auto;
@@ -267,8 +281,7 @@
       height: 70%;
       font-size: 20px;
       font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
-        url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
+      background-image: var(--image-img-5), var(--image-zjxt);
       background-size:
         auto 100%,
         auto auto;

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

@@ -98,12 +98,21 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
+
   @font-face {
     font-family: 'douyuFont';
     src: url('../../../../assets/font/douyuFont.otf');
   }
 
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
+    }
+  }
+
   .company-home {
+    --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
     width: 100%;
     height: 100%;
     color: @white;
@@ -113,7 +122,7 @@
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('@/assets/images/vent/home/modal-top.png') no-repeat center;
+      background: var(--image-modal-top) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {

src/views/vent/monitorManager/alarmMonitor/alarm.data.ts

@@ -2,7 +2,7 @@ import { reactive } from 'vue';
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import echarts from '/@/utils/lib/echarts';
 import type { EChartsOption } from 'echarts';
-import { getAssetURL } from '/@/utils/ui';
+import { getThemifyImagesURL } from '/@/utils/ui';
 import { render } from '/@/utils/common/renderUtils';
 export const formConfig = {
   labelAlign: 'left',
@@ -117,180 +117,180 @@ export const levelHisColumns: BasicColumn[] = [
 
 export const iconsMonitor = reactive({
   fanmain: {
-    url: getAssetURL('vent/alarm-icons/zhushan.png'),
+    url: getThemifyImagesURL('alarm-icons/zhushan.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   fanlocal: {
-    url: getAssetURL('vent/alarm-icons/js.png'),
+    url: getThemifyImagesURL('alarm-icons/js.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   fanlocaldp: {
-    url: getAssetURL('vent/alarm-icons/js.png'),
+    url: getThemifyImagesURL('alarm-icons/js.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   gate: {
-    url: getAssetURL('vent/alarm-icons/fm.png'),
+    url: getThemifyImagesURL('alarm-icons/fm.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   window: {
-    url: getAssetURL('vent/alarm-icons/fc.png'),
+    url: getThemifyImagesURL('alarm-icons/fc.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   windrect: {
-    url: getAssetURL('vent/alarm-icons/cf.png'),
+    url: getThemifyImagesURL('alarm-icons/cf.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   forcFan: {
-    url: getAssetURL('vent/alarm-icons/yafeng.png'),
+    url: getThemifyImagesURL('alarm-icons/yafeng.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   spray: {
-    url: getAssetURL('vent/alarm-icons/penlin.png'),
+    url: getThemifyImagesURL('alarm-icons/penlin.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   dustdev: {
-    url: getAssetURL('vent/alarm-icons/penfen.png'),
+    url: getThemifyImagesURL('alarm-icons/penfen.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   nitrogen: {
-    url: getAssetURL('vent/alarm-icons/zhudan.png'),
+    url: getThemifyImagesURL('alarm-icons/zhudan.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   pulping: {
-    url: getAssetURL('vent/alarm-icons/zhujiang.png'),
+    url: getThemifyImagesURL('alarm-icons/zhujiang.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   atomizing: {
-    url: getAssetURL('vent/alarm-icons/pw.png'),
+    url: getThemifyImagesURL('alarm-icons/pw.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   dustsensor: {
-    url: getAssetURL('vent/alarm-icons/ccq.png'),
+    url: getThemifyImagesURL('alarm-icons/ccq.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   gas: {
-    url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
+    url: getThemifyImagesURL('alarm-icons/wasichoucaig.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   pump: {
-    url: getAssetURL('vent/alarm-icons/wasibeng.png'),
+    url: getThemifyImagesURL('alarm-icons/wasibeng.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
   modelsensor: {
-    url: getAssetURL('vent/alarm-icons/cf.png'),
+    url: getThemifyImagesURL('alarm-icons/cf.png'),
     // level: 100,
     text: '',
-    allText:'总数',
-    warnText:'报警数',
-    closeText:'断开数',
-    allCount:0,
-    warnCount:0,
-    closeCount:0,
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
   },
 });
 
@@ -713,4 +713,3 @@ export const fireMonitor = [
   //   value: 0,
   // },
 ];
-