graphite_vue/src/views/login/index.vue

<template>
    <div class="login-container">
      <!-- 背景图 -->
      <div class="background-image"></div>
      <!-- 登录表单 -->
      <div class="login-form">
        <h2>登录</h2>
        <!-- 用户名输入框 -->
        <div class="login-user-input">
            <input
                type="text"
                v-model="username"
                placeholder="用户名"
                class="input-field"
            />
        </div>
        <!-- 密码输入框 -->
        <div style="margin-top: 5%;">
            <input
                type="password"
                v-model="password"
                placeholder="密码"
                class="input-field"
            />
        </div>
        <!-- 登录按钮 -->
        <button @click="handleLogin" class="login-button">登录</button>
      </div>
    </div>
  </template>
  
<script setup>
    import { ref } from 'vue';
    import { useRouter } from 'vue-router'
  const router = useRouter()
  // 定义用户名和密码的响应式变量
  const username = ref('');
  const password = ref('');
  
  // 处理登录的函数
  const handleLogin = () => {
    console.log('用户名:', username.value);
    console.log('密码:', password.value);
    router.push('/home')
    // 这里可以添加实际的登录逻辑，比如发送请求到后端进行验证
  };
</script>
  
<style scoped>
    @import './login.css'
</style>