4dkankan_official/src/page/service/temp/index.vue

<template>
  <div class="temp-layout" >
    <component class="fix-layout" :style="{marginLeft:(split-178)+'px'}" :is="active.isbefore?'ibefore':active.cp" :data='active'/>
  </div>
</template>

<script>
import lselect from '@/components/lselect'
import {mapState} from 'vuex'
import iuse from './use'
import iapp from './app'
import ibefore from './before'
import iqa from './qa'
import iproduct from './product'
import data from './config'

export default {
  computed: {
    ...mapState({
      split: state => state.ui.navDivision
    })
  },
  data () {
    return {active: ''}
  },
  watch: {
    '$route.params': {
      immediate: true,
      handler: function (newVal) {
        if (newVal.active && newVal.active !== 'all') {
          this.active = data[newVal.id][newVal.active]
        } else {
          this.active = data[newVal.id]
        }
      }
    }
  },
  components: {lselect, ibefore, iuse, iapp, iproduct, iqa},
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
  .temp-layout{
    min-height: 350px;
    overflow: hidden;
  }
   @media screen and (max-width: 1600px) {
    .fix-layout{
      margin-left: auto!important;
      margin-right: auto!important;
      max-width: 1050px!important;
    }
  }
</style>