// mixins

// 移动端尺寸适配  使用方法 width:rem(100); 这里的100 就是设计图尺寸
@function rem($px) {
  // $px * 375 / 75000
  @return ($px * 0.01) + rem;
}

// Mixins语法: 使用@mixin+name 定义代码块，使用@include+name引入代码块

// 给元素清除浮动 使用方法 @include clearfix;
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 未知宽高的内容横向纵向居中 注意父元素需要  position: relative; 使用方法 @include center;
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
// 原素内容横向纵向都居中 使用方法 @include centerChild;
@mixin centerChild {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 原素内容纵向居中  使用方法 @include centerItems;
@mixin centerItems {
  display: flex;
  // flex-flow: column nowrap;
  align-items: center;
}

// 文本末尾添加省略号 单行  使用方法 @include ellipsis;
@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 宽度不固定，适合多行以及移动端显示 使用方法 @include ellipsisMroe(3);
@mixin ellipsisMroe($n) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $n;
  -webkit-box-orient: vertical;
}

// 居中显示图片 取宽高长的那部分自适应  缺点:不铺满 会有空白 优点: 图片完全显示  使用方法 @include imgCenterAll;
@mixin imgCenterAll {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

// 居中显示图片 取宽高短的那部分自适应  缺点:图片会被截取 优点: 铺满   使用方法 @include imgCenterPortion;
@mixin imgCenterPortion {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@mixin flex($layout) {
  @if $layout==vertical_center {
    display: flex;
    align-items: center;
  } @else if $layout==level_center {
    display: flex;
    justify-content: center;
  } @else if $layout==align_center_space_between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  } @else if $layout==level_center {
    display: flex;
    justify-content: center;
  } @else if $layout==wrap_level_center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  } @else if $layout==wrap_vertical_center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  } @else if $layout==Horizontal_vertical_center {
    display: flex;
    justify-content: center;
    align-items: center;
  } @else if $layout==wrap_Horizontal_vertical_center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
  }
}

.flex {
  display: flex;
}
.flex1 {
  flex: 1;
}
.flex-end {
  justify-content: flex-end;
}
.flex-middle {
  align-items: center;
}
.btn {
  margin-right: 16px;
  width: 100px;
}

.ml-15 {
  margin-left: 15px;
}
.mt-20 {
  margin-top: 20px;
}
