<template>
<div class="widget" @click="onClick">
  <i class="iconfont icon-class" :class="classes"></i>
  <div class="desc">{{desc}}</div>
</div>
</template>

<script>
export default {
  name: 'Widget',
  props: {
    classes: {
      type: [Object, String],
      default() {
        return {
          iconhome: true
        };
      }
    },
    desc: {
      type: String,
      default: '首页'
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {};
  },
  computed: {
  },
  methods: {
    onClick() {
      this.$emit('click', this.index);
    }
  }
};
</script>

<style lang="scss" scoped>
.widget {
  width: 98px;
  height: 98px;
  display: flex;
  font-size: 0;
  flex-direction: column;
  align-items: center;
  color: #8c8c8c;
}

.icon-class {
  font-size: 50px;
  margin-top: 5px;
}

.desc {
  font-size: 20px;
  margin-top: -10px;
}
</style>