Skip to content

Commit 260f0e5

Browse files
author
潘卓然ParnDeedlit
committed
【站点】【样式】【实现新版的暗色样式细节】
1 parent 4977550 commit 260f0e5

File tree

2 files changed

+221
-281
lines changed

2 files changed

+221
-281
lines changed

‎website/src/views/layout/components/Header/Header.vue‎

Lines changed: 120 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,126 @@
11
<template>
2-
<div :class="{'mapgis-header': true, 'mapgis-header-mobile': mobile}">
3-
<router-link to="/">
4-
<div class="mapgis-webclient-header">
5-
<img
6-
:src="logo"
7-
class="mapgis-webclient-logo"
8-
>
9-
<span
10-
v-if="!mobile"
11-
class="mapgis-webclient-text"
12-
>
13-
Client for JavaScript
14-
</span>
15-
</div>
16-
</router-link>
17-
<IconFont
18-
:style="style"
19-
type="iconicon_commonly_barmenu"
20-
class="mapgis-webclient-menu-icon"
21-
@click="isShowMenu = !isShowMenu"
22-
/>
23-
<div :class="['mapgis-webclient-menu',{'is-show':isShowMenu}]">
24-
<div class="mapgis-webclient-nav">
25-
<el-popover
26-
v-for="(h,i) in mobile ? mobileHeaders : headers"
27-
:key="i"
28-
placement="top-start"
29-
trigger="hover"
30-
>
31-
<header-menu
32-
:menus="h.menus"
33-
:icon="h.icon"
34-
/>
35-
<el-button
36-
type="text"
37-
slot="reference"
38-
:class="{'active': isActiveMenu(h.title)}"
39-
>
40-
<IconFont
41-
:type="h.icon"
42-
class="menu-icon"
43-
/>
44-
{{h.title}}
45-
</el-button>
46-
</el-popover>
47-
<div v-if="mobile">
48-
<el-popover
49-
v-for="h in mobileSubheaders"
50-
:key="h.title"
51-
placement="top-start"
52-
trigger="hover"
53-
>
54-
<header-sub-menu
55-
:active="activeTabs[h.title]"
56-
:menus="h.menus"
57-
/>
58-
<el-button
59-
type="text"
60-
slot="reference"
61-
>{{h.title}}</el-button>
62-
</el-popover>
63-
</div>
2+
<div :class="{ 'mapgis-header': true, 'mapgis-header-mobile': mobile }">
3+
<router-link to="/">
4+
<div class="mapgis-webclient-header">
5+
<img :src="logo" class="mapgis-webclient-logo" />
6+
<span v-if="!mobile" class="mapgis-webclient-text"> Client for JavaScript </span>
7+
</div>
8+
</router-link>
9+
<IconFont :style="style" type="iconicon_commonly_barmenu" class="mapgis-webclient-menu-icon" @click="isShowMenu = !isShowMenu" />
10+
<div :class="['mapgis-webclient-menu', { 'is-show': isShowMenu }]">
11+
<div class="mapgis-webclient-nav">
12+
<el-popover v-for="(h, i) in mobile ? mobileHeaders : headers" :key="i" placement="top-start" trigger="hover">
13+
<header-menu :menus="h.menus" :icon="h.icon" />
14+
<el-button type="text" slot="reference" :class="{ active: isActiveMenu(h.title) }">
15+
<IconFont :type="h.icon" class="menu-icon" />
16+
{{ h.title }}
17+
</el-button>
18+
</el-popover>
19+
<div v-if="mobile">
20+
<el-popover v-for="h in mobileSubheaders" :key="h.title" placement="top-start" trigger="hover">
21+
<header-sub-menu :active="activeTabs[h.title]" :menus="h.menus" />
22+
<el-button type="text" slot="reference">{{ h.title }}</el-button>
23+
</el-popover>
24+
</div>
25+
</div>
6426
</div>
6527
</div>
66-
</div>
6728
</template>
6829

