<template>
  <div class="bg-F5">
    <div class="container">
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>修改密码</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="editPanel">
        <div class="partTitle"><span class="orangeLine"></span>修改密码</div>
        <div class="editDiv">
          <div class="editD">
            <div class="editItem">
              <img src="@assets/user.png" alt="" />
              <span>用户名：</span>
              <el-input
                v-model="username"
                placeholder="请输入用户名/登录账号"
              ></el-input>
            </div>
            <div class="editItem">
              <img src="@assets/lock.png" alt="" />
              <span>旧密码：</span>
              <el-input
                v-model="oldPassword"
                type="password"
                placeholder="请输入旧密码"
              ></el-input>
            </div>
            <div class="editItem">
              <img src="@assets/lock.png" alt="" />
              <span>新密码：</span>
              <el-input
                v-model="newPassword"
                placeholder="请输入新密码"
              ></el-input>
            </div>
            <div class="editItem">
              <img src="@assets/lock.png" alt="" />
              <span>确认密码：</span>
              <el-input
                v-model="surePassword"
                placeholder="请再次输入新密码"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="btnDiv">
          <el-button class="submitBtn" type="text" size="small">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Component, Vue, Watch } from "vue-property-decorator";
export default {
  name: "app",
  components: {},
  data() {
    return {
      username: "",
      oldPassword: "",
      newPassword: "",
      surePassword: ""
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.requestData();
    }
  }
};
</script>
<style lang="scss" scoped>
.breadcrumb {
  height: 4rem;
  line-height: 4rem;
}
.partTitle {
  padding-top: 2rem;
  font-size: 1.6rem;
  color: #fd5522;
  .orangeLine {
    display: inline-block;
    height: 1.8rem;
    width: 0.3rem;
    background: #fd5522;
    vertical-align: middle;
    border-radius: 0.15rem;
    margin-right: 1rem;
  }
}
.editPanel {
  background: #fff;
  border-radius: 0.4rem;
  .editDiv {
    padding: 2rem;
    box-sizing: border-box;
    .editD {
      width: 100%;
      background: #fff5f2;
      padding: 2rem;
      box-sizing: border-box;
      .editItem {
        height: 6rem;
        line-height: 6rem;
        border-bottom: 0.1rem solid #e5e5e5;
        padding: 0 0.6rem;
        box-sizing: border-box;
        img {
          height: 1.4rem;
          vertical-align: middle;
          margin-right: 1rem;
        }
        span {
          font-size: 1.4rem;
          color: #333;
        }
      }
    }
  }
  .btnDiv {
    text-align: center;
    padding-bottom: 2rem;
    .submitBtn {
      height: 3.6rem;
      line-height: 3.6rem;
      font-size: 1.4rem;
      background: #fd5522;
      color: #fff;
      border: 0.1rem solid #fd5522;
      padding: 0 2rem;
    }
  }
}
</style>
<style lang="scss">
.editItem .el-input {
  width: 60% !important;
  .el-input__inner {
    border: 0;
    background: #fff5f2;
  }
}
</style>
