refactor NavBar.vue

This commit is contained in:
Cindy Chang
2024-07-22 13:52:48 +08:00
parent 258a25972a
commit adcdb2bdc0
10 changed files with 67 additions and 76 deletions

View File

@@ -1,15 +1,15 @@
<template>
<div
class="relative two-imgs-container w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!--一個relative的div承接兩個absolute的imgs元素-->
<img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute"/>
<img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute"/>
<img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]"/>
<img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute" alt="checkbox"/>
<img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute" alt="checkbox"/>
<img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]" alt="checkbox"/>
</div>
</template>
<script>
import { defineComponent, computed, ref, } from 'vue';
import { defineComponent, computed, } from 'vue';
import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";