From 3f2d362d2c1ea713b68b12511aed1aa7d6c1989a Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 01 十二月 2023 12:58:02 +0800
Subject: [PATCH] 全局顶部导航栏响应式布局
---
src/assets/lxzn_white.png | 0
src/components/tools/Logo.vue | 2 +-
src/components/page/GlobalHeader.vue | 51 +++++++++++++++++++++++++++++----------------------
3 files changed, 30 insertions(+), 23 deletions(-)
diff --git a/src/assets/lxzn_white.png b/src/assets/lxzn_white.png
new file mode 100644
index 0000000..b1a06bf
--- /dev/null
+++ b/src/assets/lxzn_white.png
Binary files differ
diff --git a/src/components/page/GlobalHeader.vue b/src/components/page/GlobalHeader.vue
index e9b6418..dd65673 100644
--- a/src/components/page/GlobalHeader.vue
+++ b/src/components/page/GlobalHeader.vue
@@ -25,7 +25,7 @@
<div v-else :class="['top-nav-header-index', theme]">
<div class="header-index-wide">
<div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
- <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader"/>
+ <logo class="top-nav-header" :show-title="showTitle" :style="topMenuStyle.topNavHeader"/>
<div class="top-nav-text">
<div style="width:100%;height: 50%;line-height:35px">瀵嗙骇锛氬唴閮�</div>
<div style="width:100%;height: 50%;line-height:25px">璀﹀憡锛氭湰绯荤粺绂佹瀛樺偍銆佸鐞嗐�佷紶杈撴秹瀵嗕俊鎭�</div>
@@ -101,7 +101,8 @@
headerIndexRight: {},
topSmenuStyle: {}
},
- chatStatus: ''
+ chatStatus: '',
+ showTitle: true
}
},
watch: {
@@ -125,6 +126,7 @@
if (this.mode === 'topmenu') {
this.buildTopMenuStyle()
}
+ window.addEventListener('resize', this.handleResize)
//update-end--author:sunjianlei---date:20190508------for: 椤堕儴瀵艰埅鏍忚繃闀挎椂鏄剧ず鏇村鎸夐挳-----
},
methods: {
@@ -154,8 +156,8 @@
this.topMenuStyle.headerIndexLeft = {}
} else {
let rightWidth = '360px'
- this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
- this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 165px)' }
+ this.topMenuStyle.topNavHeader = { 'min-width': '50px', width: '50px' }
+ this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 350px)' }
this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
this.topMenuStyle.headerIndexLeft = { 'width': `calc(100% - ${rightWidth})` }
}
@@ -166,9 +168,23 @@
// update-begin-author:sunjianlei date:20210508 for: 淇鍔ㄦ�佸姛鑳芥祴璇曡彍鍗曘�佸甫鍙傛暟鑿滃崟鏍囬閿欒銆佸睍寮�閿欒鐨勯棶棰�
handleUpdateMenuTitle(value) {
this.$emit('updateMenuTitle', value)
- }
+ },
// update-end-author:sunjianlei date:20210508 for: 淇鍔ㄦ�佸姛鑳芥祴璇曡彍鍗曘�佸甫鍙傛暟鑿滃崟鏍囬閿欒銆佸睍寮�閿欒鐨勯棶棰�
+ handleResize() {
+ console.log('瑙﹀彂灏哄鏀瑰彉', window.innerWidth)
+ if (window.innerWidth > 1680) {
+ this.showTitle = true
+ this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
+ this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 165px)' }
+ } else if (window.innerWidth <= 1680 && window.innerWidth > 1280) {
+ this.showTitle = false
+ this.topMenuStyle.topNavHeader = { 'min-width': '50px', width: '50px' }
+ this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 250px)' }
+ } else if (window.innerWidth <= 1280 && window.innerWidth > 960) {
+ this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 350px)' }
+ }
+ }
}
}
</script>
@@ -234,43 +250,34 @@
@media screen and (min-width: 1920px) {
.top-nav-text {
- width: 400px;
+ min-width: 400px;
}
}
@media screen and (min-width: 1680px) and (max-width: 1920px) {
.top-nav-text {
- width: 400px;
+ min-width: 300px;
}
}
@media screen and (min-width: 1400px) and (max-width: 1680px) {
.top-nav-text {
- width: 500px;
- }
-
- .top-nav-header {
- display: none;
+ min-width: 300px;
+ color: #00ff80;
}
}
@media screen and (min-width: 1280px) and (max-width: 1400px) {
.top-nav-text {
- width: 600px;
- }
-
- .top-nav-header {
- display: none;
+ min-width: 450px;
+ color: yellow;
}
}
@media screen and (max-width: 1280px) {
.top-nav-text {
- width: 600px;
- }
-
- .top-nav-header {
- display: none;
+ min-width: 300px;
+ color: white;
}
}
</style>
\ No newline at end of file
diff --git a/src/components/tools/Logo.vue b/src/components/tools/Logo.vue
index c02d0fd..08e69d6 100644
--- a/src/components/tools/Logo.vue
+++ b/src/components/tools/Logo.vue
@@ -3,7 +3,7 @@
<router-link :to="routerLinkTo">
<!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo棰滆壊鏍规嵁涓婚棰滆壊鍙樺寲 -->
- <img v-if="navTheme === 'dark'" src="~@/assets/lxzn.png" alt="logo">
+ <img v-if="navTheme === 'dark'" src="~@/assets/lxzn_white.png" alt="logo">
<img v-else src="~@/assets/lxzn.png" alt="logo">
<!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo棰滆壊鏍规嵁涓婚棰滆壊鍙樺寲 -->
--
Gitblit v1.9.3