<template>
  <div class="home">
    <div class="container">
      <div class="logo">
        <img src="../assets/nxwjlogo.webp" />
        <h2>武警宁夏总队医院</h2>
      </div>
      <div class="list">
        <ul>
          <li>
            <input type="text" placeholder="请输入手机号"/>
          </li>
          <li>
            <input type="text" placeholder="请输入验证码"/>
            <b>获取验证码</b>
          </li>
           <li>
            <input type="password" placeholder="请输入密码"/>
          </li>
          <li>
            <input type="password" placeholder="再次输入密码"/>
          </li>
        </ul>
      </div>

      <van-form @submit="onSubmit" class="formData">
        <van-field
          v-model="formData.user"
          name="user"
          placeholder="请输入账号"
          autocomplete="off"
          :rules="[{ required: true, message: '请输入账号' },{pattern:userPatten,message: '账户由字母、数字、中文组成'}]"
        />
        <van-field
          v-model="formData.password"
          type="password"
          name="password"
          placeholder="旧密码"
          autocomplete="off"
          :rules="[{ required: true, message: '请设置密码' },{pattern:passwordPatten,message: '密码由字母、数字组成，区分大小写，长度为6-20位'}]"
        />
        <van-field
          v-model="formData.password"
          type="password"
          name="password"
          placeholder="密码"
          autocomplete="off"
          :rules="[{ required: true, message: '请设置密码' },{pattern:passwordPatten,message: '密码由字母、数字组成，区分大小写，长度为6-20位'}]"
        />
        <div class="btn">
          <van-button round block type="primary" native-type="submit" color="#46C3B0">确定</van-button>
          <h3>
            <router-link to="Login">账号密码登陆</router-link>
          </h3>
        </div>

      </van-form>

      <div class="btn">
        <van-button round type="primary" block to="Login" color="#46C3B0">确定</van-button>
        <h3>
          <router-link to="Login">账号密码登陆</router-link>
        </h3>
      </div>
    </div>

  </div>
</template>


<script>
// @ is an alias to /src

export default {
  components: {
  },
  mounted() {
    console.log(this.$route.meta.title);
    this.title = this.$route.meta.title;
  },
  data() {
    return {
      title: "",
      formData: {
        user: "",
        password: "",
        password2: ""
      },
      userPatten: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
      phonePatten: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      passwordPatten: /^(?![a-zA-z]+$)(?!\d+$)(?![!@.#$%^&*]+$)[a-zA-Z\d!@.#$%^&*]{6,20}$/,
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
  },
};
</script>


<style scoped lang="scss">
.logo {
  padding-top: 70px;
  text-align: center;
  color: #333;
  padding-bottom: 50px;
  img {
    width: 170px;
    height: 170px;
  }
  h2{
    font-size: 36px;
    padding-top: 10px;
  }
}
.list{
  padding: 0px 20px;
ul li{
  margin-bottom: 30px;
  position: relative;
  input{
    width: 100%;
    border: 0px;
    background: #E6E6E6;
    line-height: 80px;
    font-size: 28px;
    border-radius: 50px;
    box-sizing: border-box;
    padding: 0px 30px;
  }
  b{
    font-size: 28px;
    color: #46C3B0;
    position: absolute;
    right: 25px;
    top: 20px;
  }
}
}

.btn{
  padding: 0px 20px;
  padding-top: 60px;
h3{
  display: flex;
  justify-content: center;
  padding: 20px 100px;
  font-size: 28px;
}
}
::v-deep .van-button__text{ font-size: 32px;}
</style>
