<script setup>
import '../style/login.css'
import {reactive} from "vue";

const format = reactive({})

const checkcode_url = 'http://127.0.0.1:8080/api/captcha';
</script>


<template>
  <div class="login-body">
    <div class="login-panel">
      <div class="login-title">登录</div>
      <el-form :model="format">
        <el-form-item>
          <el-input v-model="format.username" autocomplete="on" placeholder="请输入用户名" type="text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="format.password" autocomplete="on" placeholder="请输入登录密码" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="check-code">
            <el-input v-model="format.checkcode" placeholder="请输入图形验证码" class="check-code-input">
              <img :src="checkcode_url" alt="图形验证码" class="check-code-img">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="format.rememberme" :label="true" placeholder="记住登录密码">记住登录密码</el-checkbox>
        </el-form-item>
        <el-button :style="{width: '100%'}" type="primary">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.login-body {
  width: 100%;
  height: calc(100vh);
  background-size: cover;
  background-position: center;
  background-image: url("../assets/login_background.png");
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-panel {
  width: 350px;
  background: rgba(255, 255, 255, 0.70);
  padding: 20px;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgb(17, 108, 213);
}

.login-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

.check-code {
  display: flex;
  .check-code-input {
    flex: 1;
    margin-right: 6px;
  }
}

</style>