style: 大屏页面样式根据意见修改

data-room-ui/example/main.js

@@ -48,6 +48,8 @@ registerConfig(
       '--bs-el-title': '#ffffff', // 标题字体颜色
       '--bs-el-text': '#ffffff', // 一般字体颜色
       '--bs-el-color-primary': '#409EFF', // elment-ui主题色，激活
+      // 主题色激活
+      '--bs-el-color-primary-active': '64, 158, 255', // => rgba(64, 158, 255, 1) = #409EFF
       '--bs-el-border': 'transparent' // 边框颜色
     },
     customPlots: [],

data-room-ui/packages/BasicComponents/Tables/index.vue

@@ -140,38 +140,38 @@ export default {
         this.headerCellStyleToObj()
         this.cellStyleToObj()
       }
-      if (config.customize.stripe) {
-        const trs = document
-          .getElementById(this.config.code)
-          ?.querySelectorAll('tr.el-table__row--striped')
-        if (trs) {
-          trs.forEach(tr => {
-            tr.style.opacity = '0.9'
-          // 透明度
-          // const overlay = document.createElement("div");
-          // overlay.classList.add("overlay");
-          // // 将蒙版添加到容器中
-          // tr.appendChild(overlay);
-          })
-        }
-      } else {
-        const trs = document
-          .getElementById(config.code)
-          ?.querySelectorAll('tr.el-table__row--striped')
-        if (trs) {
-          trs.forEach(tr => {
-            tr.style.opacity = '1'
-          // 透明度
-          // const overlay = document.createElement("div");
-          // overlay.classList.add("overlay");
-          // // 将蒙版添加到容器中
-          // tr.appendChild(overlay);
-          })
-        }
-      // document.querySelectorAll(".overlay").forEach(overlay => {
-      //   overlay.remove();
-      // });
-      }
+      // if (config.customize.stripe) {
+      //   const trs = document
+      //     .getElementById(this.config.code)
+      //     ?.querySelectorAll('tr.el-table__row--striped')
+      //   if (trs) {
+      //     trs.forEach(tr => {
+      //       tr.style.opacity = '0.9'
+      //     // 透明度
+      //     // const overlay = document.createElement("div");
+      //     // overlay.classList.add("overlay");
+      //     // // 将蒙版添加到容器中
+      //     // tr.appendChild(overlay);
+      //     })
+      //   }
+      // } else {
+      //   const trs = document
+      //     .getElementById(config.code)
+      //     ?.querySelectorAll('tr.el-table__row--striped')
+      //   if (trs) {
+      //     trs.forEach(tr => {
+      //       tr.style.opacity = '1'
+      //     // 透明度
+      //     // const overlay = document.createElement("div");
+      //     // overlay.classList.add("overlay");
+      //     // // 将蒙版添加到容器中
+      //     // tr.appendChild(overlay);
+      //     })
+      //   }
+      // // document.querySelectorAll(".overlay").forEach(overlay => {
+      // //   overlay.remove();
+      // // });
+      // }
       // this.chartInit();
       if (config.customize.evenRowBackgroundColor && !config.customize.oddRowBackgroundColor) {
         config.customize.oddRowBackgroundColor = config.customize.bodyBackgroundColor

data-room-ui/packages/BasicComponents/Tables/setting.vue

@@ -9,7 +9,10 @@
       class="setting-body"
     >
       <SettingTitle>基础</SettingTitle>
-      <el-form-item class="lc-field-body" label="名称">
+      <el-form-item
+        class="lc-field-body"
+        label="名称"
+      >
         <el-input
           v-model="config.title"
           clearable
@@ -86,7 +89,6 @@
           />
         </el-form-item>
       </div>
-
     </el-form>
   </div>
 </template>

data-room-ui/packages/BigScreenComponentMag/SideMenu.vue

@@ -52,7 +52,8 @@ export default {
   .side-catalog-wrap {
     .component-item-box {
       width: 100%;
-      padding: 8px 16px;
+      padding: 0px 16px;
+      line-height: 36px;
       display: flex;
       justify-content: space-between;
 
@@ -62,7 +63,7 @@ export default {
     }
   }
   .side-catalog-wrap{
-    padding-top: 16px;
+    // padding-top: 16px;
     width: 220px;
     height: 100%;
     box-sizing: border-box;
@@ -76,7 +77,8 @@ export default {
       }
       .side-catalog-item{
         width: 100%;
-        padding: 8px 16px;
+        padding: 0px 16px;
+        line-height: 36px;
         display: flex;
         justify-content: space-between;
         &:hover{
@@ -105,9 +107,16 @@ export default {
       }
       /*菜单激活时的样式*/
       .active-catalog{
-        background-image: linear-gradient(to right , var(--bs-el-color-primary), var(--bs-background-2));
-        background-repeat: round;
+        background-color: rgba(var(--bs-el-color-primary-active), 0.4);
         color: var(--bs-el-text);
+        &::after{
+          content: '';
+          position: absolute;
+          left: 0;
+          width: 4px;
+          height: 36px;
+          background-color: var(--bs-el-color-primary);
+        }
       }
     }
     .add-catalog-box{

data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue

@@ -468,9 +468,10 @@ export default {
   .big-screen-list-wrap {
     position: relative;
     height: 100%;
+    margin:0 16px;
     padding: 16px;
     color: #9ea9b2;
-    background-color: var(--bs-background-1) !important;
+    background-color: var(--bs-background-2) !important;
 
     .top-search-wrap {
       display: flex;
@@ -482,14 +483,14 @@ export default {
         width: 200px;
         margin-right: 20px;
         /deep/.el-input__inner {
-          background-color: #232832 !important;
+          background-color: var(--bs-background-1) !important;
         }
       }
 
       .el-select {
         margin-right: 20px;
         /deep/.el-input__inner {
-          background-color: #232832 !important;
+          background-color: var(--bs-background-1) !important;
         }
       }
     }
@@ -504,14 +505,14 @@ export default {
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       grid-gap: 15px;
 
-      /deep/ .el-loading-mask {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: calc(100vh - 260px) !important;
-        z-index: 999;
-        top: 50px;
-      }
+      // /deep/ .el-loading-mask {
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: center;
+      //   height: calc(100vh - 260px) !important;
+      //   z-index: 999;
+      //   top: 50px;
+      // }
       .big-screen-card-wrap {
         position: relative;
         height: 230px;
@@ -551,7 +552,7 @@ export default {
           background-color: var(--bs-background-2);
           box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
           color: var(--bs-el-title);
-          border: 1px solid var(--bs-background-2);
+          border: 1px solid var(--bs-background-1);
           &:hover {
             color: var(--bs-el-text);
             border: 1px solid var(--bs-el-color-primary);
@@ -639,8 +640,8 @@ export default {
       align-items: center;
       justify-content: flex-end;
       width: 100%;
-      margin-top: 20px;
-      padding: 0 20px;
+      margin-top: 16px;
+      padding: 0 16px;
     }
   }
   .bs-pagination {

data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue

@@ -218,9 +218,10 @@ export default {
 .big-screen-list-wrap {
   position: relative;
   height: 100%;
+  margin:0 16px;
   padding: 16px;
   color: #9ea9b2;
-  background-color: var(--bs-background-1) !important;
+  background-color: var(--bs-background-2) !important;
 
   .top-search-wrap {
     display: flex;
@@ -232,14 +233,15 @@ export default {
       width: 200px;
       margin-right: 20px;
       /deep/.el-input__inner {
-        background-color: #232832 !important;
+        background-color: var(--bs-background-1) !important;
       }
     }
 
     .el-select {
       margin-right: 20px;
       /deep/.el-input__inner {
-        background-color: #232832 !important;
+        background: var(--bs-background-1) !important;
+        background-color: var(--bs-background-1) !important;
       }
     }
   }
@@ -254,14 +256,14 @@ export default {
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 15px;
 
-    /deep/ .el-loading-mask {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: calc(100vh - 260px) !important;
-      z-index: 999;
-      top: 50px;
-    }
+    // /deep/ .el-loading-mask {
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: center;
+    //   height: calc(100vh - 260px) !important;
+    //   z-index: 999;
+    //   top: 50px;
+    // }
 
     .big-screen-card-wrap {
       position: relative;
@@ -390,8 +392,8 @@ export default {
     align-items: center;
     justify-content: flex-end;
     width: 100%;
-    margin-top: 20px;
-    padding: 0 20px;
+    margin-top: 16px;
+    padding: 0 16px;
   }
 }
 .bs-pagination {

data-room-ui/packages/BigScreenList/index.vue

@@ -3,7 +3,7 @@
     <div class="top-search-wrap">
       <el-input
         v-model="searchKey"
-        class="bs-el-input"
+        class="bs-el-input bs-el-input-search"
         :placeholder="type === 'bigScreenCatalog' ?'请输入大屏名称':'请输入组件名称'"
         prefix-icon="el-icon-search"
         clearable
@@ -102,8 +102,14 @@
               >
                 加载中···
               </div>
-              <div slot="error" class="image-slot" style="font-size: 20px">
-                <div class="error-img-text"> {{ screen.name }}</div>
+              <div
+                slot="error"
+                class="image-slot"
+                style="font-size: 20px"
+              >
+                <div class="error-img-text">
+                  {{ screen.name }}
+                </div>
               </div>
             </el-image>
           </div>
@@ -309,21 +315,22 @@ export default {
 .big-screen-list-wrap {
   position: relative;
   height: 100%;
+  margin:0 16px;
   padding: 16px;
   color: #9ea9b2;
-  background-color: var(--bs-background-1) !important;
+  background-color: var(--bs-background-2) !important;
 
   .top-search-wrap {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    margin-bottom: 12px;
+    margin-bottom: 16px;
 
     .el-input {
       width: 200px;
       margin-right: 20px;
       /deep/.el-input__inner {
-        background-color: #232832 !important;
+        background-color: var(--bs-background-1) !important;
       }
     }
   }
@@ -333,19 +340,19 @@ export default {
     overflow: auto;
     // 间隙自适应
     justify-content: space-around;
-    max-height: calc(100vh - 270px);
+    max-height: calc(100vh - 304px);
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 15px;
 
-    /deep/ .el-loading-mask {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: calc(100vh - 260px) !important;
-      z-index: 999;
-      top: 50px;
-    }
+    // /deep/ .el-loading-mask {
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: center;
+    //   height: calc(100vh - 260px) !important;
+    //   z-index: 999;
+    //   top: 50px;
+    // }
 
     .big-screen-card-wrap {
       position: relative;
@@ -419,7 +426,7 @@ export default {
         background-color: var(--bs-background-2);
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
         color: var(--bs-el-title);
-        border: 1px solid var(--bs-background-2);
+        border: 1px solid var(--bs-background-1);
         &:hover {
           color: var(--bs-el-text);
           border: 1px solid var(--bs-el-color-primary);
@@ -510,14 +517,15 @@ export default {
   }
 
   .footer-pagination-wrap {
-    position: absolute;
-    bottom: 10px;
+    // position: absolute;
+    bottom: 16px;
+    right: auto;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     width: 100%;
-    margin-top: 20px;
-    padding: 0 20px;
+    margin-top: 16px;
+    // padding: 0 16px;
   }
 }
 .bs-pagination {

data-room-ui/packages/BigScreenMag/SideMenu.vue

@@ -252,7 +252,7 @@ export default {
 <style lang="scss" scoped>
   @import '~packages/assets/style/bsTheme.scss';
   .side-catalog-wrap{
-    padding-top: 16px;
+    // padding-top: 16px;
     width: 220px;
     height: 100%;
     box-sizing: border-box;
@@ -266,7 +266,8 @@ export default {
       }
       .side-catalog-item{
         width: 100%;
-        padding: 8px 16px;
+        padding: 0px 16px;
+        line-height: 36px;
         display: flex;
         justify-content: space-between;
         &:hover{
@@ -295,9 +296,16 @@ export default {
       }
       /*菜单激活时的样式*/
       .active-catalog{
-        background-image: linear-gradient(to right , var(--bs-el-color-primary), var(--bs-background-2));
-        background-repeat: round;
+        background-color: rgba(var(--bs-el-color-primary-active), 0.4);
         color: var(--bs-el-text);
+        &::after{
+          content: '';
+          position: absolute;
+          left: 0;
+          width: 4px;
+          height: 36px;
+          background-color: var(--bs-el-color-primary);
+        }
       }
     }
     .add-catalog-box{

data-room-ui/packages/ComponentList/index.vue

@@ -425,8 +425,9 @@ export default {
   position: relative;
   height: 100%;
   padding: 16px;
+  margin:0 16px;
   color: #9ea9b2;
-  background-color: var(--bs-background-1) !important;
+  background-color: var(--bs-background-2) !important;
 
   .top-search-wrap {
     display: flex;
@@ -438,14 +439,14 @@ export default {
       width: 200px;
       margin-right: 20px;
       /deep/.el-input__inner {
-        background-color: #232832 !important;
+        background-color: var(--bs-background-1) !important;
       }
     }
 
     .el-select {
       margin-right: 20px;
       /deep/.el-input__inner {
-        background-color: #232832 !important;
+        background-color: var(--bs-background-1) !important;
       }
     }
   }
@@ -455,19 +456,19 @@ export default {
     overflow: auto;
     // 间隙自适应
     justify-content: space-around;
-    max-height: calc(100vh - 270px);
+    max-height: calc(100vh - 304px);
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 15px;
 
-    /deep/ .el-loading-mask {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: calc(100vh - 260px) !important;
-      z-index: 999;
-      top: 50px;
-    }
+    // /deep/ .el-loading-mask {
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: center;
+    //   height: calc(100vh - 260px) !important;
+    //   z-index: 999;
+    //   top: 50px;
+    // }
 
     .big-screen-card-wrap {
       position: relative;
@@ -541,7 +542,7 @@ export default {
         background-color: var(--bs-background-2);
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
         color: var(--bs-el-title);
-        border: 1px solid var(--bs-background-2);
+        border: 1px solid var(--bs-background-1);
         &:hover {
           color: var(--bs-el-text);
           border: 1px solid var(--bs-el-color-primary);
@@ -625,14 +626,15 @@ export default {
   }
 
   .footer-pagination-wrap {
-    position: absolute;
-    bottom: 10px;
+    // position: absolute;
+    // bottom: 16px;
+    // right: 16px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     width: 100%;
-    margin-top: 20px;
-    padding: 0 20px;
+    margin-top: 16px;
+    // padding: 0 16px;
   }
   .error-img-text{
     overflow:hidden;

data-room-ui/packages/Layout/BigScreenHomeLayout/NavTop.vue

@@ -11,7 +11,7 @@
         @click="toggleNav(nav)"
       >
         <span class="nav-icon">
-          <i :class="['iconfont-bigscreen', nav.icon]" />
+          <!-- <i :class="['iconfont-bigscreen', nav.icon]" /> -->
         </span>
         {{ nav.name }}
       </a>
@@ -73,8 +73,8 @@ export default {
 
   .nav-span {
     position: relative;
-    top: 3px;
-    background-image: url('./images/line.png');
+    top: 1px;
+    // background-image: url('./images/line.png');
     background-repeat: repeat-x;
     background-position: 0 34px;
 
@@ -103,10 +103,20 @@ export default {
     }
 
     &.nav-active {
-      background-image: url('./images/tab.png');
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      background-position: center bottom;
+      background-color: var(--bs-background-1);
+      &:after{
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 4px;
+        background-color: var(--bs-el-color-primary);
+      }
+      // background-image: url('./images/tab.png');
+      // background-size: 100% 100%;
+      // background-repeat: no-repeat;
+      // background-position: center bottom;
       /* border-bottom: 1px solid var(--bs-background-1); */
       /* background-color: var(--bs-background-1) */
     }

data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue

@@ -146,6 +146,7 @@ export default {
     position: absolute;
     top: 150px;
     overflow: hidden;
+    padding: 16px 0;
     width: 100%;
     height: calc(100vh - 150px);
     background-color: var(--bs-background-1);

data-room-ui/packages/SourceList/index.vue

@@ -216,8 +216,6 @@ export default {
     this.getDataList()
   },
   methods: {
-    uploadError (err, file, fileList) {
-    },
     uploadSuccess (response, file, fileList) {
       if (response.code === 200) {
         this.$message({
@@ -311,7 +309,8 @@ export default {
   height: 100%;
   padding: 16px;
   color: #9ea9b2;
-  background-color: var(--bs-background-1) !important;
+  margin:0 16px;
+  background-color: var(--bs-background-2) !important;
 
   .top-search-wrap {
     display: flex;
@@ -323,14 +322,14 @@ export default {
       width: 200px;
       margin-right: 20px;
       /deep/.el-input__inner {
-        background-color: #232832 !important;
+        background-color: var(--bs-background-1) !important;
       }
     }
 
     .el-select {
       margin-right: 20px;
       /deep/.el-input__inner {
-        background-color: #232832 !important;
+        background-color: var(--bs-background-1) !important;
       }
     }
   }
@@ -340,19 +339,19 @@ export default {
     overflow: auto;
     // 间隙自适应
     justify-content: space-around;
-    max-height: calc(100vh - 270px);
+    max-height: calc(100vh - 304px);
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 15px;
 
-    /deep/ .el-loading-mask {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: calc(100vh - 260px) !important;
-      z-index: 999;
-      top: 50px;
-    }
+    // /deep/ .el-loading-mask {
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: center;
+    //   height: calc(100vh - 260px) !important;
+    //   z-index: 999;
+    //   top: 50px;
+    // }
 
     .big-screen-card-wrap {
       position: relative;
@@ -426,7 +425,7 @@ export default {
         background-color: var(--bs-background-2);
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
         color: var(--bs-el-title);
-        border: 1px solid var(--bs-background-2);
+        border: 1px solid var(--bs-background-1);
         &:hover {
           color: var(--bs-el-text);
           border: 1px solid var(--bs-el-color-primary);
@@ -510,14 +509,14 @@ export default {
   }
 
   .footer-pagination-wrap {
-    position: absolute;
-    bottom: 10px;
+    // position: absolute;
+    // bottom: 10px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     width: 100%;
-    margin-top: 20px;
-    padding: 0 20px;
+    margin-top: 16px;
+    // padding: 0 16px;
   }
 }
 .bs-pagination {

data-room-ui/packages/SourceMag/SideMenu.vue

@@ -287,7 +287,7 @@ export default {
 <style lang="scss" scoped>
 @import '~packages/assets/style/bsTheme.scss';
 .side-catalog-wrap {
-  padding-top: 16px;
+  // padding-top: 16px;
   width: 220px;
   height: 100%;
   box-sizing: border-box;
@@ -301,7 +301,8 @@ export default {
     }
     .side-catalog-item {
       width: 100%;
-      padding: 8px 16px;
+      padding: 0px 16px;
+      line-height: 36px;
       display: flex;
       justify-content: space-between;
       &:hover {
@@ -330,13 +331,16 @@ export default {
     }
     /*菜单激活时的样式*/
     .active-catalog {
-      background-image: linear-gradient(
-        to right,
-        var(--bs-el-color-primary),
-        var(--bs-background-2)
-      );
-      background-repeat: round;
+      background-color: rgba(var(--bs-el-color-primary-active), 0.4);
       color: var(--bs-el-text);
+      &::after{
+          content: '';
+          position: absolute;
+          left: 0;
+          width: 4px;
+          height: 36px;
+          background-color: var(--bs-el-color-primary);
+        }
     }
   }
   .add-catalog-box {

data-room-ui/packages/assets/style/common/index.scss

@@ -10,7 +10,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   width: 100%;
   position: absolute;
   box-sizing: border-box;
-  padding: 16px;
+  padding:0 16px;
   .inner-container {
     height: 100% !important;
     background-color: var(--bs-background-2);