diff --git a/docs/zh/guide/change-log.md b/docs/zh/guide/change-log.md index e5571582..3b623983 100644 --- a/docs/zh/guide/change-log.md +++ b/docs/zh/guide/change-log.md @@ -12,6 +12,9 @@ * [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-` * [ 修复 ] 修复 `highlight` 组件和 `markdown` 组件的样式冲突 * [ 修改 ] 内置组件名称统一改为 `d2-` 前缀，统一使用横线连接 (kebab-case) 风格 +* [ 修改 ] 顶栏 logo 阴影删除 +* [ 新增 ] 主题系统 +* [ 新增 ] 三个主题，分别为 `d2admin 经典`，`简约线条`，`流星` ## v1.0.0 diff --git a/src/assets/image/logo/github-banner.png.REMOVED.git-id b/src/assets/image/logo/github-banner.png.REMOVED.git-id deleted file mode 100644 index 8b778a2b..00000000 --- a/src/assets/image/logo/github-banner.png.REMOVED.git-id +++ /dev/null @@ -1 +0,0 @@ -d37095e66cfdce9f355275f0b0a92d6ac646c2af \ No newline at end of file diff --git a/src/assets/image/logo/header-dev.png.REMOVED.git-id b/src/assets/image/logo/header-dev.png.REMOVED.git-id deleted file mode 100644 index bc39778b..00000000 --- a/src/assets/image/logo/header-dev.png.REMOVED.git-id +++ /dev/null @@ -1 +0,0 @@ -3fcdead32f4159d2c1a90ce6442632dc64e672a5 \ No newline at end of file diff --git a/src/assets/image/logo/header-test.png.REMOVED.git-id b/src/assets/image/logo/header-test.png.REMOVED.git-id deleted file mode 100644 index 25213f59..00000000 --- a/src/assets/image/logo/header-test.png.REMOVED.git-id +++ /dev/null @@ -1 +0,0 @@ -5d8b6bdb850f8f23d983ed2e18518c7fad31ca00 \ No newline at end of file diff --git a/src/assets/image/logo/header.png.REMOVED.git-id b/src/assets/image/logo/header.png.REMOVED.git-id deleted file mode 100644 index e78ecb52..00000000 --- a/src/assets/image/logo/header.png.REMOVED.git-id +++ /dev/null @@ -1 +0,0 @@ -762198f6b192d9faef94d5eab316518f842f9c88 \ No newline at end of file diff --git a/src/assets/image/logo/header@1x.png.REMOVED.git-id b/src/assets/image/logo/header@1x.png.REMOVED.git-id deleted file mode 100644 index e78ecb52..00000000 --- a/src/assets/image/logo/header@1x.png.REMOVED.git-id +++ /dev/null @@ -1 +0,0 @@ -762198f6b192d9faef94d5eab316518f842f9c88 \ No newline at end of file diff --git a/src/assets/style/theme/d2/index.scss b/src/assets/style/theme/d2/index.scss index cad7dab9..647b4bc6 100644 --- a/src/assets/style/theme/d2/index.scss +++ b/src/assets/style/theme/d2/index.scss @@ -30,22 +30,28 @@ // [组件] d2-container-full .d2-container-full { - border: $theme-container-border; + border: $theme-container-border-outer; border-bottom: none; + background-color: $theme-container-background-color; .d2-container-full__header { - border-bottom: $theme-container-border; + border-bottom: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; } .d2-container-full__footer { - border-top: $theme-container-border; + border-top: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; } } // [组件] d2-container-card .d2-container-card { - border: $theme-container-border; + border: $theme-container-border-outer; + background-color: $theme-container-background-color; .el-card__header { - border-bottom: $theme-container-border; + border-bottom: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; } } + // 顶栏 .el-header { // 切换按钮 diff --git a/src/assets/style/theme/d2/setting.scss b/src/assets/style/theme/d2/setting.scss index e9ce12b8..14d9f9be 100644 --- a/src/assets/style/theme/d2/setting.scss +++ b/src/assets/style/theme/d2/setting.scss @@ -4,8 +4,12 @@ $theme-name: 'd2'; $theme-bg-color: $color-bg; // 主题背景图片 // $theme-bg-image: '/static/image/bg/xxx.jpg'; -// container组件的边框 -$theme-container-border: 1px solid $color-border-1; + +// container组件 +$theme-container-background-color: rgba(#FFF, 1); +$theme-container-header-footer-background-color: rgba(#FFF, .6); +$theme-container-border-inner: 1px solid $color-border-2; +$theme-container-border-outer: 1px solid $color-border-1; // 顶栏和侧边栏中展开的菜单 hover 状态下 $theme-menu-item-color-hover: #293849; diff --git a/src/assets/style/theme/line/index.scss b/src/assets/style/theme/line/index.scss new file mode 100644 index 00000000..ff807f84 --- /dev/null +++ b/src/assets/style/theme/line/index.scss @@ -0,0 +1,162 @@ +@import '../theme.scss'; +@import './setting.scss'; + +.theme-#{$theme-name} { + + .layout-main { + background-color: $theme-bg-color; + background-image: url($theme-bg-image); + } + // 菜单项目 + @mixin theme-menu-hover-style { + color: $theme-menu-item-color-hover; + i { + color: $theme-menu-item-color-hover; + } + background-color: $theme-menu-item-background-color-hover; + } + .el-submenu__title:hover { + @include theme-menu-hover-style; + } + .el-menu-item:hover { + @include theme-menu-hover-style; + } + .el-menu--horizontal .el-menu-item:not(.is-disabled):hover { + @include theme-menu-hover-style; + } + .el-menu--horizontal .el-menu .el-submenu__title:hover { + @include theme-menu-hover-style; + } + + // [组件] d2-container-full + .d2-container-full { + border: $theme-container-border-outer; + border-bottom: none; + background-color: $theme-container-background-color; + .d2-container-full__header { + border-bottom: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; + } + .d2-container-full__footer { + border-top: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; + } + } + // [组件] d2-container-card + .d2-container-card { + border: $theme-container-border-outer; + background-color: $theme-container-background-color; + .el-card__header { + border-bottom: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; + } + } + + // 顶栏 + .el-header { + // 切换按钮 + .toggle-aside-btn { + i { + color: $theme-header-item-color; + background-color: $theme-header-item-background-color; + &:hover { + color: $theme-header-item-color-hover; + } + } + } + // 顶栏菜单 + .el-menu { + .el-menu-item { + transition: border-top-color 0s; + color: $theme-header-item-color; + background-color: $theme-header-item-background-color; + &:hover { + color: $theme-header-item-color-hover; + background-color: $theme-header-item-background-color-hover; + } + &:focus { + color: $theme-header-item-color-focus; + background-color: $theme-header-item-background-color-focus; + } + &.is-active { + color: $theme-header-item-color-active; + background-color: $theme-header-item-background-color-active; + } + } + .el-submenu { + .el-submenu__title { + transition: border-top-color 0s; + color: $theme-header-item-color; + background-color: $theme-header-item-background-color; + .el-submenu__icon-arrow { + color: $theme-header-item-color; + } + &:hover { + color: $theme-header-item-color-hover; + background-color: $theme-header-item-background-color-hover; + } + &:focus { + color: $theme-header-item-color-focus; + background-color: $theme-header-item-background-color-focus; + } + } + } + } + // 顶栏右侧 + .d2-header-right { + .btn-text { + color: $theme-header-item-color; + &.can-hover { + &:hover { + color: $theme-header-item-color-hover; + background-color: $theme-header-item-background-color-hover; + } + } + } + } + } + // [布局] 顶栏下面 + .el-container { + // 侧边栏 + .el-aside { + // [菜单] 正常状态 + .el-menu { + .el-menu-item { + color: $theme-aside-item-color; + background-color: $theme-aside-item-background-color; + i { + color: $theme-aside-item-color; + } + &:hover { + color: $theme-aside-item-color-hover; + background-color: $theme-aside-item-background-color-hover; + } + &:focus { + color: $theme-aside-item-color-focus; + background-color: $theme-aside-item-background-color-focus; + } + &.is-active { + color: $theme-aside-item-color-active; + background-color: $theme-aside-item-background-color-active; + } + } + } + .el-submenu { + .el-submenu__title { + color: $theme-aside-item-color; + background-color: $theme-aside-item-background-color; + i { + color: $theme-aside-item-color; + } + .el-submenu__icon-arrow { + color: $theme-aside-item-color; + } + &:hover { + color: $theme-aside-item-color-hover; + background-color: $theme-aside-item-background-color-hover; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/style/theme/line/setting.scss b/src/assets/style/theme/line/setting.scss new file mode 100644 index 00000000..075996d9 --- /dev/null +++ b/src/assets/style/theme/line/setting.scss @@ -0,0 +1,42 @@ +// 主题名称 +$theme-name: 'line'; +// 主题背景颜色 +$theme-bg-color: $color-bg; +// 主题背景图片 +$theme-bg-image: '/static/image/bg/line-squashed.jpg'; + +// container组件 +$theme-container-background-color: rgba(#FFF, .8); +$theme-container-header-footer-background-color: rgba(#FFF, .6); +$theme-container-border-inner: 1px solid $color-border-2; +$theme-container-border-outer: 1px solid $color-border-1; + +// 顶栏和侧边栏中展开的菜单 hover 状态下 +$theme-menu-item-color-hover: #293849; +$theme-menu-item-background-color-hover: #ecf5ff; + +// 顶栏上的文字颜色 +$theme-header-item-color: $color-text-normal; +$theme-header-item-background-color: transparent; +// 顶栏上的项目在 hover 时 +$theme-header-item-color-hover: $color-text-main; +$theme-header-item-background-color-hover: rgba(#000, .02); +// 顶栏上的项目在 focus 时 +$theme-header-item-color-focus: $color-text-main; +$theme-header-item-background-color-focus: rgba(#000, .02); +// 顶栏上的项目在 active 时 +$theme-header-item-color-active: $color-text-main; +$theme-header-item-background-color-active: rgba(#000, .03); + +// 侧边栏上的文字颜色 +$theme-aside-item-color: $color-text-normal; +$theme-aside-item-background-color: transparent; +// 侧边栏上的项目在 hover 时 +$theme-aside-item-color-hover: $color-text-main; +$theme-aside-item-background-color-hover: rgba(#000, .02); +// 侧边栏上的项目在 focus 时 +$theme-aside-item-color-focus: $color-text-main; +$theme-aside-item-background-color-focus: rgba(#000, .02); +// 侧边栏上的项目在 active 时 +$theme-aside-item-color-active: $color-text-main; +$theme-aside-item-background-color-active: rgba(#000, .03); \ No newline at end of file diff --git a/src/assets/style/theme/star/index.scss b/src/assets/style/theme/star/index.scss index e2221d38..ff807f84 100644 --- a/src/assets/style/theme/star/index.scss +++ b/src/assets/style/theme/star/index.scss @@ -30,20 +30,28 @@ // [组件] d2-container-full .d2-container-full { + border: $theme-container-border-outer; + border-bottom: none; + background-color: $theme-container-background-color; .d2-container-full__header { - border-bottom: $theme-container-border; + border-bottom: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; } .d2-container-full__footer { - border-top: $theme-container-border; + border-top: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; } } // [组件] d2-container-card .d2-container-card { - border: $theme-container-border; + border: $theme-container-border-outer; + background-color: $theme-container-background-color; .el-card__header { - border-bottom: $theme-container-border; + border-bottom: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; } } + // 顶栏 .el-header { // 切换按钮 diff --git a/src/assets/style/theme/star/setting.scss b/src/assets/style/theme/star/setting.scss index 11c9cb77..0c16d9f7 100644 --- a/src/assets/style/theme/star/setting.scss +++ b/src/assets/style/theme/star/setting.scss @@ -3,9 +3,13 @@ $theme-name: 'star'; // 主题背景颜色 $theme-bg-color: #EFF4F8; // 主题背景图片 -$theme-bg-image: '/static/image/bg/star.jpg'; -// container组件的边框 -$theme-container-border: 1px solid #d8dfea; +$theme-bg-image: '/static/image/bg/star-squashed.jpg'; + +// container组件 +$theme-container-background-color: rgba(#FFF, .9); +$theme-container-header-footer-background-color: rgba(#FFF, .6); +$theme-container-border-inner: 1px solid #8fb0b1; +$theme-container-border-outer: none; // 顶栏和侧边栏中展开的菜单 hover 状态下 $theme-menu-item-color-hover: #293849; diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss index 70187876..93198426 100644 --- a/src/assets/style/theme/theme.scss +++ b/src/assets/style/theme/theme.scss @@ -122,7 +122,6 @@ position: absolute; border-top-left-radius: 4px; border-top-right-radius: 4px; - background-color: #FFF; overflow: hidden; color: #303133; &:hover { diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue index 6493b856..69a5aead 100644 --- a/src/components/core/d2-layout-main/index.vue +++ b/src/components/core/d2-layout-main/index.vue @@ -3,8 +3,8 @@
- - + +
@@ -29,7 +29,7 @@