|
|
@@ -298,6 +298,217 @@
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
|
|
|
+/* ===== 字体大小系统 ===== */
|
|
|
+/* 从20rpx到82rpx的完整字体大小类名 */
|
|
|
+.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-42 { font-size: 42rpx; }
|
|
|
+.fs-44 { font-size: 44rpx; }
|
|
|
+.fs-46 { font-size: 46rpx; }
|
|
|
+.fs-48 { font-size: 48rpx; }
|
|
|
+.fs-50 { font-size: 50rpx; }
|
|
|
+.fs-52 { font-size: 52rpx; }
|
|
|
+.fs-54 { font-size: 54rpx; }
|
|
|
+.fs-56 { font-size: 56rpx; }
|
|
|
+.fs-58 { font-size: 58rpx; }
|
|
|
+.fs-60 { font-size: 60rpx; }
|
|
|
+.fs-62 { font-size: 62rpx; }
|
|
|
+.fs-64 { font-size: 64rpx; }
|
|
|
+.fs-66 { font-size: 66rpx; }
|
|
|
+.fs-68 { font-size: 68rpx; }
|
|
|
+.fs-70 { font-size: 70rpx; }
|
|
|
+.fs-72 { font-size: 72rpx; }
|
|
|
+.fs-74 { font-size: 74rpx; }
|
|
|
+.fs-76 { font-size: 76rpx; }
|
|
|
+.fs-78 { font-size: 78rpx; }
|
|
|
+.fs-80 { font-size: 80rpx; }
|
|
|
+.fs-82 { font-size: 82rpx; }
|
|
|
+
|
|
|
+/* ===== 字重系统 ===== */
|
|
|
+.fw-super { font-weight: 800; }
|
|
|
+.fw-main { font-weight: 600; }
|
|
|
+.fw-normal { font-weight: 400; }
|
|
|
+.fw-minor { font-weight: 300; }
|
|
|
+
|
|
|
+/* ===== 文本处理工具类 ===== */
|
|
|
+/* 行高工具类 */
|
|
|
+.lh-1 { line-height: 1; }
|
|
|
+.lh-1-2 { line-height: 1.2; }
|
|
|
+.lh-1-4 { line-height: 1.4; }
|
|
|
+.lh-1-6 { line-height: 1.6; }
|
|
|
+.lh-1-8 { line-height: 1.8; }
|
|
|
+
|
|
|
+/* 多行文本截断工具类 */
|
|
|
+.line-clamp-1 {
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.line-clamp-2 {
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.line-clamp-3 {
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== Flex布局工具类 ===== */
|
|
|
+/* 对齐类 */
|
|
|
+.justify-start { justify-content: flex-start; }
|
|
|
+.justify-center { justify-content: center; }
|
|
|
+.justify-end { justify-content: flex-end; }
|
|
|
+.justify-between { justify-content: space-between; }
|
|
|
+.justify-around { justify-content: space-around; }
|
|
|
+
|
|
|
+/* 分布类 */
|
|
|
+.items-start { align-items: flex-start; }
|
|
|
+.items-center { align-items: center; }
|
|
|
+.items-end { align-items: flex-end; }
|
|
|
+.items-stretch { align-items: stretch; }
|
|
|
+
|
|
|
+/* 方向类 */
|
|
|
+.flex-row { flex-direction: row; }
|
|
|
+.flex-col { flex-direction: column; }
|
|
|
+.flex-row-reverse { flex-direction: row-reverse; }
|
|
|
+.flex-col-reverse { flex-direction: column-reverse; }
|
|
|
+
|
|
|
+/* 换行类 */
|
|
|
+.flex-wrap { flex-wrap: wrap; }
|
|
|
+.flex-nowrap { flex-wrap: nowrap; }
|
|
|
+.flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
|
|
+
|
|
|
+/* ===== 间距系统 ===== */
|
|
|
+/* 基于rpx的padding工具类 */
|
|
|
+.p-4 { padding: 4rpx; }
|
|
|
+.p-8 { padding: 8rpx; }
|
|
|
+.p-12 { padding: 12rpx; }
|
|
|
+.p-16 { padding: 16rpx; }
|
|
|
+.p-20 { padding: 20rpx; }
|
|
|
+.p-24 { padding: 24rpx; }
|
|
|
+.p-28 { padding: 28rpx; }
|
|
|
+.p-32 { padding: 32rpx; }
|
|
|
+
|
|
|
+/* 方向特定padding */
|
|
|
+.pt-4 { padding-top: 4rpx; }
|
|
|
+.pr-4 { padding-right: 4rpx; }
|
|
|
+.pb-4 { padding-bottom: 4rpx; }
|
|
|
+.pl-4 { padding-left: 4rpx; }
|
|
|
+
|
|
|
+.pt-8 { padding-top: 8rpx; }
|
|
|
+.pr-8 { padding-right: 8rpx; }
|
|
|
+.pb-8 { padding-bottom: 8rpx; }
|
|
|
+.pl-8 { padding-left: 8rpx; }
|
|
|
+
|
|
|
+.pt-12 { padding-top: 12rpx; }
|
|
|
+.pr-12 { padding-right: 12rpx; }
|
|
|
+.pb-12 { padding-bottom: 12rpx; }
|
|
|
+.pl-12 { padding-left: 12rpx; }
|
|
|
+
|
|
|
+.pt-16 { padding-top: 16rpx; }
|
|
|
+.pr-16 { padding-right: 16rpx; }
|
|
|
+.pb-16 { padding-bottom: 16rpx; }
|
|
|
+.pl-16 { padding-left: 16rpx; }
|
|
|
+
|
|
|
+.pt-20 { padding-top: 20rpx; }
|
|
|
+.pr-20 { padding-right: 20rpx; }
|
|
|
+.pb-20 { padding-bottom: 20rpx; }
|
|
|
+.pl-20 { padding-left: 20rpx; }
|
|
|
+
|
|
|
+.pt-24 { padding-top: 24rpx; }
|
|
|
+.pr-24 { padding-right: 24rpx; }
|
|
|
+.pb-24 { padding-bottom: 24rpx; }
|
|
|
+.pl-24 { padding-left: 24rpx; }
|
|
|
+
|
|
|
+.pt-28 { padding-top: 28rpx; }
|
|
|
+.pr-28 { padding-right: 28rpx; }
|
|
|
+.pb-28 { padding-bottom: 28rpx; }
|
|
|
+.pl-28 { padding-left: 28rpx; }
|
|
|
+
|
|
|
+.pt-32 { padding-top: 32rpx; }
|
|
|
+.pr-32 { padding-right: 32rpx; }
|
|
|
+.pb-32 { padding-bottom: 32rpx; }
|
|
|
+.pl-32 { padding-left: 32rpx; }
|
|
|
+
|
|
|
+/* 基于rpx的margin工具类 */
|
|
|
+.m-4 { margin: 4rpx; }
|
|
|
+.m-8 { margin: 8rpx; }
|
|
|
+.m-12 { margin: 12rpx; }
|
|
|
+.m-16 { margin: 16rpx; }
|
|
|
+.m-20 { margin: 20rpx; }
|
|
|
+.m-24 { margin: 24rpx; }
|
|
|
+.m-28 { margin: 28rpx; }
|
|
|
+.m-32 { margin: 32rpx; }
|
|
|
+
|
|
|
+/* 方向特定margin */
|
|
|
+.mt-4 { margin-top: 4rpx; }
|
|
|
+.mr-4 { margin-right: 4rpx; }
|
|
|
+.mb-4 { margin-bottom: 4rpx; }
|
|
|
+.ml-4 { margin-left: 4rpx; }
|
|
|
+
|
|
|
+.mt-8 { margin-top: 8rpx; }
|
|
|
+.mr-8 { margin-right: 8rpx; }
|
|
|
+.mb-8 { margin-bottom: 8rpx; }
|
|
|
+.ml-8 { margin-left: 8rpx; }
|
|
|
+
|
|
|
+.mt-12 { margin-top: 12rpx; }
|
|
|
+.mr-12 { margin-right: 12rpx; }
|
|
|
+.mb-12 { margin-bottom: 12rpx; }
|
|
|
+.ml-12 { margin-left: 12rpx; }
|
|
|
+
|
|
|
+.mt-16 { margin-top: 16rpx; }
|
|
|
+.mr-16 { margin-right: 16rpx; }
|
|
|
+.mb-16 { margin-bottom: 16rpx; }
|
|
|
+.ml-16 { margin-left: 16rpx; }
|
|
|
+
|
|
|
+.mt-20 { margin-top: 20rpx; }
|
|
|
+.mr-20 { margin-right: 20rpx; }
|
|
|
+.mb-20 { margin-bottom: 20rpx; }
|
|
|
+.ml-20 { margin-left: 20rpx; }
|
|
|
+
|
|
|
+.mt-24 { margin-top: 24rpx; }
|
|
|
+.mr-24 { margin-right: 24rpx; }
|
|
|
+.mb-24 { margin-bottom: 24rpx; }
|
|
|
+.ml-24 { margin-left: 24rpx; }
|
|
|
+
|
|
|
+.mt-28 { margin-top: 28rpx; }
|
|
|
+.mr-28 { margin-right: 28rpx; }
|
|
|
+.mb-28 { margin-bottom: 28rpx; }
|
|
|
+.ml-28 { margin-left: 28rpx; }
|
|
|
+
|
|
|
+.mt-32 { margin-top: 32rpx; }
|
|
|
+.mr-32 { margin-right: 32rpx; }
|
|
|
+.mb-32 { margin-bottom: 32rpx; }
|
|
|
+.ml-32 { margin-left: 32rpx; }
|
|
|
+
|
|
|
+/* ===== 边框处理 ===== */
|
|
|
+/* 1px边框处理方案 */
|
|
|
+.border-1 {
|
|
|
+ border-width: 1rpx;
|
|
|
+ border-style: solid;
|
|
|
+}
|
|
|
+
|
|
|
+/* 边框颜色和样式工具类 */
|
|
|
+.border-solid { border-style: solid; }
|
|
|
+.border-dashed { border-style: dashed; }
|
|
|
+.border-dotted { border-style: dotted; }
|
|
|
+
|
|
|
/* ===== 兼容性处理 ===== */
|
|
|
/* 确保与现有Tailwind CSS样式兼容 */
|
|
|
/* 这些类名不会与Tailwind CSS的默认类名冲突 */
|