feat:答题卡

ZhangXianQiang

2024-06-05 5c0d64898ddeabb85ddae32bb620b89b10cee930

feat:答题卡

 components.d.ts

@@ -11,11 +11,15 @@
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCol: typeof import('element-plus/es')['ElCol']
    ElCollapse: typeof import('element-plus/es')['ElCollapse']
    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElProgress: typeof import('element-plus/es')['ElProgress']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSlider: typeof import('element-plus/es')['ElSlider']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTabPane: typeof import('element-plus/es')['ElTabPane']

 src/components/NormalHeader/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="w-screen h-16 bg-blue-400 flex justify-between items-center px-10 box-border">
  <div class="w-screen h-16 bg-blue-500 flex justify-between items-center px-10 box-border">
    <div class="return-container text-center cursor-pointer" @click="returnBack">
      <div class="icon mx-auto">
        <img src="@/assets/icons/return.png" class="width-img" alt="">

 src/router/index.js

@@ -5,7 +5,7 @@
const routes = [
  {
    path: '/',
    redirect: '/index'
    redirect: '/exam'
  },

  {

 src/views/exam/answer-progress/index.vue

New file
@@ -0,0 +1,29 @@
<template>
  <div class="progress-container w-full px-3 py-4 bg-slate-50">
    <div class="title-container flex justify-between items-center mb-3">
      <div class="title text-gray-600 text-base">答题进度</div>
      <div class="title-num text-sm text-gray-500">10/30</div>
    </div>

    <div class="progress-content mb-3">
      <el-progress :percentage="progress" :stroke-width="10" :show-text="false" />
    </div>

    <div class="exam-info text-sm text-gray-600">
      共30题，满分100分
    </div>

  </div>
</template>

<script setup>
import {ref} from 'vue';
const progress = ref(10);

</script>

<style lang="scss" scoped>
.progress-container {
  border-radius: 5px;
}
</style>

 src/views/exam/answer-sheet/index.vue

New file
@@ -0,0 +1,63 @@
<template>
  <div class="sheet-container w-full h-full">
    <el-scrollbar>
      <el-collapse v-model="activeNames" @change="handleChange">
        <template v-for="item in sheetList">
          <el-collapse-item :title="item.title" :name="item.type">
            <div class="sheet-list grid grid-cols-5 gap-4 justify-items-center">
              <div class="sheet-item cursor-pointer flex justify-center items-center" v-for="index in item.total" @click="">
                {{ index }}
              </div>
            </div>
          </el-collapse-item>
        </template>
      </el-collapse>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const categroy = ref(0);
const sheetIndex = ref(0);


const sheetList = ref([
  {
    title: '单选题',
    type: 1,
    total: 20,
  },
  {
    title: '多选题',
    type: 2,
    total: 20,
  },
  {
    title: '判断题',
    type: 3,
    total: 20,
  },
]);

const activeNames = ref(sheetList.value.map(item => item.type));


const handleChange = () => {

};
</script>

<style lang="scss" scoped>
.sheet-list {
  width: 97%;
}
.sheet-item {
  width: 35px;
  height: 35px;
  border: 1px solid #DCDFE6;
  background-color: #fff;
  color: #374151;
}
</style>

 src/views/exam/answer-tag/index.vue

New file
@@ -0,0 +1,46 @@
<template>
  <div class="tag-container flex flex-wrap">
    <div class="tag-item flex items-center" v-for="item in tagList">
      <div class="label text-xs text-gray-500 mr-2">{{ item.name }}</div>
      <div class="tag flex-shrink-0" :style="{backgroundColor: item.bgColor, borderColor: item.borderColor}"></div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';

const tagList = ref([
  {
    name: '已答',
    bgColor: '#3680fa',
    borderColor: '#3680fa',
  },
  {
    name: '当前',
    bgColor: '#ffffff',
    borderColor: '#3680fa',
  },
  {
    name: '未答',
    bgColor: '#ffffff',
    borderColor: '#DCDFE6',
  },
])

</script>

<style lang="scss" scoped>
.tag-item {
  margin-right: 14px;
  &:last-of-type {
    margin: 0;
  }
}
.tag {
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  background-color: #fff;
}
</style>

 src/views/exam/index.vue

@@ -1,22 +1,61 @@
<template>
  <div class="exam-container w-screen h-screen relative overflow-hidden">
    <div class="top-bg bg-blue-400"></div>
    <div class="exam-content flex flex-col ">
      <div class="exam-header">
        <div class="title-container">
          测试测试测试
  <div class="exam-container w-screen h-screen bg-slate-50 relative overflow-hidden">
    <div class="top-bg bg-blue-500"></div>
    <div class="exam-content">
      <div class="exam-wrapper container mx-auto h-full flex flex-col">
        <div class="exam-header flex items-center mt-12 mb-10">
          <div class="title-container text-3xl font-semibold text-white">
            测试测试测试
          </div>
        </div>
        <div class="exam-main grow flex justify-between">
          <!-- 答题卡区 -->
          <div class="answer-wrapper answer-left mr-8 shadow-xl p-4 box-border">
            <div class="wrapper h-full flex flex-col items-center">
              <div class="title-wrapper w-full flex justify-between items-center mb-5">
                <div class="title text-xl font-semibold ">答题卡</div>
                <AnswerTag></AnswerTag>
              </div>

              <div class="progress-wrapper w-full">
                <AnswerProgress></AnswerProgress>
              </div>

              <div class="sheet-wrapper w-full grow relative my-5">
                <div class="sheet-content absolute top-0 bottom-0 w-full">
                  <AnswerSheet></AnswerSheet>
                </div>
              </div>

              <div class="submit-wrapper">
                <el-button type="primary" class="submit-button w-40">提交试卷</el-button>
              </div>

            </div>
          </div>
          <!-- 答题内容区 -->
          <div class="answer-wrapper answer-right grow shadow-xl">

          </div>
        </div>
      </div>
      <div class="exam-main flex-1"></div>
    </div>
  </div>
</template>

<script setup>
import AnswerTag from './answer-tag/index.vue';
import AnswerProgress from './answer-progress/index.vue';
import AnswerSheet from './answer-sheet/index.vue';

</script>

<style lang="scss" scoped>
@media (min-width: 1836px) {
  .container {
    max-width: 1724px;
  }
}
.top-bg {
  width: 130%;
  height: 200px;
@@ -26,8 +65,30 @@
  left: 50%;
  transform: translateX(-50%);
}

.exam-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.exam-header {
  width: 100%;
}
.answer-wrapper {
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.answer-left {
  width: 340px;
}
.answer-right {
  color: #3680fa;
}
.submit-button {
  height: 40px;
}
</style>