feat:移动端适配

src/layout/Header.vue

 <template>
   <div class="header">
     <div class="header-bar">
-      <div class="header-l">票池管理后台</div>
+      <div class="header-l">
+        <i class="el-icon-s-fold show-icon" @click="$emit('update:show', !show)" />
+        <span class="show-title">票池管理后台</span>
+      </div>
       <div class="header-r">
         <el-popover
           placement="bottom"
@@ -28,6 +31,11 @@ export default Vue.extend({
       admin: ''
     }
   },
+  props: {
+    show: {
+      type: Boolean
+    }
+  },
   methods: {
     logout() {
       // logout().then(res => {
@@ -46,11 +54,33 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-  .header {
+@media screen and (min-width: 769px) {
+  .header-bar {
+    min-width: 1200px;
+  }
+  .show-icon {
+    display: none;
+  }
+  .show-title {
+    display: block;
+  }
+}
+@media screen and (max-width: 768px) {
+  .header-bar {
+    width: 100%;
+  }
+  .show-icon {
+    display: block;
+    font-size: 22px;
+  }
+  .show-title {
+    display: none;
+  }
+}
+.header {
   width: 100%;
   height: var(--headerHeight);
   .header-bar {
-      min-width: 1200px;
     height: 100%;
     margin: auto;
     padding: 0 35px;
@@ -67,19 +97,19 @@ export default Vue.extend({
       margin-right: 12px;
     }
   }
-  }
-  .popup-item {
+}
+.popup-item {
   cursor: pointer;
   &:hover {
     color: #4d7afa;
   }
-  }
-  .right-item {
+}
+.right-item {
   display: flex;
   align-items: center;
   cursor: pointer;
   &>p {
     margin-left: 12px;
   }
-  }
+}
 </style>
\ No newline at end of file

src/layout/Nav.vue

 <template>
-  <div class="menu">
+  <transition name="slide">
+    <div class="menu" :class="{ 'mobile-menu' :isMobile }" v-show="show">
       <el-menu
         class="el-menu-vertical-demo"
         background-color="#333B54"
         text-color="#fff"
         active-text-color="#409EFF"
         router
-      :default-active="defaultActive">
+        :default-active="defaultActive"
+        @select="handleSelect">
         <template v-for="(items, index) in menu">
           <el-submenu :index="items.url" v-if="items.list" :key="index">
             <template slot="title">
@@ -36,13 +38,21 @@
         </template>
       </el-menu>
     </div>
+  </transition>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import menu from '@/utils/menu'
 import { getStorage } from '@/utils/storage'
+import { judgeUserAgent } from '@/utils/utils'
 export default Vue.extend({
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     return {
       menu: [] as any,
@@ -50,6 +60,19 @@ export default Vue.extend({
       type: 1
     }
   },
+  computed: {
+    isMobile() {
+      return judgeUserAgent()
+    }
+  },
+  methods: {
+    handleSelect() {
+      const isTriggle = judgeUserAgent()
+      if (isTriggle) {
+        this.$emit('update:show', !this.show)
+      }
+    }
+  },
   created() {
     const name = JSON.parse(getStorage('user') as string)?.name
     this.defaultActive = this.$route.path as string
@@ -65,9 +88,25 @@ export default Vue.extend({
     height: calc(100vh - var(--headerHeight));
     background: #333B54;
     flex-shrink: 0;
-    text-align: left
+    text-align: left;
   }
   /deep/ .el-menu {
     border-right: none;
   }
+
+  
+  .mobile-menu {
+    position: absolute;
+    z-index: 100;
+  }
+
+
+  .slide-enter-active, .slide-leave-active {
+    transition: 0.5s;
+    transform: translate3d(0, 0, 0);
+  }
+  .slide-enter, .slide-leave-to /* .slide-leave-active below version 2.1.8 */ {
+    // opacity: 0;
+    transform: translate3d(-200px, 0, 0);
+  }
 </style>
\ No newline at end of file

src/layout/index.vue

 <template>
   <div class="layout">
-    <Header />
+    <Header :show.sync="showMenu" />
     <div class="content">
-      <Nav />
+      <Nav :show.sync="showMenu" />
       <div class="content-r">
         <Breadcrumb />
         <router-view></router-view>
@@ -16,22 +16,31 @@ import Vue from 'vue'
 import Header from './Header.vue'
 import Nav from './Nav.vue'
 import Breadcrumb from '@/components/Breadcrumb.vue'
+import { judgeUserAgent } from '@/utils/utils'
 export default Vue.extend({
   components: {
     Header,
     Nav,
     Breadcrumb
   },
-  
+  data() {
+    return {
+      showMenu: true
+    }
+  },
+  created() {
+    this.showMenu = !judgeUserAgent()
+  }
 })
 </script>
 
 <style lang="scss" scoped>
+@media screen and (min-width: 769px) {
   .content {
     min-width: 1200px;
     display: flex;
     .content-r {
-      width: calc(100% - 200px);
+      width: calc(100% - var(--navWidth));
       height: calc(100vh - var(--headerHeight));
       padding: 20px 40px;
       overflow-x: hidden;
@@ -40,4 +49,21 @@ export default Vue.extend({
       flex-direction: column;
     }
   }
+}
+@media screen and (max-width: 768px) {
+  .content {
+    width: 100%;
+    display: flex;
+    .content-r {
+      width: 100%;
+      height: calc(100vh - var(--headerHeight));
+      padding: 20px 14px;
+      overflow-x: hidden;
+      font-size: 14px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+  
 </style>
\ No newline at end of file

src/main.ts

@@ -4,8 +4,9 @@ import './registerServiceWorker'
 import router from './router'
 import store from './store'
 import '@/style/common.css'
-import '@/utils/element'
 import 'element-ui/lib/theme-chalk/index.css';
+import '@/style/element.css'
+import '@/utils/element'
 
 Vue.config.productionTip = false
 

src/style/element.css

+.el-dialog {
+  min-width: 360px;
+}
+
+.el-pagination {
+  white-space: break-spaces;
+}
\ No newline at end of file

src/utils/utils.ts

@@ -5,3 +5,13 @@ export const getDateTime = function(s: string) {
   const str = Number(s + '000')
   return dayjs(str).format('YYYY-MM-DD HH:mm:ss')
 }
+
+/**
+ * false: PC, true: mobile
+ * @returns 
+ */
+export const judgeUserAgent = ():boolean => {
+  const {userAgent} = window.navigator
+  const REGEXP = /IOS|Mac|OS|iPhone|Android/g
+  return REGEXP.test(userAgent)
+}
\ No newline at end of file

src/views/Home.vue

@@ -81,4 +81,15 @@ export default Vue.extend({
       }
     }
   }
+  @media screen and (max-width: 768px) {
+    .statics-line {
+      flex-direction: column;
+      .statics-block {
+        margin-bottom: 55px;
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
 </style>