business.scss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. /* 业务通用样式 - 列表卡片 (项目列表、待办列表等) */
  2. .common-list-card {
  3. background-color: #fff;
  4. border-radius: 16rpx;
  5. padding: 30rpx;
  6. margin-bottom: 24rpx;
  7. box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
  8. position: relative;
  9. overflow: hidden;
  10. &::before {
  11. content: '';
  12. position: absolute;
  13. left: 0;
  14. top: 0;
  15. width: 6rpx;
  16. height: 100%;
  17. background-color: #1c9bfd;
  18. }
  19. .card-header {
  20. display: flex;
  21. justify-content: space-between;
  22. align-items: flex-start;
  23. margin-bottom: 24rpx;
  24. padding-bottom: 20rpx;
  25. border-bottom: 2rpx dashed #eee;
  26. .title {
  27. font-size: 32rpx;
  28. font-weight: bold;
  29. color: #343A3F;
  30. flex: 1;
  31. margin-right: 20rpx;
  32. line-height: 1.4;
  33. overflow: hidden;
  34. text-overflow: ellipsis;
  35. display: -webkit-box;
  36. -webkit-line-clamp: 2;
  37. -webkit-box-orient: vertical;
  38. line-clamp: 2;
  39. white-space: normal;
  40. }
  41. .status-tag {
  42. font-size: 24rpx;
  43. padding: 6rpx 16rpx;
  44. border-radius: 8rpx;
  45. white-space: nowrap;
  46. }
  47. }
  48. .card-body {
  49. .info-item {
  50. display: flex;
  51. padding: 16rpx 0;
  52. border-bottom: 2rpx dashed #f5f5f5;
  53. font-size: 28rpx;
  54. line-height: 1.5;
  55. &:last-child { border-bottom: none; }
  56. .label { color: #343A3F; width: 180rpx; flex-shrink: 0; }
  57. .value { color: #585858; flex: 1; text-align: right; word-break: break-all; }
  58. .amount { color: #ff4d4f; font-weight: bold; font-family: din; font-size: 32rpx; }
  59. }
  60. }
  61. .card-footer {
  62. margin-top: 20rpx;
  63. padding-top: 20rpx;
  64. border-top: 2rpx solid #f5f5f5;
  65. display: flex;
  66. justify-content: flex-end;
  67. }
  68. }
  69. /* 业务通用样式 - 详情页分块卡片 */
  70. .common-section-card {
  71. background-color: #fff;
  72. border-radius: 20rpx;
  73. padding: 30rpx;
  74. margin-bottom: 24rpx;
  75. box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
  76. .section-title {
  77. font-size: 32rpx;
  78. font-weight: bold;
  79. color: #1a1a1a;
  80. margin-bottom: 24rpx;
  81. padding-left: 20rpx;
  82. position: relative;
  83. &::before {
  84. content: '';
  85. position: absolute;
  86. left: 0;
  87. top: 50%;
  88. transform: translateY(-50%);
  89. width: 8rpx;
  90. height: 32rpx;
  91. background-color: #1c9bfd;
  92. border-radius: 4rpx;
  93. }
  94. }
  95. .info-row {
  96. display: flex;
  97. justify-content: space-between;
  98. padding: 16rpx 0;
  99. border-bottom: 1rpx solid #f8f8f8;
  100. font-size: 28rpx;
  101. &:last-child { border-bottom: none; }
  102. .label { color: #8c8c8c; width: 180rpx; flex-shrink: 0; }
  103. .value { color: #262626; flex: 1; text-align: right; word-break: break-all; }
  104. &.column {
  105. flex-direction: column;
  106. align-items: flex-start;
  107. .label { margin-bottom: 12rpx; color: #909399; }
  108. .value { text-align: left !important; width: 100%; }
  109. }
  110. .remark {
  111. background-color: #f8fafc;
  112. padding: 20rpx;
  113. border-radius: 12rpx;
  114. font-size: 26rpx;
  115. line-height: 1.6;
  116. color: #606266;
  117. min-height: 80rpx;
  118. width: 100%;
  119. box-sizing: border-box;
  120. }
  121. }
  122. }
  123. /* 业务通用样式 - 统一附件列表样式 (项目文档) */
  124. .common-file-list {
  125. .file-item {
  126. display: flex;
  127. align-items: center;
  128. padding: 24rpx 0;
  129. border-bottom: 2rpx dashed #f5f5f5;
  130. &:last-child {
  131. border-bottom: none;
  132. }
  133. .file-info {
  134. flex: 1;
  135. display: flex;
  136. flex-direction: column;
  137. .f-name {
  138. font-size: 28rpx;
  139. color: #343A3F;
  140. font-weight: 500;
  141. margin-bottom: 12rpx;
  142. word-break: break-all;
  143. }
  144. .f-meta {
  145. display: flex;
  146. justify-content: space-between;
  147. align-items: center;
  148. font-size: 24rpx;
  149. .f-type {
  150. color: #1677ff;
  151. background-color: #e6f4ff;
  152. padding: 4rpx 12rpx;
  153. border-radius: 6rpx;
  154. }
  155. .f-date {
  156. color: #585858;
  157. }
  158. }
  159. }
  160. }
  161. }