front/src/views/elective/main.vue

<template>
  <div class="app-back">
    <div class="banner">
      <el-image style="width: 100vw" :src="`${$imgBase}index/banner/elective_banner.png`" fit="cover"></el-image>
    </div>
    <div class="fx-cen-cen fx-column pb20">
      <index-card-subject-query class="mt20 index-block"/>
      <index-card-elective-test class="mt20 index-block"/>
      <index-card-career class="mt20 index-block"/>
      <!--  三库 -->
      <index-card-colleage class="mt20 index-block"></index-card-colleage>
      <!--  资讯 -->
      <index-card-news-single class="mt20 index-block" type="高考政策" morePath="/fuzhu/newGaokaoNews"  />
      <!--  大数据选科   -->
      <index-card-elective class="mt20 index-block"></index-card-elective>
    </div>
  </div>
</template>
<script>
import IndexCardCareer from '@/views/index/components/index-card-career'
import IndexCardElectiveTest from '@/views/index/components/index-card-elective-test'
import IndexCardSubjectQuery from '@/views/index/components/index-card-subject-query'
import IndexCardNewsSingle from '@/views/index/components/index-card-news-single'
import IndexCard from '@/views/index/components/index-card'
import IndexCardColleage from '@/views/index/components/index-card-colleage'
import IndexCardElective from '@/views/index/components/index-card-elective'

export default {
  components: {
    IndexCardNewsSingle,
    IndexCardElectiveTest,
    IndexCardSubjectQuery,
    IndexCardCareer,
    IndexCard,
    IndexCardElective,
    IndexCardColleage
  },
  data() {
    return {
      plan: [
        {
          title: '批次控制线',
          img:`${this.$imgBase}index/zhiyuan/zhiyuan_batch.png`,
          path: '/zhiyuan/batch'
        },
        {
          title: '投档线',
          img:`${this.$imgBase}index/zhiyuan/zhiyuan_tdx.png`,
          path: '/zhiyuan/ShiftLine'
        },
        {
          title: '一分一段',
          img:`${this.$imgBase}index/zhiyuan/zhiyuan_yfyd.png`,
          path: '/zhiyuan/yfyd'
        },
        {
          title: '招生计划',
          img:`${this.$imgBase}index/zhiyuan/zhiyuan_plan.png`,
          path: '/zhiyuan/enrollPlan'
        },
        {
          title: '高考政策',
          img:`${this.$imgBase}index/zhiyuan/zhiyuan_gkzc.png`,
          path: '/fuzhu/newGaokaoNews'
        },
        {
          title: '院校查询',
          img:`${this.$imgBase}index/zhiyuan/zhiyuan_yxcx.png`,
          path: '/new-gaokao/three/UniversitiesColleges'
        },
      ]
    }
  },
  methods: {
  }
}
</script>
<style scoped lang="scss">
.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;
  }
}
@media screen and (min-width: 1440px) {
  .index-block {
    width: 1350px;
    overflow: hidden;
  }
}

@media screen and (max-width: 1439px) {
  .index-block {
    width: calc(100vw - 80px);
    overflow: hidden;
  }
}
</style>