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 @@ ...@@ -9,14 +9,15 @@
9 9
10 <!-- Course Header --> 10 <!-- Course Header -->
11 <div class="px-4"> 11 <div class="px-4">
12 - <div class="bg-white p-4 mb-4 rounded-xl shadow-lg"> 12 + <div style="padding-bottom: 1rem;">
13 <div v-if="course?.group_type_title" class="bg-gray-100 rounded-lg p-2 mb-3 inline-block"> 13 <div v-if="course?.group_type_title" class="bg-gray-100 rounded-lg p-2 mb-3 inline-block">
14 <div class="text-gray-600 text-sm font-semibold">{{ course?.group_type_title }}</div> 14 <div class="text-gray-600 text-sm font-semibold">{{ course?.group_type_title }}</div>
15 </div> 15 </div>
16 <h1 class="text-2xl text-gray-900 font-bold mb-1">{{ course?.title }}</h1> 16 <h1 class="text-2xl text-gray-900 font-bold mb-1">{{ course?.title }}</h1>
17 <h2 class="text-sm text-gray-500">{{ course?.subtitle }}</h2> 17 <h2 class="text-sm text-gray-500">{{ course?.subtitle }}</h2>
18 <div class="mt-4 flex justify-between items-center"> 18 <div class="mt-4 flex justify-between items-center">
19 - <div v-if="course?.pay_type !== 'DESIGNATE'" class="flex items-end gap-2"> 19 + <div class="flex items-baseline gap-2">
20 + <template v-if="course?.pay_type !== 'DESIGNATE'">
20 <div v-if="course?.price !== '0.00'" class="flex items-baseline"> 21 <div v-if="course?.price !== '0.00'" class="flex items-baseline">
21 <span class="text-red-500 font-bold text-2xl">¥{{ course?.price }}</span> 22 <span class="text-red-500 font-bold text-2xl">¥{{ course?.price }}</span>
22 <!-- <span class="text-gray-500 text-sm ml-1">/人</span> --> 23 <!-- <span class="text-gray-500 text-sm ml-1">/人</span> -->
...@@ -24,19 +25,16 @@ ...@@ -24,19 +25,16 @@
24 <div v-else class="text-red-500 text-lg font-bold"> 25 <div v-else class="text-red-500 text-lg font-bold">
25 免费 26 免费
26 </div> 27 </div>
27 - </div> 28 + </template>
28 <div v-else class="text-red-500 text-sm font-bold"> 29 <div v-else class="text-red-500 text-sm font-bold">
29 指定学习 30 指定学习
30 </div> 31 </div>
31 - <div class="bg-red-500 text-white text-xs px-3 py-1 rounded-md">
32 - 限时优惠
33 </div> 32 </div>
33 + <div class="text-gray-500 text-sm">
34 + {{ course?.buy_count }}人订阅
34 </div> 35 </div>
35 - <div class="flex justify-between text-xs text-gray-500 mt-3 border-t border-gray-100 pt-3">
36 - <div>已更新{{ course?.count }}期</div>
37 - <div>{{ course?.buy_count }}人订阅</div>
38 </div> 36 </div>
39 - <div v-if="course?.expireDate" class="text-xs text-gray-500 mt-1"> 37 + <div v-if="course?.expireDate" class="text-xs text-gray-500 mt-3 border-t border-gray-100 pt-3">
40 有效期: {{ course?.expireDate || '没有字段' }} 38 有效期: {{ course?.expireDate || '没有字段' }}
41 </div> 39 </div>
42 </div> 40 </div>
......