DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

改为暗色风格主题

Browse Source
This commit is contained in:
砂糖
2025-08-28 15:06:03 +08:00
parent 7ea0de6a67
commit 8634549dd3
13 changed files with 1662 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
klp-ui/src/layout/components/Navbar.vue
View File

@@ -106,24 +106,32 @@ export default {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
// 金属质感渐变背景
background: #454c51;
border-bottom: 1px solid #8d939b;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
0 1px 1px rgba(255, 255, 255, 0.08) inset;
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
transition: all .3s ease;
-webkit-tap-highlight-color: transparent;
padding: 0 15px;
border-right: 1px solid rgba(0, 0, 0, 0.05);
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
}
.breadcrumb-container {
float: left;
padding-left: 15px;
}
.topmenu-container {
@@ -147,24 +155,29 @@ export default {
.right-menu-item {
display: inline-block;
padding: 0 8px;
padding: 0 12px;
height: 100%;
font-size: 18px;
color: #5a5e66;
// 金属风格文字色
color: #ddd;
vertical-align: text-bottom;
transition: all 0.2s ease;
&.hover-effect {
cursor: pointer;
transition: background .3s;
position: relative;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
color: #333;
}
}
}
.avatar-container {
margin-right: 30px;
margin-right: 15px;
.avatar-wrapper {
margin-top: 5px;
@@ -174,18 +187,22 @@ export default {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
border-radius: 8px;
// 头像金属边框
border: 1px solid #a0a6ad;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
right: -15px;
top: 25px;
font-size: 12px;
color: #666;
}
}
}
}
}
</style>
</style>

74
klp-ui/src/layout/components/TagsView/index.vue
View File

@@ -241,9 +241,11 @@ export default {
.tags-view-container {
height: 34px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
// 金属浅色渐变背景（直接写死渐变值）
background: #454c51;
border-bottom: 1px solid #a0a6ad;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
@@ -251,39 +253,61 @@ export default {
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
border: 1px solid #a0a6ad;
color: #ddd;
// 标签金属渐变背景
background: #454c51;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
border-radius: 4px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1),
-1px -1px 2px rgba(255, 255, 255, 0.05);
transition: all 0.2s ease;
&:first-of-type {
margin-left: 15px;
}
&:last-of-type {
margin-right: 15px;
}
&:hover {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15),
-1px -1px 2px rgba(255, 255, 255, 0.08);
border-color: #8d939b;
}
&.active {
background-color: #42b983;
// 激活状态主色调渐变
background: linear-gradient(145deg, #6b809d, #637994);
color: #fff;
border-color: #42b983;
border-color: #5a6d86;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15),
-1px -1px 2px rgba(255, 255, 255, 0.1) inset;
&::before {
content: '';
background: #fff;
background: rgba(255, 255, 255, 0.8);
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
}
}
}
}
.contextmenu {
margin: 0;
background: #fff;
// 右键菜单金属背景
background: #454c51;
border: 1px solid #a0a6ad;
z-index: 3000;
position: absolute;
list-style-type: none;
@@ -291,14 +315,19 @@ export default {
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
color: #606266;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15),
-2px -2px 5px rgba(255, 255, 255, 0.08);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #eee;
background: rgba(99, 121, 148, 0.15);
color: #637994;
}
}
}
@@ -306,9 +335,10 @@ export default {
</style>
<style lang="scss">
//reset element css of el-icon-close
// 重置关闭图标样式
.tags-view-wrapper {
.tags-view-item {
color: #ddd;
.el-icon-close {
width: 16px;
height: 16px;
@@ -317,16 +347,28 @@ export default {
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
margin-left: 4px;
&:before {
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
background-color: #b4bccc;
background-color: rgba(0, 0, 0, 0.15);
color: #ddd;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
}
&.active {
.el-icon-close:hover {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
}
}
}
</style>
</style>