$WinWitdh:1200px; $BaseC:#555; $LinkC:#06f; $HoverC:#f60; $FontSize:13px; $fontFamily: "Spurce Han Sans,Wah Kang font,Microsoft YaHei"; $allColor: #333; //正文#333 $color1: #666; //辅助文字#666 $color2: #999; //#999 $color3: #ccc; //失效文字#ccc $color4: #00A0E8; //链接文字 $color5: #8E9CC1; //表头文字加粗 $colorList: ( 1:$color1, 2:$color2, 3:$color3, 4:$color4, 5:$color5); $theme1: #5BA7FF; $theme2: #FFF; $theme3: #8E9CC1; $themeList: (1:$theme1, 2:$theme2, 3:$theme3); $auxiliary1: #548FF0; //辅助色彩 $auxiliary2: #FF4121; $auxiliary3: #7ED321; $auxiliary4: #F5A623; $auxiliaryList: ( 1:$auxiliary1, 2:$auxiliary2, 3:$auxiliary3, 4:$auxiliary4); $borderColor1: #C2CEDB; //线条色彩 $borderColor2: #DDD; $borderColorList: (1:$borderColor1, 2:$borderColor2); $bg1: #FFF; $bg2: #F2FBFF; $bg3: #EEFAFF; $bg4: #FFF5E4; $bg5: #E5F6D3; $bgList: ( 1:$bg1, 2:$bg2, 3:$bg3, 4:$bg4, 5:$bg5); $allSize: 14px; //正常文字大小 $size1: 12px; //辅助文字大小 // mixins @mixin dz($time:0.25s) { -webkit-transition: all $time ease-in-out; -moz-transition: all $time ease-in-out; -o-transition: all $time ease-in-out; transition: all $time ease-in-out; } // .el-dialog__headerbtn { // top: -24px; // right: -24px; // width: 24px; // height: 24px; // border-radius: 50%; // color: #8E9CC1; // background-color: #fff; // } .el-dialog__header { border-bottom: 1px solid #C2CEDB; box-sizing: border-box; .el-dialog__title { height: 20px; line-height: 20px; font-size: 14px; } } // .el-button--mini, // .el-button--mini.is-round { // padding: 5px 20px; // } // .el-button { // box-sizing: border-box; // border-color: $auxiliary1; // } // .el-button span { // color: $color4; // } // .el-button:focus, // .el-button:hover { // background-color: $bg1; // border-color: $auxiliary1; // } // .el-button span { // display: inline-block; // line-height: 20px; // height: 20px; // } // * { // font-family: $fontFamily; // font-size: $allSize; // color: $allColor; // } // .color { // color: $allColor; // } // .el-input__inner:hover{ // border-color: // } //文字色 @each $i, $color in $colorList { .color#{$i} { color: $color; } } //主题色 @each $i, $theme in $themeList { .theme#{$i} { background-color: $theme; } } //辅助背景色 @each $i, $auxiliary in $auxiliaryList { .auxiliary#{$i} { background-color: $auxiliary; } } //辅助色 @each $i, $auxiliary in $auxiliaryList { .auxiliary-color#{$i} { color: $auxiliary; } } //线条色 @each $i, $borderColor in $borderColorList { .border-color#{$i} { border-color: $borderColor; } } //背景色 @each $i, $bg in $bgList { .bg#{$i} { background-color: $bg; } } @for $i from 1 to 51 { .border-radius#{$i} { border-radius: #{$i}px; } } @for $i from 1 to 11 { .border#{$i} { border-width: #{$i}px; border-style: solid; } } // .color2 { // color: $color2; // } // .color3 { // color: $color3; // } // .color4 { // color: $color4; // } // .color5 { // color: $color5 // } // @charset "UTF-8"; body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td, menu { margin: 0; padding: 0 } html, body, #app { height: 100%; width: 100%; } table { border-collapse: collapse; border-spacing: 0; table-layout: fixed } ul, ol, menu { list-style: none } fieldset, img { border: none } img, object, select, input, textarea, button { vertical-align: middle } input, textarea, select, address, caption, cite, code, dfn, em, i, b, strong, small, th, var, abbr { font-size: 100%; font-style: normal } caption, th { text-align: left; } article, aside, footer, header, hgroup, nav, section, figure, figcaption { display: block; } code, kbd, pre, samp, tt { font-family: Consolas, "Courier New", Courier, monospace; } address, cite, dfn, em, var, i { font-style: normal; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } a { color: $LinkC; text-decoration: none; cursor: pointer; &:link, &:visited, &:active { color: $LinkC; } &:hover, &:focus { color: $HoverC; text-decoration: underline; outline: none; } &, span, i, em, u, strong, b, p, img, ul, li, div, dd, dt, dl, ol, table, th, td, h1, h2, h3, h4, h5, h6, input, textarea, button, small, select { cursor: pointer; @include dz; } } abbr[title], acronym[title] { border-bottom: 1px dotted; cursor: help; } // base by fungleo html { min-width: $WinWitdh; // overflow-y: scroll; } body { font-size: $FontSize; color: $BaseC; line-height: 2; } body, button, input, select, textarea { font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif, "\5FAE\8F6F\96C5\9ED1"; *font-family: "\5FAE\8F6F\96C5\9ED1"; } h1 { font-size: $FontSize+10; } h2 { font-size: $FontSize+8; } h3 { font-size: $FontSize+6; } h4 { font-size: $FontSize+4; } h5 { font-size: $FontSize+2; } h6 { font-size: $FontSize; } hr { border: none; height: 1px; background: lighten($BaseC, 50%); } .fl { float: left; } .fr { float: right; } .tl { text-align: left; } .tr { text-align: right; } .tc { text-align: center; } .cf:before, .cf:after, .web:before, .web:after, .web_:before, .web_:after { content: ""; display: table; } .cf:after, .web:after, .web_:after { clear: both; } .cf { zoom: 1; } .web { width: $WinWitdh; margin-left: auto; margin-right: auto; zoom: 1; } .web_ { min-width: $WinWitdh; width: 100%; zoom: 1; } .block { display: block; } .none { display: none } .clear { clear: both; } .fl { float: left; } .disIne { display: inline-block; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield; } canvas:focus{ outline: none; }