2025-05-06

1.登录界面的代码：<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/登录界面.css">
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./font_lp7stq7qiae/iconfont.css">
</head>
<body>
<div class="bg">
<div class="text1">
<h1>django-vue-lyadmin pro版</h1>
</div>
<div class="text2">
<h4>Vue3 + Django4.x易于DIY+低代码开发平台</h4>
</div>
<div class="text3">
<h4>Copyright</h4><h4 id="tuc" class="iconfont icon-c"></h4><h4>2022 django-vuelyadmin All rights reserved.</h4>
</div>
</div>

<div class="login-container">
    <div class="shouye">
        <div class="bang">帮</div>
         <h1>lyadmin后台管理系统</h1>
    </div>
    <h2 class="login-title">账号登录</h2>
    
    <form>
        <div class="form-group">
            <i class="iconfont icon-yonghu"></i>
            <input type="text" id="username"  placeholder="请输入账号">
        </div>
        
        <div class="form-group">
            <i class="iconfont icon-jiesuo"></i>
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        
        <div class="form-group">
  
            <div class="captcha-group">
                <i class="iconfont icon-duihao"></i>
                <input type="text" id="captcha" placeholder="请输入验证码">
                <div class="captcha-img">点击刷新</div>
            </div>
        </div>
        
        <button type="submit" class="login-btn">登录</button>
    </form>
    
    <div class="other-login">
        <p>————— 其他登录方式 —————</p>
        <div class="wechat-login">
            <img src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico" alt="微信登录">
        </div>
    </div>
</div>

</body>
</html>
登录界面的css样式：body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: white;
display: flex;
/justify-content: center;/
/align-items: center;/
height: 100vh;
margin: 0;
}
.bg{
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
align-items:center;
background-image: url("../image/dengluBG.jpg");
background-size: cover;
background-position: center;
border-radius: 0.5rem;
overflow: hidden;
padding: 0 1rem;
}
.text1{
font-size: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
margin-top: 1rem;
height: 3rem;
width: 100%;
box-sizing: border-box;
text-align: center;
word-break: break-word;
min-height: 3rem;
}
.text2{
font-size: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 1rem;
box-sizing: border-box;
text-align: center;
word-break: break-word;
margin:1rem 0;
color: gray;
width: 100%;
min-height: 2rem;
}
.text3{
font-size: 1rem;
display: flex;
justify-content: center;
color: white;
margin-top: auto;
width: 100%;
gap: 0.5rem;
margin-bottom: 1.5rem;
margin-left: 2rem;
}

.login-container {
width: 70%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: transparent;
padding: 30px;
border-radius: 8px;
margin-left: auto;
/box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);/
}
.shouye{
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 40px;
}
.bang{
background : linear-gradient(to right, #1976D2, #2196F3, #1976D2);
color: white;
padding: 8px;
border-radius: 5px;
display:inline-flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
font-size: 1.7rem;
margin-right: 0.5rem;
line-height: 1;
}
.shouye h1{
font-size: 2rem;
font-weight: 600;
}

.login-title {
width: 350px ; /* 完整下划线宽度 */
text-align: center;
font-size: 15px;
font-weight: 400;

text-align: left;
margin-bottom: 20px;
color: #1890ff;
position: relative;
display: block;
padding-bottom: 5px; /* 为下划线留出空间 */
}

.login-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 60px; /* 蓝色部分宽度与文字相同 /
height: 2px;
background-color: #1890ff;
z-index: 1; / 确保蓝色部分在上层 */
}

.login-title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 350px; /* 完整下划线宽度 /
height: 2px;
background-color: #ddd; / 灰色底色 */
}

