<!文档类型 网页类型>
<网页 语言代码="中文">
    <网页头部>
        <网页信息 文档编码="UTF8" />
        <网页信息 名称="页面视图" 关联数据="视图宽度, 初始缩放值" />
        <网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" />
        <网页标题>后台框架</网页标题>
        <样式>
            网页主体 {
                溢出-x轴: 隐藏;
            }
            网页,
            网页主体,
            .后端主体 {
                背景: #fff;
                高度: 100%;
            }
            .嫩绿按钮,
            .lay-导航-垂直 .lay-导航-子集 描述列表项.lay-选中,
            .lay-导航-垂直 .lay-导航-子集 描述列表项.lay-选中 超链接,
            .lay-导航-垂直 .lay-选中,
            .lay-导航-垂直 .lay-选中 > 超链接,
            .lay-导航-垂直 .lay-选中 > 超链接:鼠标移入,
            .lay-导航-垂直 .lay-导航-功能条 {
                背景-颜色: #009688;
                /*背景-颜色: #5fb878;*/
            }
            .lay-头部 {
                边框-底部: 1px 实线 whitesmoke;
                宽度: 计算(100% - 230px);
                左侧: 230px;
                过渡: 所有 0.3s;
            }
            .lay-头部 .lay-导航 {
                背景-颜色: #fff;
                颜色: #444;
            }
            .lay-头部 .lay-布局-左侧 {
                左侧: 0;
            }
            .lay-头部 .lay-导航 超链接,
            .lay-头部 .lay-导航 超链接:鼠标移入 {
                颜色: #444 @样式提权;
                字体-粗细: 400;
            }

            .lay-侧边栏 {
                宽度: 230px;
                溢出: 隐藏;
                过渡: 所有 0.3s;
            }
            .lay-黑色背景 {
                背景-颜色: #28333e @样式提权;
                颜色: #fff;
            }
            .lay-侧边栏-滚动::-谷歌内核-滚动bar {
                宽度: 0px;
                高度: 0px;
            }
            .lay-侧边栏 .lay-标志 {
                宽度: 230px;
                高度: 59px;
                行高: 59px;
                文本-对齐: 居中;
                定位: 相对定位;
                边框-底部: 1px 实线 颜色通道(0, 0, 0, 0.12);
            }
            .lay-侧边栏 .lay-标志 图片框 {
                宽度: 34px;
                高度: 34px;
                显示模式: 无效;
            }
            .lay-侧边栏 .lay-标志 .标题 {
                字体-大小: 21px;
                字体-粗细: 550;
                /*颜色: #36b368 @样式提权;*/
                颜色: #009688 @样式提权;
                定位: 相对定位;
                顶部: 5px;
                左边距: 5px;
            }
            .lay-侧边栏-滚动 {
                宽度: 247px;
            }
            .lay-侧边栏 .lay-导航-垂直 {
                宽度: 100%;
                背景: 无效;
            }
            .后端网页.隐藏 .lay-侧边栏 {
                宽度: 0;
            }
            .后端网页.隐藏 .layui-body,
            .后端网页.隐藏 .lay-头部 {
                宽度: 100%;
                左侧: 0;
            }
            #侧边栏菜单 {
                宽度: 230px;
            }
            .lay-导航-垂直 .lay-导航-子集 {
                内边距: 0;
            }
            .lay-导航-垂直 .lay-导航-子集 行内元素 {
                左边距: 20px;
            }
            .layui-body {
                左侧: 230px;
                高度: 计算(100vh - 106px);
                宽度: 计算(100% - 230px);
                过渡: 所有 0.3s;
                最小-宽度: 320px;
            }
            #内容区域 {
                高度: 100%;
            }
            #内容区域 .lay-选项卡 {
                外边距: 0;
                高度: 100%;
            }
            #内容区域 内联框架 {
                边框: 无效;
                宽度: 100%;
                高度: 100%;
            }
            #内容区域 .lay-选项卡-内容 {
                高度: 计算(100% - 41px);
                内边距: 0;
            }
            #内容区域 .lay-选项卡-内容 .lay-选项卡-项目 {
                高度: 100%;
            }
            .lay-尾部 {
                定位: 绝对定位;
                底部: 0;
                高度: 45px;
                行高: 45px;
                文本-对齐: 居中;
                宽度: 100%;
                右内边距: 15px;
                盒子模型: 边界框;
            }
            .禁止删除 斜体文本 {
                显示模式: 无效 @样式提权;
            }
            .内容页面 {
                内边距: 10px;
                高度: 自动;
                背景: whitesmoke;
                盒子模型: 边界框;
            }
            .快捷板块 {
                文本-对齐: 居中;
            }
            .快捷板块 .lay-栅格超小屏8 {
                行高: 60px;
                字体-大小: 29px;
                边框-右侧: 1px 实线 #eceff9;
            }
            .快捷板块 矢量标签 {
                上内边距: 10px;
                宽度: 50px;
                高度: 50px;
            }
            .信息板块 无序列表 列表项 {
                内边距: 15px 0;
                边框-底部: 1px 实线 #eceff9;
                定位: 相对定位;
            }
            .信息板块 无序列表 列表项 .文本 {
                右边距: 150px;
            }
            .信息板块 无序列表 列表项 行内元素 {
                颜色: #36b368;
                显示模式: 内联块元素;
                外边距: 0 5px;
            }
            .信息板块 无序列表 列表项 时间 {
                定位: 绝对定位;
                右侧: 0;
                顶部: 50%;
                转换: 平移y轴(-50%);
                颜色: #999;
            }
            .lay-卡片面板-主体 .lay-表单 {
                上边距: 15px;
            }
            .弹窗主体 {
                宽度: 100%;
                定位: 绝对定位;
                顶部: 0px;
                左侧: 0px;
                底部: 50px;
                内边距: 15px;
                盒子模型: 边界框;
                溢出: 自动;
            }
            .弹窗按钮容器 {
                宽度: 100%;
                内边距: 0 15px;
                文本-对齐: 右侧;
                盒子模型: 边界框;
                定位: 绝对定位;
                底部: 0px;
                左侧: 0px;
                高度: 50px;
                行高: 50px;
                背景-颜色: #f8f8f8;
                边框-顶部: 1px 实线 #eee;
            }
        </样式>
    </网页头部>
    <网页主体 类名="后端网页">
        <区块 类名="后端主体">
            <!-- 顶 部 样 式 -->
            <区块 类名="lay-头部">
                <!-- 顶 部 左 侧 功 能 -->
                <无序列表 类名="lay-导航 lay-布局-左侧">
                    <列表项 类名="缩小菜单 lay-导航-项目">
                        <超链接 链接地址="#" 类名="lay-图标 lay-图标右菜单"></超链接>
                    </列表项>
                    <列表项 类名="刷新 lay-导航-项目">
                        <超链接 链接地址="#" 类名="lay-图标 lay-图标刷新1"></超链接>
                    </列表项>
                </无序列表>
                <!-- 多 系 统 菜 单 -->
                <区块 id="control" 类名="layui-layout-control"></区块>
                <!-- 顶 部 右 侧 菜 单 -->
                <无序列表 类名="lay-导航 lay-布局-右侧">
                    <列表项 类名="lay-导航-项目 用户">
                        <!-- 头 像 -->
                        <超链接 类名="lay-图标 lay-图标用户名" 链接地址="javascript:void(0);"></超链接>
                        <!-- 功 能 菜 单 -->
                        <描述列表 类名="lay-导航-子集">
                            <描述列表项>
                                <超链接 链接地址="/login.html" 菜单地址="@代码_登陆页面.lhtml" 用户菜单ID="1001" 用户菜单名称="用户登陆">用户登陆</超链接>
                            </描述列表项>
                            <描述列表项>
                                <超链接 菜单地址="" 用户菜单ID="1002" 用户菜单名称="基本资料">基本资料</超链接>
                            </描述列表项>
                            <描述列表项>
                                <超链接 链接地址="javascript:void(0);" 类名="注销登录">注销登录</超链接>
                            </描述列表项>
                        </描述列表>
                    </列表项>
                    <列表项 类名="lay-导航-项目 lay-超小屏隐藏">
                        <超链接 链接地址="http://www.baidu.com" 类名="lay-图标 lay-图标网站"></超链接>
                    </列表项>
                </无序列表>
            </区块>
            <!-- 侧 边 区 域 -->
            <区块 类名="lay-侧边栏 lay-黑色背景">
                <!-- 菜 单 顶 部 -->
                <区块 类名="lay-标志">
                    <!-- 图 标 -->
                    <图片框 类名="logo" />
                    <!-- 标 题 -->
                    <行内元素 类名="标题">Admin</行内元素>
                </区块>
                <!-- 菜 单 内 容 -->
                <区块 类名="lay-侧边栏-滚动">
                    <区块 id="侧边栏菜单">
                        <无序列表 类名="lay-导航 lay-导航-垂直" lay-收缩="所有">
                            <列表项 类名="lay-导航-项目 lay-导航-选中项目">
                                <超链接 链接地址="javascript:void(0);">
                                    <斜体文本 类名="lay-图标 lay-图标主页"></斜体文本>
                                    <行内元素>主页面板</行内元素>
                                    <斜体文本 类名="lay-图标 lay-图标下箭头 lay-导航-更多"></斜体文本>
                                </超链接>
                                <描述列表 类名="lay-导航-子集">
                                    <描述列表项 类名="lay-选中">
                                        <超链接 菜单地址="about:blank" 菜单id="01" 菜单标题="about:blank" 链接地址="javascript:void(0);">
                                            <行内元素 类名="lay-图标 lay-图标授权">&nbsp;about:blank</行内元素>
                                        </超链接>
                                    </描述列表项>

                                    <描述列表项>
                                        <超链接 菜单地址="@代码_xxx1.lhtml" 菜单id="04" 菜单标题="XX1列表" 链接地址="javascript:void(0);">
                                            <行内元素 类名="lay-图标 lay-图标人民币">&nbsp;X XX 1列表</行内元素>
                                        </超链接>
                                    </描述列表项>

                                    <描述列表项>
                                        <超链接 菜单地址="@代码_xxx2.lhtml" 菜单id="05" 菜单标题="XX2列表" 链接地址="javascript:void(0);">
                                            <行内元素 类名="lay-图标 lay-图标纸飞机">&nbsp;X X X2列表&nbsp;&#xe609;</行内元素>
                                        </超链接>
                                    </描述列表项>
                                </描述列表>
                            </列表项>

                            <列表项 类名="lay-导航-项目">
                                <超链接 链接地址="javascript:void(0);">
                                    <斜体文本 类名="lay-图标 lay-图标控制台"></斜体文本>
                                    <行内元素>工作空间</行内元素>
                                    <斜体文本 类名="lay-图标 lay-图标下箭头 lay-导航-更多"></斜体文本>
                                </超链接>
                                <描述列表 类名="lay-导航-子集">
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_首页信息.lhtml" 菜单id="01" 菜单标题="控制后台" 链接地址="javascript:void(0);">
                                            <行内元素>控制后台</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="http://www.bing.com" 菜单id="03" 菜单标题="必应" 链接地址="javascript:void(0);">
                                            <行内元素>必应</行内元素>
                                        </超链接>
                                    </描述列表项>
                                </描述列表>
                            </列表项>
                            <列表项 类名="lay-导航-项目">
                                <超链接 链接地址="javascript:void(0);">
                                    <斜体文本 类名="lay-图标 lay-图标组件"></斜体文本>
                                    <行内元素>基本元素</行内元素>
                                    <斜体文本 类名="lay-图标 lay-图标下箭头 lay-导航-更多"></斜体文本>
                                </超链接>
                                <描述列表 类名="lay-导航-子集">
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_表单元素.lhtml" 菜单id="05" 菜单标题="表单元素" 链接地址="javascript:void(0);">
                                            <行内元素>表单元素</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_按钮.lhtml" 菜单id="06" 菜单标题="按钮" 链接地址="javascript:void(0);">
                                            <行内元素>按钮</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_导航.lhtml" 菜单id="07" 菜单标题="导航/面包屑" 链接地址="javascript:void(0);">
                                            <行内元素>导航/面包屑</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_选项卡.lhtml" 菜单id="08" 菜单标题="选项卡" 链接地址="javascript:void(0);">
                                            <行内元素>选项卡</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_进度条.lhtml" 菜单id="09" 菜单标题="进度条" 链接地址="javascript:void(0);">
                                            <行内元素>进度条</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_面板.lhtml" 菜单id="10" 菜单标题="面板" 链接地址="javascript:void(0);">
                                            <行内元素>面板</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_徽章.lhtml" 菜单id="11" 菜单标题="徽章" 链接地址="javascript:void(0);">
                                            <行内元素>徽章</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_时间线.lhtml" 菜单id="12" 菜单标题="时间线" 链接地址="javascript:void(0);">
                                            <行内元素>时间线</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_静态表格.lhtml" 菜单id="13" 菜单标题="静态表格" 链接地址="javascript:void(0);">
                                            <行内元素>静态表格</行内元素>
                                        </超链接>
                                    </描述列表项>
                                </描述列表>
                            </列表项>
                            <列表项 类名="lay-导航-项目">
                                <超链接 链接地址="javascript:void(0);">
                                    <斜体文本 类名="lay-图标 lay-图标组件"></斜体文本>
                                    <行内元素>常用组件</行内元素>
                                    <斜体文本 类名="lay-图标 lay-图标下箭头 lay-导航-更多"></斜体文本>
                                </超链接>
                                <描述列表 类名="lay-导航-子集">
                                    <描述列表项 类名="">
                                        <超链接 菜单地址="@代码_数据表格.lhtml" 菜单id="14" 菜单标题="数据表格" 链接地址="javascript:void(0);">
                                            <行内元素>数据表格</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项 类名="">
                                        <超链接 菜单地址="@代码_日期与时间选择器.lhtml" 菜单id="40" 菜单标题="日期与时间选择器" 链接地址="javascript:void(0);">
                                            <行内元素>日期与时间选择器</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项 类名="">
                                        <超链接 菜单地址="@代码_消息通知.lhtml" 菜单id="16" 菜单标题="消息通知" 链接地址="javascript:void(0);">
                                            <行内元素>消息通知</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项 类名="">
                                        <超链接 菜单地址="@代码_分页.lhtml" 菜单id="20" 菜单标题="分页" 链接地址="javascript:void(0);">
                                            <行内元素>分页</行内元素>
                                        </超链接>
                                    </描述列表项>
                                </描述列表>
                            </列表项>
                            <列表项 类名="lay-导航-项目">
                                <超链接 链接地址="javascript:void(0);">
                                    <斜体文本 类名="lay-图标 lay-图标授权"></斜体文本>
                                    <行内元素>结果页面</行内元素>
                                    <斜体文本 类名="lay-图标 lay-图标下箭头 lay-导航-更多"></斜体文本>
                                </超链接>
                                <描述列表 类名="lay-导航-子集">
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_成功.lhtml" 菜单id="24" 菜单标题="成功页面" 链接地址="javascript:void(0);">
                                            <行内元素>成功页面1</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_失败.lhtml" 菜单id="25" 菜单标题="失败页面" 链接地址="javascript:void(0);">
                                            <行内元素>失败页面2</行内元素>
                                        </超链接>
                                    </描述列表项>
                                </描述列表>
                            </列表项>
                            <列表项 类名="lay-导航-项目">
                                <超链接 链接地址="javascript:void(0);">
                                    <斜体文本 类名="lay-图标 lay-图标哭泣"></斜体文本>
                                    <行内元素>错误页面</行内元素>
                                    <斜体文本 类名="lay-图标 lay-图标下箭头 lay-导航-更多"></斜体文本>
                                </超链接>
                                <描述列表 类名="lay-导航-子集">
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_403.lhtml" 菜单id="26" 菜单标题="403" 链接地址="javascript:void(0);">
                                            <行内元素>403</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_404.lhtml" 菜单id="27" 菜单标题="404" 链接地址="javascript:void(0);">
                                            <行内元素>404</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_500.lhtml" 菜单id="28" 菜单标题="500" 链接地址="javascript:void(0);">
                                            <行内元素>500</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_404公益页面.lhtml" 菜单id="29" 菜单标题="404(公益)" 链接地址="javascript:void(0);">
                                            <行内元素>404(公益)</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_404公益页面2.lhtml" 菜单id="39" 菜单标题="404(公益2)" 链接地址="javascript:void(0);">
                                            <行内元素>404(公益2)</行内元素>
                                        </超链接>
                                    </描述列表项>
                                </描述列表>
                            </列表项>
                            <列表项 类名="lay-导航-项目">
                                <超链接 链接地址="javascript:void(0);">
                                    <斜体文本 类名="lay-图标 lay-图标模板1"></斜体文本>
                                    <行内元素>常用页面</行内元素>
                                    <斜体文本 类名="lay-图标 lay-图标下箭头 lay-导航-更多"></斜体文本>
                                </超链接>
                                <描述列表 类名="lay-导航-子集">
                                    <描述列表项>
                                        <超链接 菜单地址="@代码_登陆.lhtml" 菜单id="35" 菜单标题="登录" 链接地址="javascript:void(0);">
                                            <行内元素>登录页面1</行内元素>
                                        </超链接>
                                    </描述列表项>
                                    <描述列表项>
                                        <超链接 菜单地址="about:blank" 菜单id="36" 菜单标题="空白页面" 链接地址="javascript:void(0);">
                                            <行内元素>空白页面</行内元素>
                                        </超链接>
                                    </描述列表项>
                                </描述列表>
                            </列表项>
                        </无序列表>
                    </区块>
                </区块>
            </区块>
            <!-- 视 图 页 面 -->
            <区块 类名="layui-body">
                <!-- 内 容 页 面 -->
                <区块 id="内容区域">
                    <区块 类名="lay-选项卡 lay-选项卡-简洁风" lay-允许关闭="真" lay-过滤器="选项卡">
                        <无序列表 类名="lay-选项卡-标题">
                            <列表项 类名="lay-选中 禁止删除" lay-id="01">空白页</列表项>
                        </无序列表>
                        <区块 类名="lay-选项卡-内容">
                            <区块 类名="lay-选项卡-项目 lay-显示">
                                <内联框架 id="01" 内联地址="about:blank"> </内联框架>
                            </区块>
                        </区块>
                    </区块>
                </区块>
            </区块>
            <!-- 页脚 -->
            <区块 类名="lay-尾部 lay-文本">Copyright © 2021-2023 后台管理系统</区块>
            <!-- 遮 盖 层 -->
            <区块 类名="遮盖层"></区块>
            <!-- 加 载 动 画 -->
            <区块 类名="加载主体">
                <!-- 动 画 对 象 -->
                <区块 类名="加载"></区块>
            </区块>
        </区块>
    </网页主体>
    <脚本>
        //在这里编写相关的JS代码
var 当前页面id = "01";
// 成功失败弹窗
function 成功失败弹窗(时间 = 2000, 是否成功 = true, 回调) {
    lay_popup.msg(
        是否成功 ? "成功!" : "失败!",
        {
            [lay_popup.config.icon]: 是否成功 ? 1 : 2,
            [lay_popup.config.time]: 时间
        },
        回调()
    );
}
// 缩小左侧菜单
$(".缩小菜单").on("@事件_点击", function () {
    if ($(".后端网页").hasClass("隐藏")) {
        $(this).find("@选择器_标签>a").removeClass("@选择器_类名>layui-icon-spread-left").addClass("@选择器_类名>layui-icon-shrink-right");
    } else {
        $(this).find("@选择器_标签>a").removeClass("@选择器_类名>layui-icon-shrink-right").addClass("@选择器_类名>layui-icon-spread-left");
    }
    $(".后端网页").toggleClass("隐藏");
});
// 刷新
function 刷新页面(id) {
    // 属性无法直接翻译
    $("@选择器_查找标签属性>iframe[id='" + id + "']").attr("src", $("@选择器_查找标签属性>iframe[id='" + id + "']").attr("src"));
    lay_popup.msg("已刷新!", {
        [lay_popup.config.time]: 500
    });
}
$(".刷新").on("@事件_点击", function (id) {
    刷新页面(当前页面id);
});
// 退出登录
function 退出登录() {
    // 退出交互

    //清空Cookie,让登陆凭证失效
    document.cookie.split(";").forEach(function (c) {
        document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
    });

    // 跳转登录页面
    location.href = "/login.html";
}
// 注销登录
$(".注销登录").on("@事件_点击", function () {
    成功失败弹窗(2000, true, 退出登录); //弹窗后 调用函数 退出登录()
});
// 侧边栏点击
let 已打开文件id = ["01"];
$("#侧边栏菜单 dd a").on("@事件_点击", function () {
    let 地址 = $(this).attr("菜单地址");
    let id = $(this).attr("菜单id");
    let 标题 = $(this).attr("菜单标题");
    if (地址) {
        当前页面id = id;
        if (!已打开文件id.includes(id)) {
            已打开文件id.push(id);
            lay_element.tabAdd("选项卡", {
                [lay_element.tab_config.title]: 标题,
                [lay_element.tab_config.content]: `<iframe id="${id}" src="${地址}"> </iframe>`,
                [lay_element.tab_config.id]: id
            });
        }
        lay_element.tabChange("选项卡", id);
    }
});
// 监听tab删除
lay_element.on("选项卡删除(选项卡)", function (数据) {
    let id = $(this).parents("@选择器_类名>li").attr("lay-id");
    let 序号 = 已打开文件id.findIndex((值) => 值 === id);
    已打开文件id.splice(序号, 1);
});
    </脚本>
</网页>