sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

no message

Browse Source 
Former-commit-id: 5e50d6b200ff2da546a94c7261335d163877685d
Former-commit-id: 72b2a0609e3cc724fe20b706ca42bf0930b33fd9
Former-commit-id: 359c3c40ba7e34c90c2b8293482ebe73fdb9fd56
This commit is contained in:
liyang
2018-06-11 10:41:42 +08:00
parent 3bcd8c51e4
commit 444214d448
4 changed files with 68 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/assets/style/theme/star/index.scss
View File

@@ -1,12 +1,36 @@
@import '../theme.scss';
// 主题名称
$theme-name: 'star';
// 主题背景颜色
$theme-bg-color: #EFF4F8;
// 主题背景图片
$theme-bg-image: '/static/image/bg/star.jpg';
$theme-container-border-color: #d8dfea;
// container组件的边框
$theme-container-border: 1px solid #d8dfea;
// 顶栏和侧边栏中展开的菜单 hover 状态下的文字和图标颜色
$theme-menu-item-color-hover: #FFF;
// 顶栏和侧边栏中展开的菜单 hover 状态下的背景颜色
$theme-menu-item-background-color-hover: #187181;
// 顶栏上的文字颜色
$theme-header-text-color: #FFF;
// 顶栏上的项目在 hover 时的背景颜色
$theme-header-item-background-color-hover: rgba(#FFF, .3);
// 顶栏上的项目在 focus 时的背景颜色
$theme-header-item-background-color-focus: rgba(#FFF, .3);
// 顶栏上的项目在 active 时的背景颜色
$theme-header-item-background-color-active: rgba(#000, .3);
// 侧边栏上的文字颜色
$theme-aside-text-color: #FFF;
// 侧边栏上的项目在 hover 时的背景颜色
$theme-aside-item-background-color-hover: rgba(#FFF, .3);
// 顶栏上的项目在 focus 时的背景颜色
$theme-aside-item-background-color-focus: rgba(#FFF, .3);
// 侧边栏上的项目在 active 时的背景颜色
$theme-aside-item-background-color-active: rgba(#000, .3);
.theme-#{$theme-name} {
.theme {
.layout-main {
background-color: $theme-bg-color;
background-image: url($theme-bg-image);
background-size: cover;
@@ -14,7 +38,11 @@ $theme-container-border-color: #d8dfea;
}
// 菜单项目
@mixin theme-menu-hover-style {
background-color: #eff4f8;
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;
@@ -28,23 +56,28 @@ $theme-container-border-color: #d8dfea;
.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-border-color;
border-bottom: $theme-container-border;
}
.d2-container-full__footer {
border-top: 1px solid $theme-container-border-color;
border-top: $theme-container-border;
}
}
// [组件] d2-container-card
.d2-container-card {
border: $theme-container-border;
}
// 顶栏
.el-header {
// 切换按钮
.toggle-aside-btn {
i {
color: #FFF;
color: $theme-header-text-color;
&:hover {
color: #FFF;
color: $theme-header-text-color;
}
}
}
@@ -52,29 +85,29 @@ $theme-container-border-color: #d8dfea;
.el-menu {
.el-menu-item {
transition: border-top-color 0s;
color: #FFF;
color: $theme-header-text-color;
&:hover {
background-color: rgba(#FFF, .3);
background-color: $theme-header-item-background-color-hover;
}
&:focus {
background-color: rgba(#FFF, .3);
background-color: $theme-header-item-background-color-focus;
}
&.is-active {
background-color: rgba(#000, .3);
background-color: $theme-header-item-background-color-active;
}
}
.el-submenu {
.el-submenu__title {
transition: border-top-color 0s;
color: #FFF;
color: $theme-header-text-color;
.el-submenu__icon-arrow {
color: $theme-header-text-color;
}
&:hover {
background-color: rgba(#FFF, .3);
background-color: $theme-header-item-background-color-hover;
}
&:focus {
background-color: rgba(#FFF, .3);
}
.el-submenu__icon-arrow {
color: #FFF;
background-color: $theme-header-item-background-color-focus;
}
}
}
@@ -82,9 +115,9 @@ $theme-container-border-color: #d8dfea;
// 顶栏右侧
.d2-header-right {
.btn-text {
color: #FFF;
color: $theme-header-text-color;
&:hover {
background-color: rgba(#FFF, .1);
background-color: $theme-header-item-background-color-hover;
}
}
}
@@ -96,32 +129,32 @@ $theme-container-border-color: #d8dfea;
// [菜单] 正常状态
.el-menu {
.el-menu-item {
color: #FFF;
color: $theme-aside-text-color;
i {
color: $theme-aside-text-color;
}
&:hover {
background-color: rgba(#FFF, .3);
background-color: $theme-aside-item-background-color-hover;
}
&:focus {
background-color: rgba(#FFF, .3);
}
i {
color: #FFF;
background-color: $theme-aside-item-background-color-focus;
}
&.is-active {
background-color: rgba(#000, .3);
background-color: $theme-aside-item-background-color-active;
}
}
}
.el-submenu {
.el-submenu__title {
color: #FFF;
&:hover {
background-color: rgba(#FFF, .3);
}
color: $theme-aside-text-color;
i {
color: #FFF;
color: $theme-aside-text-color;
}
.el-submenu__icon-arrow {
color: #FFF;
color: $theme-aside-text-color;
}
&:hover {
background-color: $theme-aside-item-background-color-hover;
}
}
}

2
src/assets/style/theme/theme.scss
View File

@@ -1,7 +1,7 @@
@import '~@/assets/style/public.scss';
// 主题公用
.theme {
.layout-main {
height: 100vh;
width: 100vw;
// [布局] 顶栏

2
src/components/core/d2-container/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="container-component" :class="{responsive}">
<!-- [card] 卡片容器 -->
<el-card v-if="type === 'card'" class="d2-mr d2-mb">
<el-card v-if="type === 'card'" class="d2-container-card d2-mr d2-mb">
<slot v-if="$slots.header" name="header" slot="header"/>
<slot/>
</el-card>

2
src/components/core/d2-layout-main/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-container class="layout-main theme">
<el-container class="layout-main">
<!-- 顶栏 -->
<el-header>
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">