@charset "UTF-8";
%box-sizing-border { //盒模型 
  box-sizing: border-box;
}
%ellipsis-basic { //截字
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
%scrolling-touch { //快速滚动
  -webkit-overflow-scrolling:touch;
  overflow-scrolling:touch;
}
%boxpack-center { //文字垂直居中
  display: box;
  display: -webkit-box;
  display: -moz-box;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
}
%flexCenter { //用flex进行居中，居中的是块级元素
  display: flex;
  align-items: center;
  justify-content: center;
}
%boxpack-center { //文字垂直居中
  display: box;
  display: -webkit-box;
  display: -moz-box;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
}
%max-img { // 用 max-width 来防止图片撑破容器 多用于富文本编辑器出来的图片控制
  display: block;
  max-width: 100%;
  height: auto !important;
}

@mixin high-light($opacity) { //点击区域背景色
  -webkit-tap-highlight-color: rgba(0, 0, 0, $opacity);
}
@mixin fn-ellpisis($line) { //文字超出后以...显示 支持多行
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}
//用translate居中
@mixin translateCenter($position) { //@include translateCenter(absolute)
  position: $position;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
// 容器宽高比固定
// 100* 1/1 = 100%
// 100* 3/4 = 75%
@mixin fixed-ratio($padding-top: 100%) { // 例：@include fixed-ratio(75%);
  width: 100%;
  height: 0;
  padding-top: $padding-top;
}
// 美化占位符 placeholder 样式
@mixin beauty-placeholder($fz, $color: #999, $align: left) { // 例：@include beauty-placeholder(20px, #666, right);
  &::-webkit-input-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
}
@mixin arrow($direction, $size, $color) { //箭头 //例：@include arrow(bottom,10px,#F00); 下方10PX红色箭头
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: $size;
  cursor: pointer;
  @if $direction==top {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent $color transparent;
    border-top: none;
  }
  @else if $direction==bottom {
    border-style: solid dashed dashed dashed;
    border-color: $color transparent transparent transparent;
    border-bottom: none;
  }
  @else if $direction==right {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent $color;
    border-right: none;
  }
  @else if $direction==left {
    border-style: dashed solid dashed dashed;
    border-color: transparent $color transparent transparent;
    border-left: none;
  }
}
//0.5px边框 默认加下边框 例：@include halfPx;
@mixin halfPx($color:#e6e6e6, $direction:"bottom", $radius:0px) { //例：@include halfPx($direction:topBottom); 为上下边框;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    width: 200%;
    height: 200%;
    transform: scale(.5, .5);
    border-radius: ptrd($radius);
    background: none;
    box-sizing: border-box;
    pointer-events: none;
    @if $direction==top {
      border-top: 1px solid $color;
    }
    @else if $direction==bottom {
      border-bottom: 1px solid $color;
    }
    @if $direction==left {
      border-left: 1px solid $color;
    }
    @else if $direction==right {
      border-right: 1px solid $color;
    }
    @else if $direction==topBottom {
      border-top: 1px solid $color;
      border-bottom: 1px solid $color;
    }
    @else if $direction==leftRight {
      border-left: 1px solid $color;
      border-right: 1px solid $color;
    }
    @else if $direction==all {
      border: 1px solid $color;
    }
  }
}