hookehuyr

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

将标签导航改为粘性定位,增加背景模糊效果,提升用户体验
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,28 +254,30 @@ ...@@ -254,28 +254,30 @@
254 </div> 254 </div>
255 </div> 255 </div>
256 256
257 - <!-- Tab Navigation --> 257 + <!-- Custom Tab Navigation -->
258 - <div class="px-4 border-b border-gray-200"> 258 + <div class="sticky top-0 bg-white/70 backdrop-blur-lg" style="z-index: 999;">
259 - <div class="flex space-x-6"> 259 + <div class="px-4 border-b border-gray-200">
260 - <button 260 + <div class="flex space-x-6">
261 - v-for="tab in ['推荐', '直播', '精选']" 261 + <button
262 - :key="tab" 262 + v-for="tab in ['推荐', '直播', '精选']"
263 - @click="activeTab = tab" 263 + :key="tab"
264 - :class="[ 264 + @click="activeTab = tab"
265 - 'pb-3 px-1 font-medium', 265 + :class="[
266 - activeTab === tab 266 + 'pb-3 pt-3 px-1 font-medium',
267 - ? 'text-green-600 border-b-2 border-green-600' 267 + activeTab === tab
268 - : 'text-gray-500' 268 + ? 'text-green-600 border-b-2 border-green-600'
269 - ]" 269 + : 'text-gray-500'
270 - > 270 + ]"
271 - {{ tab }}
272 - <span
273 - v-if="tab === '直播'"
274 - class="ml-1 px-1.5 py-0.5 bg-red-500 text-white text-xs rounded-full"
275 > 271 >
276 - 2 272 + {{ tab }}
277 - </span> 273 + <span
278 - </button> 274 + v-if="tab === '直播'"
275 + class="ml-1 px-1.5 py-0.5 bg-red-500 text-white text-xs rounded-full"
276 + >
277 + 2
278 + </span>
279 + </button>
280 + </div>
279 </div> 281 </div>
280 </div> 282 </div>
281 283
......