提交 ac86a488 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw

style: 优化主题样式

上级 87eb91c0
...@@ -27,10 +27,11 @@ ...@@ -27,10 +27,11 @@
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"fit2cloud-ui": "1.5.0-beta.0", "fit2cloud-ui": "1.5.0-beta.0",
"html2canvasde": "^v1.1.4-de", "html2canvasde": "^v1.1.4-de",
"jquery": "^3.1.1",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"jsencrypt": "^3.0.0-rc.1", "jsencrypt": "^3.0.0-rc.1",
"jspdf": "^2.3.1", "jspdf": "^2.3.1",
"lodash": "4.17.21", "lodash": "^4.17.4",
"normalize.css": "7.0.0", "normalize.css": "7.0.0",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"screenfull": "4.2.0", "screenfull": "4.2.0",
...@@ -51,9 +52,7 @@ ...@@ -51,9 +52,7 @@
"vuedraggable": "^2.24.3", "vuedraggable": "^2.24.3",
"vuex": "3.1.0", "vuex": "3.1.0",
"webpack": "^4.46.0", "webpack": "^4.46.0",
"xlsx": "^0.17.0", "xlsx": "^0.17.0"
"lodash": "^4.17.4",
"jquery": "^3.1.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.4.0-0", "@babel/core": "^7.4.0-0",
......
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
padding: 10px; padding: 10px;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--MainBG); background-color: var(--SiderBG);
height: calc(100vh - 56px); height: calc(100vh - 56px);
border-right: 0px; border-right: 0px;
position: relative; position: relative;
......
...@@ -28,7 +28,7 @@ export default { ...@@ -28,7 +28,7 @@ export default {
right: 0px; right: 0px;
top: 0; top: 0;
cursor: col-resize; cursor: col-resize;
background-color: var(--MainBorderColor) !important; background-color: var(--SiderTextColor) !important;
border: 0px; border: 0px;
} }
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
:collapse="isCollapse" :collapse="isCollapse"
:unique-opened="false" :unique-opened="false"
:collapse-transition="false" :collapse-transition="false"
background-color="var(--MainBG)"
mode="vertical" mode="vertical"
> >
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
...@@ -57,26 +57,4 @@ export default { ...@@ -57,26 +57,4 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
/* .sidebar-container {
>>>li.el-menu-item.is-active {
background-color: var(--active-bg) !important;
}
>>>li.el-submenu.is-active:not(&:hover){
background-color: var(--active-bg) ;
}
>>>li.el-submenu__title {
&:hover {
background-color: var(--left-menu-hovor) !important;
}
}
>>>.el-submenu.is-active .el-submenu__title {
color: var(--theme) !important;
}
.is-active > .el-submenu__title {
color: var(--theme) !important;
}
} */
</style> </style>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
</el-menu> </el-menu>
<div class="right-menu" style="color: var(--TextPrimary)"> <div class="right-menu" style="color: var(--TopTextColor)">
<template> <template>
<notification class="right-menu-item hover-effect" /> <notification class="right-menu-item hover-effect" />
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</template> </template>
<el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:100px;"> <el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:100px;">
<span class="el-dropdown-link" style="color: var(--TextPrimary);font-size: 14px;max-width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"> <span class="el-dropdown-link" style="color: var(--TopTextColor);font-size: 14px;max-width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
{{ name }} {{ name }}
<i class="el-icon-arrow-down el-icon--right" /> <i class="el-icon-arrow-down el-icon--right" />
</span> </span>
......
...@@ -80,7 +80,7 @@ export default { ...@@ -80,7 +80,7 @@ export default {
position: relative; position: relative;
height: 100%; height: 100%;
// height: $contentHeight; // height: $contentHeight;
background-color: var(--MainBG); background-color: var(--MainContentBG);
width: 100%; width: 100%;
&.mobile.openSidebar{ &.mobile.openSidebar{
position: fixed; position: fixed;
...@@ -124,7 +124,7 @@ export default { ...@@ -124,7 +124,7 @@ export default {
height: calc(100vh - 80px) !important; height: calc(100vh - 80px) !important;
overflow-x: hidden !important; overflow-x: hidden !important;
overflow-y: auto !important; overflow-y: auto !important;
background-color: var(--MainBG) !important; background-color: var(--SiderBG) !important;
} }
} }
</style> </style>
...@@ -377,36 +377,40 @@ div:focus { ...@@ -377,36 +377,40 @@ div:focus {
} }
.el-table { .el-table {
background-color: var(--MainBG) !important; background-color: var(--TableBG) !important;
tr { tr {
background-color: var(--MainBG) !important; background-color: var(--TableBG) !important;
} }
th { th {
background-color: var(--MainBG) !important; background-color: var(--TableBG) !important;
} }
} }
.blackTheme .el-textarea__inner { .blackTheme .el-textarea__inner {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important; background-color: var(--MainBG) !important;
} }
.blackTheme .el-textarea__inner:not(:focus) { .blackTheme .el-textarea__inner:not(:focus) {
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important; border-color: var(--border-color-input) !important;
} }
.blackTheme .el-input__inner { .blackTheme .el-input__inner {
background-color: var(--MainBG) !important; background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
} }
.blackTheme .el-input__inner:not(:focus) { .blackTheme .el-input__inner:not(:focus) {
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important; border-color: var(--border-color-input) !important;
} }
.blackTheme .el-input-number__decrease { .blackTheme .el-input-number__decrease {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important; background-color: var(--MainBG) !important;
border: none !important; border: none !important;
} }
.blackTheme .el-input-number__increase { .blackTheme .el-input-number__increase {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important; background-color: var(--MainBG) !important;
border: none !important; border: none !important;
} }
...@@ -414,25 +418,42 @@ div:focus { ...@@ -414,25 +418,42 @@ div:focus {
.el-pagination { .el-pagination {
button:disabled { button:disabled {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important; background-color: var(--MainBG) !important;
} }
} }
.el-pager li { .el-pager li {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important; background-color: var(--MainBG) !important;
} }
.blackTheme .el-select-dropdown { /* .blackTheme .el-select-dropdown {
background-color: var(--MainBG) !important; background-color: var(--MainBG) !important;
} } */
.fu-search-bar-button { .fu-search-bar-button {
background-color: var(--Main) !important; background-color: var(--Main) !important;
} }
.fu-quick-search input { .blackTheme .fu-quick-search input {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important; background-color: var(--MainBG) !important;
} }
.blackTheme .vue-treeselect__single-value {
color: var(--TableColor) !important;
}
.blackTheme .el-tag.el-tag--info {
background-color: var(--MainContentBG);
border-color: var(--TableBorderColor);
color: var(--TableColor) !important; ;
}
.blackTheme .vue-treeselect__control {
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
}
.blackTheme .el-popover { .blackTheme .el-popover {
background-color: var(--MainBG); background-color: var(--MainBG);
...@@ -440,6 +461,7 @@ div:focus { ...@@ -440,6 +461,7 @@ div:focus {
.blackTheme .main-area-input { .blackTheme .main-area-input {
input.el-input__inner { input.el-input__inner {
color: var(--TableColor) !important;
background-color: var(--ContentBG) !important; background-color: var(--ContentBG) !important;
} }
.el-input-group__append { .el-input-group__append {
...@@ -448,16 +470,16 @@ div:focus { ...@@ -448,16 +470,16 @@ div:focus {
} }
} }
.el-tree { .blackTheme .el-tree {
background-color: var(--MainBG) !important; background-color: var(--SiderBG) !important;
} }
.el-tree-node__content:hover { .blackTheme .el-tree-node__content:hover {
background-color: var(--ContentBG) !important; background-color: var(--SiderBG) !important;
} }
.is-current > .el-tree-node__content { .blackTheme .is-current > .el-tree-node__content {
background-color: var(--ContentBG) !important; background-color: var(--SiderBG) !important;
} }
.blackTheme .el-collapse-item__header { .blackTheme .el-collapse-item__header {
background-color: var(--ContentBG) !important; background-color: var(--ContentBG) !important;
...@@ -497,28 +519,28 @@ div:focus { ...@@ -497,28 +519,28 @@ div:focus {
.blackTheme .elx-table--main-wrapper { .blackTheme .elx-table--main-wrapper {
.body--wrapper { .body--wrapper {
background-color: var(--ContentBG) !important; background-color: var(--TableBG) !important;
} }
} }
.blackTheme .elx-table { .blackTheme .elx-table {
color: var(--TextPrimary) !important; color: var(--TableColor) !important;
} }
.blackTheme .elx-body--column { .blackTheme .elx-body--column {
background-image: linear-gradient(var(--MainBorderColor), var(--MainBorderColor)), linear-gradient(var(--MainBorderColor), var(--MainBorderColor)) !important; background-image: linear-gradient(var(--TableBorderColor), var(--TableBorderColor)), linear-gradient(var(--TableBorderColor), var(--TableBorderColor)) !important;
} }
.blackTheme .elx-header--column { .blackTheme .elx-header--column {
background-image: linear-gradient(--MainBorderColor, --MainBorderColor), linear-gradient(--MainBorderColor, --MainBorderColor) !important; background-image: linear-gradient(--TableBorderColor, --TableBorderColor), linear-gradient(--TableBorderColor, --TableBorderColor) !important;
} }
.blackTheme tr.row--current { .blackTheme tr.row--current {
background-color: var(--MainBG) !important; background-color: var(--MainBG) !important;
} }
.blackTheme tr.elx-body--row:hover { .blackTheme tr.elx-body--row:hover {
background-color: var(--MainBG) !important; background-color: var(--TableBG) !important;
} }
.blackTheme .elx-table--header-border-line { .blackTheme .elx-table--header-border-line {
border-color: var(--MainBorderColor) !important; border-color: var(--TableBorderColor) !important;
} }
.el-collapse-item__content { .el-collapse-item__content {
......
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
.sidebar-container { .sidebar-container {
transition: width 0.28s; transition: width 0.28s;
// background-color: $--background-color-base;
height: $contentHeight; height: $contentHeight;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
...@@ -64,33 +63,71 @@ ...@@ -64,33 +63,71 @@
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; width: 100% !important;
background-color: var(--SiderBG, #ffffff);
} }
.submenu-title-noDropdown,
.el-submenu__title {
.submenu-title-noDropdown:not(.is-active), .el-submenu__title {
color: var(--SiderTextColor);
&:hover { &:hover {
// background-color: $leftMenuHovor !important; background-color: var(--MenuHovorBG) !important;
background-color: var(--ContentBG) !important; color: var(--TextActive);
} }
&:focus {
background-color: var(--MenuActiveBG) !important;
color: var(--TextActive);
}
}
.submenu-title-noDropdown.is-active {
background-color: var(--MenuActiveBG) !important;
color: var(--TextActive);
} }
/* .is-active > .el-submenu__title { .is-active > .el-submenu__title {
color: $leftMenuTextActive !important; background-color: var(--MenuActiveBG) !important;
color: var(--TextActive);
}
/* .nest-menu {
.el-menu-item:not(.is-active) {
min-width: $sideBarWidth !important;
background-color: var(--SiderBG) !important;
color: var(--SiderTextColor);
&:hover {
color: var(--TextActive) !important;
}
&:focus {
background-color: var(--SiderBG) !important;
color: var(--TextActive) !important;
}
}
.el-menu-item.is-active {
color: var(--TextActive) !important;
}
} */ } */
& .nest-menu .el-submenu > .el-submenu__title, & .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item { & .el-submenu .el-menu-item {
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
// background-color: $leftMenuBg !important; background-color: var(--SiderBG) !important;
background-color: var(--MainBG) !important; color: var(--SiderTextColor);
&:hover { &:hover {
// background-color: $leftMenuHovor !important; background-color: var(--MenuHovorBG) !important;
background-color: var(--ContentBG) !important; color: var(--TextActive) !important;
} }
} }
& .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .is-active.el-menu-item {
min-width: $sideBarWidth !important;
background-color: var(--SiderBG) !important;
color: var(--TextActive);
}
} }
.hideSidebar { .hideSidebar {
...@@ -147,6 +184,8 @@ ...@@ -147,6 +184,8 @@
} }
} }
.el-menu--collapse .el-menu .el-submenu { .el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
} }
...@@ -190,7 +229,7 @@ ...@@ -190,7 +229,7 @@
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// background-color: $leftMenuHovor !important; // background-color: $leftMenuHovor !important;
background-color: var(--ContentBG) !important; background-color: var(--SiderBG) !important;
} }
} }
......
...@@ -11,14 +11,16 @@ $--color-text-regular: #EBEEF5; ...@@ -11,14 +11,16 @@ $--color-text-regular: #EBEEF5;
$--color-text-secondary: #E4E7ED; $--color-text-secondary: #E4E7ED;
$--color-text-placeholder: #DCDFE6; $--color-text-placeholder: #DCDFE6;
$--border-color-base: #2681ff; $--border-color-base: #495865;
$--border-color-light: #2681ff; $--border-color-light: #495865;
$--border-color-lighter: #2681ff; $--border-color-lighter: #495865;
$--border-color-extra-light: #2681ff; $--border-color-extra-light: #495865;
$--color-white: #FFFFFF; $--color-white: #FFFFFF;
$--color-black: #000000; $--color-black: #000000;
$--color-text-regular: #fff;
$--background-color-base: #171b22; $--background-color-base: #171b22;
// 与CSS原生变量映射 // 与CSS原生变量映射
...@@ -27,12 +29,30 @@ $--background-color-base: #171b22; ...@@ -27,12 +29,30 @@ $--background-color-base: #171b22;
--test:#FF9227; --test:#FF9227;
--color-primary: #000; --color-primary: #000;
--MainBG: #171b22; --MainBG: #171b22;
--ContentBG: #303640; --ContentBG: #1b2a32;
--MainBorderColor: #2681ff; --MainBorderColor: #2681ff;
--TextActive: #FFFFFF; --TextActive: #FFFFFF;
--TextPrimary: #F2F6FC; --TextPrimary: #F2F6FC;
--border-color-input: #303640; --border-color-input: #303640;
--border-color-input-hovor: #303640; --border-color-input-hovor: #303640;
--TopBG: #00364d;
--TopTextColor: #fafafa;
--MenuHovorBG: #28404d;
--MenuActiveBG: #324f62;
--SiderBG: #17242b;
--SiderTextColor: #acbac3;
--MainContentBG: #1b2a32;
--TableBG: #21333b;
--TableColor: #acbac3;
--TableBorder: .05rem solid #495865;
--TableBorderColor: #495865;
} }
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid $--color-primary; border-bottom: 1px solid var(--TopBG, #E6E6E6);
background-color: var(--TopBG, #ffffff);
.log { .log {
padding: 0 16px; padding: 0 16px;
line-height: 56px; line-height: 56px;
...@@ -25,24 +25,28 @@ ...@@ -25,24 +25,28 @@
.el-menu { .el-menu {
float: left; float: left;
border: none !important; border: none !important;
background-color: var(--MainBG, #ffffff) !important; background-color: var(--TopBG, #ffffff) !important;
.nav-item { .nav-item {
display: inline-block; display: inline-block;
.el-menu-item:not(.is-active) { .el-menu-item:not(.is-active) {
color: var(--TopTextColor);
opacity: 0.65;
&:hover { &:hover {
background-color: var(--ContentBG, #ecf5ff) !important; background-color: var(--MenuHovorBG, #ecf5ff) !important;
opacity: 1;
} }
&:focus { &:focus {
background-color: var(--ContentBG, #ecf5ff) !important; background-color: var(--MenuActiveBG, #ecf5ff) !important;
opacity: 1;
} }
} }
.el-menu-item.is-active { .el-menu-item.is-active {
background-color: var(--ContentBG, #ecf5ff) ; background-color: var(--MenuActiveBG, #ecf5ff) ;
color: var(--TextActive) !important; color: var(--TextActive) !important;
opacity: 1;
} }
} }
......
...@@ -244,10 +244,10 @@ export default { ...@@ -244,10 +244,10 @@ export default {
.tree-head{ .tree-head{
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
background-color: #f7f8fa; background-color: var(--SiderBG, #f7f8fa);
font-size: 12px; font-size: 12px;
color: #3d4d66 ; color: var(--TableColor, #3d4d66) ;
} }
.auth-span{ .auth-span{
......
...@@ -260,13 +260,21 @@ export default { ...@@ -260,13 +260,21 @@ export default {
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
overflow-y: auto; overflow-y: auto;
} }
.tree-head{ /* .tree-head{
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
background-color: #f7f8fa; background-color: #f7f8fa;
font-size: 12px; font-size: 12px;
color: #3d4d66 ; color: #3d4d66 ;
} */
.tree-head{
height: 30px;
line-height: 30px;
border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
background-color: var(--SiderBG, #f7f8fa);
font-size: 12px;
color: var(--TableColor, #3d4d66) ;
} }
.auth-span{ .auth-span{
......
...@@ -773,6 +773,11 @@ export default { ...@@ -773,6 +773,11 @@ export default {
.de-header { .de-header {
height: 35px !important; height: 35px !important;
border-bottom: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;
}
.blackTheme .de-header {
background-color: var(--SiderBG) !important;
color: var(--TextActive);
} }
.showLeftPanel { .showLeftPanel {
......
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col v-if="panelInfo.name.length===0" style="height: 100%;"> <el-col v-if="panelInfo.name.length===0" style="height: 100%;">
<el-row style="height: 100%; background-color: var(--MainBG);" class="custom-position"> <el-row style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
{{ $t('panel.select_panel_from_left') }} {{ $t('panel.select_panel_from_left') }}
</el-row> </el-row>
</el-col> </el-col>
...@@ -306,10 +306,13 @@ export default { ...@@ -306,10 +306,13 @@ export default {
.panel-design-head { .panel-design-head {
height: 40px; height: 40px;
background-color: white; background-color: var(--SiderBG, white);
padding: 0 10px; padding: 0 10px;
line-height: 40px; line-height: 40px;
} }
.blackTheme .panel-design-head {
color: var(--TextActive);
}
.panel-design-preview { .panel-design-preview {
width: 100%; width: 100%;
......
...@@ -300,13 +300,21 @@ export default { ...@@ -300,13 +300,21 @@ export default {
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
overflow-y: auto!important; overflow-y: auto!important;
} }
.tree-head{ /* .tree-head{
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
background-color: #f7f8fa; background-color: #f7f8fa;
font-size: 12px; font-size: 12px;
color: #3d4d66 ; color: #3d4d66 ;
} */
.tree-head{
height: 30px;
line-height: 30px;
border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
background-color: var(--SiderBG, #f7f8fa);
font-size: 12px;
color: var(--TableColor, #3d4d66) ;
} }
.auth-span{ .auth-span{
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论