@charset "UTF-8";
|
/**
|
* 这里是uni-app内置的常用样式变量
|
*
|
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
*
|
*/
|
/**
|
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
*
|
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
*/
|
/* 颜色变量 */
|
/* 行为相关颜色 */
|
/* 文字基本颜色 */
|
/* 背景颜色 */
|
/* 边框颜色 */
|
/* 尺寸变量 */
|
/* 文字尺寸 */
|
/* 图片尺寸 */
|
/* Border Radius */
|
/* 水平间距 */
|
/* 垂直间距 */
|
/* 透明度 */
|
/* 文章场景相关 */
|
/*-----------------[初始化]--------------*/
|
/* 清理浮动 */
|
.cle:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
|
.cle:after{zoom:1;}
|
.clear{clear: both;}
|
.tc{text-align:center;}
|
.tl{text-align:left}
|
.tr{text-align:right}
|
.fl{float: left;}
|
.fr{float: right;}
|
.wp{ width: 94%; margin: 0 auto;}
|
.w30{ width: 30%;}
|
.w40{ width: 40%;}
|
.w47{ width: 47%;}
|
.w48{ width: 48%;}
|
.w49{ width: 49%;}
|
.w50{ width: 50%;}
|
.w60{ width: 60%;}
|
.w80{ width: 80%;}
|
.w90{ width: 90%;}
|
.bg_m{background-color: #305ED5;}
|
.bg_fa{ background-color: #fafafa;}
|
.bg_f2{ background-color: #f2f2f2;}
|
.bg_f1{ background-color: #f1f1f1;}
|
.bg_f5{ background-color: #f5f5f5;}
|
.bg_f6{ background-color: #f6f6f6;}
|
.bg_f7{ background-color: #f7f7f7;}
|
.bg_f8{ background-color: #f8f8f8;}
|
.bg_e{ background-color: #eee;}
|
.bg_d{ background-color: #ddd;}
|
.bg_w{ background-color: #fff;}
|
.bg_3{ background-color: #333;}
|
.rd4{border-radius: 4rpx;}
|
.rd5{border-radius: 5rpx;}
|
.rd6{border-radius: 6rpx;}
|
.rd8{border-radius: 8rpx;}
|
.rd10{border-radius: 10rpx;}
|
.rd15{border-radius: 15rpx;}
|
.rd20{border-radius: 20rpx;}
|
.rd30{border-radius: 30rpx;}
|
.rd40{border-radius: 40rpx;}
|
.rd50{border-radius: 50rpx;}
|
.rd60{border-radius: 60rpx;}
|
.rd70{border-radius: 70rpx;}
|
.rd80{border-radius: 80rpx;}
|
.rd90{border-radius: 90rpx;}
|
.rd100{border-radius: 100rpx;}
|
.rd120{border-radius: 120rpx;}
|
.rdhalf{ border-radius:50%}
|
.ml5{ margin-left: 5rpx;}
|
.ml10{ margin-left: 10rpx;}
|
.ml15{ margin-left: 15rpx;}
|
.ml20{ margin-left: 20rpx;}
|
.ml25{ margin-left: 25rpx;}
|
.ml30{ margin-left: 30rpx;}
|
.ml40{ margin-left: 40rpx;}
|
.ml50{ margin-left: 50rpx;}
|
.ml60{ margin-left: 60rpx;}
|
.mt5{ margin-top: 5rpx;}
|
.mt10{ margin-top: 10rpx;}
|
.mt15{ margin-top: 15rpx;}
|
.mt20{ margin-top: 20rpx;}
|
.mt25{ margin-top: 25rpx;}
|
.mt30{ margin-top: 30rpx;}
|
.mt35{ margin-top: 35rpx;}
|
.mt40{ margin-top: 40rpx;}
|
.mt45{ margin-top: 45rpx;}
|
.mt50{ margin-top: 50rpx;}
|
.mt60{ margin-top: 60rpx;}
|
.mt70{ margin-top: 70rpx;}
|
.mt80{ margin-top: 80rpx;}
|
.mt90{ margin-top: 90rpx;}
|
.mt100{ margin-top:100rpx;}
|
.mt150{ margin-top:150rpx;}
|
.mt200{ margin-top:200rpx;}
|
.mt-20{ margin-top: -20rpx;}
|
.mt-30{ margin-top: -30rpx;}
|
.mt-40{ margin-top: -40rpx;}
|
.mb5{ margin-bottom: 5rpx;}
|
.mb10{ margin-bottom: 10rpx;}
|
.mb15{ margin-bottom: 15rpx;}
|
.mb20{ margin-bottom: 20rpx;}
|
.mb25{ margin-bottom: 25rpx;}
|
.mb30{ margin-bottom: 30rpx;}
|
.mb40{ margin-bottom: 40rpx;}
|
.mb50{ margin-bottom: 50rpx;}
|
.mb60{ margin-bottom: 60rpx;}
|
.mb80{ margin-bottom: 80rpx;}
|
.mb100{ margin-bottom: 100rpx;}
|
.mr5{ margin-right: 5rpx;}
|
.mr10{ margin-right: 10rpx;}
|
.mr15{ margin-right: 15rpx;}
|
.mr20{ margin-right: 20rpx;}
|
.mr25{ margin-right: 25rpx;}
|
.mr30{ margin-right: 30rpx;}
|
.mr40{ margin-right: 40rpx;}
|
.mr60{ margin-right: 60rpx;}
|
.mr80{ margin-right: 80rpx;}
|
.mr100{ margin-right: 100rpx;}
|
.pl10{ padding-left: 10rpx;}
|
.pl20{ padding-left: 20rpx;}
|
.pl25{ padding-left: 25rpx;}
|
.pl30{ padding-left: 30rpx;}
|
.pl40{ padding-left: 40rpx;}
|
.pl50{ padding-left: 50rpx;}
|
.pl60{ padding-left: 60rpx;}
|
.pl80{ padding-left: 80rpx;}
|
.pl100{ padding-left: 100rpx;}
|
.pr10{ padding-right: 10rpx;}
|
.pr20{ padding-right: 20rpx;}
|
.pr25{ padding-right: 25rpx;}
|
.pr30{ padding-right: 30rpx;}
|
.pr40{ padding-right: 40rpx;}
|
.pr50{ padding-right: 50rpx;}
|
.pr60{ padding-right: 60rpx;}
|
.pr80{ padding-right: 80rpx;}
|
.pr100{ padding-right: 100rpx;}
|
.pb10{ padding-bottom: 10rpx;}
|
.pb20{ padding-bottom: 20rpx;}
|
.pb25{ padding-bottom: 25rpx;}
|
.pb30{ padding-bottom: 30rpx;}
|
.pb40{ padding-bottom: 40rpx;}
|
.pb50{ padding-bottom: 50rpx;}
|
.pb100{ padding-bottom: 100rpx;}
|
.pt10{ padding-top: 10rpx;}
|
.pt20{ padding-top: 20rpx;}
|
.pt25{ padding-top: 25rpx;}
|
.pt30{ padding-top: 30rpx;}
|
.pt40{ padding-top: 40rpx;}
|
.pt50{ padding-top: 50rpx;}
|
.pt100{ padding-top: 100rpx;}
|
.plr{ padding-left: 30rpx; padding-right: 30rpx;}
|
.plr15{ padding-left: 15rpx; padding-right: 15rpx;}
|
.plr20{ padding-left: 20rpx; padding-right: 20rpx;}
|
.plr25{ padding-left: 25rpx; padding-right: 25rpx;}
|
.plr30{ padding-left: 30rpx; padding-right: 30rpx;}
|
.plr40{ padding-left: 40rpx; padding-right: 40rpx;}
|
.plr50{ padding-left: 50rpx; padding-right: 50rpx;}
|
.plr60{ padding-left: 60rpx; padding-right: 60rpx;}
|
.ptb10{padding-bottom: 10rpx; padding-top: 10rpx;}
|
.ptb15{padding-bottom: 15rpx; padding-top: 15rpx;}
|
.ptb20{padding-bottom: 20rpx; padding-top: 20rpx;}
|
.ptb25{padding-bottom: 25rpx; padding-top: 25rpx;}
|
.ptb30{padding-bottom: 30rpx; padding-top: 30rpx;}
|
.ptb35{padding-bottom: 35rpx; padding-top: 35rpx;}
|
.ptb40{padding-bottom: 40rpx; padding-top: 40rpx;}
|
.ptb50{padding-bottom: 50rpx; padding-top: 50rpx;}
|
.ptb60{padding-bottom: 60rpx; padding-top: 60rpx;}
|
.ptb80{padding-bottom: 80rpx; padding-top: 80rpx;}
|
.ptb100{padding-bottom: 100rpx; padding-top: 100rpx;}
|
.ptb150{padding-bottom: 150rpx; padding-top: 150rpx;}
|
.ptb200{padding-bottom: 200rpx; padding-top: 200rpx;}
|
.p5{ padding:5rpx}
|
.p10{ padding:10rpx}
|
.p20{ padding:20rpx}
|
.p30{ padding:30rpx}
|
.p2030{ padding:20rpx 30rpx}
|
.p40{ padding:40rpx}
|
.p3040{ padding:30rpx 40rpx}
|
.f0{ font-size: 0rpx;}
|
.f20{ font-size: 20rpx;}
|
.f22{ font-size: 22rpx;}
|
.f24{ font-size: 24rpx;}
|
.f26{ font-size: 26rpx;}
|
.f28{ font-size: 28rpx;}
|
.f30{ font-size: 30rpx;}
|
.f32{ font-size: 32rpx;}
|
.f34{ font-size: 34rpx;}
|
.f36{ font-size: 36rpx;}
|
.f38{ font-size: 38rpx;}
|
.f40{ font-size: 40rpx;}
|
.f42{ font-size: 42rpx;}
|
.f44{ font-size: 44rpx;}
|
.f48{ font-size: 48rpx;}
|
.f50{ font-size: 50rpx;}
|
.f60{ font-size: 60rpx;}
|
.f64{ font-size: 64rpx;}
|
.f70{ font-size: 70rpx;}
|
.f80{ font-size: 80rpx;}
|
.f90{ font-size: 90rpx;}
|
.f100{ font-size: 100rpx;}
|
.img100b { width: 100%; height: 100%;
|
}
|
.img16{ width: 16rpx; height: 16rpx;}
|
.img20{ width: 20rpx; height: 20rpx;}
|
.img24{ width: 24rpx; height: 24rpx;}
|
.img26{ width: 26rpx; height: 26rpx;}
|
.img28{ width: 28rpx; height: 28rpx;}
|
.img30{ width: 30rpx; height: 30rpx;}
|
.img32{ width: 32rpx; height: 32rpx;}
|
.img36{ width: 36rpx; height: 36rpx;}
|
.img40{ width: 40rpx; height: 40rpx;}
|
.img44{ width: 44rpx; height: 44rpx;}
|
.img48{ width: 48rpx; height: 48rpx;}
|
.img60{ width: 60rpx; height: 60rpx;}
|
.img66{ width: 66rpx; height: 66rpx;}
|
.img80{ width: 80rpx; height: 80rpx;}
|
.img86{ width: 86rpx; height: 86rpx;}
|
.img90{ width: 90rpx; height: 90rpx;}
|
.img100{ width: 100rpx; height: 100rpx;}
|
.img110{ width: 110rpx; height: 110rpx;}
|
.img120{ width: 120rpx; height: 120rpx;}
|
.img150{ width: 150rpx; height: 150rpx;}
|
.img180{ width: 180rpx; height: 180rpx;}
|
.img200{ width: 200rpx; height: 200rpx;}
|
.imgfull{ width: 100%;}
|
.rimb{ border-bottom: 1px solid #F1F1F1;}
|
.rimt{ border-top: 1px solid #F1F1F1;}
|
.bcover{ background-size: cover; background-position: center center; background-repeat: no-repeat;}
|
.bfull{ background-size: 100% 100%; background-position: center center; background-repeat: no-repeat;}
|
.b{ font-weight: bold;}
|
.n{ font-weight: 400;}
|
.ibm{ display: inline-block; vertical-align: middle;}
|
.bbox{ box-sizing: border-box;}
|
.rauto{ margin-left:auto; margin-right:auto}
|
.fixedBottom{position: fixed; left: 0; bottom: env(safe-area-inset-bottom); width: 100%;}
|
.lh1-6{line-height: 1.6;}
|
.lh1-6{line-height: 1.6;}
|
.lh1-8{line-height: 1.8;}
|
.lh2{line-height: 2;}
|
.sbtn{ display: inline-block; padding: 0.3em 1em; border: 1rpx solid transparent; box-sizing: border-box; text-align: center;}
|
.mini{ font-size: 18rpx;}
|
.med{ font-size: 26rpx;}
|
.def{ font-size: 34rpx;}
|
.sbtn_w100{ width: 100%; padding-left: 0; padding-right: 0;}
|
.sbtn_green{ color: #fff; background:#4275FC;
|
}
|
.sbtn_green_rim{ color: #4275FC; border-color:#4275FC;
|
}
|
.sbtn_black{ color: #fff; background:#333;
|
}
|
.sbtn_gray{ color: #333; background:#F7F7F7;
|
}
|
.sbtn_black_rim{ color: #333; border-color:#eee;
|
}
|
.sbtn_gray_rim{ color: #999; border-color:#ccc;
|
}
|
/* flex */
|
.flex{ display: flex;}
|
.cXY{ display: flex; align-items: center;justify-content: center;}
|
.cXYC{ display: flex; align-items: center;justify-content: center; flex-direction: column;}
|
.cY{ display: flex; align-items: center;}
|
.cX{display: flex; justify-content: center}
|
.fW{ display: flex; flex-wrap: wrap;}
|
.fBW{display: flex; flex-wrap: wrap; justify-content: space-between;}
|
.bX{ display: flex; flex-direction: row; justify-content: space-between;}
|
.rX{ display: flex; flex-direction: row-reverse;}
|
.bY{ display: flex; flex-direction:column; justify-content: space-between;}
|
.fY{ display: flex; flex-direction:column;}
|
.rY{display: flex; flex-direction: column-reverse;}
|
.bcX{ display: flex; justify-content: space-between; align-items: center;}
|
.fx1{ flex: 1;
|
}
|
.fxo1{ flex: 1; overflow: hidden;
|
}
|
.cAXY{ position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
|
.shadowA{box-shadow: 0 0 5rpx 0 #ddd;}
|
.shadowB{ position: relative;}
|
.shadowB::after{ content: ""; display: block; width: 100%; height: 8rpx; box-shadow: 0 6rpx 12rpx rgba(0,0,0,.08); top: -8rpx; left: 0; position: absolute;
|
}
|
.rp { position: relative;
|
}
|
.ap { position: absolute;
|
}
|
.orange{ color: #EA531B;}
|
.green{ color: #65C35D;}
|
.blue{ color: #3C77DA;}
|
.red{ color: #f00;}
|
.white{ color: #fff;}
|
.rp { position: relative;
|
}
|
.ap { position: absolute;
|
}
|
.orange{ color: #EA531B !important;}
|
.green{ color: #65C35D !important;}
|
.blue{ color: #3C77DA !important;}
|
.red{ color: #f00 !important;}
|
.white{ color: #fff !important;}
|
.mc{color:#216EEE !important;}
|
.wc{color:#F98107 !important;}
|
.cm {color: #305ED5}
|
.c1{color: #111}
|
.c2{color: #222}
|
.c3{ color: #333;}
|
.c6{ color: #666;}
|
.cc{ color: #ccc;}
|
.cf{ color: #fff;}
|
/* /deep/ .uicon-close .u-icon--right{ position: absolute; right: 30rpx; top: 30rpx; z-index: 999;} */
|
.popCloseBtn{ position: absolute; width:50rpx; height:50rpx; right: 20rpx; top: 20rpx;}
|
.fixedTL{ position: absolute; left: 0; top: 0;}
|
.fixedTR{ position: absolute; right: 0; top: 0;}
|
.beyondO { white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; overflow: hidden;}
|
.u-line-1 {
|
display: -webkit-box !important;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
word-break: break-all;
|
-webkit-line-clamp: 1;
|
-webkit-box-orient: vertical !important;
|
}
|
.u-line-2 {
|
display: -webkit-box !important;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
word-break: break-all;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical !important;
|
}
|
.u-line-3 {
|
display: -webkit-box !important;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
word-break: break-all;
|
-webkit-line-clamp: 3;
|
-webkit-box-orient: vertical !important;
|
}
|
.u-line-4 {
|
display: -webkit-box !important;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
word-break: break-all;
|
-webkit-line-clamp: 4;
|
-webkit-box-orient: vertical !important;
|
}
|
.u-line-5 {
|
display: -webkit-box !important;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
word-break: break-all;
|
-webkit-line-clamp: 5;
|
-webkit-box-orient: vertical !important;
|
}
|
.u-border {
|
border-width: 0.5px !important;
|
border-color: #dadbde !important;
|
border-style: solid;
|
}
|
.u-border-top {
|
border-top-width: 0.5px !important;
|
border-color: #dadbde !important;
|
border-top-style: solid;
|
}
|
.u-border-left {
|
border-left-width: 0.5px !important;
|
border-color: #dadbde !important;
|
border-left-style: solid;
|
}
|
.u-border-right {
|
border-right-width: 0.5px !important;
|
border-color: #dadbde !important;
|
border-right-style: solid;
|
}
|
.u-border-bottom {
|
border-bottom-width: 0.5px !important;
|
border-color: #dadbde !important;
|
border-bottom-style: solid;
|
}
|
.u-border-top-bottom {
|
border-top-width: 0.5px !important;
|
border-bottom-width: 0.5px !important;
|
border-color: #dadbde !important;
|
border-top-style: solid;
|
border-bottom-style: solid;
|
}
|
.u-reset-button {
|
padding: 0;
|
background-color: transparent;
|
font-size: inherit;
|
line-height: inherit;
|
color: inherit;
|
}
|
.u-reset-button::after {
|
border: none;
|
}
|
.u-hover-class {
|
opacity: 0.7;
|
}
|
.u-primary-light {
|
color: #ecf5ff;
|
}
|
.u-warning-light {
|
color: #fdf6ec;
|
}
|
.u-success-light {
|
color: #f5fff0;
|
}
|
.u-error-light {
|
color: #fef0f0;
|
}
|
.u-info-light {
|
color: #f4f4f5;
|
}
|
.u-primary-light-bg {
|
background-color: #ecf5ff;
|
}
|
.u-warning-light-bg {
|
background-color: #fdf6ec;
|
}
|
.u-success-light-bg {
|
background-color: #f5fff0;
|
}
|
.u-error-light-bg {
|
background-color: #fef0f0;
|
}
|
.u-info-light-bg {
|
background-color: #f4f4f5;
|
}
|
.u-primary-dark {
|
color: #398ade;
|
}
|
.u-warning-dark {
|
color: #f1a532;
|
}
|
.u-success-dark {
|
color: #53c21d;
|
}
|
.u-error-dark {
|
color: #e45656;
|
}
|
.u-info-dark {
|
color: #767a82;
|
}
|
.u-primary-dark-bg {
|
background-color: #398ade;
|
}
|
.u-warning-dark-bg {
|
background-color: #f1a532;
|
}
|
.u-success-dark-bg {
|
background-color: #53c21d;
|
}
|
.u-error-dark-bg {
|
background-color: #e45656;
|
}
|
.u-info-dark-bg {
|
background-color: #767a82;
|
}
|
.u-primary-disabled {
|
color: #9acafc;
|
}
|
.u-warning-disabled {
|
color: #f9d39b;
|
}
|
.u-success-disabled {
|
color: #a9e08f;
|
}
|
.u-error-disabled {
|
color: #f7b2b2;
|
}
|
.u-info-disabled {
|
color: #c4c6c9;
|
}
|
.u-primary {
|
color: #3c9cff;
|
}
|
.u-warning {
|
color: #f9ae3d;
|
}
|
.u-success {
|
color: #5ac725;
|
}
|
.u-error {
|
color: #f56c6c;
|
}
|
.u-info {
|
color: #909399;
|
}
|
.u-primary-bg {
|
background-color: #3c9cff;
|
}
|
.u-warning-bg {
|
background-color: #f9ae3d;
|
}
|
.u-success-bg {
|
background-color: #5ac725;
|
}
|
.u-error-bg {
|
background-color: #f56c6c;
|
}
|
.u-info-bg {
|
background-color: #909399;
|
}
|
.u-main-color {
|
color: #303133;
|
}
|
.u-content-color {
|
color: #606266;
|
}
|
.u-tips-color {
|
color: #909193;
|
}
|
.u-light-color {
|
color: #c0c4cc;
|
}
|
.u-safe-area-inset-top {
|
padding-top: 0;
|
padding-top: constant(safe-area-inset-top);
|
padding-top: env(safe-area-inset-top);
|
}
|
.u-safe-area-inset-right {
|
padding-right: 0;
|
padding-right: constant(safe-area-inset-right);
|
padding-right: env(safe-area-inset-right);
|
}
|
.u-safe-area-inset-bottom {
|
padding-bottom: 0;
|
padding-bottom: constant(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
.u-safe-area-inset-left {
|
padding-left: 0;
|
padding-left: constant(safe-area-inset-left);
|
padding-left: env(safe-area-inset-left);
|
}
|
::-webkit-scrollbar {
|
display: none;
|
width: 0 !important;
|
height: 0 !important;
|
-webkit-appearance: none;
|
background: transparent;
|
}
|
