$filter_bg_color : #e3ecfd ;
$main_bg_color : #1890ff ;
$page_bg_color : #ededed ;
$main_color : #1890ff ;
image {
vertical-align : top ;
}
page {
height : 100 % ;
font-family : PingFang SC Medium , - apple-system , BlinkMacSystemFont , Segoe UI , Roboto , Helvetica Neue , Arial , Not o Sans , sans-serif , " Apple Color Emoji " , " Segoe UI Emoji " , Segoe UI Symbol , " Noto Color Emoji " ;
}
button {
outline : none ;
/* #ifdef MP-KUAISHOU */
box-shadow : none ;
/* #endif */
& : : after {
border : none ;
}
}
/* #ifdef MP-KUAISHOU */
scroll-view : : -webkit-scrollbar {
display : none ;
width : 0 ;
height : 0 ;
color : transparent ;
}
/* #endif */
. g_ {
& border {
& _c {
border : 1 rpx solid #ccc ;
& _t {
border-top : 1 rpx solid #ccc ;
}
& _r {
border-right : 1 rpx solid #ccc ;
}
& _b {
border-bottom : 1 rpx solid #ccc ;
}
& _l {
border-left : 1 rpx solid #ccc ;
& _2 {
border-left : 2 px solid #ccc ;
}
}
}
& _d {
border : 1 rpx solid #ddd ;
& _t {
border-top : 1 rpx solid #ddd ;
}
& _r {
border-right : 1 rpx solid #ddd ;
}
& _b {
border-bottom : 1 rpx solid #ddd ;
}
& _l {
border-left : 1 rpx solid #ddd ;
& _2 {
border-left : 2 px solid #ddd ;
}
}
}
& _e {
border : 1 rpx solid #eee ;
& _t {
border-top : 1 rpx solid #eee ;
}
& _r {
border-right : 1 rpx solid #eee ;
}
& _b {
border-bottom : 1 rpx solid #eee ;
}
& _l {
border-left : 1 rpx solid #eee ;
}
}
& _main {
border : 1 rpx solid $main_color ;
}
& _f {
border : 1 rpx solid #fff ;
}
& _f5 {
border : 1 rpx solid #ededed ;
& _t {
border-top : 1 rpx solid #ededed ;
}
& _r {
border-right : 1 rpx solid #ededed ;
}
& _b {
border-bottom : 1 rpx solid #ededed ;
}
& _l {
border-left : 1 rpx solid #ededed ;
}
}
& _0 {
& _b {
border-bottom : 1 rpx solid rgba ( 0 , 0 , 0 , 0 .1 ) ;
}
}
}
& flex {
// 弹性布局
& _1 {
flex : 1 ;
}
& _2 {
flex : 2 ;
}
& _3 {
flex : 3 ;
}
& _4 {
flex : 4 ;
}
& _none {
flex : none ;
}
& _c {
display : flex ;
display : - webkit-flex ;
justify-content : center ;
align-items : center ;
}
& _rowRight_columnCenter {
display : flex ;
display : - webkit-flex ;
justify-content : flex-end ;
align-items : center ;
}
& _rowRight_columnEnd {
display : flex ;
display : - webkit-flex ;
justify-content : flex-end ;
align-items : flex-end ;
}
& _row_start {
display : flex ;
display : - webkit-flex ;
flex-direction : row ;
flex-wrap : wrap ;
justify-content : flex-start ;
}
& _row_start_none {
display : flex ;
display : - webkit-flex ;
flex-direction : row ;
flex-wrap : nowrap ;
justify-content : flex-start ;
}
& _row_start_c {
display : flex ;
display : - webkit-flex ;
flex-direction : row ;
flex-wrap : wrap ;
align-items : center ;
justify-content : flex-start ;
}
& _row_between {
display : flex ;
display : - webkit-flex ;
flex-direction : row ;
flex-wrap : wrap ;
justify-content : space-between ;
}
& _row_around {
display : flex ;
display : - webkit-flex ;
flex-direction : row ;
flex-wrap : wrap ;
justify-content : space-around ;
}
& _row_center {
display : flex ;
display : - webkit-flex ;
flex-direction : row ;
flex-wrap : wrap ;
justify-content : center ;
}
& _row_end {
display : flex ;
display : - webkit-flex ;
flex-direction : row ;
flex-wrap : wrap ;
justify-content : flex-end ;
}
& _column_start {
display : flex ;
display : - webkit-flex ;
flex-direction : column ;
flex-wrap : wrap ;
justify-content : flex-start ;
}
& _column_between {
display : flex ;
display : - webkit-flex ;
flex-direction : column ;
flex-wrap : wrap ;
justify-content : space-between ;
}
& _column_around {
display : flex ;
display : - webkit-flex ;
flex-direction : column ;
flex-wrap : wrap ;
justify-content : space-around ;
}
& _column_end {
display : flex ;
display : - webkit-flex ;
flex-direction : column ;
flex-wrap : wrap ;
justify-content : flex-end ;
}
& _column_center {
display : flex ;
display : - webkit-flex ;
flex-direction : column ;
flex-wrap : wrap ;
justify-content : center ;
}
}
& ell {
// 多行省略
& _1 {
// 示例: g_ell_1
overflow : hidden ;
text-overflow : ellipsis ;
display : - webkit-box ;
-webkit-line-clamp : 1 ;
-webkit-box-orient : vertical ;
word-break : break-all ;
}
& _2 {
overflow : hidden ;
text-overflow : ellipsis ;
display : - webkit-box ;
-webkit-line-clamp : 2 ;
-webkit-box-orient : vertical ;
word-break : break-all ;
}
& _3 {
overflow : hidden ;
text-overflow : ellipsis ;
display : - webkit-box ;
-webkit-line-clamp : 3 ;
-webkit-box-orient : vertical ;
word-break : break-all ;
}
& _4 {
overflow : hidden ;
text-overflow : ellipsis ;
display : - webkit-box ;
-webkit-line-clamp : 4 ;
-webkit-box-orient : vertical ;
word-break : break-all ;
}
}
& fw {
// 加粗
& _100 {
// 示例: g_fw_100
font-weight : 100 ;
}
& _200 {
font-weight : 200 ;
}
& _300 {
font-weight : 300 ;
}
& _400 {
font-weight : 400 ;
}
& _500 {
font-weight : 500 ;
}
& _600 {
font-weight : bold ;
}
& _700 {
font-weight : 700 ;
}
& _800 {
font-weight : 800 ;
}
& _900 {
font-weight : 900 ;
}
& _bold {
font-weight : bold ;
}
}
& c {
// 字体颜色
& _0 {
// 示例: g_c_0
color : #000 ;
}
& _3 {
color : #333 ;
}
& _6 {
color : #666 ;
}
& _7 {
color : #777777 ;
}
& _8 {
color : #888888 ;
}
& _9 {
color : #999 ;
}
& _c0 {
color : #c0c4cc ;
}
& _c {
color : #ccc ;
}
& _f {
color : #fff ;
}
& _f0 {
color : #ff0000 ;
}
& _f40 {
color : #ff4400 ;
}
& _b1 {
color : #b1b1b1 ;
}
& _fa2b {
color : #fa2b2b ;
}
& _a {
color : #aaaaaa ;
}
& _5e {
color : #5e5e5e ;
}
& _ff4d {
color : #ff4d4f ;
}
& _main {
color : $main_color ;
}
& _09f {
color : #0091ff ;
}
& _027 {
color : #027aff ;
}
& _sub {
color : #576b95 ;
}
& _pink {
color : pink ;
}
}
& bg {
// 背景色
& _f {
// 示例: g_bg_f
background-color : #fff ;
& _2 {
background-color : #f2f2f2 ;
}
& _5 {
background-color : #ededed ;
}
& _7 {
background-color : #f7f7f7 ;
}
& _9 {
background-color : #f9f9f9 ;
}
}
& _f0a {
background-color : #ff0a0a ;
}
& _f40 {
background-color : #ff4400 ;
& _7 {
background-color : rgba ( 255 , 68 , 0 , 0 .07 ) ;
}
}
& _f0 {
background-color : #f0f0f0 ;
}
& _e {
background-color : #eee ;
}
& _c {
background-color : #ccc ;
}
& _0 {
background-color : #000 ;
}
& _f5 {
background-color : #ededed ;
}
& _main {
background-color : $main_color ;
}
& _09f {
background-color : #0091ff ;
}
& _e7 {
background-color : #e7f8f1 ;
}
& _ed {
background-color : #ededed ;
}
& _b1 {
background-color : #b1b1b1 ;
}
& _trans_main {
background-color : $filter_bg_color ;
}
& _page {
background-color : $page_bg_color ;
min-height : 100 vh ;
}
}
& text {
// 字体位置
& _l {
// 示例: g_text_l
text-align : left ;
}
& _c {
text-align : center ;
}
& _r {
text-align : right ;
}
& _word_c {
text-align : justify ;
text-align-last : justify ;
}
& _underline {
text-decoration : underline ;
}
& _unset {
text-decoration : unset ;
}
}
& position {
// 定位
& _rela {
// 示例: g_position_rela
position : relative ;
}
& _abso {
position : absolute ;
& _c {
left : 50 % ;
top : 50 % ;
transform : translateX ( - 50 % ) translateY ( - 50 % ) ;
}
}
& _fixed {
position : fixed ;
& _c {
left : 50 % ;
top : 50 % ;
transform : translateX ( - 50 % ) translateY ( - 50 % ) ;
}
}
& _c {
position : absolute ;
left : 50 % ;
top : 50 % ;
transform : translateX ( - 50 % ) translateY ( - 50 % ) ;
}
}
& clear_scroll : : -webkit-scrollbar {
display : none ;
width : 0 ;
height : 0 ;
color : transparent ;
}
& w {
& _all {
width : 100 % ;
}
& _pull {
width : 100 vw ;
}
& _three {
width : 33 .3333 % ;
}
& _four {
width : 25 % ;
}
}
& h {
& _all {
height : 100 % ;
}
& _pull {
height : 100 vh ;
}
& _three {
width : 33 .3333 % ;
}
& _four {
width : 25 % ;
}
}
// 行高设置
& lh {
& _1 {
line-height : 1 ;
& _2 {
line-height : 1 .2 !important ;
}
}
}
& animate {
transition : all 2 s ;
}
}
// 字体
$min-font-size : 1 ;
$max-font-size : 40 ;
@for $i from $min-font-size through $max-font-size {
. g_fs_ #{ $i } {
font-size : #{ $i } px ;
}
. g_fsi_ #{ $i } {
font-size : #{ $i } px !important ;
}
}
. g_fs_10 {
font-size : 12 px ;
zoom : 0 .9 ;
}
. g_fs_11 {
font-size : 12 px ;
zoom : 0 .95 ;
}
// 尺寸
$min-size : 0 ;
$max-size : 200 ;
@for $i from $min-size through $max-size {
. g_w_ #{ $i } {
width : #{ $i } px !important ;
}
}
// 尺寸
$min-height : 0 ;
$max-height : 100 ;
@for $i from $min-height through $max-height {
. g_h_ #{ $i } {
height : #{ $i } px !important ;
}
}
// 单独的尺寸设置
. g_h_104 {
height : 104 px !important ;
}
. g_h_150 {
height : 150 px !important ;
}
. g_h_159 {
height : 159 px !important ;
}
. g_h_184 {
height : 184 px !important ;
}
. g_h_110 {
height : 110 px !important ;
}
// 内外边距
$min-mp : 0 ;
$max-mp : 90 ;
@for $i from $min-mp through $max-mp {
. g_pt_ #{ $i } {
padding-top : #{ $i } px ;
}
. g_pb_ #{ $i } {
padding-bottom : #{ $i } px ;
}
. g_mt_ #{ $i } {
margin-top : #{ $i } px ;
}
. g_mb_ #{ $i } {
margin-bottom : #{ $i } px ;
}
}
// 内外边距
$min-mp : 0 ;
$max-mp : 24 ;
@for $i from $min-mp through $max-mp {
. g_p_ #{ $i } {
padding : #{ $i } px ;
}
. g_pr_ #{ $i } {
padding-right : #{ $i } px ;
}
. g_pl_ #{ $i } {
padding-left : #{ $i } px ;
}
. g_m_ #{ $i } {
margin : #{ $i } px ;
}
. g_ml_ #{ $i } {
margin-left : #{ $i } px ;
}
. g_mr_ #{ $i } {
margin-right : #{ $i } px ;
}
}
// 单独的内外边距设置
. g_mb_130 {
margin-bottom : 130 px ;
}
. g_pb_120 {
padding-bottom : 120 px ;
}
. g_pl_40 {
padding-left : 40 px ;
}
. g_pr_40 {
padding-right : 40 px ;
}
// 圆角
$min-radius : 0 ;
$max-radius : 25 ;
@for $i from $min-radius through $max-radius {
. g_radius_ #{ $i } {
border-radius : #{ $i } px ;
}
}
. g_radius_50 {
border-radius : 50 % ;
}
. g_w_240 {
width : 240 px ;
}
. pri {
white-space : pre-line ;
}
. flex_center {
align-items : center ;
}
. flex_end {
align-items : flex-end ;
}
. flex_nw {
flex-wrap : nowrap ;
}
. thover {
opacity : 0 .8 ;
}
. btnHoverBg {
background-color : #ededed ;
}
. videoContainer {
position : relative ;
}
. videoContainer : : after {
content : " " ;
width : 0 ;
height : 0 ;
border : 10 px solid #ffffff bb ;
border-right-color : transparent ;
border-top-color : transparent ;
border-left-width : 16 px ;
border-right-width : 0 px ;
border-bottom-color : transparent ;
left : 50 % ;
top : 50 % ;
border-radius : 3 px ;
transform : translate ( - 50 % , - 50 % ) ;
/* background-color: #ffffff; */
position : absolute ;
z-index : 10 ;
}
. dib {
display : inline-block ;
}
. g_kuaishou {
/* #ifdef MP-KUAISHOU */
min-height : 100 vh !important ;
/* #endif */
}
. g_row_center {
position : relative ;
left : 50 % ;
transform : translateX ( - 50 % ) ;
}
// 保证picker弹出框的层级高于popup的层级
. uni-picker-container {
z-index : 10076 !important ;
}
: export {
main_bg_color : $main_bg_color ;
main_color : $main_color ;
}