[update] 移动端整体布局

src/components/layouts/RouteViewMobile.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RouteViewMobile'
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/menu/FirstLevelMenu.vue

@@ -199,8 +199,6 @@ export default {
         color: rgba(255,255,255,0.96);
         line-height: 19px;
         text-shadow: 0 4px 4px rgba(0,0,0,0.25);
-        font-style: normal;
-        text-transform: none;
         transform: translateY(-10px);
       }
 
@@ -217,9 +215,6 @@ export default {
           color: #FFC97A;
           line-height: 19px;
           text-shadow: 0 4px 4px rgba(0,0,0,0.25);
-          text-align: left;
-          font-style: normal;
-          text-transform: none;
         }
       }
     }

src/components/menu/MobileMenu.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="mobile-menu">
+    <ul class="mobile-menu-list">
+      <li v-for="menu in showMenu"
+          :key="menu.id"
+          @click="selectMenu(menu)"
+          :class="{ active: selectedKeys.includes(menu.path)}">
+        <div class="menu-item">
+          <img v-if="menu.meta.icon && menu.meta.icon.includes('custom_menu_image_')"
+               :src="require(`@/assets/images/menu/icon/${menu.meta.icon.replace('custom_menu_image_', '')}.png`)" alt=''>
+        </div>
+        <div class="menu-item-title">{{menu.meta.title}}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'MobileMenu',
+  props: {
+    menu: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      // 选择的path
+      selectPath: '',
+      openKeys: [],
+      selectedKeys: []
+    }
+  },
+  computed: {
+    // 可以显示的移动端菜单
+    showMenu () {
+      const mobileMenu = this.menu.find(item => item.path === '/mobile') || { children: [] }
+      return mobileMenu.children.filter((item) => {
+        if (item.hidden) {
+          return false
+        }
+        return true
+      })
+    }
+  },
+  watch: {
+    $route () {
+      this.updateMenu()
+      this.$emit('select', this.showMenu.find(item => item.path === this.openKeys[this.openKeys.length - 1]))
+    }
+  },
+  mounted () {
+    this.updateMenu()
+    this.$emit('select', this.showMenu.find(item => item.path === this.openKeys[this.openKeys.length - 1]))
+  },
+  methods: {
+    // 选择菜单
+    selectMenu (menu) {
+      console.log(menu)
+      this.selectPath = menu.path
+      this.$router.push({ name: menu.name })
+      this.$emit('select', menu)
+    },
+    updateMenu () {
+      const routes = this.$route.matched.concat()
+      const { hidden } = this.$route.meta
+      if (routes.length >= 3 && hidden) {
+        routes.pop()
+        this.selectedKeys = [routes[routes.length - 1].path]
+      } else {
+        this.selectedKeys = [routes.pop().path]
+      }
+      let openKeys = []
+      routes.forEach(item => {
+        openKeys.push(item.path)
+      })
+
+      // update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
+      // 包含冒号的是动态菜单
+      if (this.selectedKeys[0].includes(':')) {
+        const selectedKey = this.$route.fullPath
+        this.selectedKeys = [selectedKey]
+        const newOpenKeys = []
+        this.fullOpenKeys(this.menu, selectedKey, newOpenKeys)
+        if (newOpenKeys.length > 0) {
+          openKeys = newOpenKeys.reverse()
+        }
+      }
+      // update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
+
+      // update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
+      if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
+        this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
+      }
+      // update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
+    },
+    fullOpenKeys (menus, selectedKey, openKeys) {
+      for (const item of menus) {
+        if (item.path === selectedKey) {
+          openKeys.push(item.path)
+          this.$emit('updateMenuTitle', item)
+          return true
+        } else if (Array.isArray(item.children)) {
+          if (this.fullOpenKeys(item.children, selectedKey, openKeys)) {
+            openKeys.push(item.path)
+            return true
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.mobile-menu {
+  width: 100%;
+  height: 100%;
+
+  .mobile-menu-list {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      height: 1.12rem;
+      padding: 0.12rem;
+      text-align: center;
+
+      .menu-item {
+        position: relative;
+        background-image: url("~@/assets/images/menu/top-menu.png");
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: center center;
+        width: .8rem;
+        height: .8rem;
+        font-size: 0;
+
+        img {
+          width: .36rem;
+          height: .36rem;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+
+      .menu-item-title {
+        font-weight: bold;
+        font-size: 0.2rem;
+        color: #FFC97A;
+        line-height: 0.23rem;
+        font-style: normal;
+        text-transform: none;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: center;
+        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+        color: rgba(255,255,255,0.96);
+        text-shadow: 0 4px 4px rgba(0,0,0,0.25);
+        transform: translateY(-0.1rem);
+      }
+
+      // 选中的样式
+      &.active {
+
+        .menu-item {
+          background-image: url("~@/assets/images/menu/top-menu-act.png");
+        }
+        .menu-item-title {
+          font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+          font-weight: bold;
+          font-size: 0.2rem;
+          color: #FFC97A;
+          line-height: 0.23rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/page/GlobalHeader.vue

@@ -2,11 +2,11 @@
   <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
   <a-layout-header
     v-if="!headerBarFixed"
-    class="global-header"
+    :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', `global-header-${device}`]"
-    :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
     :style="{ padding: '0' }">
 
-    <div v-if="mode === 'sidemenu'" class="header" :class="theme">
+    <!--  pc端头部  -->
+    <div v-if="device === 'desktop'" class="header" :class="theme">
       <span class="system-title">
         <img :src="require('@/assets/images/system-title.png')" alt=''>
       </span>
@@ -18,27 +18,19 @@
                         :collapsed="collapsed"
                         @select="selectFirstLevelMenu"/>
     </div>
-    <!-- 顶部导航栏模式 -->
+    <!--  移动端头部  -->
-    <div v-else :class="['top-nav-header-index', theme]">
+    <div v-else-if="device === 'mobile'" class="mobile-header" :class="theme">
-      <div class="header-index-wide">
+      <div class="mobile-header-left">
-        <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
+      </div>
-<!--          <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader"/>-->
+      <div class="mobile-header-right">
-          <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
+        <a-dropdown>
-            <s-menu
+          <a class="ant-dropdown-link">
-              mode="horizontal"
+            <a-icon type="setting" />
-              :menu="menus"
+          </a>
-              :theme="theme"
+          <a-menu slot="overlay">
-              @updateMenuTitle="handleUpdateMenuTitle"
+            <user-menu :theme="theme"/>
-            ></s-menu>
+          </a-menu>
-
+        </a-dropdown>
-          </div>
-          <a-icon
-            v-else
-            class="trigger"
-            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
-            @click="toggle"></a-icon>
-        </div>
-        <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight"/>
       </div>
     </div>
   </a-layout-header>
@@ -263,24 +255,6 @@ export default {
       }
     }
 
-    .top-nav-header-index {
-
-      .header-index-wide {
-        margin-left: 10px;
-
-        .ant-menu.ant-menu-horizontal {
-          height: @height;
-          line-height: @height;
-        }
-      }
-      .trigger {
-        line-height: 64px;
-        &:hover {
-          background: rgba(0, 0, 0, 0.05);
-        }
-      }
-    }
-
     .header {
       z-index: 2;
       //color: #333;
@@ -304,13 +278,14 @@ export default {
     }
   }
   .ant-layout-header {
-    height: 158px;
     line-height: @height;
     background-color: transparent;
   }
 
   /* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
-  .global-header {
+  // pc端
+  .global-header-desktop {
+    height: 158px;
     position: relative;
     background-color: #001125;
     background-image: url("~@/assets/images/header/header-bg.png");
@@ -318,4 +293,27 @@ export default {
     background-size: auto 100%;
     background-repeat: no-repeat;
   }
+  // 移动端
+  .global-header-mobile {
+    height: .88rem;
+    background-color: #001125;
+    background-repeat: no-repeat;
+    background-image: url("~@/assets/images/system-title.png");
+    background-position: center center;
+    background-size: 2.88rem;
+  }
+  .mobile-header {
+    display: flex;
+    justify-content: space-between;
+    height: .88rem;
+
+    .mobile-header-left {
+      width: .88rem;
+    }
+
+    .mobile-header-right {
+      width: .88rem;
+      text-align: center;
+    }
+  }
 </style>

src/components/page/GlobalLayout.vue

@@ -16,7 +16,7 @@
         @selectFirstLevelMenu="selectFirstLevelMenu"
       />
       <!--   内容布局   -->
-      <a-layout :style="{backgroundColor: '#001125', padding: '24px 24px 0'}">
+      <a-layout :style="{backgroundColor: '#001125', padding: '24px 24px 0'}" v-if="device === 'desktop'">
         <!--  左侧二级菜单    -->
         <a-layout-sider class="layout-sider" v-if="menuChildren" width="174">
           <s-menu
@@ -35,10 +35,20 @@
         </a-layout-content>
       </a-layout>
 
-        <!-- layout footer -->
+      <!--   移动端内容布局   -->
-<!--      <a-layout-footer style="padding: 0">-->
+      <a-layout :style="{backgroundColor: '#001125', padding: '.24rem .24rem 1.12rem'}" v-else-if="device === 'mobile'">
-<!--        <global-footer/>-->
+        <!-- layout content -->
-<!--      </a-layout-footer>-->
+        <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
+          <slot></slot>
+        </a-layout-content>
+      </a-layout>
+
+      <!-- 移动端底部菜单 -->
+      <a-layout-footer class="mobile-footer" v-if="device === 'mobile'">
+        <mobile-menu :menu="menus"
+                     :collapsed="collapsed"></mobile-menu>
+      </a-layout-footer>
+
     </a-layout>
 
     <!-- update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ---- -->
@@ -55,6 +65,7 @@ import { triggerWindowResizeEvent } from '@/utils/util'
 import { mapActions, mapState } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import FirstLevelMenu from '@comp/menu/FirstLevelMenu'
+import MobileMenu from '@comp/menu/MobileMenu'
 // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
 // import SettingDrawer from '@/components/setting/SettingDrawer'
 // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
@@ -63,6 +74,7 @@ import FirstLevelMenu from '@comp/menu/FirstLevelMenu'
 export default {
   name: 'GlobalLayout',
   components: {
+    MobileMenu,
     FirstLevelMenu,
     SMenu,
     GlobalHeader,
@@ -158,6 +170,18 @@ export default {
 
 </script>
 
+<style lang="less" scoped>
+// 移动端底部
+.mobile-footer {
+  position: fixed;
+  bottom: 0;
+  height: 1.12rem;
+  width: 100%;
+  padding: 0;
+  background-color: transparent;
+}
+</style>
+
 <style lang="less">
   body {
     // 打开滚动条:有即显示，无则不显示

src/components/tools/UserMenu.vue

@@ -23,7 +23,7 @@
       <span class=" small-action">
         <div class="operate" :title="nickname()">
           <img :src="require(`@assets/images/icon/user.png`)" alt="user" class="operate-img">
-          <span v-if="isDesktop()" class="operate-text">{{ nickname() }}</span>
+          <span class="operate-text">{{ nickname() }}</span>
         </div>
       </span>
       <a-menu slot="overlay" class="user-dropdown-menu-wrapper">

src/views/mobile/home/Home.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    Home
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home'
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/mobile/manage/Manage.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>manage</div>
+</template>
+
+<script>
+export default {
+  name: 'Manage'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/mobile/mine/Mine.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>mine</div>
+</template>
+
+<script>
+export default {
+  name: 'Mine'
+}
+</script>
+
+<style scoped>
+
+</style>