/* 字体大小============================================ */
.fz-10 { font-size: 10px; }
.fz-12 { font-size: 12px; }
.fz-14 { font-size: 14px; }
.fz-16 { font-size: 16px; }
.fz-18 { font-size: 18px; }
.fz-20 { font-size: 20px; }
.fz-22 { font-size: 22px; }
.fz-24 { font-size: 24px; }
.fz-26 { font-size: 26px; }
.fz-28 { font-size: 28px; }
.fz-30 { font-size: 30px; }
.fz-32 { font-size: 32px; }

/* 字体加粗 ============================================= */
.fw-700 { font-weight: 700; }
.fw-600 { font-weight: 600; }
.fw-500 { font-weight: 500; }
.fw-400 { font-weight: 400; }
.fw-300 { font-weight: 300; }
.fw-bold { font-weight: bold; }
.fw-normal { font-weight: normal; }

/* 边距============================================ */
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }

.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mb-28 { margin-bottom: 28px; }
.mb-30 { margin-bottom: 30px; }
.mb-32 { margin-bottom: 32px; }

.p-6 { padding: 6px; }
.p-8 { padding: 8px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }
.p-14 { padding: 14px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }

.pt-6 { padding-top: 6px; }
.pt-8 { padding-top: 8px; }
.pt-10 { padding-top: 10px; }
.pt-12 { padding-top: 12px; }
.pt-14 { padding-top: 14px; }
.pt-16 { padding-top: 16px; }
.pt-20 { padding-top: 20px; }

.pb-6 { padding-bottom: 6px; }
.pb-8 { padding-bottom: 8px; }
.pb-10 { padding-bottom: 10px; }
.pb-12 { padding-bottom: 12px; }
.pb-14 { padding-bottom: 14px; }
.pb-16 { padding-bottom: 16px; }
.pb-20 { padding-bottom: 20px; }

.pl-6 { padding-left: 6px; }
.pl-8 { padding-left: 8px; }
.pl-10 { padding-left: 10px; }
.pl-12 { padding-left: 12px; }
.pl-14 { padding-left: 14px; }
.pl-16 { padding-left: 16px; }
.pl-20 { padding-left: 20px; }

.pr-6 { padding-right: 6px; }
.pr-8 { padding-right: 8px; }
.pr-10 { padding-right: 10px; }
.pr-12 { padding-right: 12px; }
.pr-14 { padding-right: 14px; }
.pr-16 { padding-right: 16px; }
.pr-20 { padding-right: 20px; }

/* flex 布局===========================================*/
.flex { display: flex; } /* flex 布局 */
.flex-1 { flex: 1; } /* 占满剩余空间 */
.flex-col { flex-direction: column; } /* 垂直方向布局 */
.flex-row { flex-direction: row; } /* 水平方向布局 */
.flex-wrap { flex-wrap: wrap; } /* 换行 */
.flex-nowrap { flex-wrap: nowrap; } /* 不换行 */
.flex-justify-between { justify-content: space-between; } /* 两端对齐 */
.flex-justify-center { justify-content: center;} /* 居中对齐 */
.flex-justify-end { justify-content: flex-end; } /* 靠右对齐 */
.flex-align-center { align-items: center; } /* 居中对齐 */
.flex-align-end { align-items: flex-end; } /* 靠右对齐 */
.flex-align-start { align-items: flex-start; } /* 靠左对齐 */

gap-4 { gap: 4px; }
gap-6 { gap: 6px; }
gap-8 { gap: 8px; }
gap-10 { gap: 10px; }
gap-12 { gap: 12px; }
gap-14 { gap: 14px; }
gap-16 { gap: 16px; }
gap-18 { gap: 18px; }
gap-20 { gap: 20px; }
gap-24 { gap: 24px; }
gap-26 { gap: 26px; }
gap-28 { gap: 28px; }
gap-30 { gap: 30px; }
gap-32 { gap: 32px; }

/* 颜色============================================ */
.primColor { color: #007aff; }
.sussessColor { color: #4cd964; }
.warnColor { color: #f0ad4e; }
.errorColor { color: #dd524d; }
/* 设置灰色文字颜色(弱化颜色) */
.weakColor { color: #8b8686; } 
/* 白色背景 */
.whiteBg { background-color: #fff; }