diff --git a/src/assets/style/theme/line/index.scss b/src/assets/style/theme/line/index.scss new file mode 100644 index 00000000..cc521169 --- /dev/null +++ b/src/assets/style/theme/line/index.scss @@ -0,0 +1,157 @@ +@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; + .d2-container-full__header { + border-bottom: $theme-container-border-inner; + } + .d2-container-full__footer { + border-top: $theme-container-border-inner; + } + } + // [组件] d2-container-card + .d2-container-card { + border: $theme-container-border-outer; + .el-card__header { + border-bottom: $theme-container-border-inner; + } + } + + // 顶栏 + .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..a069c5e9 --- /dev/null +++ b/src/assets/style/theme/line/setting.scss @@ -0,0 +1,39 @@ +// 主题名称 +$theme-name: 'line'; +// 主题背景颜色 +$theme-bg-color: $color-bg; +// 主题背景图片 +$theme-bg-image: '/static/image/bg/line-squashed.jpg'; +// container组件的边框 +$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/setting.scss b/src/assets/style/theme/star/setting.scss index a9a6cee6..87898e6a 100644 --- a/src/assets/style/theme/star/setting.scss +++ b/src/assets/style/theme/star/setting.scss @@ -3,7 +3,7 @@ $theme-name: 'star'; // 主题背景颜色 $theme-bg-color: #EFF4F8; // 主题背景图片 -$theme-bg-image: '/static/image/bg/star.jpg'; +$theme-bg-image: '/static/image/bg/star-squashed.jpg'; // container组件的边框 $theme-container-border-inner: 1px solid $color-border-2; $theme-container-border-outer: none; diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue index 3c2b711c..69a5aead 100644 --- a/src/components/core/d2-layout-main/index.vue +++ b/src/components/core/d2-layout-main/index.vue @@ -66,5 +66,6 @@ export default { diff --git a/src/store/modules/theme.js b/src/store/modules/theme.js index 63e5c4e8..fd720184 100644 --- a/src/store/modules/theme.js +++ b/src/store/modules/theme.js @@ -8,6 +8,11 @@ export default { value: 'd2', preview: '/static/image/theme/d2/preview@2x.png' }, + { + name: '简约线条', + value: 'line', + preview: '/static/image/theme/line/preview@2x.png' + }, { name: '流星', value: 'star', diff --git a/static/image/bg/bg.psd.REMOVED.git-id b/static/image/bg/bg.psd.REMOVED.git-id new file mode 100644 index 00000000..5c1e5e22 --- /dev/null +++ b/static/image/bg/bg.psd.REMOVED.git-id @@ -0,0 +1 @@ +24e8df57cba3d9d4638a7979543e43ffa3a5a6ee \ No newline at end of file diff --git a/static/image/bg/line-squashed.jpg.REMOVED.git-id b/static/image/bg/line-squashed.jpg.REMOVED.git-id new file mode 100644 index 00000000..22b3d28d --- /dev/null +++ b/static/image/bg/line-squashed.jpg.REMOVED.git-id @@ -0,0 +1 @@ +4945760143bfdf609d363ea8f87dfd81b8aa7e97 \ No newline at end of file diff --git a/static/image/bg/star-squashed.jpg.REMOVED.git-id b/static/image/bg/star-squashed.jpg.REMOVED.git-id new file mode 100644 index 00000000..a92af6df --- /dev/null +++ b/static/image/bg/star-squashed.jpg.REMOVED.git-id @@ -0,0 +1 @@ +2176e399086eda9e0aa2e22640a4b2229d0dd4ba \ No newline at end of file diff --git a/static/image/bg/star.jpg.REMOVED.git-id b/static/image/bg/star.jpg.REMOVED.git-id deleted file mode 100644 index 7ee432a8..00000000 --- a/static/image/bg/star.jpg.REMOVED.git-id +++ /dev/null @@ -1 +0,0 @@ -5d5d5cae76bf221fe4df90af31aba1800c621bc3 \ No newline at end of file diff --git a/static/image/theme/line/preview@2x.png.REMOVED.git-id b/static/image/theme/line/preview@2x.png.REMOVED.git-id new file mode 100644 index 00000000..5233d23e --- /dev/null +++ b/static/image/theme/line/preview@2x.png.REMOVED.git-id @@ -0,0 +1 @@ +74af9ba85ceeec0b54c5067ed5ee62009ee08153 \ No newline at end of file