写一个炫酷的登录框架，青春校园运动风格，且要符合vite框架 在<script steup>

<>
<div class="login-container">
<div class="login-header">
<img src="./logo.png" alt="logo" class="logo">
<h1 class="title">青春校园运动</h1>
</div>
<form class="login-form">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" v-model="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" v-model="password" placeholder="请输入密码">
</div>
<button class="login-btn" @click.prevent="login">登录</button>
</form>
</div>
</template>

<script setup>
import { ref } from 'vue'

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

const login = () => {
// TODO: 登录逻辑
}
</script>

<style scoped>
.login-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f2f2f2;
}

.login-header {
display: flex;
align-items: center;
margin-bottom: 40px;
}

.logo {
width: 80px;
height: 80px;
margin-right: 10px;
}

.title {
font-size: 36px;
font-weight: bold;
color: #333;
}

.login-form {
display: flex;
flex-direction: column;
width: 400px;
padding: 20px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}

label {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}

input {
height: 40px;
padding: 0 10px;
font-size: 16px;
color: #333;
border: none;
border-radius: 5px;
background-color: #f2f2f2;
}

.login-btn {
height: 40px;
margin-top: 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #5cb85c;
border: none;
border-radius: 5px;
cursor: pointer;
}

.login-btn:hover {
background-color: #449d44;
}
</style>