/* 组件库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; }