common.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. /* 公共样式 */
  2. /* 通用类 */
  3. .text-center {
  4. text-align: center;
  5. }
  6. .text-left {
  7. text-align: left;
  8. }
  9. .text-right {
  10. text-align: right;
  11. }
  12. .flex {
  13. display: flex;
  14. }
  15. .flex-center {
  16. display: flex;
  17. align-items: center;
  18. justify-content: center;
  19. }
  20. .flex-between {
  21. display: flex;
  22. align-items: center;
  23. justify-content: space-between;
  24. }
  25. .flex-column {
  26. display: flex;
  27. flex-direction: column;
  28. }
  29. /* 页面容器 */
  30. .page {
  31. min-height: 100vh;
  32. background-color: #f5f5f5;
  33. }
  34. .page-content {
  35. padding: 16px;
  36. }
  37. /* 安全区域适配 */
  38. .safe-area-bottom {
  39. padding-bottom: constant(safe-area-inset-bottom);
  40. padding-bottom: env(safe-area-inset-bottom);
  41. }
  42. /* 滚动容器 */
  43. .scroll-container {
  44. overflow-y: auto;
  45. -webkit-overflow-scrolling: touch;
  46. }
  47. /* 加载状态 */
  48. .loading {
  49. display: flex;
  50. align-items: center;
  51. justify-content: center;
  52. padding: 20px;
  53. color: #999;
  54. }
  55. /* 空状态 */
  56. .empty {
  57. display: flex;
  58. flex-direction: column;
  59. align-items: center;
  60. justify-content: center;
  61. padding: 40px 20px;
  62. color: #999;
  63. }
  64. .empty-icon {
  65. font-size: 48px;
  66. margin-bottom: 12px;
  67. }
  68. .empty-text {
  69. font-size: 14px;
  70. }