<template>
  <div class="home">
    <a-row>
      <a-col :span="6" v-for="item in menuData" :key="item.id">
        <dl @click="RouterLink(item)">
          <dt>
            <img src="../../assets/img/money.png" alt="" />
          </dt>
          <dd>
            <h2>{{ item.name }}</h2>
          </dd>
        </dl>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    console.log(this.menuData);
  },
  computed: {
    ...mapState("setting", ["menuData"]),
  },
  methods: {
    RouterLink(item) {
      this.$router.push({
        path: "/" + item.url + "/" + item.children[0].url,
      });
    },
  },
};
</script>
<style lang='less' scoped>
.home {
  width: 100%;
  height: 100%;

  background: #f3f4f6;

  position: relative;
  z-index: 999;
  > div {
    padding-top: 200px;
    box-sizing: border-box;
    background: url("../../assets/img/indexBg.png") no-repeat;
    background-size: 100% auto;

    .ant-col {
      padding: 15px;
      box-sizing: border-box;
    }
    dl {
      background: #fff;
      display: flex;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 8px;
      img {
        width: 80px;
        height: 80px;
      }
    }
    dd {
      margin-left: 10px;
    }
  }
}
</style>