家里的样式
This commit is contained in:
zhangdingyu
69
src/styles/element-ui.scss
Normal file
69
src/styles/element-ui.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
//to reset element-ui default css
|
||||
.el-upload {
|
||||
input[type="file"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
|
||||
.el-dialog {
|
||||
transform: none;
|
||||
left: 0;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
//element ui upload
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table th{
|
||||
background-color: #7eaced;
|
||||
color: white;/*修改表格头部背景*/
|
||||
line-height: 3em!important;
|
||||
}
|
||||
.el-table__row td{
|
||||
padding: 5px 0!important;
|
||||
}
|
||||
|
||||
.el-tree-node__content>.el-tree-node__expand-icon{
|
||||
display: none;
|
||||
}
|
||||
//单击表格行变色
|
||||
.el-table__body tr.current-row>td{
|
||||
background-color: rgb(216,229,245) !important;
|
||||
/* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
|
||||
}
|
||||
//聚焦表格行变色
|
||||
.hover-row td{
|
||||
background: RGB(236 245 255)!important;
|
||||
}
|
||||
.el-table td, .is-leaf{
|
||||
background-color: rgb(255, 255, 255);
|
||||
color: black;
|
||||
font-weight:400
|
||||
}
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td{
|
||||
background-color: #d8dde6;/*修改斑马线表格背景*/
|
||||
}
|
||||
.el-table thead.is-group th{
|
||||
background-color: rgb(98, 157, 209);
|
||||
}
|
||||
|
||||
.el-textarea__inner,
|
||||
.el-radio__inner,
|
||||
.el-input__inner{
|
||||
border: 1px solid rgb(49, 56, 72)!important;
|
||||
}
|
||||
|
||||
|
||||
169
src/styles/index.scss
Normal file
169
src/styles/index.scss
Normal file
@@ -0,0 +1,169 @@
|
||||
@import './variables.scss';
|
||||
@import './mixin.scss';
|
||||
@import './transition.scss';
|
||||
@import './element-ui.scss';
|
||||
@import './sidebar.scss';
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#app{
|
||||
height: 100%;
|
||||
.sidebar-container{
|
||||
background-color: #152c7c;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//main-container全局样式
|
||||
.app-main{
|
||||
min-height: 100%
|
||||
}
|
||||
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.navbar{
|
||||
background-color: #fff!important;
|
||||
}
|
||||
.submenu-title-noDropdown{
|
||||
background-color: #2e296a!important;
|
||||
color: #cccccc!important;
|
||||
}
|
||||
.el-menu-item.is-active{
|
||||
color:#409EFF!important;
|
||||
}
|
||||
el-form-item__content{
|
||||
background-color: #3d3780!important;
|
||||
}
|
||||
.el-menu-item:hover{
|
||||
background-color: #9892E4 !important;
|
||||
}
|
||||
.el-menu-item, .el-submenu__title{
|
||||
line-height: 42px;
|
||||
height: 42px;
|
||||
//background-color: #2e296a!important;
|
||||
}
|
||||
.el-scrollbar{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-submenu__title{
|
||||
//background-color: #2e296a!important;
|
||||
}
|
||||
.el-card__body{
|
||||
padding: 0px !important;
|
||||
margin: 0px !important;
|
||||
}
|
||||
.app-container{
|
||||
padding: 0px;
|
||||
}
|
||||
.el-pagination{
|
||||
padding: 0px;
|
||||
}
|
||||
el-card{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.el-table__row{
|
||||
height: 5px;
|
||||
padding: 0px;
|
||||
}
|
||||
.el-table--mini td, .el-table--mini th {
|
||||
padding: 0px 0;
|
||||
}
|
||||
//.el-table .el-button{
|
||||
// font-size: 17px;
|
||||
//}
|
||||
.el-tabs__header {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
}
|
||||
.el-table{
|
||||
margin: 3px 0px;
|
||||
}
|
||||
.block{
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.el-button--success{
|
||||
background: rgb(45,114,213);
|
||||
border-color: rgb(45,114,213);
|
||||
&:hover{
|
||||
background: rgb(45,114,213);
|
||||
border-color: rgb(45,114,213);
|
||||
}
|
||||
&:focus{
|
||||
background: rgb(45,114,213);
|
||||
border-color: rgb(45,114,213);
|
||||
}
|
||||
}
|
||||
.el-button--primary{
|
||||
background: #ff9759;
|
||||
border-color: #ff9759;
|
||||
&:hover{
|
||||
background: #ff9759;
|
||||
border-color: #ff9759;
|
||||
}
|
||||
&:focus{
|
||||
background: #ff9759;
|
||||
border-color: #ff9759;
|
||||
}
|
||||
}
|
||||
27
src/styles/mixin.scss
Normal file
27
src/styles/mixin.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollBar {
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
123
src/styles/sidebar.scss
Normal file
123
src/styles/sidebar.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
#app {
|
||||
// 主体区域
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left .28s;
|
||||
margin-left: 200px;
|
||||
position: relative;
|
||||
}
|
||||
// 侧边栏
|
||||
.sidebar-container {
|
||||
transition: width 0.28s;
|
||||
width: 200px !important;
|
||||
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;
|
||||
}
|
||||
.el-scrollbar__bar.is-vertical{
|
||||
right: 0px;
|
||||
}
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden!important;
|
||||
.el-scrollbar__view {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
background: #152c7c!important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 36px !important;
|
||||
}
|
||||
.main-container {
|
||||
margin-left: 36px;
|
||||
}
|
||||
.submenu-title-noDropdown {
|
||||
padding-left: 10px !important;
|
||||
position: relative;
|
||||
.el-tooltip {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
overflow: hidden;
|
||||
&>.el-submenu__title {
|
||||
padding-left: 10px !important;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
|
||||
.sidebar-container .el-submenu .el-menu-item {
|
||||
min-width: 200px !important;
|
||||
background-color: $subMenuBg !important;
|
||||
&:hover {
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
.el-menu--collapse .el-menu .el-submenu {
|
||||
min-width: 180px !important;
|
||||
}
|
||||
|
||||
//适配移动端
|
||||
.mobile {
|
||||
.main-container {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
width: 180px !important;
|
||||
}
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-180px, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.withoutAnimation {
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
46
src/styles/transition.scss
Normal file
46
src/styles/transition.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
//globl transition css
|
||||
|
||||
/*fade*/
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.28s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*fade-transform*/
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
.fade-transform-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/*fade*/
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.breadcrumb-move {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
4
src/styles/variables.scss
Normal file
4
src/styles/variables.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
//sidebar
|
||||
$menuBg:#152c7c;
|
||||
$subMenuBg:rgb(29,53,149);
|
||||
$menuHover:rgb(40,114,199);
|
||||
Reference in New Issue
Block a user