73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<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>
|