<template>
  <div class="register">
    <div class="title">用户注册</div>
    <el-form>
      <div class="information" style="margin: 20px auto">
          <span>用户名：</span>
          <el-input placeholder="请输入用户名" class="inputs"
                    style="margin-left: 15px" clearable v-model="userName"></el-input>
      </div>
      <div class="information">
        <span>账号：</span>
        <el-input placeholder="请输入账号" class="inputs"
                  style="margin-left: 30px" clearable v-model="account"></el-input>
      </div>
      <div class="information">
        <span>密码：</span>
        <el-input placeholder="请输入密码" class="inputs"
                  style="margin-left: 30px" show-password v-model="password"></el-input>
      </div>
      <div class="information">
        <span>确认密码：</span>
        <el-input placeholder="请输入密码" class="inputs"
                  show-password v-model="Cpassword"></el-input>
      </div>
      <div class="information" style="justify-content: center;margin-top: 40px">
        <el-button type="primary" class="buttons" @click="register">注册</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {ref} from "vue";
export default {
  name: "myRegister",
  setup(){
    const userName = ref('')
    const account = ref('')
    const password = ref('')
    const Cpassword = ref('')
    const register = () =>{

    }
    return{
      userName,
      account,
      password,
      Cpassword,
      register
    }
  }
}
</script>

<style scoped>
.register{
  width: 400px;
  height: 450px;
  background-color: white;
  margin: 150px auto;
  box-shadow: 5px 5px 8px #000000;
}

.title{
  width: 100%;
  height: 50px;
  font-size: 25px;
  font-weight: 550;
  display: flex;
  justify-content: center;
  align-items: center;
}

.information{
  width: 85%;
  height: 40px;
  margin: 30px auto;
  display: flex;
  align-items: center;
}
.information span{
  font-size: 15px;
}

.inputs{
  height: 40px;
  width: 265px;
}
.buttons{
  width: 100%;
  height: 100%;
  font-size: 20px;
}

</style>