54 lines
1.8 KiB
Vue
54 lines
1.8 KiB
Vue
<template>
|
||
<div align="center" style="display: inline-flex; margin: 0 10px">
|
||
<img src="/S.png" alt="S Grade" v-if="props.grade === 'S'" />
|
||
<img src="/A.png" alt="A Grade" v-if="props.grade === 'A'" />
|
||
<img src="/B.png" alt="B Grade" v-if="props.grade === 'B'" />
|
||
<img src="/C.png" alt="C Grade" v-if="props.grade === 'C'" />
|
||
<n-tooltip trigger="hover">
|
||
<template #trigger>
|
||
<n-icon size="16" style="cursor: help">
|
||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
<path
|
||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
|
||
/>
|
||
</svg>
|
||
</n-icon>
|
||
</template>
|
||
<div style="max-width: 300px; line-height: 1.4">
|
||
<div style="font-weight: bold; margin-bottom: 8px">等级计算说明</div>
|
||
<div>使用加权平均方法计算综合等级：</div>
|
||
<div>• S级 = 4分，A级 = 3分，B级 = 2分，C级 = 1分</div>
|
||
<div>• 根据平均分数确定最终等级：</div>
|
||
<div>- S级：≥3.5分</div>
|
||
<div>- A级：2.5-3.5分</div>
|
||
<div>- B级：1.5-2.5分</div>
|
||
<div>- C级：<1.5分</div>
|
||
</div>
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
const props = defineProps<{
|
||
grade: "S" | "A" | "B" | "C"
|
||
}>()
|
||
</script>
|
||
<style scoped>
|
||
img {
|
||
animation: shake 0.5s infinite;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
@keyframes shake {
|
||
0% {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
50% {
|
||
transform: translateY(-10px) scale(1.1);
|
||
}
|
||
100% {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
</style>
|