Skip to content

9
91isoft_vue_manage
Commit ce47784f authored by 张伯涛's avatar 张伯涛
Browse files
Options

风格1和风格2样式布局修改

parent 244ae5df
Show whitespace changes
Inline Side-by-side
Showing with 1231 additions and 197 deletions
src/layout/components/Sidebar/Logo.vue
View file @ ce47784f
...@@ -2,18 +2,22 @@ ...@@ -2,18 +2,22 @@
<div class="sidebar-logo-container" :class="{'collapse':collapse}"> <div class="sidebar-logo-container" :class="{'collapse':collapse}">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo"> <img :src="logo" class="sidebar-logo">
<h1 v-else class="sidebar-title">{{ title }} </h1> <!-- <div class="sidebar-title">{{ title }} </div>-->
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo"> <div class="sidebar-logoTitle">
<h1 class="sidebar-title">{{ title }} </h1> <div class="sidebar-logoRow"><img :src="logo" class="sidebar-logo"></div>
<div class="sidebar-title">{{ title }} </div>
</div>
</router-link> </router-link>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
import { isExternal } from '@/utils/validate'
export default { export default {
name: 'SidebarLogo', name: 'SidebarLogo',
props: { props: {
...@@ -24,60 +28,28 @@ export default { ...@@ -24,60 +28,28 @@ export default {
}, },
data() { data() {
return { return {
title: '信息化管理系统', title: '信息化管理系统'
logo: require('@/assets/image/denglu_logo@2x.png') // logo: require('@/assets/image/denglu_logo@2x.png')
}
},
computed: {
// 根据选择的风格切换图标
logo() {
if (localStorage.getItem('theme') === '1') {
return require('@/assets/image/denglu_logo@2x.png')
} else {
return require('@/assets/themeBImage/menuLogo.png')
}
}
},
watch: {
collapse(value) {
console.log('value', value)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/styles/variables.scss";
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
opacity: 0;
}
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
background: $menuBg;
padding-left: 11px;
overflow: hidden;
& .sidebar-logo-link {
height: 100%;
width: 100%;
& .sidebar-logo {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 12px;
}
& .sidebar-title {
display: inline-block;
margin: 0;
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 16px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}
}
&.collapse {
.sidebar-logo {
margin-right: 0px;
}
}
}
</style> </style>
src/layout/components/Sidebar/index.vue
View file @ ce47784f
...@@ -23,6 +23,7 @@ import { mapGetters } from 'vuex' ...@@ -23,6 +23,7 @@ import { mapGetters } from 'vuex'
import Logo from './Logo' import Logo from './Logo'
import SidebarItem from './SidebarItem' import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss' import variables from '@/styles/variables.scss'
import themeBvariables from '@/styles/themeB/variables.scss'
export default { export default {
components: { SidebarItem, Logo }, components: { SidebarItem, Logo },
...@@ -44,7 +45,12 @@ export default { ...@@ -44,7 +45,12 @@ export default {
return this.$store.state.settings.sidebarLogo return this.$store.state.settings.sidebarLogo
}, },
variables() { variables() {
// 根据选择的风格变量决定引用哪套variables变量文件
if (localStorage.getItem('theme') === '1') {
return variables return variables
} else {
return themeBvariables
}
}, },
isCollapse() { isCollapse() {
return !this.sidebar.opened return !this.sidebar.opened
......
src/layout/components/TagsView/index.vue
View file @ ce47784f
...@@ -215,96 +215,10 @@ export default { ...@@ -215,96 +215,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tags-view-container {
height: 31px;
width: 100%;
background: #F4F4F4;
//border-bottom: 1px solid #d8dce5;
//box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
margin: 0 14px;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 27px;
line-height: 26px;
//border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 10px;
font-size: 14px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 15px;
}
&.active {
background-color: #fff;
color: $color-theme;
border-color: transparent;
//&::before {
// content: '';
// background: #fff;
// display: inline-block;
// width: 8px;
// height: 8px;
// border-radius: 50%;
// position: relative;
// margin-right: 2px;
//}
}
}
}
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
}
}
}
}
</style> </style>
<style lang="scss"> <style lang="scss">
//reset element css of el-icon-close //reset element css of el-icon-close
.tags-view-wrapper {
.tags-view-item {
.el-icon-close {
width: 16px;
height: 16px;
vertical-align: 2px;
border-radius: 50%;
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
&:before {
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
background-color: #b4bccc;
color: #fff;
}
}
}
}
</style> </style>
src/layout/index.vue
View file @ ce47784f
...@@ -65,59 +65,5 @@ export default { ...@@ -65,59 +65,5 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
&.mobile.openSidebar{
position: fixed;
top: 0;
}
}
.nav-container{
/*height: 70px;*/
//position: absolute;
top: 0;
width: 100%;
z-index: 1001;
}
.nav-container-two{
width: 100%;
z-index: 1001;
.placeholder {
height: 1.2vh;
width: 100%;
background-color: #F4F4F4;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header {
position: fixed;
//top: 0;
//right: 0;
//z-index: 9;
width: calc(100% - #{$sideBarWidth});
transition: width 0.28s;
}
.hideSidebar .fixed-header {
width: calc(100% - #{ $sideHideWidth })
}
.mobile .fixed-header {
width: 100%;
}
</style> </style>
src/styles/index.scss
View file @ ce47784f
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
@import './mixin.scss'; @import './mixin.scss';
@import './transition.scss'; @import './transition.scss';
@import './element-ui.scss'; @import './element-ui.scss';
@import './sidebar.scss'; //@import './sidebar.scss';
@import "./utils.scss"; @import "./utils.scss";
@import './btn.scss'; @import './btn.scss';
body { body {
......
src/styles/themeA/index.scss
View file @ ce47784f
...@@ -8,3 +8,8 @@ ...@@ -8,3 +8,8 @@
@import "./errorLog.scss"; // 异常日志模块css样式文件 @import "./errorLog.scss"; // 异常日志模块css样式文件
@import "./reSetPsw.scss"; // 修改密码模块css样式文件 @import "./reSetPsw.scss"; // 修改密码模块css样式文件
@import "./login.scss"; // 登录页面css样式文件 @import "./login.scss"; // 登录页面css样式文件
@import "./navigationBar.scss"; // 左侧导航栏css样式文件
@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
@import "./variables.scss"; // 风格变量css样式文件
@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
@import "./layout.scss"; // layout的css样式文件
src/styles/themeA/layout.scss 0 → 100644
View file @ ce47784f
@import "../../styles/mixin";
@import "./variables";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
&.mobile.openSidebar{
position: fixed;
top: 0;
}
}
.nav-container{
/*height: 70px;*/
//position: absolute;
top: 0;
width: 100%;
z-index: 1001;
}
.nav-container-two{
width: 100%;
z-index: 1001;
.placeholder {
height: 1.2vh;
width: 100%;
background-color: #F4F4F4;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header {
position: fixed;
//top: 0;
//right: 0;
//z-index: 9;
width: calc(100% - #{$sideBarWidth});
transition: width 0.28s;
}
.hideSidebar .fixed-header {
width: calc(100% - #{ $sideHideWidth })
}
.mobile .fixed-header {
width: 100%;
}
src/styles/themeA/navigationBar.scss 0 → 100644
View file @ ce47784f
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
opacity: 0;
}
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
background: #46BCF2;
padding-left: 11px;
overflow: hidden;
.sidebar-logoTitle{
display: flex;
}
& .sidebar-logo-link {
height: 100%;
width: 100%;
& .sidebar-logo {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 12px;
}
& .sidebar-title {
display: inline-block;
margin: 0;
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 16px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}
}
&.collapse {
.sidebar-logo {
margin-right: 0px;
}
}
}
src/styles/themeA/sidebar.scss 0 → 100644
View file @ ce47784f
@import '../../styles/variables';
#app {
.main-container {
padding-top: 6.4vh;
min-height: 100%;
transition: margin-left 0.28s;
margin-left: $sideBarWidth;
position: relative;
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
background-color: $menuBg;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: calc(100% - 50px);
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
}
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 17px;
font-size: 20px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: $menuHover !important;
}
}
.is-active > .el-submenu__title {
color: $subMenuActiveText;
}
& .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $subMenuBg;
&:hover {
background-color: $subMenuHover !important;
}
}
}
.hideSidebar {
.sidebar-container {
width: $sideHideWidth !important;
}
.main-container {
margin-left: 54px;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 17px;
}
}
}
.el-submenu {
overflow: hidden;
& > .el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 17px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
& > .el-submenu__title {
& > span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform 0.28s;
width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
}
// when menu collapsed
.el-menu--vertical {
& > .el-menu {
.svg-icon {
margin-right: 16px;
}
}
.nest-menu .el-submenu > .el-submenu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $menuHover !important;
}
}
// the scroll bar appears when the subMenu is too long
> .el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}
.el-submenu__icon-arrow {
color: #ffffff !important;
}
.is-active.submenu-title-noDropdown {
background-color: #fff !important;
}
#app .sidebar-container .el-submenu .el-menu-item.is-active {
background-color: #fff !important;
}
.router-link-active .el-menu-item.is-active {
background-color: #ffffff !important;
}
// hover样式
.el-submenu__title:hover {
color: #46bcf2 !important;
.el-submenu__icon-arrow {
color: #46bcf2 !important;
}
}
.nest-menu .el-submenu > .el-submenu__title:hover {
background-color: #fff !important;
color: #46bcf2 !important;
}
.is-active > .el-submenu__title:hover {
color: #46bcf2 !important;
}
.el-submenu .el-menu-item:hover {
color: #46bcf2 !important;
}
.el-menu-item.submenu-title-noDropdown:hover {
color: #46bcf2 !important;
}
.el-menu--vertical .el-menu-item:hover {
color: #46bcf2 !important;
}
.el-submenu.is-opened {
background-color: #FFFFFF !important;
> .el-submenu__title {
background-color: #fff !important;
color: #46bcf2 !important;
.el-submenu__icon-arrow {
color: #46bcf2 !important;
}
}
.el-menu {
.el-menu-item {
background-color: #fff !important;
color: #000000 !important;
&.is-active {
color: #46bcf2 !important;
}
}
}
.nest-menu {
.el-submenu__title {
background-color: #fff !important;
color: #000000 !important;
.el-submenu__icon-arrow {
color: #46bcf2 !important;
}
}
}
}
src/styles/themeA/tagsView.scss 0 → 100644
View file @ ce47784f
.tags-view-container {
height: 31px;
width: 100%;
background: #F4F4F4;
//border-bottom: 1px solid #d8dce5;
//box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
margin: 0 14px;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 27px;
line-height: 26px;
//border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 10px;
font-size: 14px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 15px;
}
&.active {
background-color: #fff;
color: $color-theme;
border-color: transparent;
//&::before {
// content: '';
// background: #fff;
// display: inline-block;
// width: 8px;
// height: 8px;
// border-radius: 50%;
// position: relative;
// margin-right: 2px;
//}
}
}
}
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
}
}
}
}
.tags-view-wrapper {
.tags-view-item {
.el-icon-close {
width: 16px;
height: 16px;
vertical-align: 2px;
border-radius: 50%;
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
&:before {
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
background-color: #b4bccc;
color: #fff;
}
}
}
}
src/styles/themeA/variables.scss 0 → 100644
View file @ ce47784f
// 主题色
$color-theme: #46BCF3;
$color-red: #F57b7b;
$color-purple: #ff33a9;
$color-orange: #f4ac10;
$color-blue: #409EFF;
// 我的单据背景色 考勤统计
$color-cambridge-blue: #29a2db;
// 我的单据背景色 考勤统计
$color-cambridge-red: #ffbebe;
// 我的单据背景色 考勤统计
$color-cambridge-yellow: #fcd89f;
// 我的单据背景色 考勤统计
$color-cambridge-yellow: #fcd89f;
// 我的单据背景色 考勤统计
$color-indigo: #9fc6fc;
// 考勤统计
$color-indigo-deep: #5cbce5;
// 考勤统计未选中项
$color-grey: #d1d1d1;
// 系统背景色
$color-grey-light: #f4f4f4;
// 列表表头底色
$color-grey-light: #ecf9fe;
// 统计折线图背景色
$color-green: #49cec9;
// 统计折线图折线
$color-green-deep: #1cc2bc;
$color-green-light-btn: #6dd8e4;
// 统计折线图背景色
$color-blue-bg: #1cc2bc;
// 统计折线图折线
$color-blue-line: #0098de;
// 考勤统计
$color-green-light: #80e4e9;
// 线框、线段、列表 虚线分割线、表单不可修改
$color-border: #e5e5e5;
// 查询 新增 申请 tab标签 分页列表中除修改之外的其他按钮
$blue-prime: #46BCF3;
$blue-prime-hover: #6bc9f5;
$blue-prime-active: #0098de;
// 导出 导入 修改
$green-prime: #49cec9;
$green-prime-hover: #6dd8d4;
$green-prime-active: #1cc2bc;
// 文件上传
$yellow-prime: #f6c761;
$yellow-prime-hover: #f8d281;
$yellow-prime-active: #f4ac10;
// 删除
$red-prime: #f68f8f;
$red-prime-hover: #f8a5a5;
$red-prime-active: #ff7b7b;
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
// 文字色
$font-black: #000;
// 主文字
$font-dark: #333;
// 次文字 表单内容、面包屑当前
$font-deep: #666666;
// 说明文字
$font-pl: #999999;
// 错误的提示文字 需要注意的提示文字
$font-error: #f52929;
$font-weak: #b3b3b3;
// 反白文字
$font-white: #fff;
// 背景色
$bg-bar: #f9f9f9;
$bg-page: #f3f3f3;
$bg-page-light: #f9f9f9;
$bg-menu-hover: #f2f6fc;
// sidebar
$menuText:#fff;
$menuActiveText:#46BCF2;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#46BCF2;
$menuHover:#fff;
$subMenuBg:#46BCF2;
$subMenuHover:#fff;
$sideBarWidth: 254px;
$sideHideWidth: 54px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}
src/styles/themeB/index.scss
View file @ ce47784f
...@@ -8,3 +8,8 @@ ...@@ -8,3 +8,8 @@
@import "./errorLog.scss"; // 异常日志模块css样式文件 @import "./errorLog.scss"; // 异常日志模块css样式文件
@import "./reSetPsw.scss"; // 修改密码模块css样式文件 @import "./reSetPsw.scss"; // 修改密码模块css样式文件
@import "./login.scss"; // 登录页面css样式文件 @import "./login.scss"; // 登录页面css样式文件
@import "./navigationBar.scss"; // 左侧导航栏css样式文件
@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
@import "./variables.scss"; // 风格变量css样式文件
@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
@import "./layout.scss"; // layout的css样式文件
src/styles/themeB/layout.scss 0 → 100644
View file @ ce47784f
@import "../../styles/mixin";
@import "./variables";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
&.mobile.openSidebar{
position: fixed;
top: 0;
}
}
.nav-container{
/*height: 70px;*/
//position: absolute;
top: 0;
width: 100%;
z-index: 1001;
}
.nav-container-two{
width: 100%;
z-index: 1001;
.placeholder {
height: 1.2vh;
width: 100%;
background-color: #F4F4F4;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header {
position: fixed;
//top: 0;
//right: 0;
//z-index: 9;
width: calc(100% - #{$sideBarWidth});
transition: width 0.28s;
}
.hideSidebar .fixed-header {
width: calc(100% - #{ $sideHideWidth })
}
.mobile .fixed-header {
width: 100%;
}
src/styles/themeB/navigationBar.scss 0 → 100644
View file @ ce47784f
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
opacity: 0;
}
.sidebar-logo-container {
background: #ffffff!important;
height: 150px!important;
position: relative;
width: 100%;
line-height: 50px;
padding-left: 11px;
overflow: hidden;
.sidebar-logoRow{
padding-top: 38px!important;
padding-bottom: 2px!important;
text-align: center!important;
}
& .sidebar-logo-link {
height: 100%;
width: 100%;
& .sidebar-logo {
width: 44px;
height: 44px;
vertical-align: middle;
//margin-right: 12px;
}
& .sidebar-title {
text-align: center!important;
color: #333333!important;
margin: 0;
font-weight: 600;
line-height: 50px;
font-size: 16px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}
}
&.collapse {
.sidebar-logo {
margin-right: 0px;
}
}
}
src/styles/themeB/sidebar.scss 0 → 100644
View file @ ce47784f
@import '../../styles/variables';
#app {
.main-container {
padding-top: 6.4vh;
min-height: 100%;
transition: margin-left 0.28s;
margin-left: 219px;
position: relative;
}
.sidebar-container {
transition: width 0.28s;
width: 216px !important;
background-color: #FFFFFF;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: calc(100% - 50px);
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
}
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 17px;
font-size: 20px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: $menuHover !important;
}
}
.is-active > .el-submenu__title {
color: $subMenuActiveText;
}
& .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item {
min-width: 196px !important;
height: 42px!important;
line-height: 42px!important;
background-color: $subMenuBg;
border-radius: 4px!important;
&:hover {
background-color: $subMenuHover !important;
}
}
}
.hideSidebar {
.sidebar-container {
width: $sideHideWidth !important;
}
.main-container {
margin-left: 54px;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 17px;
}
}
}
.el-submenu {
overflow: hidden;
& > .el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 17px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
& > .el-submenu__title {
& > span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: 196px !important;
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform 0.28s;
width: 196px !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-196px, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
}
// when menu collapsed
.el-menu--vertical {
& > .el-menu {
.svg-icon {
margin-right: 16px;
}
}
.nest-menu .el-submenu > .el-submenu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $menuHover !important;
}
}
// the scroll bar appears when the subMenu is too long
> .el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}
.el-submenu__icon-arrow {
color: #ffffff !important;
}
.is-active.submenu-title-noDropdown {
background-color: #fff !important;
}
#app .sidebar-container .el-submenu .el-menu-item.is-active {
background-color: #03A487 !important;
}
.router-link-active .el-menu-item.is-active {
background-color: #ffffff !important;
}
// hover样式
.el-submenu__title:hover {
color: #03A487 !important;
.el-submenu__icon-arrow {
color: #03A487 !important;
}
}
.nest-menu .el-submenu > .el-submenu__title:hover {
background-color: #fff !important;
color: #03A487 !important;
}
.is-active > .el-submenu__title:hover {
color: #03A487 !important;
}
.el-submenu .el-menu-item:hover {
color: #03A487 !important;
}
.el-menu-item.submenu-title-noDropdown:hover {
color: #03A487 !important;
}
.el-menu--vertical .el-menu-item:hover {
color: #03A487 !important;
}
.el-submenu.is-opened {
background-color: #FFFFFF !important;
> .el-submenu__title {
margin: 0 10px!important;
background: #e9f5f3!important;
color: #333333 !important;
font-weight: bold!important;
height: 42px!important;
line-height: 42px!important;
border-radius: 4px!important;
.el-submenu__icon-arrow {
color: #03A487 !important;
}
}
.el-menu {
.el-menu-item {
background-color: #fff !important;
color: #000000 !important;
&:hover {
color: #03A487!important;
}
&.is-active {
background: #03a487!important;
color: #FFFFFF !important;
}
}
}
.nest-menu {
padding: 0 10px!important;
.el-submenu__title {
background-color: #fff !important;
color: #000000 !important;
.el-submenu__icon-arrow {
color: #03A487 !important;
}
}
}
}
src/styles/themeB/tagsView.scss 0 → 100644
View file @ ce47784f
.tags-view-container {
height: 31px;
width: 100%;
background: #F4F4F4;
//border-bottom: 1px solid #d8dce5;
//box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
margin: 0 14px;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 27px;
line-height: 26px;
//border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 10px;
font-size: 14px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 15px;
}
&.active {
background-color: #fff;
color: #03A487;
border-color: transparent;
//&::before {
// content: '';
// background: #fff;
// display: inline-block;
// width: 8px;
// height: 8px;
// border-radius: 50%;
// position: relative;
// margin-right: 2px;
//}
}
}
}
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
}
}
}
}
.tags-view-wrapper {
.tags-view-item {
.el-icon-close {
width: 16px;
height: 16px;
vertical-align: 2px;
border-radius: 50%;
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
&:before {
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
background-color: #b4bccc;
color: #fff;
}
}
}
}
src/styles/themeB/variables.scss 0 → 100644
View file @ ce47784f
// 主题色
$color-theme: #46BCF3;
$color-red: #F57b7b;
$color-purple: #ff33a9;
$color-orange: #f4ac10;
$color-blue: #409EFF;
// 我的单据背景色 考勤统计
$color-cambridge-blue: #29a2db;
// 我的单据背景色 考勤统计
$color-cambridge-red: #ffbebe;
// 我的单据背景色 考勤统计
$color-cambridge-yellow: #fcd89f;
// 我的单据背景色 考勤统计
$color-cambridge-yellow: #fcd89f;
// 我的单据背景色 考勤统计
$color-indigo: #9fc6fc;
// 考勤统计
$color-indigo-deep: #5cbce5;
// 考勤统计未选中项
$color-grey: #d1d1d1;
// 系统背景色
$color-grey-light: #f4f4f4;
// 列表表头底色
$color-grey-light: #ecf9fe;
// 统计折线图背景色
$color-green: #49cec9;
// 统计折线图折线
$color-green-deep: #1cc2bc;
$color-green-light-btn: #6dd8e4;
// 统计折线图背景色
$color-blue-bg: #1cc2bc;
// 统计折线图折线
$color-blue-line: #0098de;
// 考勤统计
$color-green-light: #80e4e9;
// 线框、线段、列表 虚线分割线、表单不可修改
$color-border: #e5e5e5;
// 查询 新增 申请 tab标签 分页列表中除修改之外的其他按钮
$blue-prime: #46BCF3;
$blue-prime-hover: #6bc9f5;
$blue-prime-active: #0098de;
// 导出 导入 修改
$green-prime: #49cec9;
$green-prime-hover: #6dd8d4;
$green-prime-active: #1cc2bc;
// 文件上传
$yellow-prime: #f6c761;
$yellow-prime-hover: #f8d281;
$yellow-prime-active: #f4ac10;
// 删除
$red-prime: #f68f8f;
$red-prime-hover: #f8a5a5;
$red-prime-active: #ff7b7b;
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
// 文字色
$font-black: #000;
// 主文字
$font-dark: #333;
// 次文字 表单内容、面包屑当前
$font-deep: #666666;
// 说明文字
$font-pl: #999999;
// 错误的提示文字 需要注意的提示文字
$font-error: #f52929;
$font-weak: #b3b3b3;
// 反白文字
$font-white: #fff;
// 背景色
$bg-bar: #f9f9f9;
$bg-page: #f3f3f3;
$bg-page-light: #f9f9f9;
$bg-menu-hover: #f2f6fc;
// sidebar
$menuText:#333333;
$menuActiveText:#46BCF2;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#FFFFFF;
$menuHover:#fff;
$subMenuBg:#46BCF2;
$subMenuHover:#fff;
$sideBarWidth: 219px;
$sideHideWidth: 54px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment