加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
mainpage_school1-back.html 6.30 KB
一键复制 编辑 原始数据 按行查看 历史
dearmite 提交于 2021-11-17 21:15 . 把他的菜单串起来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 管理界面大布局示例 - Layui</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, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式,使用时可以不引用-->
<link href="./css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="./css/base.css?r=2021090711483762" />
<link rel="stylesheet" href="./css/layui.css?t=1632659138211" media="all">
<style>
/* 移动端 */
@media screen and (max-width: 768px) {
.layui-layout-admin .layui-layout-left,
.layui-layout-admin .layui-body,
.layui-layout-admin .layui-footer{left: 0;}
.layui-layout-admin .layui-side{left: -300px;}
}
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">student score manage</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>
</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="./img/index_user.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-darkgray" >
<div class="htmleaf-container">
<ul class="menu">
<li class="list active"><a href="#">school</a>
<ul class="items">
<li > <a href="mainpage_school1.html" > school score </a></li>
<li class="active"> <a href="mainpage_school2.html" > School score chart </a></li>
<li class=""> <a href="mainpage_school3.html" > score trend </a></li>
</ul>
</li>
<li class="list"><a href="#">class</a>
<ul class="items">
<li class=""> <a href="mainpage_class1.html" > class score </a></li>
<li class=""> <a href="mainpage_class2.html" > class score chart </a></li>
<li class=""> <a href="mainpage_class3.html" > class trend </a></li>
</ul>
</li>
<li class="list "><a href="#">student </a>
<ul class="items">
<li ><a href="mainpage_stu1.html"> student list</a></li>
<li ><a href="mainpage_stu2.html"> subject score </a></li>
<li><a href="mainpage_stu3.html"> score trend</a></li>
<li><a href="mainpage_stu4.html"> score analyse</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="layui-body layui-bg-gray">
<div id="search">
</div>
<div>
<li class="layui-btn layui-btn-normal"> school English score </li>
</div>
<!-- 内容主体区域 -->
<div id="chart" style="width: 550px"></div><br>
<div id="chart2" style="background-color: #FFFFFF;"><img src="./img/chart1.jpg"</div>
</div>
<div class="layui-footer">
Copyright 2021, gust
</div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./core/js/layui/layui.js" charset="utf-8"></script>
<script>
var length=12;//此处为动态数据的长度
var hei=(length*40)+'px';//动态获取图表高度
$("#chart").css('height',hei);//动态设置图表高度
//showchart(); //图表执行
var myChart = echarts.init(document.getElementById("chart"));
//var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['classA', 'classB', 'classC', 'classD', 'classE', 'classF', 'classG']
},
series: [
{
name: 'choise',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [32, 30, 31, 34, 39, 33, 32]
},
{
name: 'answer',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [52, 53, 50, 51,52, 53, 50]
}
]
};
option && myChart.setOption(option);
// var myChart2 = echarts.init(document.getElementById("chart2"));
// option && myChart2.setOption(option);
$(function() {
// $("#search").load("search_school.html .searchFormBox");
var list = document.querySelectorAll('.list');
function accordion(e) {
e.stopPropagation();
if (this.classList.contains('active')) {
this.classList.remove('active');
} else
if (this.parentElement.parentElement.classList.contains('active')) {
this.classList.add('active');
} else
{
for (i = 0; i < list.length; i++) {
list[i].classList.remove('active');
}
this.classList.add('active');
}
}
for (i = 0; i < list.length; i++) {
list[i].addEventListener('click', accordion);
}
})
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化