front/src/views/evaluating/main.vue

<template>
  <div class="app-back">
    <div class="banner">
      <el-image :src="`${$imgBase}index/banner/daoxue_banner.png`" fit="cover"></el-image>
    </div>
    <div class="fx-column fx-cen-cen pb20">
      <index-card title="在线试卷" class="mt20 index-block" v-if="role">
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in onLinePaper">
            <div class="wrap-item fx-row jc-between ai-center">
              <div class="left mr30">
                <el-image :src="item.img"></el-image>
              </div>
              <div>
                <div class="fx-row ai-center">
                  <el-image :src="`${$imgBase}index/daoxue/icon_paper.png`"></el-image>
                  <p class="bold">{{ item.title }}</p>
                </div>
                <p class="mt20 mb20" style="color:#CECECE">少儿数字内容</p>
                <div>
                  <el-button type="primary" @click="$router.push(item.path)">立即查询</el-button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </index-card>
      <index-card title="学情分析" class="mt20 index-block">
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in idcFormatList" @click="$router.push(item.path)">
            <div class="wrap-item fx-row jc-between ai-center">
              <div class="left mr30">
                <el-image :src="item.img"></el-image>
              </div>
              <div>
                <div class="fx-row ai-center">
                  <el-image :src="`${$imgBase}index/daoxue/icon_paper.png`"></el-image>
                  <p class="bold">{{ item.title }}</p>
                </div>
                <p class="mt20 mb20" style="color:#CECECE">少儿数字内容</p>
                <div>
                  <el-button type="primary" @click="$router.push(item.path)">立即查询</el-button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </index-card>
      <index-card title="学情报告" class="mt20 index-block">
        <el-button type="primary" @click="openNew">查看报告</el-button>
      </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 loginCheckMixin from '@/views/components/blocks/index-login-check-mixin'
import { checkRole } from '@/utils/permission'
import { mapGetters } from 'vuex'

export default {
  components: { IndexCard, MxImageWrap },
  mixins: [loginCheckMixin],
  computed:{
    ...mapGetters(['middlebarRouters']),
    idcListOpt() {
      const obj = {}
      this.idc.map(item => {
        obj[`${item.title}${item.path}`] = {desc: item.desc }
      })
      return obj
    },
    idcFormatList() {
      if(!this.middlebarRouters.length) return []
      if(!this.middlebarRouters.find(item => item.meta.title == '学情分析'))  return  []
      if(!checkRole(['frontMaster'])) return this.idc
      const listOptKey = Object.keys(this.idcListOpt)

      let formatList = []
      return this.middlebarRouters.find(item => item.meta.title == '学情分析').children.slice(0,3).map((item,idx) =>{
        return {
          title: item.meta.title,
          img:this.idc[idx].img,
          path:item.path,
        }
      })
    }
  },
  data() {
    return {
      role:checkRole(['frontStudent']),
      onLinePaper: [
        {
          title: '个人测评',
          img: `${this.$imgBase}index/daoxue/personal_eval.png`,
          path: '/daoxue/evaluating/personal/index_3'
        },
        {
          title: '真题测评',
          img: `${this.$imgBase}index/daoxue/past_eval.png`,
          path: '/daoxue/evaluating/past/index_5'
        },
        {
          title: '学校测评',
          img: `${this.$imgBase}index/daoxue/school_eval.png`,
          path: '/daoxue/evaluating/school/index_1'
        }
      ],
      idc: [
        {
          title: '个人测评',
          img: `${this.$imgBase}index/daoxue/personal_idc.png`,
          path: '/daoxue/idc/eval/index_3'
        },
        {
          title: '真题测评',
          img: `${this.$imgBase}index/daoxue/past_idc.png`,
          path: '/daoxue/idc/eval/index_5'
        },
        {
          title: '学校测评',
          img: `${this.$imgBase}index/daoxue/school_idc.png`,
          path: '/daoxue/idc/eval/school/index_1'
        }
      ]
    }
  },
  methods: {
    openNew(){
      window.open('https://online.fliphtml5.com/jkrou/hjig/#p=1','_blank')
    }
  }
}
</script>
<style scoped lang="scss">

.wrap-item {
  background: #F7F8FD;
  border-radius: 4px;
  padding: 20px 30px 0 30px;
}

.right {
  display: flex;
}

@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>