支持手机屏幕的layui后台html模板

djk88882026-03-18 12:49

login.html

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录 - 手机端迷你系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.18/css/layui.css">
    <style>
        /* 全局适配手机 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #f5f5f5;
            font-size: 14px;
        }
        /* 登录容器 */
        .login-container {
            width: 90%;
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .login-title {
            text-align: center;
            font-size: 18px;
            color: #333;
            margin-bottom: 20px;
            font-weight: 600;
        }
        .layui-form-item {
            margin-bottom: 15px;
        }
        .layui-btn {
            width: 100%;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
        }
        /* 适配小屏手机 */
        @media screen and (max-width: 375px) {
            .login-container {
                margin: 30px auto;
                padding: 15px;
            }
            .layui-btn {
                height: 40px;
                line-height: 40px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-title">手机端迷你管理系统</div>
        <form class="layui-form" lay-filter="loginForm">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="loginBtn">登录</button>
                </div>
            </div>
        </form>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.8.18/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function() {
            var form = layui.form,
                layer = layui.layer;

            // 监听登录提交
            form.on('submit(loginBtn)', function(data) {
                // 模拟登录验证（实际项目替换为接口请求）
                if (data.field.username && data.field.password) {
                    layer.msg('登录成功，正在跳转...', {icon: 1, time: 1000}, function() {
                        window.location.href = 'main.html'; // 跳转到主页面
                    });
                } else {
                    layer.msg('请输入用户名和密码', {icon: 2});
                }
                return false; // 阻止表单默认提交
            });
        });
    </script>
</body>
</html>

main.html

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>主页面 - 手机端迷你系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.18/css/layui.css">
    <style>
        /* 全局适配 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html, body {
            height: 100%;
            overflow: hidden;
            font-size: 14px;
        }
        /* 头部 */
        .header {
            height: 48px;
            line-height: 48px;
            background: #1E9FFF;
            color: #fff;
            padding: 0 15px;
            position: relative;
            z-index: 100;
            display: flex;
            align-items: center;
        }
        /* 独立的展开/收起按钮 */
        .sidebar-toggle-btn {
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background: rgba(255,255,255,0.2);
            border-radius: 4px;
            cursor: pointer;
            font-size: 18px;
            margin-right: 10px;
        }
        .header-title {
            flex: 1;
        }
        /* 主体布局 */
        .main-layout {
            display: flex;
            height: calc(100% - 48px);
        }
        /* 左侧菜单 - 新增分类折叠样式 */
        .left-menu {
            width: 200px;
            background: #2F4050;
            color: #fff;
            height: 100%;
            transition: all 0.3s;
            overflow-y: auto;
            z-index: 99;
        }
        .left-menu.hide {
            margin-left: -200px;
        }
        /* 导航分类标题 */
        .menu-category {
            padding: 12px 15px;
            font-weight: 600;
            background: #1f2d3d;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .category-icon {
            font-size: 12px;
            transition: transform 0.3s;
        }
        .category-icon.rotate {
            transform: rotate(90deg);
        }
        /* 分类下的子菜单 */
        .sub-menu-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .sub-menu-list.show {
            max-height: 500px; /* 足够大的高度容纳子菜单 */
        }
        /* 子菜单项 */
        .sub-menu-item {
            padding: 12px 25px; /* 缩进显示 */
            cursor: pointer;
            border-bottom: 1px solid #1f2d3d;
        }
        .sub-menu-item:hover {
            background: #1E9FFF;
        }
        /* 右侧内容区 */
        .right-content {
            flex: 1;
            height: 100%;
            overflow: hidden;
        }
        .right-content iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        /* 手机适配 */
        @media screen and (max-width: 768px) {
            .left-menu {
                position: absolute;
                top: 48px;
                left: 0;
            }
            .right-content {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 头部 - 新增独立的展开/收起按钮 -->
    <div class="header">
        <div class="sidebar-toggle-btn layui-icon layui-icon-spread-left" id="sidebarToggle"></div>
        <div class="header-title">手机端迷你管理系统</div>
    </div>

    <!-- 主体布局 -->
    <div class="main-layout">
        <!-- 左侧菜单 - 新增分类折叠结构 -->
        <div class="left-menu" id="leftMenu">
            <!-- 第一个导航分类 -->
            <div class="menu-category" data-category="category1">
                <span>数据管理</span>
                <span class="category-icon layui-icon layui-icon-right"></span>
            </div>
            <div class="sub-menu-list" id="category1">
                <div class="sub-menu-item" data-url="table.html">用户列表</div>
                <div class="sub-menu-item" data-url="table.html?type=order">订单列表</div>
                <div class="sub-menu-item" data-url="table.html?type=goods">商品列表</div>
            </div>

            <!-- 第二个导航分类 -->
            <div class="menu-category" data-category="category2">
                <span>系统工具</span>
                <span class="category-icon layui-icon layui-icon-right"></span>
            </div>
            <div class="sub-menu-list" id="category2">
                <div class="sub-menu-item" data-url="https://www.baidu.com">百度（测试）</div>
                <div class="sub-menu-item" data-url="https://www.layui.com">Layui官网</div>
                <div class="sub-menu-item" data-url="table.html?type=setting">系统设置</div>
            </div>

            <!-- 第三个导航分类 -->
            <div class="menu-category" data-category="category3">
                <span>帮助中心</span>
                <span class="category-icon layui-icon layui-icon-right"></span>
            </div>
            <div class="sub-menu-list" id="category3">
                <div class="sub-menu-item" data-url="https://www.baidu.com/s?wd=layui%E6%96%87%E6%A1%A3">Layui文档</div>
                <div class="sub-menu-item" data-url="https://www.baidu.com/s?wd=html%E6%89%8B%E5%86%8C">HTML手册</div>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="right-content">
            <iframe src="table.html" id="mainIframe"></iframe>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.8.18/layui.js"></script>
    <script>
        layui.use(['jquery', 'layer'], function() {
            var $ = layui.jquery,
                layer = layui.layer;

            // 1. 左侧菜单整体展开/收起功能（独立按钮）
            $('#sidebarToggle').click(function() {
                var $leftMenu = $('#leftMenu');
                $leftMenu.toggleClass('hide');
                // 切换按钮图标
                if ($leftMenu.hasClass('hide')) {
                    $(this).removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
                } else {
                    $(this).removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
                }
            });

            // 2. 导航分类折叠/展开功能
            $('.menu-category').click(function() {
                var categoryId = $(this).attr('data-category');
                var $subMenu = $('#' + categoryId);
                var $icon = $(this).find('.category-icon');
                
                // 切换子菜单显示/隐藏
                $subMenu.toggleClass('show');
                // 切换图标旋转状态
                $icon.toggleClass('rotate');
            });

            // 3. 点击子菜单加载iframe内容
            $('.sub-menu-item').click(function() {
                var url = $(this).attr('data-url');
                $('#mainIframe').attr('src', url);
                // 手机端点击菜单后自动隐藏左侧菜单
                if ($(window).width() <= 768) {
                    $('#leftMenu').addClass('hide');
                    $('#sidebarToggle').removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
                }
            });

            // 初始化：默认展开第一个分类
            $('.menu-category[data-category="category1"]').trigger('click');
        });
    </script>
</body>
</html>

table.html

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>数据列表 - 手机端迷你系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.18/css/layui.css">
    <style>
        /* 全局适配 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            padding: 15px;
            background: #f5f5f5;
            font-size: 14px;
        }
        /* 查询条件区域 */
        .search-box {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .layui-form-item {
            margin-bottom: 10px;
        }
        .layui-btn {
            padding: 0 15px;
        }
        /* 表格区域 */
        .table-box {
            background: #fff;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        /* 适配手机小屏 */
        @media screen and (max-width: 375px) {
            .layui-form-item .layui-inline {
                display: block;
                margin-bottom: 10px;
                clear: both;
            }
            .layui-table-cell {
                height: auto !important;
                line-height: 24px !important;
                padding: 5px 10px !important;
            }
        }
    </style>
</head>
<body>
    <!-- 查询条件区域 -->
    <div class="search-box">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <select name="sex" lay-verify="">
                            <option value="">全部</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-inline">
                        <input type="number" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 表格区域 -->
    <div class="table-box">
        <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
        
        <!-- 表格工具条模板 -->
        <script type="text/html" id="barTool">
            <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        </script>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.8.18/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'jquery'], function() {
            var table = layui.table,
                form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;

            // 初始化表格
            var tableIns = table.render({
                elem: '#dataTable',
                height: 'full-120', // 适配手机高度
                cellMinWidth: 80, // 单元格最小宽度
                page: true, // 开启分页
                limit: 5, // 每页默认5条（适配手机）
                limits: [5, 10, 15],
                data: [ // 模拟数据
                    {id: 1, name: '张三', sex: '男', age: 25, phone: '13800138000', address: '北京市朝阳区'},
                    {id: 2, name: '李四', sex: '女', age: 28, phone: '13900139000', address: '上海市浦东新区'},
                    {id: 3, name: '王五', sex: '男', age: 30, phone: '13700137000', address: '广州市天河区'},
                    {id: 4, name: '赵六', sex: '女', age: 26, phone: '13600136000', address: '深圳市南山区'},
                    {id: 5, name: '孙七', sex: '男', age: 32, phone: '13500135000', address: '杭州市西湖区'}
                ],
                cols: [[
                    {field: 'id', title: 'ID', width: 60, align: 'center'},
                    {field: 'name', title: '姓名', align: 'center'},
                    {field: 'sex', title: '性别', width: 60, align: 'center'},
                    {field: 'age', title: '年龄', width: 60, align: 'center'},
                    {field: 'phone', title: '手机号', align: 'center'},
                    {fixed: 'right', title: '操作', toolbar: '#barTool', align: 'center'}
                ]],
                done: function(res, curr, count) {
                    // 解决layui select下拉被遮挡问题
                    $('.layui-form-select dl').css({
                        'z-index': 99999,
                        'position': 'absolute'
                    });
                }
            });

            // 监听查询按钮
            form.on('submit(searchBtn)', function(data) {
                // 模拟查询（实际项目替换为接口请求）
                layer.msg('查询条件：' + JSON.stringify(data.field), {icon: 1});
                // 这里可根据查询条件筛选表格数据，示例仅做提示
                tableIns.reload({
                    where: data.field, // 传递查询条件
                    page: {curr: 1} // 重置页码
                });
                return false;
            });

            // 监听表格工具条
            table.on('tool(dataTable)', function(obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    // 跳转到详情页，传递ID参数
                    window.location.href = 'detail.html?id=' + data.id + '&name=' + encodeURIComponent(data.name);
                } else if (obj.event === 'del') {
                    layer.confirm('确定删除【' + data.name + '】吗？', {
                        btn: ['确定','取消'],
                        shade: 0.3
                    }, function(index) {
                        obj.del(); // 删除表格行
                        layer.close(index);
                        layer.msg('删除成功', {icon: 1});
                    });
                }
            });
        });
    </script>
</body>
</html>

detail.html

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>数据详情 - 手机端迷你系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.18/css/layui.css">
    <style>
        /* 全局适配 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            padding: 15px;
            background: #f5f5f5;
            font-size: 14px;
        }
        /* 详情容器 */
        .detail-box {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .detail-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        /* 详情列表 */
        .detail-list {
            margin-bottom: 15px;
        }
        .detail-label {
            display: inline-block;
            width: 80px;
            color: #666;
            font-weight: 500;
        }
        .detail-value {
            color: #333;
        }
        /* 返回按钮 */
        .back-btn {
            margin-top: 20px;
        }
        /* 手机适配 */
        @media screen and (max-width: 375px) {
            .detail-box {
                padding: 15px;
            }
            .detail-label {
                width: 70px;
                font-size: 13px;
            }
            .detail-value {
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <div class="detail-box">
        <div class="detail-title">用户详情</div>
        
        <div class="detail-list">
            <span class="detail-label">ID：</span>
            <span class="detail-value" id="detailId"></span>
        </div>
        <div class="detail-list">
            <span class="detail-label">姓名：</span>
            <span class="detail-value" id="detailName"></span>
        </div>
        <div class="detail-list">
            <span class="detail-label">性别：</span>
            <span class="detail-value" id="detailSex"></span>
        </div>
        <div class="detail-list">
            <span class="detail-label">年龄：</span>
            <span class="detail-value" id="detailAge"></span>
        </div>
        <div class="detail-list">
            <span class="detail-label">手机号：</span>
            <span class="detail-value" id="detailPhone"></span>
        </div>
        <div class="detail-list">
            <span class="detail-label">地址：</span>
            <span class="detail-value" id="detailAddress"></span>
        </div>

        <button class="layui-btn layui-btn-primary back-btn" id="backBtn">返回列表</button>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.8.18/layui.js"></script>
    <script>
        layui.use(['layer', 'jquery'], function() {
            var layer = layui.layer,
                $ = layui.jquery;

            // 获取URL参数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURIComponent(r[2]);
                return '';
            }

            // 模拟详情数据（实际项目从接口获取）
            var detailData = {
                1: {id:1, name:'张三', sex:'男', age:25, phone:'13800138000', address:'北京市朝阳区'},
                2: {id:2, name:'李四', sex:'女', age:28, phone:'13900139000', address:'上海市浦东新区'},
                3: {id:3, name:'王五', sex:'男', age:30, phone:'13700137000', address:'广州市天河区'},
                4: {id:4, name:'赵六', sex:'女', age:26, phone:'13600136000', address:'深圳市南山区'},
                5: {id:5, name:'孙七', sex:'男', age:32, phone:'13500135000', address:'杭州市西湖区'}
            };

            // 渲染详情数据
            var userId = getUrlParam('id');
            if (detailData[userId]) {
                $('#detailId').text(detailData[userId].id);
                $('#detailName').text(detailData[userId].name);
                $('#detailSex').text(detailData[userId].sex);
                $('#detailAge').text(detailData[userId].age);
                $('#detailPhone').text(detailData[userId].phone);
                $('#detailAddress').text(detailData[userId].address);
            } else {
                layer.msg('暂无该用户信息', {icon: 2});
            }

            // 返回列表
            $('#backBtn').click(function() {
                // 如果是从iframe打开，返回上一页；否则返回table.html
                if (window.parent !== window) {
                    window.parent.$('#mainIframe').attr('src', 'table.html');
                } else {
                    window.location.href = 'table.html';
                }
            });
        });
    </script>
</body>
</html>

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

参数 含义 作用
width=device-width 视口宽度 = 设备屏幕宽度 让页面适配手机屏幕，不会出现横向滚动条
initial-scale=1.0 初始缩放比例 1:1 页面打开时不放大、不缩小，100% 显示
maximum-scale=1.0 最大缩放比例 1:1 禁止用户放大页面
minimum-scale=1.0 最小缩放比例 1:1 禁止用户缩小页面
user-scalable=no 禁止用户手动缩放 双指缩放、双击缩放全部失效

如果希望手机浏览器可以缩放页面：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

initial-scale=1.0 ，初始大小：1.0倍，

maximum-scale=2.0 ，最大放大到：2.0倍，

minimum-scale=0.5，最小缩小到：0.5倍，

user-scalable=yes，支持两指滑动放大缩小(PC浏览器则是：Ctrl+鼠标滚轮)。

相关推荐
恋猫de小郭1 分钟前
Google 开源大模型 Gemma4 怎么选，本地跑的话需要什么条件？
前端·人工智能·ai编程
文心快码BaiduComate4 分钟前
Comate搭载GLM-5.1：长程8H，对齐Opus 4.6
前端·后端·架构
熊猫钓鱼>_>10 分钟前
AI驱动的Web应用智能化：WebMCP、WebSkills与WebAgent的融合实践
前端·人工智能·ai·skill·webagent·webmcp·webskills
毛骗导演13 分钟前
OpenClaw Pi Agent 深度解析：嵌入式 Agent 运行时的架构设计与实现
前端·架构
twl14 分钟前
从 RAG 到可持续演化的知识库：llm-wiki 介绍
前端
傻小胖20 分钟前
Object.defineProperty() 完整指南
开发语言·前端·javascript
里欧跑得慢25 分钟前
Flutter 导航路由：构建流畅的应用导航体验
前端·css·flutter·web
@二进制26 分钟前
vue3+vant4+ts出现页面空白？甚至在App.vue的＜template＞＜/template＞中随便输入都无法显示？
前端·vue.js·typescript
桂森滨26 分钟前
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 4️⃣首页开发
前端·typescript·vue
热门推荐
01GitHub 镜像站点02OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程03AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南04Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Claude Code 未登录 使用第三方模型07Oh My Codex 快速使用指南08UV安装并设置国内源09【技术干货】Gemma 4 上手深度指南：本地多模态大模型的新基线10Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services