html大作业

//login.html//
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lyadmin后台管理系统</title>
<link rel="stylesheet" href="./project/css/login.css">
<style>
body {
margin: 0;
height: 100vh;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #e0e7ef 0%, #f5f7fa 100%);
}
.container {
display: flex;
width: 100%;
height: 100%;
}
.left-panel {
flex: 1;
background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
color: #fff;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.left-panel h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.left-panel .subtitle {
font-size: 1.2rem;
opacity: 0.8;
}
.left-panel .copyright {
margin-top: auto;
opacity: 0.6;
}
.right-panel {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.login-container {
width: 100%;
max-width: 400px;
background: #fff;
border-radius: 18px;
box-shadow: 0 6px 32px 0 rgba(30,40,90,0.10);
padding: 40px;
}
.logo-title {
text-align: center;
margin-bottom: 30px;
}
.logo-title img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 15px;
}
.logo-title h2 {
color: #2d3a4b;
font-size: 1.5rem;
}
.login-form h3 {
color: #2d3a4b;
font-size: 1.2rem;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.input-group {
display: flex;
gap: 10px;
}
.input-group input {
flex: 1;
}
.input-group select {
width: 100px;
padding: 8px;
border: 1.5px solid #e5e8ef;
border-radius: 8px;
background: #f8fafc;
color: #2d3a4b;
}
.form-group input {
width: 100%;
padding: 8px 14px;
border: 1.5px solid #e5e8ef;
border-radius: 8px;
font-size: 1rem;
background: #f8fafc;
color: #2d3a4b;
}
.verification {
display: flex;
gap: 10px;
}
.verification input {
flex: 1;
}
.verification img {
height: 40px;
border-radius: 8px;
cursor: pointer;
}
.login-btn {
width: 100%;
padding: 12px;
background: linear-gradient(90deg, #1a237e 0%, #3949ab 100%);
color: #fff;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.login-btn:hover {
background: linear-gradient(90deg, #fbc02d 0%, #ffd54f 100%);
color: #1a237e;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.other-login {
margin-top: 20px;
text-align: center;
}
.other-login p {
color: #7a869a;
margin-bottom: 10px;
}
.login-icons {
display: flex;
justify-content: center;
gap: 20px;
}
.wechat-icon {
width: 40px;
height: 40px;
cursor: pointer;
transition: transform 0.2s;
}
.wechat-icon:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">
<h1>django-vue-lyadmin pro版</h1>
<p class="subtitle">Vue3 + Django4.x 易于DIY+低代码开发平台</p>
<div class="copyright">
Copyright © 2022 django-vue-lyadmin All rights reserved.
</div>
</div>
<div class="right-panel">
<div class="login-container">
<div class="logo-title">
<img src="./project/img/auth_banner.jpg" alt="Logo" class="logo">
<h2>lyadmin后台管理系统</h2>
</div>
<div class="login-form">
<h3>账号登录</h3>
<form id="loginForm" onsubmit="return handleLogin(event)">
<div class="form-group">
<div class="input-group">
<input type="text" id="username" placeholder="请输入账号" required>
<select class="user-type" id="userType">
<option value="admin">管理员</option>
</select>
</div>
</div>
<div class="form-group">
<input type="password" id="password" placeholder="请输入密码" required>
</div>
<div class="form-group verification">
<input type="text" id="captcha" placeholder="验证码" required>
<img src="./project/img/captcha.png" alt="验证码" class="captcha" id="captchaImage">
</div>
<button type="submit" class="login-btn">登录</button>
</form>
<div class="other-login">
<p>其他登录方式</p>
<div class="login-icons">
<img src="./project/img/wechat.png" alt="微信登录" class="wechat-icon">
</div>
</div>
</div>
</div>
</div>
</div>

<script>
    // 模拟验证码刷新
    document.getElementById('captchaImage').addEventListener('click', function() {
        this.src = './project/img/captcha.png?' + new Date().getTime();
    });

    // 处理登录
    function handleLogin(event) {
        event.preventDefault();
        
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const captcha = document.getElementById('captcha').value;
        const userType = document.getElementById('userType').value;

        if (username && password && captcha) {
            localStorage.setItem('isLoggedIn', 'true');
            localStorage.setItem('username', username);
            localStorage.setItem('userType', userType);
            window.location.href = './个人中心.html';
        } else {
            alert('请填写完整的登录信息！');
        }

        return false;
    }
</script>

</body>
</html>
//index.css//
style
.login-bg{
display: flex;
justify-content: center;
align-items: center;
background:linear-gradient;
background:fixed;
animation: my 15s ease inifinite;
}
.login-box{
width: 40rem;
height:30rem;
background-color: aquamarine;
border-radius: 8px;
box-shadow: #000 10px 10px 10px;
}
@keyframes my{
0%{
background-position: 0% 50%;
}
50%{
background-position: 50% 100%;
}
100%{ background-position: 100% 0%;
}
}
//style.css//
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
html,
body{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lyadmin后台管理系统</title>
<link rel="stylesheet" href="./project/css/login.css">
<link rel="stylesheet" href="./project/css/index.css">
<link rel="stylesheet" href="./project/css/style.css">
<style>
body {
margin: 0;
display: flex;
height: 100vh;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #e0e7ef 0%, #f5f7fa 100%);
}
nav.left {
width: 220px;
background: linear-gradient(135deg, #b6c6e0 0%, #e0e7ef 100%);
color: #fff;
box-shadow: 2px 0 16px 0 rgba(30,40,90,0.10);
height: 100vh;
position: fixed;
left: 0;
top: 0;
}
nav .menu-list { list-style: none; margin: 0; padding: 0; }
nav .menu-item {
display: flex; align-items: center; padding: 16px 20px; cursor: pointer;
transition: background 0.2s;
}
nav .menu-item:hover, nav .menu-item.active {
background: #444;
}
nav .menu-item i { margin-right: 10px; }
main.main {
margin-left: 220px;
width: calc(100% - 220px);
min-height: 100vh;
background: #f5f7fa;
padding: 20px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
/ 商业化高级配色和风格 /
.profile-center,
.feature-center {
width: 100%;
max-width: 1400px;
margin: 0 auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
padding: 32px;
}
.profile-header {
display: flex;
align-items: center;
background: #fff;
border-radius: 8px;
padding: 32px;
margin-bottom: 24px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.profile-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
box-shadow: 0 2px 12px 0 rgba(30,40,90,0.10);
border: 3px solid #2d3a4b;
margin-right: 32px;
background: #f5f6fa;
}
.profile-account-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.profile-account {
font-size: 1.8rem;
color: #2d3a4b;
font-weight: bold;
margin-bottom: 8px;
}
.profile-name {
color: #7a869a;
font-size: 1.2rem;
}
.profile-tabs {
display: flex;
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 24px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.profile-tab {
padding: 12px 40px;
font-size: 1.2rem;
color: #7a869a;
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
border-bottom: 2.5px solid transparent;
font-weight: 500;
margin-right: 32px;
}
.profile-tab.active {
color: #1a237e;
border-bottom: 2.5px solid #fbc02d;
background: linear-gradient(90deg, #fbc02d 0%, #ffd54f 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.profile-content {
background: #fff;
border-radius: 8px;
padding: 32px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.profile-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.form-row {
background: #f8fafc;
border-radius: 8px;
padding: 20px;
}
.form-row label {
display: block;
margin-bottom: 12px;
color: #2d3a4b;
font-weight: 500;
font-size: 1.1rem;
}
.form-row input[type="text"],
.form-row input[type="email"] {
width: 100%;
padding: 12px;
border: 1px solid #e5e8ef;
border-radius: 6px;
font-size: 1.1rem;
background: #fff;
}
.gender-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.gender-option {
text-align: center;
padding: 12px;
border-radius: 6px;
background: #f5f6fa;
color: #7a869a;
cursor: pointer;
border: 1px solid #e0e7ef;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.gender-option.active {
background: linear-gradient(90deg, #fbc02d 0%, #ffd54f 100%);
color: #1a237e;
border: 1px solid #fbc02d;
font-weight: bold;
box-shadow: 0 2px 8px 0 rgba(251,192,45,0.10);
}
.save-btn {
grid-column: 1 / -1;
margin-top: 24px;
padding: 14px;
width: 100%;
background: linear-gradient(90deg, #1a237e 0%, #3949ab 100%);
color: #fff;
font-size: 1.2rem;
font-weight: bold;
border: none;
border-radius: 8px;
box-shadow: 0 2px 8px 0 rgba(30,40,90,0.10);
cursor: pointer;
transition: all 0.3s ease;
}
.save-btn:hover {
background: linear-gradient(90deg, #fbc02d 0%, #ffd54f 100%);
color: #1a237e;
box-shadow: 0 4px 16px 0 rgba(251,192,45,0.15);
}
.log-list {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.log-item {
color: #2d3a4b;
font-size: 1rem;
padding: 8px 0;
border-bottom: 1px solid #e5e8ef;
}
.log-item:last-child {
border-bottom: none;
}
.log-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.log-table th {
background: #f5f7fa;
color: #2d3a4b;
font-weight: 600;
padding: 12px;
text-align: left;
border-bottom: 2px solid #e5e8ef;
}
.log-table td {
padding: 12px;
border-bottom: 1px solid #e5e8ef;
}
.log-table tr:last-child td {
border-bottom: none;
}
.log-table tr:hover td {
background: #f8fafc;
}
/ 登录页面样式 */
.login-page {
display: none;
width: 100%;
height: 100vh;
background: linear-gradient(135deg, #e0e7ef 0%, #f5f7fa 100%);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.container {
display: flex;
width: 100%;
height: 100%;
}
.left-panel {
flex: 1;
background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
color: #fff;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.left-panel h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.left-panel .subtitle {
font-size: 1.2rem;
opacity: 0.8;
}
.left-panel .copyright {
margin-top: auto;
opacity: 0.6;
}
.right-panel {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.login-container {
width: 100%;
max-width: 400px;
background: #fff;
border-radius: 18px;
box-shadow: 0 6px 32px 0 rgba(30,40,90,0.10);
padding: 40px;
}
.logo-title {
text-align: center;
margin-bottom: 30px;
}
.logo-title img {
width: 80px;
height: 80px;
border-radius: 50%;

屏幕截图 2025-05-05 231118.png

屏幕截图 2025-05-05 231135.png

屏幕截图 2025-05-05 231142.png

屏幕截图 2025-05-05 231151.png

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容