Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f5d326dd 1 parent 35eae704

头部组件显示调整

Inline Side-by-side
Showing 3 changed files with 65 additions and 32 deletions
<!--
* @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;
......
<!--
* @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 loca­l­ised in the follo­wing 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">
<div class="nav-wrapper">
<el-col :sm="6" :md="6" :lg="6" :xl="6">
<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;
<input style="border: 0;background-color: #e3f1f7; width: 100%;" placeholder="搜索" />
<i class="el-icon-search" style="color: #00477E; padding-right: 0.5rem;"></i>&nbsp;
<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 once_header_height = 5; // 选择国家地区高度
// let hidden_header_height = 2; // 可隐藏高度s
if (this.choose_country) { // 没有点击国家地区
margin_top += once_header_height;
}
$('.wrapper').css('marginTop', margin_top + 'rem');
// let margin_top = 5; // 默认高度
// let once_header_height = 5; // 选择国家地区高度
// // let hidden_header_height = 2; // 可隐藏高度s
// if (this.choose_country) { // 没有点击国家地区
// margin_top += once_header_height;
// }
// 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;
......
// 自定义颜色
@primary-color: #3498db;
@secondary-color: #03467c;
@primary-color: #00ABE5;
@secondary-color: #00477E;
@text-color: #333;
@secondary-text-color: #999;
@background-color: #f5f5f5;
......