<template>
  <div class="screen-content-left">
    <transition name="fade-transform">
      <component :is="currentCom"></component>
    </transition>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import zdyzLeft from './zdyf-left'
import hsyfLeft from './hsyf-left'
import homeLeft from './home-left'
import szyfLeft from './szyf-left'
export default {
  name: 'screen-content-left',
  data() {
    return {

    }
  },
  components: {
    zdyzLeft,
    hsyfLeft,
    homeLeft,
    szyfLeft
  },
  computed: {
    ...mapGetters(['scale', 'navId',]),
    currentCom() {
      if (this.navId === 'hsyf') {
        return hsyfLeft
      } else if (this.navId === 'zdyf') {
        return zdyzLeft
      } else if (this.navId === 'sy') {
        return homeLeft
      } else if (this.navId === 'szyf') {
        return szyfLeft
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.screen-content-left {
  width: 460px;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 16px;
  z-index: 20;
  box-sizing: border-box;
  padding: 40px 0px 20px;
}
</style>
