liankao/src/pages/ksfx/stu_ksfx.vue

<template>
  <div class="">
    <NavHeader />
    <bread-crumb />
    <div class="w-1200px m-auto h-auto mastMain">
      <div class="searchInput"></div>
      <div class="min-h-600px groupExamMian">
        <div class="demo-collapse">
          <el-collapse accordion>
            <el-collapse-item :name="index+1" v-for="(item, index) in examArrlist" :key="index" :class="{ 'bg-cusblue': index % 2 == 0 }">
              <template #title>
                <div class="w-full h-60px flex flex-row justify-between examSingleT" >
                  <div>{{ item.examN }}</div>
                  <div>参考人数：{{ item.attendExamNum }}</div>
                  <div>满分：{{ item.fullScore }}</div>
                  <div>最高分：{{ item.maxScore }}</div>
                  <div>考试分析</div>
                </div>
              </template>
              <div>
                <div class="px-90px py-10px flex flex-row justify-start flex-wrap  examList" v-if="item.examPaperList">
            <div class="h-149px p-5px mt-10px flex flex-row justify-start examListSingle"
              v-for="(secItem, secIndex) in item.examPaperList" :key="secIndex" @click="linkTo('stu_stfx')">
              <div class="w-2/5 relative examListSingle_left">
                <img :src="examIcon" class="w-full h-full" alt="">
                <div class="w-full absolute top-0 left-0 text-right text-red-500 text-3xl font-bold pr-2 scoreNum"
                  v-if="secItem.scoreN != 0">{{ secItem.scoreN }}</div>
                <div class="w-full absolute top-0 left-0 text-right text-red-500 text-3xl font-bold pr-2 lockExam" v-else>
                  缺考</div>
                <div class="w-full absolute left-0 bottom-2 text-center text-red-500 text-2xl font-bold subjectName">{{
                  secItem.subName }}</div>
              </div>
              <div class="w-3/5 py-5px px-10px examListSingle_right">
                <p class="h-1/4">学科：{{ secItem.scoreN }}</p>
                <p class="h-1/4">总分：{{ secItem.scoreN }}</p>
                <p class="h-1/4">客观题：{{ secItem.ObjectiveQuestion }}</p>
                <p class="h-1/4">主观题：{{ secItem.SubjectiveQuestions }}</p>
              </div>
            </div>
          </div>
              </div>
            </el-collapse-item>

          </el-collapse>
        </div>







        <!-- <div class="examSingle" v-for="(item, index) in examArrlist" :key="index">
          <div class="h-60px flex flex-row justify-between examSingleT" :class="{ 'bg-cusblue': index % 2 == 0 }">
            <div>{{ item.examN }}</div>
            <div>参考人数：{{ item.attendExamNum }}</div>
            <div>满分：{{ item.fullScore }}</div>
            <div>最高分：{{ item.maxScore }}</div>
            <div class="text-blue-500">考试分析</div>
          </div>
          <div class="px-90px py-10px flex flex-row justify-start flex-wrap  examList" v-if="item.examPaperList">
            <div class="h-149px p-5px mt-10px flex flex-row justify-start examListSingle"
              v-for="(secItem, secIndex) in item.examPaperList" :key="secIndex" @click="linkTo('stu_stfx')">
              <div class="w-2/5 relative examListSingle_left">
                <img :src="examIcon" class="w-full h-full" alt="">
                <div class="w-full absolute top-0 left-0 text-right text-red-500 text-3xl font-bold pr-2 scoreNum"
                  v-if="secItem.scoreN != 0">{{ secItem.scoreN }}</div>
                <div class="w-full absolute top-0 left-0 text-right text-red-500 text-3xl font-bold pr-2 lockExam" v-else>
                  缺考</div>
                <div class="w-full absolute left-0 bottom-2 text-center text-red-500 text-2xl font-bold subjectName">{{
                  secItem.subName }}</div>
              </div>
              <div class="w-3/5 py-5px px-10px examListSingle_right">
                <p class="h-1/4">学科：{{ secItem.scoreN }}</p>
                <p class="h-1/4">总分：{{ secItem.scoreN }}</p>
                <p class="h-1/4">客观题：{{ secItem.ObjectiveQuestion }}</p>
                <p class="h-1/4">主观题：{{ secItem.SubjectiveQuestions }}</p>
              </div>
            </div>
          </div>

        </div> -->

      </div>
    </div>
    <commonFooter />
  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script setup>
import { InfoFilled } from '@element-plus/icons-vue';
import examIcon from '@/assets/ksfx/examIcon.png';
import {student_ksfx_list} from "@/pages/ksfx/api";

import { useRouter } from "vue-router";
import { skeletonProps } from 'element-plus';
const router = useRouter();


const scoreMarkSwitch = $ref(true);

let examArrlist = ref()
onMounted(() => {
  initData();
});
const initData = () => {
  let transObj = {
    xueke_id: '',
    grade_id: '',
    school_id:''
  }
  student_ksfx_list(transObj)
    .then(res => {
      if (res.code == "1") {
        examArrlist.value = res.data.data.examArrlist;
      }
    })
  .catch(error=>{console.log(error)})
}
//跳转
const linkTo = (item) => {
  router.push(item);
}

</script>

<style lang="scss" scoped>
@import '@/styles/ksfx.css';

::v-deep .el-collapse-item__header{
  height: 60px;
  border: 1px dashed grey;
  background-color:#F1F7FF;
}
.mastMain {
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 2px;
}

.bg-cusblue {
  background-color: #F1F7FF;
}

.examSingleT {
  line-height: 60px;
  box-sizing: border-box;
  padding: 0 30px;
}

.examListSingle {
  width: 24%;
  background: #ffffff;
  border: 2px solid #0148e5;
  border-radius: 10px;
  margin-right: 1%;
  cursor: pointer;
}

.examListSingle:last-child {
  margin-right: 0 !important;
}

.examListSingle_left {}</style>