• font.scss

@font-face {
  font-family: 'DIN';
  font-display: swap;
  src: url('@/assets/Font/DIN-Bold.otf');
}

• mixin.scss

$px: PX; 
$mainColor: #2b2e34;

@mixin bg-image($url) {
  background-image: url($url + '@2x.png');

  @media (min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + '@3x.png');
  }
}

@mixin text-overflow($line) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}

@mixin cm() {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

@mixin ca {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin cf() {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin cflex() {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin wh($width, $height) {
  width: $width;
  height: $height;
}

@mixin line-height($height) {
  height: $height;
  line-height: $height;
}

@mixin dprFont($size) {
  font-size: $size + PX;

  [data-scale='scale-font'] & {
    font-size: ($size * 2) + px;
  }
}

@mixin dprFontI($size) {
  font-size: $size + PX !important;

  [data-scale='scale-font'] & {
    font-size: ($size * 2) + px !important;
  }
}

/* 针对iPhone X / XS / XR / Max机型应用特定样式 */
@mixin iphonex() {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (deviceratio: 3),
    screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
    screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    @content;
  }
}

@mixin multiple-line-ellipsis($line) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}
@mixin userSelect {
  user-select: none; /* Firefox私有属性 */
}

@mixin iphoneXBottm {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  text-size-adjust: none;
}