397 lines
7.3 KiB
SCSS
397 lines
7.3 KiB
SCSS
$maxSize: 100;
|
||
/* #ifndef APP-NVUE */
|
||
html,
|
||
body,
|
||
page {
|
||
color: $uni-text-color !important;
|
||
font-size: 32rpx !important;
|
||
height: 100% !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
}
|
||
page {
|
||
background-color: $uni-bg-body !important;
|
||
box-sizing: border-box !important;
|
||
padding-bottom: constant(safe-area-inset-bottom) !important;
|
||
padding-bottom: env(safe-area-inset-bottom) !important;
|
||
}
|
||
view,
|
||
image,
|
||
swiper,
|
||
swiper-item,
|
||
text {
|
||
box-sizing: border-box !important;
|
||
display: flex;
|
||
flex-direction: column;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
}
|
||
/* #endif */
|
||
/* #ifdef H5 */
|
||
uni-text {
|
||
span {
|
||
width: 100%;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
uni-modal {
|
||
z-index: 10080;
|
||
}
|
||
/* #endif */
|
||
.page {
|
||
background-color: $uni-bg-body !important;
|
||
}
|
||
// margin 外边距
|
||
@for $i from 0 through 100 {
|
||
$item: 2rpx * $i;
|
||
$index: $i * 2;
|
||
.m-#{$index} {
|
||
margin: $item !important;
|
||
}
|
||
.mx-#{$index} {
|
||
margin-left: $item !important;
|
||
margin-right: $item !important;
|
||
}
|
||
|
||
.my-#{$index} {
|
||
margin-top: $item !important;
|
||
margin-bottom: $item !important;
|
||
}
|
||
.mt-#{$index} {
|
||
margin-top: $item !important;
|
||
}
|
||
.mb-#{$index} {
|
||
margin-bottom: $item !important;
|
||
}
|
||
.mr-#{$index} {
|
||
margin-right: $item !important;
|
||
}
|
||
.ml-#{$index} {
|
||
margin-left: $item !important;
|
||
}
|
||
}
|
||
|
||
// padding 内边距
|
||
@for $i from 0 through $maxSize {
|
||
$item: 2rpx * $i;
|
||
$index: $i * 2;
|
||
|
||
.p-#{$index} {
|
||
padding: $item;
|
||
}
|
||
.px-#{$index} {
|
||
padding-left: $item;
|
||
padding-right: $item;
|
||
}
|
||
.py-#{$index} {
|
||
padding-top: $item;
|
||
padding-bottom: $item;
|
||
}
|
||
.pt-#{$index} {
|
||
padding-top: $item;
|
||
}
|
||
.pb-#{$index} {
|
||
padding-bottom: $item;
|
||
}
|
||
.pr-#{$index} {
|
||
padding-right: $item;
|
||
}
|
||
.pl-#{$index} {
|
||
padding-left: $item;
|
||
}
|
||
}
|
||
|
||
// 字体大小
|
||
@for $i from 0 through 60 {
|
||
$item: 2rpx * $i;
|
||
$index: $i * 2;
|
||
.fs-#{$index} {
|
||
font-size: $item !important;
|
||
}
|
||
}
|
||
// 行高
|
||
@for $i from 0 through 60 {
|
||
$item: 2rpx * $i;
|
||
$index: $i * 2;
|
||
.lh-#{$index} {
|
||
line-height: $item !important;
|
||
}
|
||
}
|
||
// 背景颜色
|
||
|
||
.b-primary {
|
||
background-color: $uni-color-primary !important;
|
||
}
|
||
.b-base {
|
||
background-color: $uni-bg-color !important;
|
||
}
|
||
.b-white {
|
||
background: #ffffff !important;
|
||
}
|
||
.b-body {
|
||
background-color: $uni-bg-body !important;
|
||
}
|
||
|
||
.font-weight-bold {
|
||
font-weight: bold !important;
|
||
}
|
||
.font-weight-normal {
|
||
font-weight: normal !important;
|
||
}
|
||
|
||
// 字体颜色
|
||
.text-base {
|
||
color: $uni-text-color !important;
|
||
}
|
||
.text-primary {
|
||
color: $uni-color-primary !important;
|
||
}
|
||
.text-regular {
|
||
color: $uni-text-color-regular !important;
|
||
}
|
||
.text-secondary {
|
||
color: $uni-text-color-secondary !important;
|
||
}
|
||
.text-placeholder {
|
||
color: $uni-text-color-placeholder !important;
|
||
}
|
||
.text-error {
|
||
color: $uni-color-error !important;
|
||
}
|
||
.text-success {
|
||
color: $uni-color-success !important;
|
||
}
|
||
.text-warning {
|
||
color: $uni-color-warning !important;
|
||
}
|
||
.text-blur {
|
||
color: $uni-color-blur !important;
|
||
}
|
||
.text-white {
|
||
color: $uni-text-color-inverse !important;
|
||
}
|
||
.text-black {
|
||
color: #000 !important;
|
||
}
|
||
.text-ff {
|
||
color: #1f2022 !important;
|
||
}
|
||
.text-three {
|
||
color: #333333 !important;
|
||
}
|
||
.text-one {
|
||
display: block;
|
||
text-overflow: ellipsis !important;
|
||
/* #ifndef APP-NVUE */
|
||
overflow: hidden !important;
|
||
white-space: nowrap !important;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
lines: 1;
|
||
/* #endif */
|
||
}
|
||
.text-To {
|
||
display: block;
|
||
text-overflow: ellipsis;
|
||
/* #ifndef APP-NVUE */
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
lines: 2;
|
||
/* #endif */
|
||
}
|
||
.text-three {
|
||
display: block;
|
||
text-overflow: ellipsis;
|
||
/* #ifndef APP-NVUE */
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
lines: 3;
|
||
/* #endif */
|
||
}
|
||
.text-normal {
|
||
color: $uni-text-color-normal !important;
|
||
}
|
||
|
||
// 边框
|
||
.border-base {
|
||
border: 1px solid $uni-border-color !important;
|
||
}
|
||
.border-base-left {
|
||
border-left: 1px solid $uni-border-color !important;
|
||
}
|
||
.border-base-top {
|
||
border-top: 1px solid $uni-border-color !important;
|
||
}
|
||
.border-base-right {
|
||
border-right: 1px solid $uni-border-color !important;
|
||
}
|
||
.border-base-bottom {
|
||
border-bottom: 1px solid $uni-border-color !important;
|
||
}
|
||
.border-radius-circle {
|
||
border-radius: 50% !important;
|
||
}
|
||
|
||
.border-primary {
|
||
border: 1px solid $uni-color-primary !important;
|
||
}
|
||
.border-primary-left {
|
||
border-left: 1px solid $uni-color-primary !important;
|
||
}
|
||
.border-primary-top {
|
||
border-top: 1px solid $uni-color-primary !important;
|
||
}
|
||
.border-primary-right {
|
||
border-right: 1px solid $uni-color-primary !important;
|
||
}
|
||
.border-primary-bottom {
|
||
border-bottom: 1px solid $uni-color-primary !important;
|
||
}
|
||
|
||
// flex
|
||
|
||
.d-flex {
|
||
display: flex !important;
|
||
}
|
||
.flex-center {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
}
|
||
.flex-start {
|
||
display: flex !important;
|
||
justify-content: flex-start !important;
|
||
align-items: center !important;
|
||
}
|
||
.flex-between {
|
||
display: flex !important;
|
||
justify-content: space-between !important;
|
||
align-items: center !important;
|
||
}
|
||
.flex-around {
|
||
display: flex !important;
|
||
justify-content: space-around !important;
|
||
align-items: center !important;
|
||
}
|
||
.flex-direction-column {
|
||
flex-direction: column !important;
|
||
}
|
||
.flex-align-center {
|
||
align-items: center !important;
|
||
}
|
||
.flex-1 {
|
||
flex: 1 !important;
|
||
overflow: hidden !important;
|
||
}
|
||
.flex-column {
|
||
flex-direction: column !important;
|
||
}
|
||
.flex-row {
|
||
flex-direction: row !important;
|
||
}
|
||
.flex-row-center {
|
||
flex-direction: row !important;
|
||
align-items: center !important;
|
||
}
|
||
.flex-end {
|
||
display: flex !important;
|
||
justify-content: flex-end !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
.flex-align-start {
|
||
align-items: flex-start !important;
|
||
}
|
||
|
||
.text-center {
|
||
text-align: center !important;
|
||
}
|
||
.text-right {
|
||
text-align: right !important;
|
||
}
|
||
// 尺寸
|
||
.w-100 {
|
||
width: 100% !important;
|
||
}
|
||
.h-100 {
|
||
height: 100% !important;
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
// 居中
|
||
.align-center {
|
||
vertical-align: middle !important;
|
||
}
|
||
.cursor-pointer {
|
||
cursor: pointer !important;
|
||
}
|
||
// 隐藏滚动条
|
||
scroll-view ::-webkit-scrollbar {
|
||
width: 0 !important;
|
||
height: 0 !important;
|
||
background-color: transparent !important;
|
||
}
|
||
input:placeholder {
|
||
color: $uni-text-color-placeholder !important;
|
||
}
|
||
::placeholder {
|
||
color: $uni-text-color-placeholder !important;
|
||
}
|
||
.editor-image {
|
||
max-width: 100% !important;
|
||
height: auto !important;
|
||
}
|
||
.wscnph {
|
||
max-width: 100% !important;
|
||
}
|
||
/* #endif */
|
||
|
||
.text_ellipsis {
|
||
/* #ifndef APP-NVUE */
|
||
-webkit-line-clamp: 2 !important;
|
||
display: -webkit-box !important;
|
||
-webkit-box-orient: vertical !important;
|
||
/* #endif */
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
}
|
||
// 屏幕宽度
|
||
.screen-width {
|
||
width: 750rpx !important;
|
||
/* #ifdef H5 */
|
||
width: 100% !important;
|
||
/* #endif */
|
||
}
|
||
.guessing .uni-input-input {
|
||
text-align: center;
|
||
}
|
||
.text-rowWarp {
|
||
overflow: hidden;
|
||
/* break-all(允许在单词内换行。) */
|
||
text-overflow: ellipsis;
|
||
/* #ifdef H5 */
|
||
word-break: break-all;
|
||
/* 超出部分省略号 */
|
||
display: -webkit-box;
|
||
/** 对象作为伸缩盒子模型显示 **/
|
||
-webkit-box-orient: vertical;
|
||
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||
-webkit-line-clamp: 1;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
/** 显示的行数 **/
|
||
lines: 1; //NVUE下要用这个属性，来让文字超出隐藏变省略号
|
||
/* #endif */
|
||
}
|