You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.4 KiB
119 lines
2.4 KiB
// @import 'uview-plus/theme.scss';
|
|
// @use 'uview-plus/theme.scss';
|
|
|
|
#app {
|
|
box-sizing: border-box;
|
|
background-color: #f5f5f5
|
|
}
|
|
|
|
/* 颜色变量 */
|
|
|
|
/*============================= 文字尺寸 =============================*/
|
|
$font-size-20: 20rpx;
|
|
$font-size-22: 22rpx;
|
|
$font-size-24: 24rpx;
|
|
$font-size-26: 26rpx;
|
|
$font-size-28: 28rpx;
|
|
$font-size-30: 30rpx;
|
|
$font-size-32: 32rpx;
|
|
$font-size-34: 34rpx;
|
|
$font-size-36: 36rpx;
|
|
$font-size-40: 40rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
view {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*============================= 弹性盒子 =============================*/
|
|
%flex-base {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
$flex-way: (
|
|
start,
|
|
flex-start),
|
|
(center, center),
|
|
(end, flex-end),
|
|
(between, space-between),
|
|
(around, space-around),
|
|
(evenly, space-evenly
|
|
);
|
|
|
|
@mixin flex-algin($align) {
|
|
@each $way, $justify in $flex-way {
|
|
&-#{$way} {
|
|
@if $way !=$align {
|
|
@if $way !=$align {
|
|
@extend %flex-base;
|
|
align-items: $align;
|
|
justify-content: $justify;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.flex {
|
|
@extend %flex-base;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
@each $way, $justify in (start, flex-start), (center, center), (end, flex-end) {
|
|
&-#{$way} {
|
|
@include flex-algin($justify);
|
|
}
|
|
}
|
|
}
|
|
|
|
[class*="flex-"],
|
|
[class^="flex"] {
|
|
&.nowrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
&.stretch {
|
|
align-items: stretch;
|
|
}
|
|
|
|
@each $direction, $name in (row, direction), (column, direction), (wrap, wrap) {
|
|
&.#{$direction} {
|
|
flex-#{$name}: $direction;
|
|
|
|
&-reverse {
|
|
flex-#{$name}: '#{$direction}-reverse';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 4 {
|
|
.flex#{$i} {
|
|
flex: $i;
|
|
}
|
|
}
|
|
|
|
/*============================= 文字溢出 =============================*/
|
|
.text-ellipsis {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
@for $i from 2 through 4 {
|
|
&-#{$i} {
|
|
overflow: hidden;
|
|
white-space: normal;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
line-clamp: 1;
|
|
-webkit-line-clamp: $i;
|
|
}
|
|
}
|
|
}
|