SteelfurnitureWeb/src/views/account/findPassword.vue

<template>
  <div class="bg-F5">
    <div class="topDiv">
      <div class="container">
        <span class="title">中国钢制家具产业聚集网</span>
        <span class="line"></span>
        <span class="info">忘记密码</span>
      </div>
    </div>
    <div class="bgImg">
      <div class="container pt3rem pb3rem">
        <el-row :gutter="20">
          <el-col :span="8" :offset="16">
            <div class="loginDiv">
              <div class="name"><span class="line"></span>重设密码</div>
              <div class="inputDiv">
                <img src="@assets/user.png" alt="" />
                <el-input
                  class="fr"
                  placeholder="登录账号"
                  v-model="form.username"
                >
                </el-input>
              </div>
              <div class="inputDiv">
                <img src="@assets/phone.png" alt="" />
                <el-input
                  class="fr"
                  placeholder="手机号码"
                  v-model="form.phone"
                >
                </el-input>
              </div>
              <div class="yzmDiv">
                <div class="inputDiv per70">
                  <img src="@assets/yz.png" alt="" />
                  <el-input
                    class="fr"
                    placeholder="验证码"
                    style="width:89%;"
                    v-model="form.yzm"
                  >
                  </el-input>
                </div>
                <div class="yzm">获取验证码</div>
              </div>
              <div class="inputDiv">
                <img src="@assets/lock.png" alt="" />
                <el-input
                  class="fr"
                  type="password"
                  placeholder="新密码"
                  v-model="form.password"
                >
                </el-input>
              </div>
              <div>
                <el-button class="loginBtn">提交</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { Component, Vue, Watch } from "vue-property-decorator";
export default {
  name: "app",
  components: {},
  data() {
    return {
      form: {
        username: "",
        password: "",
        yzm: "",
        zddl: false,
        phone: ""
      }
    };
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.topDiv {
  height: 9rem;
  line-height: 9rem;
  background: #fff;
  .title {
    font-size: 2.2rem;
    font-weight: bold;
    color: #fd5522;
  }
  .line {
    display: inline-block;
    height: 3rem;
    width: 0.1rem;
    background: #e5e5e5;
    margin: 0 2rem;
    vertical-align: middle;
  }
  .info {
    font-size: 1.8rem;
    font-weight: bold;
    color: #666;
  }
}
.loginDiv {
  background: #fff;
  padding: 1.6rem;
  box-sizing: border-box;
  border-radius: 0.4rem;
  box-shadow: 2px 2px 12px #ddd;
  .name {
    height: 3rem;
    line-height: 3rem;
    font-size: 1.6rem;
    color: #333;
    position: relative;
    .line {
      display: inline-block;
      height: 1.8rem;
      width: 0.4rem;
      background: #fd5522;
      position: absolute;
      left: -1.6rem;
      top: 0.6rem;
    }
  }
  .inputDiv {
    height: 4rem;
    line-height: 4rem;
    border: 0.1rem solid #acacac;
    border-radius: 0.4rem;
    margin-top: 2rem;
    img {
      height: 1.6rem;
      vertical-align: middle;
      margin-left: 0.6rem;
    }
  }
  .yzmDiv {
    overflow: hidden;
    .yzm {
      height: 4rem;
      line-height: 4rem;
      width: 28%;
      font-size: 1.4rem;
      color: #fd5522;
      text-align: center;
      float: right;
      background: #ffded5;
      border-radius: 0.4rem;
      margin-top: 2rem;
    }
  }
  div {
    .loginBtn {
      width: 100%;
      background: #fd5522;
      color: #fff;
      border-color: #fd5522;
      margin-top: 2rem;
    }
  }
  .newDiv {
    height: 4rem;
    line-height: 4rem;
    text-align: right;
    font-size: 1.4rem;
    .line {
      height: 1rem;
      width: 0.1rem;
      background: #e5e5e5;
      margin: 0 1rem;
      vertical-align: middle;
      display: inline-block;
    }
    .forgetPass {
      color: #666;
    }
    .register {
      color: #fd5522;
    }
  }
}
.bgImg {
  background: url("~@assets/loginbg.png") no-repeat;
  background-size: 100% 100%;
}
.bg-F5 {
  background: #f5f5f5;
}
.pt3rem {
  padding-top: 3rem;
}
.pb3rem {
  padding-bottom: 3rem;
}
.fr {
  float: right;
}
.per70 {
  width: 70%;
  float: left;
}
</style>
<style lang="scss">
.inputDiv .el-input {
  width: 92%;
  float: right;
  .el-input__inner {
    border: 0;
    padding-left: 0.6rem;
  }
}
</style>