[Style 0000] 优化ventbox以及可配置首页普通类box的样式

src/components/vent/ventBox1.vue

@@ -38,12 +38,13 @@
       border: 1px solid #3a4b5f;
       border-radius: 10px;
       background: var(--container-color) no-repeat;
-      padding-top: 10px;
+      padding-top: 5px;
       .box1-top {
         height: 35px;
         background: var(--image-box1-top) no-repeat;
         background-size: 94% 25px;
         background-position: center center;
+        margin-bottom: 5px;
         .title {
           height: 100%;
           padding-left: 8%;

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

@@ -1,6 +1,6 @@
 <template>
   <!-- 常用模块 -->
-  <ventBox1 class="module-common" :style="style">
+  <ventBox1 :class="getModuleClass(showStyle)" :style="style">
     <template v-if="moduleName" #title>
       <div :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">{{ moduleName }}</div>
     </template>
@@ -45,13 +45,14 @@
     return size + position + 'position: absolute;';
   });
 
-  // 根据配置里的定位判断应该使用哪个module组件
-  // function getModuleComponent(position) {
-  //   if (position === '中下') {
-  //     return ModuleBottom;
-  //   }
-  //   return ModuleLeft;
-  // }
+  // 根据配置里的定位判断应该使用哪个class
+  function getModuleClass({ size, position }) {
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return 'module-common module-common-longer';
+    }
+    return 'module-common';
+  }
 
   function redirectTo() {
     const { to } = props.moduleData;
@@ -59,10 +60,13 @@
     openWindow(to);
   }
 </script>
-<style scoped>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
   .module-common .box1-center {
     height: calc(100% - 70px);
   }
+
   :deep(.box1-center) {
     height: calc(100% - 70px);
   }
@@ -71,4 +75,24 @@
     padding: 0 !important;
     width: 100% !important;
   }
+  @{theme-deepblue} {
+    .module-common-longer {
+      :deep(.box1-top) {
+        --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
+      }
+      :deep(.box1-bottom) {
+        --image-box1-bottom: none;
+      }
+    }
+  }
+  .module-common-longer {
+    :deep(.box1-top) {
+      --image-box1-top: url('/@/assets/images/vent/box-top-bg.png');
+      background-image: var(--image-box1-top);
+    }
+    :deep(.box1-bottom) {
+      --image-box1-bottom: url('/@/assets/images/vent/box-bottom-bg.png');
+      background-image: var(--image-box1-bottom);
+    }
+  }
 </style>