.iPhone-bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .view-word-wrap { white-space: pre-wrap; word-wrap: break-word; } .common-index-box { width: 100%; height: 100vh; display: flex; flex-direction: column; 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-common-x { width: 100%; height: auto; display: flex; align-items: center; } .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; } .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; } .flex1 { flex: 1; } .flex-shrink0 { flex-shrink: 0; } /*超出两行... */ .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; } /*超出一行... */ .text-overflow-ellipsis-one { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } /*不换行*/ .white-space-nowrap { white-space: nowrap; } /*字体大小*/ .sys-size-20 { font-size: 20rpx; } .sys-size-22 { font-size: 22rpx; } .sys-size-24 { font-size: 24rpx; } .sys-size-26 { font-size: 26rpx; } .sys-size-28 { font-size: 28rpx; } .sys-size-30 { font-size: 30rpx; } .sys-size-32 { font-size: 32rpx; } .sys-size-34 { font-size: 34rpx; } .sys-size-36 { font-size: 36rpx; } .sys-size-38 { font-size: 38rpx; } .sys-size-40 { font-size: 40rpx; } .sys-size-44 { font-size: 44rpx; } .sys-size-48 { font-size: 48rpx; } .sys-size-52 { font-size: 52rpx; } .sys-size-60 { font-size: 60rpx; } .sys-size-62 { font-size: 62rpx; } .sys-size-64 { font-size: 64rpx; } /*字体粗细*/ .sys-weight-bold { font-weight: bold; } .sys-weight-600 { font-weight: 600; } .sys-weight-400 { font-weight: 400; } .sys-weight-500 { font-weight: 500; } /*字体颜色*/ .sys-color-9 { color: #999; } .sys-color-f { color: #fff; } .sys-color-9198A2 { color: #9198A2; } .sys-color-F2BA0B { color: #F2BA0B; } .sys-color-FFC186 { color: #FFC186; } .sys-color-FE6915 { color: #FE6915; } .sys-color-FE552E { color: #FE552E; } .sys-color-ED301D { color: #ED301D; } .sys-color-F8E5AF { color: #F8E5AF; } .sys-color-F87A08 { color: #F87A08; } .sys-color-F5D4B5 { color: #F5D4B5; } .sys-color-E7AF01 { color: #E7AF01; } .sys-color-FE9E11 { color: #FE9E11; } .sys-color-FF7B06 { color: #FF7B06; } .sys-color-FEF2F2 { color: #FEF2F2; } .sys-color-195E3F { color: #3169FA; } .sys-color-3489FF { color: #3489FF; } .sys-color-4D72FA { color: #4D72FA; } .sys-color-1B87EC { color: #1B87EC; } .sys-color-449470 { color: #3169FA !important; } .sys-color-0D4486 { color: #0D4486; } .sys-color-B3D0FE { color: #B3D0FE; } .sys-color-3 { color: #333; } .sys-color-8 { color: #888; } .sys-color-9 { color: #999; } .sys-color-6 { color: #666; } .sys-color-0 { color: #000; } .sys-color-AD { color: #ADADAD; } .sys-color-888B9B { color: #888B9B; } .sys-color-C1C5CC { color: #C1C5CC; } .sys-color-F2F3F6 { color: #F2F3F6; } .sys-color-B6B3B3 { color: #B6B3B3; } .sys-color-77818D { color: #77818D; } .sys-color-888B9B { color: #888B9B; } .sys-color-F2994A { color: #F2994A; } .sys-color-EB5757 { color: #EB5757; } .sys-color-EB2612 { color: #EB2612; } .sys-color-FF3333 { color: #FF3333; } .sys-color-FF7A02 { color: #FF7A02; } .sys-color-F7475C { color: #F7475C; } .sys-color-2F80ED { color: #2F80ED; } .sys-color-4FAA81 { color: #3169FA; } .sys-color-007AFF { color: #007AFF; } .sys-color-2680EB { color: #2680EB; } .sys-color-547BFA { color: #547BFA; } .sys-color-FF7D00 { color: #FF7D00; } .sys-color-27AE60 { color: #27AE60; } .sys-color-16BB5D { color: #16BB5D; } .sys-color-424F89 { color: #424F89; } .sys-color-F2BA0B { color: #F2BA0B; } /*背景颜色*/ .sys-background-f { background-color: #fff; } .sys-background-E3F0FC { background-color: #E3F0FC; } .sys-background-ECECEC { background-color: #ECECEC; } .sys-background-E3F6EB { background-color: #E3F6EB; } .sys-background-gray-f { background-color: #fff; } .sys-background-black { background-color: #141414; } .sys-background-3 { background-color: #333; } .sys-background-6 { background-color: #666; } .sys-background-9 { background-color: #999999; } .sys-background-rgba-3 { background-color: rgba(51, 51, 51, 0.60); } .sys-background-gray-f6F7FB { background-color: #f6f7f8; } .bgc-F5F5F5{ background-color: #F5F5F5; } .sys-background-F6F7FB { background-color: #F6F7FB; } .sys-background-f6 { background-color: #F6F6F6; } .sys-background-F2F3F3 { background-color: #F2F3F3; } .sys-background-F2FFFA { background: #F2FFFA; } .sys-background-FFEBE9 { background: #FFEBE9; } .sys-background-F5F4F9 { background: #F5F4F9; } .bgc-1778FD { background-color: #1778FD; } .bgc-E2EEFF{ background-color: #E2EEFF; } .sys-background-CDD0D5 { background-color: #CDD0D5; } .sys-background-F7F8FC { background-color: #F7F8FC; } .sys-background-E0E0E0 { background-color: #E0E0E0; } .sys-background-CCCCCC { background: #CCCCCC; } .sys-background-F5F5F5 { background-color: #F5F5F5; } .sys-background-rgba-c { background: rgba(204, 204, 204, 0.2); } .sys-background-F2F3F5 { background-color: #F2F3F5; } .sys-background-F1F1F1 { background-color: #F1F1F1; } .sys-background-FAF9FD { background-color: #FAF9FD; } .sys-background-FAE39D { background-color: #FAE39D; } .sys-background-FFF7E8 { background-color: #FFF7E8; } .sys-background-F8E5AF { background-color: #F8E5AF; } .sys-background-FCF8F2 { background-color: #FCF8F2; } .sys-background-F8F8F8 { background-color: #F8F8F8; } .sys-background-FFC186 { background-color: #FFC186; } .sys-background-F2BA0B { background-color: #F2BA0B; } .sys-background-FEF2F2 { background-color: #FEF2F2; } .sys-background-E7AF01 { background-color: #E7AF01; } .sys-background-FF7A02 { background: #FF7A02; } .sys-background-2EBD87 { background-color: #2EBD87; } .sys-background-27AE60 { background-color: #27AE60; } .sys-background-BEF7BA { background-color: #BEF7BA; } .sys-background-16BB5D { background-color: #16BB5D; } .sys-background-rgba-27AE60 { background: rgba(39, 174, 96, 0.2); } .sys-background-2680EB { background: #2680EB; } .sys-background-3489FF { background: #3489FF; } .sys-background-1B87EC { background: #1B87EC; } .sys-background-EAF2FD { background: #EAF2FD; } .sys-background-F7475C { background-color: #F7475C; } .sys-background-FFF2F5 { background-color: #FFF2F5; } .sys-background-FFD529 { background-color: #FFD529; } .sys-background-FFD5297 { background-color: rgba(255, 213, 41, 0.7); } .sys-background-gradient-F { background: linear-gradient(180deg, #FFFFFF 10vh, #F2F2F2 20vh); } .sys-background-gradient-2D84D4 { background: linear-gradient(308deg, #2D84D4 0%, #49A1F1 100%); } .sys-background-gradient-059466 { background: linear-gradient(308deg, #059466 0%, #03B67B 100%); } .sys-background-gradient-D79B01 { background: linear-gradient(308deg, #D79B01 0%, #EEB609 100%); } .sys-background-gradient-60C5FF { background: linear-gradient(269deg, #2D9CDB 0%, #60C5FF 100%); } .sys-background-gradient-00908C { background: linear-gradient(308deg, #00908C 0%, #06AAA5 100%); } .sys-background-gradient-FF3F10 { background: linear-gradient(227deg, #FF3F10 0%, #FF7915 100%); } .sys-background-E7F6FF { background-color: #E7F6FF; } /* 边框颜色 */ .border-449470 { border: 1rpx solid #3169FA; } .border-9 { border: 1rpx solid #999999; } .border-3489FF { border: 1rpx solid #3489FF; } .border-2680EB { border: 1rpx solid #2680EB; } .border-F2BA0B { border: 1rpx solid #F2BA0B; } .border-FF7B06 { border: 1rpx solid #FF7B06; } .border-E4E4EB { border: 1rpx solid #E4E4EB; } .border-C { border: 2rpx solid #CCCCCC; } .border-e { border: 2rpx solid #eee; } .border-3 { border: 2rpx solid #333; } .border-EDEEF0 { border: 2rpx solid #EDEEF0; } .border-bottom-3489FF { border-bottom: 1rpx solid #3489FF; } .border-bottom-449470 { border-bottom: 1rpx solid #3169FA; } .borde-bottomr-2680EB { border-bottom: 1rpx solid #2680EB; } .border-bottom-e { border-bottom: 1rpx solid #EEEEEE; } .border-bottom-E6E7E9 { border-bottom: 1rpx solid #E6E7E9; } .border-FF7A02 { border: 1rpx solid #FF7A02; } .border-f { border: 1rpx solid #fff; } /* 圆角 */ .sys-radius-200 { border-radius: 200rpx; } .sys-radius-60 { border-radius: 60rpx; } .sys-radius-24 { border-radius: 24rpx; } .sys-radius-20 { border-radius: 20rpx; } .sys-radius-12 { border-radius: 12rpx; } .sys-radius-top-right-20 { border-radius: 20rpx 20rpx 0 0; } .sys-radius-b-l-20 { border-radius: 0 0 20rpx 20rpx; } .sys-radius-top-right-30 { border-radius: 30rpx 30rpx 0 0; } .sys-radius-top-right-40 { border-radius: 40rpx 40rpx 0 0; } .sys-radius-16 { border-radius: 16rpx; } .sys-radius-12 { border-radius: 12rpx; } .sys-radius-10 { border-radius: 10rpx; } .sys-radius-8 { border-radius: 8rpx; } .sys-radius-5 { border-radius: 5rpx; } .sys-radius-4 { border-radius: 4rpx; } .sys-radius-2 { border-radius: 2rpx; } .sys-radius-50 { border-radius: 50%; } .line-height-28 { line-height: 28rpx; } .line-height-40 { line-height: 40rpx; } /*行高*/ .line-height-64 { height: 64rpx; line-height: 64rpx; } /*空白页icons*/ .blank-class { width: 200rpx; height: 200rpx; /* padding: 132rpx 0 0 0; */ } /* 外边距 */ .mt-4 { margin-top: 4rpx; } .mt-8 { margin-top: 8rpx; } .mt-12 { margin-top: 12rpx; } .mt-16 { margin-top: 16rpx; } .mt-20 { margin-top: 20rpx; } .mt-28 { margin-top: 28rpx; } .mt-40 { margin-top: 40rpx; } .mb-13 { margin-bottom: 13rpx; } .mb-18 { margin-bottom: 18rpx; } .mb-24 { margin-bottom: 24rpx; } .mb-26 { margin-bottom: 26rpx; } .mb-28 { margin-bottom: 28rpx; } .mb-32 { margin-bottom: 32rpx; } .mb-38 { margin-bottom: 38rpx; } .mb-40 { margin-bottom: 40rpx; } .mb-64 { margin-bottom: 64rpx; } .ml-10 { margin-left: 10rpx; } .ml-16 { margin-left: 16rpx; } .ml-20 { margin-left: 20rpx; } .ml-22 { margin-left: 22rpx; } .ml-120 { margin-left: 120rpx; } .ml-24 { margin-left: 24rpx; } .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-32 { margin-right: 32rpx; } .mr-30 { margin-right: 30rpx; } .mr-64 { margin-right: 64rpx; } .mr-68 { margin-right: 68rpx; } .mr-40 { margin-right: 40rpx; } .mr-50 { margin-right: 50rpx; } .mr-74 { margin-right: 74rpx; } .mr-82 { margin-right: 82rpx; } .mr-90 { margin-right: 90rpx; } .mb-200 { margin-bottom: 200rpx; } .mb-108 { margin-bottom: 108rpx; } .mb-80 { margin-bottom: 80rpx; } .mb-56 { margin-bottom: 56rpx; } .mb-34 { margin-bottom: 34rpx; } .mb-32 { margin-bottom: 32rpx; } .mb-30 { margin-bottom: 30rpx; } .mb-24 { margin-bottom: 24rpx; } .mb-22 { margin-bottom: 22rpx; } .mb-20 { margin-bottom: 20rpx; } .mb-18 { margin-bottom: 18rpx; } .mb-16 { margin-bottom: 16rpx; } .mb-12 { margin-bottom: 12rpx; } .mb-10 { margin-bottom: 10rpx; } .mb-8 { margin-bottom: 8rpx; } .mb-6 { margin-bottom: 6rpx; } .mb-4 { margin-bottom: 4rpx; } .pt-10 { padding-top: 10rpx; } .pt-30 { padding-top: 30rpx; } .pb-30 { padding-bottom: 30rpx; } .pb-32 { padding-bottom: 32rpx; } .pb-24 { padding-bottom: 24rpx; } .p-32 { padding: 32rpx; } .pr-24 { padding-right: 24rpx; } .pl-32 { padding-left: 32rpx; } .pl-24 { padding-left: 24rpx; } .pl-20 { padding-left: 20rpx; } .pd-40-0-60-0 { padding: 40rpx 0 60rpx 0; } .pd-0-32-0-32 { padding: 0 32rpx; } .pd-48-0-50-0 { padding: 48rpx 0 50rpx 0; } .pd-32 { padding: 32rpx; } .p-20 { padding: 20rpx } .p-24 { padding: 24rpx; } .p-24-0 { padding: 24rpx 0; } .opacity7 { opacity: 0.7 } .w-32 { width: 32%; } .plr-30 { padding: 0 30rpx; } .plr-24 { padding: 0 24rpx; }