fix:C端移动端页面适配

src/layout/components/AppMain.vue

@@ -53,6 +53,9 @@ export default {
     overflow: auto;
     min-width: 1000px;
   }
+  .breadcrumb-container {
+    left: 74px;
+  }
 }
 </style>
 

src/layout/components/FootMark.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="foot-mark-box ">
+  <div v-if="!isMobileTerminal" class="foot-mark-box">
     <div>
       <div>陕ICP备17000711号-1</div>
       <div>平台联系邮箱：operation@changan-inkasso.com</div>
@@ -19,16 +19,41 @@
 </template>
 
 <script>
+import { isMobileDevice } from '@/utils'
+
 export default {
   components: {
     RegisterProtocal: () => import('@/views/login/components/RegisterProtocal')
   },
+  data() {
+    return {
+      isMobileTerminal: false
+    }
+  },
+  mounted() {
+    this.isMobile()
+    window.addEventListener('resize', this.isMobile)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.isMobile)
+  },
   methods: {
     aboutClick() {
       window.open(`#/about`)
     },
     userProtocol() {
       this.$refs.dialog.show = true
+    },
+    // 是否是手机端
+    isMobile() {
+      debugger
+      if (isMobileDevice() && window.screen.width < 768) {
+        this.isMobileTerminal = true
+        this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      } else {
+        this.isMobileTerminal = false
+        this.$store.dispatch('app/openSideBar')
+      }
     }
   }
 }
@@ -61,5 +86,19 @@ export default {
     margin: -20px;
     margin-top: -60px;
   }
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+    background-color: #fff;
+
+    &:hover {
+      // background: rgba(0, 0, 0, .025)
+      background: #fff;
+    }
+  }
 }
 </style>

src/layout/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div :class="classObj" class="app-wrapper">
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
     <div
       v-if="device === 'mobile' && sidebar.opened"
       class="drawer-bg"
@@ -20,6 +21,7 @@
 
 <script>
 import { Navbar, Sidebar, AppMain, FootMark } from './components'
+import Hamburger from '@/components/Hamburger'
 // import ResizeMixin from './mixin/ResizeHandler'
 
 export default {
@@ -28,7 +30,8 @@ export default {
     Navbar,
     Sidebar,
     AppMain,
-    FootMark
+    FootMark,
+    Hamburger
   },
   // mixins: [ResizeMixin],
   computed: {
@@ -62,6 +65,9 @@ export default {
     }
   },
   methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     }
@@ -82,6 +88,21 @@ export default {
     position: fixed;
     top: 0;
   }
+  .hamburger-container {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    line-height: 46px;
+    height: 60px;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+    z-index: 9;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
 }
 .drawer-bg {
   background: #000;

src/store/modules/app.js

@@ -23,6 +23,11 @@ const mutations = {
     state.sidebar.opened = false
     state.sidebar.withoutAnimation = withoutAnimation
   },
+  OPEN_SIDEBAR: (state, withoutAnimation) => {
+    Cookies.set('sidebarStatus', 1)
+    state.sidebar.opened = true
+    state.sidebar.withoutAnimation = withoutAnimation
+  },
   TOGGLE_DEVICE: (state, device) => {
     state.device = device
   }
@@ -35,6 +40,9 @@ const actions = {
   closeSideBar({ commit }, { withoutAnimation }) {
     commit('CLOSE_SIDEBAR', withoutAnimation)
   },
+  openSideBar({ commit }) {
+    commit('OPEN_SIDEBAR')
+  },
   toggleDevice({ commit }, device) {
     commit('TOGGLE_DEVICE', device)
   }