6930
<script>
70-
import { isMobile } from "@/utils/mobile";
31+
import { isMobile } from '@/utils/mobile';
7132
import HeaderMenu from './Menu';
7233
import HeaderSubMenu from './SubMenu';
7334
import axios from 'axios';
74-
import IconFont from "@/components/IconFont/iconfront";
35+
import IconFont from '@/components/IconFont/iconfront';
7536
7637
export default {
77-
components: {
78-
IconFont,
79-
HeaderMenu,
80-
HeaderSubMenu,
81-
},
82-
data () {
83-
return {
84-
mobile: isMobile(),
85-
logo: './static/assets/logo/mapgis_blue.png',
86-
activeMenu: '',
87-
activeTabs: {},
88-
urls: ['config-headers.json', 'config-headers-sub.json', 'config-headers-mobile.json', 'config-headers-sub-mobile.json'],
89-
headers: [],
90-
subheaders: [],
91-
mobileHeaders: [],
92-
mobileSubheaders: [],
93-
isShowMenu: false,
94-
style: {
95-
fontSize: '24px',
96-
color: '#FFFFFF',
97-
lineHeight: '72px'
98-
}
99-
};
100-
},
101-
created () {
102-
const vm = this;
103-
const { mobileSubheaders, subheaders } = this;
104-
const headers = isMobile() ? mobileSubheaders : subheaders;
105-
headers.forEach((h) => {
106-
this.activeTabs[h.title] = h.active ? h.active.toLowerCase() : undefined;
107-
});
108-
let nets = this.urls.map(url => {
109-
return new axios(`../static/demo/config/${url}`)
110-
});
111-
Promise.all(nets).then(res => {
112-
vm.headers = res[0].data;
113-
vm.subheaders = res[1].data;
114-
vm.mobileHeaders = res[2].data;
115-
vm.mobileSubheaders = res[3].data;
116-
});
117-
},
118-
mounted () {
119-
let mapmode = this.$route.params.mapmode;
120-
let active = mapmode ? mapmode.toLowerCase() : undefined;
121-
this.activeMenu = active;
122-
},
123-
watch: {
124-
'$route' (to, from) {
125-
// 对路由变化作出响应...
126-
const { mobileSubheaders, subheaders } = this;
127-
let mapmode = to.params.mapmode
128-
if (mapmode !== from.params.mapmode) {
129-
const headers = this.mobile ? mobileSubheaders : subheaders;
130-
this.activeMenu = mapmode.toLowerCase();
131-
headers.forEach(header => {
132-
header.menus.forEach(m => {
133-
let active = m.title.toLowerCase();
134-
if (active === mapmode) {
135-
this.activeTabs[header.title] = active
38+
components: {
39+
IconFont,
40+
HeaderMenu,
41+
HeaderSubMenu
42+
},
43+
data() {
44+
return {
45+
mobile: isMobile(),
46+
logo: './static/assets/logo/mapgis_blue.png',
47+
activeMenu: '',
48+
activeTabs: {},
49+
urls: ['config-headers.json', 'config-headers-sub.json', 'config-headers-mobile.json', 'config-headers-sub-mobile.json'],
50+
headers: [],
51+
subheaders: [],
52+
mobileHeaders: [],
53+
mobileSubheaders: [],
54+
isShowMenu: false,
55+
style: {
56+
fontSize: '24px',
57+
color: '#FFFFFF',
58+
lineHeight: '72px'
13659
}
137-
})
60+
};
61+
},
62+
created() {
63+
const vm = this;
64+
const { mobileSubheaders, subheaders } = this;
65+
const headers = isMobile() ? mobileSubheaders : subheaders;
66+
headers.forEach((h) => {
67+
this.activeTabs[h.title] = h.active ? h.active.toLowerCase() : undefined;
68+
});
69+
let nets = this.urls.map((url) => {
70+
return new axios(`../static/demo/config/${url}`);
13871
});
139-
}
72+
Promise.all(nets).then((res) => {
73+
vm.headers = res[0].data;
74+
vm.subheaders = res[1].data;
75+
vm.mobileHeaders = res[2].data;
76+
vm.mobileSubheaders = res[3].data;
77+
});
78+
},
79+
mounted() {
80+
let mapmode = this.$route.params.mapmode;
81+
let active = mapmode ? mapmode.toLowerCase() : undefined;
82+
this.activeMenu = active;
14083
},
141-
},
142-
methods: {
143-
isActiveTab (title) {
144-
title = title.toLowerCase()
145-
Object.keys(this.activeTabs).forEach(key => {
146-
let active = this.activeTabs[key]
147-
if (title.indexOf(active) >= 0) {
148-
return true;
84+
watch: {
85+
$route(to, from) {
86+
// 对路由变化作出响应...
87+
const { mobileSubheaders, subheaders } = this;
88+
let mapmode = to.params.mapmode;
89+
if (mapmode !== from.params.mapmode) {
90+
const headers = this.mobile ? mobileSubheaders : subheaders;
91+
this.activeMenu = mapmode.toLowerCase();
92+
headers.forEach((header) => {
93+
header.menus.forEach((m) => {
94+
let active = m.title.toLowerCase();
95+
if (active === mapmode) {
96+
this.activeTabs[header.title] = active;
97+
}
98+
});
99+
});
100+
}
149101
}
150-
})
151-
return false;
152102
},
153-
isActiveMenu (title) {
154-
if (!this.activeMenu || !title) return false
155-
title = title.toLowerCase();
156-
if (title.indexOf(this.activeMenu) >= 0) {
157-
return true
158-
}
159-
return false
103+
methods: {
104+
isActiveTab(title) {
105+
title = title.toLowerCase();
106+
Object.keys(this.activeTabs).forEach((key) => {
107+
let active = this.activeTabs[key];
108+
if (title.indexOf(active) >= 0) {
109+
return true;
110+
}
111+
});
112+
return false;
113+
},
114+
isActiveMenu(title) {
115+
if (!this.activeMenu || !title) return false;
116+
title = title.toLowerCase();
117+
if (title.indexOf(this.activeMenu) >= 0) {
118+
return true;
119+
}
120+
return false;
121+
}
160122
}
161-
}
162-
}
123+
};
163124
</script>
164125

165126
<style lang="scss">
@@ -187,12 +148,12 @@ export default {
187148
font-family: Microsoft YaHei;
188149
width: 100%;
189150
padding: 0px !important;
190-
height: 72px;
151+
height: 64px;
191152
background: rgba(37, 45, 69, 1);
192153
193154
.mapgis-webclient-header {
194155
width: fit-content;
195-
height: 72px;
156+
height: 64px;
196157
align-items: center;
197158
float: left;
198159
display: flex;
@@ -207,12 +168,14 @@ export default {
207168
height: 24px;
208169
margin-left: 13px;
209170
color: rgba(255, 255, 255, 1);
210-
line-height: 24px;
171+
font-stretch: normal;
172+
letter-spacing: 1.5px;
211173
font-size: 22px;
174+
font-family: Microsoft YaHei;
212175
font-weight: bold;
213176
font-style: italic;
214-
font-stretch: normal;
215-
letter-spacing: 1.5px;
177+
color: #ffffff;
178+
line-height: 24px;
216179
}
217180
.menu-icon {
218181
margin-right: 8px !important;
@@ -221,7 +184,7 @@ export default {
221184
222185
.mapgis-webclient-menu-icon {
223186
float: right;
224-
height: 72px;
187+
height: 64px;
225188
margin-right: 48px;
226189
cursor: pointer;
227190
display: none;
@@ -245,17 +208,17 @@ export default {
245208
@media screen and (max-width: 1220px) {
246209
width: 100%;
247210
flex-wrap: wrap;
248-
background-color: rgba(37, 45, 69, .5);
211+
background-color: rgba(37, 45, 69, 0.5);
249212
display: none;
250213
251214
&.is-show {
252-
display: flex;
215+
display: flex;
253216
}
254217
}
255218
256219
span {
257220
width: fit-content;
258-
height: 72px;
221+
height: 64px;
259222
// margin: 0px 6px;
260223
padding: 0px 4px;
261224
// margin-let: 12.5px;
@@ -264,8 +227,8 @@ export default {
264227
font-weight: 500;
265228
text-align: center;
266229
color: rgba(255, 255, 255, 1);
267-
line-height: 72px;
268-
230+
line-height: 64px;
231+
269232
.el-button {
270233
padding: 0;
271234
border-width: 0;
@@ -286,4 +249,4 @@ export default {
286249
}
287250
}
288251
}
289-
</style>
252+
</style>

0 commit comments

Comments
 (0)