.form-group {
position: relative; /* 为了绝对定位子元素 /;
width: 350px;
margin-bottom: 15px;
}
.form-group .iconfont {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%); / 垂直居中 */
color: #999;
font-size: 18px;
z-index: 2;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.form-group input {
width: 100%;
padding: 10px 10px 10px 40px; /* 为了留出图标空间 */;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
margin-top: 5px;
box-sizing: border-box;
}

.captcha-group {
display: flex;
gap: 10px;
}
.captcha-group .iconfont {
left: 10px;
}

.captcha-group input {
flex: 250px;
}

.captcha-img {
width: 100px;
height: 40px;
background-color: #eee;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #666;
cursor: pointer;
}

.login-btn {
width: 350px;
padding: 10px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
border-radius: 1.5rem;
}

.login-btn:hover {
background-color: #40a9ff;
transform: scale(1.05); /* 放大按钮 */
cursor: pointer;
}

.other-login {
width: 350px;
text-align: center;
margin-top: 20px;
color: #999;
font-size: 14px;
}

.wechat-login {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
cursor: pointer;
}

.wechat-login img {
width: 30px;
height: 30px;
}
.wechat-login:hover {
transform: scale(1.1); /* 放大按钮 */
cursor: pointer;
}

页面效果：
image.png

2.菜单的代码： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>菜单管理系统</title>
<link rel="stylesheet" href="./css/菜单.css">
<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<div class="menu">
<div class="menu-item">
<label for="guanjianci"><a>关键词:</a></label>
<input type="text" name="guanjianci" id="guanjianci" placeholder="关键词">
</div>
<div class="menu-item">
<label for="cebiankejian"><a>侧边可见:</a></label>
<select name="kexuanze" id="kexuanze">
<option value="">请选择</option>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
</div>
<div class="menu-item">
<label for="zhuangtai"><a>状态:</a></label>
<select name="zhuangtai" id="zhuangtai">
<option value="">请选择</option>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
</div>
<div class="CE">
<div class="chaxun"><p class="iconfont icon-Magnifier"></p>查询</div>
<div class="chongzhi"><p class="iconfont icon-iconmonstr-refresh-3"></p>重置</div>
<div class="chaxun"><p class="iconfont icon-jiahao"></p>新增</div>
</div>
</div>
<div class="NR">
<table>
<tr>
<th>序号</th>
<th>菜单名称</th>
<th>图标</th>
<th>排序</th>
<th>路由地址</th>
<th>权限</th>
<th>侧边可见</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<th>1</th>
<th>DashBoard</th>
<th><a class="iconfont icon-xitongjiankong"></a></th>
<th>1</th>
<th>analysis</th>
<th>
<span class="ZT">查询</span>
<span class="ZT">单例</span>
</th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>2</th>
<th>数据面板</th>
<th><a class="iconfont icon-zhibiaojiankong "></a></th>
<th>2</th>
<th>lyDataPanel</th>
<th>
<span class="ZT">编译</span>
<span class="ZT">查询</span>
<span class="ZT">新增</span>
<span class="ZT">单例</span>
<span class="ZT">删除</span>
</th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>3</th>
<th>管理员管理</th>
<th><a class="iconfont icon-yonghu"></a></th>
<th>3</th>
<th>adminManage</th>
<th>
<span class="ZT">编译</span>
<span class="ZT">查询</span>
<span class="ZT">新增</span>
<span class="ZT">单例</span>
<span class="ZT">删除</span>
</th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>4</th>
<th>用户管理</th>
<th><a class="iconfont icon-yonghu"></a></th>
<th>6</th>
<th></th>
<th></th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>7</th>
<th>基础管理</th>
<th><a class="iconfont icon-diannao"></a></th>
<th>9</th>
<th></th>
<th></th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>15</th>
<th>商场管理</th>
<th><a class="iconfont icon-shangchangguanli"></a></th>
<th>180</th>
<th></th>
<th></th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>26</th>
<th>流程管理</th>
<th><a class="iconfont icon-changyongtubiao_liuchengguanli"></a></th>
<th>186</th>
<th></th>
<th></th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>29</th>
<th>功能大全</th>
<th><a class="iconfont icon-Game_px_black"></a></th>
<th>188</th>
<th>lyFunctionSets</th>
<th>
<span class="ZT">查询</span>
</th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>30</th>
<th>个人中心</th>
<th><a class="iconfont icon-miaozhun"></a></th>
<th>866</th>
<th></th>
<th></th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>33</th>
<th>系统监控</th>
<th><a class="iconfont icon-zhibiao"></a></th>
<th>888</th>
<th></th>
<th></th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>39</th>
<th>系统工具</th>
<th><a class="iconfont icon-kuaidibaoguo"></a></th>
<th>980</th>
<th></th>
<th></th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>45</th>
<th>系统管理</th>
<th><a class="iconfont icon-xitongguanli"></a></th>
<th>990</th>
<th></th>
<th></th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
<tr>
<th>57</th>
<th>日志管理</th>
<th><a class="iconfont icon-gantanhao-yuankuang"></a></th>
<th>999</th>
<th></th>
<th></th>
<th><span class="S">是</span></th>
<th>启用</th>
<th>编辑 删除</th>
</tr>
</table>
</div>
</body>
</html>
菜单的css样式：body {
background-color: #f0f0f0; /* 网页背景设为灰色 */
margin: 0;
padding: 0;
}

.menu {
display: flex;
color: #505050;
width: 100%;
height: 3rem;
align-items: center;
gap: 1.4rem;
padding: 0 1rem;
background-color: white; /* 菜单背景设为白色 */
}

.menu-item input{
width: 7.6rem;
}

.menu-item select {
width: 7rem;
color: #898989;
}

.menu a{
color: #000000;
font-size: 0.9rem;
}

.CE{
display: flex;
align-items: center;
}

.chaxun{
display: flex;
align-items: center;
background-color: rgb(47, 157, 216);
height: 2rem;
width: 3.6rem;
border-radius: 5px;
padding: 0 0.6rem;
cursor: pointer;
color: #fff;
}

.chaxun p{
margin-right: 0.3rem;
}

.chaxun:hover{
background-color: rgb(47, 126, 216);
font-size: large;
}

.chongzhi{
display: flex;
align-items: center;
cursor: pointer;
color: rgb(0, 0, 0);
margin-left: 1rem;
margin-right: 1rem;
}

.chongzhi p{
margin-right: 0.3rem;
}

.chongzhi:hover{
color: rgb(47, 157, 216);
font-size: large;
}

.NR{
display: flex;
width: calc(100% - 3.2rem); /* 调整宽度 /
height: 40rem;
margin: 1rem 0rem;
position: relative;
left: 0;
top: 0;
background-color: white; / 内容区域背景设为白色 /
box-shadow: 0 2px 4px rgba(0,0,0,0.1); / 添加阴影效果 */

}
.NR table {
width: 100%;
border-collapse:separate; /* 合并边框 /
border-spacing: 0; / 消除单元格间距 /
}
NR table th,
.NR table td {
border: 1px solid #e0e0e0; / 淡灰色边框 */
padding: 8px 12px;

}

.NR table th {
background-color: white; /* 表头浅灰色背景 /
text-align: left;
padding: 8px 12px;
cursor: pointer;
vertical-align: middle;
color: #666666;
border-bottom: 2px solid #e0e0e0; / 表头底部加粗分隔线 */
}

.NR table tr:hover {
background-color: #f9f9f9; /* 行悬停效果 */
}
.NR table a{
font-size:1.2rem;
}

.ZT {
display: inline-block;
padding: 4px 10px;
margin: 2px;
background-color: #ffffff;
border: 1px solid ;
border-radius: 3px;
font-size: 12px;

}
.S{
color: #1890ff;
}
页面效果：

image.png

3.登录框架的代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ai实验</title>
<link rel="stylesheet" href="css/登陆框架.css">
<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<div class="text">
<div class="bang">帮</div>
<div class="dan">django-vue-lyadmin-pro后台管理系统</div>
<div class="you">
<div id="tu1" class="iconfont icon-gengxinrizhi">更新日志</div>
<div id="tu2" class="iconfont icon-yueliang1"></div>
<div id="tu2" class="iconfont icon-huiyuantequanjiaxitequan"></div>
<div id="TU">
<div id="tu3">管</div>
<div id="tu4">管理员</div>
<div id="tu5" class="iconfont icon-xialajiantou"></div>
</div>
</div>
</div>
<div class="nav">
<div class="kuang">
<div class="kuang1">
<div><p class="iconfont icon-xitongjiankong"></p> DashBoard<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-zhibiaojiankong"></p> 数据面板<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-yonghu"></p> 用户管理<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-diannao"></p> 基础管理<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-shangchangguanli"></p> 商场管理<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-changyongtubiao_liuchengguanli"></p> 流程管理<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-Game_px_black"></p> 功能大全<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-miaozhun"></p> 个人中心<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-zhibiao"></p>系统监控<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-kuaidibaoguo"></p> 系统工具<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-xitongguanli"></p> 系统管理<span class="iconfont icon-xialajiantou"></span></div>
<div><p class="iconfont icon-gantanhao-yuankuang"></p> 日志管理<span class="iconfont icon-xialajiantou"></span></div>
</div>
<div class="kuang2"><p class="iconfont icon-shezhi"></p> </div>
</div>
<div class="kuang3">
<div class="BQ">
<div class="tab-container"></div>
</div>
<div class="NR"></div>
</div>
</div>
<script>
function loadContent(text) {
const NR = document.querySelector('.NR');
NR.innerHTML = '';
const contentFrame = document.createElement('iframe');
contentFrame.className = 'mini-frame';

        // 根据点击项设置不同HTML文件
        if(text.includes('DashBoard')) {
            contentFrame.src = '菜单.html';
        } else if(text.includes('用户管理')) {
            contentFrame.src = '菜单管理.html';
        } else if(text.includes('数据面板')) {
            contentFrame.src = '数据面板.html';
        }
        // 可以继续添加其他菜单项...
        
        NR.appendChild(contentFrame);
    }

    document.querySelectorAll('.kuang1 div').forEach(item => {
        item.addEventListener('click', function() {
            const text = this.textContent.trim();
            const tabContainer = document.querySelector('.tab-container');
            
            // 移除所有标签的active类
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            
            // 创建或更新标签页
            let tab = document.querySelector(`.tab[data-text="${text}"]`);
            if (!tab) {
                tab = document.createElement('div');
                tab.className = 'tab';
                tab.setAttribute('data-text', text);
                tab.innerHTML = `
                    <span>${text}</span>
                    <span class="close-tab">×</span>
                `;
                tabContainer.appendChild(tab);
                
                // 关闭标签页事件
                tab.querySelector('.close-tab').addEventListener('click', function(e) {
                    e.stopPropagation();
                    tab.remove();
                    document.querySelector('.NR').innerHTML = '';
                });
            }
            
            // 点击标签页事件
            tab.addEventListener('click', function(e) {
                if(e.target.classList.contains('close-tab')) return;
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                loadContent(text);
            });
            
            // 激活当前标签并加载内容
            tab.classList.add('active');
            loadContent(text);
        });
    });
</script>

</body>
</html>
css样式：.text{
width: 100%;
height: 4rem;
background-color: #25282f;
display: flex;
border-radius: 8px 8px 0 0;
}

.bang{
background: linear-gradient(to right, #1976D2, #2196F3, #1976D2);
color: white;
padding: 8px;
border-radius: 5px;
display: inline-block;
width: 2rem;
height: 2rem;
font-size: 2rem;
margin-left: 1.3rem;
margin-top: 1rem;
line-height: 1; /* 重置行高 */
}

.dan{
color: white;
font-size: 1.5rem;
font-weight: bold;
margin-top: 1.2rem;
margin-left:0.5rem;
}

.you{

width: 20rem;
height: 4rem;
margin-left: auto;
display: flex;
gap: 1.5rem;

}

tu1{

width: 5rem;
height: 5rem;
margin-top: 1.5rem;
color: #f38600;
transition: transform 0.3s ease;

}

tu1:hover {

transform: scale(1.2);
cursor: pointer;

}

tu2{

margin-top: 1.5rem;
color: #ffffff; 
font-size: 1.2rem;
transition: transform 0.3s ease;

}

tu2:hover {

transform: scale(1.2);
cursor: pointer;

}

TU{

display: flex;
align-items: center; /* 添加垂直居中 */
transition: transform 0.3s ease;

}

TU:hover {

transform: scale(1.2);
cursor: pointer;

}

tu3{

background-color: rgb(162, 159, 159); 
width: 1.8rem;
height: 1.8rem;
/*margin-top: 1.1rem;*/
padding: 2px;
border-radius: 50%; 
text-align: center; 
line-height: 1.8rem; 
color: white;
font-size: 1.2rem;

}

tu4{

/*margin-top: 1.5rem;*/
color: #ffffff;
font-size: 1.2rem;

}

tu5{

/*margin-top: 1.6rem;*/
color: #ffffff;
font-size: 1rem;

}

.nav{
display: flex;
}

.kuang{
width: 14rem;
height: 43.6rem;
border-radius: 0 0 0 8px;
background-color: #25282f;
}

.kuang1 {
width: 10.4rem;
height: 32rem;
color: #ffffff;
}

.kuang1 div{
width: 100%;
height: 2.5rem;
display: flex;
font-size: 1.1rem;
text-align: left;
cursor: pointer;
padding-left: 3.6rem;
align-items: center;
line-height: normal;
margin-bottom: 0.5rem;
}

.kuang1 div:hover{
background-color: #31343b;
color: #ffcc00;
font-weight: bold;
}

.kuang1 p{
margin-right: 0.5rem;
font-size: 1.3rem;
}

.kuang2 {
width: 6rem;
height: 4rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
background-color: #25282f;
margin-top: 7rem;
bottom: 1rem;
margin-left: 3.8rem;
}

.kuang2 p{
color: #ffffff;
font-size: 1.3rem;
margin-bottom: 1rem;
}

.kuang2 p:hover{
color: #ffcc00;
cursor: pointer;
}

.kuang3{
width: calc(100% - 15rem);
height: 43.6rem;
position: absolute;
left: 14.5rem;
top: 4.5rem;
}

.BQ{
width: 80.6rem;
height: 2rem;
display: flex;
padding: 0.2rem;
margin-top: 0;
}

.tab-container {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 5px;
margin-top: 0;
}

.tab {
background: #fff;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
}

.tab.active {
background: #1890ff;
color: #fff;
}

.close-tab {
margin-left: 5px;
}

.mini-frame {
width: 100%;
height: 100%;
border: none;
}

.NR{
width: 100%;
height: 41.6rem;

position: relative;
overflow: hidden;

}
页面效果


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

相关阅读更多精彩内容

友情链接更多精彩内容