$header-height: 120rpx; $header-top-height: 50rpx; /* 通用flex布局 */ .flex-col { display: flex; flex-direction: column; } .flex-row { display: flex; flex-direction: row; } .flex-wrap { display: flex; flex-wrap: wrap; } .justify-start { display: flex; justify-content: flex-start; } .justify-center { display: flex; justify-content: center; } .justify-end { display: flex; justify-content: flex-end; } .justify-evenly { display: flex; justify-content: space-evenly; } .justify-around { display: flex; justify-content: space-around; } .justify-between { display: flex; justify-content: space-between; } .align-start { display: flex; align-items: flex-start; } .align-center { display: flex; align-items: center; } .align-end { display: flex; align-items: flex-end; } .color-yellow{ color: #F0BC23; } .color-red{ color: #E7000D; } .color-green{ color: #45BA00; } .color-blue{ color: #004098; } /* 允许单词内换行,强制换行 */ .word-break-all { word-wrap: break-word; word-break: break-all; min-width: unset; } /* 仅在单词间隙换行,更适合中文文本 */ .word-break-normal { word-wrap: break-word; word-break: normal; white-space: normal; min-width: unset; }