layui-登陆

layui-登陆


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登陆</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="icon" href="img/6.jpg">
    </head>
    <body>
        <div class="login-main">
    <header class="layui-elip">后台登录</header>
    <form class="layui-form">
        <div class="layui-input-inline">
            <input type="text" name="account" required  lay-verify="required" placeholder="邮箱" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input type="password" name="password" required  lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline login-btn">
            <button type="submit" class="layui-btn">登录</button>
        </div>
        <hr/>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-primary">QQ登录</button>
        </div>
        <!--<div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-normal">微信登录</button>
        </div>-->
        <p><a href="javascript:;" class="fl">立即注册</a><a href="javascript:;" class="fr">忘记密码?</a></p>
    </form>
</div>
<script src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form'], function () {
        var form = layui.form(), $ = layui.jquery;
    });
</script>
    </body>
</html>

这里写图片描述


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登陆</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="icon" href="img/favicon.png">
    </head>
    <body class="login-body body">

<div class="login-box">
    <form class="layui-form layui-form-pane" method="get" action="">
        <div class="layui-form-item">
            <h3>xx后台登录系统</h3>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号:</label>

            <div class="layui-input-inline">
                <input type="text" name="account" class="layui-input" lay-verify="account" placeholder="账号" autocomplete="on" maxlength="20"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码:</label>

            <div class="layui-input-inline">
                <input type="password" name="password" class="layui-input" lay-verify="password" placeholder="密码" maxlength="20"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码:</label>

            <div class="layui-input-inline">
                <input type="number" name="code" class="layui-input" lay-verify="code" placeholder="验证码" maxlength="4"/><img src="img/v.png" onclick="getImage()" title="单击刷新验证码" id="img_rand_code" alt="">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="reset" class="layui-btn layui-btn-danger btn-reset">重置</button>
            <button type="button" class="layui-btn btn-submit" lay-submit="" lay-filter="sub">立即登录</button>
        </div>
    </form>
</div>  
<script src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        var $ = layui.jquery,form = layui.form(),layer = layui.layer;
        // 验证
        form.verify({
            account: function (value) {
                if (value == "") {
                    return "请输入用户名";
                }
            },
            password: function (value) {
                if (value == "") {
                    return "请输入密码";
                }
            },
            code: function (value) {
                if (value == "") {
                    return "请输入验证码";
                }
            }
        });
        // 提交监听
        form.on('submit(sub)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });
            return false;
        })
    })

//刷新验证码
function getImage() {
//  $("#img_rand_code").attr("src", "" + Date());
    alert("123");
}


</script>
    </body>
</html>

这里写图片描述

@using HengJiuGamesManage.Models; @{ Layout = null; } @{ Users users = new Users(); if(ViewBag.UserModel != null) { users = ViewBag.UserModel; } } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>恒久游戏管理系统</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/jquery-3.4.1.js"></script> <style> .layui-footer { display: flex; justify-content: center; } </style> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">恒久游戏管理系统</div> <!-- 头部区域(可配合layui 已有的水平导航) --> <ul class="layui-nav layui-layout-left"> <!-- 移动端显示 --> @*<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"> <i class="layui-icon layui-icon-spread-left"></i> </li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li> <li class="layui-nav-item"> <a href="javascript:;">nav groups</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">menu 11</a></dd> <dd><a href="javascript:;">menu 22</a></dd> <dd><a href="javascript:;">menu 33</a></dd> </dl> </li>*@ </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-sm-inline-block"> <a href="javascript:;"> <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img"> @users.UserName </a> <dl class="layui-nav-child"> <dd><a href="javascript:;" onclick="ModifyInfo()">个人资料</a></dd> @*<dd><a href="javascript:;">注销账号</a></dd>*@ <dd><a href="javascript:;" onclick="Exit()">退出登录</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">游戏大类</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">王者荣耀</a></dd> <dd><a href="javascript:;">永劫无间</a></dd> <dd><a href="javascript:;">三角洲行动</a></dd> <dd><a href="javascript:;">解限机</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">权限管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">普通用户</a></dd> <dd><a href="javascript:;">管理员</a></dd> <dd><a href="javascript:;">超级管理员</a></dd> </dl> </li> <li class="layui-nav-item"><a href="javascript:;">帮助</a></li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding: 15px;"> <blockquote class="layui-elem-quote layui-text"> Layui 框体布局内容主体区域 </blockquote> <div class="layui-card layui-panel"> <div class="layui-card-header"> 下面是充数内容,为的是出现滚动条 </div> <div class="layui-card-body"> </div> </div> <br><br> </div> </div> <div class="layui-footer" style="justify-content: center;"> <!-- 底部固定区域 --> Copyright © 2025 Layui MIT Licensed 免责声明开源协议 在线测试 广告赞助 静态主题 </div> </div> <script src="~/Scripts/layui/layui.js"></script> <script> //JS layui.use(['element', 'layer', 'util'], function () { var element = layui.element; var layer = layui.layer; var util = layui.util; var $ = layui.$; //头部事件 util.event('lay-header-event', { menuLeft: function (othis) { // 左侧菜单事件 layer.msg('展开左侧菜单的操作', { icon: 0 }); }, menuRight: function () { // 右侧菜单事件 layer.open({ type: 1, title: '公告', content: '<div style="padding: 15px;">公告1</div>', area: ['260px', '100%'], offset: 'rt', // 右上角 anim: 'slideLeft', // 从右侧抽屉滑出 shadeClose: true, scrollbar: false }); } }); }); //退出 function Exit() { $.ajax({ url:"/Home/ExitSession", type: "post", success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 2000 }, function () { window.location.href = "/Login/Index"; }) } else { layer.msg(res.msg, { icon: 5, time: 2000 }); } } }) } function ModifyInfo() { layer.open({ type: 2, // page 层类型 area: ['669px', '638px'], title: '资料修改', shade: 0.5, // 遮罩透明度 shadeClose: false, // 点击遮罩区域,关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: '/Home/ModifyBaseInfo' }); } </script> </body> </html>这个页面是管理系统登陆后的主页面,上面的是一个点击后出现下拉列表,目标是可以进行修改资料,修改密码,以及退出登录,但现在我的代码中下拉中缺少修改密码,以及把修改密码写在修改个人资料里面 ,请你进行优化
最新发布
07-08
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值