Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7fd2d5e9 1 parent 112ea81c

refactor(CourseDetailPage): 优化课程详情页的布局和样式 

移除多余的阴影和背景色，调整价格显示逻辑
将订阅人数移至右侧，调整有效期显示位置
Inline Side-by-side
Showing 1 changed file with 7 additions and 9 deletions
......@@ -9,14 +9,15 @@
<!-- Course Header -->
<div class="px-4">
<div class="bg-white p-4 mb-4 rounded-xl shadow-lg">
<div style="padding-bottom: 1rem;">
<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-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'" class="flex items-end gap-2">
<div class="flex items-baseline gap-2">
<template v-if="course?.pay_type !== 'DESIGNATE'">
<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> -->
......@@ -24,19 +25,16 @@
<div v-else class="text-red-500 text-lg font-bold">
免费
</div>
</div>
</template>
<div v-else class="text-red-500 text-sm font-bold">
指定学习
</div>
<div class="bg-red-500 text-white text-xs px-3 py-1 rounded-md">
限时优惠
</div>
<div class="text-gray-500 text-sm">
{{ course?.buy_count }}人订阅
</div>
<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-gray-500 mt-1">
<div v-if="course?.expireDate" class="text-xs text-gray-500 mt-3 border-t border-gray-100 pt-3">
有效期: {{ course?.expireDate || '没有字段' }}
</div>
</div>
......