imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: #333 hover blue. fix: #332 v-if replacing v-show

Browse Source
This commit is contained in:
Cindy Chang
2024-08-14 11:14:35 +08:00
parent 2ec7029887
commit 840d81da9f
2 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AccountMenu/AcctMenu.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="account_menu" v-show="isAcctMenuOpen" class="absolute top-0 w-[232px] bg-white right-[0px] rounded shadow-lg bg-[#ffffff]">
<div id="account_menu" v-if="isAcctMenuOpen" class="absolute top-0 w-[232px] bg-white right-[0px] rounded shadow-lg bg-[#ffffff]">
<div id="greeting" class="w-full border-b border-[#CBD5E1]">
<span class="m-4 h-[48px]">
{{ i18next.t("AcctMgmt.hi") }}{{ userData.name }}
@@ -34,7 +34,7 @@ import { computed, onMounted, ref, } from 'vue';
import { mapActions, mapState, storeToRefs } from 'pinia';
import i18next from '@/i18n/i18n';
import LoginStore from '@/stores/login.ts';
import AcctMgmtStore from '@/stores/acctMgmt';
import AcctMgmtStore from '@/stores/acctMgmt.ts';
import AllMapDataStore from '@/stores/allMapData.js';
import ConformanceStore from '@/stores/conformance.js';
import { leaveFilter, leaveConformance } from '@/module/alertModal.js';

14
src/components/Header.vue
View File

@@ -6,15 +6,21 @@
</figure>
<div class="flex justify-between items-center relative"
v-show="showMember">
<img v-show="true" id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32"
class="cursor-pointer z-50" @click="toggleIsAcctMenuOpen" alt="user-head"
/>
<img id="acct_mgmt_button" v-if="!isHeadHovered" src="@/assets/icon-head-black.svg" @mouseenter='isHeadHovered = true'
width="32" height="32" @click="toggleIsAcctMenuOpen"
class="cursor-pointer z-50" alt="user-head"
/>
<img id="acct_mgmt_button" v-else src="@/assets/icon-head-blue.svg" @mouseleave='isHeadHovered = false'
width="32" height="32" @click="toggleIsAcctMenuOpen"
class="cursor-pointer z-50" alt="user-head"
/>
</div>
</div>
</div>
</template>
<script>
import { ref, } from 'vue';
import { storeToRefs, } from 'pinia';
import i18next from '@/i18n/i18n';
import loginStore from '@/stores/login.ts';
@@ -39,6 +45,7 @@ export default {
const acctMgmtStore = useAcctMgmtStore();
const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
const isHeadHovered = ref(false);
const toggleIsAcctMenuOpen = () => {
acctMgmtStore.toggleIsAcctMenuOpen();
@@ -51,6 +58,7 @@ export default {
allMapDataStore, conformanceStore,
conformanceFileName,
toggleIsAcctMenuOpen,
isHeadHovered,
};
},
components: {