CoursesPage.vue
4.23 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
<AppLayout title="课程" :rightContent="rightContent">
<div class="pb-16">
<!-- Search Bar -->
<div class="pb-2">
<SearchBar placeholder="搜索" @search="handleSearch" />
</div>
<!-- Featured Course Banner -->
<div class="px-4 mb-5">
<div class="relative rounded-xl overflow-hidden shadow-lg h-40">
<img
src="https://cdn.ipadbiz.cn/mlaj/images/featured-course.jpg"
alt="传承之道"
class="w-full h-full object-cover"
/>
<div
class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 flex flex-col justify-end p-4"
>
<h2 class="text-3xl font-bold text-amber-400 drop-shadow-md">传承之道</h2>
<p class="text-xl text-white font-semibold drop-shadow-sm">大理鸡足山游学</p>
</div>
</div>
</div>
<!-- Today's Live -->
<div class="px-4 mb-4">
<div class="flex items-center mb-2">
<h2 class="font-medium">今日直播</h2>
<div
class="ml-2 flex items-center bg-red-100 text-red-700 rounded px-2 py-1 text-xs"
>
<span class="font-medium">{{ hours }}</span>
<span class="mx-1">:</span>
<span class="font-medium">{{ minutes }}</span>
<span class="mx-1">:</span>
<span class="font-medium">00</span>
</div>
</div>
<!-- Live Stream Cards -->
<div class="grid grid-cols-2 gap-4">
<LiveStreamCard
v-for="stream in liveStreams"
:key="stream.id"
:stream="stream"
/>
</div>
</div>
<!-- Value Online Courses -->
<div class="px-4 mb-4">
<div class="flex justify-between items-center mb-2">
<h2 class="font-medium">超值线上课</h2>
<router-link to="#" class="text-xs text-gray-500 flex items-center">
更多
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</router-link>
</div>
<!-- Course Cards -->
<div class="space-y-4">
<CourseCard v-for="course in courses" :key="course.id" :course="course" />
</div>
</div>
</div>
</AppLayout>
</template>
<script setup lang="jsx">
import { computed, defineComponent, h } from "vue";
import { useRoute, useRouter } from 'vue-router'
import AppLayout from "@/components/layout/AppLayout.vue";
import SearchBar from "@/components/ui/SearchBar.vue";
import FrostedGlass from "@/components/ui/FrostedGlass.vue";
import CourseCard from "@/components/ui/CourseCard.vue";
import LiveStreamCard from "@/components/ui/LiveStreamCard.vue";
import { featuredCourse, liveStreams, courses } from "@/utils/mockData";
import { useTitle } from '@vueuse/core';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
// Search handler
const handleSearch = (query) => {
console.log("Searching for:", query);
// Would implement actual search logic here
};
// Current time for the countdown timer
const todayDate = new Date();
const formattedTime = featuredCourse.liveTime.split(":");
const hours = computed(() => formattedTime[0]);
const minutes = computed(() => formattedTime[1]);
// Right content component
const RightContent = defineComponent({
setup() {
return () => (
<button class="p-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-700"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
/>
</svg>
</button>
);
},
});
const rightContent = h(RightContent);
</script>