476 lines
6.9 KiB
SCSS
476 lines
6.9 KiB
SCSS
@mixin icon-image($size) {
|
||
min-height: $size;
|
||
min-width: $size;
|
||
height: $size;
|
||
width: $size;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
|
||
page {
|
||
/* 定义一些主题色及基础样式 */
|
||
font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
|
||
font-size: 28rpx;
|
||
color: $-color-normal;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
background-color: $-color-body;
|
||
}
|
||
|
||
.bold {
|
||
font-weight: bold;
|
||
}
|
||
/* 定义字体颜色 */
|
||
.primary {
|
||
color: $-color-primary;
|
||
}
|
||
.black {
|
||
color: $-color-black;
|
||
}
|
||
|
||
.white {
|
||
color: $-color-white;
|
||
}
|
||
|
||
.normal {
|
||
color: $-color-normal;
|
||
}
|
||
|
||
.lighter {
|
||
color: $-color-lighter;
|
||
}
|
||
|
||
.muted {
|
||
color: $-color-muted;
|
||
}
|
||
|
||
/* 定义背景颜色 */
|
||
.bg-primary {
|
||
background-color: $-color-primary;
|
||
}
|
||
.bg-white {
|
||
background-color: $-color-white;
|
||
}
|
||
.bg-body {
|
||
background-color: $-color-body;
|
||
}
|
||
.bg-gray {
|
||
background-color: $-color-border;
|
||
}
|
||
|
||
/* 定义常用的弹性布局 */
|
||
.flex {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.flex-wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.flex-nowrap {
|
||
flex-wrap: nowrap;
|
||
}
|
||
.col-baseline {
|
||
align-items: baseline;
|
||
}
|
||
.col-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.col-top {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.col-bottom {
|
||
align-items: flex-end;
|
||
}
|
||
.col-stretch {
|
||
align-items:stretch;
|
||
}
|
||
.row-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.row-left {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.row-right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.row-between {
|
||
justify-content: space-between;
|
||
}
|
||
.row-around {
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.text-left {
|
||
text-align: left;
|
||
}
|
||
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.text-right {
|
||
text-align: right;
|
||
}
|
||
|
||
.flex-col {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
}
|
||
.flex-none {
|
||
flex: none;
|
||
}
|
||
|
||
// 定义flex等分
|
||
@for $i from 0 through 5 {
|
||
.flex-#{$i} {
|
||
flex: $i;
|
||
}
|
||
}
|
||
|
||
// 定义内外边距，历遍1-80
|
||
@for $i from 0 through 60 {
|
||
// 只要双数和能被5除尽的数
|
||
@if $i % 2 == 0 or $i % 5 == 0 {
|
||
// 如：m-30
|
||
.m-#{$i} {
|
||
margin: $i + rpx;
|
||
}
|
||
|
||
// 如：p-30
|
||
.p-#{$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;
|
||
}
|
||
|
||
// 定义内边距
|
||
//结果如： pl-30
|
||
.p#{$short}-#{$i} {
|
||
padding-#{$long}: $i + rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 定义字体大小，20-60的字体
|
||
@for $i from 20 through 60 {
|
||
@if $i % 2 == 0 {
|
||
.fs-#{$i} {
|
||
font-size: $i + rpx;
|
||
}
|
||
}
|
||
}
|
||
// 定义圆角，10-60的圆角
|
||
@for $i from 10 through 60 {
|
||
@if $i % 2 == 0 {
|
||
.br-#{$i} {
|
||
border-radius: $i + rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 超出隐藏 */
|
||
/* start--文本行数限制--start */
|
||
.line-1 {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.line-2 {
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
.line-3 {
|
||
-webkit-line-clamp: 3;
|
||
}
|
||
|
||
.line-2, .line-3, {
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box; // 弹性伸缩盒
|
||
-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
|
||
}
|
||
|
||
/* 中划线 */
|
||
.line-through {
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
|
||
.transition_none {
|
||
-webkit-transition: none !important;
|
||
-moz-transition: none !important;
|
||
-ms-transition: none !important;
|
||
-o-transition: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
.transition_none * {
|
||
-webkit-transition: none !important;
|
||
-moz-transition: none !important;
|
||
-ms-transition: none !important;
|
||
-o-transition: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
.center {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.row {
|
||
width: 87.5%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.col-1 {
|
||
width: 100%;
|
||
}
|
||
|
||
.col-2 {
|
||
width: 50%;
|
||
}
|
||
|
||
.col-3 {
|
||
width: 33.333333%;
|
||
}
|
||
|
||
.col-4 {
|
||
width: 25%;
|
||
}
|
||
|
||
.col-5 {
|
||
width: 20%;
|
||
}
|
||
|
||
.col-6 {
|
||
width: 16.666666%;
|
||
}
|
||
|
||
.col-7 {
|
||
width: 14.285714%;
|
||
}
|
||
|
||
.col-8 {
|
||
width: 12.5%;
|
||
}
|
||
|
||
.col-9 {
|
||
width: 11.111111%;
|
||
}
|
||
.col-10 {
|
||
width: 10%;
|
||
}
|
||
.col-11 {
|
||
width: 9.09090909%;
|
||
}
|
||
.col-12 {
|
||
width: 8.3333333%;
|
||
}
|
||
.auto {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.inline {
|
||
display: inline-block;
|
||
}
|
||
|
||
.hidden {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.opacity0 {
|
||
opacity: 0;
|
||
}
|
||
.opacity1 {
|
||
opacity: 1;
|
||
}
|
||
.circle {
|
||
-webkit-border-radius: 50%;
|
||
-moz-border-radius: 50%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.blcircle {
|
||
-webkit-border-bottom-left-radius: 50%;
|
||
-moz-border-bottom-left-radius: 50%;
|
||
border-bottom-left-radius: 50%;
|
||
}
|
||
|
||
.tlcircle {
|
||
-webkit-border-top-left-radius: 50%;
|
||
-moz-border-top-left-radius: 50%;
|
||
border-top-left-radius: 50%;
|
||
}
|
||
|
||
.brcircle {
|
||
-webkit-border-bottom-right-radius: 50%;
|
||
-moz-border-bottom-right-radius: 50%;
|
||
border-bottom-right-radius: 50%;
|
||
}
|
||
|
||
.trcircle {
|
||
-webkit-border-top-right-radius: 50%;
|
||
-moz-border-top-right-radius: 50%;
|
||
border-top-right-radius: 50%;
|
||
}
|
||
|
||
.isbd {
|
||
border: 1px #e0e0e0 solid;
|
||
}
|
||
|
||
.isbdbm {
|
||
border-bottom: 1px #e0e0e0 solid;
|
||
}
|
||
|
||
.isbdtp {
|
||
border-top: 1px #e0e0e0 solid;
|
||
}
|
||
|
||
.isbdrt {
|
||
border-right: 1px #e0e0e0 solid;
|
||
}
|
||
|
||
.isbdlt {
|
||
border-left: 1px #e0e0e0 solid;
|
||
}
|
||
|
||
.isshadow {
|
||
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
|
||
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
|
||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.ishalo {
|
||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.isdarkhalo {
|
||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.fl {
|
||
float: left;
|
||
}
|
||
|
||
.fr {
|
||
float: right;
|
||
}
|
||
|
||
/* 初始化按钮 */
|
||
page button {
|
||
padding: 0;
|
||
margin: 0;
|
||
background-color: transparent;
|
||
font-weight: normal;
|
||
font-size: 28rpx;
|
||
overflow: unset;
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
page button::after {
|
||
border: none;
|
||
}
|
||
|
||
button[type=primary] {
|
||
background-color: $-color-primary;
|
||
}
|
||
.button-hover[type=primary] {
|
||
background-color: $-color-primary;
|
||
}
|
||
/* 按钮大小 */
|
||
button[size="xs"]{
|
||
line-height: 58rpx;
|
||
height: 58rpx;
|
||
font-size: 26rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
button[size="sm"] {
|
||
line-height: 62rpx;
|
||
height: 62rpx;
|
||
font-size: 28rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
button[size="md"]{
|
||
line-height: 70rpx;
|
||
height: 70rpx;
|
||
font-size: 30rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
button[size="lg"]{
|
||
line-height: 80rpx;
|
||
height: 80rpx;
|
||
font-size: 32rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
|
||
|
||
//******图标******/
|
||
|
||
.icon-xs {
|
||
@include icon-image(28rpx);
|
||
}
|
||
|
||
.icon-sm {
|
||
@include icon-image(30rpx);
|
||
}
|
||
|
||
.icon {
|
||
@include icon-image(34rpx);
|
||
}
|
||
.icon-md {
|
||
@include icon-image(44rpx);
|
||
}
|
||
.icon-lg {
|
||
@include icon-image(52rpx);
|
||
}
|
||
|
||
.icon-xl {
|
||
@include icon-image(64rpx);
|
||
}
|
||
|
||
.icon-xxl {
|
||
@include icon-image(120rpx);
|
||
}
|
||
|
||
.img-null {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
}
|
||
|
||
/* 隐藏滚动条 */
|
||
::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
}
|
||
|
||
|
||
|
||
|