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; } /* 自动换行 */ .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; } .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-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-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; } /* 外边距 */ .m-24{ margin: 24rpx; } .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-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: 46px; } .mb-2{ margin-bottom: 2rpx; } .mb-4{ margin-bottom: 4rpx; } .mb-8{ margin-bottom: 8rpx; } .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%; }