order.css 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. body {
  2. background-color: #F5F6FA;
  3. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  4. }
  5. .nav-bar {
  6. position: fixed;
  7. top: 0;
  8. left: 0;
  9. width: 100%;
  10. height: 2.75rem;
  11. padding-top: var(--status-bar-height);
  12. background-color: #fff;
  13. display: flex;
  14. align-items: center;
  15. justify-content: space-between;
  16. padding: 0 0.9375rem;
  17. box-sizing: border-box;
  18. z-index: 100;
  19. }
  20. .nav-placeholder {
  21. height: calc(2.75rem + var(--status-bar-height));
  22. }
  23. .back-icon {
  24. width: 1.25rem;
  25. height: 1.25rem;
  26. }
  27. .nav-title {
  28. font-size: 1.0625rem;
  29. font-weight: bold;
  30. color: #333;
  31. }
  32. .nav-right { width: 1.25rem;
  33. }
  34. .msg-group {
  35. padding: 0.625rem 0.9375rem;
  36. }
  37. .date-label {
  38. text-align: center;
  39. font-size: 0.75rem;
  40. color: #ccc;
  41. margin: 0.625rem 0;
  42. }
  43. .msg-card {
  44. background-color: #fff;
  45. border-radius: 0.5rem;
  46. padding: 0.9375rem;
  47. margin-bottom: 0.625rem;
  48. box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.02);
  49. }
  50. .card-header {
  51. display: flex;
  52. align-items: center;
  53. margin-bottom: 0.5rem;
  54. }
  55. .card-title {
  56. font-size: 0.875rem;
  57. font-weight: bold;
  58. color: #333;
  59. }
  60. .red-dot {
  61. width: 0.375rem;
  62. height: 0.375rem;
  63. background-color: #FF3B30;
  64. border-radius: 50%;
  65. margin-left: 0.3125rem;
  66. }
  67. .card-body {
  68. margin-bottom: 0.75rem;
  69. padding-bottom: 0.75rem;
  70. border-bottom: 0.03125rem solid #f5f5f5;
  71. }
  72. .msg-text {
  73. font-size: 0.8125rem;
  74. color: #666;
  75. line-height: 1.5;
  76. }
  77. .card-footer {
  78. display: flex;
  79. justify-content: space-between;
  80. align-items: center;
  81. }
  82. .order-id {
  83. font-size: 0.75rem;
  84. color: #999;
  85. }
  86. .arrow-icon {
  87. width: 0.75rem;
  88. height: 0.75rem;
  89. opacity: 0.3;
  90. }