Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
53619e2a 1 parent 595c171e

style(HomePage): 优化首页标签导航的样式和布局 

将标签导航改为粘性定位，增加背景模糊效果，提升用户体验
Inline Side-by-side
Showing 1 changed file with 5 additions and 3 deletions
1 <!-- 1 <!--
2 * @Date: 2025-03-20 19:55:21 2 * @Date: 2025-03-20 19:55:21
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-25 15:57:15 4 + * @LastEditTime: 2025-03-25 16:44:51
5 * @FilePath: /mlaj/src/views/HomePage.vue 5 * @FilePath: /mlaj/src/views/HomePage.vue
6 * @Description: 亲子学院首页组件 6 * @Description: 亲子学院首页组件
7 * 7 *
...@@ -254,7 +254,8 @@ ...@@ -254,7 +254,8 @@
254 </div> 254 </div>
255 </div> 255 </div>
256 256
257 - <!-- Tab Navigation --> 257 + <!-- Custom Tab Navigation -->
258 + <div class="sticky top-0 bg-white/70 backdrop-blur-lg" style="z-index: 999;">
258 <div class="px-4 border-b border-gray-200"> 259 <div class="px-4 border-b border-gray-200">
259 <div class="flex space-x-6"> 260 <div class="flex space-x-6">
260 <button 261 <button
...@@ -262,7 +263,7 @@ ...@@ -262,7 +263,7 @@
262 :key="tab" 263 :key="tab"
263 @click="activeTab = tab" 264 @click="activeTab = tab"
264 :class="[ 265 :class="[
265 - 'pb-3 px-1 font-medium', 266 + 'pb-3 pt-3 px-1 font-medium',
266 activeTab === tab 267 activeTab === tab
267 ? 'text-green-600 border-b-2 border-green-600' 268 ? 'text-green-600 border-b-2 border-green-600'
268 : 'text-gray-500' 269 : 'text-gray-500'
...@@ -278,6 +279,7 @@ ...@@ -278,6 +279,7 @@
278 </button> 279 </button>
279 </div> 280 </div>
280 </div> 281 </div>
282 + </div>
281 283
282 <!-- Content Based on Active Tab --> 284 <!-- Content Based on Active Tab -->
283 <div class="px-4 mt-5"> 285 <div class="px-4 mt-5">
......