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 16 additions and 18 deletions
...@@ -9,34 +9,32 @@ ...@@ -9,34 +9,32 @@
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 - <div v-if="course?.price !== '0.00'" class="flex items-baseline"> 20 + <template v-if="course?.pay_type !== 'DESIGNATE'">
21 - <span class="text-red-500 font-bold text-2xl">¥{{ course?.price }}</span> 21 + <div v-if="course?.price !== '0.00'" class="flex items-baseline">
22 - <!-- <span class="text-gray-500 text-sm ml-1">/人</span> --> 22 + <span class="text-red-500 font-bold text-2xl">¥{{ course?.price }}</span>
23 - </div> 23 + <!-- <span class="text-gray-500 text-sm ml-1">/人</span> -->
24 - <div v-else class="text-red-500 text-lg font-bold"> 24 + </div>
25 - 免费 25 + <div v-else class="text-red-500 text-lg font-bold">
26 + 免费
27 + </div>
28 + </template>
29 + <div v-else class="text-red-500 text-sm font-bold">
30 + 指定学习
26 </div> 31 </div>
27 </div> 32 </div>
28 - <div v-else class="text-red-500 text-sm font-bold"> 33 + <div class="text-gray-500 text-sm">
29 - 指定学习 34 + {{ course?.buy_count }}人订阅
30 - </div>
31 - <div class="bg-red-500 text-white text-xs px-3 py-1 rounded-md">
32 - 限时优惠
33 </div> 35 </div>
34 </div> 36 </div>
35 - <div class="flex justify-between text-xs text-gray-500 mt-3 border-t border-gray-100 pt-3"> 37 + <div v-if="course?.expireDate" class="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>
39 - <div v-if="course?.expireDate" class="text-xs text-gray-500 mt-1">
40 有效期: {{ course?.expireDate || '没有字段' }} 38 有效期: {{ course?.expireDate || '没有字段' }}
41 </div> 39 </div>
42 </div> 40 </div>
......