body { background-color: #F5F5F5; } view, text { font-size: 24rpx; color: #333; } image { display: block; } /* 隐藏scroll-view 滚动条 */ ::-webkit-scrollbar { display: none; } .iPhone-bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } /* 不换行 */ .view-nowrap { white-space: nowrap; } .z-index-max { position: relative; z-index: 99999; } /* 自动换行 */ .view-word-wrap { white-space: pre-wrap; word-wrap: break-word; } /*超出三行... */ .text-overflow-ellipsis-t { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; white-space: pre-wrap; word-wrap: break-word; } /*超出两行... */ .text-overflow-ellipsis { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap; word-wrap: break-word; } /*超出一行... */ .text-overflow-ellipsis-one { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } /* 内部盒子 */ .box-border-box { box-sizing: border-box; } .flex-common-css { width: 100%; height: 100vh; display: flex; flex-direction: column; } .flex-index-css { width: 100%; height: 100%; display: flex; flex-direction: column; } .flex-direction { display: flex; flex-direction: column; } .display-flex { display: flex; } .flex-justify-space { display: flex; justify-content: space-between; } .flex-justify-around { display: flex; justify-content: space-around; } .flex-justify-center { display: flex; justify-content: center; } .flex-justify-end { display: flex; justify-content: flex-end; } .flex-justify-start { display: flex; justify-content: flex-start; } .align-items-center { display: flex; align-items: center; } .align-items-baseline { display: flex; align-items: baseline; } .align-items-flex-end { display: flex; align-items: flex-end; } .align-items-flex-start { display: flex; align-items: flex-start; } .flex-wrap-wrap { display: flex; flex-wrap: wrap; } .common-view-css { width: 100%; flex: 1; } .scroll-view-css { width: 100%; flex: 1; overflow: auto; } .box-sizing-border { box-sizing: border-box; } .text-align-center { text-align: center; } .text-align-right { text-align: right; } .text-align-left { text-align: left; } .letter-spacing-6 { letter-spacing: 6rpx; } .letter-spacing-3 { letter-spacing: 3rpx; } .flex-1 { flex: 1; } .flex-shrink0 { flex-shrink: 0; } /* 字体大小 */ .fs-18 { font-size: 18rpx; } .fs-20 { font-size: 20rpx; } .fs-22 { font-size: 22rpx; } .fs-24 { font-size: 24rpx; } .fs-26 { font-size: 26rpx; } .fs-28 { font-size: 28rpx; } .fs-30 { font-size: 30rpx; } .fs-32 { font-size: 32rpx; } .fs-34 { font-size: 34rpx; } .fs-36 { font-size: 36rpx; } .fs-38 { font-size: 38rpx; } .fs-40 { font-size: 40rpx; } .fs-44 { font-size: 44rpx; } .fs-48 { font-size: 48rpx; } .fs-64 { font-size: 64rpx; } /* 字体下面横线 */ .text-underline { text-decoration: underline; } /* 字体中间横线 */ .text-line-through { text-decoration: line-through } /* 斜体 */ .fs-i { font-style: italic; } /* 字间距 */ .l-s-2 { letter-spacing: 4rpx; } /* 字体粗细 */ .fw-b { font-weight: bold; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } /* 字体颜色 */ .fc-f { color: #fff; } .fc-0 { color: #000; } .fc-213C45 { color: #213C45; } .fc-3 { color: #333; } .fc-a { color: #aaa; } .fc-6 { color: #666; } .fc-94969A { color: #94969A; } .fc-9198A2 { color: #9198A2; } .fc-9 { color: #999; } .fc-3BB5FE { color: #3BB5FE; } .fc-41ABF5 { color: #41ABF5; } .fc-1089D1 { color: #1089D1; } .fc-57CAFF { color: #57CAFF; } .fc-96ECFB { color: #96ECFB; } .fc-FD5D05 { color: #FD5D05; } .fc-FF6320 { color: #FF6320; } .fc-FB3D03 { color: #ff3422; } .fc-ff3939 { color: #ff3939; } .fc-F93435 { color: #F93435; } .fc-F43D04 { color: #F43D04; } .fc-F75820 { color: #F75820; } .fc-F5531E { color: #F5531E; } .fc-FF7F00 { color: #FF7F00; } .fc-FD5C02 { color: #FD5C02; } .fc-F7663A { color: #F7663A; } .fc-ED301D { color: #ED301D; } .fc-F6531E { color: #F6531E; } .fc-FF5022 { color: #FF5022; } .fc-ADADAD { color: #ADADAD; } .fc-65420c { color: #65420c; } .fc-FE9E11 { color: #FE9E11; } .fc-FCFBF8 { color: #FCFBF8; } /* 背景颜色 */ .bgc-f { background-color: #fff; } .bgc-3 { background-color: #333; } .bgc-9 { background-color: #999; } .bgc-4FB3EF { background-color: #4FB3EF; } .bgc-5CC2FF { background-color: #5CC2FF; } .bgc-41ABF5 { background-color: #41ABF5; } .bgc-E4F3FD { background-color: #E4F3FD; } .bgc-BCEAFF { background-color: #BCEAFF; } .bgc-B3DDFB { background-color: #B3DDFB; } .bgc-ECF7FE { background-color: #ECF7FE; } .bgc-FCE7E2 { background-color: #FCE7E2; } .bgc-F5F5F6 { background-color: #F5F5F6; } .bgc-F4F5F7 { background-color: #F4F5F7; } .bgc-F2F2F2 { background-color: #F2F2F2; } .bgc-E6E6E6 { background-color: #E6E6E6; } .bgc-F6F6F6 { background-color: #F6F6F6; } .bgc-F5811E { background: linear-gradient(-90deg, #F5811E, #F5541E); } .bgc-FF5555 { background: linear-gradient(-90deg, #FF5555, #FF1111); } .bgc-48D3C5 { background: linear-gradient(-90deg, #48D3C5, #26B7A7); } .bgc-4db8ff { background: linear-gradient(-90deg, #4db8ff, #1aa3ff); } .bgc-46D1C2 { background-color: #46D1C2; } .bgc-FD492D { background-color: #FD492D; } .bgc-FF3E5D { background-color: #FF3E5D; } .bgc-EB5127 { background-color: #EB5127; } .bgc-F5811E { background-color: #F5811E; } .bgc-FFD977 { background-color: #FFD977; } .bgc-FDF3EC { background-color: #FDF3EC; } .bgc-F5F4F9 { background-color: #F5F4F9; } .bgc-F3F4F6 { background-color: #F3F4F6; } .bgc-D5EDFB { background-color: #D5EDFB; } .b-b-F9F9F9 { border-bottom: 1rpx solid #F9F9F9; } .b-b-eee { border-bottom: .5rpx solid #eee; } .b-b-999 { border-bottom: 1rpx solid #999; } .b-b-EAEAEC { border-bottom: 1rpx solid #EAEAEC; } .b-r-ccc { border: 1rpx solid #ccc; } /* 圆角 */ .b-rad-5 { border-radius: 5rpx; } .b-rad-12 { border-radius: 12rpx; } .b-rad-16 { border-radius: 16rpx; } .b-rad-20 { border-radius: 20rpx; } .b-rad-200 { border-radius: 200rpx; } .b-rad-50 { border-radius: 50%; } /* 内边距 */ .p-8 { padding: 8rpx; } .p-16 { padding: 16rpx; } .p-20 { padding: 20rpx; } .p-24 { padding: 24rpx; } .p-30 { padding: 30rpx; } .p-32 { padding: 32rpx; } .pr-14 { padding-right: 14rpx; } .pt-48 { padding-top: 48rpx; } .p-t-4 { padding-top: 4rpx; } .p-t-10 { padding-top: 10rpx; } .p-t-20 { padding-top: 20rpx; } .pt-33 { padding-top: 33rpx; } .pt-40 { padding-top: 40rpx; } .p-t-80 { padding-top: 80rpx; } .pb-5 { padding-bottom: 5rpx; } .pb-10 { padding-bottom: 10rpx; } .p-b-20 { padding-bottom: 20rpx; } .pb-36 { padding-bottom: 36rpx; } .plr-12 { padding: 0 12rpx; } .plr-10 { padding: 0 10rpx; } .plr-24 { padding: 0 24rpx; } .p-12-30 { padding: 12rpx 30rpx; } .plr-30 { padding: 0 30rpx; } .plr-32 { padding: 0 32rpx; } .ptb-24 { padding: 24rpx 0; } .ptp-24 { padding: 24rpx 0; } .p-12-24 { padding: 12rpx 24rpx; } .p-28-20-39 { padding: 28rpx 20rpx 39rpx } .p-38-20-24 { padding: 38rpx 20rpx 24rpx; } .pl-15 { padding-left: 15rpx; } .pl-24 { padding-left: 24rpx; } .pl-42 { padding-left: 42rpx; } .pr-24 { padding-right: 24rpx; } /* 外边距 */ .m-24 { margin: 24rpx; } .mt-4 { margin-top: 4rpx; } .mt-5 { margin-top: 5rpx; } .mt-20 { margin-top: 20rpx; } .mt-24 { margin-top: 24rpx; } .ml-2 { margin-left: 2rpx; } .ml-10 { margin-left: 10rpx; } .ml-16 { margin-left: 16rpx; } .ml-40 { margin-left: 40rpx; } .mr-4 { margin-right: 4rpx; } .mr-6 { margin-right: 6rpx; } .mr-8 { margin-right: 8rpx; } .mr-10 { margin-right: 10rpx; } .mr-12 { margin-right: 12rpx; } .mr-14 { margin-right: 14rpx; } .mr-16 { margin-right: 16rpx; } .mr-18 { margin-right: 18rpx; } .mr-20 { margin-right: 20rpx; } .mr-24 { margin-right: 24rpx; } .mr-30 { margin-right: 30rpx; } .mr-36 { margin-right: 36rpx; } .mr-40 { margin-right: 40px; } .mr-46 { margin-right: 46rpx; } .mb-2 { margin-bottom: 2rpx; } .mb-4 { margin-bottom: 4rpx; } .mb-8 { margin-bottom: 8rpx; } .mb-10 { margin-bottom: 10rpx; } .mb-12 { margin-bottom: 12rpx; } .mb-16 { margin-bottom: 16rpx; } .mb-18 { margin-bottom: 18rpx; } .mb-20 { margin-bottom: 20rpx; } .mb-22 { margin-bottom: 22rpx; } .mb-24 { margin-bottom: 24rpx; } .mb-26 { margin-bottom: 26rpx; } .mb-28 { margin-bottom: 28rpx; } .mb-30 { margin-bottom: 30rpx; } .mb-32 { margin-bottom: 32rpx; } .mb-40 { margin-bottom: 40rpx; } .mb-48 { margin-bottom: 48rpx; } .mb-50 { margin-bottom: 50rpx; } .mb-52 { margin-bottom: 52rpx; } .mb-60 { margin-bottom: 60rpx; } .mb-64 { margin-bottom: 64rpx; } .mb-80 { margin-bottom: 80rpx; } /* 宽度 */ .w-100 { width: 100rpx; } .w-200 { width: 200rpx; } .w-10030 { width: 30%; } .b-b-F0 { border-bottom: 1rpx solid #F0F0F0; } .b-b-EFF2F5 { border-bottom: 1rpx solid #EFF2F5; } .b-F5541E { border: 1rpx solid #F5541E; }