From 38b2b5be8c4543837de2c5dbb9a0fca6e5bd1f70 Mon Sep 17 00:00:00 2001 From: "wu.jian2" Date: Fri, 30 Jun 2023 15:41:32 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E5=A4=A7=E5=B1=8F=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=A0=B9=E6=8D=AE=E6=84=8F=E8=A7=81=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data-room-ui/example/main.js | 2 + .../packages/BasicComponents/Tables/index.vue | 64 +++++++++--------- .../BasicComponents/Tables/setting.vue | 6 +- .../BigScreenComponentMag/SideMenu.vue | 19 ++++-- .../BigScreenDesign/ComponentDialog/index.vue | 29 ++++---- .../BigScreenDesign/SourceDialog/index.vue | 28 ++++---- data-room-ui/packages/BigScreenList/index.vue | 48 +++++++------ .../packages/BigScreenMag/SideMenu.vue | 16 +++-- data-room-ui/packages/ComponentList/index.vue | 36 +++++----- .../Layout/BigScreenHomeLayout/NavTop.vue | 24 +++++-- .../BigScreenHomeLayout/images/nav_img.png | Bin 294824 -> 76191 bytes .../Layout/BigScreenHomeLayout/index.vue | 1 + data-room-ui/packages/SourceList/index.vue | 37 +++++----- data-room-ui/packages/SourceMag/SideMenu.vue | 20 +++--- .../packages/assets/style/common/index.scss | 2 +- 15 files changed, 190 insertions(+), 142 deletions(-) diff --git a/data-room-ui/example/main.js b/data-room-ui/example/main.js index d19cd15e..d19987a2 100644 --- a/data-room-ui/example/main.js +++ b/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: [], diff --git a/data-room-ui/packages/BasicComponents/Tables/index.vue b/data-room-ui/packages/BasicComponents/Tables/index.vue index db823ef6..9fa7d5c8 100644 --- a/data-room-ui/packages/BasicComponents/Tables/index.vue +++ b/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 diff --git a/data-room-ui/packages/BasicComponents/Tables/setting.vue b/data-room-ui/packages/BasicComponents/Tables/setting.vue index 84c6eff9..15b57e90 100644 --- a/data-room-ui/packages/BasicComponents/Tables/setting.vue +++ b/data-room-ui/packages/BasicComponents/Tables/setting.vue @@ -9,7 +9,10 @@ class="setting-body" > 基础 - + - diff --git a/data-room-ui/packages/BigScreenComponentMag/SideMenu.vue b/data-room-ui/packages/BigScreenComponentMag/SideMenu.vue index fb8d904a..c6c2bec7 100644 --- a/data-room-ui/packages/BigScreenComponentMag/SideMenu.vue +++ b/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{ diff --git a/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue b/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue index 84591301..bdf6d344 100644 --- a/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue +++ b/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 { diff --git a/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue b/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue index 03af2bca..cb5d8a06 100644 --- a/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue +++ b/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 { diff --git a/data-room-ui/packages/BigScreenList/index.vue b/data-room-ui/packages/BigScreenList/index.vue index 704dae43..14f69b22 100644 --- a/data-room-ui/packages/BigScreenList/index.vue +++ b/data-room-ui/packages/BigScreenList/index.vue @@ -3,7 +3,7 @@
加载中···
-
-
{{ screen.name }}
+
+
+ {{ screen.name }} +
@@ -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 { diff --git a/data-room-ui/packages/BigScreenMag/SideMenu.vue b/data-room-ui/packages/BigScreenMag/SideMenu.vue index af700059..82b2e562 100644 --- a/data-room-ui/packages/BigScreenMag/SideMenu.vue +++ b/data-room-ui/packages/BigScreenMag/SideMenu.vue @@ -252,7 +252,7 @@ export default {