front/src/views/career/main.vue

<template>
  <div class="app-back">
    <div class="index-banner" :style="bannerStyle" />
    <div class="fx-column fx-cen-cen pb20">
      <!--      高考政策-->
      <index-card-gksp class="mt20 index-block"></index-card-gksp>
      <index-news-top-wrapper class="mt20 index-block"/>
      <!--      学习技巧-->
      <index-card-gktf class="mt20 index-block"></index-card-gktf>
      <index-card title="高考名词" class="mt20 index-block">
        <div class="fx-row nounList">
          <div v-for="item in nounList" class="pointer" @click="$router.push(item.path)">
            <el-image :src="item.img"></el-image>
            <p class="text-center">{{item.title}}</p>
          </div>
        </div>
      </index-card>
      <index-card-news-single class="mt20 index-block" type="单招志愿" :morePath="{name: 'NewsSingle'}"  />
    </div>
  </div>
</template>
<script>
import IndexCard from '@/views/index/components/index-card.vue'
import IndexNewsTopWrapper from '@/views/index/components/index-news-top-wrapper'
import IndexCardGksp from '@/views/index/components/index-card-gksp'
import IndexCardGktf from '@/views/index/components/index-card-gktf'
import { list } from '@/api/webApi/career-other'
import IndexCardNewsSingle from '@/views/index/components/index-card-news-single'

export default {
  components: { IndexCard, IndexNewsTopWrapper, IndexCardGksp, IndexCardGktf,IndexCardNewsSingle },
  created() {
    list().then(res => {
        this.nounList.map(item => {
          item.path = '/career/gkmc/detail?id=' + res.rows.find(row => row.type == item.title).children[0].id
        })
        console.log(this.nounList)
    })
  },
  data() {
    return {
      bannerStyle: {
        backgroundImage: `url(${this.$imgBase}2023/index/banner/assistant-banner.png)`,
        height: '300px'
      },
      nounList: [
        {
          title: '大学',
          img:`${this.$imgBase}index/fuzhu/noun_dx.png`,
        },
        {
          title: '高考政策',
          img:`${this.$imgBase}index/fuzhu/noun_gkzc.png`,
        },
        {
          title: '专业',
          img:`${this.$imgBase}index/fuzhu/noun_zy.png`,
        },
        {
          title: '志愿填报',
          img:`${this.$imgBase}index/fuzhu/noun_zytb.png`,
        },
        {
          title: '招生录取',
          img:`${this.$imgBase}index/fuzhu/noun_zslq.png`,
        },
        {
          title: '分数线',
          img:`${this.$imgBase}index/fuzhu/noun_fsx.png`,
        }
      ]
    }
  },
  methods: {}
}
</script>
<style scoped lang="scss">
.nounList {
  >div{
    margin-right: 72px;
    &:hover{
      color: #47C6A2;
    }
  }
}
</style>