You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

122 lines
5.4 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>智云</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</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">-->
<!-- &lt;!&ndash; 移动端显示 &ndash;&gt;-->
<!-- <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>-->
<!--&lt;!&ndash; <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>&ndash;&gt;-->
<!--&lt;!&ndash; <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>&ndash;&gt;-->
<!--&lt;!&ndash; <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>&ndash;&gt;-->
<!--&lt;!&ndash; <li class="layui-nav-item">&ndash;&gt;-->
<!--&lt;!&ndash; <a href="javascript:;">nav groups</a>&ndash;&gt;-->
<!--&lt;!&ndash; <dl class="layui-nav-child">&ndash;&gt;-->
<!--&lt;!&ndash; <dd><a href="">menu 11</a></dd>&ndash;&gt;-->
<!--&lt;!&ndash; <dd><a href="">menu 22</a></dd>&ndash;&gt;-->
<!--&lt;!&ndash; <dd><a href="">menu 33</a></dd>&ndash;&gt;-->
<!--&lt;!&ndash; </dl>&ndash;&gt;-->
<!--&lt;!&ndash; </li>&ndash;&gt;-->
<!-- </ul>-->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="">Your Profile</a></dd>
<dd><a href="">Settings</a></dd>
<dd><a href="">Sign out</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"><a href="javascript:;" onclick="openUrl('courseList.html')">课程中心</a></li>
<li class="layui-nav-item"><a href="javascript:;" onclick="openUrl('applicationList.html')">应用中心</a></li>
<li class="layui-nav-item"><a href="javascript:;" onclick="openUrl('gameList.html')">大赛中心</a></li>
<li class="layui-nav-item"><a href="javascript:;" onclick="openUrl('textualList.html')">考证中心</a></li>
<li class="layui-nav-item"><a href="javascript:;" onclick="openUrl('academicList.html')">学术中心</a></li>
<li class="layui-nav-item"><a href="javascript:;" onclick="openUrl('knowledgeList.html')">知识分享</a></li>
<li class="layui-nav-item"><a href="javascript:;" onclick="openUrl('downloadList.html')">下载中心</a></li>
<li class="layui-nav-item"><a href="javascript:;" onclick="openUrl('inviteList.html')">就业中心</a></li>
<li class="layui-nav-item"><a href="javascript:;" onclick="openUrl('serveList.html')">服务相关</a></li>
</ul>
</div>
</div>
<div class="layui-body" id="center">
<!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="application/javascript">
function openUrl(url){
// alert(url);
//通过标签的id属性的属性值获取当前标签对象加载对应页面
$("#center").load(url);
}
</script>
</html>