【站点】【修复】【修复移动端的适配&补充资源图片】

Author: 潘卓然Y7000P

website/public/docs/cdn/mapgis.css

@@ -28,14 +28,14 @@ body.small-header .top-nav {
     margin-top : 8px;
 }
 
-.image img {
+/* .image img {
     display: block;
     height : auto;
     width  : fit-content !important;
-}
+} */
 
 .mapgis-webclient-logo {
-    margin-left: 79px;
+    /* margin-left: 79px; */
     height     : 38px !important;
 }
 
@@ -45,5 +45,5 @@ body.small-header .top-nav {
 }
 
 #main>.core {
-    padding: 30px !important;
+    padding: 6px !important;
 }

website/public/static/assets/logo/framework.png

@@ -1,6 +1,9 @@
 <template>
   <el-container class="webclient-gallery-wrapper">
-    <el-header style="padding:0px;height:72px;">
+    <el-header
+      style="padding:0px;"
+      :height="mobile?'48px':'72px'"
+    >
       <Header></Header>
     </el-header>
     <el-container>
@@ -255,7 +258,7 @@ export default {
           vm.heightChange = true;
           if (callback) callback();
         });
-      }      
+      }
     },
   },
   mounted () {

website/src/views/gallery/Gallery.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container>
-    <el-header :class="{'webclient-three-header-mobile':mobile}">
+    <el-header :class="{'webclient-three-header-mobile':mobile, 'webclient-three-header': true}">
       <Header></Header>
     </el-header>
     <el-main class="webclient-three-layout">
@@ -43,7 +43,7 @@ export default {
 }
 .webclient-three-header {
   padding: 0px;
-  height: 72px !important;
+  height: 72px;
 }
 .webclient-three-layout {
   padding: 0px;

website/src/views/layout/LayoutThree.vue

@@ -21,13 +21,19 @@
         placement="top-start"
         trigger="hover"
       >
-        <header-menu :menus="h.menus" :icon="h.icon"/>        
+        <header-menu
+          :menus="h.menus"
+          :icon="h.icon"
+        />
         <el-button
           type="text"
           slot="reference"
-          :class="{'active': isActive(h.title)}"
+          :class="{'active': isActiveMenu(h.title)}"
         >
-          <IconFont :type="h.icon" class="menu-icon"/>
+          <IconFont
+            :type="h.icon"
+            class="menu-icon"
+          />
           {{h.title}}
         </el-button>
       </el-popover>
@@ -39,7 +45,7 @@
           trigger="hover"
         >
           <header-sub-menu
-            :active="activeTab"
+            :active="activeTabs[h.title]"
             :menus="h.menus"
           />
           <el-button
@@ -69,38 +75,66 @@ export default {
     return {
       mobile: isMobile(),
       logo: './static/assets/logo/mapgis_blue.png',
-      activeTab: 'cesium',
+      activeMenu: '',
+      activeTabs: {},
       headers: Headers,
       subheaders: SubHeader,
       mobileHeaders: MobileHeaders,
       mobileSubheaders: MobileSubHeader,
     };
   },
+  created () {
+    const headers = isMobile() ? MobileSubHeader : SubHeader;
+    headers.forEach((h) => {
+      this.activeTabs[h.title] = h.active.toLowerCase();
+    });
+  },
+  mounted () {
+    this.activeMenu = this.$route.params.mapmode.toLowerCase();
+  },
   watch: {
     '$route' (to, from) {
       // 对路由变化作出响应...
-      if (to.params.mapmode !== from.params.mapmode) {
-        this.activeTab = to.params.mapmode;
+      let mapmode = to.params.mapmode
+      if (mapmode !== from.params.mapmode) {
+        const headers = this.mobile ? MobileSubHeader : SubHeader;
+        this.activeMenu = mapmode.toLowerCase();
+        headers.forEach(header => {
+          header.menus.forEach(m => {
+            let active = m.title.toLowerCase();
+            if (active === mapmode) {
+              this.activeTabs[header.title] = active
+            }
+          })
+        });
       }
     },
   },
   methods: {
-    isActive (title) {
-      if (title.toLowerCase().indexOf(this.activeTab) >= 0) {
-        return true;
-      }
+    isActiveTab (title) {
+      title = title.toLowerCase()
+      Object.keys(this.activeTabs).forEach(key => {
+        let active = this.activeTabs[key]
+        if (title.indexOf(active) >= 0) {
+          return true;
+        }
+      })
       return false;
+    },
+    isActiveMenu (title) {
+      if (!this.activeMenu || !title) return false
+      title = title.toLowerCase();
+      if (title.indexOf(this.activeMenu) >= 0) {
+        return true
+      }
+      return false
     }
-  },
-  mounted () {
-    this.activeTab = this.$route.params.mapmode;
   }
 }
 </script>
 
 <style lang="scss">
 .mapgis-header-mobile {
-  padding: 0px;
   height: 48px !important;
   .mapgis-webclient-logo {
     margin-left: 22px !important;
@@ -114,7 +148,7 @@ export default {
     margin-right: 22px !important;
   }
   .mapgis-webclient-menu {
-    height: 48px !important;  
+    height: 48px !important;
     span {
       font-size: 13px !important;
     }
@@ -123,7 +157,7 @@ export default {
 .mapgis-header {
   font-family: Microsoft YaHei;
   width: 100%;
-  padding: 0px;
+  padding: 0px !important;
   height: 72px;
   background: rgba(37, 45, 69, 1);
 

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

@@ -6,8 +6,15 @@ export const Headers = [
       {
         title: "概述",
         links: [
-          ["核心服务","详细服务", "插件列表", "调用方式", "四大引擎选择", "下载"],
-          ["其他","详细图表","插件标签","提交bug"],
+          [
+            "核心服务",
+            "详细服务",
+            "插件列表",
+            "调用方式",
+            "四大引擎选择",
+            "下载",
+          ],
+          ["详细图表", "插件标签", "提交bug", "其他"],
         ],
         routes: [
           [
@@ -19,10 +26,10 @@ export const Headers = [
             "/total/download",
           ],
           [
+            "/total/detailChart",
+            "/total/pluginTags",
+            "/total/bugCommit",
             "/total/other",
-           "/total/detailChart",
-           "/total/pluginTags",
-           "/total/bugCommit",
           ],
         ],
       },
@@ -253,6 +260,7 @@ export const Headers = [
 export const SubHeader = [
   {
     title: "开发指南",
+    active: 'Cesium',
     menus: [
       {
         title: "Cesium",
@@ -495,7 +503,8 @@ export const SubHeader = [
   },
 ];
 
-export const MobileHeaders = [
+export const MobileHeaders = [];
+export const MobileHeadersOrigin = [
   {
     title: "首页",
     menus: [
@@ -508,7 +517,7 @@ export const MobileHeaders = [
             "/total/plugins",
             "/total/use",
             "/total/select",
-            "download",
+            "/total/download",
           ],
         ],
       },
@@ -530,7 +539,52 @@ export const MobileHeaders = [
 
 export const MobileSubHeader = [
   {
-    title: "快速访问",
+    title: "首页",
+    active: '功能',
+    menus: [
+      {
+        title: "功能",
+        menus: [
+          {
+            title: "概述",
+            links: [
+              ["核心服务", "详细服务", "调用方式", "四大引擎选择", "下载"],
+            ],
+            routes: [
+              [
+                "/total/core",
+                "/total/detail",
+                "/total/use",
+                "/total/select",
+                "/total/download",
+              ],
+            ],
+          },
+        ],
+      },
+      {
+        title: "插件",
+        menus: [
+          {
+            title: "插件详情",
+            links: [["插件列表", "详细图表", "插件标签", "提交bug", "其他"]],
+            routes: [
+              [
+                "/total/plugins",
+                "/total/detailChart",
+                "/total/pluginTags",
+                "/total/bugCommit",
+                "/total/other",
+              ],
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "开发指南",
+    active: "Cesium",
     menus: [
       {
         title: "Cesium",