128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
<!--
|
|
<template>
|
|
<div class="login-container">
|
|
<div class="login-box">
|
|
<h2>登录</h2>
|
|
<!– 用户名输入框 –>
|
|
<div class="input-group">
|
|
<label for="username">用户名</label>
|
|
<input type="text" id="username" placeholder="请输入用户名" required />
|
|
</div>
|
|
|
|
<!– 密码输入框 –>
|
|
<div class="input-group">
|
|
<label for="password">密码</label>
|
|
<input type="password" id="password" placeholder="请输入密码" required />
|
|
</div>
|
|
|
|
<!– 提交按钮 –>
|
|
<button type="submit" class="login-btn">登录</button>
|
|
|
|
<!– 忘记密码和注册链接 –>
|
|
<div class="footer">
|
|
<a href="#">忘记密码?</a>
|
|
<a href="#">没有账户? 注册</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 容器居中并覆盖整个屏幕 */
|
|
.login-container {
|
|
display: flex; /* 使用flex布局 */
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
height: 100vh; /* 满屏高度 */
|
|
background-color: #f5f5f5; /* 背景颜色 */
|
|
}
|
|
|
|
/* 登录框的样式 */
|
|
.login-box {
|
|
background: #fff; /* 背景白色 */
|
|
padding: 30px; /* 内边距 */
|
|
border-radius: 8px; /* 圆角边框 */
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
|
|
width: 300px; /* 固定宽度 */
|
|
text-align: center; /* 内容居中 */
|
|
}
|
|
|
|
/* 标题样式 */
|
|
.login-box h2 {
|
|
margin-bottom: 20px; /* 下边距 */
|
|
font-family: 'Arial', sans-serif; /* 字体 */
|
|
color: #333; /* 字体颜色 */
|
|
}
|
|
|
|
/* 输入框的通用样式 */
|
|
.input-group {
|
|
margin-bottom: 20px; /* 每个输入框下方的间距 */
|
|
text-align: left; /* 标签左对齐 */
|
|
}
|
|
|
|
.input-group label {
|
|
font-size: 14px; /* 标签字体大小 */
|
|
color: #555; /* 标签字体颜色 */
|
|
display: block; /* 标签显示为块级元素 */
|
|
margin-bottom: 5px; /* 标签与输入框之间的间距 */
|
|
}
|
|
|
|
.input-group input {
|
|
width: 100%; /* 输入框宽度100% */
|
|
padding: 10px; /* 内边距 */
|
|
border: 1px solid #ccc; /* 边框 */
|
|
border-radius: 4px; /* 圆角边框 */
|
|
box-sizing: border-box; /* 包含内边距和边框在内的宽度计算 */
|
|
font-size: 16px; /* 输入框字体大小 */
|
|
outline: none; /* 去除点击时的边框 */
|
|
}
|
|
|
|
.input-group input:focus {
|
|
border-color: #66afe9; /* 聚焦时边框颜色 */
|
|
box-shadow: 0 0 5px rgba(102, 175, 233, 0.6); /* 聚焦时阴影效果 */
|
|
}
|
|
|
|
/* 登录按钮样式 */
|
|
.login-btn {
|
|
background-color: #4CAF50; /* 按钮背景色 */
|
|
color: white; /* 按钮文字颜色 */
|
|
padding: 10px 20px; /* 按钮内边距 */
|
|
border: none; /* 去掉默认边框 */
|
|
border-radius: 4px; /* 圆角 */
|
|
width: 100%; /* 按钮宽度100% */
|
|
cursor: pointer; /* 鼠标悬停时显示为指针 */
|
|
font-size: 16px; /* 按钮文字大小 */
|
|
margin-top: 10px; /* 按钮顶部间距 */
|
|
}
|
|
|
|
.login-btn:hover {
|
|
background-color: #45a049; /* 按钮悬停时背景色 */
|
|
}
|
|
|
|
/* 底部的链接样式 */
|
|
.footer {
|
|
margin-top: 15px; /* 上边距 */
|
|
}
|
|
|
|
.footer a {
|
|
color: #007bff; /* 链接颜色 */
|
|
text-decoration: none; /* 去掉下划线 */
|
|
font-size: 14px; /* 链接文字大小 */
|
|
margin: 0 10px; /* 链接间距 */
|
|
}
|
|
|
|
.footer a:hover {
|
|
text-decoration: underline; /* 悬停时显示下划线 */
|
|
}
|
|
</style>
|
|
-->
|
|
|
|
|
|
<template>
|
|
|
|
<Father></Father>
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import Father from "@/views/Father.vue";
|
|
</script> |