uniApp全局公共样式

内置的一些类名，方便全局使用

/*
  全局公共样式
  by fk 2020年11月5日11:27
 */

body {
  /* background-color: #f6f6f6; */
  color: #333333;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}

.yuan {
  border-radius: 50%;
}

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
  box-sizing: border-box;
}

.btnhover {
  opacity: 0.7;
}

.c-white {
  color: #ffffff;
}

.bg-white {
  background-color: #fff;
}

.c-black {
  color: #333333;
}

.ty_content-tab {
  height: calc(100vh - var(--status-bar-height));
  width: 100%;
  /* background-color: #f6f6f6; */
}

.ty_content {
  min-height: 100vh;
  width: 100%;
  background-color: #fff;
}

.ty_contenthui {
  min-height: 100vh;
  width: 100%;
  background-color: #f6f6f6;
}

.ty-hengxiang {
  display: flex;
  flex-direction: row;
}

.ty_hengxiangjuzhong {
  display: flex;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
}

.ty_hengxiangliangduan {
  display: flex;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.ty_hengxiangjuyou {
  display: flex;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.ty-zidongzhanman {
  -webkit-flex: 1;
  flex: 1;
}

.ty-hengxianghuanhang {
  display: flex;
  flex-wrap: wrap;
}

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

.ty_chuizhijuzhong {
  align-items: center;
}

.ty_shang {
  width: 750rpx;
  height: 40rpx;
}

.ty_daohanglan {
  width: 750rpx;
  height: 128rpx;
  background-color: #ffffff;
}

.ty_anniuzi {
  width: 750rpx;
  height: 88rpx;

  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.ty_biaoti {
  margin-right: 64rpx;
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  letter-spacing: 0rpx;
  color: #464646;
}

.ty_yuan {
  border-radius: 150rpx;
}

.ty_mc {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10241;
}

.ty_mc10 {
  background: rgba(0, 0, 0, 1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 102411;
}

.ty_back {
  width: 45rpx;
  height: 45rpx;
}

.ty_guding {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1024;
  box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
}

.ty_beijinghuise {
  width: 100%;
  background-color: #f1f1f1;
}

.ty_congxiapailie {
  display: flex;
  flex-direction: column-reverse;
}

.ty_mengceng {
  background: rgba(21, 19, 19, 0.6);
  box-sizing: border-box;
  position: fixed;
  z-index: 1111;
  width: 750rpx;
}

.t-s {
  text-shadow: #999 2rpx 2rpx 5rpx;
}

/* 特殊处理 */
.ty_shanchuxian {
  text-decoration: line-through;
  /* 加删除线 */
}

/*========== flex布局相关 ==========*/
.dp-f {
  display: flex;
  display: -webkit-flex;
  /*在webkit内核的浏览器上使用要加前缀*/
}

/*快捷水平垂直居中*/
.dp-fc {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}

/*行内块元素*/
.dp-ib {
  display: inline-block !important;
}

/* 主轴方向 */
.fd-rr {
  flex-direction: row-reverse !important;
  /* 主轴方向从右到左,默认从左到右 */
}

.fd-c {
  flex-direction: column !important;
  /* 主轴方向从上到下,默认从左到右 */
}

.fd-cr {
  flex-direction: column-reverse !important;
  /* 主轴方向从下到上,默认从左到右 */
}

/* flex-wrap属性 */
.fw-w {
  flex-wrap: wrap !important;
  /* 换行，第一行在上方。 */
}

.fw-wr {
  flex-wrap: wrap-reverse !important;
  /* 换行，第一行在下方。 */
}

/* justify-content属性 */
.jc-fs {
  justify-content: flex-start !important;
  /* 在主轴左对齐-默认 */
}

.jc-fe {
  justify-content: flex-end !important;
  /* 在主轴右对齐 */
}

.jc-c {
  justify-content: center !important;
  /* 在主轴居中对齐 */
}

.jc-sb {
  justify-content: space-between !important;
  /* 两端对齐（两边不留空） */
}

.jc-sa {
  justify-content: space-around !important;
  /* 等距对齐*/
}

/* align-items属性 */
.ai-fs {
  align-items: flex-start !important;
}

.ai-fe {
  align-items: flex-end !important;
  /* 底对齐 */
}

.ai-c {
  align-items: center !important;
  /* 水平居中 */
}

.ai-bl {
  align-items: baseline !important;
  /* 水平居中 */
}

/* align-content属性(多列对齐) */

.ac-fs {
  align-content: flex-start !important;
  /* 与交叉轴的起点对齐 */
}

.ac-fe {
  align-content: flex-end !important;
  /* 与交叉轴的终点对齐 */
}

.ac-c {
  align-content: center !important;
  /* 与交叉轴的中点对齐。 */
}

.ac-sb {
  align-content: space-between !important;
  /* 与交叉轴两端对齐，轴线之间的间隔平均分布。 */
}

.ac-sa {
  align-content: space-around !important;
  /* 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */
}

/* align-self属性(默认auto),该属性用于子元素特殊处理 */
.as-fs {
  align-self: flex-start !important;
  /* 自身在交叉左对齐 */
}

.as-fe {
  align-self: flex-end !important;
  /* 自身在交叉右对齐 */
}

.as-c {
  align-self: center !important;
  /* 自身在交叉居中对齐 */
}

.as-bl {
  align-self: baseline !important;
  /* 自身根据文字对齐 */
}

/* 定位相关 */
.pt-f {
  position: fixed;
}

.pt-r {
  position: relative;
}

.pt-a {
  position: absolute;
}

.top-0 {
  top: 0;
}

.lef-0 {
  left: 0;
}

.rig-0 {
  right: 0;
}

.bot-0 {
  bottom: 0;
}

.all-0 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 百分比 */
.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

/* 对齐方式 */
.te-l {
  text-align: left;
}

.te-r {
  text-align: right;
}

.te-c {
  text-align: center;
}

/* 粗体 */
.fw-b {
  font-weight: bold;
}

.fw-l {
  font-weight: lighter;
}

.fw-n {
  font-weight: normal;
}

// 定义flex等分
@for $i from 0 through 12 {
  .f-#{$i} {
    flex: $i;
  }
}

// 定义字体(rpx)单位，10~100rpx  fs-10 ~ fs-100
@for $i from 10 through 100 {
  .fs-#{$i} {
    font-size: $i + rpx;
  }
}

// 定义内外边距，历遍1-100
@for $i from 0 through 100 {
  // 得出：m-all-30
  .m-all-#{$i} {
    margin: $i + rpx;
  }

  // 得出：p-all-30
  .p-all-#{$i} {
    padding: $i + rpx;
  }

  @each $short, $long in l left, t top, r right, b bottom {
    // 缩写版，结果如： ml-30
    // 定义外边距
    .m#{$short}-#{$i} {
      margin-#{$long}: $i + rpx;
    }

    // 定义内边距
    .p#{$short}-#{$i} {
      padding-#{$long}: $i + rpx;
    }
  }
}

//全局宽高
@for $i from 0 through 750 {
  // w-0 ~ w-750
  .w-#{$i} {
    width: $i + rpx;
  }
  // h-0 ~ h-750
  .h-#{$i} {
    height: $i + rpx;
  }
}

//全局圆角 行高 br-0 ~ br-50  lh0 ~ lh-50
@for $i from 0 through 50 {
  // w-0 ~ w-750
  .br-#{$i} {
    border-radius: $i + rpx;
  }
  // h-0 ~ h-750
  .lh-#{$i} {
    line-height: $i + rpx;
  }
}

/* start--文本行数限制--start */
.line-1 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.line-2 {
  -webkit-line-clamp: 2;
}

.line-3 {
  -webkit-line-clamp: 3;
}

.line-4 {
  -webkit-line-clamp: 4;
}

.line-5 {
  -webkit-line-clamp: 5;
}

.line-2,
.line-3,
.line-4,
.line-5 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; // 弹性伸缩盒
  -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}