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-48{ font-size: 48rpx; } /* 字体下面横线 */ .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-9{ color: #999; } .fc-41ABF5{ color: #41ABF5; } .fc-FB3D03{ color: #FB3D03; } .fc-FF7F00{ color: #FF7F00; } .fc-41ABF5{ color: #41ABF5; } /* 背景颜色 */ .bgc-f{ background-color: #fff; } .bgc-3{ background-color: #333; } .bgc-9{ background-color: #999; } .bgc-41ABF5{ background-color: #41ABF5; } .bgc-FCE7E2{ background-color: #FCE7E2; } .bgc-E6E6E6{ background-color: #E6E6E6; } /* 圆角 */ .b-rad-20{ border-radius: 20rpx; } /* 内边距 */ .p-8{ padding: 8rpx; } .p-24{ padding: 24rpx; } .p-t-10 { padding-top: 10rpx; } .p-b-20 { padding-bottom: 20rpx; } .plr-12{ padding: 0 12rpx; } .plr-24{ padding: 0 24rpx; } /* 外边距 */ .m-24{ margin: 24rpx; } .ml-10{ margin-left: 10rpx; } .mr-8{ margin-right: 8rpx; } .mr-12{ margin-right: 12rpx; } .mr-24{ margin-right: 24rpx; } .mb-4{ margin-bottom: 4rpx; } .mb-8{ margin-bottom: 8rpx; } .mb-12{ margin-bottom: 12rpx; } .mb-18{ margin-bottom: 18rpx; } .mb-20{ margin-bottom: 20rpx; } .mb-22{ margin-bottom: 22rpx; } .mb-24{ margin-bottom: 24rpx; } .mb-32{ margin-bottom: 32rpx; } .mb-64{ margin-bottom: 64rpx; } /* 宽度 */ .w-100{ width: 100rpx; } .w-200{ width: 200rpx; } .w-10030{ width: 30%; }