template el-row style=min-height100vh;min-width 100vh; el-col md=14 lg=16 div class=grid-content ep-bg-purple h1欢迎光临h1 h3此站点是IT每日一答管理平台h3

<template>
    <el-row style="min-height:100vh;min-width: 100vh;">
        <el-col :md="14" :lg="16">
            <div class="grid-content ep-bg-purple">
                <h1>Welcome</h1>
                <h3>This site is the IT Daily Quiz Management Platform</h3>
            </div>
        </el-col>
        <el-col :md="10" :lg="8" style="background-color: #f1f1f1;">
            <div class="grid-content ep-bg-light">
                <h2>Welcome back</h2>
                <el-divider>
                    Log in with your account
                </el-divider>
                <el-form :rules="rules" style="width:350px;">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" size="large" placeholder="Enter your username" :prefix-icon="User" required />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" size="large" type="password" placeholder="Enter your password"
                            :prefix-icon="Lock" show-password required />
                    </el-form-item>
                    <el-button round color="#616aef" @click="login">Log In</el-button>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>
<script setup>
import { reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import axios from 'axios'
import { nameRule, passRule } from '../../utils/validate';

const form = reactive({
    username: '',
    password: ''
})

const rules = reactive({
    username: [{ validator: nameRule, trigger: 'blur' }],
    password: [{ validator: passRule, trigger: 'blur' }]
})

const login = async () => {
    axios.post("api/logn/login", {
        username: form.username,
        password: form.password
    }).then(response => {
        console.log(response);
    }).catch(error => {
        console.log(error);
    })
}
</script