[ Update ] #Todo:129069_顧問登入畫面刻板

劉鈞霖

2021-11-04 8af4b1b380f786f14373820b1ef8647b6b7a92f3

[ Update ] #Todo:129069_顧問登入畫面刻板

 PAMapp/assets/scss/utilities/_utilities.scss

@@ -40,7 +40,9 @@
.pr-10 {
  padding-right: 10px;
}

.pr-5{
  padding-right: 5px;
}
.pl-10 {
  padding-left: 10px;
}
@@ -52,3 +54,9 @@
.cursor--pointer {
  cursor: pointer;
}

@for $fontSize from 12 through 45 {
  .fs-#{$fontSize} {
    font-size: #{$fontSize} + 'px';
  }
}

 PAMapp/components/NavBar.vue

@@ -16,7 +16,7 @@
              <li class="pam-header__dropdown-item" @click="$router.push('/record/contactRecord')">查看紀錄</li>
              <li class="pam-header__dropdown-item" @click="$router.push('/contactList/consultantList')">我的顧問清單</li>
              <li class="pam-header__dropdown-item">登出</li>
              <li class="pam-header__dropdown-item pam-header__dropdown-divider" @click="$router.push('/login')">顧問登入</li>
              <li class="pam-header__dropdown-item pam-header__dropdown-divider" @click="$router.push('/consultantLogin')">顧問登入</li>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

 PAMapp/pages/consultantLogin/index.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,153 @@
<template>
    <div>
      <div class="pam-consultant-login">
        <div class="pam-consultant-login__header">顧問登入</div>
        <div class="pam-consultant-login__title mt-20">帳號</div>
        <div class="position-r mt-10">
          <input type="text"
            :model="loginDto.account"
            class="pam-consultant-login__input"
            placeholder="輸入eService帳號">
          <div class="position-a 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-25">
           <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="position-a 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-25">
           <div>驗證碼</div>
           <div class="text--dark-blue fs-16 cursor--pointer" @click="regenerate">重新產生</div>
         </div>
        <div class="mt-10" style="display:flex;justify-content:space-between ">
          <div class="w-55">
            <input type="text"
              :modal="loginDto.verificationCode"
              class="pam-consultant-login__input" >
          </div>
          <div class="pam-consultant-login__verifyImg"></div>
        </div>
        <div class="pam-consultant-login__confirmBlock">
           <button class="pam-consultant-login__confirm mt-10" @click="login">送出</button>
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component({
  layout:'home'
})
export default class ConsultantLogin extends Vue {
  isRemember=false;
  isShowPassword=false;
  loginDto={
    account:'',
    password:'',
    verificationCode:'',
  }


  login():void{
    console.log('login');
  }

  cookieAccount():void{
    this.isRemember = !this.isRemember;
    if(this.isRemember){
      console.log('cookie');
    }
  }

  forgetPassword():void{
    console.log('forget password');
  }

  regenerate():void{
    console.log('regenerate verificationCode')
  }
}
</script>
<style lang="scss" scoped>
  .mt-20{
    margin-top: 20px;
  }
  .mt-25{
    margin-top: 25px;
  }
  .w-55{
    width: 55% !important;
  }
  .position-r{
    position: relative;
  }
  .position-a{
    position: absolute;
    display: flex;
    align-items: center;
    top: 15px;
    right: 15px;
  }
  .pam-consultant-login{
    width: 336px;
    margin: 40px auto 30px auto;
    font-size: 20px;
    color: $PRIMARY_BLACK;
    &__header{
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 1.2;
      color: $PRIMARY_BLACK;
    }
    &__title{
      display:flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 10px;
    }
    &__input{
      width: 100%;
      outline: 0;
      border: 1px solid #CCCCCC;
      border-radius: 10px;
      font-size: 20px;
      height: 50px;
      padding: 10px 90px 10px 15px;
      overflow: auto;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    &__verifyImg{
      width:126px;
      border:1px black solid;
    }
    &__confirmBlock{
      display: flex;
      justify-content: center;
    }
    &__confirm{
      color: $PRIMARY_WHITE;
      width: 80px;
      height: 50px;
      border-radius: 30px;
      border: 1px solid $LIGHT_GREY;
      background-color:$PRIMARY_RED;
    }
  }

</style>