From 0dd47f20adb82f7c6968d9c1077e91625f27bc69 Mon Sep 17 00:00:00 2001
From: 劉鈞霖 <benson@gmail.com>
Date: 星期一, 15 十一月 2021 11:22:46 +0800
Subject: [PATCH] [ Update ] :新增Banner 文字，以及各區塊背景設定，修正 element button hover 顏色
---
PAMapp/pages/consultantLogin/index.vue | 160 +++++++++++++++++++++++++++++++----------------------
1 files changed, 93 insertions(+), 67 deletions(-)
diff --git a/PAMapp/pages/consultantLogin/index.vue b/PAMapp/pages/consultantLogin/index.vue
index c131841..c20ae68 100644
--- a/PAMapp/pages/consultantLogin/index.vue
+++ b/PAMapp/pages/consultantLogin/index.vue
@@ -1,118 +1,140 @@
<template>
- <div>
- <div class="pam-consultant-login">
- <div class="pam-consultant-login__header mt-30">憿批��</div>
- <div class="pam-consultant-login__title mt-30">撣唾��</div>
+ <div>
+ <div class="pam-consultant-login">
+ <div class="pam-consultant-login__header pam-paragraph">憿批��</div>
+ <div class="pam-paragraph">
+ <div class="pam-consultant-login__title">撣唾��</div>
<div class="position-r mt-10">
<input type="text"
:model="loginDto.account"
class="pam-consultant-login__input"
placeholder="頛詨eService撣唾��">
- <div class="pam-consultant-login__inputIcon text--primary cursor--pointer" @click="cookieAccount">
- <i :class="[isRemember ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i>
- 閮��
+ <div class="pam-consultant-login__inputIcon text--primary cursor--pointer"
+ @click="cookieAccount">
+ <i :class="[isRemember ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i>
+ 閮��
</div>
</div>
- <div class="pam-consultant-login__title mt-30">
- <div>撖Ⅳ</div>
- <div class="text--primary fs-16 cursor--pointer" @click="forgetPassword">敹��Ⅳ嚗�</div>
- </div>
+ </div>
+ <div class="pam-paragraph">
+ <div class="pam-consultant-login__title ">
+ <div>撖Ⅳ</div>
+ <div class="text--primary fs-16 cursor--pointer"
+ @click="forgetPassword">敹��Ⅳ嚗�</div>
+ </div>
<div class="position-r mt-10">
<input :type="[isShowPassword ? 'text' : 'password']"
:model="loginDto.password"
class="pam-consultant-login__input"
placeholder="頛詨eService撖Ⅳ">
- <div class="pam-consultant-login__inputIcon cursor--pointer" @click="isShowPassword = !isShowPassword">
+ <div class="pam-consultant-login__inputIcon cursor--pointer"
+ @click="isShowPassword = !isShowPassword">
<i :class="[isShowPassword ? 'icon-eye-1 fs-25' : 'icon-eye' , 'text--primary']"></i>
</div>
</div>
- <div class="pam-consultant-login__title mt-30">
- <div>撽�Ⅳ</div>
- <div class="text--dark-blue fs-16 cursor--pointer" @click="regenerateCode">������</div>
- </div>
+ </div>
+ <div class="pam-paragraph">
+ <div class="pam-consultant-login__title">
+ <div>撽�Ⅳ</div>
+ <div class="text--dark-blue fs-16 cursor--pointer"
+ @click="regenerateCode">������</div>
+ </div>
<div class="pam-consultant-login__verifyBlock mt-10">
<div class="w-55">
<input type="text"
:modal="loginDto.verificationCode"
- class="pam-consultant-login__input" >
+ class="pam-consultant-login__input">
</div>
<div class="pam-consultant-login__verifyImg"></div>
</div>
- <div class="pam-consultant-login__confirmBlock mt-30">
- <button class="pam-consultant-login__confirm cursor--pointer" @click="login">�</button>
- </div>
+ </div>
+ <div class="pam-consultant-login__confirmBlock pam-paragraph">
+ <button class="pam-consultant-login__confirm cursor--pointer"
+ @click="login">�</button>
</div>
</div>
+ </div>
</template>
<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
+ import {
+ Vue,
+ Component
+ } from 'vue-property-decorator';
-@Component({
- layout:'home'
-})
-export default class ConsultantLogin extends Vue {
- isRemember=false;
- isShowPassword=false;
- loginDto={
- account:'',
- password:'',
- verificationCode:'',
- }
+ @Component({
+ layout: 'default'
+ })
+ export default class ConsultantLogin extends Vue {
+ isRemember = false;
+ isShowPassword = false;
+ loginDto = {
+ account: '',
+ password: '',
+ verificationCode: '',
+ }
- login():void{
- console.log('login');
- }
+ login(): void {
+ console.log('login');
+ }
- cookieAccount():void{
- this.isRemember = !this.isRemember;
- if(this.isRemember){
- console.log('sotre account');
+ cookieAccount(): void {
+ this.isRemember = !this.isRemember;
+ if (this.isRemember) {
+ console.log('sotre account');
+ }
+ }
+
+ forgetPassword(): void {
+ console.log('forget password');
+ }
+
+ regenerateCode(): void {
+ console.log('call api regenerate verificationCode')
}
}
- forgetPassword():void{
- console.log('forget password');
- }
-
- regenerateCode():void{
- console.log('call api regenerate verificationCode')
- }
-}
</script>
-<style lang="scss" scoped>
- .mt-20{
+<style lang="scss"
+ scoped>
+ .mt-20 {
margin-top: 20px;
}
- .mt-25{
+
+ .mt-25 {
margin-top: 25px;
}
- .w-55{
+
+ .w-55 {
width: 55% !important;
}
- .position-r{
+
+ .position-r {
position: relative;
}
- .pam-consultant-login{
+
+ .pam-consultant-login {
+ margin: auto;
width: 336px;
- margin: 40px auto 30px auto;
font-size: 20px;
color: $PRIMARY_BLACK;
- &__header{
+
+ &__header {
text-align: center;
font-size: 24px;
font-weight: bold;
letter-spacing: 1.2;
color: $PRIMARY_BLACK;
}
- &__title{
- display:flex;
+
+ &__title {
+ display: flex;
justify-content: space-between;
align-items: center;
- padding: 0px 10px;
}
- &__input{
+
+ &__input {
width: 100%;
outline: 0;
border: 1px solid #CCCCCC;
@@ -125,7 +147,7 @@
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
- &Icon{
+ &Icon {
position: absolute;
display: flex;
align-items: center;
@@ -133,25 +155,29 @@
right: 15px;
}
}
- &__verifyBlock{
+
+ &__verifyBlock {
display: flex;
justify-content: space-between;
}
- &__verifyImg{
- width:126px;
- border:1px black solid;
+
+ &__verifyImg {
+ width: 126px;
+ border: 1px black solid;
}
- &__confirmBlock{
+
+ &__confirmBlock {
display: flex;
justify-content: center;
}
- &__confirm{
+
+ &__confirm {
color: $PRIMARY_WHITE;
width: 80px;
height: 50px;
border-radius: 30px;
border: 1px solid $LIGHT_GREY;
- background-color:$PRIMARY_RED;
+ background-color: $PRIMARY_RED;
}
}
--
Gitblit v1.8.0