<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <top :siteInfo="siteInfo"><template v-slot:deRight></template></top>
        <menus :menuInfo="menuInfo"></menus>
        <banner :bannerInfo="bannerInfo"></banner>
        <router-view></router-view>
        <foot :footInfo="footInfo"></foot>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from './top.vue';
import menus from './menus.vue';
import banner from './banner.vue';
import foot from './foot.vue';
const { siteInfo, menuInfo, bannerInfo, footInfo } = require('../../layout/deploy/site');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: { top, menus, banner, foot },
  data: function() {
    return {
      siteInfo: siteInfo,
      menuInfo: menuInfo,
      bannerInfo: {
        info: bannerInfo.info,
        list: [
          { name: '轮播一', url: require('../../assets/banner.png') },
          { name: '轮播二', url: require('../../assets/banner.png') },
          { name: '轮播二', url: require('../../assets/banner.png') },
        ],
      },
      footInfo: footInfo,
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped></style>
