feat: optimize header logo spacing and responsive design

- Add padding to logo container (15px 20px) for better spacing
- Use object-fit: contain for proper logo scaling
- Increase logo container width (140px) for better visibility
- Add alt attribute for accessibility
- Mobile responsive:
  - Logo height: 70px with 10px 15px padding
  - object-fit: contain ensures proper scaling
- Tablet responsive (768px-997px):
  - Adjusted logo width: 120px
  - Reduced padding: 12px 15px
- Large screen (1200px+):
  - Increased logo width: 160px
  - Increased padding: 15px 25px
- Clean up unused CSS comments

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/components/Header.vue

@@ -1,399 +1,385 @@
-<template>
-  <!-- 头部整体盒子 -->
-  <div id="header" class="container-fuild">
-    <!-- 头部顶部 -->
-    <div class="header-top container-fuild hidden-xs">
-      <div class="container">
-        <div class="server pull-left">
-          <span class="glyphicon glyphicon-earphone"></span>15086621233
-          <span class="glyphicon glyphicon-envelope"></span>zhanyuhangkong@163.com
-          <span class="glyphicon glyphicon-time"></span>全天候服务
-        </div>
-        <div class="shejiao pull-right">
-          <span class="glyphicon glyphicon-hand-right"></span>赶快联系我们吧！
-          <span class="glyphicon glyphicon-hand-left"></span>
-        </div>
-      </div>
-    </div>
-    <!-- 电脑导航 -->
-    <div class="header-nav container hidden-xs ">
-      <!-- 导航logo -->
-      <div class="header-nav-logo">
-        <img src="@/assets/img/logo_black.svg">
-      </div>
-      <!-- 导航内容 -->
-      <ul class="header-nav-wrapper">
-        <li
-          v-for="(item,index) in navList"
-          :key="index"
-          :class="index==navIndex?'active':''"
-          @click="navClick(index,item.name)"
-        >
-          <router-link :to="item.path">
-            {{ item.name }}
-            <span v-if="item.children.length>0" class="glyphicon glyphicon-menu-down"></span>
-            <i class="underline"></i>
-          </router-link>
-          <dl v-if="item.children.length>0">
-            <dt v-for="(i,n) in item.children" :key="n">
-              <router-link :to="i.path">{{ i.name }}</router-link>
-            </dt>
-          </dl>
-        </li>
-      </ul>
-    </div>
-    <!-- 手机导航 -->
-    <div class="header-nav-m container-fuild visible-xs">
-      <div class="header-nav-m-logo">
-        <img class="center-block" src="@/assets/img/logo_black.svg" alt="logo">
-      </div>
-      <!-- 导航栏 -->
-      <div class="header-nav-m-menu text-center">
-        {{ menuName }}
-        <div
-          class="header-nav-m-menu-wrapper"
-          data-toggle="collapse"
-          data-target="#menu"
-          @click="menuClick"
-        >
-          <span :class="menuClass"></span>
-        </div>
-        <!-- 导航内容 -->
-        <ul id="menu" class="header-nav-m-wrapper collapse">
-          <li
-            v-for="(item,index) in navList"
-            :key="index"
-            :class="index==navIndex?'active':''"
-            @click="navClick(index,item.name)"
-            data-toggle="collapse"
-            data-target="#menu"
-          >
-            <router-link :to="item.path">
-              {{ item.name }}
-              <i class="underline"></i>
-            </router-link>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "Header",
-  data() {
-    return {
-      navIndex: sessionStorage.getItem('navIndex') ? sessionStorage.getItem('navIndex') : 0,
-      menuName: "首页",
-      menuClass: "glyphicon glyphicon-menu-down",
-      navList: [
-        {
-          name: "首页",
-          path: "/",
-          children: []
-        },
-        {
-          name: "产品",
-          path: "/products",
-          children: [
-            {
-              name: "行业应用无人机",
-              path: "/products/djiAircraft"
-            },
-            {
-              name: "无人机负载",
-              path: "/products/payloads"
-            },
-            {
-              name: "软件与服务",
-              path: "/products/software"
-            },
-            {
-              name: "软件定制开发",
-              path: "/products/develop"
-            },
-            // {
-            //   name: "其他智能无人系统",
-            //   path: "/products/others"
-            // },
-            // {
-            //   name: "飞行咨询服务",
-            //   path: "/products/consult"
-            // },
-          ]
-        },
-        {
-          name: "解决方案",
-          path: "/solutions",
-          children: []
-        },
-        {
-          name: "公司动态",
-          path: "/news",
-          children: []
-        },
-        {
-          name: "公司介绍",
-          path: "/info",
-          children: []
-        },
-        // {
-        //   name: "加入我们",
-        //   path: "/joinus",
-        //   children: []
-        // },
-        // {
-        //   name: "联系我们",
-        //   path: "/contactus",
-        //   children: []
-        // }
-      ]
-    };
-  },
-  methods: {
-    navClick(index, name) {
-      this.navIndex = index;
-      sessionStorage.setItem('navIndex', index)
-      this.menuName = name;
-    },
-    menuClick() {
-      if (this.menuClass == "glyphicon glyphicon-menu-down") {
-        this.menuClass = "glyphicon glyphicon-menu-up";
-      } else {
-        this.menuClass = "glyphicon glyphicon-menu-down";
-      }
-    }
-  }
-};
-</script>
-<style scoped>
-/* 顶部 */
-#header {
-  background: #f4f4f4;
-  transition: all ease 0.6s;
-  box-shadow: 0 1px 2px lightgrey;
-}
-
-#header .header-top {
-  height: 30px;
-  color: #fff;
-  font-size: 10px;
-  line-height: 30px;
-  background: #474747;
-}
-
-/* 顶部的图标 */
-#header .header-top span {
-  margin: 0 8px;
-}
-
-/* 导航栏 */
-#header .header-nav {
-  height: 80px;
-
-}
-
-/* 导航栏logo */
-#header .header-nav .header-nav-logo {
-  width: 120px;
-  height: 80px;
-  float: left;
-  position: relative;
-}
-
-/* 导航栏logo图片 */
-#header .header-nav .header-nav-logo img {
-  width: 120px;
-  height: 80px;
-  position: absolute;
-  top: 10px;
-  left: 0;
-  right: 10px;
-  bottom: 10px;
-  margin: auto;
-}
-
-/* 导航栏 导航容器 */
-#header .header-nav-fixed .header-nav-wrapper {
-  line-height: 30px;
-}
-
-#header .header-nav .header-nav-wrapper {
-//line-height: 80px; margin-top: 47px; float: right; //margin: 0; max-width: 800px;
-}
-
-/* 导航栏 每个导航 */
-#header .header-nav .header-nav-wrapper > li {
-  float: left;
-  margin: 0 15px;
-  position: relative;
-}
-
-/* 导航栏 每个导航下面的 a 链接 */
-#header .header-nav .header-nav-wrapper > li > a {
-  color: #000;
-  font-size: 14px;
-  font-weight: bold;
-  padding: 13px 0;
-  position: relative;
-}
-
-/* 导航栏 每个导航下面的 a 链接的下划线 */
-#header .header-nav .header-nav-wrapper > li > a > i {
-  display: block;
-  position: absolute;
-  bottom: -2px;
-  left: 50%;
-  width: 0;
-  height: 1px;
-  opacity: 0;
-  transition: all 0.3s ease;
-  background-color: #1e73be;
-}
-
-/* 导航栏 每个导航下面的 a 链接的右侧小三角 */
-#header .header-nav .header-nav-wrapper > li > a > span {
-  font-size: 10px;
-  transition: transform ease 0.4s;
-}
-
-/* 导航栏 每个导航下面的 a 链接 鼠标滑上去的样式 */
-#header .header-nav .header-nav-wrapper > li > a:hover {
-  color: #1e73be;
-  text-decoration: none;
-}
-
-/* 导航栏 每个导航下面的 a 链接 鼠标滑上去下划线的样式 */
-#header .header-nav .header-nav-wrapper > li > a:hover .underline {
-  opacity: 1;
-  width: 100%;
-  left: 0;
-}
-
-/* 导航栏 每个导航下面的 a 链接 鼠标滑上去三角标的样式 */
-#header .header-nav .header-nav-wrapper > li > a:hover span {
-  transform: rotate(180deg);
-}
-
-/* 导航栏 每个导航下面的 a 链接 鼠标点击后的样式 */
-#header .header-nav .header-nav-wrapper > li.active > a {
-  color: #1e73be;
-  text-decoration: none;
-  border-bottom: 2px solid #1e73be;
-}
-
-/* 导航栏 每个导航下面的二级导航容器 */
-#header .header-nav .header-nav-wrapper > li > dl {
-  display: none;
-  position: absolute;
-  width: 150px;
-  margin-top: 14px;
-  left: 0;
-  z-index: 999999;
-  box-shadow: 0 0 1px 1px #f3f3f3;
-  border-radius: 5px;
-  background: #fff;
-}
-
-/* 导航栏 每个导航下面的二级导航容器的每个导航 */
-#header .header-nav .header-nav-wrapper > li > dl > dt {
-  width: 100%;
-  padding: 10px;
-  border-bottom: 1px solid #f3f3f3;
-}
-
-/* 导航栏 每个导航下面的二级导航容器的每个导航 当鼠标滑上时的样式*/
-#header .header-nav .header-nav-wrapper > li > dl > dt > a:hover {
-  text-decoration: none;
-}
-
-/* 导航栏 滑上一级导航显示二级导航 */
-#header .header-nav .header-nav-wrapper > li:hover dl {
-  display: block;
-
-}
-
-#header .header-nav .header-nav-wrapper > li > dl > dt:hover {
-  cursor: pointer;
-  background: #f5f5f5;
-  text-decoration: underline;
-  text-decoration-color: #1e73be;
-}
-
-@media screen and (max-width: 997px) {
-  #header .header-nav-m {
-  }
-
-  /* 导航栏logo容器 */
-  #header .header-nav-m .header-nav-m-logo {
-    height: 80px;
-    position: relative;
-  }
-
-  /* 导航栏logo图片 */
-  #header .header-nav-m .header-nav-m-logo img {
-    width: 180px;
-    height: 60px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-  }
-
-  /* 导航栏  菜单容器 */
-  #header .header-nav-m .header-nav-m-menu {
-    color: #fff;
-    height: 40px;
-    font-size: 13px;
-    line-height: 40px;
-    background: #474747;
-    position: relative;
-  }
-
-  /* 导航栏 菜单图标 */
-  #header .header-nav-m .header-nav-m-menu-wrapper {
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    margin-top: -20px;
-    width: 50px;
-    height: 40px;
-    color: #fff;
-    z-index: 999999;
-    font-size: 12px;
-  }
-
-  /* 导航栏 */
-  #header .header-nav-m .header-nav-m-wrapper {
-    position: absolute;
-    top: 40px;
-    left: 0;
-    width: 100%;
-    background: #474747;
-    z-index: 9999999;
-  }
-
-  /* 导航栏 每个导航 */
-  #header .header-nav-m .header-nav-m-wrapper > li {
-    height: 40px;
-    line-height: 40px;
-    border-bottom: 1px solid #ccc;
-  }
-
-  /* 导航栏 每个导航下面的 a 链接 */
-  #header .header-nav-m .header-nav-m-wrapper > li > a {
-    color: #fff;
-    font-size: 13px;
-    font-weight: bold;
-    padding: 15px 0;
-    position: relative;
-  }
-
-  /* 导航栏 每个导航下面的 a 链接的右侧小三角 */
-  #header .header-nav .header-nav-wrapper > li > a > span {
-    font-size: 10px;
-  }
-}
-</style>
+<template>
+  <!-- 头部整体盒子 -->
+  <div id="header" class="container-fuild">
+    <!-- 头部顶部 -->
+    <div class="header-top container-fuild hidden-xs">
+      <div class="container">
+        <div class="server pull-left">
+          <span class="glyphicon glyphicon-earphone"></span>15086621233
+          <span class="glyphicon glyphicon-envelope"></span>zhanyuhangkong@163.com
+          <span class="glyphicon glyphicon-time"></span>全天候服务
+        </div>
+        <div class="shejiao pull-right">
+          <span class="glyphicon glyphicon-hand-right"></span>赶快联系我们吧！
+          <span class="glyphicon glyphicon-hand-left"></span>
+        </div>
+      </div>
+    </div>
+    <!-- 电脑导航 -->
+    <div class="header-nav container hidden-xs ">
+      <!-- 导航 logo -->
+      <div class="header-nav-logo">
+        <img src="@/assets/img/logo_black.svg" alt="logo">
+      </div>
+      <!-- 导航内容 -->
+      <ul class="header-nav-wrapper">
+        <li
+          v-for="(item,index) in navList"
+          :key="index"
+          :class="index==navIndex?'active':''"
+          @click="navClick(index,item.name)"
+        >
+          <router-link :to="item.path">
+            {{ item.name }}
+            <span v-if="item.children.length>0" class="glyphicon glyphicon-menu-down"></span>
+            <i class="underline"></i>
+          </router-link>
+          <dl v-if="item.children.length>0">
+            <dt v-for="(i,n) in item.children" :key="n">
+              <router-link :to="i.path">{{ i.name }}</router-link>
+            </dt>
+          </dl>
+        </li>
+      </ul>
+    </div>
+    <!-- 手机导航 -->
+    <div class="header-nav-m container-fuild visible-xs">
+      <div class="header-nav-m-logo">
+        <img class="center-block" src="@/assets/img/logo_black.svg" alt="logo">
+      </div>
+      <!-- 导航栏 -->
+      <div class="header-nav-m-menu text-center">
+        {{ menuName }}
+        <div
+          class="header-nav-m-menu-wrapper"
+          data-toggle="collapse"
+          data-target="#menu"
+          @click="menuClick"
+        >
+          <span :class="menuClass"></span>
+        </div>
+        <!-- 导航内容 -->
+        <ul id="menu" class="header-nav-m-wrapper collapse">
+          <li
+            v-for="(item,index) in navList"
+            :key="index"
+            :class="index==navIndex?'active':''"
+            @click="navClick(index,item.name)"
+            data-toggle="collapse"
+            data-target="#menu"
+          >
+            <router-link :to="item.path">
+              {{ item.name }}
+              <i class="underline"></i>
+            </router-link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Header",
+  data() {
+    return {
+      navIndex: sessionStorage.getItem('navIndex') ? sessionStorage.getItem('navIndex') : 0,
+      menuName: "首页",
+      menuClass: "glyphicon glyphicon-menu-down",
+      navList: [
+        {
+          name: "首页",
+          path: "/",
+          children: []
+        },
+        {
+          name: "产品",
+          path: "/products",
+          children: [
+            {
+              name: "行业应用无人机",
+              path: "/products/djiAircraft"
+            },
+            {
+              name: "无人机负载",
+              path: "/products/payloads"
+            },
+            {
+              name: "软件与服务",
+              path: "/products/software"
+            },
+            {
+              name: "软件定制开发",
+              path: "/products/develop"
+            },
+          ]
+        },
+        {
+          name: "解决方案",
+          path: "/solutions",
+          children: []
+        },
+        {
+          name: "公司动态",
+          path: "/news",
+          children: []
+        },
+        {
+          name: "公司介绍",
+          path: "/info",
+          children: []
+        },
+      ]
+    };
+  },
+  methods: {
+    navClick(index, name) {
+      this.navIndex = index;
+      sessionStorage.setItem('navIndex', index)
+      this.menuName = name;
+    },
+    menuClick() {
+      if (this.menuClass == "glyphicon glyphicon-menu-down") {
+        this.menuClass = "glyphicon glyphicon-menu-up";
+      } else {
+        this.menuClass = "glyphicon glyphicon-menu-down";
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+/* 顶部 */
+#header {
+  background: #f4f4f4;
+  transition: all ease 0.6s;
+  box-shadow: 0 1px 2px lightgrey;
+}
+
+#header .header-top {
+  height: 30px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 30px;
+  background: #474747;
+}
+
+/* 顶部的图标 */
+#header .header-top span {
+  margin: 0 8px;
+}
+
+/* 导航栏 */
+#header .header-nav {
+  height: 80px;
+}
+
+/* 导航栏 logo */
+#header .header-nav .header-nav-logo {
+  width: 140px;
+  height: 80px;
+  float: left;
+  padding: 15px 20px;
+  box-sizing: border-box;
+}
+
+/* 导航栏 logo 图片 */
+#header .header-nav .header-nav-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* 导航栏 导航容器 */
+#header .header-nav-fixed .header-nav-wrapper {
+  line-height: 30px;
+}
+
+#header .header-nav .header-nav-wrapper {
+  float: right;
+}
+
+/* 导航栏 每个导航 */
+#header .header-nav .header-nav-wrapper > li {
+  float: left;
+  margin: 0 15px;
+  position: relative;
+}
+
+/* 导航栏 每个导航下面的 a 链接 */
+#header .header-nav .header-nav-wrapper > li > a {
+  color: #000;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 13px 0;
+  position: relative;
+}
+
+/* 导航栏 每个导航下面的 a 链接的下划线 */
+#header .header-nav .header-nav-wrapper > li > a > i {
+  display: block;
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  width: 0;
+  height: 1px;
+  opacity: 0;
+  transition: all 0.3s ease;
+  background-color: #1e73be;
+}
+
+/* 导航栏 每个导航下面的 a 链接的右侧小三角 */
+#header .header-nav .header-nav-wrapper > li > a > span {
+  font-size: 10px;
+  transition: transform ease 0.4s;
+}
+
+/* 导航栏 每个导航下面的 a 链接 鼠标滑上去的样式 */
+#header .header-nav .header-nav-wrapper > li > a:hover {
+  color: #1e73be;
+  text-decoration: none;
+}
+
+/* 导航栏 每个导航下面的 a 链接 鼠标滑上去下划线的样式 */
+#header .header-nav .header-nav-wrapper > li > a:hover .underline {
+  opacity: 1;
+  width: 100%;
+  left: 0;
+}
+
+/* 导航栏 每个导航下面的 a 链接 鼠标滑上去三角标的样式 */
+#header .header-nav .header-nav-wrapper > li > a:hover span {
+  transform: rotate(180deg);
+}
+
+/* 导航栏 每个导航下面的 a 链接 鼠标点击后的样式 */
+#header .header-nav .header-nav-wrapper > li.active > a {
+  color: #1e73be;
+  text-decoration: none;
+  border-bottom: 2px solid #1e73be;
+}
+
+/* 导航栏 每个导航下面的二级导航容器 */
+#header .header-nav .header-nav-wrapper > li > dl {
+  display: none;
+  position: absolute;
+  width: 150px;
+  margin-top: 14px;
+  left: 0;
+  z-index: 999999;
+  box-shadow: 0 0 1px 1px #f3f3f3;
+  border-radius: 5px;
+  background: #fff;
+}
+
+/* 导航栏 每个导航下面的二级导航容器的每个导航 */
+#header .header-nav .header-nav-wrapper > li > dl > dt {
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #f3f3f3;
+}
+
+/* 导航栏 每个导航下面的二级导航容器的每个导航 当鼠标滑上时的样式 */
+#header .header-nav .header-nav-wrapper > li > dl > dt > a:hover {
+  text-decoration: none;
+}
+
+/* 导航栏 滑上一级导航显示二级导航 */
+#header .header-nav .header-nav-wrapper > li:hover dl {
+  display: block;
+}
+
+#header .header-nav .header-nav-wrapper > li > dl > dt:hover {
+  cursor: pointer;
+  background: #f5f5f5;
+  text-decoration: underline;
+  text-decoration-color: #1e73be;
+}
+
+/* 移动端适配 */
+@media screen and (max-width: 997px) {
+  /* 导航栏 logo 容器 */
+  #header .header-nav-m .header-nav-m-logo {
+    height: 70px;
+    padding: 10px 15px;
+    box-sizing: border-box;
+  }
+
+  /* 导航栏 logo 图片 */
+  #header .header-nav-m .header-nav-m-logo img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  /* 导航栏 菜单容器 */
+  #header .header-nav-m .header-nav-m-menu {
+    color: #fff;
+    height: 40px;
+    font-size: 13px;
+    line-height: 40px;
+    background: #474747;
+    position: relative;
+  }
+
+  /* 导航栏 菜单图标 */
+  #header .header-nav-m .header-nav-m-menu-wrapper {
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    margin-top: -20px;
+    width: 50px;
+    height: 40px;
+    color: #fff;
+    z-index: 999999;
+    font-size: 12px;
+  }
+
+  /* 导航栏 */
+  #header .header-nav-m .header-nav-m-wrapper {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    width: 100%;
+    background: #474747;
+    z-index: 9999999;
+  }
+
+  /* 导航栏 每个导航 */
+  #header .header-nav-m .header-nav-m-wrapper > li {
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #ccc;
+  }
+
+  /* 导航栏 每个导航下面的 a 链接 */
+  #header .header-nav-m .header-nav-m-wrapper > li > a {
+    color: #fff;
+    font-size: 13px;
+    font-weight: bold;
+    padding: 15px 0;
+    position: relative;
+  }
+
+  /* 导航栏 每个导航下面的 a 链接的右侧小三角 */
+  #header .header-nav .header-nav-wrapper > li > a > span {
+    font-size: 10px;
+  }
+}
+
+/* 平板适配 */
+@media screen and (min-width: 768px) and (max-width: 997px) {
+  #header .header-nav .header-nav-logo {
+    width: 120px;
+    padding: 12px 15px;
+  }
+}
+
+/* 大屏幕优化 */
+@media screen and (min-width: 1200px) {
+  #header .header-nav .header-nav-logo {
+    width: 160px;
+    padding: 15px 25px;
+  }
+}
+</style>