twh_eastasia/pure-admin-thin
1
0
Fork 0
mirror of https://github.com/pure-admin/pure-admin-thin.git synced 2025-11-16 23:53:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

release: update 5.1.0

Browse Source
This commit is contained in:
xiaoxian521
2024-03-09 22:45:04 +08:00
parent d543b57e34
commit 70772864ac
152 changed files with 8006 additions and 8599 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/style/dark.scss
View File

@@ -1,12 +1,19 @@
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
/* 暗黑模式适配 */
/* 整体暗色风格适配 */
html.dark {
/* 自定义深色背景颜色 */
// --el-bg-color: #020409;
$border-style: #303030;
$color-white: #fff;
/* 自定义深色背景颜色 */
// --el-bg-color: #020409;
/* 常用border-color 需要时可取用 */
--pure-border-color: rgb(253 253 253 / 12%);
/* switch关闭状态下的color 需要时可取用 */
--pure-switch-off-color: #ffffff3f;
.navbar,
.tags-view,
.contextmenu,
@@ -22,10 +29,6 @@ html.dark {
background: #020409 !important;
}
.frame {
filter: invert(0.9) hue-rotate(180deg);
}
/* 标签页 */
.tags-view {
.arrow-left,
@@ -37,6 +40,15 @@ html.dark {
.arrow-right {
border-left: 1px solid $border-style;
}
.scroll-item {
.el-icon-close {
&:hover {
color: rgb(255 255 255 / 85%) !important;
background-color: rgb(255 255 255 / 12%);
}
}
}
}
/* 项目配置面板 */
@@ -50,20 +62,15 @@ html.dark {
}
}
/* element-plus */
.el-table__cell {
background: var(--el-bg-color);
}
.el-card {
--el-card-bg-color: var(--el-bg-color);
// border: none !important;
}
.el-backtop {
--el-backtop-bg-color: var(--el-color-primary-light-9);
--el-backtop-bg-color: rgb(72 72 78);
--el-backtop-hover-bg-color: var(--el-color-primary);
transition: background-color 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
}
.el-dropdown-menu__item:not(.is-disabled):hover {
@@ -87,12 +94,14 @@ html.dark {
}
}
/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，整体浅色风格在 src/style/element-plus.scss 文件进行了适配 */
.pure-message {
background-color: rgb(36 37 37) !important;
background-image: initial !important;
box-shadow: rgb(13 13 13 / 12%) 0 3px 6px -4px,
rgb(13 13 13 / 8%) 0 6px 16px 0, rgb(13 13 13 / 5%) 0 9px 28px 8px !important;
box-shadow:
rgb(13 13 13 / 12%) 0 3px 6px -4px,
rgb(13 13 13 / 8%) 0 6px 16px 0,
rgb(13 13 13 / 5%) 0 9px 28px 8px !important;
& .el-message__content {
color: $color-white !important;
@@ -111,7 +120,9 @@ html.dark {
/* 自定义菜单搜索样式 */
.pure-search-dialog {
.el-dialog__footer {
box-shadow: 0 -1px 0 0 #555a64, 0 -3px 6px 0 rgb(69 98 155 / 12%);
box-shadow:
0 -1px 0 0 #555a64,
0 -3px 6px 0 rgb(69 98 155 / 12%);
}
.search-footer {
@@ -138,4 +149,17 @@ html.dark {
color: rgb(255 255 255 / 25%);
}
}
/* 仿 el-scrollbar 滚动条样式 支持大多数浏览器，如Chrome、Edge、Firefox、Safari等 */
.pure-scrollbar {
scrollbar-color: rgb(63 64 66) transparent;
::-webkit-scrollbar-thumb {
background-color: rgb(63 64 66);
}
::-webkit-scrollbar-thumb:hover {
background: rgb(92 93 96);
}
}
}

137
src/style/element-plus.scss
View File

@@ -1,37 +1,16 @@
.el-form-item__label {
font-weight: 700;
}
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
.el-upload {
input[type="file"] {
display: none !important;
}
}
.el-upload__input {
display: none;
}
.upload-container {
.el-upload {
width: 100%;
.el-upload-dragger {
width: 100%;
height: 200px;
}
}
}
.el-dropdown-menu {
padding: 0 !important;
}
.el-range-separator {
box-sizing: content-box;
}
.is-dark {
z-index: 9999 !important;
}
@@ -46,12 +25,6 @@
padding: 0 !important;
}
/* 自定义 tooltip 的类名 */
.pure-tooltip {
// 右侧操作面板right-panel类名的z-index为40000，tooltip需要大于它才能显示
z-index: 41000 !important;
}
/* nprogress 适配 element-plus 的主题色 */
#nprogress {
& .bar {
@@ -59,7 +32,8 @@
}
& .peg {
box-shadow: 0 0 10px var(--el-color-primary),
box-shadow:
0 0 10px var(--el-color-primary),
0 0 5px var(--el-color-primary) !important;
}
@@ -70,19 +44,27 @@
}
.pure-dialog {
.el-dialog__header.show-close {
padding-right: 16px;
}
.el-dialog__headerbtn {
top: 16px;
right: 12px;
width: 24px;
height: 24px;
}
.pure-dialog-svg {
color: var(--el-color-info);
}
.el-dialog__headerbtn {
top: 20px;
right: 14px;
width: 24px;
height: 24px;
.el-dialog__footer {
padding-top: 0;
}
}
/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
/* 全局覆盖element-plus的el-tour、el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标和el-upload上传文件列表右侧关闭图标的样式，表现更鲜明 */
.el-dialog__headerbtn,
.el-message-box__headerbtn {
&:hover {
@@ -93,15 +75,19 @@
}
.el-icon {
&.el-tour__close,
&.el-dialog__close,
&.el-drawer__close,
&.el-message-box__close,
&.el-notification__closeBtn {
&.el-notification__closeBtn,
.el-upload-list__item.is-ready &.el-icon--close {
width: 24px;
height: 24px;
border-radius: 4px;
outline: none;
transition: background-color 0.2s, color 0.2s;
transition:
background-color 0.2s,
color 0.2s;
&:hover {
color: rgb(0 0 0 / 88%) !important;
@@ -115,33 +101,27 @@
}
}
/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，整体暗色风格在 src/style/dark.scss 文件进行了适配 */
.pure-message {
padding: 10px 13px !important;
background: #fff !important;
border-width: 0 !important;
box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
box-shadow:
0 3px 6px -4px #0000001f,
0 6px 16px #00000014,
0 9px 28px 8px #0000000d !important;
&.el-message.is-closable .el-message__content {
padding-right: 17px !important;
}
& .el-message__content {
color: #000000d9 !important;
pointer-events: all !important;
background-image: initial !important;
}
& .el-message__icon {
margin-right: 8px !important;
}
& .el-message__closeBtn {
right: 9px !important;
border-radius: 4px;
outline: none;
transition: background-color 0.2s, color 0.2s;
transition:
background-color 0.2s,
color 0.2s;
&:hover {
background-color: rgb(0 0 0 / 6%);
@@ -151,13 +131,20 @@
/* 自定义菜单搜索样式 */
.pure-search-dialog {
.el-dialog__header {
display: none;
@media screen and (width > 760px) and (width <= 940px) {
.el-input__inner {
font-size: 12px;
}
}
.el-dialog__body {
padding-top: 12px;
padding-bottom: 0;
@media screen and (width <= 470px) {
.el-input__inner {
font-size: 12px;
}
}
.el-dialog__header {
display: none;
}
.el-input__inner {
@@ -165,7 +152,37 @@
}
.el-dialog__footer {
padding-bottom: 10px;
box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgb(69 98 155 / 12%);
width: calc(100% + 32px);
padding: 10px 20px;
margin: auto -16px -16px;
box-shadow:
0 -1px 0 0 #e0e3e8,
0 -3px 6px 0 rgb(69 98 155 / 12%);
}
}
/* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。整体暗色风格在 src/style/dark.scss 文件进行了适配 */
.pure-scrollbar {
/* Firefox */
scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */
scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
::-webkit-scrollbar {
width: 6px; /* 滚动条宽度 */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background: transparent; /* 轨道颜色 */
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background-color: rgb(221 222 224);
border-radius: 4px;
}
/* 滚动条滑块：hover状态 */
::-webkit-scrollbar-thumb:hover {
background: rgb(199 201 203); /* 滑块hover颜色 */
}
}

6
src/style/index.scss
View File

@@ -7,6 +7,12 @@
:root {
/* 左侧菜单展开、收起动画时长 */
--pure-transition-duration: 0.3s;
/* 常用border-color 需要时可取用 */
--pure-border-color: rgb(5 5 5 / 6%);
/* switch关闭状态下的color 需要时可取用 */
--pure-switch-off-color: #a6a6a6;
}
/* 灰色模式 */

7
src/style/login.css
View File

@@ -1,6 +1,7 @@
.wave {
position: fixed;
height: 100%;
width: 80%;
left: 0;
bottom: 0;
z-index: -1;
@@ -9,6 +10,7 @@
.login-container {
width: 100vw;
height: 100vh;
max-width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 18rem;
@@ -44,7 +46,10 @@
text-transform: uppercase;
margin: 15px 0;
color: #999;
font: bold 200% Consolas, Monaco, monospace;
font:
bold 200% Consolas,
Monaco,
monospace;
}
@media screen and (max-width: 1180px) {

58
src/style/sidebar.scss
View File

@@ -14,6 +14,17 @@
}
}
/* 修复 windows 下双滚动条问题 https://github.com/pure-admin/vue-pure-admin/pull/936#issuecomment-1968125992 */
.el-popper.pure-scrollbar {
overflow: hidden;
}
/* popper menu 超出内容区可滚动 */
.pure-scrollbar {
max-height: calc(100vh - calc(50px * 2.5));
overflow: hidden auto;
}
.sub-menu-icon {
margin-right: 5px;
font-size: 18px;
@@ -54,7 +65,7 @@
top: 0;
right: 0;
z-index: 998;
width: calc(100% - 210px);
width: calc(100% - #{$sideBarWidth});
/* fixed-header 属性左上角动画 */
transition: width var(--pure-transition-duration);
@@ -83,7 +94,7 @@
overflow: hidden;
font-size: 0;
background: $menuBg;
box-shadow: 0 0 1px #888;
border-right: 1px solid var(--pure-border-color);
/* 展开动画 */
transition: width var(--pure-transition-duration);
@@ -96,16 +107,24 @@
right: 0;
}
.el-scrollbar {
height: calc(100% - 44px);
}
&.has-logo {
.el-scrollbar.pc {
/* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
height: calc(100% - 92px);
}
/* logo: 48px */
.el-scrollbar.mobile {
height: calc(100% - 48px);
}
}
&.no-logo {
.el-scrollbar.pc {
/* leftCollapse: 40px、leftCollapse-shadow: 4px */
height: calc(100% - 44px);
}
.el-scrollbar.mobile {
height: 100%;
}
@@ -116,11 +135,9 @@
}
a {
display: inline-block;
display: flex;
flex-wrap: wrap;
width: 100%;
padding-left: 10px;
}
.el-menu {
@@ -185,7 +202,7 @@
.el-menu .el-menu--inline .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
min-width: $sideBarWidth !important;
font-size: 12px;
font-size: 14px;
background-color: $subMenuBg !important;
}
@@ -239,7 +256,7 @@
.el-menu-item {
span {
font-size: 12px;
font-size: 14px;
}
}
}
@@ -262,7 +279,7 @@
/* 子菜单中还有子菜单 */
.el-menu .el-sub-menu__title {
min-width: $sideBarWidth !important;
font-size: 12px;
font-size: 14px;
background-color: $subMenuBg !important;
}
@@ -317,15 +334,24 @@
margin-top: 0;
}
/* 无子菜单时激活 border-bottom */
a > .is-active.submenu-title-noDropdown {
border-bottom: 2px solid var(--el-menu-active-color);
}
.el-menu--popup {
background-color: $subMenuBg !important;
a > .is-active.submenu-title-noDropdown {
border-bottom: none;
}
.el-menu-item {
color: $menuText;
background-color: $subMenuBg;
span {
font-size: 12px;
font-size: 14px;
}
}
@@ -334,16 +360,10 @@
}
}
/* 无子菜单时激活 border-bottom */
.router-link-exact-active > .submenu-title-noDropdown {
height: 60px;
border-bottom: 2px solid var(--el-menu-active-color);
}
/* 子菜单中还有子菜单 */
.el-menu .el-sub-menu__title {
min-width: $sideBarWidth !important;
font-size: 12px;
font-size: 14px;
background-color: $subMenuBg !important;
&:hover {