From 98f494cf633e3acf5c20f3e9de0d708f2a6c2045 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期五, 05 七月 2024 09:39:59 +0800 Subject: [PATCH] feat:视频浏览 --- src/views/exam-list/data-list/index.vue | 96 +++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 95 insertions(+), 1 deletions(-) diff --git a/src/views/exam-list/data-list/index.vue b/src/views/exam-list/data-list/index.vue index 239f314..27708ac 100644 --- a/src/views/exam-list/data-list/index.vue +++ b/src/views/exam-list/data-list/index.vue @@ -1,15 +1,109 @@ <template> <div class="list-container w-full h-full"> <el-scrollbar> - + <el-card shadow="hover" class="mb-3" v-for="item in props.dataList"> + <div class="item flex justify-between items-center"> + <div class="left-container flex flex-col justify-between"> + <div class="top-container flex items-center"> + <div class="title mr-5 text-xl font-bold">{{ item.examName }}</div> + <div class="tag"> + <el-tag :type="stateList[item.status].type" effect="light" round> + {{ stateList[item.status].text }} + </el-tag> + </div> + </div> + <div class="mid-container flex items-center my-4 text-gray-700"> + <el-icon class="mr-1"> + <Timer /> + </el-icon> + <div class="time"> + 鑰冭瘯鏃堕棿: {{ item.startTime }} ~ {{ item.endTime }} + </div> + </div> + <!-- <div class="bottom-container flex text-sm text-gray-400"> + <div class="bottom-item"> + 鎬诲垎: {{ item.examScore }} + </div> + <div class="bottom-item"> + 棰樻暟: {{ item.examTotal }} + </div> + <div class="bottom-item"> + 绛旈鏃堕棿: {{ item.examTime }}鍒嗛挓 + </div> + </div> --> + </div> + <div class="right-container"> + <div class="button-container"> + <el-button type="primary" size="large" @click="examClick(item)" + :disabled="stateList[item.status].disabled">寮�濮嬭�冭瘯</el-button> + </div> + </div> + </div> + </el-card> </el-scrollbar> </div> </template> <script setup> +import { ref } from 'vue'; +import { Timer } from '@element-plus/icons-vue'; +import { useRouter } from 'vue-router'; +import { useExamStore } from '@/store/index.js'; +import { getExamInfo } from '@/api/modules/exam.js'; +const examStore = useExamStore(); + +const router = useRouter(); + +const props = defineProps({ + dataList: { + type: Array, + default: () => [] + } +}); + +const stateList = { + 1: { + text: '鏈紑濮�', + type: 'primary', + disabled: true + }, + 'ing': { + text: '杩涜涓�', + type: 'success', + disabled: false + }, + 'finished': { + text: '宸茬粨鏉�', + type: 'info', + disabled: true + } +}; + +const examClick = (exam) => { + console.log(exam); + getExamInfo(exam.id).then((res) => { + examStore.setExamInfo({ + id: res.data.id, + examName: res.data.examName, + suggestTime: res.data.suggestTime, + }); + examStore.setExamDetail(res.data.titleList); + examStore.initExam(); + router.push('/exam'); + }).catch(err => { + + }); +} </script> <style lang="scss" scoped> +.item { + width: 100%; + min-height: 120px; +} +.bottom-item { + margin-right: 30px; +} </style> \ No newline at end of file -- Gitblit v1.8.0