From f921245d071b9d9189e9c212809b2aa14205c6b5 Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期四, 25 十一月 2021 12:24:56 +0800
Subject: [PATCH] [Update] [個人帳號設定]畫面修正
---
PAMapp/pages/accountSetting/index.vue | 157 +++++++++++++++++++++++++++++++++++-----------------
PAMapp/pages/notification/index.vue | 2
2 files changed, 107 insertions(+), 52 deletions(-)
diff --git a/PAMapp/pages/accountSetting/index.vue b/PAMapp/pages/accountSetting/index.vue
index e595262..5f10951 100644
--- a/PAMapp/pages/accountSetting/index.vue
+++ b/PAMapp/pages/accountSetting/index.vue
@@ -1,45 +1,60 @@
<template>
<div class="account-page">
<div class="account-page-title">�犖撣唾�身摰�</div>
- <section class="user-name">
- <div class="setting-title">憪��</div>
- <input
- :disabled="userNameDisabled"
- v-model="userNameValue"
- ref="userName"
- class="name-input input"
-
- >
- <i class="icon-edit " @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled }"></i>
- </section>
-
-
-
<section class="account-card">
<div class="header">
- <div class="setting-title">蝬��</div>
- <div class="contact-type">����Ⅳ</div>
- <i class="icon-edit" @click="editField('userPhone')" :class="{'icon-color-change': !userPhoneDisabled}"></i>
+ <div class="block">
+ <div class="setting-title">憪��</div>
+ <div class="contact-type">
+ <input
+ :disabled="userNameDisabled"
+ v-model="userNameValue"
+ ref="userName"
+ class="input name-input"
+ placeholder="�����" >
+ </div>
+ </div>
+ <i class="icon-edit icon" @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled}"></i>
</div>
- <input
- :disabled="userPhoneDisabled"
- v-model="phoneValue"
- ref="userPhone"
- class="contact-input input" placeholder="0912345678" >
+
</section>
<section class="account-card">
<div class="header">
+ <div class="block">
<div class="setting-title">蝬��</div>
- <div class="contact-type">Email</div>
- <i class="icon-edit" @click="editField('userEmail')"
- :class="{'icon-color-change': !userEmailDisabled}"></i>
+ <div class="contact-type">
+ ����Ⅳ
+ <input
+ :disabled="userPhoneDisabled"
+ v-model="phoneValue"
+ ref="userPhone"
+ class="contact-input input"
+ placeholder="0912345678" >
+ </div>
+ </div>
+ <i class="icon-edit icon" @click="editField('userPhone')" :class="{'icon-color-change': !userPhoneDisabled}"></i>
</div>
- <input
- :disabled="userEmailDisabled"
- v-model="emailValue"
- ref="userEmail"
- class="contact-input input" placeholder="abc@gmail">
+
+ </section>
+
+ <section class="account-card">
+ <div class="header">
+ <div class="block">
+ <div class="setting-title">蝬��</div>
+ <div class="contact-type">Email
+ <input
+ :disabled="userEmailDisabled"
+ v-model="emailValue"
+ ref="userEmail"
+ class="contact-input input"
+ placeholder="abc@gmail">
+ </div>
+ </div>
+ <i class="icon-edit icon" @click="editField('userEmail')"
+ :class="{'icon-color-change': !userEmailDisabled}"></i>
+ </div>
+
</section>
</div>
@@ -59,11 +74,11 @@
emailValue = '' ;
editField(fieldName: string): void {
- const enablePromise = new Promise((resolve, reject) => {
- resolve(this[`${fieldName}Disabled`] = false);
+ const enablePromise = new Promise((resolve, reject) => { // 甇斤promise隤��
+ resolve((this as any)[`${fieldName}Disabled`] = false);
});
const targetInput = this.$refs[fieldName] as any;
- enablePromise.then((enable) => {
+ enablePromise.then((_) => {
targetInput.focus();
});
}
@@ -73,25 +88,12 @@
<style lang="scss" scoped>
.account-page{
+ .block{
+ display: flex;
+ }
.account-page-title{
font-size: 20px;
margin-bottom: 34px;
- }
- .user-name{
- display: flex;
- border-bottom: 1px solid gray;
- justify-content: space-around;
- margin-bottom: 24px;
- align-items: baseline;
- .name-input{
- width: 180px;
- height:27px;
- margin-bottom: 20px;
- margin-left: -18px;
- }
- .icon{
- margin-top:10px;
- }
}
.account-card{
display: flex;
@@ -101,12 +103,21 @@
.contact-type{
width: 184px;
margin-right: 16px;
- padding-top: 10px;
font-size: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
}
}
}
+.name-input{
+ width: 184px;
+ height:27px;
+ margin-bottom: 20px;
+ font-size: 20px;
+ margin-top: -3px;
+ }
.setting-title{
margin-left: 28px;
margin-bottom:10px;
@@ -119,10 +130,11 @@
justify-content: space-evenly;
}
.contact-input{
- margin-left: 100px;
font-size: 20px;
margin-bottom: 10px;
text-overflow: ellipsis;
+ margin-top: 10px;
+ width: 184px;
}
.input{
border: 0;
@@ -134,5 +146,48 @@
}
.icon-color-change{
color:$PRIMARY_RED;
+ font-size: 20px;
}
+.icon{
+ font-size:20px;
+ // color:#1B365D;
+}
+@include desktop{
+
+ .header{
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ }
+ .setting-title{
+ margin-bottom:10px;
+ width: 58px;
+ font-size: 18px;
+ font-weight: bold;
+ }
+ .account-page{
+ .account-page-title{
+ font-size: 20px;
+ margin-bottom: 34px;
+ font-weight: bold;
+ }
+ }
+ .account-card{
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid gray;
+ margin-bottom: 33px;
+ .contact-type{
+ margin-left: 10px;
+ font-size: 20px;
+ }
+ }
+ .name-input{
+ width: 550px;
+ }
+ .contact-input{
+ width:550px
+ }
+ }
+
</style>
\ No newline at end of file
diff --git a/PAMapp/pages/notification/index.vue b/PAMapp/pages/notification/index.vue
index 2f49631..68c6e4f 100644
--- a/PAMapp/pages/notification/index.vue
+++ b/PAMapp/pages/notification/index.vue
@@ -83,7 +83,7 @@
showNotification = false;
readNotification(index?: number): void {
- const targetNotification = this.notificationList[index];
+ const targetNotification = index ? this.notificationList[index] : false;
const readNotifaction = (notification: NotificationIF) => notification.hasRead = true;
// 摰儔 霈 = ( �� : �� )
if (targetNotification) {
--
Gitblit v1.8.0