feat:答题卡选择效果

ZhangXianQiang

2024-06-05 27f869c1e6c0c79f763a34bfffc09a55c1841cc1

feat:答题卡选择效果

 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>

 src/views/exam/index.vue

@@ -36,6 +36,7 @@
          <!-- 答题内容区 -->
          <div class="answer-wrapper answer-right grow shadow-xl">

            
          </div>
        </div>
      </div>