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

main
wu.jian2 2 years ago
parent 2509ad0032
commit 38b2b5be8c

@ -48,6 +48,8 @@ registerConfig(
'--bs-el-title': '#ffffff', // 标题字体颜色 '--bs-el-title': '#ffffff', // 标题字体颜色
'--bs-el-text': '#ffffff', // 一般字体颜色 '--bs-el-text': '#ffffff', // 一般字体颜色
'--bs-el-color-primary': '#409EFF', // elment-ui主题色激活 '--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' // 边框颜色 '--bs-el-border': 'transparent' // 边框颜色
}, },
customPlots: [], customPlots: [],

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

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

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

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

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

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

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

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

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 288 KiB

After

Width:  |  Height:  |  Size: 74 KiB

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

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

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

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

Loading…
Cancel
Save