/* 公共样式 */ /* 通用类 */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-column { display: flex; flex-direction: column; } /* 页面容器 */ .page { min-height: 100vh; background-color: #f5f5f5; } .page-content { padding: 16px; } /* 安全区域适配 */ .safe-area-bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } /* 滚动容器 */ .scroll-container { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 加载状态 */ .loading { display: flex; align-items: center; justify-content: center; padding: 20px; color: #999; } /* 空状态 */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: #999; } .empty-icon { font-size: 48px; margin-bottom: 12px; } .empty-text { font-size: 14px; }