<template>
  <div style="height: 100vh; display: flex; flex-direction: column">
    <HeadLayout></HeadLayout>
    <div class="entry-box">
      <Vcard
        @mouseenter="item.mousemove = true"
        @mouseleave="item.mousemove = false"
        v-for="(item, index) in options"
        :index="index"
        :key="item.link"
        :options="item"
      ></Vcard>
    </div>
  </div>
</template>

<script>
import HeadLayout from '@/views/home/HeadLayout.vue'
import Vcard from './components/Vcard.vue'
export default {
  data () {
    return {
      options: [
        {
          link: 'electronic-textbook',
          componentName: '电子化教材',
          icon: 'textbook',
          title: '电子化教材'
        },
        {
          link: 'resource/resource-manage',
          componentName: '资源管理',
          title: '资源管理',
          icon: 'resource'
        },
        {
          link: 'online-course/course-manage',
          componentName: '在线授课',
          title: '在线授课',
          icon: 'course'
        },
        {
          link: 'assessment-evaluation/question-bank-manage',
          componentName: '课程考核',
          title: '课程考核',
          icon: 'assess'
        },
        {
          link: 'evaluation/student-evaluation',
          componentName: '综合评价',
          title: '综合评价',
          icon: 'evaluate'
        }
      ]
    }
  },
  components: {
    Vcard,
    HeadLayout
  }
}
</script>

<style lang="scss" scoped>
.entry-box {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 100px;
}
</style>
