/*
 * @FilePath: /uni-app-template/src/utils.scss
 * @Description: 工具mixin样式，样式中用 @include name(*) 来使用
 */

// 设置背景图片
@mixin bis($url) {
  background: {
    image: url($url);
    repeat: no-repeat;
    size: 100% 100%;
  }
}

// fixed定位位置
@mixin fixed($position, $rem ) {
  position: fixed;
  @if $position == top {
    top:$rem;
    left: 0;
    right: 0;
  }
  @else if $position == bottom {
    bottom: $rem;
    left: 0;
    right: 0;
  }
  @else if $position == left {
    top: 0;
    bottom: 0;
    left: $rem;
  }
  @else if $position == right {
    top: 0;
    bottom: 0;
    right: $rem;
  }
  @else if $position == center {
    top: 50%;
    left: 50%;
    transform: translate(-50% -50%);
  }
}

// 绝对定位居中
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

// 宽and高
@mixin wh ($width, $height) {
  width: $width;
  height: $height;
}

// 字体大小、行高、字体
@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
  font: #{$size}/#{$line-height} $family;
}

// flex垂直水平居中
@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

// flex列水平居中
@mixin flexCenterCol {
  display: flex;
  flex-direction: column;
  align-items: center;
}