|
|
/* 组件库iconfont图标 */
|
|
|
@import "border.css";
|
|
|
@import "icon.css";
|
|
|
/* tyIcon */
|
|
|
|
|
|
/* 1a常用作字体黑色 b3常用作placeholder颜色 f7常用作页面背景色 e6常用作border颜色*/
|
|
|
body {
|
|
|
/* 主色、主色渐变色及主色浅色 */
|
|
|
--main: #F10101;
|
|
|
--mainGradient: #FF4C16;
|
|
|
--mainLight: #FFF2F2;
|
|
|
|
|
|
/* 辅色及辅色渐变色 */
|
|
|
--auxiliary: #ffae27;
|
|
|
--auxiliaryGradient: #FFBB00;
|
|
|
|
|
|
/* 一级、二级警示色 */
|
|
|
--firstNotice: #E62222;
|
|
|
--secondNotice: #FF8242;
|
|
|
/* 微信色 通过色 */
|
|
|
--wechat: #0bc160;
|
|
|
/* 支付宝色 */
|
|
|
--alipay: #1677FE;
|
|
|
/* 昵称色/文件名/@色 */
|
|
|
--nickname: #4e7093;
|
|
|
|
|
|
/* 底部栏高度 */
|
|
|
--headerHeight: 88rpx;
|
|
|
/* 底部栏高度 */
|
|
|
--footerHeight: 98rpx;
|
|
|
|
|
|
/* 阴影 */
|
|
|
--ShadowSize: 6rpx 6rpx 8rpx;
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
/*ios点击颜色*/
|
|
|
-webkit-appearance: none;
|
|
|
/*ios默认样式*/
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
/*ios滑动*/
|
|
|
word-break: break-all;
|
|
|
font-family: 'PingFang SC',
|
|
|
'PingFangSC-Regular',
|
|
|
'Helvetica Neue',
|
|
|
"Helvetica Neue",
|
|
|
sans-serif;
|
|
|
font-size: 28rpx;
|
|
|
color: #1a1a1a;
|
|
|
background: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
/* #ifdef H5 */
|
|
|
page {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
page>view {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
/* #endif */
|
|
|
|
|
|
button {
|
|
|
line-height: 1;
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
background-color: transparent;
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
button::after {
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
定位
|
|
|
==================== */
|
|
|
/* APP端无标题定位 H5无标题定位 一般在view里面放一个status-bar高度的条 */
|
|
|
.jc-header {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
z-index: 998;
|
|
|
}
|
|
|
|
|
|
/* 标题下定位 APP端有标题 H5有无标题都兼容 小程序一般有标题 */
|
|
|
.jc-header-title {
|
|
|
position: fixed;
|
|
|
top: var(--window-top);
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
z-index: 998;
|
|
|
}
|
|
|
|
|
|
/* APP端无标题 其他端都可以 小程序一般有标题 */
|
|
|
.jc-header-status-bar {
|
|
|
position: fixed;
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
top: 0;
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
top: var(--status-bar-height);
|
|
|
/* #endif */
|
|
|
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
z-index: 998;
|
|
|
}
|
|
|
|
|
|
/* 有tabBar */
|
|
|
.jc-footer-tab-bar {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
bottom: var(--window-bottom);
|
|
|
z-index: 998;
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
/* 没有tabBar */
|
|
|
.jc-footer-safe {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
z-index: 998;
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
}
|
|
|
|
|
|
/* tabbar上方分割线 */
|
|
|
.tabbar-border-top {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
width: 100%;
|
|
|
height: 1px;
|
|
|
box-sizing: border-box;
|
|
|
border-bottom: 1rpx solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.block {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.inline {
|
|
|
display: inline;
|
|
|
}
|
|
|
|
|
|
.inline-block {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.block-center {
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.border-box {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.overflow-hidden {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.overflow-auto {
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
头像
|
|
|
==================== */
|
|
|
|
|
|
.jc-avatar {
|
|
|
display: block;
|
|
|
margin: 0 auto;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-50 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 50rpx;
|
|
|
height: 50rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-60 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 60rpx;
|
|
|
height: 60rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-70 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 70rpx;
|
|
|
height: 70rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-80 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-90 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 90rpx;
|
|
|
height: 90rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-100 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-110 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 110rpx;
|
|
|
height: 110rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-120 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-130 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 130rpx;
|
|
|
height: 130rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-140 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 140rpx;
|
|
|
height: 140rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-avatar-200 {
|
|
|
/* margin: 0 auto; */
|
|
|
display: block;
|
|
|
width: 200rpx;
|
|
|
height: 200rpx;
|
|
|
/* background-color: #ccc; */
|
|
|
border-radius: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
图片
|
|
|
==================== */
|
|
|
|
|
|
.jc-image {
|
|
|
display: block;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-80 {
|
|
|
display: block;
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-90 {
|
|
|
display: block;
|
|
|
width: 90rpx;
|
|
|
height: 90rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-120 {
|
|
|
display: block;
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-140 {
|
|
|
display: block;
|
|
|
width: 140rpx;
|
|
|
height: 140rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-150 {
|
|
|
display: block;
|
|
|
width: 150rpx;
|
|
|
height: 150rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-160 {
|
|
|
display: block;
|
|
|
width: 160rpx;
|
|
|
height: 160rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-180 {
|
|
|
display: block;
|
|
|
width: 180rpx;
|
|
|
height: 180rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-200 {
|
|
|
display: block;
|
|
|
width: 200rpx;
|
|
|
height: 200rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-220 {
|
|
|
display: block;
|
|
|
width: 220rpx;
|
|
|
height: 220rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-240 {
|
|
|
display: block;
|
|
|
width: 240rpx;
|
|
|
height: 240rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-250 {
|
|
|
display: block;
|
|
|
width: 250rpx;
|
|
|
height: 250rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-280 {
|
|
|
display: block;
|
|
|
width: 280rpx;
|
|
|
height: 280rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.jc-image-300 {
|
|
|
display: block;
|
|
|
width: 300rpx;
|
|
|
height: 300rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
宽高
|
|
|
==================== */
|
|
|
.full_page {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
|
|
|
.width-40 {
|
|
|
width: 40rpx;
|
|
|
}
|
|
|
|
|
|
.width-100 {
|
|
|
width: 100rpx;
|
|
|
}
|
|
|
|
|
|
.width-130 {
|
|
|
width: 130rpx;
|
|
|
}
|
|
|
|
|
|
.width-150 {
|
|
|
width: 150rpx;
|
|
|
}
|
|
|
|
|
|
.width-160 {
|
|
|
width: 160rpx;
|
|
|
}
|
|
|
|
|
|
.width-170 {
|
|
|
width: 170rpx;
|
|
|
}
|
|
|
|
|
|
.width-200 {
|
|
|
width: 200rpx;
|
|
|
}
|
|
|
|
|
|
.width-220 {
|
|
|
width: 200rpx;
|
|
|
}
|
|
|
|
|
|
.width-220 {
|
|
|
width: 220rpx;
|
|
|
}
|
|
|
|
|
|
.width-400 {
|
|
|
width: 400rpx;
|
|
|
}
|
|
|
|
|
|
.width-690 {
|
|
|
width: 690rpx;
|
|
|
}
|
|
|
|
|
|
.width-10p {
|
|
|
width: 10%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.width-20p {
|
|
|
width: 20%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.width-25p {
|
|
|
width: 25%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.width-33p {
|
|
|
width: 33.33%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.width-50p {
|
|
|
width: 50%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.width-60p {
|
|
|
width: 60%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.width-100p {
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.height-100p {
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.height-200 {
|
|
|
height: 200rpx;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
模态窗口
|
|
|
==================== */
|
|
|
|
|
|
.jc-modal {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
z-index: 999;
|
|
|
/* text-align: center; */
|
|
|
backface-visibility: hidden;
|
|
|
perspective: 2000rpx;
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
圆角
|
|
|
==================== */
|
|
|
|
|
|
.round {
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.radius-2 {
|
|
|
border-radius: 2rpx;
|
|
|
}
|
|
|
|
|
|
.radius-4 {
|
|
|
border-radius: 4rpx;
|
|
|
}
|
|
|
|
|
|
.radius-6 {
|
|
|
border-radius: 6rpx;
|
|
|
}
|
|
|
|
|
|
.radius-8 {
|
|
|
border-radius: 8rpx;
|
|
|
}
|
|
|
|
|
|
.radius-10 {
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
|
|
|
.radius-20 {
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
|
|
|
.radius-25 {
|
|
|
border-radius: 25rpx;
|
|
|
}
|
|
|
|
|
|
.radius-30 {
|
|
|
border-radius: 30rpx;
|
|
|
}
|
|
|
|
|
|
.radius-35 {
|
|
|
border-radius: 35rpx;
|
|
|
}
|
|
|
|
|
|
.radius-40 {
|
|
|
border-radius: 40rpx;
|
|
|
}
|
|
|
|
|
|
.radius-45 {
|
|
|
border-radius: 45rpx;
|
|
|
}
|
|
|
|
|
|
|
|
|
.radius-50 {
|
|
|
border-radius: 50rpx;
|
|
|
}
|
|
|
|
|
|
.radius-50p {
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.lradius {
|
|
|
border-top-left-radius: 50rpx;
|
|
|
border-bottom-left-radius: 50rpx;
|
|
|
}
|
|
|
|
|
|
.rradius {
|
|
|
border-top-right-radius: 50rpx;
|
|
|
border-bottom-right-radius: 50rpx;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
flex弹性布局(colorui后续补充)
|
|
|
==================== */
|
|
|
|
|
|
.basis-10 {
|
|
|
flex-basis: 10%;
|
|
|
}
|
|
|
|
|
|
.basis-20 {
|
|
|
flex-basis: 20%;
|
|
|
}
|
|
|
|
|
|
.basis-30 {
|
|
|
flex-basis: 30%;
|
|
|
}
|
|
|
|
|
|
.basis-40 {
|
|
|
flex-basis: 40%;
|
|
|
}
|
|
|
|
|
|
.basis-50 {
|
|
|
flex-basis: 50%;
|
|
|
}
|
|
|
|
|
|
.basis-60 {
|
|
|
flex-basis: 60%;
|
|
|
}
|
|
|
|
|
|
.basis-70 {
|
|
|
flex-basis: 70%;
|
|
|
}
|
|
|
|
|
|
.basis-80 {
|
|
|
flex-basis: 80%;
|
|
|
}
|
|
|
|
|
|
.flex-one {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.flex-two {
|
|
|
flex: 2;
|
|
|
}
|
|
|
|
|
|
.flex-three {
|
|
|
flex: 3;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
定位
|
|
|
==================== */
|
|
|
|
|
|
.position-relative {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.position-absolute {
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
.position-fixed {
|
|
|
position: fixed;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
阴影
|
|
|
==================== */
|
|
|
|
|
|
.shadow-black {
|
|
|
box-shadow: 0 0 10rpx rgba(26, 26, 26, 0.2);
|
|
|
}
|
|
|
|
|
|
.shadow-bottom-black {
|
|
|
box-shadow: 0 10rpx 15rpx rgba(26, 26, 26, 0.2);
|
|
|
}
|
|
|
|
|
|
.shadow-grey {
|
|
|
box-shadow: 0 0 10rpx #e6e6e6;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
边框
|
|
|
==================== */
|
|
|
|
|
|
.border-cc {
|
|
|
border: 1rpx solid #ccc;
|
|
|
}
|
|
|
|
|
|
.border-ed {
|
|
|
border: 1rpx solid #ededed;
|
|
|
}
|
|
|
|
|
|
.border-ff {
|
|
|
border: 1rpx solid #fff;
|
|
|
}
|
|
|
|
|
|
.border-main {
|
|
|
border: 1rpx solid var(--main);
|
|
|
}
|
|
|
|
|
|
.border-top-e6 {
|
|
|
border-top: 1rpx solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.border-top-ed {
|
|
|
border-top: 1rpx solid #EDEDED;
|
|
|
}
|
|
|
|
|
|
|
|
|
.border-top-ee {
|
|
|
border-top: 1rpx solid #eee;
|
|
|
}
|
|
|
|
|
|
.dashed-top-e6 {
|
|
|
border-top: 1rpx dashed #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.dashed-top-ed {
|
|
|
border-top: 1rpx dashed #ededed;
|
|
|
}
|
|
|
|
|
|
.border-right-e6 {
|
|
|
border-right: 1rpx solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.border-right-ed {
|
|
|
border-right: 1rpx solid #EDEDED;
|
|
|
}
|
|
|
|
|
|
.border-right-ff {
|
|
|
border-right: 1rpx solid #fff;
|
|
|
}
|
|
|
|
|
|
.border-right-ee {
|
|
|
border-right: 1rpx solid #eee;
|
|
|
}
|
|
|
|
|
|
.border-bottom-e6 {
|
|
|
border-bottom: 1rpx solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.dashed-bottom-e6 {
|
|
|
border-bottom: 1rpx dashed #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.dashed-bottom-ed {
|
|
|
border-bottom: 1rpx dashed #ededed;
|
|
|
}
|
|
|
|
|
|
.border-bottom-ee {
|
|
|
border-bottom: 1rpx solid #eee;
|
|
|
}
|
|
|
|
|
|
.border-bottom-ed {
|
|
|
border-bottom: 1rpx solid #EDEDED;
|
|
|
}
|
|
|
|
|
|
|
|
|
.border-left-e6 {
|
|
|
border-left: 2rpx solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.border-left-ee {
|
|
|
border-left: 2rpx solid #eee;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ==================
|
|
|
文本(colorui后续补充)
|
|
|
==================== */
|
|
|
.word-nowrap {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.text-cut-one {
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: normal;
|
|
|
overflow: hidden;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 1;
|
|
|
-webkit-box-orient: vertical;
|
|
|
}
|
|
|
|
|
|
.text-cut-two {
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: normal;
|
|
|
overflow: hidden;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
}
|
|
|
|
|
|
.text-cut-three {
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: normal;
|
|
|
overflow: hidden;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 3;
|
|
|
-webkit-box-orient: vertical;
|
|
|
}
|
|
|
|
|
|
.text-cut-four {
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: normal;
|
|
|
overflow: hidden;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 4;
|
|
|
-webkit-box-orient: vertical;
|
|
|
}
|
|
|
|
|
|
.text-through {
|
|
|
text-decoration: line-through;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.submit-button {
|
|
|
width: calc(100vw - 60rpx);
|
|
|
margin-left: 30rpx;
|
|
|
height: 90rpx;
|
|
|
color: #FFFFFF;
|
|
|
border-radius: 10rpx;
|
|
|
background-image: linear-gradient(to right, rgba(142, 98, 254, 1), rgba(107, 85, 254, 1));
|
|
|
}
|
|
|
|
|
|
.keep-all {
|
|
|
word-break: keep-all;
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 蒙层 z-index = 1000
|
|
|
*/
|
|
|
.mngolia {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: calc(100vw);
|
|
|
height: calc(100vh);
|
|
|
z-index: 800;
|
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
|
}
|
|
|
|
|
|
/* 顶部状态栏高度 */
|
|
|
.status-bar {
|
|
|
width: calc(100vw);
|
|
|
/* #ifdef APP-PLUS|H5 */
|
|
|
height: var(--status-bar-height);
|
|
|
/* #endif */
|
|
|
/* #ifndef APP-PLUS|H5 */
|
|
|
height: 0;
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
/* --------------------------------------------------------------- 基础样式 ------------------------------------------------------------------------------------- */
|
|
|
|
|
|
/* ==================
|
|
|
字体大小
|
|
|
==================== */
|
|
|
|
|
|
/* 起始字号14rpx 终止字号60rpx 间隔2rpx一个字号样式
|
|
|
单独：70rpx */
|
|
|
.text-14 {
|
|
|
font-size: 14rpx;
|
|
|
}
|
|
|
|
|
|
.text-16 {
|
|
|
font-size: 16rpx;
|
|
|
}
|
|
|
|
|
|
.text-18 {
|
|
|
font-size: 18rpx;
|
|
|
}
|
|
|
|
|
|
.text-20 {
|
|
|
font-size: 20rpx;
|
|
|
}
|
|
|
|
|
|
.text-22 {
|
|
|
font-size: 22rpx;
|
|
|
}
|
|
|
|
|
|
.text-24 {
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.text-26 {
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
|
|
|
.text-28 {
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
.text-30 {
|
|
|
font-size: 30rpx;
|
|
|
}
|
|
|
|
|
|
.text-32 {
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
.text-34 {
|
|
|
font-size: 34rpx;
|
|
|
}
|
|
|
|
|
|
.text-36 {
|
|
|
font-size: 36rpx;
|
|
|
}
|
|
|
|
|
|
.text-38 {
|
|
|
font-size: 38rpx;
|
|
|
}
|
|
|
|
|
|
.text-40 {
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
|
|
|
|
.text-42 {
|
|
|
font-size: 42rpx;
|
|
|
}
|
|
|
|
|
|
.text-44 {
|
|
|
font-size: 44rpx;
|
|
|
}
|
|
|
|
|
|
.text-46 {
|
|
|
font-size: 46rpx;
|
|
|
}
|
|
|
|
|
|
.text-48 {
|
|
|
font-size: 48rpx;
|
|
|
}
|
|
|
|
|
|
.text-50 {
|
|
|
font-size: 50rpx;
|
|
|
}
|
|
|
|
|
|
.text-52 {
|
|
|
font-size: 52rpx;
|
|
|
}
|
|
|
|
|
|
.text-54 {
|
|
|
font-size: 54rpx;
|
|
|
}
|
|
|
|
|
|
.text-56 {
|
|
|
font-size: 56rpx;
|
|
|
}
|
|
|
|
|
|
.text-58 {
|
|
|
font-size: 58rpx;
|
|
|
}
|
|
|
|
|
|
.text-60 {
|
|
|
font-size: 60rpx;
|
|
|
}
|
|
|
|
|
|
.text-70 {
|
|
|
font-size: 70rpx;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
文本颜色
|
|
|
==================== */
|
|
|
|
|
|
/* 文本基础颜色 */
|
|
|
.text-1a {
|
|
|
color: #1a1a1a;
|
|
|
}
|
|
|
|
|
|
.text-33 {
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.text-4d {
|
|
|
color: #4d4d4d;
|
|
|
}
|
|
|
|
|
|
.text-66 {
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
.text-77 {
|
|
|
color: #777;
|
|
|
}
|
|
|
|
|
|
.text-80 {
|
|
|
color: #808080;
|
|
|
}
|
|
|
|
|
|
.text-98 {
|
|
|
color: #989898;
|
|
|
}
|
|
|
|
|
|
.text-aa {
|
|
|
color: #aaa;
|
|
|
}
|
|
|
|
|
|
.text-b3 {
|
|
|
color: #b3b3b3;
|
|
|
}
|
|
|
|
|
|
.text-cc {
|
|
|
color: #ccc;
|
|
|
}
|
|
|
|
|
|
.text-ed {
|
|
|
color: #ededed;
|
|
|
}
|
|
|
|
|
|
.text-f5 {
|
|
|
color: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.text-f7 {
|
|
|
color: #f7f7f7;
|
|
|
}
|
|
|
|
|
|
.text-ff {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
/* 文本常用颜色 */
|
|
|
.text-first-notice {
|
|
|
color: var(--firstNotice);
|
|
|
}
|
|
|
|
|
|
.text-second-notice {
|
|
|
color: var(--secondNotice);
|
|
|
}
|
|
|
|
|
|
.text-wechat {
|
|
|
color: var(--wechat);
|
|
|
}
|
|
|
|
|
|
.text-alipay {
|
|
|
color: var(--alipay);
|
|
|
}
|
|
|
|
|
|
.text-nickname {
|
|
|
color: var(--nickname);
|
|
|
}
|
|
|
|
|
|
/* 文本项目颜色 */
|
|
|
.text-main {
|
|
|
color: var(--main);
|
|
|
}
|
|
|
|
|
|
.text-auxiliary {
|
|
|
color: var(--auxiliary);
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
背景颜色
|
|
|
==================== */
|
|
|
|
|
|
/* 背景基础颜色 */
|
|
|
.bg-1a {
|
|
|
background-color: #1a1a1a;
|
|
|
}
|
|
|
|
|
|
.bg-33 {
|
|
|
background-color: #333;
|
|
|
}
|
|
|
|
|
|
.bg-4d {
|
|
|
background-color: #4d4d4d;
|
|
|
}
|
|
|
|
|
|
.bg-66 {
|
|
|
background-color: #666;
|
|
|
}
|
|
|
|
|
|
.bg-77 {
|
|
|
background-color: #777;
|
|
|
}
|
|
|
|
|
|
.bg-80 {
|
|
|
background-color: #808080;
|
|
|
}
|
|
|
|
|
|
.bg-98 {
|
|
|
background-color: #989898;
|
|
|
}
|
|
|
|
|
|
.bg-b3 {
|
|
|
background-color: #b3b3b3;
|
|
|
}
|
|
|
|
|
|
.bg-cc {
|
|
|
background-color: #ccc;
|
|
|
}
|
|
|
|
|
|
.bg-ed {
|
|
|
background-color: #ededed;
|
|
|
}
|
|
|
|
|
|
.bg-f5 {
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.bg-f7 {
|
|
|
background-color: #f7f7f7;
|
|
|
}
|
|
|
|
|
|
.bg-ff {
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
/* 背景常用颜色 */
|
|
|
.bg-first-notice {
|
|
|
background-color: var(--firstNotice);
|
|
|
}
|
|
|
|
|
|
.bg-second-notice {
|
|
|
background-color: var(--secondNotice);
|
|
|
}
|
|
|
|
|
|
.bg-wechat {
|
|
|
background-color: var(--wechat);
|
|
|
}
|
|
|
|
|
|
.bg-alipay {
|
|
|
background-color: var(--alipay);
|
|
|
}
|
|
|
|
|
|
.bg-nickname {
|
|
|
background-color: var(--nickname);
|
|
|
}
|
|
|
|
|
|
/* 背景项目颜色 */
|
|
|
.bg-main {
|
|
|
background-color: var(--main);
|
|
|
}
|
|
|
|
|
|
.bg-main-gradient {
|
|
|
background: linear-gradient(to right, var(--main), var(--mainGradient));
|
|
|
}
|
|
|
|
|
|
.bg-main-light {
|
|
|
background-color: var(--mainLight);
|
|
|
}
|
|
|
|
|
|
.bg-auxiliary {
|
|
|
background-color: var(--auxiliary);
|
|
|
}
|
|
|
|
|
|
.bg-auxiliary-gradient {
|
|
|
background: linear-gradient(to right, var(--auxiliary), var(--auxiliaryGradient));
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
行高
|
|
|
==================== */
|
|
|
|
|
|
/* 基础行高
|
|
|
起始20rpx 终止100rpx 间隔5rpx一个行高样式
|
|
|
单独：110rpx 120rpx 130rpx 140rpx 150rpx */
|
|
|
.line-20 {
|
|
|
line-height: 20rpx;
|
|
|
}
|
|
|
|
|
|
.line-25 {
|
|
|
line-height: 25rpx;
|
|
|
}
|
|
|
|
|
|
.line-30 {
|
|
|
line-height: 30rpx;
|
|
|
}
|
|
|
|
|
|
.line-35 {
|
|
|
line-height: 35rpx;
|
|
|
}
|
|
|
|
|
|
.line-40 {
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
.line-45 {
|
|
|
line-height: 45rpx;
|
|
|
}
|
|
|
|
|
|
.line-50 {
|
|
|
line-height: 50rpx;
|
|
|
}
|
|
|
|
|
|
.line-55 {
|
|
|
line-height: 55rpx;
|
|
|
}
|
|
|
|
|
|
.line-60 {
|
|
|
line-height: 60rpx;
|
|
|
}
|
|
|
|
|
|
.line-65 {
|
|
|
line-height: 65rpx;
|
|
|
}
|
|
|
|
|
|
.line-70 {
|
|
|
line-height: 70rpx;
|
|
|
}
|
|
|
|
|
|
.line-75 {
|
|
|
line-height: 75rpx;
|
|
|
}
|
|
|
|
|
|
.line-80 {
|
|
|
line-height: 80rpx;
|
|
|
}
|
|
|
|
|
|
.line-85 {
|
|
|
line-height: 85rpx;
|
|
|
}
|
|
|
|
|
|
.line-90 {
|
|
|
line-height: 90rpx;
|
|
|
}
|
|
|
|
|
|
.line-95 {
|
|
|
line-height: 95rpx;
|
|
|
}
|
|
|
|
|
|
.line-100 {
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
|
|
|
.line-110 {
|
|
|
line-height: 110rpx;
|
|
|
}
|
|
|
|
|
|
.line-120 {
|
|
|
line-height: 120rpx;
|
|
|
}
|
|
|
|
|
|
.line-130 {
|
|
|
line-height: 130rpx;
|
|
|
}
|
|
|
|
|
|
.line-140 {
|
|
|
line-height: 140rpx;
|
|
|
}
|
|
|
|
|
|
.line-150 {
|
|
|
line-height: 150rpx;
|
|
|
}
|
|
|
|
|
|
/* 常用行高 */
|
|
|
.line-header {
|
|
|
line-height: var(--headerHeight);
|
|
|
}
|
|
|
|
|
|
.line-footer {
|
|
|
line-height: var(--footerHeight);
|
|
|
}
|
|
|
|
|
|
|
|
|
/* ==================
|
|
|
高度
|
|
|
==================== */
|
|
|
|
|
|
/* 基础高度
|
|
|
起始30rpx 终止100rpx 间隔5rpx一个行高样式
|
|
|
单独：110rpx 120rpx 130rpx 140rpx 150rpx */
|
|
|
.height-30 {
|
|
|
height: 30rpx;
|
|
|
}
|
|
|
|
|
|
.height-35 {
|
|
|
height: 35rpx;
|
|
|
}
|
|
|
|
|
|
.height-40 {
|
|
|
height: 40rpx;
|
|
|
}
|
|
|
|
|
|
.height-45 {
|
|
|
height: 45rpx;
|
|
|
}
|
|
|
|
|
|
.height-50 {
|
|
|
height: 50rpx;
|
|
|
}
|
|
|
|
|
|
.height-55 {
|
|
|
height: 55rpx;
|
|
|
}
|
|
|
|
|
|
.height-60 {
|
|
|
height: 60rpx;
|
|
|
}
|
|
|
|
|
|
.height-65 {
|
|
|
height: 65rpx;
|
|
|
}
|
|
|
|
|
|
.height-70 {
|
|
|
height: 70rpx;
|
|
|
}
|
|
|
|
|
|
.height-75 {
|
|
|
height: 75rpx;
|
|
|
}
|
|
|
|
|
|
.height-80 {
|
|
|
height: 80rpx;
|
|
|
}
|
|
|
|
|
|
.height-85 {
|
|
|
height: 85rpx;
|
|
|
}
|
|
|
|
|
|
.height-90 {
|
|
|
height: 90rpx;
|
|
|
}
|
|
|
|
|
|
.height-95 {
|
|
|
height: 95rpx;
|
|
|
}
|
|
|
|
|
|
.height-100 {
|
|
|
height: 100rpx;
|
|
|
}
|
|
|
|
|
|
.height-110 {
|
|
|
height: 110rpx;
|
|
|
}
|
|
|
|
|
|
.height-120 {
|
|
|
height: 120rpx;
|
|
|
}
|
|
|
|
|
|
.height-130 {
|
|
|
height: 130rpx;
|
|
|
}
|
|
|
|
|
|
.height-140 {
|
|
|
height: 140rpx;
|
|
|
}
|
|
|
|
|
|
.height-150 {
|
|
|
height: 150rpx;
|
|
|
}
|
|
|
|
|
|
/* 常用高度 */
|
|
|
.height-header {
|
|
|
height: var(--headerHeight);
|
|
|
}
|
|
|
|
|
|
.height-footer {
|
|
|
height: var(--footerHeight);
|
|
|
}
|
|
|
|
|
|
.height-footer-safe {
|
|
|
height: calc(var(--footerHeight) + env(safe-area-inset-bottom));
|
|
|
}
|
|
|
|
|
|
.height-safe {
|
|
|
height: env(safe-area-inset-bottom);
|
|
|
}
|
|
|
|
|
|
.height-status-bar {
|
|
|
height: var(--status-bar-height);
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
行高居中
|
|
|
==================== */
|
|
|
|
|
|
/* 基础行高居中
|
|
|
起始30rpx 终止100rpx 间隔5rpx一个行高样式
|
|
|
单独：110rpx 120rpx 130rpx 140rpx 150rpx */
|
|
|
.line-height-30 {
|
|
|
height: 30rpx;
|
|
|
line-height: 30rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-35 {
|
|
|
height: 35rpx;
|
|
|
line-height: 35rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-40 {
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-45 {
|
|
|
height: 45rpx;
|
|
|
line-height: 45rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-50 {
|
|
|
height: 50rpx;
|
|
|
line-height: 50rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-55 {
|
|
|
height: 55rpx;
|
|
|
line-height: 55rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-60 {
|
|
|
height: 60rpx;
|
|
|
line-height: 60rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-65 {
|
|
|
height: 65rpx;
|
|
|
line-height: 65rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-70 {
|
|
|
height: 70rpx;
|
|
|
line-height: 70rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-75 {
|
|
|
height: 75rpx;
|
|
|
line-height: 75rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-80 {
|
|
|
height: 80rpx;
|
|
|
line-height: 80rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-85 {
|
|
|
height: 85rpx;
|
|
|
line-height: 85rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-90 {
|
|
|
height: 90rpx;
|
|
|
line-height: 90rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-95 {
|
|
|
height: 95rpx;
|
|
|
line-height: 95rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-100 {
|
|
|
height: 100rpx;
|
|
|
line-height: 100rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-110 {
|
|
|
height: 110rpx;
|
|
|
line-height: 110rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-120 {
|
|
|
height: 120rpx;
|
|
|
line-height: 120rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-130 {
|
|
|
height: 130rpx;
|
|
|
line-height: 130rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-140 {
|
|
|
height: 140rpx;
|
|
|
line-height: 140rpx;
|
|
|
}
|
|
|
|
|
|
.line-height-150 {
|
|
|
height: 150rpx;
|
|
|
line-height: 150rpx;
|
|
|
}
|
|
|
|
|
|
/* 常用行高居中 */
|
|
|
.line-height-header {
|
|
|
height: var(--headerHeight);
|
|
|
line-height: var(--headerHeight);
|
|
|
}
|
|
|
|
|
|
.line-height-footer {
|
|
|
height: var(--footerHeight);
|
|
|
line-height: var(--footerHeight);
|
|
|
}
|
|
|
|
|
|
.line-height-50-border-main {
|
|
|
height: 50rpx;
|
|
|
line-height: 46rpx;
|
|
|
border: 2rpx solid var(--main);
|
|
|
}
|
|
|
|
|
|
.line-height-50-border-ff {
|
|
|
height: 50rpx;
|
|
|
line-height: 46rpx;
|
|
|
border: 2rpx solid #fff;
|
|
|
}
|
|
|
|
|
|
.line-height-55-border-main {
|
|
|
height: 55rpx;
|
|
|
line-height: 51rpx;
|
|
|
border: 2rpx solid var(--main);
|
|
|
}
|
|
|
|
|
|
.line-height-55-border-cc {
|
|
|
height: 55rpx;
|
|
|
line-height: 51rpx;
|
|
|
border: 2rpx solid #ccc;
|
|
|
}
|
|
|
|
|
|
.line-height-60-border-main {
|
|
|
height: 60rpx;
|
|
|
line-height: 56rpx;
|
|
|
border: 2rpx solid var(--main);
|
|
|
}
|
|
|
|
|
|
.line-height-60-border-ff {
|
|
|
height: 60rpx;
|
|
|
line-height: 56rpx;
|
|
|
border: 2rpx solid #fff;
|
|
|
}
|
|
|
|
|
|
.line-height-60-border-cc {
|
|
|
height: 60rpx;
|
|
|
line-height: 56rpx;
|
|
|
border: 2rpx solid #ccc;
|
|
|
}
|
|
|
|
|
|
.line-height-70-border-ff {
|
|
|
height: 70rpx;
|
|
|
line-height: 66rpx;
|
|
|
border: 2rpx solid #fff;
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
外边距
|
|
|
==================== */
|
|
|
|
|
|
/* 基础外边距
|
|
|
起始0rpx 终止100rpx 间隔5rpx一个样式 */
|
|
|
.margin-0 {
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.margin-5 {
|
|
|
margin: 5rpx;
|
|
|
}
|
|
|
|
|
|
.margin-10 {
|
|
|
margin: 10rpx;
|
|
|
}
|
|
|
|
|
|
.margin-15 {
|
|
|
margin: 15rpx;
|
|
|
}
|
|
|
|
|
|
.margin-20 {
|
|
|
margin: 20rpx;
|
|
|
}
|
|
|
|
|
|
.margin-25 {
|
|
|
margin: 25rpx;
|
|
|
}
|
|
|
|
|
|
.margin-30 {
|
|
|
margin: 30rpx;
|
|
|
}
|
|
|
|
|
|
.margin-35 {
|
|
|
margin: 35rpx;
|
|
|
}
|
|
|
|
|
|
.margin-40 {
|
|
|
margin: 40rpx;
|
|
|
}
|
|
|
|
|
|
.margin-45 {
|
|
|
margin: 45rpx;
|
|
|
}
|
|
|
|
|
|
.margin-50 {
|
|
|
margin: 50rpx;
|
|
|
}
|
|
|
|
|
|
.margin-55 {
|
|
|
margin: 55rpx;
|
|
|
}
|
|
|
|
|
|
.margin-60 {
|
|
|
margin: 60rpx;
|
|
|
}
|
|
|
|
|
|
.margin-65 {
|
|
|
margin: 65rpx;
|
|
|
}
|
|
|
|
|
|
.margin-70 {
|
|
|
margin: 70rpx;
|
|
|
}
|
|
|
|
|
|
.margin-75 {
|
|
|
margin: 75rpx;
|
|
|
}
|
|
|
|
|
|
.margin-80 {
|
|
|
margin: 80rpx;
|
|
|
}
|
|
|
|
|
|
.margin-85 {
|
|
|
margin: 85rpx;
|
|
|
}
|
|
|
|
|
|
.margin-90 {
|
|
|
margin: 90rpx;
|
|
|
}
|
|
|
|
|
|
.margin-95 {
|
|
|
margin: 95rpx;
|
|
|
}
|
|
|
|
|
|
.margin-100 {
|
|
|
margin: 100rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础上边距
|
|
|
起始0rpx 终止100rpx 间隔5rpx一个样式 */
|
|
|
|
|
|
.margin-top-0 {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
|
|
|
.margin-top-5 {
|
|
|
margin-top: 5rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-10 {
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-15 {
|
|
|
margin-top: 15rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-20 {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-25 {
|
|
|
margin-top: 25rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-30 {
|
|
|
margin-top: 30rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-35 {
|
|
|
margin-top: 35rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-40 {
|
|
|
margin-top: 40rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-45 {
|
|
|
margin-top: 45rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-50 {
|
|
|
margin-top: 50rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-55 {
|
|
|
margin-top: 55rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-60 {
|
|
|
margin-top: 60rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-65 {
|
|
|
margin-top: 65rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-70 {
|
|
|
margin-top: 70rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-75 {
|
|
|
margin-top: 75rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-80 {
|
|
|
margin-top: 80rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-85 {
|
|
|
margin-top: 85rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-90 {
|
|
|
margin-top: 90rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-95 {
|
|
|
margin-top: 95rpx;
|
|
|
}
|
|
|
|
|
|
.margin-top-100 {
|
|
|
margin-top: 100rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础右边距
|
|
|
起始0rpx 终止100rpx 间隔5rpx一个样式 */
|
|
|
.margin-right-0 {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
|
|
|
.margin-right-5 {
|
|
|
margin-right: 5rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-10 {
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-15 {
|
|
|
margin-right: 15rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-20 {
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-25 {
|
|
|
margin-right: 25rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-30 {
|
|
|
margin-right: 30rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-35 {
|
|
|
margin-right: 35rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-40 {
|
|
|
margin-right: 40rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-45 {
|
|
|
margin-right: 45rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-50 {
|
|
|
margin-right: 50rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-55 {
|
|
|
margin-right: 55rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-60 {
|
|
|
margin-right: 60rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-65 {
|
|
|
margin-right: 65rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-70 {
|
|
|
margin-right: 70rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-75 {
|
|
|
margin-right: 75rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-80 {
|
|
|
margin-right: 80rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-85 {
|
|
|
margin-right: 85rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-90 {
|
|
|
margin-right: 90rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-95 {
|
|
|
margin-right: 95rpx;
|
|
|
}
|
|
|
|
|
|
.margin-right-100 {
|
|
|
margin-right: 100rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础下边距
|
|
|
起始0rpx 终止100rpx 间隔5rpx一个样式 */
|
|
|
.margin-bottom-0 {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-5 {
|
|
|
margin-bottom: 5rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-10 {
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-15 {
|
|
|
margin-bottom: 15rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-20 {
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-25 {
|
|
|
margin-bottom: 25rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-30 {
|
|
|
margin-bottom: 30rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-35 {
|
|
|
margin-bottom: 35rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-40 {
|
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-45 {
|
|
|
margin-bottom: 45rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-50 {
|
|
|
margin-bottom: 50rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-55 {
|
|
|
margin-bottom: 55rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-60 {
|
|
|
margin-bottom: 60rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-65 {
|
|
|
margin-bottom: 65rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-70 {
|
|
|
margin-bottom: 70rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-75 {
|
|
|
margin-bottom: 75rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-80 {
|
|
|
margin-bottom: 80rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-85 {
|
|
|
margin-bottom: 85rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-90 {
|
|
|
margin-bottom: 90rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-95 {
|
|
|
margin-bottom: 95rpx;
|
|
|
}
|
|
|
|
|
|
.margin-bottom-100 {
|
|
|
margin-bottom: 100rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础左边距
|
|
|
起始0rpx 终止100rpx 间隔5rpx一个样式 */
|
|
|
.margin-left-0 {
|
|
|
margin-left: 0 !important;
|
|
|
}
|
|
|
|
|
|
.margin-left-5 {
|
|
|
margin-left: 5rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-10 {
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-15 {
|
|
|
margin-left: 15rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-20 {
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-25 {
|
|
|
margin-left: 25rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-30 {
|
|
|
margin-left: 30rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-35 {
|
|
|
margin-left: 35rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-40 {
|
|
|
margin-left: 40rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-45 {
|
|
|
margin-left: 45rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-50 {
|
|
|
margin-left: 50rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-55 {
|
|
|
margin-left: 55rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-60 {
|
|
|
margin-left: 60rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-65 {
|
|
|
margin-left: 65rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-70 {
|
|
|
margin-left: 70rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-75 {
|
|
|
margin-left: 75rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-80 {
|
|
|
margin-left: 80rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-85 {
|
|
|
margin-left: 85rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-90 {
|
|
|
margin-left: 90rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-95 {
|
|
|
margin-left: 95rpx;
|
|
|
}
|
|
|
|
|
|
.margin-left-100 {
|
|
|
margin-left: 100rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础左右边距
|
|
|
起始0rpx 终止100rpx 间隔5rpx一个样式 */
|
|
|
.margin-lr-0 {
|
|
|
margin-left: 0;
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
|
|
|
.margin-lr-5 {
|
|
|
margin-left: 5rpx;
|
|
|
margin-right: 5rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-10 {
|
|
|
margin-left: 10rpx;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-15 {
|
|
|
margin-left: 15rpx;
|
|
|
margin-right: 15rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-20 {
|
|
|
margin-left: 20rpx;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-25 {
|
|
|
margin-left: 25rpx;
|
|
|
margin-right: 25rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-30 {
|
|
|
margin-left: 30rpx;
|
|
|
margin-right: 30rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-35 {
|
|
|
margin-left: 35rpx;
|
|
|
margin-right: 35rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-40 {
|
|
|
margin-left: 40rpx;
|
|
|
margin-right: 40rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-45 {
|
|
|
margin-left: 45rpx;
|
|
|
margin-right: 45rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-50 {
|
|
|
margin-left: 50rpx;
|
|
|
margin-right: 50rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-55 {
|
|
|
margin-left: 55rpx;
|
|
|
margin-right: 55rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-60 {
|
|
|
margin-left: 60rpx;
|
|
|
margin-right: 60rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-65 {
|
|
|
margin-left: 65rpx;
|
|
|
margin-right: 65rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-70 {
|
|
|
margin-left: 70rpx;
|
|
|
margin-right: 70rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-75 {
|
|
|
margin-left: 75rpx;
|
|
|
margin-right: 75rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-80 {
|
|
|
margin-left: 80rpx;
|
|
|
margin-right: 80rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-85 {
|
|
|
margin-left: 85rpx;
|
|
|
margin-right: 85rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-90 {
|
|
|
margin-left: 90rpx;
|
|
|
margin-right: 90rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-95 {
|
|
|
margin-left: 95rpx;
|
|
|
margin-right: 95rpx;
|
|
|
}
|
|
|
|
|
|
.margin-lr-100 {
|
|
|
margin-left: 100rpx;
|
|
|
margin-right: 100rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础上下边距
|
|
|
起始0rpx 终止100rpx 间隔5rpx一个样式 */
|
|
|
.margin-tb-0 {
|
|
|
margin-top: 0;
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.margin-tb-5 {
|
|
|
margin-top: 5rpx;
|
|
|
margin-bottom: 5rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-10 {
|
|
|
margin-top: 10rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-15 {
|
|
|
margin-top: 15rpx;
|
|
|
margin-bottom: 15rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-20 {
|
|
|
margin-top: 20rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-25 {
|
|
|
margin-top: 25rpx;
|
|
|
margin-bottom: 25rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-30 {
|
|
|
margin-top: 30rpx;
|
|
|
margin-bottom: 30rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-35 {
|
|
|
margin-top: 35rpx;
|
|
|
margin-bottom: 35rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-40 {
|
|
|
margin-top: 40rpx;
|
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-45 {
|
|
|
margin-top: 45rpx;
|
|
|
margin-bottom: 45rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-50 {
|
|
|
margin-top: 50rpx;
|
|
|
margin-bottom: 50rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-55 {
|
|
|
margin-top: 55rpx;
|
|
|
margin-bottom: 55rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-60 {
|
|
|
margin-top: 60rpx;
|
|
|
margin-bottom: 60rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-65 {
|
|
|
margin-top: 65rpx;
|
|
|
margin-bottom: 65rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-70 {
|
|
|
margin-top: 70rpx;
|
|
|
margin-bottom: 70rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-75 {
|
|
|
margin-top: 75rpx;
|
|
|
margin-bottom: 75rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-80 {
|
|
|
margin-top: 80rpx;
|
|
|
margin-bottom: 80rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-85 {
|
|
|
margin-top: 85px;
|
|
|
margin-bottom: 85rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-90 {
|
|
|
margin-top: 90rpx;
|
|
|
margin-bottom: 90rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-95 {
|
|
|
margin-top: 95rpx;
|
|
|
margin-bottom: 95rpx;
|
|
|
}
|
|
|
|
|
|
.margin-tb-100 {
|
|
|
margin-top: 100rpx;
|
|
|
margin-bottom: 100rpx;
|
|
|
}
|
|
|
|
|
|
/* 常用上边距 */
|
|
|
.margin-top-title-header {
|
|
|
margin-top: var(--headerHeight);
|
|
|
}
|
|
|
|
|
|
.margin-top-title-header-15 {
|
|
|
margin-top: calc(var(--headerHeight) + 15rpx);
|
|
|
}
|
|
|
|
|
|
.margin-top-title-header-20 {
|
|
|
margin-top: calc(var(--headerHeight) + 20rpx);
|
|
|
}
|
|
|
|
|
|
.margin-top-title-header-30 {
|
|
|
margin-top: calc(var(--headerHeight) + 30rpx);
|
|
|
}
|
|
|
|
|
|
.margin-top-status-bar-header {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
margin-top: var(--headerHeight);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
margin-top: calc(var(--status-bar-height) + var(--headerHeight));
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.margin-top-status-bar-header-15 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
margin-top: calc(var(--headerHeight) + 15rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
margin-top: calc(var(--status-bar-height) + var(--headerHeight) + 15rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.margin-top-status-bar-header-20 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
margin-top: calc(var(--headerHeight) + 20rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
margin-top: calc(var(--status-bar-height) + var(--headerHeight) + 20rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
/* APP多一个电量条的高度 118 = 88 + 30 */
|
|
|
.margin-top-status-bar-header-30 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
margin-top: calc(var(--headerHeight) + 30rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
margin-top: calc(var(--status-bar-height) + var(--headerHeight) + 30rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.margin-top-status-bar-header2 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
margin-top: calc(var(--headerHeight) * 2);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
margin-top: calc(var(--status-bar-height) + var(--headerHeight) * 2);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.margin-top-status-bar-header2-15 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
margin-top: calc(var(--headerHeight) * 2 + 15rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
margin-top: calc(var(--status-bar-height) + var(--headerHeight) * 2 + 15rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.margin-top-status-bar-header2-20 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
margin-top: calc(var(--headerHeight) * 2 + 20rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
margin-top: calc(var(--status-bar-height) + var(--headerHeight) * 2 + 20rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
/* APP多一个电量条的高度 118 = 88 + 30 */
|
|
|
.margin-top-status-bar-header2-30 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
margin-top: calc(var(--headerHeight) * 2 + 30rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
margin-top: calc(var(--status-bar-height) + var(--headerHeight) * 2 + 30rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
/* ==================
|
|
|
内边距
|
|
|
==================== */
|
|
|
|
|
|
/* 基础内边距
|
|
|
起始0rpx 终止60rpx 间隔5rpx一个样式 */
|
|
|
.padding-0 {
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
.padding-5 {
|
|
|
padding: 5;
|
|
|
}
|
|
|
|
|
|
.padding-10 {
|
|
|
padding: 10rpx;
|
|
|
}
|
|
|
|
|
|
.padding-15 {
|
|
|
padding: 10rpx;
|
|
|
}
|
|
|
|
|
|
.padding-20 {
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
.padding-25 {
|
|
|
padding: 25rpx;
|
|
|
}
|
|
|
|
|
|
.padding-30 {
|
|
|
padding: 30rpx;
|
|
|
}
|
|
|
|
|
|
.padding-35 {
|
|
|
padding: 35rpx;
|
|
|
}
|
|
|
|
|
|
.padding-40 {
|
|
|
padding: 40rpx;
|
|
|
}
|
|
|
|
|
|
.padding-45 {
|
|
|
padding: 45rpx;
|
|
|
}
|
|
|
|
|
|
.padding-50 {
|
|
|
padding: 50rpx;
|
|
|
}
|
|
|
|
|
|
.padding-55 {
|
|
|
padding: 50rpx;
|
|
|
}
|
|
|
|
|
|
.padding-60 {
|
|
|
padding: 60rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础上内边距
|
|
|
起始0rpx 终止60rpx 间隔5rpx一个样式 */
|
|
|
.padding-top-0 {
|
|
|
padding-top: 0rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-5 {
|
|
|
padding-top: 5rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-10 {
|
|
|
padding-top: 10rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-15 {
|
|
|
padding-top: 15rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-20 {
|
|
|
padding-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-25 {
|
|
|
padding-top: 25rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-30 {
|
|
|
padding-top: 30rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-35 {
|
|
|
padding-top: 35rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-40 {
|
|
|
padding-top: 40rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-45 {
|
|
|
padding-top: 45rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-50 {
|
|
|
padding-top: 50rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-55 {
|
|
|
padding-top: 55rpx;
|
|
|
}
|
|
|
|
|
|
.padding-top-60 {
|
|
|
padding-top: 60rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础右内边距
|
|
|
起始0rpx 终止60rpx 间隔5rpx一个样式 */
|
|
|
.padding-right-0 {
|
|
|
padding-right: 0rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-5 {
|
|
|
padding-right: 5rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-10 {
|
|
|
padding-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-15 {
|
|
|
padding-right: 15rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-20 {
|
|
|
padding-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-25 {
|
|
|
padding-right: 25rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-30 {
|
|
|
padding-right: 30rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-35 {
|
|
|
padding-right: 35rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-40 {
|
|
|
padding-right: 40rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-45 {
|
|
|
padding-right: 45rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-50 {
|
|
|
padding-right: 50rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-55 {
|
|
|
padding-right: 55rpx;
|
|
|
}
|
|
|
|
|
|
.padding-right-60 {
|
|
|
padding-right: 60rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础下内边距
|
|
|
起始0rpx 终止60rpx 间隔5rpx一个样式 */
|
|
|
.padding-bottom-0 {
|
|
|
padding-bottom: 0rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-5 {
|
|
|
padding-bottom: 5rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-10 {
|
|
|
padding-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-15 {
|
|
|
padding-bottom: 15rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-20 {
|
|
|
padding-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
|
|
|
.padding-bottom-25 {
|
|
|
padding-bottom: 25rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-30 {
|
|
|
padding-bottom: 30rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-35 {
|
|
|
padding-bottom: 35rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-40 {
|
|
|
padding-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-45 {
|
|
|
padding-bottom: 45rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-50 {
|
|
|
padding-bottom: 50rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-55 {
|
|
|
padding-bottom: 55rpx;
|
|
|
}
|
|
|
|
|
|
.padding-bottom-60 {
|
|
|
padding-bottom: 60rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础左内边距
|
|
|
起始0rpx 终止60rpx 间隔5rpx一个样式 */
|
|
|
|
|
|
.padding-left-0 {
|
|
|
padding-left: 0rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-5 {
|
|
|
padding-left: 5rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-10 {
|
|
|
padding-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-15 {
|
|
|
padding-left: 15rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-20 {
|
|
|
padding-left: 20rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-25 {
|
|
|
padding-left: 25rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-30 {
|
|
|
padding-left: 30rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-35 {
|
|
|
padding-left: 35rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-40 {
|
|
|
padding-left: 40rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-45 {
|
|
|
padding-left: 45rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-50 {
|
|
|
padding-left: 50rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-55 {
|
|
|
padding-left: 55rpx;
|
|
|
}
|
|
|
|
|
|
.padding-left-60 {
|
|
|
padding-left: 60rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础左右内边距
|
|
|
起始0rpx 终止60rpx 间隔5rpx一个样式 */
|
|
|
|
|
|
.padding-lr-0 {
|
|
|
padding-left: 0rpx;
|
|
|
padding-right: 0rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-5 {
|
|
|
padding-left: 5rpx;
|
|
|
padding-right: 5rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-10 {
|
|
|
padding-left: 10rpx;
|
|
|
padding-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-15 {
|
|
|
padding-left: 15rpx;
|
|
|
padding-right: 15rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-20 {
|
|
|
padding-left: 20rpx;
|
|
|
padding-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-25 {
|
|
|
padding-left: 25rpx;
|
|
|
padding-right: 25rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-30 {
|
|
|
padding-left: 30rpx;
|
|
|
padding-right: 30rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-35 {
|
|
|
padding-left: 35rpx;
|
|
|
padding-right: 35rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-40 {
|
|
|
padding-left: 40rpx;
|
|
|
padding-right: 40rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-45 {
|
|
|
padding-left: 45rpx;
|
|
|
padding-right: 45rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-50 {
|
|
|
padding-left: 50rpx;
|
|
|
padding-right: 50rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-55 {
|
|
|
padding-left: 55rpx;
|
|
|
padding-right: 55rpx;
|
|
|
}
|
|
|
|
|
|
.padding-lr-60 {
|
|
|
padding-left: 60rpx;
|
|
|
padding-right: 60rpx;
|
|
|
}
|
|
|
|
|
|
/* 基础上下内边距
|
|
|
起始0rpx 终止60rpx 间隔5rpx一个样式 */
|
|
|
.padding-tb-0 {
|
|
|
padding-top: 0rpx;
|
|
|
padding-bottom: 0rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-5 {
|
|
|
padding-top: 5rpx;
|
|
|
padding-bottom: 5rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-10 {
|
|
|
padding-top: 10rpx;
|
|
|
padding-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-15 {
|
|
|
padding-top: 15rpx;
|
|
|
padding-bottom: 15rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-20 {
|
|
|
padding-top: 20rpx;
|
|
|
padding-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-25 {
|
|
|
padding-top: 25rpx;
|
|
|
padding-bottom: 25rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-30 {
|
|
|
padding-top: 30rpx;
|
|
|
padding-bottom: 30rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-35 {
|
|
|
padding-top: 35rpx;
|
|
|
padding-bottom: 35rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-40 {
|
|
|
padding-top: 40rpx;
|
|
|
padding-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-45 {
|
|
|
padding-top: 45rpx;
|
|
|
padding-bottom: 45rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-50 {
|
|
|
padding-top: 50rpx;
|
|
|
padding-bottom: 50rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-55 {
|
|
|
padding-top: 55rpx;
|
|
|
padding-bottom: 55rpx;
|
|
|
}
|
|
|
|
|
|
.padding-tb-60 {
|
|
|
padding-top: 60rpx;
|
|
|
padding-bottom: 60rpx;
|
|
|
}
|
|
|
|
|
|
/* 常用上边距 */
|
|
|
.padding-top-title-header {
|
|
|
padding-top: var(--headerHeight);
|
|
|
}
|
|
|
|
|
|
.padding-top-title-header-15 {
|
|
|
padding-top: calc(var(--headerHeight) + 15rpx);
|
|
|
}
|
|
|
|
|
|
.padding-top-title-header-20 {
|
|
|
padding-top: calc(var(--headerHeight) + 20rpx);
|
|
|
}
|
|
|
|
|
|
.padding-top-title-header-30 {
|
|
|
padding-top: calc(var(--headerHeight) + 30rpx);
|
|
|
}
|
|
|
|
|
|
.padding-top-status-bar-header {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
padding-top: var(--headerHeight);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
padding-top: calc(var(--status-bar-height) + var(--headerHeight));
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.padding-top-status-bar-header-15 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
padding-top: calc(var(--headerHeight) + 15rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
padding-top: calc(var(--status-bar-height) + var(--headerHeight) + 15rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.padding-top-status-bar-header-20 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
padding-top: calc(var(--headerHeight) + 20rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
padding-top: calc(var(--status-bar-height) + var(--headerHeight) + 20rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
/* APP多一个电量条的高度 118 = 88 + 30 */
|
|
|
.padding-top-status-bar-header-30 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
padding-top: calc(var(--headerHeight) + 30rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
padding-top: calc(var(--status-bar-height) + var(--headerHeight) + 30rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.padding-top-status-bar-header2 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
padding-top: calc(var(--headerHeight) * 2);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
padding-top: calc(var(--status-bar-height) + var(--headerHeight) * 2);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.padding-top-status-bar-header2-15 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
padding-top: calc(var(--headerHeight) * 2 + 15rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
padding-top: calc(var(--status-bar-height) + var(--headerHeight) * 2 + 15rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.padding-top-status-bar-header2-20 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
padding-top: calc(var(--headerHeight) * 2 + 20rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
padding-top: calc(var(--status-bar-height) + var(--headerHeight) * 2 + 20rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
/* APP多一个电量条的高度 118 = 88 + 30 */
|
|
|
.padding-top-status-bar-header2-30 {
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
padding-top: calc(var(--headerHeight) * 2 + 30rpx);
|
|
|
/* #endif */
|
|
|
|
|
|
/* #ifndef MP-WEIXIN */
|
|
|
padding-top: calc(var(--status-bar-height) + var(--headerHeight) * 2 + 30rpx);
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
/* 常用下内边距 */
|
|
|
.padding-bottom-tab-bar-20 {
|
|
|
padding-bottom: calc(var(--window-bottom) + 20rpx);
|
|
|
}
|
|
|
|
|
|
.padding-bottom-tab-bar-footer-20 {
|
|
|
padding-bottom: calc(var(--window-bottom) + var(--footerHeight) + 20rpx);
|
|
|
}
|
|
|
|
|
|
.padding-bottom-safe {
|
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
}
|
|
|
|
|
|
.padding-bottom-safe-20 {
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
|
|
|
}
|
|
|
|
|
|
.padding-bottom-safe-footer {
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + var(--footerHeight));
|
|
|
}
|
|
|
|
|
|
.padding-bottom-safe-footer-20 {
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + var(--footerHeight) + 20rpx);
|
|
|
}
|
|
|
|
|
|
/* 按钮 */
|
|
|
.line-btn {
|
|
|
margin-left: 20rpx;
|
|
|
width: 160rpx;
|
|
|
height: 55rpx;
|
|
|
line-height: 51rpx;
|
|
|
border: 2rpx solid #ccc;
|
|
|
border-radius: 28rpx;
|
|
|
text-align: center;
|
|
|
font-size: 26rpx;
|
|
|
color: #4d4d4d;
|
|
|
}
|
|
|
|
|
|
.full-btn {
|
|
|
margin-left: 20rpx;
|
|
|
width: 160rpx;
|
|
|
height: 55rpx;
|
|
|
line-height: 51rpx;
|
|
|
border: 2rpx solid #2F97FF;
|
|
|
border-radius: 28rpx;
|
|
|
background:#2F97FF;
|
|
|
text-align: center;
|
|
|
font-size: 26rpx;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.text-fe{
|
|
|
color: #fefefe;
|
|
|
}
|
|
|
.text-ff85{
|
|
|
color: #FF8534;
|
|
|
}
|
|
|
.text-909298{
|
|
|
color: #909298;
|
|
|
}
|
|
|
.text-2f9{
|
|
|
color: #2F97FF;
|
|
|
}
|
|
|
.bg-2f9{
|
|
|
background: #2F97FF;
|
|
|
}
|
|
|
.padding-tb-14{
|
|
|
padding-top: 14rpx;
|
|
|
padding-right: 14rpx;
|
|
|
}
|
|
|
.width-50{
|
|
|
width: 50rpx;
|
|
|
}
|
|
|
.margin-bottom-5{
|
|
|
margin-bottom: 5rpx;
|
|
|
}
|
|
|
.padding-left-95{
|
|
|
padding-left: 95rpx;
|
|
|
}
|
|
|
.text-4b8{
|
|
|
color: #4B81B8;
|
|
|
}
|
|
|
.text-208{
|
|
|
color: #2088FF;
|
|
|
}
|
|
|
.border-top-f5{
|
|
|
border-top: 1rpx solid #f5f5f5;
|
|
|
}
|
|
|
.border-bottom-f5{
|
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
|
}
|
|
|
.text-e62{
|
|
|
color: #E62222;
|
|
|
}
|
|
|
.text-fe{
|
|
|
color: #FEFEFE;
|
|
|
}
|
|
|
.bg-f7f8{
|
|
|
background: #F7F8FA;
|
|
|
}
|
|
|
.margin-top-130{
|
|
|
margin-top: 130rpx;
|
|
|
}
|
|
|
.padding-top-100{
|
|
|
padding-top: 100rpx;
|
|
|
}
|
|
|
.border-dd{
|
|
|
border: 1rpx solid #ddd;
|
|
|
}
|
|
|
.dashed-bottom-ff{
|
|
|
border-bottom: 1rpx dashed #fff;
|
|
|
}
|
|
|
.text-e6{
|
|
|
color: #e6e6e6;
|
|
|
}
|
|
|
.bg-e5{
|
|
|
background: #e5e5e5;
|
|
|
} |
