<template>
  <div class="sign-background">
    <div class="sign-subject">
      <div class="sign-locn">
        <img src="@/assets/image/pages/Login/Icon.png"/>
      </div>
      <div class="sign-message">
        <span>用户登录</span>
        <div class="sign-message-user">
          <div class="sign-message-user-locn">
            <img src="@/assets/image/pages/Login/user.png" style="width: 25px;height: 25px">
          </div>
          <el-input placeholder="请输入账号" clearable v-model="account"></el-input>
        </div>
        <div class="sign-message-password">
          <div class="sign-message-password-locn">
            <img src="@/assets/image/pages/Login/password.png" style="width: 20px;height: 25px">
          </div>
          <el-input type="password" placeholder="请输入密码" v-model="password" show-password></el-input>
        </div>
        <div class="login">
          <div class="login-0">
            <el-button class="sign-button" type="primary" round @click="login">
              登录
            </el-button>
          </div>
          <div class="login-1" @click="register">
            <el-button class="register" round>
              注册
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ref} from "vue";
import router from "@/router";
export default {
  name: "myLogin",
  setup(){
    const account = ref('')
    const password = ref('')
    const login = () =>{

    }
    const register = () =>{
      router.push('/register')
    }
    return{
      login,
      register,
      account,
      password,
    }
  }
}
</script>

<style scoped>
.sign-background{
  background-color: #3391d8;
  width: 100%;
  height: 922px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sign-subject{
  width: 50%;
  height: 40%;
  background-color: white;
  display: flex;
}

.sign-locn{
  width: 50%;
  height: 100%;
  background-color: #3ba7e6;
  position: relative;
}

.sign-locn img{
  width: 250px;
  height: 60%;
  position: absolute;
  top: 20%;
  left: 120px;
}

.sign-message{
  width: 50%;
  height: 100%;
  position: relative;
}

.sign-message span{
  position: absolute;
  left: 185px;
  top: 20px;
  font-size: 25px;
  font-weight: 550;
}

/*用户名*/
.sign-message-user{
  position: absolute;
  left: 80px;
  top: 80px;
  display: flex;
  width: 70%;
  height: 12%;
}

.sign-message-user input{
  width: 85%;
  height: 95%;
  background-color: #e7e4e4;
  border: 0;
  outline: none;
}

.sign-message-user-locn{
  width: 17%;
  height: 100%;
  background-color: #3ba7e6;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*密码*/
.sign-message-password{
  position: absolute;
  left: 80px;
  top: 160px;
  display: flex;
  width: 70%;
  height: 12%;
}

.sign-message-password input{
  width: 85%;
  height: 95%;
  background-color: #e7e4e4;
  border: 0;
  outline: none;
}

.sign-message-password-locn{
  width: 17%;
  height: 100%;
  background-color: #3ba7e6;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*登录*/
.login{
  width: 70%;
  height: 10%;
  position: absolute;
  left: 80px;
  top:250px;
  display: flex;
}
.login-0{
  width: 35%;
  height: 100%;
}
.login-1{
  width: 35%;
  height: 100%;
  margin-left: 30%;
}
.sign-button{
  width: 100%;
  height: 100%;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  text-decoration: none;
  border: 0;
}

.register{
  width: 100%;
  height: 100%;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  text-decoration: none;
}
</style>