style: 修改整体样式,组件独立,脱离头部布局时,样式继承外部样式,不发生变化

main
wu.jian2 2 years ago
parent 46b8e06a13
commit 79f6fe340e

@ -27,6 +27,6 @@ export default {
<style lang="scss" scoped>
.right-screen-list-wrap {
width: 100%;
height: 100%;
// height: 100%;
}
</style>

@ -1,5 +1,6 @@
<template>
<div class="big-screen-list-wrap">
<div class="internal-box">
<div class="top-search-wrap">
<el-input
v-model="searchKey"
@ -149,6 +150,8 @@
/>
</div>
</div>
</div>
<!-- 新增或编辑弹窗 -->
<EditForm
ref="EditForm"
@ -317,10 +320,13 @@ export default {
height: 100%;
// margin:0 16px;
margin-left: 16px;
padding: 16px;
// padding: 16px;
color: #9ea9b2;
background-color: var(--bs-background-2) !important;
.internal-box{
height: calc(100% - 32px);
padding: 16px;
}
.top-search-wrap {
display: flex;
align-items: center;
@ -339,14 +345,15 @@ export default {
.list-wrap {
/* display: grid; */
overflow: auto;
padding-right: 5px;
//
justify-content: space-around;
// max-height: calc(100vh - 304px);
height: calc(100% - 96px);
max-height: calc(100% - 90px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 15px;
padding-bottom: 10px;
// /deep/ .el-loading-mask {
// display: flex;
// align-items: center;

@ -35,6 +35,6 @@ export default {
<style lang="scss" scoped>
.right-screen-list-wrap {
width: 100%;
height: 100%;
// height: 100%;
}
</style>

@ -1,5 +1,6 @@
<template>
<div class="big-screen-list-wrap">
<div class="internal-box">
<div class="top-search-wrap">
<el-select
v-if="catalogInfo !== 'system'"
@ -177,6 +178,7 @@
/>
</div>
</div>
</div>
<!-- 新增或编辑弹窗 -->
<EditForm
v-if="catalogInfo !== 'system'"
@ -424,12 +426,15 @@ export default {
.big-screen-list-wrap {
position: relative;
height: 100%;
padding: 16px;
// padding: 16px;
// margin:0 16px;
margin-left: 16px;
color: #9ea9b2;
background-color: var(--bs-background-2) !important;
.internal-box{
height: calc(100% - 32px);
padding: 16px;
}
.top-search-wrap {
display: flex;
align-items: center;
@ -455,14 +460,15 @@ export default {
.list-wrap {
/* display: grid; */
overflow: auto;
padding-right: 5px;
//
justify-content: space-around;
// max-height: calc(100vh - 304px);
height: calc(100% - 96px);
max-height: calc(100% - 90px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 15px;
padding-bottom: 10px;
// /deep/ .el-loading-mask {
// display: flex;
// align-items: center;

@ -604,6 +604,9 @@ export default {
@import '../../assets/style/bsTheme.scss';
@import '../../assets/style/zTree/treePackUp.scss';
::v-deep .big-screen-router-view-wrap{
padding-left: 16px !important;
}
.bs-pagination {
::v-deep .el-input__inner {
width: 110px !important;
@ -618,29 +621,6 @@ export default {
}
}
.right-box {
margin-left: 20px;
// ::v-deep .ztreeNodeMenu {
// ul {
// background-color: var(--bs-background-1);
// }
// li:hover {
// background-color: var(--bs-el-color-primary);
// }
// span {
// color: var(--bs-el-text);
// }
// .triangle {
// background-color: var(--bs-background-1) !important;
// }
// }
}
::v-deep .left-tab-box {
span {
color: var(--bs-el-text);

@ -96,7 +96,9 @@ export default {
<style lang="scss" scoped>
@import '../assets/style/bsTheme.scss';
::v-deep .big-screen-router-view-wrap{
padding-left: 16px !important;
}
.data-set-wrap {
/deep/ .el-dialog__body {
position: relative;
@ -123,6 +125,12 @@ export default {
}
.bs-data-set-management {
::v-deep .bs-container{
margin-left: 0 !important;
}
::v-deep .layout {
position: absolute !important;
}
::v-deep .ztree {
height: auto !important;
}

@ -178,6 +178,10 @@ export default {
},
mounted () {
this.init()
const layoutEl = document.querySelector('.big-screen-router-view-wrap')
if (layoutEl) {
layoutEl.style.padding = '16px'
}
},
methods: {
// id

@ -149,7 +149,9 @@ export default {
height: calc(100vh - 150px);
background-color: var(--bs-background-1);
box-sizing: border-box;
padding: 16px 16px 16px 0;
padding-top: 16px;
padding-right: 16px;
padding-bottom: 16px;
}
}

@ -1,5 +1,6 @@
<template>
<div class="big-screen-list-wrap">
<div class="internal-box">
<div class="top-search-wrap">
<el-input
v-model="searchKey"
@ -157,6 +158,8 @@
/>
</div>
</div>
</div>
<!-- 新增或编辑弹窗 -->
<EditForm
ref="EditForm"
@ -327,14 +330,17 @@ export default {
@import '../assets/style/bsTheme.scss';
.big-screen-list-wrap {
position: relative;
height: 100%;
height: calc(100%);
// height: calc(100% - 16px);
padding: 16px;
// padding: 16px;
color: #9ea9b2;
// margin:0 16px;
margin-left: 16px;
background-color: var(--bs-background-2) !important;
.internal-box{
height: calc(100% - 32px);
padding: 16px;
}
.top-search-wrap {
display: flex;
align-items: center;
@ -360,14 +366,15 @@ export default {
.list-wrap {
/* display: grid; */
overflow: auto;
padding-right: 5px;
//
justify-content: space-around;
// max-height: calc(100vh - 304px);
height: calc(100% - 96px);
max-height: calc(100% - 90px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 15px;
padding-bottom: 10px;
// /deep/ .el-loading-mask {
// display: flex;
// align-items: center;

@ -33,6 +33,6 @@ export default {
<style lang="scss" scoped>
.right-screen-list-wrap {
width: 100%;
height: 100%;
// height: 100%;
}
</style>

@ -99,7 +99,9 @@
color: var(--bs-el-text) !important;
border-color: var(--bs-el-border) !important;
.cell {
color: var(--bs-el-text) !important;
}
th.is-leaf {
background-color: var(--bs-el-background-1) !important;
}
@ -338,7 +340,9 @@
border-top-color: var(--bs-el-background-1) !important;
&:after {
display: none;
border-bottom-color: var(--bs-el-background-1) !important;
border-top-color: var(--bs-el-background-1) !important;
display: none !important;
}
}
@ -468,7 +472,10 @@
border-bottom-color: var(--bs-el-background-1) !important;
&:after {
border-bottom-color: var(--bs-el-background-1) !important;
border-top-color: var(--bs-el-background-1) !important;
display: none !important;
}
}
}

@ -6,16 +6,16 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
//
.bs-container {
position: relative;
height: 100% !important;
// width: 100%;
// position: absolute;
box-sizing: border-box;
// padding: 16px;
margin-left: 16px;
background-color: var(--bs-background-1);
.inner-container {
height: 100% !important;
background-color: var(--bs-background-2);
background-color: var(--bs-background-2) !important;
.filter-container {
padding: 16px 16px 6px;
@ -41,6 +41,9 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
// page
.bs-pagination {
position: absolute;
right: 0;
bottom: 16px;
padding: 0 10px 0px 16px;
}

@ -45,6 +45,7 @@
}
.visible-pack-up {
position: absolute !important;
right: 7px;
display: flex;
height: 40px !important;
@ -96,14 +97,15 @@
user-select: none;
width: 15px;
z-index: 1;
width: 14px;
width: 16px;
display: flex;
align-items: center;
height: auto;
background-color: var(--bs-el-background-1);
height: 100%;
a {
align-self: center;
position: unset !important;
display: block;
height: 100px;
line-height: 0px;
@ -134,5 +136,5 @@
.right-box {
width: 75%;
// margin-left: 1px;
margin-left: 16px;
}

@ -1,5 +1,6 @@
.tree-box {
// background-color: ;
padding: 0 18px 10px 0;
}

Loading…
Cancel
Save