front/src/views/evaluating/main.vue

<template>
  <div class="app-back">
    <div class="banner">
      <el-image :src="require('@/assets/images/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">
        <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="require('@/assets/images/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 idc" @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="require('@/assets/images/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">查看报告</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 RouterHelpMixin from '@/router/router-help-mixin'
import loginCheckMixin from '@/views/components/blocks/index-login-check-mixin'
export default {
  components: { IndexCard, MxImageWrap },
  mixins: [RouterHelpMixin, loginCheckMixin],
  data() {
    return {
      onLinePaper: [
        {
          title: '个人测评',
          img: require('@/assets/images/index/daoxue/personal_eval.png'),
          path: '/daoxue/evaluating/personal/index_3'
        },
        {
          title: '真题测评',
          img: require('@/assets/images/index/daoxue/past_eval.png'),
          path: '/daoxue/evaluating/past/index_5'
        },
        {
          title: '学校测评',
          img: require('@/assets/images/index/daoxue/school_eval.png'),
          path: '/daoxue/evaluating/school/index_1'
        },
      ],
      idc: [
        {
          title: '个人测评',
          img: require('@/assets/images/index/daoxue/personal_idc.png'),
          path: '/daoxue/idc/eval/index_3'
        },
        {
          title: '真题测评',
          img: require('@/assets/images/index/daoxue/past_idc.png'),
          path: '/daoxue/idc/eval/index_5'
        },
        {
          title: '学校测评',
          img: require('@/assets/images/index/daoxue/school_idc.png'),
          path: '/daoxue/idc/eval/school/index_1'
        },
      ]
    }
  },
  methods: {
  }
}
</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>