// 颜色
blue = #247FEA;
red = #eB1200;
green = #02b000;
border-color = #dcdfe6;
theme-color = #34424F;
btn-color = #4C9BD6;
bg-color = #F6F6F6;
// 字号
word10 = 10px;
word12 = 12px;
word14 = 14px;
word16 = 16px;
word18 = 18px;
word24 = 24px;
// 灰度级
gray3 = #333;
gray4 = #444;
gray6 = #666;
gray9 = #999;
grayE = #efefef;
black = #000;
white = #fff;
bk = #f5f5f5;
// 间隔
margin10 = 10px;
margin20 = 20px;
margin30 = 30px;
// 输入框长度
input300 = 300px;
input200 = 200px;
input150 = 150px;
input100 = 100px;
input60 = 60px;
input50 = 50px;

word(size, color = gray3) {
  font-size: size;
  color: color;
}

// 登录按钮
login-btn() {
  line-height: 45px;
  background-color: blue;
  text-align: center;
  border-radius: 0;
  color: white;
}

// 实心按钮大
solid-btn(width,height) {
  width:width;
  height:height;
  border-radius: 16px;
  padding: 0;
  line-height: height;
  background-color: btn-color;
  text-align: center;
  color: white;
  cursor: pointer;
}

// 空心按钮
hollow-btn(width,height) {
  width:width;
  height:height;
  line-height: height;
  background-color: white;
  text-align: center;
  border-radius: 5px;
  color: btn-color;
  border: 1px solid #E8E8E8;
  cursor: pointer;
}

// 自定义按钮
custom-btn(w, h, bg, color, borderBg = #fff) {
  height: h;
  line-height: h;
  width: w;
  background: bg;
  padding: 0;
  color: color;
  border-color: borderBg;
}

// 操作按钮高亮小
small-active() {
  padding: 5px 10px;
  line-height: 30px;
  background-color: white;
  border(blue);
  text-align: center;
  border-radius: 0;
  color: blue;
}

// 操作按钮灰色小
small-gray() {
  padding: 5px 10px;
  line-height: 30px;
  background-color: white;
  border(gray6);
  text-align: center;
  border-radius: 0;
  color: gray6;
}

// 边框线(颜色|宽度|样式)
bor-bottom(color = border-color, width = 1px, style = solid) {
  border-bottom: width style color;
}

bor-top(color = border-color, width = 1px, style = solid) {
  border-top: width style color;
}

bor-left(color = border-color, width = 1px, style = solid) {
  border-left: width style color;
}

bor-right(color = border-color, width = 1px, style = solid) {
  border-right: width style color;
}

border(color = border-color, width = 1px, style = solid) {
  border: width style color;
}

// transition(类型|时长|呈现方式)
transition(part, time, vol = linear) {
  transition: part time vol;
  -webkit-transition: part time vol;
  -moz-transition: part time vol;
  -o-transition: part time vol;
}

border-radius(deg = 10px) {
  -webkit-border-radius: deg;
  -moz-border-radius: deg;
  -o-radius: deg;
  border-radius: deg;
}

// flex布局沿y轴
flex-y(justify = center, align = center) {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  flex-flow: column nowrap;
  justify-content: justify;
  align-items: align;
}

// flex布局沿x轴
flex-x(justify = space-between, align = center) {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  flex-flow: row nowrap;
  justify-content: justify;
  align-items: align;
}

flex-center() {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  justify-content: center;
  align-items: center;
}

// 文字省略号
ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 多行省略号
multi(row) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: row;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  width: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

// 渐变色
gradient(direction, colorStart, colorEnd) {
  background: -webkit-linear-gradient(direction, colorStart, colorEnd);
  background: linear-gradient(direction, colorStart, colorEnd);
  background: -moz-linear-gradient(direction, colorStart, colorEnd);
  background: -o-linear-gradient(direction, colorStart, colorEnd);
  background: -ms-linear-gradient(direction, colorStart, colorEnd);
}

// 图标
icon-c(widthIcon = 4vw, heightIcon = 4vw, fillColor = #000) {
  width: widthIcon;
  height: heightIcon;
  fill: fillColor;
}

// 模块样式
model(edg) {
  background-color: #fff;
  border-radius(edg);
  margin: 10px;
  padding: 10px;
}

.content-styl{
    // padding-top: 70px;    
}

main() {
  width: 99%;
  min-width: 900px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  min-height: calc(100vh - 100px);
  padding-bottom: 80px;
}

bottom-set() {
  flex-center();
  width: calc(100% - 200px);
  height: 50px;
  background: white;
  position: fixed;
  bottom: 0;
  box-shadow: 0 2px 18px grayE;
  z-index: 99;
}

confirm-btn() {
  border-radius: 4px;
  border: 1px solid btn-color;
  background: btn-color;
  cursor: pointer;
  color: white;
  box-sizing: border-box;
  text-align: center;
}

cancel-btn() {
  border-radius: 4px;
  border: 1px solid #D9D9D9;
  color: gray6;
  background: white;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
}

bottom() {
  flex-center();
  width: calc(100% - 200px);
  height: 76px
  background white
  position fixed
  bottom: 0
  box-shadow  0 2px 18px grayE
  z-index: 99
    .right {
      width: 65px;
      height: 32px;
      confirm-btn();
    }

    .left {
      width: 65px;
      height: 32px;
      cancel-btn();
      margin-right: 8px;
    }
}