Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
95 lines (92 sloc) 2.25 KB
<template lang="pug">
.app.u-clearfix
app-article-list
user
.app__content(
:class="{'app__content--Active': sideBar}",
v-finger:swipe="swipeRight",
@scroll="pushScrollData"
).l-page--Full
home-header
.app__bodyer.l-mH--auto.u-clearfix
transition(name="slideFade")
router-view
//- ,mode="out-in"
//- loading
include ./assets/svg/all
</template>
<script>
import store from './store'
import { mapGetters, mapActions } from 'vuex'
import Loading from './components/feedback/Loading.vue'
import HomeHeader from './components/templates/HomeHeader.vue'
import AppArticleList from './components/templates/AppArticleList.vue'
import User from 'src/components/templates/User.vue'
// import fullScreen from './utils/fullScreen'
export default {
data () {
return {
}
},
components: {
User,
Loading,
HomeHeader,
AppArticleList
},
computed: mapGetters([
'sideBar'
]),
methods: {
...mapActions([
'pushScrollData',
'sideBarSwitch'
]),
swipeRight: function (e) {
e.direction === 'Right' && !this.sideBar && this.sideBarSwitch()
e.direction === 'Left' && this.sideBar && this.sideBarSwitch()
}
}
}
window.onresize = function () {
store.dispatch('device')
}
</script>
<style lang="stylus">
@import './assets/stylus/main'
.app__menu
background-color c-master
.app__content
overflow auto
transition transform .5s
box-shadow 0 0 100px 5px rgba(0,0,0,0.3)
background-color c-bgc
transform-origin s-sideBar center
.app__content--Active
transform scale(.9) translateX(s-sideBar)
.app__bodyer
max-width max-width
background-color c-bgc
position relative
@media screen and (max-width: max-width)
.app__bodyer
padding 0 10px
margin-bottom 100px
.slideFade-enter-active,
.slideFade-leave-active
left 10px
.slideFade-enter-active,
.slideFade-leave-active
transition all .5s cb-duang
width 100%
position absolute
top 0
left 0
opacity 1
.slideFade-enter
transform translateX(100%)
opacity 0
.slideFade-leave-active
transform translateX(-100%)
opacity 0
</style>