/* flex */ .center { display: flex; justify-content: center; align-items: center; } .flex_between { display: flex; justify-content: space-between; align-items: center; } .flex_l { display: flex; justify-content: flex-start; align-items: center; } .flex_r { display: flex; justify-content: flex-end; align-items: center; } .flex { display: flex; } .algin-center { align-items: center; } .flex-center { justify-content: center; } .flex-around { justify-content: space-around; } .flex-between { justify-content: space-between; } .flex-top { align-items: flex-start; } .flex-middle { align-items: center; } .justify-end { justify-content: flex-end; } .flex-bottom { align-items: flex-end; } .flex-column { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex_1 { flex: 1; } /* 其他 */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .fixed-bottom { position: fixed; bottom: 0; left: 0; right: 0; } .block { display: block; } .boxshadow { box-shadow: -1px 0px 12px rgba(0, 0, 0, 0.12); } .hide { display: none; } .show { display: block; } .autowrap { word-wrap: break-word; word-break: normal; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .bold { font-weight: 600; } .over-hidden { overflow: hidden; } .bold { font-weight: 700; } .right { float: right; } .left { float: left; } view { box-sizing: border-box; } .text-ellipsis { white-space: nowrap; /*把文本强制显示在一行*/ overflow: hidden; /*隐藏超出部分的文字*/ text-overflow: ellipsis; /*超出显示省略号*/ } .fixed-btn { position: fixed; width: 90rpx; height: 90rpx; bottom: 50rpx; right: 50rpx; background: #3e7ef8; border-radius: 50%; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } /* 宽度全局样式 ------------------------------- */ @for $i from 10 through 200 { .w#{$i} { width: #{$i}px !important; } } /* 字体大小全局样式 ------------------------------- */ @for $i from 10 through 64 { .font#{$i} { font-size: #{$i}rpx !important; } } /* 外边距、内边距全局样式 ------------------------------- */ @for $i from 1 through 70 { .mt#{$i} { margin-top: #{$i}px !important; } .mr#{$i} { margin-right: #{$i}px !important; } .mb#{$i} { margin-bottom: #{$i}px !important; } .ml#{$i} { margin-left: #{$i}px !important; } .pt#{$i} { padding-top: #{$i}px !important; } .pr#{$i} { padding-right: #{$i}px !important; } .pb#{$i} { padding-bottom: #{$i}px !important; } .pl#{$i} { padding-left: #{$i}px !important; } }