first commit

layouts/default.vue

@@ -0,0 +1,72 @@
+<template lang="pug">
+.content
+  #loading.allSpinner
+    .spinner
+      .bounce1
+      .bounce2
+      .bounce3
+  .container
+    header
+      .header
+        .svg(@click='showLeftMenu')
+          svg(style='width: 25px; height:25px', viewBox='0 0 1024 1024', version='1.1', xmlns='http://www.w3.org/2000/svg', width='200', height='200')
+            path(d='M192 482l640 0 0 64-640 0 0-64Z')
+            path(d='M192 290l640 0 0 64-640 0 0-64Z')
+            path(d='M192 674l640 0 0 64-640 0 0-64Z')
+        nuxt-link(to='/')
+          h1.title
+            | 轶哥博客
+    .page-container
+      #LeftMenu(:style="'display: '+ showLeftMenuValue + ';' + isPhone")
+        LeftContent
+      #rightContent
+        nuxt
+        Footer
+</template>
+
+<script>
+import LeftContent from '~/components/LeftContent'
+import Footer from '~/components/Footer'
+
+export default {
+  components: {
+    LeftContent,
+    Footer
+  },
+  data() {
+    return {
+      showLeftMenuValue: 'block',
+      isPhone: ''
+    }
+  },
+  mounted() {
+    const phoneStyle = 'height: 100%; position: fixed; top: 70px; background-color: #fff; z-index:9999; overflow: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch;'
+    if (document.body.clientWidth > 768) {
+      this.showLeftMenuValue = 'block'
+      this.isPhone = ''
+    } else {
+      this.showLeftMenuValue = 'none'
+      this.isPhone = phoneStyle
+    }
+
+    window.onresize = () => {
+      if (document.body.clientWidth > 768) {
+        this.showLeftMenuValue = 'block'
+        this.isPhone = ''
+      } else {
+        this.showLeftMenuValue = 'none'
+        this.isPhone = phoneStyle
+      }
+    }
+  },
+  methods: {
+    showLeftMenu() {
+      if (this.showLeftMenuValue !== 'block') {
+        this.showLeftMenuValue = 'block'
+      } else {
+        this.showLeftMenuValue = 'none'
+      }
+    }
+  }
+}
+</script>