WIP: account edit modal layout done (now: without password rows)

2024-06-20 10:56:03 +08:00
parent b7862ab164
commit d6a79687da
8 changed files with 126 additions and 17 deletions
--- a/src/views/AccountManagement/ModalAccountEdit.vue
+++ b/src/views/AccountManagement/ModalAccountEdit.vue
@@ -0,0 +1,76 @@
+<template>
+    <div id="modal_account_edit" class="w-[600px] h-[296px] bg-[#FFFFFF] rounded
+        shadow-lg flex flex-col">
+        <header class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center
+            border-b border-b-[1px] border-[#CBD5E1]
+        ">
+            <h1 class="flex text-base font-bold"> {{ i18next.t("AcctMgmt.AccountEdit") }}</h1>
+            <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer"
+                @click="onCloseBtnClick"
+            />
+        </header>
+        
+        <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 i18next from "@/i18n/i18n.js";
+import { mapActions, } from 'pinia';
+import { useModalStore } from '@/stores/modal.js';
+
+export default {
+    setup() {
+      return {
+
+      };
+    },
+    data() {
+        return {
+            i18next: i18next,
+        };
+    },
+    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>