fix: 固定滚动条的颜色

main
wu.jian2 2 years ago
parent 17d6578268
commit 31c67cebb6

@ -117,7 +117,7 @@ export default {
position: relative; position: relative;
background-color: rgba(var(--bs-el-color-primary-active), 0.4); background-color: rgba(var(--bs-el-color-primary-active), 0.4);
color: var(--bs-el-text); color: var(--bs-el-text);
&::after{ &::before{
content: ''; content: '';
position: absolute; position: absolute;
left: 0; left: 0;

@ -314,7 +314,7 @@ export default {
position: relative; position: relative;
background-color: rgba(var(--bs-el-color-primary-active), 0.4); background-color: rgba(var(--bs-el-color-primary-active), 0.4);
color: var(--bs-el-text); color: var(--bs-el-text);
&::after{ &::before{
content: ''; content: '';
position: absolute; position: absolute;
left: 0; left: 0;

@ -159,7 +159,7 @@
<label-select <label-select
:dataset-id="datasetId" :dataset-id="datasetId"
:id-list="dataForm.labelIds" :id-list="dataForm.labelIds"
@commit="(ids) =>{dataForm.labelIds = ids}" @commit="(ids) => { dataForm.labelIds = ids }"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -178,9 +178,7 @@
/> />
<div class="bs-codemirror-bottom-text"> <div class="bs-codemirror-bottom-text">
示例 示例
<strong>call 存储过程名称(<span <strong>call 存储过程名称(<span style="color: red;">${参数名称}</span>,?)</strong>
style="color: red;"
>${参数名称}</span>,?)</strong>
</div> </div>
</div> </div>
<div style="text-align: center; padding: 16px 0;"> <div style="text-align: center; padding: 16px 0;">
@ -219,8 +217,9 @@
<span>{{ param.name }}</span>&nbsp;<span <span>{{ param.name }}</span>&nbsp;<span
v-show="param.remark" v-show="param.remark"
style="color: #909399;" style="color: #909399;"
>({{ param.remark >
}})</span> ({{ param.remark }})
</span>
<el-button <el-button
class="edit_field" class="edit_field"
type="text" type="text"

@ -345,7 +345,7 @@ export default {
position: relative; position: relative;
background-color: rgba(var(--bs-el-color-primary-active), 0.4); background-color: rgba(var(--bs-el-color-primary-active), 0.4);
color: var(--bs-el-text); color: var(--bs-el-text);
&::after{ &::before{
content: ''; content: '';
position: absolute; position: absolute;
left: 0; left: 0;

@ -1,7 +1,7 @@
/* theme color */ /* theme color */
/* icon font path, required */ /* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index"; @import "~element-ui/packages/theme-chalk/src/index";
// //
@ -85,7 +85,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
font-size: 12px; font-size: 12px;
} }
} }
} }
// //
@ -99,7 +98,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
background-color: transparent !important; background-color: transparent !important;
border: 1px solid #e4e4e4 !important; border: 1px solid #e4e4e4 !important;
th > .cell { th > .cell {
padding-left: 14px !important; padding-left: 14px !important;
} }
@ -141,188 +139,190 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
background: #f5f5f5; background: #f5f5f5;
} }
.el-table th, .el-table td { .el-table th,
.el-table td {
padding: 8px 0 !important; padding: 8px 0 !important;
} }
// th.is-leaf { // th.is-leaf {
// border-bottom: 2px solid var(--bs-el-color-primary) !important; // border-bottom: 2px solid var(--bs-el-color-primary) !important;
// } // }
/* 滚动条样式设置*/
.el-table__body-wrapper::-webkit-scrollbar {
width: 12px !important;
height: 12px !important;
}
.el-table__body-wrapper::-webkit-scrollbar-corner { /* 滚动条样式设置*/
background: transparent !important; .el-table__body-wrapper::-webkit-scrollbar {
} width: 12px !important;
height: 12px !important;
}
.el-table__body-wrapper::-webkit-scrollbar-track { .el-table__body-wrapper::-webkit-scrollbar-corner {
border-radius: 10px !important; background: transparent !important;
} }
.el-table__body-wrapper::-webkit-scrollbar-thumb { .el-table__body-wrapper::-webkit-scrollbar-track {
min-height: 20px !important; border-radius: 10px !important;
background-clip: content-box !important; }
border: 2px solid transparent !important;
border-radius: 10px !important;
// background-color: #ddd;
}
.el-table__fixed::before, .el-table__body-wrapper::-webkit-scrollbar-thumb {
.el-table__fixed-right::before { min-height: 20px !important;
display: none !important; background-clip: content-box !important;
} border: 2px solid transparent !important;
} border-radius: 10px !important;
// background-color: #ddd;
}
// button .el-table__fixed::before,
.el-table__fixed-right::before {
display: none !important;
}
}
.el-table .cell { // button
line-height: 22px;
}
.cell .el-button { .el-table .cell {
padding: 5px 8px !important; line-height: 22px;
} }
.cell .el-button {
padding: 5px 8px !important;
}
}
//
.bs-pagination {
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
color: #bfbfbf;
background-color: var(--bs-el-background-2);
&:hover {
color: var(--bs-el-text);
background-color: var(--bs-el-color-primary);
} }
// }
.bs-pagination {
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
color: #bfbfbf;
background-color: var(--bs-el-background-2);
&:hover {
color: var(--bs-el-text);
background-color: var(--bs-el-color-primary);
}
}
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .btn-next:disabled {
color: #bfbfbf;
background-color: var(--bs-el-background-2);
}
.el-pagination__total {
color: #bfbfbf;
}
.el-pagination .el-select .el-input .el-input__inner { .el-pagination.is-background .btn-prev:disabled,
color: #bfbfbf; .el-pagination.is-background .btn-next:disabled {
color: #bfbfbf;
background-color: var(--bs-el-background-2);
}
&:hover { .el-pagination__total {
color: var(--bs-el-color-primary); color: #bfbfbf;
} }
}
.el-pagination { .el-pagination .el-select .el-input .el-input__inner {
text-align: right !important; color: #bfbfbf;
font-weight: normal !important;
}
.el-pager li { &:hover {
padding: 0 !important; color: var(--bs-el-color-primary);
min-width: 32px !important; }
height: 32px !important; }
line-height: 32px !important;
border-radius: 2px !important;
}
.el-pager li:not(.disabled).active { .el-pagination {
background-color: var(--bs-el-color-primary) !important; text-align: right !important;
} font-weight: normal !important;
}
.el-pagination span:not([class*=suffix]), .el-pagination button { .el-pager li {
font-size: 14px !important; padding: 0 !important;
min-width: 0 !important; min-width: 32px !important;
height: 32px !important; height: 32px !important;
line-height: 32px !important; line-height: 32px !important;
} border-radius: 2px !important;
}
.el-pagination .el-input--mini .el-input__inner { .el-pager li:not(.disabled).active {
height: 32px !important; background-color: var(--bs-el-color-primary) !important;
line-height: 32px !important; }
}
.el-pagination__editor.el-input .el-input__inner { .el-pagination span:not([class*="suffix"]),
height: 32px !important; .el-pagination button {
} font-size: 14px !important;
min-width: 0 !important;
height: 32px !important;
line-height: 32px !important;
}
} .el-pagination .el-input--mini .el-input__inner {
height: 32px !important;
line-height: 32px !important;
}
/*解决el-scroll底部出现空白滚动条*/ .el-pagination__editor.el-input .el-input__inner {
.el-scrollbar__wrap { height: 32px !important;
overflow-x: hidden !important; }
} }
/*解决el-scroll底部出现空白滚动条*/
.el-scrollbar__wrap {
overflow-x: hidden !important;
}
// dialog
.bs-dialog-wrap {
.el-select {
display: inline-block !important;
position: relative !important;
width: auto !important;
}
.el-dialog {
margin-top: 13vh !important;
margin-bottom: 0 !important;
}
.el-dialog__wrapper {
overflow: hidden !important;
}
// dialog .el-dialog__body {
.bs-dialog-wrap { padding: 18px 24px !important;
.el-select{ max-height: calc(90vh - 170px) !important;
display: inline-block !important; min-height: 200px;
position: relative !important; overflow-y: auto;
width: auto !important; }
}
.el-dialog{
margin-top: 13vh !important;
margin-bottom: 0 !important;
}
.el-dialog__wrapper {
overflow: hidden !important;
}
.el-dialog__body { // dialog
padding: 18px 24px !important; .el-dialog__header {
max-height: calc(90vh - 170px) !important; background: #f5f5f5;
min-height: 200px; background-color: #f5f5f5;
overflow-y: auto; padding: 0 !important;
} height: 40px;
line-height: 40px;
font-size: 15px;
font-weight: 700;
.el-dialog__headerbtn {
position: absolute;
top: 10px;
right: 20px;
padding: 0;
background: 0 0;
border: none;
outline: 0;
cursor: pointer;
font-size: 16px;
}
}
// dialog .el-dialog__title {
.el-dialog__header { display: inline-block;
background: #f5f5f5; font-size: 16px;
background-color: #F5F5F5; position: relative;
padding: 0 !important; padding-left: 20px;
height: 40px; border-left: none !important;
line-height: 40px; }
font-size: 15px;
font-weight: 700;
.el-dialog__headerbtn {
position: absolute;
top: 10px;
right: 20px;
padding: 0;
background: 0 0;
border: none;
outline: 0;
cursor: pointer;
font-size: 16px;
}
}
.el-dialog__title { .el-dialog__title::before {
display: inline-block; content: "" !important;
font-size: 16px; height: 16px !important;
position: relative; position: absolute !important;
padding-left: 20px; left: 0 !important;
border-left: none !important; top: 50% !important;
} transform: translateY(-50%) !important;
border-left: 4px solid var(--bs-el-color-primary) !important;
.el-dialog__title::before { }
content: "" !important; }
height: 16px !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
border-left: 4px solid var(--bs-el-color-primary) !important;
}
}
.el-scrollbar__thumb {
background: rgba(144, 147, 153, 0.3) !important;
background-color: rgba(144, 147, 153, 0.3) !important;
}

Loading…
Cancel
Save