frontend/src/view/Home.vue

<template>
  <el-card class="login-container" shadow="hover">
    <el-row>
      <el-col :span="6">
        <el-text class="mx-1" type="primary">名称</el-text>
      </el-col>
      <el-col :span="18">
        <el-input v-model="account" placeholder="请输入账号" />
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="6">
        <el-text class="mx-1" type="primary">密码</el-text>
      </el-col>
      <el-col :span="18">
        <el-input v-model="password" placeholder="请输入密码" />
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :offset="6" :span="9">
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </el-col>
      <el-col :span="9">
        <el-button type="primary" @click="handleRegister">注册</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import authenticationService from "../services/authenticationService.js";
import {useRouter} from "vue-router";
import {ref} from "vue";

const account = ref('');
const password = ref('');
const router = useRouter();

const handleLogin = () => {
  authenticationService.login(account.value, password.value).then(res => {
  });
}

const handleRegister = () => {
  router.push('/register');
};
</script>

<style scoped>
.login-container {
  background-color: #333; /* 深色背景 */
  color: white; /* 确保文本颜色与深色背景有对比 */
  padding: 20px;
  border-radius: 10px;
}

.el-text {
  color: white; /* 确保文本颜色与深色背景有对比 */
}

.el-input {
  width: 100%;
}
</style>