.task-board { padding: 30rpx; background: transparent; width: 600rpx; margin: 0 auto; .board-title { display: flex; align-items: center; justify-content: center; margin-bottom: 30rpx; .title-dot { width: 12rpx; height: 12rpx; border-radius: 50%; background-color: #A67C52; margin: 0 20rpx; } text { color: #A67C52; font-size: 32rpx; font-weight: bold; } } .task-card { background-color: rgba(255, 246, 235, 0.95); border-radius: 20rpx; padding: 24rpx; margin-bottom: 16rpx; position: relative; .task-header, .task-desc { margin-bottom: 16rpx; .task-label { color: #A67C52; font-size: 26rpx; font-weight: 500; } .task-content { color: #8B6244; font-size: 26rpx; margin-left: 8rpx; } } .task-rewards { margin-bottom: 24rpx; .task-label { color: #A67C52; font-size: 26rpx; font-weight: 500; display: block; margin-bottom: 16rpx; } .reward-list { display: flex; gap: 30rpx; .reward-item { display: flex; flex-direction: column; align-items: center; .reward-box { width: 90rpx; height: 90rpx; background: linear-gradient(to bottom right, #B8E986, #7EC242); border-radius: 14rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 8rpx; &:nth-child(3) { background: linear-gradient(to bottom right, #E5C1FF, #9D7EE0); } .reward-icon { width: 60rpx; height: 60rpx; } } .reward-text { color: #B3894A; font-size: 22rpx; text-align: center; } } } } .task-footer { display: flex; justify-content: space-between; align-items: center; .task-date { color: #CCAB8F; font-size: 24rpx; } .task-button { min-width: 140rpx; height: 60rpx; line-height: 60rpx; text-align: center; border-radius: 30rpx; font-size: 24rpx; border: none; padding: 0 24rpx; &.completed { background: linear-gradient(to right, #FFD879, #FFA751); color: #ffffff; box-shadow: 0 4rpx 8rpx rgba(255, 167, 81, 0.3); } &.available { background: linear-gradient(to right, #ADE277, #7EC242); color: #ffffff; box-shadow: 0 4rpx 8rpx rgba(126, 194, 66, 0.3); } } } .card-divider { position: absolute; left: 24rpx; right: 24rpx; bottom: 0; height: 2rpx; background: linear-gradient(to right, transparent, rgba(179, 137, 74, 0.3) 20%, rgba(179, 137, 74, 0.3) 80%, transparent ); } } }