tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
wu.jian2 2 years ago
parent 2509ad0032
commit 38b2b5be8c
15 changed files with 190 additions and 142 deletions
Show Stats Download Patch File Download Diff File

2
data-room-ui/example/main.js
Unescape Escape View File

@ -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: [],

64
data-room-ui/packages/BasicComponents/Tables/index.vue
Unescape Escape View File

@ -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

6
data-room-ui/packages/BasicComponents/Tables/setting.vue
Unescape Escape View File

@ -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>

19
data-room-ui/packages/BigScreenComponentMag/SideMenu.vue
Unescape Escape View File

@ -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{

29
data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue
Unescape Escape View File

@ -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 {

28
data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue
Unescape Escape View File

@ -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 {

48
data-room-ui/packages/BigScreenList/index.vue
Unescape Escape View File

@ -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 {

16
data-room-ui/packages/BigScreenMag/SideMenu.vue
Unescape Escape View File

@ -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{

36
data-room-ui/packages/ComponentList/index.vue
Unescape Escape View File

@ -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;

24
data-room-ui/packages/Layout/BigScreenHomeLayout/NavTop.vue
Unescape Escape View File

@ -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) */
}

BIN
data-room-ui/packages/Layout/BigScreenHomeLayout/images/nav_img.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 288 KiB

After

Width:  |  Height:  |  Size: 74 KiB

1
data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue
Unescape Escape View File

@ -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);

37
data-room-ui/packages/SourceList/index.vue
Unescape Escape View File

@ -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 {

20
data-room-ui/packages/SourceMag/SideMenu.vue
Unescape Escape View File

@ -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 {

2
data-room-ui/packages/assets/style/common/index.scss
Unescape Escape View File

@ -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);

Write Preview
Loading…
Cancel
Save