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

<template>
  <index-card title="大数据选科" v-if="formatList.length">
    <index-card-content :list="formatList" :line-size="lineSize">
      <template #default="{item}">
        <index-image-item v-bind="item" ></index-image-item>
      </template>
    </index-card-content>
  </index-card>
</template>

<script>
import IndexCard from '@/views/index/components/index-card'
import loginCheckMixin from '@/views/components/blocks/index-login-interceptor-mixin'
import IndexImageItem from '@/views/index/components/index-image-item'
import IndexCardContent from '@/views/index/components/index-card-content'
import { mapGetters } from 'vuex'

export default {
  components: { IndexImageItem, IndexCardContent, IndexCard },
  mixins: [loginCheckMixin],
  name: 'index-card-elective',
  methods: {},
  computed:{
    ...mapGetters(['middlebarRouters']),
    listOpt() {
      const obj = {}
      this.list.map(item => {
        obj[`${item.title}${item.path}`] = {desc: item.desc }
      })
      return obj
    },
    formatList() {
      if(!this.middlebarRouters.length) return []
      const listOptKey = Object.keys(this.listOpt)
      let formatList = []
      return this.middlebarRouters[1].children.slice(0,4).map((item,idx) =>{
        return {
          title: item.meta.title,
          desc:this.listOpt[`${item.meta.title}${item.path}`]?.desc,
          src:this.list[idx].src,
          path:item.path,
          ...this.styleStatic
        }
      })
    }
  },
  data() {
    return {
      lineSize:4,
      styleStatic:{
        titleStyle:{
          top:'37px',
          left:'37px',
          fontSize: '24px',
          color:"#000"
        },
        descStyle:{
          top:'70px',
          left:'37px',
          color:"#000"
        },
        titleClasses:['absolute','bold'],
        descClasses:['absolute','bold','f12'],
      },
      list:[
        {
          title: '智能选科报名',
          src:`${this.$imgBase}index/elective/elective_apply.png`,
          desc:'通过意向的院校和专业推荐选科方案',
          path: '/new-gaokao/bigdataSelectCourse/round-select',
        },
        {
          title: '个人分班信息',
          src:`${this.$imgBase}index/elective/elective_dispatch.png`,
          desc:'通过意向的院校和专业推荐',
          path: '/new-gaokao/bigdataSelectCourse/personalDivideClass',
        },
        {
          title: '个人选科报告',
          src:`${this.$imgBase}index/elective/elective_report.png`,
          desc:'通过大学/专业维度查询选考科目要求',
          path: '/new-gaokao/bigdataSelectCourse/personalSelectCourseReport',
        },
        {
          title: '个人课程表',
          src:`${this.$imgBase}index/elective/elective_table.png`,
          desc:'通过意向的院校和专业推荐',
          path: '/new-gaokao/bigdataSelectCourse/personalClassCategory',
        }
      ]
    }
  },

}
</script>

<style scoped>

</style>