feat(HomePage): 添加内容区域滚动重置功能

在切换标签时，重置内容区域的位置，确保用户无需手动滚动即可看到新内容

 <!--
 <!--
  * @Date: 2025-03-20 19:55:21
  * @Date: 2025-03-20 19:55:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-25 16:44:51
+ * @LastEditTime: 2025-03-25 17:48:53
  * @FilePath: /mlaj/src/views/HomePage.vue
  * @FilePath: /mlaj/src/views/HomePage.vue
  * @Description: 亲子学院首页组件
  * @Description: 亲子学院首页组件
  *
  *
@@ -282,7 +282,7 @@
       </div>
       </div>
 
 
       <!-- Content Based on Active Tab -->
       <!-- Content Based on Active Tab -->
-      <div class="px-4 mt-5">
+      <div class="px-4 mt-5" ref="contentRef">
         <!-- Recommended Content -->
         <!-- Recommended Content -->
         <div v-if="activeTab === '推荐'">
         <div v-if="activeTab === '推荐'">
           <!-- Personalized Recommendations -->
           <!-- Personalized Recommendations -->
@@ -674,4 +674,18 @@ onUnmounted(() => {
     clearInterval(carouselInterval)
     clearInterval(carouselInterval)
   }
   }
 })
 })
+
+const contentRef = ref(null) // 内容区域的ref引用
+
+// 监听activeTab变化，重置内容区域位置
+watch(activeTab, () => {
+  if (contentRef.value) {
+    const navHeight = document.querySelector('.sticky').offsetHeight;
+    const marginTop = parseInt(window.getComputedStyle(contentRef.value).marginTop);
+    window.scrollTo({
+      top: contentRef.value.offsetTop - navHeight - marginTop,
+      behavior: 'smooth'
+    });
+  }
+})
 </script>
 </script>