最简单的登录界面

请使用 HTML 和 CSS 实现一个简单的登录页面，页面包含用户名和密码输入框，以及一个登录按钮。要求登录按钮有鼠标悬停效果，且输入框在聚焦时要有特定的样式。同时，实现当点击登录按钮时，检查用户名和密码是否为空，如果为空则给出提示，否则在控制台输出“登录成功”。

<template>
  <div class="login-container">
    <div class="input-group">
      <input type="text" v-model="username" />
      <label>用户名</label>
    </div>
    <div class="input-group">
      <input type="password" v-model="password" />
      <label>密码</label>
    </div>
    <button @click="login">登录</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const username = ref('');
const password = ref('');

const login = () => {
  if (!username.value ||!password.value) {
    alert('用户名或密码不能为空');
    return;
  }
  console.log('登录成功');
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}

.input-group input:focus {
  border-color: #007bff;
}

.input-group label {
  position: absolute;
  top: -8px;
  left: 10px;
  background-color: white;
  padding: 0 5px;
  font-size: 12px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0069d9;
}
</style>