/* 布局 */ .flex { display: -webkit-flex; display: flex; } .flex-wrap { flex-wrap: wrap; -webkit-flex-wrap: wrap; } .flex-direction-column { -webkit-flex-direction: column; flex-direction: column; } .flex-1 { -webkit-flex: 1; flex: 1; } .flex-justify-center { -webkit-justify-content: center; justify-content: center; } .flex-justify-end { -webkit-justify-content: flex-end; justify-content: flex-end; } .flex-justify-spacearound { -webkit-justify-content: space-around; justify-content: space-around; } .flex-justify-spacebetween { -webkit-justify-content: space-between; justify-content: space-between; } .flex-justify-start { -webkit-justify-content: flex-start; justify-content: flex-start; } .flex-alignitem-center { -webkit-align-items: center; align-items: center; } .flex-alignitem-start { -webkit-align-items: flex-start; align-items: flex-start; } .flex-alignitem-end { -webkit-align-items: flex-end; align-items: flex-end; } /* position */ .rel { position: relative; } .abs { position: absolute; } /* 1行超出截断 */ .line1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 2行超出截断 */ .line2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 3行超出截断 */ .line3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* 按钮 */ button::after { border: none; } .btn { width: 100%; text-align: center; } .btn.middle { height: 88rpx; line-height: 88rpx; font-size: 32rpx; border-radius: 44rpx; } .btn.small { height: 60rpx; line-height: 60rpx; border-radius: 30rpx; font-size: 32rpx; } .btn.primary { color: #fff; background-color: #397DF2; box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(57, 125, 242, 0.35); } .btn.ghost { border: 2rpx solid #397DF2; color: #397DF2; } .btn.blue { color: #397DF2; background-color: rgba(57, 125, 242, 0.5); } .btn.gray { color: #fff; background-color: #CCCCCC; } /* 字体大小 */ .font-24 { font-size: 24rpx; } .font-26 { font-size: 26rpx; } .font-28 { font-size: 28rpx; } .font-30 { font-size: 30rpx; } .font-32 { font-size: 32rpx; } .font-34 { font-size: 34rpx; } .font-36 { font-size: 36rpx; } .font-38 { font-size: 38rpx; } .font-40 { font-size: 40rpx; } .font-42 { font-size: 42rpx; } .font-44 { font-size: 44rpx; } .font-46 { font-size: 44rpx; } .font-48 { font-size: 48rpx; } /* 字体对齐 */ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } /* 字体加粗 */ .font-bold { font-weight: bold; } /* 背景 */ .bg-primary { background-color: #4186ff; } /* 文字颜色 */ .color-primary { color: #333; } .color-gray6 { color: #666; } .color-gray9 { color: #999; } .color-grayc { color: #ccc; } .color-white { color: #fff; } .color-emphasize { color: #397DF2; } /* 通用蓝色阴影边框 */ .box-shadow { box-shadow: 0 4rpx 8rpx 0 rgba(57, 125, 242, 0.35); } .box-border { box-sizing: border-box; } /* padding */ .p-10 { padding: 10rpx; } .pl-10 { padding-left: 10rpx; } .pr-10 { padding-right: 10rpx; } .pt-10 { padding-top: 10rpx; } .pb-10 { padding-bottom: 10rpx; } .p-20 { padding: 20rpx; } .pl-20 { padding-left: 20rpx; } .pr-20 { padding-right: 20rpx; } .pt-20 { padding-top: 20rpx; } .pb-20 { padding-bottom: 20rpx; } .p-30 { padding: 30rpx; } .pl-30 { padding-left: 30rpx; } .pr-30 { padding-right: 30rpx; } .pt-30 { padding-top: 30rpx; } .pb-30 { padding-bottom: 30rpx; } /* margin */ .m-10 { margin: 10rpx; } .ml-10 { margin-left: 10rpx; } .mr-10 { margin-right: 10rpx; } .mt-10 { margin-top: 10rpx; } .mb-10 { margin-bottom: 10rpx; } .m-20 { margin: 20rpx; } .ml-20 { margin-left: 20rpx; } .mr-20 { margin-right: 20rpx; } .mt-20 { margin-top: 20rpx; } .mb-20 { margin-bottom: 20rpx; } .m-30 { margin: 30rpx; } .ml-30 { margin-left: 30rpx; } .mr-30 { margin-right: 30rpx; } .mt-30 { margin-top: 30rpx; } .mb-30 { margin-bottom: 30rpx; }