$WinWitdh:1366px;
$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;
}