TaskDialog.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. .task-board {
  2. padding: 30rpx;
  3. background: transparent;
  4. width: 600rpx;
  5. margin: 0 auto;
  6. .board-title {
  7. display: flex;
  8. align-items: center;
  9. justify-content: center;
  10. margin-bottom: 30rpx;
  11. .title-dot {
  12. width: 12rpx;
  13. height: 12rpx;
  14. border-radius: 50%;
  15. background-color: #A67C52;
  16. margin: 0 20rpx;
  17. }
  18. text {
  19. color: #A67C52;
  20. font-size: 32rpx;
  21. font-weight: bold;
  22. }
  23. }
  24. .task-card {
  25. background-color: rgba(255, 246, 235, 0.95);
  26. border-radius: 20rpx;
  27. padding: 24rpx;
  28. margin-bottom: 16rpx;
  29. position: relative;
  30. .task-header,
  31. .task-desc {
  32. margin-bottom: 16rpx;
  33. .task-label {
  34. color: #A67C52;
  35. font-size: 26rpx;
  36. font-weight: 500;
  37. }
  38. .task-content {
  39. color: #8B6244;
  40. font-size: 26rpx;
  41. margin-left: 8rpx;
  42. }
  43. }
  44. .task-rewards {
  45. margin-bottom: 24rpx;
  46. .task-label {
  47. color: #A67C52;
  48. font-size: 26rpx;
  49. font-weight: 500;
  50. display: block;
  51. margin-bottom: 16rpx;
  52. }
  53. .reward-list {
  54. display: flex;
  55. gap: 30rpx;
  56. .reward-item {
  57. display: flex;
  58. flex-direction: column;
  59. align-items: center;
  60. .reward-box {
  61. width: 90rpx;
  62. height: 90rpx;
  63. background: linear-gradient(to bottom right, #B8E986, #7EC242);
  64. border-radius: 14rpx;
  65. display: flex;
  66. align-items: center;
  67. justify-content: center;
  68. margin-bottom: 8rpx;
  69. &:nth-child(3) {
  70. background: linear-gradient(to bottom right, #E5C1FF, #9D7EE0);
  71. }
  72. .reward-icon {
  73. width: 60rpx;
  74. height: 60rpx;
  75. }
  76. }
  77. .reward-text {
  78. color: #B3894A;
  79. font-size: 22rpx;
  80. text-align: center;
  81. }
  82. }
  83. }
  84. }
  85. .task-footer {
  86. display: flex;
  87. justify-content: space-between;
  88. align-items: center;
  89. .task-date {
  90. color: #CCAB8F;
  91. font-size: 24rpx;
  92. }
  93. .task-button {
  94. min-width: 140rpx;
  95. height: 60rpx;
  96. line-height: 60rpx;
  97. text-align: center;
  98. border-radius: 30rpx;
  99. font-size: 24rpx;
  100. border: none;
  101. padding: 0 24rpx;
  102. &.completed {
  103. background: linear-gradient(to right, #FFD879, #FFA751);
  104. color: #ffffff;
  105. box-shadow: 0 4rpx 8rpx rgba(255, 167, 81, 0.3);
  106. }
  107. &.available {
  108. background: linear-gradient(to right, #ADE277, #7EC242);
  109. color: #ffffff;
  110. box-shadow: 0 4rpx 8rpx rgba(126, 194, 66, 0.3);
  111. }
  112. }
  113. }
  114. .card-divider {
  115. position: absolute;
  116. left: 24rpx;
  117. right: 24rpx;
  118. bottom: 0;
  119. height: 2rpx;
  120. background: linear-gradient(to right,
  121. transparent,
  122. rgba(179, 137, 74, 0.3) 20%,
  123. rgba(179, 137, 74, 0.3) 80%,
  124. transparent
  125. );
  126. }
  127. }
  128. }