|
@@ -1,240 +1,264 @@
|
|
|
@import 'style';
|
|
|
@import 'base';
|
|
|
$height: 50px;
|
|
|
-.el-header{
|
|
|
- padding: 0;
|
|
|
+.el-header {
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
+
|
|
|
.header {
|
|
|
- background: #151932;
|
|
|
- color: #fff;
|
|
|
- height: 60px !important;
|
|
|
- font-size-adjust: 20px;
|
|
|
- line-height: 60px;
|
|
|
- font-weight: bolder;
|
|
|
- padding: 0 24px;
|
|
|
- .logout{
|
|
|
- float: right;
|
|
|
- }
|
|
|
+ background: #151932;
|
|
|
+ color: #fff;
|
|
|
+ height: 60px !important;
|
|
|
+ font-size-adjust: 20px;
|
|
|
+ line-height: 60px;
|
|
|
+ font-weight: bolder;
|
|
|
+ padding: 0 24px;
|
|
|
+ .logout {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
- position: relative;
|
|
|
- height: calc(100vh - 60px);
|
|
|
- background: #F4F4F4;
|
|
|
- // padding-top: 10px;
|
|
|
+ position: relative;
|
|
|
+ height: calc(100vh - 60px);
|
|
|
+ background: #F4F4F4;
|
|
|
+ // padding-top: 10px;
|
|
|
}
|
|
|
+
|
|
|
.left-aside {
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
- background: #151932;
|
|
|
- .left-menue {
|
|
|
- border: none;
|
|
|
- & > .is-active {
|
|
|
- background-color: rgba(255,81,81,.2) !important;
|
|
|
- position: relative;
|
|
|
- border-left: 8px solid #FF5151;
|
|
|
- transition: all .3s linear;
|
|
|
- .iconfont{
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- &>.el-submenu__title{
|
|
|
- color: #ffffff !important;
|
|
|
- }
|
|
|
- .is-active {
|
|
|
- background-color: rgba(255,81,81,.2) !important;
|
|
|
- border-left: 8px solid #FF5151;
|
|
|
- transition: all .3s linear;
|
|
|
- position: relative;
|
|
|
- .iconfont{
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .is-opened{
|
|
|
- background-color: #fff !important;
|
|
|
- border-left: none !important;
|
|
|
- &>.el-submenu__title{
|
|
|
- color: #fff !important;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- .el-menu-item-group__title{
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .child{
|
|
|
- padding-left: 60px !important;
|
|
|
- }
|
|
|
- .el-menu-item, .el-submenu__title{
|
|
|
- height: 48px;
|
|
|
- line-height: 48px;
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
- // .el-menu-item{
|
|
|
- // height: 44px;
|
|
|
- // line-height: 44px;
|
|
|
- // }
|
|
|
- }
|
|
|
- .iconfont{
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ background: #151932;
|
|
|
+ .left-menue {
|
|
|
+ border: none;
|
|
|
+ &>.is-active {
|
|
|
+ background-color: rgba(255, 81, 81, .2) !important;
|
|
|
+ position: relative;
|
|
|
+ border-left: 8px solid #FF5151;
|
|
|
+ transition: all .3s linear;
|
|
|
+ .iconfont {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ &>.el-submenu__title {
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+ .is-active {
|
|
|
+ background-color: rgba(255, 81, 81, .2) !important;
|
|
|
+ border-left: 8px solid #FF5151;
|
|
|
+ transition: all .3s linear;
|
|
|
+ position: relative;
|
|
|
+ .iconfont {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .is-opened {
|
|
|
+ background-color: #fff !important;
|
|
|
+ border-left: none !important;
|
|
|
+ &>.el-submenu__title {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-menu-item-group__title {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .child {
|
|
|
+ padding-left: 60px !important;
|
|
|
+ }
|
|
|
+ .el-menu-item,
|
|
|
+ .el-submenu__title {
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ // .el-menu-item{
|
|
|
+ // height: 44px;
|
|
|
+ // line-height: 44px;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-main {
|
|
|
- // border: 1px solid red;
|
|
|
- padding:20px 20px;
|
|
|
- position: relative;
|
|
|
- // overflow:hidden;
|
|
|
- section>p{
|
|
|
- color:#666666;
|
|
|
- font-size:14px;
|
|
|
- font-weight: 400;
|
|
|
- span{
|
|
|
- color:#cccccc;
|
|
|
- }
|
|
|
- }
|
|
|
- .content{
|
|
|
- background: #fff;
|
|
|
- padding: 20px !important;
|
|
|
- margin: 0 !important;
|
|
|
- height: calc(100vh - 100px);
|
|
|
- box-shadow:0px 4px 12px 0px rgba(0,0,0,0.12);
|
|
|
- // overflow:scroll;
|
|
|
- &>h1{
|
|
|
- font-size: 24px;
|
|
|
- color: #222;
|
|
|
- }
|
|
|
- }
|
|
|
- .title_top{
|
|
|
-
|
|
|
- .add_btn{
|
|
|
- width:90px;
|
|
|
- height:32px;
|
|
|
- background:$mainColor;
|
|
|
- border:1px solid rgba(237,237,237,1);
|
|
|
- border-radius:4px;
|
|
|
- float: right;
|
|
|
- text-align: center;
|
|
|
- line-height: 32px;
|
|
|
- color: #FFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .table{
|
|
|
+ // border: 1px solid red;
|
|
|
+ padding: 20px 20px;
|
|
|
+ position: relative;
|
|
|
+ // overflow:hidden;
|
|
|
+ section>p {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ span {
|
|
|
+ color: #cccccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ background: #ccc;
|
|
|
+ padding: 20px !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ height: calc(100vh - 100px);
|
|
|
+ box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
|
|
|
+ // overflow:scroll;
|
|
|
+ &>h1 {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #222;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title_top {
|
|
|
+ .add_btn {
|
|
|
+ width: 90px;
|
|
|
+ height: 32px;
|
|
|
+ background: $mainColor;
|
|
|
+ border: 1px solid rgba(237, 237, 237, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ float: right;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32px;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table {
|
|
|
background: #fff;
|
|
|
// border: 1px solid #EDEDED;
|
|
|
- // min-height: calc(100vh - 430px);
|
|
|
- // height:calc(100vh - 350px);
|
|
|
+ // min-height: calc(100vh - 430px);
|
|
|
+ // height:calc(100vh - 350px);
|
|
|
}
|
|
|
- .edit_btn{
|
|
|
+ .edit_btn {
|
|
|
color: #25486A;
|
|
|
- }
|
|
|
- .info_btn{
|
|
|
- background: #ECF0F5;
|
|
|
- color: #1F2328;
|
|
|
- border-color: #ECF0F5;
|
|
|
- }
|
|
|
- // 分页
|
|
|
- .el-pagination {
|
|
|
- // position: absolute;
|
|
|
- // left: 0;
|
|
|
- // bottom: 15px;
|
|
|
- text-align: right;
|
|
|
- width: 100%;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-.el-dialog{
|
|
|
- .el-select{display: block;}
|
|
|
-}
|
|
|
-.main_btn{
|
|
|
- background: $mainColor;
|
|
|
- border-color: $mainColor;
|
|
|
- width: 120px;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-.cancel_btn{
|
|
|
- width: 170px;
|
|
|
- font-size: 14px;
|
|
|
- color: #6A737B;
|
|
|
+ }
|
|
|
+ .info_btn {
|
|
|
+ background: #ECF0F5;
|
|
|
+ color: #1F2328;
|
|
|
+ border-color: #ECF0F5;
|
|
|
+ }
|
|
|
+ // 分页
|
|
|
+ .el-pagination {
|
|
|
+ // position: absolute;
|
|
|
+ // left: 0;
|
|
|
+ // bottom: 15px;
|
|
|
+ text-align: right;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-dialog {
|
|
|
+ .el-select {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.main_btn {
|
|
|
+ background: $mainColor;
|
|
|
+ border-color: $mainColor;
|
|
|
+ width: 120px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.cancel_btn {
|
|
|
+ width: 170px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6A737B;
|
|
|
}
|
|
|
+
|
|
|
// 表头
|
|
|
-thead{
|
|
|
- tr th{
|
|
|
- background-color: #F2F2F2 !important;
|
|
|
- padding: 8px 0 !important;
|
|
|
- }
|
|
|
+thead {
|
|
|
+ tr th {
|
|
|
+ background-color: #F2F2F2 !important;
|
|
|
+ padding: 8px 0 !important;
|
|
|
+ }
|
|
|
}
|
|
|
-tbody{
|
|
|
- tr td{
|
|
|
- padding: 4px 0 !important;
|
|
|
- }
|
|
|
+
|
|
|
+tbody {
|
|
|
+ tr td {
|
|
|
+ padding: 4px 0 !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.edit{
|
|
|
- color: rgb(0, 128, 0);
|
|
|
+.edit {
|
|
|
+ color: rgb(0, 128, 0);
|
|
|
}
|
|
|
-.del{
|
|
|
- color: #F01010;
|
|
|
+
|
|
|
+.del {
|
|
|
+ color: #F01010;
|
|
|
}
|
|
|
-.logout:hover{
|
|
|
- cursor: pointer;
|
|
|
+
|
|
|
+.logout:hover {
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
-.upload_btn{
|
|
|
- position: relative;
|
|
|
- input{
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- left: 0;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+
|
|
|
+.upload_btn {
|
|
|
+ position: relative;
|
|
|
+ input {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ left: 0;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
// 内容区域滚动
|
|
|
-.el-form.over_y{
|
|
|
+.el-form.over_y {
|
|
|
max-height: calc( 100vh - 290px);
|
|
|
- padding:0 10px;
|
|
|
- overflow-y:auto;
|
|
|
- &::-webkit-scrollbar {/*滚动条整体样式*/
|
|
|
- width:4px;/*高宽分别对应横竖滚动条的尺寸*/
|
|
|
- height:4px;
|
|
|
+ padding: 0 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 4px;
|
|
|
+ /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 4px;
|
|
|
}
|
|
|
- &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
|
|
|
- border-radius:5px;
|
|
|
- -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
|
|
|
- background:rgba(0,0,0,0.2);
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 5px;
|
|
|
+ -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
- &::-webkit-scrollbar-track {/*滚动条里面轨道*/
|
|
|
- -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
|
|
|
- border-radius:0;
|
|
|
- background:rgba(0,0,0,0.1);
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 弹框
|
|
|
-.el-dialog__footer{
|
|
|
- text-align: center;
|
|
|
+.el-dialog__footer {
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
-.w-e-text{
|
|
|
+.w-e-text {
|
|
|
min-height: 500px !important;
|
|
|
}
|
|
|
+
|
|
|
// 停用启用样式
|
|
|
.open {
|
|
|
- color:#409eff;
|
|
|
+ color: #409eff;
|
|
|
}
|
|
|
+
|
|
|
.close {
|
|
|
- color: red;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table__fixed-right::before,
|
|
|
+.el-table__fixed::before {
|
|
|
+ background: none;
|
|
|
}
|
|
|
-.el-table__fixed-right::before, .el-table__fixed::before{
|
|
|
- background: none;
|
|
|
+
|
|
|
+.filter-form {
|
|
|
+ .el-input,
|
|
|
+ .el-select {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.filter-form{
|
|
|
- .el-input,.el-select{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+.el-table .el-table__cell {
|
|
|
+ background: #ccc;
|
|
|
}
|
|
|
|
|
|
// .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
|
|
|
// content: '';
|
|
|
-// }
|
|
|
-
|
|
|
+// }
|