manyi/static/components/custom/scss/_base.scss

/* **********
 * init 全局样式
 * **********/
@use "sass:math";
* {
  outline: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html, body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: none;
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f0eff5;
  min-height: 100%;// 因为body内部可能有absolute fixed布局，导致没有高度，主要是为了防止 vconsole按钮无法拖动。
}

ol, ul, li {
  margin: 0;
  padding: 0;
  list-style: none
}

i, em {
  font-style: normal
}

a {
  color: #000;
  text-decoration: none
}

input:not([type]) {
  // 所有无type的输入框，都需要加入如下属性，否则ios12输入有bug。 有type已经被mui加上了如下属性。
  -webkit-user-select: text;
}

#testHomeBtn {
  $btnSize: 40px;

  position: fixed;
  width: $btnSize;
  height: $btnSize;
  margin-left: math.div(-$btnSize, 2);
  margin-top: math.div(-$btnSize, 2);
  right: 0;
  bottom: 100px;
  border-radius: 50%;
  z-index: 99999;
  background: rgba(0, 0, 0, .5);
  background-clip: content-box;
  border: math.div($btnSize, 5) solid rgba(0, 0, 0, .3);
  box-shadow: 0 0 math.div($btnSize, 2) rgba(0, 0, 0, .4);
  transition: opacity linear .22s;

  &.fade {
    opacity: .4;
  }
}

//　去掉更新成功的 Connected to BrowserSync 提示
#__bs_notify__ {
  display: none !important;
}

//验证码控件默认样式：居中
.geetest_holder {
  margin: auto;
}

/*remModel默认为48px，否则js计算延迟导致页面字体过小*/
.remModel {
  font-size: 48px;
}

.clearfix {
  *zoom: 1
}

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}

.v-middle {
  vertical-align: middle;
}

.hidden {
  display: none !important
}

.visible-hidden {
  visibility: hidden !important;
}

.clear-before:before {
  display: none;
}

.clear-after:after {
  display: none;
}

.fade-node {
  opacity: .6;
}

.noClick {
  pointer-events: none;
}

.no-touch {
  /*主要是阻止元素的默认行为，如滚动，避免出现滚动穿透：但还是有BUG*/
  touch-action: none;
}

.over-hide {
  /*解决滚动穿透，当弹窗打开时，body加上该class，IOS和安卓打开键盘时不同，IOS的window大小不变(但好像会触发resize事件)，安卓的window会缩小*/
  overflow: hidden;
}

.flex {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.flexbox {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
}

.rotateX {
  transform: rotateX(180deg);
  display: inline-block;
}

/***一些公共的布局样式*****/
.custom-margin {
  margin-top: 1em;
  margin-bottom: 1em;
}

.custom-top {
  margin-top: 10px;
}

.custom-right {
  margin-right: 10px;
}

.custom-bottom {
  margin-bottom: 10px;
}

.custom-bottom-s {
  margin-bottom: 15px;
}

.autowidth {
  width: auto !important;
}

.inline-block {
  display: inline-block;
}

.autoheight {
  height: auto !important;
}

.text-left {
  text-align: left !important
}

.text-right {
  text-align: right !important
}

.text-center {
  text-align: center !important
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.pull-left {
  float: left
}

.pull-right {
  float: right
}

/********************common box model**************************/
$index: 0;
@while $index <= 40 {
  .padding-#{$index} {
    padding: #{$index}px !important;
  }
  .padding-t-#{$index} {
    padding-top: #{$index}px !important;
  }
  .padding-r-#{$index} {
    padding-right: #{$index}px !important;
  }
  .padding-b-#{$index} {
    padding-bottom: #{$index}px !important;
  }
  .padding-l-#{$index} {
    padding-left: #{$index}px !important;
  }
  .padding-t-b-#{$index} {
    padding-top: #{$index}px !important;
    padding-bottom: #{$index}px !important;
  }
  .padding-l-r-#{$index} {
    padding-left: #{$index}px !important;
    padding-right: #{$index}px !important;
  }

  .margin-#{$index} {
    margin: #{$index}px !important;
  }
  .margin-t-#{$index} {
    margin-top: #{$index}px !important;
  }
  .margin-r-#{$index} {
    margin-right: #{$index}px !important;
  }
  .margin-b-#{$index} {
    margin-bottom: #{$index}px !important;
  }
  .margin-l-#{$index} {
    margin-left: #{$index}px !important;
  }
  .margin-t-b-#{$index} {
    margin-top: #{$index}px !important;
    margin-bottom: #{$index}px !important;
  }
  .margin-l-r-#{$index} {
    margin-left: #{$index}px !important;
    margin-right: #{$index}px !important;
  }
  $index: $index + 5;
}

/*common color*/
.font-bold {
  font-weight: bold;
}

.font-b {
  color: #000 !important;
}

$index: 12;
@while $index <= 28 {
  .font-#{$index} {
    font-size: #{$index}px !important;
  }

  // font-b-12 到 font-b-28 表示文字字体12px 到 28px，且为纯黑色，和  font-b-0 到 font-b-10 不冲突。
  .font-b-#{$index} {
    font-size: #{$index}px !important;
    color: #000 !important;
  }
  $index: $index + 1;
}

// font-b-0 到 font-b-10 表示文字颜色由浅到深
$index: 0;
@while $index <= 10 {
  .font-b-#{$index} {
    color: rgba(0, 0, 0, $index*0.1) !important;
  }
  $index: $index + 1;
}

// 这个字体样式还是有用,vue中有缺失；但是可以优化，因为这样写会导致 css体积变大，应该在html中，如：font-b-14-8 == font-b-8 font-14
$index: 0;
@while $index <= 10 {
  $index2: 12;
  @while $index2 <= 24 {
    .font-b-#{$index2}-#{$index} {
      font-size: #{$index2}px !important;
      color: rgba(0, 0, 0, $index*0.1) !important;
    }
    $index2: $index2 + 2;
  }

  $index: $index + 2;
}

/***行高***/
$index: 12;
@while $index <= 44 {
  .l-h-#{$index} {
    line-height: #{$index}px;
  }
  $index: $index + 1;
}