From 27f869c1e6c0c79f763a34bfffc09a55c1841cc1 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 05 六月 2024 16:49:14 +0800
Subject: [PATCH] feat:答题卡选择效果
---
src/views/exam/answer-sheet/index.vue | 17 ++++++++++++++++-
1 files changed, 16 insertions(+), 1 deletions(-)
diff --git a/src/views/exam/answer-sheet/index.vue b/src/views/exam/answer-sheet/index.vue
index ee55a0f..eb8c60b 100644
--- a/src/views/exam/answer-sheet/index.vue
+++ b/src/views/exam/answer-sheet/index.vue
@@ -5,7 +5,7 @@
<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="">
+ <div class="sheet-item cursor-pointer flex justify-center items-center" v-for="index in item.total" @click="sheetClick(item,index)" :class="itemClass(item.type, index)">
{{ index }}
</div>
</div>
@@ -21,6 +21,12 @@
const categroy = ref(0);
const sheetIndex = ref(0);
+
+const itemClass = (type,index) => {
+ return {
+ active: categroy.value === type && sheetIndex.value === index
+ }
+}
const sheetList = ref([
@@ -47,6 +53,11 @@
const handleChange = () => {
};
+
+const sheetClick = (item, index) => {
+ categroy.value = item.type;
+ sheetIndex.value = index;
+}
</script>
<style lang="scss" scoped>
@@ -60,4 +71,8 @@
background-color: #fff;
color: #374151;
}
+
+.active {
+ border-color: #3680fa;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0