72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
||
<div class="container" v-if="taskTab === TASK_TYPE.Challenge">
|
||
<n-empty v-if="!challenges.length">暂无挑战，敬请期待</n-empty>
|
||
<n-flex v-else vertical :size="12">
|
||
<n-card
|
||
v-for="item in challenges"
|
||
:key="item.display"
|
||
hoverable
|
||
:class="['challenge-card', { submitted: item.submitted }]"
|
||
@click="select(item)"
|
||
>
|
||
<template #header>
|
||
<n-flex align="center" :size="6">
|
||
<span v-if="item.submitted" class="check-icon">✓</span>
|
||
<span :class="{ 'submitted-title': item.submitted }">{{ item.title }}</span>
|
||
</n-flex>
|
||
</template>
|
||
<template #header-extra>
|
||
<n-flex :size="6">
|
||
<n-tag type="warning" size="small">{{ item.score }} 分</n-tag>
|
||
<n-tag v-if="item.pass_score != null" size="small">及格 {{ item.pass_score }} 分</n-tag>
|
||
</n-flex>
|
||
</template>
|
||
</n-card>
|
||
</n-flex>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from "vue"
|
||
import { useRouter } from "vue-router"
|
||
import { Challenge } from "../api"
|
||
import { taskTab } from "../store/task"
|
||
import { TASK_TYPE } from "../utils/const"
|
||
import type { ChallengeSlim } from "../utils/type"
|
||
|
||
const router = useRouter()
|
||
const challenges = ref<ChallengeSlim[]>([])
|
||
|
||
function select(item: ChallengeSlim) {
|
||
router.push({ name: "home-challenge", params: { display: item.display } })
|
||
}
|
||
|
||
onMounted(async () => {
|
||
challenges.value = await Challenge.listDisplay()
|
||
})
|
||
</script>
|
||
<style scoped>
|
||
.container {
|
||
padding: 16px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.challenge-card {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.challenge-card.submitted {
|
||
background-color: #f6ffed;
|
||
border-color: #b7eb8f;
|
||
}
|
||
|
||
.check-icon {
|
||
color: #52c41a;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.submitted-title {
|
||
color: #888;
|
||
}
|
||
</style>
|