163 lines
3.2 KiB
SCSS
163 lines
3.2 KiB
SCSS
/* 多行省略 */
|
||
.multi-line-omit {
|
||
word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
|
||
text-overflow: ellipsis; // 溢出用省略号显示
|
||
overflow: hidden; // 超出的文本隐藏
|
||
display: -webkit-box; // 作为弹性伸缩盒子模型显示
|
||
-webkit-line-clamp: 2; // 显示的行
|
||
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||
}
|
||
|
||
/* 单行省略 */
|
||
.one-line-omit {
|
||
width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
|
||
white-space: nowrap; // 溢出不换行
|
||
overflow: hidden; // 超出的文本隐藏
|
||
text-overflow: ellipsis; // 溢出用省略号显示
|
||
}
|
||
|
||
@mixin flex($direction: row) {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: $direction;
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.app {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
.app {
|
||
width: 750rpx;
|
||
}
|
||
|
||
/* #endif */
|
||
.status-bar-gap {
|
||
padding-top: calc(88rpx + var(--status-bar-height));
|
||
}
|
||
|
||
$color: #0129D3;
|
||
.card-wrapper {
|
||
background-color: #fff;
|
||
padding: 32rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.flex-row {
|
||
display: flex !important;
|
||
align-items: center;
|
||
flex-direction: row !important;
|
||
}
|
||
|
||
.flex-column {
|
||
display: flex !important;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.flex-around {
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.flex-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.flex-start {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.flex-end {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
// 定义flex等分
|
||
@for $i from 0 through 100 {
|
||
.w#{$i} {
|
||
width: $i + vw;
|
||
}
|
||
}
|
||
|
||
// 定义flex等分
|
||
@for $i from 0 through 12 {
|
||
.u-flex-#{$i} {
|
||
flex: $i;
|
||
}
|
||
}
|
||
|
||
// 定义字体(px)单位，小于20都为px单位字体
|
||
@for $i from 9 to 20 {
|
||
.u-font-#{$i} {
|
||
font-size: $i + px;
|
||
}
|
||
}
|
||
|
||
// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
|
||
@for $i from 20 through 40 {
|
||
.u-font-#{$i} {
|
||
font-size: $i + rpx;
|
||
}
|
||
}
|
||
|
||
// 定义内外边距，历遍1-80
|
||
@for $i from 0 through 80 {
|
||
// 只要双数和能被5除尽的数
|
||
@if $i % 2 == 0 or $i % 5 == 0 {
|
||
// 得出：u-margin-30或者u-m-30
|
||
.u-margin-#{$i}, .u-m-#{$i} {
|
||
margin: $i + rpx !important;
|
||
}
|
||
|
||
// 得出：u-padding-30或者u-p-30
|
||
.u-padding-#{$i}, .u-p-#{$i} {
|
||
padding: $i + rpx !important;
|
||
}
|
||
|
||
@each $short, $long in l left, t top, r right, b bottom {
|
||
// 缩写版，结果如： u-m-l-30
|
||
// 定义外边距
|
||
.u-m-#{$short}-#{$i} {
|
||
margin-#{$long}: $i + rpx !important;
|
||
}
|
||
|
||
// 定义内边距
|
||
.u-p-#{$short}-#{$i} {
|
||
padding-#{$long}: $i + rpx !important;
|
||
}
|
||
|
||
// 完整版，结果如：u-margin-left-30
|
||
// 定义外边距
|
||
.u-margin-#{$long}-#{$i} {
|
||
margin-#{$long}: $i + rpx !important;
|
||
}
|
||
|
||
// 定义内边距
|
||
.u-padding-#{$long}-#{$i} {
|
||
padding-#{$long}: $i + rpx !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.button {
|
||
height: 52rpx;
|
||
background-color: $color;
|
||
color: #fff;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 20rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|