Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1b2e5447 1 parent 5dca7d87

style(CourseDetailPage): 更新课程详情页的样式和颜色方案

Inline Side-by-side
Showing 1 changed file with 15 additions and 12 deletions
......@@ -9,31 +9,34 @@
<!-- Course Header -->
<div class="px-4">
<div class="bg-gradient-to-b from-red-500 to-red-600 p-4 mb-4 rounded-xl shadow-lg">
<div v-if="course?.group_type_title" class="bg-white/10 backdrop-blur-sm rounded-lg p-3 mb-3 inline-block">
<div class="text-white font-semibold">{{ course?.group_type_title }}</div>
<div class="bg-white p-4 mb-4 rounded-xl shadow-lg">
<div v-if="course?.group_type_title" class="bg-gray-100 rounded-lg p-2 mb-3 inline-block">
<div class="text-gray-600 text-sm font-semibold">{{ course?.group_type_title }}</div>
</div>
<h1 class="text-2xl text-white font-bold mb-1">{{ course?.title }}</h1>
<h2 class="text-lg text-white/90">{{ course?.subtitle }}</h2>
<h1 class="text-2xl text-gray-900 font-bold mb-1">{{ course?.title }}</h1>
<h2 class="text-sm text-gray-500">{{ course?.subtitle }}</h2>
<div class="mt-4 flex justify-between items-center">
<div v-if="course?.pay_type !== 'DESIGNATE'">
<div v-if="course?.price !== '0.00'" class="text-orange-300 font-bold text-2xl">¥{{ course?.price }}</div>
<div v-else class="text-orange-300 text-sm">
<div v-if="course?.pay_type !== 'DESIGNATE'" class="flex items-end gap-2">
<div v-if="course?.price !== '0.00'" class="flex items-baseline">
<span class="text-red-500 font-bold text-2xl">¥{{ course?.price }}</span>
<!-- <span class="text-gray-500 text-sm ml-1">/人</span> -->
</div>
<div v-else class="text-red-500 text-lg font-bold">
免费
</div>
</div>
<div v-else class="text-orange-300 text-sm">
<div v-else class="text-red-500 text-sm font-bold">
指定学习
</div>
<div class="bg-orange-500/30 text-orange-100 text-xs px-3 py-1 rounded-full">
<div class="bg-red-500 text-white text-xs px-3 py-1 rounded-md">
限时优惠
</div>
</div>
<div class="flex justify-between text-xs text-white/80 mt-3">
<div class="flex justify-between text-xs text-gray-500 mt-3 border-t border-gray-100 pt-3">
<div>已更新{{ course?.count }}期</div>
<div>{{ course?.buy_count }}人订阅</div>
</div>
<div v-if="course?.expireDate" class="text-xs text-white/80 mt-1">
<div v-if="course?.expireDate" class="text-xs text-gray-500 mt-1">
有效期: {{ course?.expireDate || '没有字段' }}
</div>
</div>
......