screen-hl-one/src/pages/HomeScreen.vue

<template>
  <section class="box">
    <t-header :title="title1">
      <p class="p1" @click="toJump">{{title2}}</p>
    </t-header>
    <Monitoring-Screen v-if="page === 'two'"></Monitoring-Screen>
    <Device-Screen v-if="page === 'one'"></Device-Screen>
    <section class="bottom"></section>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
import MonitoringScreen from './MonitoringScreen.vue'
import DeviceScreen from './DeviceScreen.vue'
export default {
  name: 'HomeScreen',
  components: {
    THeader,
    MonitoringScreen,
    DeviceScreen
  },
  data () {
    return {
      page: 'one',
      timer: null,
      iTime: this.$store.getters.setTime1
    }
  },
  computed: {
    title1 () {
      let t = ''
      t = this.page === 'one' ? '海亮铜管智能车间设备监控中心' : '海亮铜管智能车间生产监控中心'
      return t
    },
    title2 () {
      let t = ''
      t = this.page === 'two' ? '海亮铜管智能车间设备监控中心' : '海亮铜管智能车间生产监控中心'
      return t
    }
  },
  mounted () {
    this.swipePage()
  },
  beforeDestroy () {
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer)
    })
  },
  methods: {
    swipePage () {
      this.timer = setInterval(() => {
        this.page = this.page === 'one' ? 'two' : 'one'
      }, this.iTime)
    },
    toJump () {
      clearInterval(this.timer)
      this.page = this.page === 'one' ? 'two' : 'one'
      setTimeout(() => {
        this.swipePage()
      }, 2000)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.box
  _wh(100%, 100%)
  overflow hidden
.p1
  position absolute
  display block
  cursor pointer
  left .2509rem
  top .22rem
  font-family "SourceHanSansCN"
  _font(.18rem, .30rem, #fff, 700,)
  letter-spacing .01rem
.bottom
  _wh(100%, .38rem)
  background center bottom / 19.06rem 100% url(../assets/images/screen1/bottom.png) no-repeat
</style>