Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9b51d9e1 1 parent cac79a48

fix 修复头部组件自适应显示

Inline Side-by-side
Showing 2 changed files with 20 additions and 9 deletions
......@@ -7,7 +7,6 @@ export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
copy: typeof import('./src/components/hagerMore copy.vue')['default']
ElBreadcrumb: typeof import('element-ui/lib/breadcrumb')['default']
ElBreadcrumbItem: typeof import('element-ui/lib/breadcrumb-item')['default']
ElCarousel: typeof import('element-ui/lib/carousel')['default']
......
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-20 18:49:12
* @LastEditTime: 2024-10-21 12:59:17
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -101,20 +101,22 @@
</el-col>
<el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
</el-row>
<div v-if="is_xs" style="background-color: #fff; padding: 0.5rem 1rem;">
<div style="display: flex; align-items: center;justify-content: space-between;">
<div @click="openMenu"><i class="el-icon-menu"></i></div>
<div class="mobile-menu-wrapper" v-if="is_xs">
<div class="mobile-menu">
<div @click="openMenu">
<el-image style="width: auto; height: 0.65rem" src="https://cdn.ipadbiz.cn/hager/icon/%E8%8F%9C%E5%8D%95@2x.png" fit="fit"></el-image>&nbsp;
</div>
<div>
<el-image style="height: 2rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
<el-image style="height: 2rem;" src="https://cdn.ipadbiz.cn/hager/icon/logo@2x.png" fit="cover"></el-image>
</div>
<div>
<i class=el-icon-orange style="font-size: 1.25rem;"></i>
<i class=el-icon-user style="font-size: 1.25rem;"></i>
<el-image @click="goToWeb" style="width: 1rem; height: 1rem" src="https://cdn.ipadbiz.cn/hager/icon/%E8%AF%AD%E8%A8%80@2x.png" fit="fit"></el-image>&nbsp;&nbsp;
<el-image @click="goToLogin" style="width: 1rem; height: 1rem" src="https://cdn.ipadbiz.cn/hager/icon/%E7%99%BB%E9%99%86@2x.png" fit="fit"></el-image>
</div>
</div>
<div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid #f5f5f5; background-color: #e3f1f7; padding: 0.5rem 1rem; margin-top: 1rem;">
<i class=el-icon-search></i>&nbsp;
<input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
<input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" v-model="keyword" @blur="goToSearch" @keydown.enter="goToSearch" />
</div>
<el-collapse-transition>
<div v-show="show_menu" class="menu-mini">
......@@ -649,5 +651,15 @@ export default {
height: calc(100vh - 6.7rem);
background-color: #F7F7F7;
}
.mobile-menu-wrapper {
background-color: #fff;
padding: 0.5rem 1rem;
.mobile-menu {
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
</style>
......