detail.wxss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. .data-v-6b23c96c ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent;
  2. }
  3. .detail-page-container.data-v-6b23c96c { width: 100vw; height: 100vh; background: #f8fbfd; display: flex; flex-direction: column; overflow: hidden; position: relative;
  4. }
  5. .white-nav-section.data-v-6b23c96c { background: #fff; width: 100%; flex-shrink: 0;
  6. }
  7. .custom-nav-bar.data-v-6b23c96c { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 30rpx;
  8. }
  9. .back-icon.data-v-6b23c96c { width: 60rpx; height: 44px; display: flex; align-items: center;
  10. }
  11. .arrow-left.data-v-6b23c96c { width: 20rpx; height: 20rpx; border-left: 4rpx solid #333; border-bottom: 4rpx solid #333; transform: rotate(45deg); margin-left: 10rpx;
  12. }
  13. .nav-title.data-v-6b23c96c { font-size: 34rpx; font-weight: bold; color: #1a1a1a;
  14. }
  15. .placeholder-right.data-v-6b23c96c { width: 60rpx;
  16. }
  17. .status-banner-container.data-v-6b23c96c { color: #fff; flex-shrink: 0;
  18. }
  19. .status-banner-container.pending.data-v-6b23c96c { background: linear-gradient(135deg, #C1001C 0%, #FF4D4F 100%);
  20. }
  21. .status-banner-container.process.data-v-6b23c96c { background: linear-gradient(135deg, #FF6A00 0%, #EE0979 100%);
  22. }
  23. .status-banner-container.making.data-v-6b23c96c { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  24. }
  25. .status-banner-container.finish.data-v-6b23c96c { background: linear-gradient(135deg, #2af598 0%, #009efd 100%);
  26. }
  27. .status-banner-container.expired.data-v-6b23c96c { background: linear-gradient(135deg, #868f96 0%, #596164 100%);
  28. }
  29. /* 状态横幅内容 */
  30. .status-banner-content.data-v-6b23c96c { padding: 40rpx; padding-bottom: 60rpx; display: flex; justify-content: space-between; align-items: center;
  31. }
  32. .header-main.data-v-6b23c96c { flex: 1;
  33. }
  34. .status-title.data-v-6b23c96c { font-size: 48rpx; font-weight: bold; display: block; margin-bottom: 12rpx;
  35. }
  36. .status-sub.data-v-6b23c96c { font-size: 26rpx; opacity: 0.9;
  37. }
  38. .status-visual-icon.data-v-6b23c96c { width: 60rpx; height: 60rpx; border: 4rpx solid rgba(255,255,255,0.3); border-radius: 50%; opacity: 0.6;
  39. }
  40. /* 修正:移除负边距,并明确滚动方向 */
  41. .main-content-scroll.data-v-6b23c96c { width: 100%; flex: 1;
  42. }
  43. .detail-inner-box.data-v-6b23c96c { padding: 30rpx; padding-top: 10rpx;
  44. }
  45. .data-group-card.data-v-6b23c96c { background: #fff; border-radius: 30rpx; padding: 40rpx; margin-bottom: 30rpx; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.02);
  46. }
  47. /* 第一张卡片增加顶部间隔(红框1优化点) */
  48. .first-card.data-v-6b23c96c { margin-top: 20rpx;
  49. }
  50. .card-head.data-v-6b23c96c { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; border-left: 8rpx solid #C1001C; padding-left: 20rpx;
  51. }
  52. .line-split.data-v-6b23c96c { height: 1rpx; background: #f5f5f5; margin: 24rpx 0;
  53. }
  54. .data-item.data-v-6b23c96c { display: flex; justify-content: space-between; margin-bottom: 24rpx; font-size: 28rpx; align-items: center;
  55. }
  56. .l.data-v-6b23c96c { color: #999;
  57. }
  58. .v.data-v-6b23c96c { color: #333; font-weight: 500;
  59. }
  60. .v.bold.data-v-6b23c96c { font-weight: bold; font-size: 30rpx;
  61. }
  62. .v.erp-no.data-v-6b23c96c { color: #C1001C; font-weight: bold;
  63. }
  64. .v.highlight.data-v-6b23c96c { color: #ff3b30; font-weight: bold; font-size: 34rpx;
  65. }
  66. .list-bottom-placeholder.data-v-6b23c96c { height: 260rpx;
  67. }
  68. .detail-action-bar-fixed.data-v-6b23c96c {
  69. position: fixed;
  70. bottom: 0;
  71. left: 0;
  72. right: 0;
  73. background: #fff;
  74. padding: 30rpx 40rpx;
  75. box-shadow: 0 -10rpx 40rpx rgba(0,0,0,0.04);
  76. z-index: 999;
  77. flex-shrink: 0;
  78. }
  79. .action-btn-wrap.data-v-6b23c96c { display: flex; gap: 24rpx;
  80. }
  81. .action-btn.data-v-6b23c96c { flex: 1; height: 96rpx; border-radius: 48rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: bold;
  82. }
  83. .action-btn.primary.data-v-6b23c96c { background: #C1001C; color: #fff; border: none;
  84. }
  85. .action-btn.cancel.data-v-6b23c96c { background: #fff1f0; color: #ff3b30; border: 1rpx solid #ffccc7; font-weight: normal;
  86. }
  87. .safe-area-bottom-support.data-v-6b23c96c {
  88. height: constant(safe-area-inset-bottom);
  89. height: env(safe-area-inset-bottom);
  90. }