From e430eadebde1690a177cdf79e8a35da66c484dd0 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 28 十二月 2021 11:38:38 +0800
Subject: [PATCH] refactor components: NavBar, Footer, loading, popUpFrame
---
PAMapp/components/loading.vue | 7 +++
PAMapp/components/NavBar.vue | 17 +++++---
PAMapp/components/popUpFrame.vue | 27 ++++++++++---
PAMapp/components/Footer.vue | 47 ++++++++++++-----------
4 files changed, 63 insertions(+), 35 deletions(-)
diff --git a/PAMapp/components/Footer.vue b/PAMapp/components/Footer.vue
index 10aa643..9762e98 100644
--- a/PAMapp/components/Footer.vue
+++ b/PAMapp/components/Footer.vue
@@ -20,7 +20,7 @@
<li class="pam-footer-contact__item">(撠�������曹� ~ �曹�� 08:00~20:00 ���勗�����09:00~17:30)</li>
</ul>
</section>
- <section class="pam-footer-copywrite">�蝬脩�靽�犖憯質���誨������</section>
+ <section class="pam-footer-copywriting">�蝬脩�靽�犖憯質���誨������</section>
</footer>
</template>
@@ -44,18 +44,19 @@
label: string;
url: string;
}
+
</script>
<style lang="scss" scoped>
.pam-footer {
- border-top: 1px solid #CCCCCC;
+ border-top : 1px solid #CCCCCC;
background-color: $PRIMARY_WHITE;
.pam-footer-nav {
padding: 10px 20px;
.pam-footer-nav__list {
- display: flex;
- list-style: none;
- flex-wrap: wrap;
+ display : flex;
+ list-style : none;
+ flex-wrap : wrap;
justify-content: center;
.pam-footer-nav__item {
padding: 10px 0 10px 10px;
@@ -65,7 +66,7 @@
@extend .cursor--pointer;
a, a:hover, a:focus, a:active {
text-decoration: none;
- color: inherit;
+ color : inherit;
}
&:nth-of-type(3) {
.pam-footer-nav__item-pipe {
@@ -79,37 +80,37 @@
}
}
.pam-footer-contact {
- padding: 10px 20px;
- display: flex;
+ padding : 10px 20px;
+ display : flex;
flex-direction: column;
.pam-footer-contact__list {
- display: flex;
- list-style: none;
- flex-wrap: wrap;
+ display : flex;
+ list-style : none;
+ flex-wrap : wrap;
justify-content: center;
.pam-footer-contact__item {
- color: $PRUDENTIAL_GREY;
- font-size: 12px;
- text-align: center;
+ color : $PRUDENTIAL_GREY;
+ font-size : 12px;
+ text-align : center;
line-height: 20px;
@extend .text--bold;
.phone {
- color: $PRIMARY_BLACK;
+ color : $PRIMARY_BLACK;
font-size: 14px;
@extend .text--bold;
}
}
}
}
- .pam-footer-copywrite {
+ .pam-footer-copywriting {
background-color: $PRIMARY_RED;
- display: flex;
- justify-content: center;
- color: $PRIMARY_WHITE;
- padding: 10px 0;
- font-size: 12px;
- font-weight: bold;
- line-height: 20px;
+ display : flex;
+ justify-content : center;
+ color : $PRIMARY_WHITE;
+ padding : 10px 0;
+ font-size : 12px;
+ font-weight : bold;
+ line-height : 20px;
}
}
</style>
diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index b59834f..44664b0 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -40,11 +40,15 @@
const roleStorage = namespace('localStorage');
@Component
export default class NavBar extends Vue {
- @roleStorage.Mutation storageClear!: () => void;
@roleStorage.Getter idToken!: string | null;
@roleStorage.Getter currentRole!: string | null;
@roleStorage.Getter consultantId!: string | null;
+
+ @roleStorage.Mutation storageClear!: () => void;
+
+ isOpenDropdown = false;
+ login_role = Role.NOT_LOGIN;
navBarList = [{
authorityOfRoleList: [Role.NOT_LOGIN],
@@ -92,12 +96,8 @@
title: '憿批��',
},
];
- login_role = Role.NOT_LOGIN;
- isOpenDropdown = false;
- get loginRole(): Role {
- return this.idToken && this.currentRole ? (this.currentRole as Role): Role.NOT_LOGIN;
- }
+ //////////////////////////////////////////////////////////////////////
routerNavigateTo(url: string): void {
(this.$refs.dropdown as any).hide();
@@ -115,6 +115,11 @@
this.storageClear();
_.isEqual(this.$route.name, 'index') ? location.reload() : this.$router.push('/');
}
+
+ get loginRole(): Role {
+ return this.idToken && this.currentRole ? (this.currentRole as Role): Role.NOT_LOGIN;
+ }
+
}
</script>
diff --git a/PAMapp/components/loading.vue b/PAMapp/components/loading.vue
index f4099e8..dc4321b 100644
--- a/PAMapp/components/loading.vue
+++ b/PAMapp/components/loading.vue
@@ -17,16 +17,23 @@
}
})
export default class Loading extends Vue {
+
isLoading = false;
+
defaultOptions = {
animationData: require('@/assets/lottie/loading.json')
};
+
+ //////////////////////////////////////////////////////////////////////
+
start(): void {
this.isLoading = true;
}
+
finish(): void {
this.isLoading = false;
}
+
}
</script>
diff --git a/PAMapp/components/popUpFrame.vue b/PAMapp/components/popUpFrame.vue
index 4cee91d..de6b525 100644
--- a/PAMapp/components/popUpFrame.vue
+++ b/PAMapp/components/popUpFrame.vue
@@ -1,15 +1,18 @@
<template>
<div>
+
<Ui-Drawer :isVisible.sync="isUseDrawer"
@closeDrawer="closePopUp"
:size="drawerSize">
<slot></slot>
</Ui-Drawer>
+
<Ui-Dialog :isVisible.sync="isUseDialog"
@closeDialog="closePopUp"
:width="dialogWidth">
<slot></slot>
</Ui-Dialog>
+
</div>
</template>
@@ -20,13 +23,28 @@
@Component
export default class PopUpFrame extends Vue {
- @PropSync('isOpen',{type:Boolean,default:false}) syncIsOpen!:boolean;
- @Prop({default:'auto'}) drawerSize!:string; // element UI drawer default size
- @Prop({default:'50%'}) dialogWidth!:string; // element UI dialog default width
+
+ @PropSync('isOpen',{type:Boolean,default:false})
+ syncIsOpen!:boolean;
+
+ @Prop({default:'auto'})
+ drawerSize!:string; // element UI drawer default size
+
+ @Prop({default:'50%'})
+ dialogWidth!:string; // element UI dialog default width
+
+ //////////////////////////////////////////////////////////////////////
+
+ @Emit('closePopUp') closePopUp() {
+ return;
+ }
+
+ //////////////////////////////////////////////////////////////////////
private get isUseDrawer() : boolean {
return this.syncIsOpen && UtilsService.isMobileDevice();
}
+
private set isUseDrawer(value: boolean) {
this.$emit('update:isOpen',value);
}
@@ -39,8 +57,5 @@
this.$emit('update:isOpen',value);
}
- @Emit('closePopUp') closePopUp() {
- return;
- }
}
</script>
--
Gitblit v1.8.0