[ Fix ] : 修正個人帳號設定 input 及 icon 跑版問題

劉鈞霖

2021-12-16 89bd5343b2ef07b92bbb034ee1611081c5497c7e

[ Fix ] : 修正個人帳號設定 input 及 icon 跑版問題

 PAMapp/pages/accountSetting/index.vue

@@ -1,90 +1,71 @@
<template>
<div class="account-page">
    <div class="account-page-title">個人帳號設定</div>
    <section class="account-card" :class="{'edit': !userNameDisabled }"> 
        <div class="header">
            <div class="block">
                <div class="setting-title">姓名</div>
                <div class="contact-type">
                    <input
                        :disabled="userNameDisabled"
                        v-model="userNameValue" 
                        ref="userName"
                        class="input name-input"
                        >
                    <div class="error-txt">
                        <span v-show="!nameValid" class="error">此欄位必填</span>
                    </div>
                </div>
                
            </div>
            <i class="icon-edit icon" @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled}"></i>
  <div>
    <div class="pam-paragraph text--middle">個人帳號設定</div>
    <div class="pam-paragraph account-info " >
      <div class="account-info__title text--middle">姓名</div>
      <div class="account-info__input" :class="{'edit': !userNameDisabled }">
        <input
          :disabled="userNameDisabled"
          v-model="userNameValue"
          ref="userName"
          class="account-info__input-text">
        <div class="account-info__input-error">
            <span v-show="!nameValid" class="error">此欄位必填</span>
        </div>
        
    </section>

    <section class="account-card" :class="{'edit': !userPhoneDisabled }" v-if="phoneValue"> 
        <div class="header">
            <div class="block">   
            <div class="setting-title">綁定</div>
            <div class="contact-type">
                手機號碼
                <input
                    :disabled="userPhoneDisabled"
                    v-model="phoneValue" 
                    :class="{
                    'is-invalid': !phoneValid
                    }"
                    ref="userPhone"
                    class="contact-input input"
                    :placeholder="phoneValue || '尚未提供手機號碼'"
                >
                <div class="error-txt">
                    <span v-show="!phoneValid" class="error">手機號碼格式有誤</span>
                </div>
            </div>
            </div>
            <!-- <i class="icon-edit icon" 
                @click="editField('userPhone')"
                :class="{'icon-color-change': !userPhoneDisabled}"></i> -->
        </div>
        
    </section>

    <section class="account-card" :class="{'edit': !userEmailDisabled }" v-if="emailValue"> 
        <div class="header">
            <div class="block">
            <div class="setting-title">綁定</div>
                <div class="contact-type">Email
                    <input 
                        :disabled="userEmailDisabled"
                        v-model="emailValue"
                        :class="{
                        'is-invalid': !emailValid
                        }"
                        ref="userEmail"
                        class="contact-input input"
                        :placeholder="emailValue || '尚未提供 Email'"
                        >
                    <div class="error-txt">
                        <span v-show="!emailValid" class="error">信箱格式有誤</span>
                    </div>
                </div>
                </div>
                
                <!-- <i class="icon-edit icon" @click="editField('userEmail')" 
                        :class="{'icon-color-change': !userEmailDisabled}"></i> -->
        </div>
        
    </section>

    <div class="account-setting-btn mb-30">
        <el-button 
            :disabled="isSubmitBtnDisabled"
            @click.native="updateAccountSetting">送出</el-button>
      </div>
      <div class="account-info__icon text--middle">
        <i class="icon-edit" @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled}"></i>
      </div>
    </div>

