HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WEB数据安全评测工具</title>
<link href="../src/assets/images/favicon.ico">
<link rel="stylesheet" href="../src/assets/lib/bootstrap.min.css">
<link rel="stylesheet" href="../src/assets/lib/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="../src/assets/css/style.css">
<script src="../src/assets/lib/jquery.js"></script>
<script src="../src/assets/lib/bootstrap.min.js"></script>
<script src="../src/assets/lib/bootstrap-datetimepicker.js"></script>
<script src="../src/assets/lib/echarts.min.js"></script>
</head>
<body>
<header>
WEB数据安全评测工具
</header>
<div class="box">
<ul class="left-nav">
<li>
<span class="home-span"><i class="home-icon"></i><a href="./index.html"> 首页</a></span>
</li>
<li>
<span><i class="moneyman-icon"></i> 资产管理<i class="arrow-down-icon"></i></span>
<ul>
<li class="asset-1"><a href="./asset-1.html">1</a></li>
<li class="asset-2"><a href="./asset-2.html">2</a></li>
</ul>
</li>
<li>
<span><i class="tm-icon"></i> 脱敏检测<i class="arrow-down-icon"></i></span>
<ul>
<li class="desen-1"><a href="./desen-1.html">1</a></li>
</ul>
</li>
<li>
<span><i class="cl-icon"></i> 策略管理<i class="arrow-down-icon"></i></span>
<ul>
<li class="strategy-1"><a href="./strategy-1.html">1</a></li>
</ul>
</li>
<li class="sysman">
<span><i class="sys-icon"></i> 系统管理<i class="arrow-down-icon"></i></span>
<ul>
<li class="system-1"><a href="./system-1.html">1</a></li>
<li class="system-2"><a href="./system-2.html">2</a></li>
</ul>
</li>
</ul>
<div class="content">
<h1>首頁index </h1>
<div id="main" style="width: 300px;height: 300px;"></div>
</div>
</div>
</body>
<script src="../src/assets/js/theme.js"></script>
<script>
$(function () {
$('.home-span').css('background', '#0d152a')
})
</script>
</html>
样式文件
$bg:#101a35;
$hover:#0d152a;
*{
padding: 0;
margin: 0;
}
html{
height: 100%;
body{
height: 100%;
ul{
list-style: none;
color: #fff;
box-sizing: border-box;
li{
list-style: none;
color: #fff;
box-sizing: border-box;
}
}
header{
height: 7%;
background:$bg;
color: #fff;
line-height: 60px;
font-size: 22px;
font-weight: 400;
text-indent: 1em;
}
.box{
height: 93%;
display: flex;
.left-nav{
height: 100%;
width: 16%;
background: $bg;
li{
span{
display: block;
padding-left: 20px;
height: 60px;
line-height: 60px;
&:hover{
background: $hover;
}
a{
text-decoration:none;
color: #fff;
}
}
}
ul{
display: none;
li{
padding-left: 60px;
height: 60px;
line-height: 60px;
&:hover{
background: $hover;
}
a{
text-decoration:none;
color: #fff;
}
}
}
}
.content{
width: 84%;
height: 100%;
// background: pink;
form{
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding-top: 20px;
label{
margin-left: 50px;
display: flex;
align-items: center;
span{
color: #606266;
font-size: 14px;
width: 80px;
font-weight: 500;
}
input{
width: 200px;
}
}
.btn{
height: 32px;
margin-left: 20px;
&.btn-query{
background: #409afa;
}
}
}
table{
width: 98%;
margin-top: 25px;
margin-left: 20px;
margin-right: 20px;
color: #333;
thead{
background: #e8e8e8;
}
tr{
&:hover{
background: #e8e8e8;
}
}
}
}
}
}
}
HTML中的theme.js
$(function () {
$('.left-nav>li>span').click(function () {
//console.log($(this).parent().parent().find("[class^='arrow']"))
if ($(this).children("i[class^='arrow']").attr('class')=='arrow-down-icon') {
$(this).parent().parent().find("span").css('background', '#101a35')
$(this).css('background', '#0d152a')
$(this).parent().parent().find("[class^='arrow']").attr('class', 'arrow-down-icon')
$(this).children("i[class^='arrow']").attr('class', 'arrow-top-icon')
}else{
$(this).parent().parent().find("[class^='arrow']").attr('class', 'arrow-down-icon')
$(this).children("i[class^='arrow']").attr('class', 'arrow-down-icon')
}
console.log($(this))
$('.left-nav ul').slideUp()
console.log($('.sysman ul').css('display'))
if ($(this).parent().children('ul').css('display') == 'none') {
$(this).parent().children('ul').slideDown()
} else {
$(this).parent().children('ul').slideUp()
}
})
$('.left-nav li ul li').click(function(){
var that=this
setTimeout(function(){
$(that).children('a')[0].click()
},500)
})
})
极客观点
项目管理
HarmonyOS
chrome
建议上传demo