✨ feat: 新增头部信息滚动隐藏的功能

 <!--
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-10 13:54:25
+ * @LastEditTime: 2024-10-12 15:17:28
  * @FilePath: /hager/src/App.vue
  * @Description: 文件描述
 -->
@@ -60,7 +60,7 @@ body {
 }
 
 .wrapper {
-  margin-top: 5rem;
+  margin-top: 7rem;
   flex-grow: 1;
   &.xs {
     margin-top: 7rem;

 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-12 11:52:42
+ * @LastEditTime: 2024-10-12 15:16:42
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="hager-header">
+    <div class="header-top"></div>
     <el-row class="hidden-xs-only" style="background-color: #fff;">
       <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
       <el-col :sm="22" :md="22" :lg="18" :xl="16" style="position: relative;height: 5rem;">
@@ -264,6 +265,14 @@ export default {
     this.product_info = this.product_menu[0]['info'];
     // 修改数据结构显示
     this.product_info.product = this.splitProductList(this.product_info.product);
+    // 监听屏幕滚动
+    window.addEventListener('scroll', (evt) => {
+      if ($(window).scrollTop()) {
+        $('.header-top').css('height', 0);
+      } else {
+        $('.header-top').css('height', '2rem');
+      }
+    })
   },
   watch: {
     '$route' (to, from) {
@@ -373,6 +382,12 @@ export default {
     left: 0;
     right: 0;
     z-index: 9;
+    .header-top {
+      display: flex;
+      background-color: #00477e;
+      height: 2rem;
+      transition: all .4s ease-in-out;
+    }
     .product-center {
       position: absolute;
       top: 5rem;