61 lines
1.9 KiB
Vue
61 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
||
import type { ICourse } from "~/types";
|
||
|
||
defineProps<{
|
||
data: ICourse;
|
||
}>();
|
||
|
||
const openCourse = (id: string) => {
|
||
window.open(`/course/${id}`, "_blank", "noopener,noreferrer");
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex flex-col gap-2">
|
||
<NuxtImg
|
||
:src="data.thumbnail_url"
|
||
alt="课程封面"
|
||
class="w-full aspect-video rounded-md shadow-md cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:ring-4 hover:ring-primary-background"
|
||
@click="openCourse(data.id)"
|
||
/>
|
||
<div class="px-1.5 flex flex-col gap-1">
|
||
<div class="flex justify-between items-center gap-2">
|
||
<h1 class="flex-1 text-base font-medium text-ellipsis line-clamp-1">
|
||
{{ data.title || "未知课程" }}
|
||
</h1>
|
||
<p
|
||
class="text-xs text-muted-foreground font-medium flex items-center gap-0.5"
|
||
>
|
||
<Icon name="tabler:user" size="14px" />
|
||
<span>{{ data.teacher_name || "未知教师" }}</span>
|
||
</p>
|
||
</div>
|
||
<div class="flex justify-between gap-1 text-xs text-muted-foreground/80">
|
||
<div class="flex-1 flex flex-col">
|
||
<p>
|
||
学期：<span>{{ data.semester || "未知" }}</span>
|
||
</p>
|
||
<p>
|
||
课程ID：<span>{{ data.id }}</span>
|
||
</p>
|
||
</div>
|
||
<div class="flex flex-col items-end">
|
||
<p>{{ data.school_name }}</p>
|
||
<div class="flex items-center gap-1">
|
||
<div
|
||
v-if="data.is_published"
|
||
class="w-2 h-2 rounded-full bg-emerald-400"
|
||
/>
|
||
<div v-else class="w-2 h-2 rounded-full bg-gray-400" />
|
||
<p class="text-xs text-muted-foreground/80">
|
||
{{ data.is_published ? "开课" : "关课" }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped></style>
|