73 lines
2.6 KiB
Vue
73 lines
2.6 KiB
Vue
<template>
|
|
<div id="modal_account_edit" class="w-[600px] h-[296px] bg-[#FFFFFF] rounded
|
|
shadow-lg flex flex-col">
|
|
<ModalHeader :headerText="i18next.t('AcctMgmt.AccountEdit')"/>
|
|
|
|
<main class="flex row h-[96px] my-[32px] flex-col px-8">
|
|
<div class="input-row w-full flex py-3">
|
|
<span class="field-label w-[68px] text-sm flex items-center font-medium mr-4 justify-end">{{ i18next.t("AcctMgmt.Account") }} </span>
|
|
<input class="w-[454px] rounded p-1 btn btn-sm btn-neutralborder border-[1px] border-[#64748B] flex items-center h-[40px]"/>
|
|
</div>
|
|
<div class="input-row w-full flex py-3 items-center">
|
|
<span class="field-label w-[68px] text-sm flex items-center font-medium mr-4 justify-end">{{ i18next.t("AcctMgmt.FullName") }} </span>
|
|
<input class="w-[454px] rounded p-1 btn btn-sm btn-neutralborder border-[1px] border-[#64748B] flex items-center h-[40px]"/>
|
|
</div>
|
|
</main>
|
|
<footer class="flex row footer justify-end pr-[32px]">
|
|
<button class="cancel-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
|
|
flex justify-center items-center text-[#4E5969] font-medium"
|
|
@click="onCancelBtnClick"
|
|
>
|
|
{{ i18next.t("Global.Cancel") }}
|
|
</button>
|
|
<button class="confirm-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 bg-[#0099FF]
|
|
flex justify-center items-center text-[#ffffff] font-medium ml-[16px]"
|
|
@click="onConfirmBtnClick"
|
|
>
|
|
{{ i18next.t("Global.Confirm") }}
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from 'vue';
|
|
import i18next from "@/i18n/i18n.js";
|
|
import { mapActions, } from 'pinia';
|
|
import { useModalStore } from '@/stores/modal.js';
|
|
import ModalHeader from "./ModalHeader.vue";
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
return {
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
i18next: i18next,
|
|
};
|
|
},
|
|
components: {
|
|
ModalHeader,
|
|
},
|
|
methods: {
|
|
onConfirmBtnClick(){
|
|
//TODO:
|
|
},
|
|
onCloseBtnClick(){
|
|
this.closeModal();
|
|
},
|
|
onCancelBtnClick(){
|
|
this.closeModal();
|
|
},
|
|
...mapActions(useModalStore, ['closeModal']),
|
|
}
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
#modal_account_edit {
|
|
background-color: #ffffff;
|
|
backdrop-filter: opacity(1); /*防止子元件繼承父元件的透明度 */
|
|
}
|
|
</style> |