Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4ebdcc71 1 parent c1e14c54

✨ feat: 新增头部信息滚动隐藏的功能

Inline Side-by-side
Showing 2 changed files with 18 additions and 3 deletions
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:36:06 2 * @Date: 2024-09-26 13:36:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-10 13:54:25 4 + * @LastEditTime: 2024-10-12 15:17:28
5 * @FilePath: /hager/src/App.vue 5 * @FilePath: /hager/src/App.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -60,7 +60,7 @@ body { ...@@ -60,7 +60,7 @@ body {
60 } 60 }
61 61
62 .wrapper { 62 .wrapper {
63 - margin-top: 5rem; 63 + margin-top: 7rem;
64 flex-grow: 1; 64 flex-grow: 1;
65 &.xs { 65 &.xs {
66 margin-top: 7rem; 66 margin-top: 7rem;
......
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:42:11 2 * @Date: 2024-09-26 13:42:11
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-12 11:52:42 4 + * @LastEditTime: 2024-10-12 15:16:42
5 * @FilePath: /hager/src/components/common/hagerHeader.vue 5 * @FilePath: /hager/src/components/common/hagerHeader.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-header"> 9 <div class="hager-header">
10 + <div class="header-top"></div>
10 <el-row class="hidden-xs-only" style="background-color: #fff;"> 11 <el-row class="hidden-xs-only" style="background-color: #fff;">
11 <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col> 12 <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
12 <el-col :sm="22" :md="22" :lg="18" :xl="16" style="position: relative;height: 5rem;"> 13 <el-col :sm="22" :md="22" :lg="18" :xl="16" style="position: relative;height: 5rem;">
...@@ -264,6 +265,14 @@ export default { ...@@ -264,6 +265,14 @@ export default {
264 this.product_info = this.product_menu[0]['info']; 265 this.product_info = this.product_menu[0]['info'];
265 // 修改数据结构显示 266 // 修改数据结构显示
266 this.product_info.product = this.splitProductList(this.product_info.product); 267 this.product_info.product = this.splitProductList(this.product_info.product);
268 + // 监听屏幕滚动
269 + window.addEventListener('scroll', (evt) => {
270 + if ($(window).scrollTop()) {
271 + $('.header-top').css('height', 0);
272 + } else {
273 + $('.header-top').css('height', '2rem');
274 + }
275 + })
267 }, 276 },
268 watch: { 277 watch: {
269 '$route' (to, from) { 278 '$route' (to, from) {
...@@ -373,6 +382,12 @@ export default { ...@@ -373,6 +382,12 @@ export default {
373 left: 0; 382 left: 0;
374 right: 0; 383 right: 0;
375 z-index: 9; 384 z-index: 9;
385 + .header-top {
386 + display: flex;
387 + background-color: #00477e;
388 + height: 2rem;
389 + transition: all .4s ease-in-out;
390 + }
376 .product-center { 391 .product-center {
377 position: absolute; 392 position: absolute;
378 top: 5rem; 393 top: 5rem;
......