<%@ page language="java" contentType="text/html; charset=UTF-
8" pageEncoding="UTF-
8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-
8">
<meta name="viewport" content="width=device-width, initial-scale=1
.0">
<title>用户登录 - 简约版</title>
<style>
:root {
--primary-color
: #4F46E5;
--secondary-color
: #10B9
81;
--neutral-color
: #F3F4F6;
--text-color
: #1F2937;
--error-color
: #EF4444;
}
* {
margin: 0;
padding
: 0;
box-sizing
: border-box;
font-family
: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
body {
background-color
: #f
8fafc;
min-height
: 100vh;
display: flex;
justify-content
: center;
align-items
: center;
padding
: 20
px;
}
.carousel {
width
: 3
80
px;
height
: 200
px;
overflow
: hidden;
position
: relative;
margin-bottom
: 20
px;
}
.carousel-inner {
display: flex;
width
: 300%;
transition
: transform 0
.5s ease;
}
.carousel-inner img {
width
: 33
.33%;
height
: 200
px;
object-fit
: cover;
}
.carousel-btn {
position
: absolute;
top
: 50%;
transform
: translateY(-50%);
background-color
: rgba(0,0,0,0
.5);
color
: white;
border
: none;
padding
: 10
px 15
px;
font-size
: 20
px;
cursor
: pointer;
}
.prev-btn {
left
: 10
px;
}
.next-btn {
right
: 10
px;
}
.carousel-dots {
position
: absolute;
bottom
: 10
px;
left
: 50%;
transform
: translateX(-50%);
display: flex;
}
.dot {
width
: 10
px;
height
: 10
px;
border-radius
: 50%;
background-color
: rgba(255,255,255,0
.5);
margin: 0 5
px;
cursor
: pointer;
}
.dot
.active {
background-color
: white;
}
.card {
background-color
: white;
border-radius
: 12
px;
box-shadow
: 0 5
px 15
px rgba(0, 0, 0, 0
.05);
width
: 3
80
px;
padding
: 30
px 2
8px;
}
.logo {
display: flex;
justify-content
: center;
margin-bottom
: 16
px;
}
.logo-icon {
width
: 4
8px;
height
: 4
8px;
background-color
: var(--primary-color);
border-radius
: 10
px;
display: flex;
align-items
: center;
justify-content
: center;
color
: white;
font-size
: 20
px;
font-weight
: bold;
}
.title {
text-align
: center;
font-size
: 20
px;
font-weight
: 600;
color
: var(--text-color);
margin-bottom
: 24
px;
}
.form-group {
margin-bottom
: 16
px;
}
.form-label {
display: block;
font-size
: 13
px;
color
: #4B5563;
margin-bottom
: 6
px;
}
.form-input {
width
: 100%;
padding
: 10
px 14
px;
border
: 1
px solid #E5E7EB;
border-radius
: 8px;
background-color
: #F9FAFB;
font-size
: 14
px;
color
: var(--text-color);
transition
: border 0
.2s ease;
}
.form-input
:focus {
outline
: none;
border-color
: var(--primary-color);
box-shadow
: 0 0 0 2
px rgba(79, 70, 229, 0
.1);
}
.error-message {
color
: var(--error-color);
font-size
: 13
px;
margin-top
: 6
px;
display: none;
}
.submit-btn {
width
: 100%;
padding
: 12
px;
background-color
: var(--primary-color);
color
: white;
font-size
: 15
px;
font-weight
: 500;
border
: none;
border-radius
: 8px;
cursor
: pointer;
transition
: background-color 0
.2s ease;
margin-top
: 8px;
}
.submit-btn
:hover {
background-color
: #433
8CA;
}
.register-link {
text-align
: center;
margin-top
: 22
px;
font-size
: 13
px;
color
: #6B72
80;
}
.register-link a {
color
: var(--primary-color);
text-decoration
: none;
font-weight
: 500;
}
.register-link a
:hover {
text-decoration
: underline;
}
</style>
</head>
<
body>
<div class="carousel">
<div class="carousel-inner">
<img src="image/123
.jpg" alt="轮播图1">
<img src="image/321
.jpg" alt="轮播图2">
<img src="image/456
.jpg" alt="轮播图3">
</div>
<button class="carousel-btn prev-btn"><</button>
<button class="carousel-btn next-btn">></button>
<div class="carousel-dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="card">
<div class="logo">
<div class="logo-icon">登</div>
</div>
<h2 class="title">用户登录</h2>
<form action="login" method="post">
<div class="form-group">
<label class="form-label" for="username">用户名</label>
<input type="text"
class="form-input"
id="username"
name="username"
placeholder="请输入用户名"
required>
</div>
<div class="form-group">
<label class="form-label" for="password">密码</label>
<input type="password"
class="form-input"
id="password"
name="password"
placeholder="请输入密码"
required>
</div>
<div class="error-message">
${error}
</div>
<button type="submit" class="submit-btn">
登录
</button>
</form>
<div class="register-link">
还没有账号？<a href="register
.jsp">立即注册</a>
</div>
</div>
<script>
document
.addEventListener('DOMContentLoaded', function() {
const carouselInner = document
.querySelector('
.carousel-inner');
const prevBtn = document
.querySelector('
.prev-btn');
const nextBtn = document
.querySelector('
.next-btn');
const dots = document
.querySelectorAll('
.dot');
let currentIndex = 0;
const totalImages = dots
.length;
function slideTo(index) {
index = (index + totalImages) % totalImages;
carouselInner
.style
.transform = `translateX(-${index * (100 / totalImages)}%)`;
dots
.forEach((dot, i) => {
dot
.classList
.toggle('active', i === index);
});
currentIndex = index;
}
// 自动播放
setInterval(() => slideTo(currentIndex + 1), 3000);
// 上一张按钮
prevBtn
.addEventListener('click', () => slideTo(currentIndex - 1));
// 下一张按钮
nextBtn
.addEventListener('click', () => slideTo(currentIndex + 1));
// 指示点点击
dots
.forEach((dot, index) => {
dot
.addEventListener('click', () => slideTo(index));
});
});
</script>
</
body>
</html>
扫一扫
7286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
