头部组件显示调整

hookehuyr
Commit f5d326ddbf8402b2a4209e8cd43d1f77b4f4bae8 f5d326dd 1 parent 35eae704
Showing 3 changed files with 65 additions and 32 deletions
src/App.vue
src/components/common/hagerHeader.vue
src/styles/variables.less
--- a/src/App.vue
View file @f5d326d
+++ b/src/App.vue
View file @f5d326d
 <!--
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-12 15:39:20
+ * @LastEditTime: 2024-10-15 16:26:25
  * @FilePath: /hager/src/App.vue
  * @Description: 文件描述
 -->
@@ -60,6 +60,7 @@ body {
 }
 .wrapper {
+  margin-top: 10rem;
   flex-grow: 1;
   &.xs {
     margin-top: 7rem;
--- a/src/components/common/hagerHeader.vue
View file @f5d326d
+++ b/src/components/common/hagerHeader.vue
View file @f5d326d
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-15 11:01:58
+ * @LastEditTime: 2024-10-15 16:31:18
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="hager-header">
-    <div v-if="choose_country" class="location-banner">
-      <div>You are localised in the following country : </div>
-      <div></div>
-    </div>
-    <!-- <div class="header-top hidden-xs-only"></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;">
         <el-row>
-          <el-col :sm="16" :md="16" :lg="16" :xl="16">
+          <el-col :sm="6" :md="6" :lg="6" :xl="6">
-            <div class="nav-wrapper">
+            <div class="nav-logo">
               <div>图标</div>
-              <div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct" @mouseenter="onClickProduct">产品中心</div>
-              <div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
-              <div :class="[is_active === '新闻中心' ? 'active' : '', 'item']">新闻中心</div>
-              <div :class="[is_active === '招聘信息' ? 'active' : '', 'item']">招聘信息</div>
-              <div :class="[is_active === '关于海格' ? 'active' : '', 'item']">关于海格</div>
-              <div :class="[is_active === '联系我们' ? 'active' : '', 'item']">联系我们</div>
-              <div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div>
             </div>
           </el-col>
-          <el-col :sm="8" :md="8" :lg="8" :xl="8">
+          <el-col :sm="10" :md="10" :lg="10" :xl="10">
             <el-row class="nav-right">
-              <el-col :sm="18" :md="18" :lg="18" :xl="18">
+              <el-col>
                 <div class="search">
-                  <i class=el-icon-search></i>&nbsp;
+                  <i class="el-icon-search" style="color: #00477E; padding-right: 0.5rem;"></i>&nbsp;
-                  <input style="border: 0;background-color: #e3f1f7; width: 100%;" placeholder="搜索" />
+                  <input placeholder="搜索" />
                 </div>
               </el-col>
+            </el-row>
+          </el-col>
+          <el-col :sm="8" :md="8" :lg="8" :xl="8">
+            <el-row class="nav-right">
               <el-col :sm="3" :md="3" :lg="3" :xl="3">
                 <div @click="goToWeb" class="tooltip">
                   <el-tooltip class="item" effect="dark" content="国际站" placement="bottom">
@@ -53,6 +45,28 @@
             </el-row>
           </el-col>
         </el-row>
+      </el-col>
+      <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
+    </el-row>
+    <el-row class="hidden-xs-only" style="background-color: #fff; border-top: 1px solid rgba(218, 218, 218, 0.4);">
+      <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;">
+        <el-row>
+          <el-col :sm="16" :md="16" :lg="16" :xl="16">
+            <div class="nav-wrapper">
+              <div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct" @mouseenter="onClickProduct">
+                <i class="el-icon-s-operation"></i>
+                产品中心
+              </div>
+              <div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
+              <div :class="[is_active === '新闻中心' ? 'active' : '', 'item']">新闻中心</div>
+              <div :class="[is_active === '招聘信息' ? 'active' : '', 'item']">招聘信息</div>
+              <div :class="[is_active === '关于海格' ? 'active' : '', 'item']">关于海格</div>
+              <div :class="[is_active === '联系我们' ? 'active' : '', 'item']">联系我们</div>
+              <div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div>
+            </div>
+          </el-col>
+        </el-row>
         <el-collapse-transition>
           <div v-show="show" class="product-center" v-click-outside="closeMenu">
             <div style="display: flex; width: 100%;">
@@ -264,18 +278,20 @@ export default {
       p_index: 0,
       show_menu: false,
       margin_top: 0,
-      choose_country: false, // 主动选择了国家地区
+      // choose_country: false, // 主动选择了国家地区
     }
   },
   mounted () {
     //
-    let margin_top = 5; // 默认高度
+    // let margin_top = 5; // 默认高度
-    let once_header_height = 5; // 选择国家地区高度
+    // let once_header_height = 5; // 选择国家地区高度
-    // let hidden_header_height = 2; // 可隐藏高度s
+    // // let hidden_header_height = 2; // 可隐藏高度s
-    if (this.choose_country) { // 没有点击国家地区
+    // if (this.choose_country) { // 没有点击国家地区
-      margin_top += once_header_height;
+    //   margin_top += once_header_height;
-    }
+    // }
-    $('.wrapper').css('marginTop', margin_top + 'rem');
+    // this.$nextTick(() => {
+    //   $('.wrapper').css('marginTop', margin_top + 'rem');
+    // })
     // 监听屏幕滚动
     // $('.wrapper').css('marginTop', margin_top + hidden_header_height + 'rem');
     // window.addEventListener('scroll', (evt) => {
@@ -492,13 +508,21 @@ export default {
         }
       }
     }
-    .nav-wrapper {
+    .nav-logo {
       display: flex;
       height: 5rem;
       align-items: center;
-      justify-content: space-around;
+    }
+    .nav-wrapper {
+      display: flex;
+      height: 5rem;
+      // align-items: center;
+      // justify-content: space-around;
+      margin-top: 1.25rem;
       .item {
         color: @secondary-color;
+        margin-right: 1.5rem;
+        font-size: 0.95rem;
         &:hover {
           cursor: pointer;
         }
@@ -519,6 +543,14 @@ export default {
         border: 1px solid #f5f5f5;
         background-color: #e3f1f7;
         padding: 0.5rem 1rem;
+        input {
+          border: 0;
+          background-color: #E3F1F7;
+          width: 100%;
+          &::placeholder {
+            color: #00477E;
+          }
+        }
       }
       .tooltip {
         margin: 0 1rem;
--- a/src/styles/variables.less
View file @f5d326d
+++ b/src/styles/variables.less
View file @f5d326d
 // 自定义颜色
-@primary-color: #3498db;
+@primary-color: #00ABE5;
-@secondary-color: #03467c;
+@secondary-color: #00477E;
 @text-color: #333;
 @secondary-text-color: #999;
 @background-color: #f5f5f5;