</div>
    <div class="pam-paragraph account-info" v-if="phoneValue">
      <div class="account-info__title text--middle">綁定</div>
      <div class="account-info__input " :class="{'edit': !userPhoneDisabled }">
        <div class="text--middle mb-10">手機號碼</div>
        <input :disabled="userPhoneDisabled"
          v-model="phoneValue"
          :class="{'is-invalid': !phoneValid}"
          ref="userPhone"
          class="account-info__input-text"
          :placeholder="phoneValue ||'尚未提供手機號碼'">
        <div class="account-info__input-error">
            <span v-show="!phoneValid" class="error">手機號碼格式有誤</span>
        </div>
      </div>
      <div class="account-info__icon text--middle">
        <!-- <i class="icon-edit"
          @click="editField('userPhone')"
          :class="{'icon-color-change': !userPhoneDisabled}">
        </i> -->
      </div>
    </div>
    <div class="pam-paragraph account-info" v-if="emailValue">
      <div class="account-info__title text--middle">綁定</div>
      <div class="account-info__input" :class="{'edit': !userEmailDisabled }">
        <div class="text--middle mb-10">Email</div>
        <input :disabled="userEmailDisabled"
          v-model="emailValue"
          :class="{'is-invalid': !emailValid }"
          ref="userEmail"
          class="account-info__input-text"
          :placeholder="emailValue || '尚未提供 Email'">
        <div class="account-info__input-error">
            <span v-show="!emailValue" class="error">信箱格式有誤</span>
        </div>
      </div>
      <div class="account-info__icon text--middle">
        <!-- <i class="icon-edit"
          @click="editField('userEmail')"
          :class="{'icon-color-change': !userEmailDisabled}">
        </i> -->
      </div>
    </div>
    <div class="pam-paragraph account-confirm">
      <el-button :disabled="isSubmitBtnDisabled"
        @click.native="updateAccountSetting">
          送出
      </el-button>
    </div>
  </div>
</template>

<script lang="ts">
@@ -191,123 +172,51 @@
</script>

<style lang="scss" scoped>
.account-page{
    .block{
        display: flex;
    }
    .account-page-title{
        font-size: 20px;
        margin-bottom: 34px;
    }
    .account-card{
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid gray;
        margin-bottom: 33px;
        .contact-type{
            width: 184px;
            margin-right: 16px;
            font-size: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        &.edit {
            input {
                border: 1px solid lightgray;
                background-color: #fff;
            }
        }
    }
    .account-setting-btn{
        display: flex;
        justify-content: center;
    }
}
.error-txt{
    padding-bottom: 10px;
    .error {
        @extend .smTxt_bold;
        @extend .text--primary;
        height: 16px;
        }
}
.name-input{
            width: 184px;
            height:27px;
            margin-bottom: 20px;
            font-size: 20px;
            margin-top: -3px;
        }
.setting-title{
            margin-left: 28px;
            margin-bottom:10px;
            width: 58px;
            font-size: 20px;
        }
.header{
    display: flex;
    align-items: baseline;
}
.contact-input{
    font-size: 20px;
    margin-bottom: 10px;
    text-overflow: ellipsis;
    margin-top: 10px;
    width: 184px;
}
.input{
    border: 0;
    background-color: rgba(0,0,0,0) ;
    outline-color: gainsboro;
}
.input:focus{
    background-color: #fff;
}
.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
    }
    }
.account-info{
  display: flex;
  align-items: baseline;
  border-bottom: 1px gray solid;
  padding: 15px 15px 15px 30px;
  .account-info__title{
    width: 58px;
  }
  .account-info__input{
    flex: 1;

</style>
    &.edit {
      .account-info__input-text{
        border: 1px solid lightgray;
        background-color: #fff;
      }
    }
    .account-info__input-text{
      border: 0;
      background-color: rgba(0,0,0,0) ;
      outline-color: gainsboro;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      padding: 3px 10px;
      width: 100%;
      font-size: 20px;
      &:disabled{
        padding: 0px;
      }
    }
    .account-info__input-error{
      @extend .smTxt_bold,.text--primary;
      margin-top: 10px;
    }
  }
  .account-info__icon{
    margin-left: 20px;
    .icon-color-change{
      color:$PRIMARY_RED;
    }
  }
}
.account-confirm{
  display: flex;
  justify-content: center;
}
</style>