baise-pc-vue/src/styles/mixin.scss

// 水平垂直居中
@mixin mid($x: 50%, $y: 50%) {
    position: absolute;
    left: $x;
    top: $y;
    transform: translate3d(-$x, -$y, 0);
}

// 水平垂直居中（margin版）
@mixin marMid($x, $y, $mx, $my) {
    position: absolute;
    left: $x;
    top: $y;
    margin-left: $mx;
    margin-top: $my;
}

// 水平居中
@mixin xMid($x: 50%) {
    position: absolute;
    left: $x;
    transform: translate3d(-$x, 0, 0);
}

// 垂直居中
@mixin yMid($y: 50%) {
    position: absolute;
    top: $y;
    transform: translate3d(0, -$y, 0);
}

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

// 字体大小、字体颜色、字体粗细
@mixin fcw($size, $color, $weight: 400) {
    font-size: $size;
    color: $color;
    font-weight: $weight;
}

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

// 文字多行省略
@mixin textMulOmit($col: 2) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $col;
    -webkit-box-orient: vertical;
}

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

@mixin ossBg($name) {
    background-image: url('https://birdseye-img.sysuimars.com/birdseye-look-vue/' + $name);
    background-size: 100% 100%;
}

@mixin PingFang($color:#FFFFFF, $weight:bold) {
    font-family: PingFang-SC-Regular;
    font-weight: $weight;
    color: $color;
}

@mixin JXZK($color:#FFFFFF, $weight:bold) {
    font-family: jiangxizhuokai;
    font-weight: $weight;
    color: $color;
}

@mixin CKTK($color:#FFFFFF, $weight:bold) {
    font-family: CKTKingkong;
    font-weight: $weight;
    color: $color;
}

@mixin Title() {
    position: relative;
    width: 147rpx;
    height: 56rpx;
}

@mixin TitleBg($bgName) {
    z-index: 0;
    position: absolute;
    bottom: 0rpx;
    width: 147rpx;
    height: 42rpx;
    @include ossBg($bgName);
}

@mixin TitleText($color:#000000) {
    text-align: center;
    width: 100%;
    position: absolute;
    z-index: 1;
    @include PingFang($color);
    font-size: 30rpx;
}

@mixin FlexRowCenter($justify-content:space-around) {
    display: flex;
    align-items: center;
    justify-content: $justify-content;
}

@mixin LeftTop($left: 0, $top: 0) {
    position: absolute;
    left: $left;
    top: $top;
}