hookehuyr

头部导航组件显示优化

<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-27 13:35:32
* @LastEditTime: 2024-09-29 14:19:50
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
<template>
<div class="hager-header">
<el-row class="hidden-xs-only">
<el-row class="hidden-xs-only" style="background-color: #fff;">
<el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
<el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;">
<el-row>
<el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;height: 5rem;">
<el-row style="">
<el-col :sm="16" :md="16" :lg="16" :xl="16">
<div style="display: flex; background-color: gray;">
<div style="display: flex;height: 5rem; align-items: center; justify-content: space-around;">
<div>图标</div>
<div @click="onClickProduct">产品中心</div>
<div>解决方案</div>
......@@ -24,10 +24,13 @@
</div>
</el-col>
<el-col :sm="8" :md="8" :lg="8" :xl="8">
<div style="display: flex; background-color: blue;">
<div>搜索</div>
<div>地球仪</div>
<div>用户</div>
<div style="display: flex; height: 5rem; align-items: center;justify-content: right;">
<div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid# f5f5f5; background-color: #e3f1f7; padding: 0.5rem 1rem;">
<i class=el-icon-zoom-out></i>&nbsp;
<input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
</div>
<div style="margin: 0 1rem;"><i class=el-icon-eleme></i></div>
<div><i class=el-icon-eleme></i></div>
</div>
</el-col>
</el-row>
......@@ -224,7 +227,7 @@ export default {
z-index: 9;
.product-center {
position: absolute;
top: 2rem;
top: 5rem;
left: 0;
width: 100%;
height: auto;
......