LiveStreamCard.vue
1.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!--
* @Date: 2025-03-20 15:33:07
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-20 15:33:08
* @FilePath: /react_template_1/src/components/ui/LiveStreamCard.vue
* @Description: 文件描述
-->
<template>
<div class="relative">
<!-- Live indicator -->
<div class="absolute top-2 left-2 bg-red-500/90 text-white text-xs px-2 py-1 rounded flex items-center z-10">
<div class="w-2 h-2 bg-white rounded-full mr-1 animate-pulse"></div>
直播中
</div>
<router-link :to="`/courses/${stream.id}`" class="block rounded-lg overflow-hidden shadow-sm relative">
<img
:src="stream.imageUrl"
:alt="stream.title"
class="w-full h-28 object-cover"
/>
<!-- Gradient overlay -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60"></div>
<!-- Stream info -->
<div class="absolute bottom-2 left-2 right-2">
<h3 class="text-white text-sm font-medium">「{{ stream.title }}」{{ stream.subtitle }}</h3>
<div class="flex items-center mt-1">
<div class="flex -space-x-2">
<div class="w-5 h-5 rounded-full bg-gray-300 border border-white"></div>
<div class="w-5 h-5 rounded-full bg-gray-400 border border-white"></div>
<div class="w-5 h-5 rounded-full bg-gray-500 border border-white"></div>
</div>
<span class="text-white text-xs ml-1">{{ stream.viewers }}人在看</span>
<button class="ml-auto bg-green-500 text-white text-xs px-2 py-1 rounded">
立即观看
</button>
</div>
</div>
</router-link>
</div>
</template>
<script setup>
import { defineProps } from 'vue'
defineProps({
stream: {
type: Object,
required: true
}
})
</script>