基础

基础样式

@/base.scss (opens new window)

• 包含平时常用的样式、如果有自己的独有的样式，可以自行添加
• 下面的样式源码，自己可以是用浏览器的搜索ctrl + f 进行搜索关键词，可以中文也可以因为。
• 里面的变量来自 @/uni.scss (opens new window)

// 弹性伸缩盒
.display-flex {
  display: flex;
}
// 行内弹性伸缩盒
.display-inline-flex {
  display: inline-flex;
}
// 盒子大小区域的特定
.box-sizing-border-box {
  box-sizing: border-box;
}

.flex-flow-wrap {
  flex-flow: wrap;
}

.align-items-flex-end {
  align-items: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-space-between {
  justify-content: space-between;
}

.flex-direction-column {
  flex-direction: column;
}

.align-items-center {
  align-items: center;
}

.display-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-1 {
  flex: 1;
}
// 最大宽度
.width-100 {
  width: 100vw;
  max-width: $app-max-width;
}
// 1/2 宽度
.width-50 {
  width: 50%;
}

// 盒子图片居中显示
.bg-center {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/** 盒子图片以高度居中*/
.bg-center-height {
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
}

// 超出一行显示...
.text-overflow-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
// 超出两行显示...
.text-overflow-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
// 相对定位
.position-relative {
  position: relative;
}
// 绝对定位
.position-absolute {
  position: absolute;
}
// 固定定位
.position-fixed {
  position: fixed;
  max-width: $app-max-width;
  left: 50%;
  transform: translateX(-50%);
}

.overflow-hidden {
  overflow: hidden;
}
// 字体向右对齐
.text-align-right {
  text-align: right;
}
// 字体居中对齐
.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.font-weight-bold {
  font-weight: bold;
}

.font-weight-bolder {
  font-weight: bolder;
}
// 默认border 边框
.border-base {
  border: 1*1upx solid var(--border-color);
}
// 默认底部边框
.border-bottom {
  border-bottom: 1*1upx solid var(--border-color);
}
// 默认盒子阴影
.box-shadow {
  box-shadow: 4*2upx 4*2upx 6*2upx rgba(39, 39, 39, 0.2);
}

// 移除阴影
.remove-box-shadow {
  box-shadow: none;
}
// 默认transition
.transition-base {
  transition: all .1s;
}