diff --git a/docs/zh/guide/change-log.md b/docs/zh/guide/change-log.md index 8af971e0..e5571582 100644 --- a/docs/zh/guide/change-log.md +++ b/docs/zh/guide/change-log.md @@ -11,6 +11,7 @@ * [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突,新的加载类名使用 `d2-app-loading` 前缀 * [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-` * [ 修复 ] 修复 `highlight` 组件和 `markdown` 组件的样式冲突 +* [ 修改 ] 内置组件名称统一改为 `d2-` 前缀,统一使用横线连接 (kebab-case) 风格 ## v1.0.0 diff --git a/src/assets/style/theme/d2admin/index.scss b/src/assets/style/theme/d2admin/index.scss new file mode 100644 index 00000000..d5e2ab9e --- /dev/null +++ b/src/assets/style/theme/d2admin/index.scss @@ -0,0 +1,129 @@ +@import '../theme.scss'; + +$theme-name: 'd2admin'; +$theme-bg-color: #EFF4F8; +// $theme-bg-image: '/static/image/bg/star.jpg'; +$theme-container-full-border-color: #d8dfea; + +.theme-#{$theme-name} { + .theme { + background-color: $theme-bg-color; + background-size: cover; + background-position: center; + } + // 菜单项目 + @mixin theme-menu-hover-style { + background-color: #eff4f8; + } + .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 { + .d2-container-full__header { + border-bottom: 1px solid $theme-container-full-border-color; + } + .d2-container-full__footer { + border-top: 1px solid $theme-container-full-border-color; + } + } + // 顶栏 + .el-header { + // 切换按钮 + .toggle-aside-btn { + i { + color: #FFF; + &:hover { + color: #FFF; + } + } + } + // 顶栏菜单 + .el-menu { + .el-menu-item { + transition: border-top-color 0s; + color: #FFF; + &:hover { + background-color: rgba(#FFF, .3); + } + &:focus { + background-color: rgba(#FFF, .3); + } + &.is-active { + background-color: rgba(#000, .3); + } + } + .el-submenu { + .el-submenu__title { + transition: border-top-color 0s; + color: #FFF; + &:hover { + background-color: rgba(#FFF, .3); + } + &:focus { + background-color: rgba(#FFF, .3); + } + .el-submenu__icon-arrow { + color: #FFF; + } + } + } + } + // 顶栏右侧 + .d2-header-right { + .btn-text { + color: #FFF; + &:hover { + background-color: rgba(#FFF, .1); + } + } + } + } + // [布局] 顶栏下面 + .el-container { + // 侧边栏 + .el-aside { + // [菜单] 正常状态 + .el-menu { + .el-menu-item { + color: #FFF; + &:hover { + background-color: rgba(#FFF, .3); + } + &:focus { + background-color: rgba(#FFF, .3); + } + i { + color: #FFF; + } + &.is-active { + background-color: rgba(#000, .3); + } + } + } + .el-submenu { + .el-submenu__title { + color: #FFF; + &:hover { + background-color: rgba(#FFF, .3); + } + i { + color: #FFF; + } + .el-submenu__icon-arrow { + color: #FFF; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue index c4b081ab..817346a2 100644 --- a/src/components/core/d2-layout-main/index.vue +++ b/src/components/core/d2-layout-main/index.vue @@ -44,11 +44,15 @@ export default { // [侧边栏宽度] 折叠状态 asideWidthCollapse: '65px' } + }, + mounted () { + document.body.className = 'theme-star' } } diff --git a/src/main.js b/src/main.js index 2b862006..0135ca41 100755 --- a/src/main.js +++ b/src/main.js @@ -57,8 +57,5 @@ new Vue({ i18n, router, template: '', - components: { App }, - mounted () { - document.body.className = 'theme-star' - } + components: { App } })