xt_pad/src/pages/personal/ChangePassword.vue

<template>
  <div class="container">
    <div class="changePassword">
      <h1 class="title">
        <div class="GoBack" @click="$router.go(-1)">
          <span class="iconfont">&#xe720;</span>返回
        </div>
        <span class="name">修改密码</span>
        <div class="GoBack"></div>
      </h1>
      <van-field v-model="username" clearable label="旧密码" placeholder="请输入旧密码" />
      <van-field v-model="sms" center clearable label="验证码" placeholder="请输入短信验证码">
        <van-button slot="button" size="small" type="primary">发送验证码</van-button>
      </van-field>
      <van-field v-model="password" type="password" label="新密码" placeholder="请输入新密码" />
      <div class="finish">完成</div>
    </div>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss" >
.container {
  background: #f5f5f5;
  @include box-sizing;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .changePassword {
    width: 100%;
    font-size: 0.45rem;
    .title {
      margin-bottom: 1rem;

      font-size: 0.45rem;
      padding: 0.3rem 0.37rem;
      color: $title-color;
      @include align-items-center;
      @include display-flex;
      @include justify-content-between;
      @include text-align;
      background: #fff;
      .GoBack {
        color: $main-color;
        font-size: 0.45rem;
        @include display-flex;
        .iconfont {
          color: $main-color;
          font-size: 0.5rem;
          margin-top: 1px;
          @media only screen and (min-width: 768px) {
            margin-top: 3px;
          }
        }
      }
      .name {
        margin-right: 1.3rem;
      }
    }
    .van-cell {
      width: 90%;
      margin: 0 auto;
      height: 1.4rem;
      padding: 0 15px;
    }
    .van-field__label {
      height: 1.4rem;
      line-height: 1.4rem;
      font-size: 0.45rem;
    }
    .van-field__body {
      height: 100%;
      font-size: 0.45rem;
    }
    .van-field__label {
      max-width: 2.5rem;
    }
    .van-button--primary {
      background-color: #258ffc;
      border: 1px solid #258ffc;
    }
  }
  .finish {
    width: 90%;
    margin: 0 auto;
    border-radius: 5px;
    height: 1.4rem;
    background: rgba(37, 143, 252, 1);
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    line-height: 1.4rem;
    margin-top: 1rem;
  }
}
</style>