front/src/views/index/components/index-card-task.vue

<template>
  <index-card v-if="taskRoutes.length" title="班级任务">
    <index-card-content :list="taskRoutes" :line-size="6">
      <template #default="{item}">
        <div class="fx-column ai-cen active-pointer" :style="item.style" @click="$router.push(item.path)">
          <div class="index-banner task-item"/>
          <div class="mt15 f16 bold">{{ item.title }}</div>
        </div>
      </template>
    </index-card-content>
  </index-card>
</template>

<script>
import {mapGetters} from 'vuex'
import IndexCard from "@/views/index/components/index-card.vue";
import IndexCardContent from "@/views/index/components/index-card-content.vue";

export default {
  name: "index-card-task",
  components: {IndexCardContent, IndexCard},

  computed: {
    ...mapGetters(['middlebarRouters']),
    taskRoutes() {
      const parentRoute = this.middlebarRouters.find(item => item.meta.title == '班级任务')
      if (!parentRoute) return []
      return parentRoute.children.map((item, idx) => {
        return {
          path: item.path,
          title: item.meta.title,
          style: {
            '--bg-img': `url(${this.$imgBase}2023/index/lib/${item.meta.imgName}.png)`,
            '--bg-img-selected': `url(${this.$imgBase}2023/index/lib/${item.meta.imgName}-selected.png)`
          }
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.active-pointer .task-item {
  width: 112px;
  height: 112px;
  background-image: var(--bg-img);
}

.active-pointer:hover .task-item {
  background-image: var(--bg-img-selected);
}
</style>