@mixin button{ width: 75px ; height: 28px ; border-radius: 4px ; border-width: 1px; border-style: solid; padding-left: 0px ; padding-right: 0px; text-align: center; padding-top: 0px; padding-bottom: 0px; font-size: 12px; font-family: Microsoft Yahei UI; } @mixin scrollBar { &:hover{ &::-webkit-scrollbar-thumb { background-color: hsla(220, 100%, 62%, .3); } } &::-webkit-scrollbar-track-piece { background: rgba(255,255,255,0); } &::-webkit-scrollbar { width: 7px ; } &::-webkit-scrollbar-thumb { background-color: hsla(220, 100%, 62%, 0); transition: all .25s; -webkit-transition: all .25s ease-in-out 0s; border-radius: 20px; &:hover{ background-color: hsla(220, 100%, 62%, .6); } } } .Myel-button{ @include button; } .Myel-row{ margin-bottom: 8px; &>button{ @include button; } } .Myel-dialog{ // .el-dialog{ // height:80% // } @include scrollBar(); border-radius: 8px !important; .el-dialog__footer{ margin-bottom: 0px; .el-button{ border-radius: 4px; @include button; } .el-button--default{ color: hsla(220, 100%, 62%, 1); border-color: hsla(220, 100%, 62%, 1); } } .el-dialog__body{ padding: 16px; height: 550px; overflow: auto; @include scrollBar() } .el-dialog__header{ height: 40px; margin: 0px ; padding:0px; span{ line-height: 40px; font-size: 14px; margin-left: 16px; font-weight: bold; color: hsla(0, 0%, 100%, 1); } button{ transform: scale((20/16),(20/16)); top: 10px; i{ color: hsla(0, 0%, 100%, 1) ; } } } } .Myel-form{ position: relative; #right{ width: 220px; height: 35px; .el-form-item__content{ position: absolute; text-align: right; right: 0px; } } .el-form-item{ margin-bottom: 16px; margin-right: 0px; text-align: left; .el-form-item__label{ color: hsla(222, 15%, 50%, 1); width: 120px ; padding-right: 16px;; height: 30px; } .el-form-item__content{ width: 220px; height: auto; &>.el-input{ width: 220px; &>input{ width: 220px; height: 30px ; border-radius: 4px; border:1px solid hsla(212, 26%, 80%, 1); } } .el-date-editor{ width: 100%; height: 30px; line-height: 30px; &>i{ height: 30px; line-height: 30px; } &>span{ height: 30px; line-height: 30px; } } textarea{ width: 220px; height: 60px; border-radius: 4px; border:1px solid hsla(212, 26%, 80%, 1); } &>button{ @include button; } .el-button--default{ color: hsla(220, 100%, 62%, 1); border-color: hsla(220, 100%, 62%, 1); } &>.el-select{ line-height: 30px; .el-select__tags{ height: 30px; line-height: 30px; } &>.el-input{ width: 220px; height: 30px ; .el-input__suffix{ line-height: 30px; } input{ width: 220px; height: 30px ; border-radius: 4px; border:1px solid hsla(212, 26%, 80%, 1); line-height: 30px; } } } } } } #Mypagination-container{ height: 32px !important; margin-top: 0px !important; padding-top: 0px !important; padding-right: 0px !important; .el-pagination{ &>span{ margin: 0px; font-size: 14px !important; } &>ul{ &>li{ font-size: 14px !important; padding: 0px; margin:0px 2px } } transform: scale(0.7,0.7) !important; transform-origin: 100% 0; .active{ background-color: hsla(220, 100%, 62%, 1) !important; } } } .Myel-table{ tr.el-table__row.el-table__row--striped{ td.el-table__cell{ background: hsla(220, 33%, 98%, 1); line-height: 38px; } } .el-table__fixed-right{ height: 100% !important; tr.el-table__row--striped{ td.el-table__cell{ background: hsla(220, 33%, 98%, 1); line-height: 38px; } } } .el-table__fixed{ height: 100% !important; tr.el-table__row--striped{ td.el-table__cell{ background: hsla(220, 33%, 98%, 1); line-height: 38px; } } } td.el-table__cell{ height: 38px !important; padding:0px; font-family: 'Microsoft Yahei UI'; font-size: 14px ; line-height: 38px; .cell{ padding: 0px; height: 38px; line-height: 38px !important; } } border-radius: 8px; .el-table__header{ .el-table__cell{ height: 40px !important; background-color: hsla(222, 33%, 92%, 1); color: hsla(222, 15%, 50%, 1); font-family: 'Microsoft Yahei UI'; font-weight: bold; font-size: 14px ; .cell{ padding: 0px !important; } } } .el-table__body-wrapper{ @include scrollBar(); &::-webkit-scrollbar{ height: 12px; } color: hsla(255, 24%, 16%, 1); // tr.el-table__row--striped.el-table__row{ // td.el-table__cell{ // background-color: hsla(220, 33%, 98%, 1) ; // } // } } } .Myavue{ .avue-crud__pagination{ @extend #Mypagination-container } .el-table{ tr.el-table__row.el-table__row--striped{ td{ background: hsla(220, 33%, 98%, 1); line-height: 38px; } } .el-table__fixed-right{ height: 100% !important; tr.el-table__row--striped{ td{ background: hsla(220, 33%, 98%, 1); line-height: 38px; } } } .el-table__fixed{ height: 100% !important; tr.el-table__row--striped{ td{ background: hsla(220, 33%, 98%, 1); line-height: 38px; } } } td.el-table__cell{ height: 38px !important; padding:0px; font-family: 'Microsoft Yahei UI'; font-size: 14px ; line-height: 38px; .cell{ padding: 0px; height: 38px; line-height: 38px !important; } } border-radius: 8px; .el-table__header{ .el-table__cell{ height: 40px !important; background-color: hsla(222, 33%, 92%, 1); color: hsla(222, 15%, 50%, 1); font-family: 'Microsoft Yahei UI'; font-weight: bold; font-size: 14px ; .cell{ padding: 0px !important; } } } .el-table__body-wrapper{ @include scrollBar(); &::-webkit-scrollbar{ height: 12px; } color: hsla(255, 24%, 16%, 1); // tr.el-table__row--striped.el-table__row{ // td.el-table__cell{ // background-color: hsla(220, 33%, 98%, 1) ; // } // } } } .avue-form__group{ display: flex !important; position: relative !important; flex-wrap: wrap; .el-col{ width: 320px ; .el-form-item__content{ width: 220px; input{ height: 30px; } } input{ width: 220px; } } .el-col:nth-last-child(1){ width: 180px; height: 46px; position: static !important; .el-form-item{ width: 180px; position: absolute; text-align: right; right: 0px; .el-form-item__content{ width: 180px; } } .el-button{ @extend .Myel-button } .el-button--default{ color: hsla(220, 100%, 62%, 1); border-color: hsla(220, 100%, 62%, 1); } } } // } // .el-dialog{ // @extend .Myel-dialog // } } body>.atooltip{ border-width: 0px !important; border-radius: 4px; box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.2); }