front/src/views/accurateTeaching/main.vue

<template>
  <div class="container">
    <div class="banner">
      <el-image style="width: 100vw" :src="require('@/assets/images/personal_database.png')" fit="none"></el-image>
    </div>
    <div class="content">
      <index-card title="班级任务" class="mb20">
        <el-row :gutter="20">
          <el-col class="relative "   :span="4" v-for="item in plan" >
            <div class="plan_item pointer" @click="$router.push(item.path)">
              <div class="img-wrap">
                <img  :src="item.img"/>
              </div>
            </div>
            <p class="bold text-center" >{{ item.title }}</p>
          </el-col>
        </el-row>
      </index-card>
      <index-card title="资源库" class="mb20">
        <mx-image-wrap :list="library" titleClass="text-white" titlePostion="left"></mx-image-wrap>
      </index-card>
    </div>
  </div>
</template>
<script>
import IndexCard from '@/views/index/components/index-card.vue'
import MxImageWrap from '@/views/questioncenter/components/main-card/mx-image-wrap.vue'
import { mapGetters } from 'vuex'
import store from '@/store'
export default {
  components: { IndexCard, MxImageWrap },
  data() {
    return {
      plan: [
        {
          title: '微课视频',
          img: require('@/assets/images/micro_video.png'),
          path: '/personalDatabase/class-task/micro-video'
        },
        {
          title: '作业视频',
          img: require('@/assets/images/homework_video.png'),
          path: '/personalDatabase/class-task/homework-video'
        },
        {
          title: '作业任务',
          img: require('@/assets/images/paper_work.png'),
          path: '/personalDatabase/class-task/paper-work'
        },
        {
          title: '学校通知',
          img: require('@/assets/images/school_notice.png'),
          path: '/personalDatabase/class-task/school-notice'
        },
        {
          title: '班级通知',
          img: require('@/assets/images/class_notice.png'),
          path: '/personalDatabase/class-task/class-notice'
        },
        {
          title: '系统通知',
          img: require('@/assets/images/system_notice.png'),
          path: '/personalDatabase/class-task/system-notice'
        },
      ],
      library: [
        {
          title: '个人资源库',
          img: require('@/assets/images/personal_library.png'),
          path: '/personalDatabase/personalResources/index'
        },
        {
          title: '校本资源库',
          img: require('@/assets/images/school_library.png'),
          path: '/personalDatabase/schoolResources/index'
        },
        {
          title: '云库',
          img: require('@/assets/images/cloud_library.png'),
          path: '/personalDatabase/cloudTank/index'
        },
      ],
    }
  },
  methods: {
  }
}
</script>
<style scoped lang="scss">
.content {
  width: 70%;
  margin: 0 auto;
  padding-bottom: 20px;
  margin-top: 20px;
}

.container {
  background: #f5f4f9;
}
.plan_item{
  padding: 20px;
  border: 1px solid #C5C5C5;
  margin-bottom: 20px;
  border-radius: 4px;
  height: 134px;
  .img-wrap{
    width: 100%;
    height: 100%;
    text-align: center;
  }
  &:hover{
    background: #00CCB4;
    border: 1px solid #00CCB4;
  }
}
</style>