*{ box-sizing: border-box; } page, view, scroll-view, swiper, button, input, textarea, label, navigator, image { box-sizing: border-box; } image { max-width: 100%; display: inline-block; position: relative; z-index: 0; } .over_hidden{ overflow: hidden; } .contant{ box-sizing: border-box; } .text_left{ text-align: left; } .text_right{ text-align: right; } .text_center{ text-align: center; } /* 单行文字超出显示省略号 */ .text_overflow{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 多行文字超出显示省略号 */ .text_2overflow{ word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .gradient_ff1a2f{ background: -moz-linear-gradient(left, #ff8057 0%, #ff1a2f 100%); background: -webkit-gradient(linear, left, right, color-stop(0%,#ff8057), color-stop(100%,#ff1a2f)); background: -webkit-linear-gradient(left, #ff8057 0%,#ff1a2f 100%); background: -o-linear-gradient(left, #ff8057 0%,#ff1a2f 100%); background: -ms-linear-gradient(left, #ff8057 0%,#ff1a2f 100%); background: linear-gradient(to right, #ff8057 0%,#ff1a2f 100%); } .gradient_hei{ background: -moz-linear-gradient(left, #454545 0%, #191919 100%); background: -webkit-gradient(linear, left, right, color-stop(0%,#454545), color-stop(100%,#191919)); background: -webkit-linear-gradient(left, #454545 0%,#191919 100%); background: -o-linear-gradient(left, #454545 0%,#191919 100%); background: -ms-linear-gradient(left, #454545 0%,#191919 100%); background: linear-gradient(to right, #454545 0%,#191919 100%); } .gradient_huang{ background: -moz-linear-gradient(left, #fde2b3 0%, #fed185 100%); background: -webkit-gradient(linear, left, right, color-stop(0%,#fde2b3), color-stop(100%,#fed185)); background: -webkit-linear-gradient(left, #fde2b3 0%,#fed185 100%); background: -o-linear-gradient(left, #fde2b3 0%,#fed185 100%); background: -ms-linear-gradient(left, #fde2b3 0%,#fed185 100%); background: linear-gradient(to right, #fde2b3 0%,#fed185 100%); } .gradient_lan{ background: -moz-linear-gradient(left, #366cb3 0%, #4690f1 100%); background: -webkit-gradient(linear, left, right, color-stop(0%,#366cb3), color-stop(100%,#4690f1)); background: -webkit-linear-gradient(left, #366cb3 0%,#4690f1 100%); background: -o-linear-gradient(left, #366cb3 0%,#4690f1 100%); background: -ms-linear-gradient(left, #366cb3 0%,#4690f1 100%); background: linear-gradient(to right, #366cb3 0%,#4690f1 100%); } /* 弹性布局 */ .dis_flex{ display: flex; } .dis_sb{ justify-content: space-between; } .dis_center{ justify-content: center; } .dis_around{ justify-content: space-around; } .dis_start{ justify-content: flex-start; } .dis_end{ justify-content: flex-end ; } .align_center{ align-items: center; } .flex_wrap{ flex-wrap:wrap ; } .dis_flex1{ flex: 1; } .flex_nowrap{ flex-wrap:nowrap; } /* 圆角 */ .b_radius50{ border-radius: 50%; } .b_radius20px{ border-radius: 20rpx; } .b_radius44px{ border-radius: 44rpx; } /* 背景色 */ .bg_468ff1{ background-color: #468ff1; } .bg_fc5c2f{ background-color: #fc5c2f; } .bg_white{ background-color: #FFFFFF; } .bg_f0f0f0{ background-color: #f0f0f0; } .bg_999999{ background-color: #999999; } .bg_ff003b{ background-color: #ff003b; } .bg_366CB3{ background-color: #366CB3; } /* 字体大小 */ .font_weight{ font-weight: bold; } .font_s36{ font-size: 36rpx; } .font_s32{ font-size: 32rpx; } .font_s30{ font-size: 30rpx; } .font_s28{ font-size: 28rpx; } .font_s26{ font-size: 26rpx; } .font_s24{ font-size: 24rpx; } .font_s22{ font-size: 22rpx; } .font_s20{ font-size: 20rpx; } .font_s18{ font-size: 18rpx; } .font_s16{ font-size: 16rpx; } /* 字体颜色 */ .text_ff8057{ color: #ff8057; } .text_366cb3{ color: #366cb3; } .text_fedd02{ color:#fedd02; } .text_666666{ color:#666666; } .text_bb3430{ color: #bb3430; } .text_c1c1c1{ color:#c1c1c1; } .text_333333{ color:#333333; } .text_222222{ color:#222222; } .text_ff1c30{ color: #ff1c30; } .text_ff003b{ color:#ff003b; } .text_bb3430{ color: #bb3430; } .text_999999{ color:#999999; } .text_white{ color: #FFFFFF; } .text_0cba7a{ color:#0cba7a; } .text_179fee{ color: #179fee; } /* 边距 */ .margin0_auto{ margin: 0 auto; } .margin_right30{ margin-right: 30rpx; } .margin_sx20{ margin-top: 20rpx; margin-bottom: 20rpx; } .margin_sx30{ margin-top: 30rpx; margin-bottom: 30rpx; } .margin_zy30{ margin-left: 30rpx; margin-right: 30rpx; } .margin_zy20{ margin-left: 20rpx; margin-right: 20rpx; } .margin_zy10{ margin-left: 10rpx; margin-right: 10rpx; } .margin_30{ margin:30rpx; } .margin_top30{ margin-top: 30rpx; } .margin_top20{ margin-top: 20rpx; } .margin_top10{ margin-top: 10rpx; } .margin_bottom10{ margin-bottom: 10rpx; } .margin_bottom20{ margin-bottom: 20rpx; } .margin_bottom30{ margin-bottom: 30rpx; } .margin_right20{ margin-right: 20rpx; } .margin_z100{ margin-left: 100rpx; } .margin0{ margin:0; } .padding_top54{ padding-top: 54rpx; } .padding_top20{ padding-top: 20rpx; } .padding_top30{ padding-top: 30rpx; } .padding_zy22{ padding-left: 22rpx; padding-right: 22rpx; } .padding_sx30{ padding-top: 30rpx; padding-bottom: 30rpx; } .padding_bottom20{ padding-bottom: 20rpx; } .padding_bottom30{ padding-bottom: 30rpx; } .padding_right10{ padding-right: 10rpx; } .padding_sx10{ padding-top: 10rpx; padding-bottom: 10rpx; } .padding_sx20{ padding-top: 20rpx; padding-bottom: 20rpx; } .padding_zy30{ padding-left: 30rpx; padding-right: 30rpx; } .padding_zy62{ padding-left: 66rpx; } .padding_zy20{ padding-left: 20rpx; padding-right: 20rpx; } .padding_zy10{ padding-left: 10rpx; padding-right: 10rpx; } .padding0{ padding:0; } .padding_20{ padding: 20rpx; } .padding_30{ padding: 30rpx; } .padding_10{ padding: 10rpx; } .padding_l10{ padding-left: 2rpx; } /* 宽高 */ .width_720rpx{ width:690rpx; } .width_15{ width:15%; } .width_20{ width:20%; } .width_70{ width:70%; } .width_50{ width:50%; } .width_60{ width:60%; } .width_40{ width:40%; } .width_30{ width:30%; } .width_100{ width:100%; } .height_100{ height:100%; } /* 边框 */ .border_bottome1e1e1{ border-bottom:1rpx solid #e1e1e1; } .border_tope1e1e1{ border-top:1rpx solid #e1e1e1; } .border_e1e1e1{ border:1rpx solid #e1e1e1; } .border_ff003b{ border:1rpx solid #ff003b; } .border_366cb3{ border:1rpx solid #366cb3; } /* 行高 */ .line_height50{ line-height: 50rpx; } /* 边框阴影 */ .b_shadow{ box-shadow: 3px 4px 20rpx 1rpx #bfb3b3; } /* -- flex弹性布局 -- */ .flex { display: flex; } .flex_inline { display:inline-flex; } .basis-sxs { flex-basis: 10%; } .basis-xs { flex-basis: 20%; } .basis-30 { flex-basis: 30%; } .basis-sm { flex-basis: 40%; } .basis-df { flex-basis: 50%; } .basis-lg { flex-basis: 60%; } .basis-70 { flex-basis: 70%; } .basis-xl { flex-basis: 80%; } .flex-sub { flex: 1; } .flex-twice { flex: 2; } .flex-treble { flex: 3; } .flex-direction { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .align-start { align-items: flex-start; } .align-end { align-items: flex-end; } .align-center { align-items: center; } .align-stretch { align-items: stretch; } .self-start { align-self: flex-start; } .self-center { align-self: flex-center; } .self-end { align-self: flex-end; } .self-stretch { align-self: stretch; } .align-stretch { align-items: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } /* 定位 */ .display_IB{ display: inline-block; } .position_R{ position: relative; } .position_A{ position: absolute; } .position_F{ position: fixed; } .position_S{ position: sticky; } /* 浮动 */ .fl{ float: left; } .fr{ float: right; } .cl{ clear: both; } /* 船货帮项目主题色 */ .chb_liner{ background-image: linear-gradient(90deg, #179fee 0%, #47e7ff 100%); } .chb_bg_179fee{ background-color: #179fee; } .chb_bg_f8{ background-color: #f8f8f8; }