Skip to content

Commit 1dc0788

Browse files
author
ParnDeedlit&潘卓然
committed
【站点】【修复】【修复移动段显示适配效果】
1 parent 7de1a0c commit 1dc0788

File tree

4 files changed

+139
-87
lines changed

4 files changed

+139
-87
lines changed

‎website/public/static/demo/config/config-headers-sub-mobile.json‎

Lines changed: 113 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,119 @@
11
[
2-
{
3-
"title": "首页",
4-
"active": "功能",
2+
{
3+
"title": "首页",
4+
"active": "功能",
5+
"menus": [
6+
{
7+
"title": "功能",
58
"menus": [
6-
{
7-
"title": "功能",
8-
"menus": [
9-
{
10-
"title": "概述",
11-
"links": [["核心服务", "详细服务", "调用方式", "四大引擎选择", "下载"]],
12-
"hightlights": [[false, false, false, false, true]],
13-
"routes": [["/total/core", "/total/detail", "/total/use", "/total/select", "/total/download"]]
14-
}
15-
]
16-
},
17-
{
18-
"title": "插件",
19-
"menus": [
20-
{
21-
"title": "插件详情",
22-
"links": [["插件列表", "详细图表", "插件标签", "提交bug", "其他"]],
23-
"hightlights": [[false, false, false, false, false]],
24-
"routes": [["/total/plugins", "/total/detailChart", "/total/pluginTags", "/total/bugCommit", "/total/other"]]
25-
}
26-
]
27-
}
9+
{
10+
"title": "概述",
11+
"links": [["核心服务", "详细服务", "调用方式", "四大引擎选择", "下载"]],
12+
"hightlights": [[false, false, false, false, true]],
13+
"routes": [["/total/core", "/total/detail", "/total/use", "/total/select", "/total/download"]]
14+
}
2815
]
29-
},
30-
{
31-
"title": "开发指南",
32-
"active": "Cesium",
16+
},
17+
{
18+
"title": "插件",
3319
"menus": [
34-
{
35-
"title": "Cesium",
36-
"menus": [
37-
{
38-
"title": "常用链接",
39-
"links": [["演示示例", "API文档"]],
40-
"hightlights": [[true, false]],
41-
"routes": [["/gallery/cesium", "./docs/cesium/index.html"]]
42-
}
43-
]
44-
},
45-
{
46-
"title": "MapboxGL",
47-
"menus": [
48-
{
49-
"title": "常用链接",
50-
"links": [["演示示例", "API文档"]],
51-
"hightlights": [[true, false]],
52-
"routes": [["/gallery/mapboxgl", "./docs/mapboxgl/index.html"]]
53-
}
54-
]
55-
},
56-
{
57-
"title": "OpenLayers",
58-
"menus": [
59-
{
60-
"title": "常用链接",
61-
"links": [["演示示例", "API文档"]],
62-
"hightlights": [[false, false]],
63-
"routes": [["/gallery/openlayers", "./docs/openlayers/index.html"]]
64-
}
65-
]
66-
},
67-
{
68-
"title": "Leaflet",
69-
"menus": [
70-
{
71-
"title": "常用链接",
72-
"links": [["演示示例", "API文档"]],
73-
"hightlights": [[false, false]],
74-
"routes": [["/gallery/leaflet", "./docs/leaflet/index.html"]]
75-
}
76-
]
77-
}
20+
{
21+
"title": "插件详情",
22+
"links": [["插件列表", "详细图表", "插件标签", "提交bug", "其他"]],
23+
"hightlights": [[false, false, false, false, false]],
24+
"routes": [["/total/plugins", "/total/detailChart", "/total/pluginTags", "/total/bugCommit", "/total/other"]]
25+
}
7826
]
79-
}
27+
},
28+
{
29+
"title": "标准",
30+
"menus": [
31+
{
32+
"title": "协议",
33+
"links": [
34+
["epsg", "ogc", "geojson"]
35+
],
36+
"hightlights": [
37+
[false, false, false]
38+
],
39+
"routes": [
40+
["/standard/epsg", "/standard/ogc", "/standard/geojson"]
41+
]
42+
}
43+
44+
]}
45+
]
46+
},
47+
{
48+
"title": "开发指南",
49+
"active": "Cesium",
50+
"menus": [
51+
{
52+
"title": "Cesium",
53+
"menus": [
54+
{
55+
"title": "常用链接",
56+
"links": [["演示示例", "API文档"]],
57+
"hightlights": [[true, false]],
58+
"routes": [["/gallery/cesium", "./docs/cesium/index.html"]]
59+
}
60+
]
61+
},
62+
{
63+
"title": "MapboxGL",
64+
"menus": [
65+
{
66+
"title": "常用链接",
67+
"links": [["演示示例", "API文档"]],
68+
"hightlights": [[true, false]],
69+
"routes": [["/gallery/mapboxgl", "./docs/mapboxgl/index.html"]]
70+
}
71+
]
72+
},
73+
{
74+
"title": "OpenLayers",
75+
"menus": [
76+
{
77+
"title": "常用链接",
78+
"links": [["演示示例", "API文档"]],
79+
"hightlights": [[false, false]],
80+
"routes": [["/gallery/openlayers", "./docs/openlayers/index.html"]]
81+
}
82+
]
83+
},
84+
{
85+
"title": "Leaflet",
86+
"menus": [
87+
{
88+
"title": "常用链接",
89+
"links": [["演示示例", "API文档"]],
90+
"hightlights": [[false, false]],
91+
"routes": [["/gallery/leaflet", "./docs/leaflet/index.html"]]
92+
}
93+
]
94+
},
95+
{
96+
"title": "Vue-Cesium",
97+
"menus": [
98+
{
99+
"title": "常用链接",
100+
"links": [["演示示例", "API文档"]],
101+
"hightlights": [[true, false]],
102+
"routes": [["/gallery/vue-cesium", "./docs/cesium/index.html"]]
103+
}
104+
]
105+
},
106+
{
107+
"title": "Vue-MapboxGL",
108+
"menus": [
109+
{
110+
"title": "常用链接",
111+
"links": [["演示示例", "API文档"]],
112+
"hightlights": [[true, false]],
113+
"routes": [["/gallery/vue-mapboxgl", "./docs/mapboxgl/index.html"]]
114+
}
115+
]
116+
}
117+
]
118+
}
80119
]

