project-card.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. // shared styles for project list cards
  2. .project-list {
  3. padding-bottom: 20rpx;
  4. }
  5. .project-card {
  6. background-color: #fff;
  7. border-radius: 16rpx;
  8. padding: 30rpx;
  9. margin-bottom: 24rpx;
  10. box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
  11. position: relative;
  12. overflow: hidden;
  13. &::before {
  14. content: '';
  15. position: absolute;
  16. left: 0;
  17. top: 0;
  18. width: 6rpx;
  19. height: 100%;
  20. background-color: #1c9bfd;
  21. }
  22. .card-header {
  23. display: flex;
  24. justify-content: space-between;
  25. align-items: flex-start;
  26. margin-bottom: 24rpx;
  27. padding-bottom: 20rpx;
  28. border-bottom: 2rpx dashed #eee;
  29. .title {
  30. font-size: 32rpx;
  31. font-weight: bold;
  32. color: #343A3F;
  33. flex: 1;
  34. margin-right: 20rpx;
  35. line-height: 1.4;
  36. overflow: hidden;
  37. text-overflow: ellipsis;
  38. white-space: nowrap;
  39. }
  40. .status-tag {
  41. font-size: 24rpx;
  42. padding: 6rpx 16rpx;
  43. border-radius: 8rpx;
  44. white-space: nowrap;
  45. &.status-05 { color: #8c8c8c; background-color: rgba(140, 140, 140, 0.1); } // 待立项
  46. &.status-10 { color: #1c9bfd; background-color: rgba(28, 155, 253, 0.1); } // 立项
  47. &.status-20 { color: #52c41a; background-color: rgba(82, 196, 26, 0.1); } // 在研
  48. &.status-30 { color: #faad14; background-color: rgba(250, 173, 20, 0.1); } // 结题验收
  49. &.status-40 { color: #f5222d; background-color: rgba(245, 34, 45, 0.1); } // 中止
  50. }
  51. }
  52. .card-body {
  53. .info-item {
  54. display: flex;
  55. padding: 16rpx 0;
  56. border-bottom: 2rpx dashed #f5f5f5;
  57. font-size: 28rpx;
  58. line-height: 1.5;
  59. &:last-child { border-bottom: none; }
  60. .label { color: #343A3F; width: 180rpx; flex-shrink: 0; }
  61. .value { color: #585858; flex: 1; text-align: right; word-break: break-all; }
  62. .amount { color: #ff4d4f; font-weight: bold; font-family: din; font-size: 32rpx; }
  63. }
  64. }
  65. }