/* 主页面背景 */
|
|
.app-main {
|
|
background: #f3f5f8;
|
|
}
|
|
|
|
/* 侧边菜单栏背景 */
|
|
.sidebar-container .el-scrollbar {
|
|
background: #303030;
|
|
}
|
|
|
|
/* 导航栏 */
|
|
.navbar {
|
|
background: #fff;
|
|
/* 与tagViews的间隔 */
|
|
border-bottom: 1px solid #f1f1f1;
|
|
/* 收缩图标 */
|
|
>.hamburger-container {
|
|
fill: #5a5e66;
|
|
&:hover {
|
|
background: rgba(0, 0, 0, .05)
|
|
}
|
|
}
|
|
/* 右侧功能区 */
|
|
>.right-menu {
|
|
/* 功能项 */
|
|
>.right-menu-item {
|
|
color: #5a5e66;
|
|
&.hover-effect {
|
|
&:hover {
|
|
background: rgba(0, 0, 0, .05)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 打开的菜单视图 */
|
|
.tags-view-container {
|
|
background: #fff;
|
|
>.tags-view-wrapper {
|
|
/* 显示区域 */
|
|
.tags-view-item {
|
|
color: #999;
|
|
border-left: 1px solid #f1f1f1;
|
|
/* 关闭图标 */
|
|
&>.el-icon-close {
|
|
color: #000;
|
|
}
|
|
&:hover {
|
|
color: #495060;
|
|
&>.el-icon-close {
|
|
color: red;
|
|
}
|
|
}
|
|
/* 边框 */
|
|
&:last-of-type {
|
|
border-right: 1px solid #f1f1f1;
|
|
}
|
|
/* 激活项 */
|
|
&.active {
|
|
/* 图标 */
|
|
&::before {
|
|
background: #85ef47!important;
|
|
box-shadow: 0 0 7px #b7eb8f;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* 菜单弹出功能区 */
|
|
>.contextmenu {
|
|
background: #fff;
|
|
color: #333;
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|
/* 功能项 */
|
|
li {
|
|
&:hover {
|
|
background-color: #e8f4ff;
|
|
color: #46a6ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 功能区背景 */
|
|
.app-container,.content-container {
|
|
background: #fff;
|
|
}
|
|
|
|
/* 底部商标区 */
|
|
.footer {
|
|
background: #fff;
|
|
color: #606266;
|
|
}
|
|
|
|
/* 仪表盘 */
|
|
.main {
|
|
/* 访问量块 */
|
|
.todayIp {
|
|
color: #27c6da !important;
|
|
}
|
|
.todayVisit {
|
|
color: #fc573b !important;
|
|
}
|
|
.totalVisit {
|
|
color: #be63f9 !important;
|
|
}
|
|
}
|
|
|
|
/* 表格 */
|
|
.el-table{
|
|
/* 表头 */
|
|
& thead {
|
|
color: #606266;
|
|
}
|
|
}
|
|
|
|
/* 树形选择组件 */
|
|
.vue-treeselect__single-value {
|
|
color: #606266 !important;
|
|
}
|
|
|
|
/* 表格操作图标 */
|
|
.table-operation, .el-icon-{
|
|
&view{
|
|
color: #87d068;
|
|
}
|
|
&unlock{
|
|
color: #87d068;
|
|
}
|
|
&setting {
|
|
color: #2db7f5;
|
|
}
|
|
&delete {
|
|
color: #f50;
|
|
}
|
|
}
|
|
|
|
/* 头部导航栏一级菜单 */
|
|
.head-menu-container {
|
|
/* 显示区域 */
|
|
.el-submenu__title {
|
|
/* 图标 */
|
|
i {
|
|
color: #909399;
|
|
}
|
|
&:active {
|
|
color:#000 !important;
|
|
}
|
|
&:hover {
|
|
background-color: #f0f0f0 !important;
|
|
}
|
|
}
|
|
/* 激活项 */
|
|
.el-submenu.is-active .el-submenu__title {
|
|
color: #000 !important;
|
|
}
|
|
}
|
|
|
|
/* 头部导航栏子菜单 */
|
|
.el-menu--horizontal {
|
|
/* 头部导航栏子菜单 */
|
|
>.el-menu {
|
|
background: #fff !important;
|
|
}
|
|
.headMenu-wrapper {
|
|
/* 显示区域 */
|
|
.el-menu-item, .el-submenu__title {
|
|
color: #909399;
|
|
background-color: white;
|
|
/* 激活项 */
|
|
&.is-active {
|
|
color:#000 !important;
|
|
background-color: #f0f0f0 !important;
|
|
}
|
|
&:hover {
|
|
background-color: #f0f0f0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|