‎website/src/main.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ import 'element-ui/lib/theme-chalk/index.css';
77
import './styles/index.css'
88
import './styles/global.css'
99
import ElementUI from 'element-ui';
10-
import Antd from 'ant-design-vue';
11-
12-
import 'ant-design-vue/dist/antd.less';
10+
// import Antd from 'ant-design-vue';
11+
// import 'ant-design-vue/dist/antd.less';
1312

1413
import IconFont from './components/IconFont/iconfont'
1514
import VueLazyload from 'vue-lazyload'
@@ -20,7 +19,7 @@ import 'echarts/lib/component/tooltip'
2019
Vue.component('v-chart', ECharts)
2120

2221
Vue.use(ElementUI);
23-
Vue.use(Antd);
22+
// Vue.use(Antd);
2423
Vue.use(VueLazyload);
2524

2625
Vue.component('IconFont', IconFont)

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,21 @@
99
<IconFont :style="style" type="iconicon_commonly_barmenu" class="mapgis-webclient-menu-icon" @click="isShowMenu = !isShowMenu" />
1010
<div :class="['mapgis-webclient-menu', { 'is-show': isShowMenu }]">
1111
<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>
1912
<div v-if="mobile">
2013
<el-popover v-for="h in mobileSubheaders" :key="h.title" placement="top-start" trigger="hover">
2114
<header-sub-menu :active="activeTabs[h.title]" :menus="h.menus" />
2215
<el-button type="text" slot="reference">{{ h.title }}</el-button>
2316
</el-popover>
2417
</div>
18+
<template v-else>
19+
<el-popover v-for="(h, i) in mobile ? mobileHeaders : headers" :key="i" placement="bottom-start" trigger="hover">
20+
<header-menu :menus="h.menus" :icon="h.icon" />
21+
<el-button type="text" slot="reference" :class="{ active: isActiveMenu(h.title) }">
22+
<IconFont :type="h.icon" class="menu-icon" />
23+
{{ h.title }}
24+
</el-button>
25+
</el-popover>
26+
</template>
2527
</div>
2628
</div>
2729
</div>
@@ -140,7 +142,9 @@ export default {
140142
.mapgis-webclient-menu {
141143
height: 48px !important;
142144
span {
143-
font-size: 13px !important;
145+
font-size: 13px !important;
146+
height: 48px !important;
147+
line-height: 48px !important;
144148
}
145149
}
146150
}

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,22 @@ export default {
9292
</script>
9393

9494
<style lang="scss">
95+
@media (max-width:640px){
96+
.header-menu-wrapper {
97+
padding: 0 0vw !important;
98+
}
99+
}
100+
@media (min-width:960px){
101+
.header-menu-wrapper {
102+
padding: 0 0vw !important;
103+
}
104+
}
95105
.header-menu-wrapper {
96106
display: flex;
97107
flex-wrap: wrap;
98108
// width: fit-content;
99109
width: calc(100vw - 51px);
100-
padding: 0 100px;
110+
padding: 0 10vw;
101111
height: 600px;
102112
max-width: 100vw;
103113
overflow: auto;

0 commit comments

Comments
 (0)