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