[ Update ] :新增Banner 文字，以及各區塊背景設定，修正 element button hover 顏色

劉鈞霖

2021-11-15 0dd47f20adb82f7c6968d9c1077e91625f27bc69

 PAMapp/pages/consultantLogin/index.vue

@@ -1,34 +1,43 @@
<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 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">
          <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 class="pam-paragraph">
        <div class="pam-consultant-login__title ">
           <div>密碼</div>
           <div class="text--primary fs-16 cursor--pointer" @click="forgetPassword">忘記密碼？</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 class="pam-paragraph">
        <div class="pam-consultant-login__title">
           <div>驗證碼</div>
           <div class="text--dark-blue fs-16 cursor--pointer" @click="regenerateCode">重新產生</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">
@@ -38,18 +47,23 @@
          </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 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'
    layout: 'default'
})
export default class ConsultantLogin extends Vue {
  isRemember=false;
@@ -80,25 +94,32 @@
    console.log('call api regenerate verificationCode')
  }
}

</script>
<style lang="scss" scoped>
<style lang="scss"
  scoped>
  .mt-20{
    margin-top: 20px;
  }

  .mt-25{
    margin-top: 25px;
  }

  .w-55{
    width: 55% !important;
  }

  .position-r{
    position: relative;
  }

  .pam-consultant-login{
    margin: auto;
    width: 336px;
    margin: 40px auto 30px auto;
    font-size: 20px;
    color: $PRIMARY_BLACK;

    &__header{
      text-align: center;
      font-size: 24px;
@@ -106,12 +127,13 @@
      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;
@@ -133,18 +155,22 @@
        right: 15px;
      }
    }

    &__verifyBlock{
      display: flex;
      justify-content: space-between;
    }

    &__verifyImg{
      width:126px;
      border:1px black solid;
    }

    &__confirmBlock{
      display: flex;
      justify-content: center;
    }

    &__confirm{
      color: $PRIMARY_WHITE;
      width: 80px;