hookehuyr

feat(首页): 在课程卡片上添加已购标识

为已购买的课程添加视觉标识,方便用户快速识别
<!--
* @Date: 2025-03-20 19:55:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-25 11:54:13
* @LastEditTime: 2025-10-13 11:39:43
* @FilePath: /mlaj/src/views/HomePage.vue
* @Description: 美乐爱觉教育首页组件
*
......@@ -199,6 +199,14 @@
:alt="course.title"
class="w-full h-full object-cover"
/>
<!-- 已购标识 -->
<div
v-if="course.is_buy"
class="absolute top-0 left-0 bg-orange-500 text-white text-xs px-2 py-1 rounded-br-lg font-medium"
style="background-color: rgba(249, 115, 22, 0.85)"
>
已购
</div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/60 flex flex-col justify-end p-4">
<div class="bg-amber-500/90 text-white px-2 py-1 rounded-full text-xs font-medium inline-block w-fit mb-1">
{{ course.category }}
......@@ -300,12 +308,20 @@
class="p-3 rounded-xl"
>
<div class="flex flex-col h-full" @click="goToCourseDetail(item)">
<div class="h-28 mb-2 rounded-lg overflow-hidden">
<div class="h-28 mb-2 rounded-lg overflow-hidden relative">
<img
:src="item.cover || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'"
:alt="item.title"
class="w-full h-full object-cover"
/>
<!-- 已购标识 -->
<div
v-if="item.is_buy"
class="absolute top-0 left-0 bg-orange-500 text-white text-xs px-2 py-1 rounded-br-lg font-medium"
style="background-color: rgba(249, 115, 22, 0.85)"
>
已购
</div>
</div>
<h4 class="font-medium text-sm mb-1 line-clamp-1">{{ item.title }}</h4>
<!--<p class="text-xs text-gray-500 flex items-center mt-auto">
......@@ -521,7 +537,7 @@ import ActivityCard from '@/components/ui/ActivityCard.vue'
import SummerCampCard from '@/components/ui/SummerCampCard.vue'
import VideoPlayer from '@/components/ui/VideoPlayer.vue'
// 导入模拟数据和工具函数
// TODO: 导入模拟数据和工具函数
import { liveStreams, activities } from '@/utils/mockData'
import { useTitle } from '@vueuse/core'
import { useAuth } from '@/contexts/auth'
......