vue3+element实现在线考试

vue3+element实现在线考试

代码如下：

  1 <template>
  2   <div class="common-layout">
  3     <el-container>
  4       <el-affix>
  5         <el-aside
  6           width="320px"
  7           style="background-color: #eff3f7; padding-top: 20px; float: left"
  8         >
  9           <el-card :body-style="{ height: '100vh' }">
 10             <el-form :model="form" label-width="0px">
 11               <el-form-item>
 12                 <h4>我是测试试卷</h4>
 13               </el-form-item>
 14               <el-form-item>
 15                 总分：100分 &nbsp;&nbsp; 时长：12分钟
 16               </el-form-item>
 17               <el-divider />
 18               <el-form-item>
 19                 <el-row :gutter="20">
 20                   <el-col :span="4" v-for="index of 50" :key="index">
 21                     <el-button
 22                       size="small"
 23                       style="width: 30px; height: 25px"
 24                       @click="onScroll(index)"
 25                       >{{ index }}</el-button
 26                     >
 27                   </el-col>
 28                 </el-row>
 29               </el-form-item>
 30               <el-divider />
 31               <el-form-item
 32                 ><span> 剩余时间 </span
 33                 ><span style="color: red; font-size: 24px"
 34                   >{{ count }}
 35                 </span></el-form-item
 36               >
 37               <el-divider />
 38               <el-form-item>
 39                 <el-button type="primary">提交试卷</el-button>
 40               </el-form-item>
 41             </el-form>
 42           </el-card>
 43         </el-aside>
 44       </el-affix>
 45       <el-main style="" @scroll="onScroll"
 46         ><el-card class="box-card">
 47           <template #header>
 48             <div class="card-header">
 49               <span style="font-size: 25px">一、题目</span>
 50             </div>
 51           </template>
 52           <div v-for="index of 50" :key="index">
 53             <!-- 1：单选题 题目1 (5分)：用人单位应当为劳动者建立（
 54               ）档案，并按照规定的期限妥善保存。 A: 员工健康检查 B: 职业健康监护
 55               C: 定期健康检查 D: -->
 56             <el-row :gutter="20">
 57               <el-col :span="24" style="height: 50px"
 58                 >{{ index }}、用人单位应当为劳动者建立（
 59                 ）档案，并按照规定的期限妥善保存。</el-col
 60               >
 61               <el-col :span="24" style="height: 50px"> A: 员工健康检查 </el-col>
 62               <el-col :span="24" style="height: 50px"> B: 职业健康监护 </el-col>
 63               <el-col :span="24" style="height: 50px"> C: 定期健康检查 </el-col>
 64               <el-col :span="24" style="height: 50px"> D: 员工健康检查 </el-col>
 65             </el-row>
 66             <el-divider />
 67           </div>
 68           <el-backtop :right="100" :bottom="100" />
 69         </el-card>
 70       </el-main>
 71     </el-container>
 72   </div>
 73 </template>
 74 <script setup name ="onlines">
 75 const count = ref("");
 76 const seconds = ref(86400); 
 77 
 78 function countDown(params) {
 79   let d = parseInt(seconds.value / (24 * 60 * 60));
 80   d = d < 10 ? "0" + d : d;
 81   let h = parseInt((seconds.value / (60 * 60)) % 24);
 82   h = h < 10 ? "0" + h : h;
 83   let m = parseInt((seconds.value / 60) % 60);
 84   m = m < 10 ? "0" + m : m;
 85   let s = parseInt(seconds.value % 60);
 86   s = s < 10 ? "0" + s : s;
 87   count.value = h + "时" + m + "分" + s + "秒";
 88 }
 89 
 90 function time(params) {
 91   setInterval(() => {
 92     seconds.value -= 1;
 93     countDown();
 94   }, 1000);
 95 }
 96 
 97 function onScroll(params) {
 98   console.log(params);
 99 }
100 time();
101 </script>
102 <style lang="scss" scoped>
103 .common-layout {
104   background-color: #eff3f7;
105 }
106 </style>

 

posted @ 2022-07-28 17:08  Spock123  阅读(401)  评论(0)    收藏  举报