Template
first commit
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<svg t="1651118937898" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8601" width="200" height="200"><path d="M924.8 385.6c-22.6-53.4-54.9-101.3-96-142.4-41.1-41.1-89-73.4-142.4-96C631.1 123.8 572.5 112 512 112s-119.1 11.8-174.4 35.2c-53.4 22.6-101.3 54.9-142.4 96-41.1 41.1-73.4 89-96 142.4C75.8 440.9 64 499.5 64 560c0 132.7 58.3 257.7 159.9 343.1l1.7 1.4c5.8 4.8 13.1 7.5 20.6 7.5h531.7c7.5 0 14.8-2.7 20.6-7.5l1.7-1.4C901.7 817.7 960 692.7 960 560c0-60.5-11.9-119.1-35.2-174.4zM761.4 836H262.6C184.5 765.5 140 665.6 140 560c0-99.4 38.7-192.8 109-263 70.3-70.3 163.7-109 263-109 99.4 0 192.8 38.7 263 109 70.3 70.3 109 163.7 109 263 0 105.6-44.5 205.5-122.6 276z" p-id="8602"></path><path d="M623.5 421.5c-3.1-3.1-8.2-3.1-11.3 0L527.7 506c-18.7-5-39.4-0.2-54.1 14.5-21.9 21.9-21.9 57.3 0 79.2 21.9 21.9 57.3 21.9 79.2 0 14.7-14.7 19.5-35.4 14.5-54.1l84.5-84.5c3.1-3.1 3.1-8.2 0-11.3l-28.3-28.3zM490 320h44c4.4 0 8-3.6 8-8v-80c0-4.4-3.6-8-8-8h-44c-4.4 0-8 3.6-8 8v80c0 4.4 3.6 8 8 8zM750 538v44c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8v-44c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8zM762.7 340.8l-31.1-31.1c-3.1-3.1-8.2-3.1-11.3 0l-56.6 56.6c-3.1 3.1-3.1 8.2 0 11.3l31.1 31.1c3.1 3.1 8.2 3.1 11.3 0l56.6-56.6c3.1-3.1 3.1-8.2 0-11.3zM304.1 309.7c-3.1-3.1-8.2-3.1-11.3 0l-31.1 31.1c-3.1 3.1-3.1 8.2 0 11.3l56.6 56.6c3.1 3.1 8.2 3.1 11.3 0l31.1-31.1c3.1-3.1 3.1-8.2 0-11.3l-56.6-56.6zM262 530h-80c-4.4 0-8 3.6-8 8v44c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8v-44c0-4.4-3.6-8-8-8z" p-id="8603"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1 @@
|
||||
<svg t="1661153147729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3352" width="200" height="200"><path d="M704 864v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m-256 704v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="3353"></path></svg>
|
||||
|
After Width: | Height: | Size: 747 B |
@@ -0,0 +1 @@
|
||||
<svg t="1661151768669" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3212" width="200" height="200"><path d="M192 384v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64 256v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m768-256v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64 256v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="3213"></path></svg>
|
||||
|
After Width: | Height: | Size: 746 B |
@@ -0,0 +1 @@
|
||||
<svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 223 B |
@@ -0,0 +1 @@
|
||||
<svg width="15" height="15" aria-label="Enter key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 241 B |
@@ -0,0 +1 @@
|
||||
<svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 694 B |
@@ -0,0 +1 @@
|
||||
<svg width="15" height="15" aria-label="Arrow up" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 223 B |
@@ -0,0 +1,11 @@
|
||||
## 目录说明
|
||||
|
||||
- `common/assets/icons/preserve-color` 目录下存放带颜色的 svg icon
|
||||
|
||||
- `common/assets/icons` 目录存放的 svg icon 会被插件重写 `fill` 和 `stroke` 属性，使得图片自带的颜色丢失，从而继承父元素的颜色
|
||||
|
||||
## 使用说明
|
||||
|
||||
`common/assets/icons/preserve-color` 目录下需要添加 `preserve-color/` 前缀，像这样： `<SvgIcon name="preserve-color/name" />`
|
||||
|
||||
`common/assets/icons` 目录下则不需要，像这样： `<SvgIcon name="name" />`
|
||||
@@ -0,0 +1 @@
|
||||
<svg t="1691398959507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2431" width="200" height="200"><path d="M862.609 816.955L726.44 680.785l-0.059-0.056a358.907 358.907 0 0 0 56.43-91.927c18.824-44.507 28.369-91.767 28.369-140.467 0-48.701-9.545-95.96-28.369-140.467-18.176-42.973-44.19-81.56-77.319-114.689-33.13-33.129-71.717-59.144-114.69-77.32-44.507-18.825-91.767-28.37-140.467-28.37-48.701 0-95.96 9.545-140.467 28.37-42.973 18.176-81.56 44.19-114.689 77.32-33.13 33.129-59.144 71.717-77.32 114.689-18.825 44.507-28.37 91.767-28.37 140.467 0 48.7 9.545 95.96 28.37 140.467 18.176 42.974 44.19 81.561 77.32 114.69 33.129 33.129 71.717 59.144 114.689 77.319 44.507 18.824 91.767 28.369 140.467 28.369 48.7 0 95.96-9.545 140.467-28.369 32.78-13.864 62.997-32.303 90.197-54.968 0.063 0.064 0.122 0.132 0.186 0.195l136.169 136.17c6.25 6.25 14.438 9.373 22.628 9.373 8.188 0 16.38-3.125 22.627-9.372 12.496-12.496 12.496-32.758 0-45.254z m-412.274-69.466c-79.907 0-155.031-31.118-211.534-87.62-56.503-56.503-87.62-131.627-87.62-211.534s31.117-155.031 87.62-211.534c56.502-56.503 131.626-87.62 211.534-87.62s155.031 31.117 211.534 87.62c56.502 56.502 87.62 131.626 87.62 211.534s-31.118 155.031-87.62 211.534c-56.503 56.502-131.627 87.62-211.534 87.62z" p-id="2432"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* @description dark-blue 主题模式下的 Element Plus CSS 变量
|
||||
* @description 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
|
||||
* @description 也可以打开浏览器控制台选择元素，查看要覆盖的变量名
|
||||
*/
|
||||
|
||||
/* 基础颜色 */
|
||||
html.dark-blue {
|
||||
/* color-primary */
|
||||
--el-color-primary: #00bb99;
|
||||
--el-color-primary-light-3: #00bb99b3;
|
||||
--el-color-primary-light-5: #00bb9980;
|
||||
--el-color-primary-light-7: #00bb994d;
|
||||
--el-color-primary-light-8: #00bb9933;
|
||||
--el-color-primary-light-9: #00bb991a;
|
||||
--el-color-primary-dark-2: #00bb99;
|
||||
/* color-success */
|
||||
--el-color-success: #67c23a;
|
||||
--el-color-success-light-3: #67c23ab3;
|
||||
--el-color-success-light-5: #67c23a80;
|
||||
--el-color-success-light-7: #67c23a4d;
|
||||
--el-color-success-light-8: #67c23a33;
|
||||
--el-color-success-light-9: #67c23a1a;
|
||||
--el-color-success-dark-2: #67c23a;
|
||||
/* color-warning */
|
||||
--el-color-warning: #e6a23c;
|
||||
--el-color-warning-light-3: #e6a23cb3;
|
||||
--el-color-warning-light-5: #e6a23c80;
|
||||
--el-color-warning-light-7: #e6a23c4d;
|
||||
--el-color-warning-light-8: #e6a23c33;
|
||||
--el-color-warning-light-9: #e6a23c1a;
|
||||
--el-color-warning-dark-2: #e6a23c;
|
||||
/* color-danger */
|
||||
--el-color-danger: #f56c6c;
|
||||
--el-color-danger-light-3: #f56c6cb3;
|
||||
--el-color-danger-light-5: #f56c6c80;
|
||||
--el-color-danger-light-7: #f56c6c4d;
|
||||
--el-color-danger-light-8: #f56c6c33;
|
||||
--el-color-danger-light-9: #f56c6c1a;
|
||||
--el-color-danger-dark-2: #f56c6c;
|
||||
/* color-error */
|
||||
--el-color-error: #f56c6c;
|
||||
--el-color-error-light-3: #f56c6cb3;
|
||||
--el-color-error-light-5: #f56c6c80;
|
||||
--el-color-error-light-7: #f56c6c4d;
|
||||
--el-color-error-light-8: #f56c6c33;
|
||||
--el-color-error-light-9: #f56c6c1a;
|
||||
--el-color-error-dark-2: #f56c6c;
|
||||
/* color-info */
|
||||
--el-color-info: #909399;
|
||||
--el-color-info-light-3: #909399b3;
|
||||
--el-color-info-light-5: #90939980;
|
||||
--el-color-info-light-7: #9093994d;
|
||||
--el-color-info-light-8: #90939933;
|
||||
--el-color-info-light-9: #9093991a;
|
||||
--el-color-info-dark-2: #909399;
|
||||
/* text-color */
|
||||
--el-text-color-primary: #e5eaf3;
|
||||
--el-text-color-regular: #cfd3dc;
|
||||
--el-text-color-secondary: #a3a6ad;
|
||||
--el-text-color-placeholder: #8d9095;
|
||||
--el-text-color-disabled: #6c6e72;
|
||||
/* border-color */
|
||||
--el-border-color-darker: #003380;
|
||||
--el-border-color-dark: #003380;
|
||||
--el-border-color: #003380;
|
||||
--el-border-color-light: #003380;
|
||||
--el-border-color-lighter: #003380;
|
||||
--el-border-color-extra-light: #003380;
|
||||
/* fill-color */
|
||||
--el-fill-color-darker: #002b6b;
|
||||
--el-fill-color-dark: #002b6b;
|
||||
--el-fill-color: #002b6b;
|
||||
--el-fill-color-light: #002359;
|
||||
--el-fill-color-lighter: #002359;
|
||||
--el-fill-color-blank: #001b44;
|
||||
--el-fill-color-extra-light: #001b44;
|
||||
/* bg-color */
|
||||
--el-bg-color-page: #001535;
|
||||
--el-bg-color: #001b44;
|
||||
--el-bg-color-overlay: #002359;
|
||||
/* mask-color */
|
||||
--el-mask-color: rgba(0, 0, 0, 0.5);
|
||||
--el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* button */
|
||||
html.dark-blue .el-button {
|
||||
--el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// 自定义 Element Plus 样式
|
||||
|
||||
// 分页
|
||||
.el-pagination {
|
||||
// 参考 Bootstrap 的响应式设计 WIDTH = 768
|
||||
@media screen and (max-width: 768px) {
|
||||
.el-pagination__total,
|
||||
.el-pagination__sizes,
|
||||
.el-pagination__jump,
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
// 全局 CSS 变量
|
||||
@import "./variables.css";
|
||||
// Transition
|
||||
@import "./transition.scss";
|
||||
// Element Plus
|
||||
@import "./element-plus.css";
|
||||
@import "./element-plus.scss";
|
||||
// Vxe Table
|
||||
@import "./vxe-table.css";
|
||||
@import "./vxe-table.scss";
|
||||
// 注册多主题
|
||||
@import "./theme/register.scss";
|
||||
// Mixins
|
||||
@import "./mixins.scss";
|
||||
// View Transition
|
||||
@import "./view-transition.scss";
|
||||
|
||||
// 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
// 灰色模式
|
||||
&.grey-mode {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
// 色弱模式
|
||||
&.color-weakness {
|
||||
filter: invert(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
color: var(--v3-body-text-color);
|
||||
background-color: var(--v3-body-bg-color);
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family:
|
||||
Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
|
||||
sans-serif;
|
||||
@extend %scrollbar;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: inherit;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:focus {
|
||||
outline: none;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
// 清除浮动
|
||||
%clearfix {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// 美化原生滚动条
|
||||
%scrollbar {
|
||||
// 整个滚动条
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
// 滚动条上的滚动滑块
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #90939955;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #90939977;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:active {
|
||||
background-color: #90939999;
|
||||
}
|
||||
// 当同时有垂直滚动条和水平滚动条时交汇的部分
|
||||
&::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// 文本溢出时显示省略号
|
||||
%ellipsis {
|
||||
// 隐藏溢出的文本
|
||||
overflow: hidden;
|
||||
// 防止文本换行
|
||||
white-space: nowrap;
|
||||
// 文本内容溢出容器时，文本末尾显示省略号
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
// Element Plus 相关
|
||||
|
||||
// 侧边栏的 item 的 popper
|
||||
.el-popper {
|
||||
.el-menu {
|
||||
background-color: var(--el-bg-color);
|
||||
.el-menu-item {
|
||||
background-color: var(--el-bg-color);
|
||||
&.is-active,
|
||||
&:hover {
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.el-sub-menu__title {
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
.el-sub-menu {
|
||||
&.is-active {
|
||||
> .el-sub-menu__title {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu--horizontal {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
.#{$theme-name} {
|
||||
@import "./layouts.scss";
|
||||
@import "./element-plus.scss";
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
// Layout 相关
|
||||
|
||||
.app-wrapper {
|
||||
// 侧边栏
|
||||
.sidebar-container {
|
||||
background-color: var(--el-bg-color);
|
||||
.el-menu {
|
||||
background-color: var(--el-bg-color);
|
||||
.el-menu-item {
|
||||
background-color: var(--el-bg-color);
|
||||
&.is-active,
|
||||
&:hover {
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-sub-menu__title {
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
.el-sub-menu {
|
||||
&.is-active {
|
||||
> .el-sub-menu__title {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧设置面板
|
||||
.handle-button {
|
||||
background-color: lighten($theme-bg-color, 20%) !important;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "./variables.scss";
|
||||
@import "../core/index.scss";
|
||||
@@ -0,0 +1,6 @@
|
||||
// dark-blue 主题下的变量
|
||||
|
||||
// 主题名称
|
||||
$theme-name: "dark-blue";
|
||||
// 主题背景颜色
|
||||
$theme-bg-color: #001b44;
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "./variables.scss";
|
||||
@import "../core/index.scss";
|
||||
@@ -0,0 +1,6 @@
|
||||
// dark 主题下的变量
|
||||
|
||||
// 主题名称
|
||||
$theme-name: "dark";
|
||||
// 主题背景颜色
|
||||
$theme-bg-color: #141414;
|
||||
@@ -0,0 +1,3 @@
|
||||
// 注册多主题
|
||||
@import "./dark/index.scss";
|
||||
@import "./dark-blue/index.scss";
|
||||
@@ -0,0 +1,25 @@
|
||||
// https://cn.vuejs.org/guide/built-ins/transition
|
||||
|
||||
// fade-transform
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.fade-transform-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
// layout-logo-fade
|
||||
.layout-logo-fade-enter-active,
|
||||
.layout-logo-fade-leave-active {
|
||||
transition: opacity 1.5s;
|
||||
}
|
||||
.layout-logo-fade-enter-from,
|
||||
.layout-logo-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/* 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
|
||||
|
||||
:root {
|
||||
/* Body */
|
||||
--v3-body-text-color: var(--el-text-color-primary);
|
||||
--v3-body-bg-color: var(--el-bg-color-page);
|
||||
/* Header 区域 = NavigationBar 组件 + TagsView 组件 */
|
||||
--v3-header-height: calc(
|
||||
var(--v3-navigationbar-height) + var(--v3-tagsview-height) + var(--v3-header-border-bottom-width)
|
||||
);
|
||||
--v3-header-bg-color: var(--el-bg-color);
|
||||
--v3-header-box-shadow: var(--el-box-shadow-lighter);
|
||||
--v3-header-border-bottom-width: 1px;
|
||||
--v3-header-border-bottom: var(--v3-header-border-bottom-width) solid var(--el-fill-color);
|
||||
/* NavigationBar 组件 */
|
||||
--v3-navigationbar-height: 50px;
|
||||
--v3-navigationbar-text-color: var(--el-text-color-regular);
|
||||
/* Sidebar 组件（左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效） */
|
||||
--v3-sidebar-width: 220px;
|
||||
--v3-sidebar-hide-width: 58px;
|
||||
--v3-sidebar-border-right: 1px solid var(--el-fill-color);
|
||||
--v3-sidebar-menu-item-height: 60px;
|
||||
--v3-sidebar-menu-tip-line-bg-color: var(--el-color-primary);
|
||||
--v3-sidebar-menu-bg-color: #001428;
|
||||
--v3-sidebar-menu-hover-bg-color: #409eff10;
|
||||
--v3-sidebar-menu-text-color: #cfd3dc;
|
||||
--v3-sidebar-menu-active-text-color: #ffffff;
|
||||
/* TagsView 组件 */
|
||||
--v3-tagsview-height: 34px;
|
||||
--v3-tagsview-text-color: var(--el-text-color-regular);
|
||||
--v3-tagsview-tag-active-text-color: #ffffff;
|
||||
--v3-tagsview-tag-bg-color: var(--el-bg-color);
|
||||
--v3-tagsview-tag-active-bg-color: var(--el-color-primary);
|
||||
--v3-tagsview-tag-border-radius: 2px;
|
||||
--v3-tagsview-tag-border-color: var(--el-border-color-lighter);
|
||||
--v3-tagsview-tag-active-border-color: var(--el-color-primary);
|
||||
--v3-tagsview-tag-icon-hover-bg-color: #00000030;
|
||||
--v3-tagsview-tag-icon-hover-color: #ffffff;
|
||||
--v3-tagsview-contextmenu-text-color: var(--el-text-color-regular);
|
||||
--v3-tagsview-contextmenu-hover-text-color: var(--el-text-color-primary);
|
||||
--v3-tagsview-contextmenu-bg-color: var(--el-bg-color-overlay);
|
||||
--v3-tagsview-contextmenu-hover-bg-color: var(--el-fill-color);
|
||||
--v3-tagsview-contextmenu-box-shadow: var(--el-box-shadow);
|
||||
/* Hamburger 组件 */
|
||||
--v3-hamburger-text-color: var(--el-text-color-primary);
|
||||
/* RightPanel 组件 */
|
||||
--v3-rightpanel-button-bg-color: #001428;
|
||||
}
|
||||
|
||||
/* 内容区放大时，将不需要的组件隐藏 */
|
||||
body.content-large {
|
||||
/* Header 区域 = TagsView 组件 */
|
||||
--v3-header-height: var(--v3-tagsview-height);
|
||||
/* NavigationBar 组件 */
|
||||
--v3-navigationbar-height: 0px;
|
||||
/* Sidebar 组件 */
|
||||
--v3-sidebar-width: 0px;
|
||||
--v3-sidebar-hide-width: 0px;
|
||||
}
|
||||
|
||||
/* 内容区全屏时，将不需要的组件隐藏 */
|
||||
body.content-full {
|
||||
/* Header 区域 */
|
||||
--v3-header-height: 0px;
|
||||
/* NavigationBar 组件 */
|
||||
--v3-navigationbar-height: 0px;
|
||||
/* Sidebar 组件 */
|
||||
--v3-sidebar-width: 0px;
|
||||
--v3-sidebar-hide-width: 0px;
|
||||
/* TagsView 组件 */
|
||||
--v3-tagsview-height: 0px;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// 控制切换主题时的动画效果（只在较新的浏览器上生效，例如 Chrome 111+）
|
||||
|
||||
::view-transition-old(root) {
|
||||
animation: none;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
animation: 0.5s ease-in clip-animation;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
@keyframes clip-animation {
|
||||
from {
|
||||
clip-path: circle(0px at var(--v3-theme-x) var(--v3-theme-y));
|
||||
}
|
||||
to {
|
||||
clip-path: circle(var(--v3-theme-r) at var(--v3-theme-x) var(--v3-theme-y));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* @description 所有主题模式下的 Vxe Table CSS 变量
|
||||
* @description 用 Element Plus 的 CSS 变量来覆写 Vxe Table 的 CSS 变量，目的是使 Vxe Table 支持多主题模式且样式统一
|
||||
* @description 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* color */
|
||||
--vxe-font-color: var(--el-text-color-regular);
|
||||
--vxe-primary-color: var(--el-color-primary);
|
||||
--vxe-success-color: var(--el-color-success);
|
||||
--vxe-info-color: var(--el-color-info);
|
||||
--vxe-warning-color: var(--el-color-warning);
|
||||
--vxe-danger-color: var(--el-color-danger);
|
||||
|
||||
--vxe-font-lighten-color: var(--el-text-color-primary);
|
||||
--vxe-primary-lighten-color: var(--el-color-primary-light-3);
|
||||
--vxe-success-lighten-color: var(--el-color-success-light-3);
|
||||
--vxe-info-lighten-color: var(--el-color-info-light-3);
|
||||
--vxe-warning-lighten-color: var(--el-color-warning-light-3);
|
||||
--vxe-danger-lighten-color: var(--el-color-danger-light-3);
|
||||
|
||||
--vxe-font-darken-color: var(--el-text-color-secondary);
|
||||
--vxe-primary-darken-color: var(--el-color-primary-dark-2);
|
||||
--vxe-success-darken-color: var(--el-color-success-dark-2);
|
||||
--vxe-info-darken-color: var(--el-color-info-dark-2);
|
||||
--vxe-warning-darken-color: var(--el-color-warning-dark-2);
|
||||
--vxe-danger-darken-color: var(--el-color-danger-dark-2);
|
||||
|
||||
--vxe-font-disabled-color: var(--el-text-color-disabled);
|
||||
--vxe-primary-disabled-color: var(--el-color-primary-light-5);
|
||||
--vxe-success-disabled-color: var(--el-color-success-light-5);
|
||||
--vxe-info-disabled-color: var(--el-color-info-light-5);
|
||||
--vxe-warning-disabled-color: var(--el-color-warning-light-5);
|
||||
--vxe-danger-disabled-color: var(--el-color-danger-light-5);
|
||||
|
||||
/* input/radio/checkbox */
|
||||
--vxe-input-border-color: var(--el-border-color);
|
||||
--vxe-input-disabled-color: var(--el-text-color-disabled);
|
||||
--vxe-input-disabled-background-color: var(--el-fill-color-light);
|
||||
--vxe-input-placeholder-color: var(--el-text-color-placeholder);
|
||||
|
||||
/* popup */
|
||||
--vxe-table-popup-border-color: var(--el-border-color);
|
||||
|
||||
/* table */
|
||||
--vxe-table-header-font-color: var(--el-text-color-regular);
|
||||
--vxe-table-footer-font-color: var(--el-text-color-regular);
|
||||
--vxe-table-border-color: var(--el-border-color-lighter);
|
||||
--vxe-table-header-background-color: var(--el-bg-color);
|
||||
--vxe-table-body-background-color: var(--el-bg-color);
|
||||
--vxe-table-footer-background-color: var(--el-bg-color);
|
||||
|
||||
--vxe-table-row-hover-background-color: var(--el-fill-color-light);
|
||||
--vxe-table-row-current-background-color: var(--el-fill-color-light);
|
||||
--vxe-table-row-hover-current-background-color: var(--el-fill-color-light);
|
||||
|
||||
--vxe-table-checkbox-range-background-color: var(--el-fill-color-light);
|
||||
|
||||
/* menu */
|
||||
--vxe-table-menu-background-color: var(--el-bg-color-overlay);
|
||||
|
||||
/* loading */
|
||||
--vxe-loading-color: var(--el-color-primary);
|
||||
--vxe-loading-background-color: var(--el-mask-color);
|
||||
|
||||
/* validate */
|
||||
--vxe-table-validate-error-color: var(--el-color-danger);
|
||||
|
||||
/* toolbar */
|
||||
--vxe-toolbar-background-color: var(--el-bg-color);
|
||||
--vxe-toolbar-custom-active-background-color: var(--el-bg-color-overlay);
|
||||
--vxe-toolbar-panel-background-color: var(--el-bg-color-overlay);
|
||||
|
||||
/* pager */
|
||||
--vxe-pager-background-color: var(--el-bg-color);
|
||||
|
||||
/* modal */
|
||||
--vxe-modal-header-background-color: var(--el-bg-color);
|
||||
--vxe-modal-body-background-color: var(--el-bg-color);
|
||||
--vxe-modal-border-color: var(--el-border-color);
|
||||
|
||||
/* button */
|
||||
--vxe-button-default-background-color: var(--el-bg-color-overlay);
|
||||
|
||||
/* input */
|
||||
--vxe-input-background-color: var(--el-fill-color-blank);
|
||||
--vxe-input-panel-background-color: var(--el-fill-color-blank);
|
||||
|
||||
/* form */
|
||||
--vxe-form-background-color: var(--el-bg-color);
|
||||
--vxe-form-validate-error-color: var(--el-color-danger);
|
||||
|
||||
/* select */
|
||||
--vxe-select-option-hover-background-color: var(--el-bg-color-overlay);
|
||||
--vxe-select-panel-background-color: var(--el-bg-color);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
// 自定义 Vxe Table 样式
|
||||
|
||||
.vxe-grid {
|
||||
// 表单
|
||||
&--form-wrapper {
|
||||
.vxe-form {
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 工具栏
|
||||
&--toolbar-wrapper {
|
||||
.vxe-toolbar {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页
|
||||
&--pager-wrapper {
|
||||
.vxe-pager {
|
||||
height: 70px;
|
||||
padding: 0 20px;
|
||||
&--wrapper {
|
||||
// 参考 Bootstrap 的响应式设计 WIDTH = 768
|
||||
@media screen and (max-width: 768px) {
|
||||
.vxe-pager--total,
|
||||
.vxe-pager--sizes,
|
||||
.vxe-pager--jump,
|
||||
.vxe-pager--jump-prev,
|
||||
.vxe-pager--jump-next {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user