|
|
@@ -33,9 +33,10 @@
|
|
|
<div class="task-list">
|
|
|
<div
|
|
|
class="task-card"
|
|
|
+ :class="{ 'task-preparing': task.status === 0 }"
|
|
|
v-for="task in taskList"
|
|
|
:key="task.id"
|
|
|
- @click="goTaskDetail(task.id)"
|
|
|
+ @click="task.status !== 0 && goTaskDetail(task.id)"
|
|
|
>
|
|
|
<div class="task-content">
|
|
|
<div class="task-cover" v-if="task.cover">
|
|
|
@@ -45,7 +46,8 @@
|
|
|
<div class="task-title">{{ task.title }}</div>
|
|
|
<div class="task-footer">
|
|
|
<span class="price">+{{ formatReward(task.rewardAmount ?? task.price) }}</span>
|
|
|
- <span class="remaining">{{ $t('task.remaining') }}: {{ task.remainCount ?? (task.maxNum - task.applyNum) }}</span>
|
|
|
+ <span class="remaining" v-if="task.status !== 0">{{ $t('task.remaining') }}: {{ task.remainCount ?? (task.maxNum - task.applyNum) }}</span>
|
|
|
+ <span class="preparing-tag" v-else>{{ $t('task.preparing') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -315,9 +317,24 @@ onMounted(() => {
|
|
|
font-size: min(2.933vw, 14px);
|
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.5));
|
|
|
}
|
|
|
+
|
|
|
+ .preparing-tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 1px 8px;
|
|
|
+ background: rgba(255, 152, 0, 0.2);
|
|
|
+ color: #ff9800;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: min(2.8vw, 12px);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ &.task-preparing {
|
|
|
+ opacity: 0.45;
|
|
|
+ cursor: not-allowed;
|
|
|
+ filter: grayscale(0.3);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|