liankao/src/pages/ksfx/ksfx.vue

<template>
  <div class="">
    <NavHeader />
    <bread-crumb />
    <div class="w-1200px m-auto h-auto mastMain">
      <div class="my-4 searchInput">
        <el-input
        class="w-200px "
        v-model="input3"
        placeholder="请输入检索内容"
      >
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
      </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+1) % 2 == 0 }">
              <template #title>
                <div class="w-full h-60px flex flex-row justify-between examSingleT">
                  <div>{{ item.examN }}</div>
                  <div>参考人数：??</div>
                  <div>满分：??</div>
                  <div>最高分：??</div>
                  <div class="singleColor">考试分析</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('cjfx_cjd')">
                    <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=" absolute top-7px left-0 text-3xl font-bold  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>
    </div>
    <commonFooter />
  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script setup>
import { InfoFilled,Search } from '@element-plus/icons-vue';
import examIcon from '@/assets/ksfx/examIcon.png';
import { student_ksfx_list, ksjh_list } from "@/pages/ksfx/apiItem";

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

const input3 = ref('');

const scoreMarkSwitch = $ref(true);

let examArrlist = ref();

onMounted(() => {
  initData();
});
//初始化
const initData = () => {
  //接口模拟
  // let transObj1 = {
  //   sm_id: 267,
  //   ykj_kslx: 7,
  // }

  // ksjh_list(transObj1)
  //   .then(res => {
  //     if (res.code == "1") {
  //       console.log(res, "887878");
  //       examArrlist.value = res.data.page_data;

  //     }
  //   })
  //   .catch(error => { console.log(error) })

  let transObj = {
    xueke_id: '',
    grade_id: '',
    school_id: ''
  }
  student_ksfx_list(transObj)
    .then(res => {
      if (res.code == "1") {
        console.log(res,"8989")
        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;
}
.searchInput{
  padding-left:80%;
}
.mastMain {
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 2px;
}

.bg-cusblue {
  background-color: #F1F7FF;
}
.singleColor{
  color: #1658E8;
}
.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 {}

.lockExam {
  width: 70%;
  transform: translate(25%, 0%);
  background-color: red;
  border-radius: 50%;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
}</style>