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-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; } .flex-1 { flex: 1; } .flex-shrink0 { flex-shrink: 0; } /* 字体大小 */ .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 } /* 字体粗细 */ .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-3 { color: #333; } .fc-6 { color: #666; } .fc-9198A2 { color: #9198A2; } .fc-9 { color: #999; } .fc-41ABF5 { color: #41ABF5; } .fc-57CAFF { color: #57CAFF; } .fc-FB3D03 { color: #ff3422; } .fc-ff3939 { color: #ff3939; } .fc-FF7F00 { color: #FF7F00; } .fc-FD5C02 { color: #FD5C02; } .fc-ED301D { color: #ED301D; } .fc-ADADAD { color: #ADADAD; } .fc-65420c { color: #65420c; } .fc-FE9E11 { color: #FE9E11; } /* 背景颜色 */ .bgc-f { background-color: #fff; } .bgc-3 { background-color: #333; } .bgc-9 { background-color: #999; } .bgc-4FB3EF { background-color: #4FB3EF; } .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-F4F5F7 { background-color: #F4F5F7; } .bgc-F2F2F2 { background-color: #F2F2F2; } .bgc-E6E6E6 { background-color: #E6E6E6; } .bgc-F6F6F6 { background-color: #F6F6F6; } .bgc-FB3D03 { background-color: #FB3D03; } .bgc-F5F4F9 { background-color: #F5F4F9; } .bgc-F3F4F6 { background-color: #F3F4F6; } .bgc-D5EDFB { background-color: #D5EDFB; } .b-b-F9F9F9 { border-bottom: 1rpx solid #F9F9F9; } /* 圆角 */ .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-32 { padding: 32rpx; } .p-t-4 { padding-top: 4rpx; } .p-t-10 { padding-top: 10rpx; } .p-t-20 { padding-top: 20rpx; } .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-24 { padding: 0 24rpx; } .plr-32 { padding: 0 32rpx; } .ptp-24 { padding: 24rpx 0; } .p-12-24 { padding: 12rpx 24rpx; } .pl-24 { padding-left: 24rpx; } .pr-24 { padding-right: 24rpx; } /* 外边距 */ .m-24 { margin: 24rpx; } .mt-4 { margin-top: 4rpx; } .mt-5 { margin-top: 5rpx; } .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-12 { margin-right: 12rpx; } .mr-16 { margin-right: 16rpx; } .mr-18 { margin-right: 18rpx; } .mr-20 { margin-right: 20px; } .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-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%; }