updagte style
This commit is contained in:
parent
d269d45c37
commit
4c6c9b1835
85
css/demo.css
85
css/demo.css
|
|
@ -33,7 +33,7 @@ body{
|
|||
}
|
||||
/* .div-a{ position: fixed;width:400px;height:536px;padding:10px;z-index: 1;background-color: rgba(0,0,0,0.3);}
|
||||
.div-b{ width:400px;height:536px;padding:5px;color:rgb(255, 255, 255);position: relative;} */
|
||||
.div-a{ position: fixed;width:400px;height:100%;z-index: 1;background-color: rgba(0,0,0,0.3);}
|
||||
/* .div-a{ position: fixed;height:100%;z-index: 1;background-color: rgba(0,0,0,0.3);} */
|
||||
/* .div-b{ width:400px;height:536px;padding:5px;color:rgb(255, 255, 255);position: relative;} */
|
||||
.div-a{
|
||||
position: fixed;
|
||||
|
|
@ -46,15 +46,22 @@ body{
|
|||
.div-a.active{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.div-a.active .div-c{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.div-b,
|
||||
.div-c{
|
||||
color:rgb(255, 255, 255);
|
||||
}
|
||||
.div-b{ height: 60%; }
|
||||
.div-b{
|
||||
height: 60%;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.div-b > div{
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.div-c{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -67,6 +74,15 @@ body{
|
|||
content: '';
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
|
||||
.div-a.active .div-c{
|
||||
display: none;
|
||||
}
|
||||
.div-a.active .div-b{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.div-video{
|
||||
height: 60%;
|
||||
/* background: pink; */
|
||||
|
|
@ -78,23 +94,16 @@ body{
|
|||
.screen-btn{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
top: 60px;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-area{
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.show_detail{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.more_icon{
|
||||
display: inline-block;
|
||||
|
|
@ -108,28 +117,31 @@ body{
|
|||
transform: rotate(90deg);
|
||||
font-size: 20px !important;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.detail_info{
|
||||
/* display: block; */
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
padding: 10px 0;
|
||||
right: 40px;
|
||||
top: -10px;
|
||||
/* padding: 10px 0; */
|
||||
left: 40px;
|
||||
top: 6px;
|
||||
border-radius: 5px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.detail_info::before{
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 18px;
|
||||
right: 100%;
|
||||
top: 12px;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 8px solid transparent;
|
||||
border-left-color: #fff;
|
||||
border: 6px solid transparent;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
.info_txt{
|
||||
width: 50px;
|
||||
|
|
@ -139,6 +151,7 @@ body{
|
|||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: black;
|
||||
transition: color .3s;
|
||||
}
|
||||
.info_txt:hover{
|
||||
|
|
@ -149,14 +162,18 @@ body{
|
|||
}
|
||||
|
||||
.search-prov{
|
||||
position: relative;
|
||||
top: 5px;
|
||||
font-size: 0;
|
||||
margin-right: 10px;
|
||||
/* margin-top: 5px; */
|
||||
}
|
||||
|
||||
.search-prov,
|
||||
.lat_lon_sec{
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
/* display: block; */
|
||||
/* margin-top: 10px; */
|
||||
}
|
||||
|
||||
.search_input,
|
||||
|
|
@ -184,32 +201,44 @@ body{
|
|||
width: 150px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.search_icon{
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
/* box-shadow: 5px 5px 10px #eee; */
|
||||
}
|
||||
|
||||
.search_input_common{
|
||||
position: relative;
|
||||
top: -1px;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
width: 50px;
|
||||
/* padding: 5px 10px; */
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.lat_lon_search{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
width: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
line-height: 42px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,163 @@
|
|||
.fixed-left{
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
padding-top: 50px;
|
||||
/* width: 400px; */
|
||||
/* background: green; */
|
||||
z-index: 10;
|
||||
/* opacity: .3; */
|
||||
z-index: 40;
|
||||
transition: width .3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fixed-left.collpased{
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.fixed-left::before{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.fixed-left.active{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left_echart{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fixed-left.active .left_echart{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background: pink; */
|
||||
}
|
||||
.fixed-left.active::before{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
.video_img{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.map_header{
|
||||
display: flex;
|
||||
position: fixed;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(78, 173, 222, 1);
|
||||
z-index: 50;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.logo_txt{
|
||||
margin-left: 15px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.logo_txt .collpase-icon{
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user_info{
|
||||
padding-right: 30px;
|
||||
font-size: 0;
|
||||
}
|
||||
.user_info .info-item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-item .user_img{
|
||||
/* display: inline-block; */
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
top: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.info-item .user_nick{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.drop-down{
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.drop-down::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 50%;
|
||||
right: -15px;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #fff;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.drop-down-list{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
right: -20px;
|
||||
background: #fff;
|
||||
padding: 10px 0;
|
||||
line-height: 24px;
|
||||
min-width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.drop-down-list::before{
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
border: 5px solid transparent;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.drop-down-item{
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
color: black;
|
||||
transition: color .3s;
|
||||
}
|
||||
|
||||
.drop-down-item:hover{
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
|
||||
181
demo.html
181
demo.html
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>map</title>
|
||||
<link href="./css/demo.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./css/flexleft.css">
|
||||
<link href="./css/slider.css" rel="stylesheet">
|
||||
<link href="./font/iconfont.css" rel="stylesheet">
|
||||
<!-- 引入 echarts.js -->
|
||||
|
|
@ -15,14 +16,117 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="div-a">
|
||||
<!--
|
||||
增加点:
|
||||
1. 头部文字与 用户信息
|
||||
2. 加一个语音识别
|
||||
3.
|
||||
|
||||
-->
|
||||
<!-- <div class="div-a"> -->
|
||||
<!-- 放大或缩小左侧图层-->
|
||||
<!-- <div class="screen-btn screen-open" id="btn">
|
||||
<span class="screen_icon iconfont icon-kuoda"></span>
|
||||
</div> -->
|
||||
<!-- <div class="div-b" id="mainGraph">知识图谱</div> -->
|
||||
<!-- 视频与图片 -->
|
||||
<!-- <div class="div-c">
|
||||
<div class="div-video">
|
||||
<video width="100%" height="100%" controls>
|
||||
<source src="movie.mp4" type="video/mp4">
|
||||
<source src="movie.ogg" type="video/ogg">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<div class="slider slider_one_big_picture">
|
||||
<div>
|
||||
<img src="./image/1.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/2.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/3.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/4.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/5.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/6.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/7.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/8.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/9.jpg" />
|
||||
</div>
|
||||
<div class="next_button"></div>
|
||||
<div class="prev_button"></div>
|
||||
<div class="nav_indicators"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- </div> -->
|
||||
<div class="map_header">
|
||||
<h2 class="logo_txt">
|
||||
<span class="iconfont icon-zhankai collpase-icon"></span>
|
||||
基于知识图谱的兵要信息平台
|
||||
</h2>
|
||||
<ul class="user_info">
|
||||
<li class="info-item">
|
||||
<div class="lat_lon_sec">
|
||||
<input
|
||||
onkeyup="this.value=this.value.replace(/[^\d.]/g, '')"
|
||||
class="search_input_common lon" placeholder="经度" />
|
||||
<input
|
||||
onkeyup="this.value=this.value.replace(/[^\d.]/g, '')"
|
||||
class="search_input_common lat" placeholder="纬度" />
|
||||
<span class="iconfont icon-search lat_lon_search"></span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-item">
|
||||
<div class="search-prov">
|
||||
<input class="search_input" placeholder="请输入地点" />
|
||||
<span class="search_icon iconfont icon-search">
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="info-item">
|
||||
<!-- 搜索,径纬度 区域 -->
|
||||
<div class="search-area">
|
||||
<div class="show_detail">
|
||||
<span class="iconfont icon-gengduo more_icon"></span>
|
||||
<ul class="detail_info">
|
||||
<li class="info_txt" data-key="prov">地点</li>
|
||||
<li class="info_txt" data-key="lon">经纬度</li>
|
||||
<li class="info_txt" data-key="lon">语音</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-item drop-down">
|
||||
<img class="user_img" src="./image/3.jpg" />
|
||||
<span class="user_nick">
|
||||
admin
|
||||
</span>
|
||||
<ul class="drop-down-list">
|
||||
<li class="drop-down-item">退出</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="fixed-left">
|
||||
<div class="screen-btn screen-open" id="btn">
|
||||
<span class="screen_icon iconfont icon-kuoda"></span>
|
||||
</div>
|
||||
<div class="div-b" id="mainGraph">知识图谱</div>
|
||||
<!-- 视频与图片 -->
|
||||
<div class="div-c">
|
||||
<div class="video_img">
|
||||
<div class="div-video">
|
||||
<video width="100%" height="100%" controls>
|
||||
<source src="movie.mp4" type="video/mp4">
|
||||
|
|
@ -63,36 +167,18 @@
|
|||
<div class="nav_indicators"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 搜索,径纬度 区域 -->
|
||||
<div class="search-area">
|
||||
<div class="show_detail">
|
||||
<span class="iconfont icon-gengduo more_icon"></span>
|
||||
<ul class="detail_info">
|
||||
<li class="info_txt" data-key="prov">地点</li>
|
||||
<li class="info_txt" data-key="lon">经纬度</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="search-prov">
|
||||
<input class="search_input" placeholder="请输入地点" />
|
||||
<span class="search_icon iconfont icon-search"></span>
|
||||
</div>
|
||||
<div class="lat_lon_sec">
|
||||
<input
|
||||
onkeyup="this.value=this.value.replace(/[^\d.]/g, '')"
|
||||
class="search_input_common lon" placeholder="经度" />
|
||||
<input
|
||||
onkeyup="this.value=this.value.replace(/[^\d.]/g, '')"
|
||||
class="search_input_common lat" placeholder="纬度" />
|
||||
<span class="iconfont icon-search lat_lon_search"></span>
|
||||
</div>
|
||||
|
||||
<div class="left_echart" id="mainGraph"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
||||
|
||||
<div id="main" style="width: 100%;height:100vh;"></div>
|
||||
|
||||
<script type="text/javascript" src="./js/jQuery-1.8.3.min.js"></script>
|
||||
<script type="text/javascript" src="./js/jquery.easy_slides.js"></script>
|
||||
<script type="text/javascript" src="./js/demo.js"></script>
|
||||
<script type="text/javascript">
|
||||
// 基于准备好的dom，初始化echarts实例，地图
|
||||
var myChart = echarts.init(document.getElementById('main'));
|
||||
|
|
@ -1368,26 +1454,6 @@
|
|||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
var oBtn = document.querySelector('#btn');
|
||||
oBtn.addEventListener('click', function () {
|
||||
var oText = this.innerHTML;
|
||||
var oParent = this.parentNode;
|
||||
if (oParent.classList.contains('active')) {
|
||||
oParent.classList.remove('active');
|
||||
$('.screen_icon').addClass('icon-kuoda').removeClass('icon-suoxiao');
|
||||
$('.search-area').show();
|
||||
} else {
|
||||
oParent.classList.add('active');
|
||||
$('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
|
||||
$('.search-area').hide();
|
||||
}
|
||||
}, false);
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$('.slider_one_big_picture').EasySlides({
|
||||
|
|
@ -1404,17 +1470,19 @@
|
|||
$('.search_input').removeClass('active');
|
||||
});
|
||||
|
||||
// 搜索
|
||||
$('.more_icon').on('mouseover', function () {
|
||||
$('.detail_info').show();
|
||||
}).on('mouseout', function () {
|
||||
var timer = setTimeout(function () {
|
||||
$('.detail_info').on('mouseover', function () {
|
||||
$('.detail_info').show();
|
||||
}).on('mouseout', function () {
|
||||
$('.detail_info').hide();
|
||||
});
|
||||
}, 500);
|
||||
$('.detail_info').hide();
|
||||
$('.detail_info').hide();
|
||||
}, 300);
|
||||
$('.detail_info').on('mouseover', function () {
|
||||
clearTimeout(timer);
|
||||
$('.detail_info').show();
|
||||
}).on('mouseout', function () {
|
||||
$('.detail_info').hide();
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1468,6 +1536,11 @@
|
|||
$('.lat_lon_search').on('click', function () {
|
||||
latOrLonSearch();
|
||||
})
|
||||
|
||||
// 左侧滑屏结束后调用该事件，重新渲染知识图谱
|
||||
$('.fixed-left').on('transitionend', function () {
|
||||
console.log('滑屏结束时，调用渲染知识图谱');
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -40,6 +40,18 @@
|
|||
<div class="code-name">&#xe7ba;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">展开</div>
|
||||
<div class="code-name">&#xe771;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">收起</div>
|
||||
<div class="code-name">&#xe772;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">缩小</div>
|
||||
|
|
@ -120,6 +132,24 @@
|
|||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zhankai"></span>
|
||||
<div class="name">
|
||||
展开
|
||||
</div>
|
||||
<div class="code-name">.icon-zhankai
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shouqi"></span>
|
||||
<div class="name">
|
||||
收起
|
||||
</div>
|
||||
<div class="code-name">.icon-shouqi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-suoxiao"></span>
|
||||
<div class="name">
|
||||
|
|
@ -183,6 +213,22 @@
|
|||
<div class="code-name">#icon-gengduo</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zhankai"></use>
|
||||
</svg>
|
||||
<div class="name">展开</div>
|
||||
<div class="code-name">#icon-zhankai</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shouqi"></use>
|
||||
</svg>
|
||||
<div class="name">收起</div>
|
||||
<div class="code-name">#icon-shouqi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-suoxiao"></use>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@font-face {font-family: "iconfont";
|
||||
src: url('iconfont.eot?t=1575968442554'); /* IE9 */
|
||||
src: url('iconfont.eot?t=1575968442554#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQIAAsAAAAACJQAAAO5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqEOINsATYCJAMUCwwABCAFhG0HTBt0B8iehbHzIjQqeeZs2X+PAP7Yey9+roMiMS1SR+WRNpCBbToeroEmPqsQ2N+3aQ9+aqQudE1q6jT5UGJkgKxoUtHjmvqtJqddv5qeUn/n+d8PePy9qhlj4TyLxWW9/7P2smAAwwEK0OxeXLJWpCDeRTybDP4n8HUCqvqtQSznldSAvUw9LyCc8BwD9pGAXDAelAXFjFszhAuwUY5D5CiAc+f3wx9EBXsQFRKob1rfy1VDxufq95HZmpZkBnN3MbB3kTABZMJRZmIH8hoTkKrcqzALlLV9kc81E9+3QtpqbCn7yqqqSDL5x4uEIqiOWqDO+7ItQ4Zf2kgEWRlAoCPwdb8p4pjuoooKHgC8IHVgR5REsdvRQWUEBH5lc93uZS8WiPn5utnZmrm52pGF8n1etedGnlgMSeHCQr0hc8fm2+OWiZEx82iHS10QTVtmLpWoYe/T5wlkeTLyyA/qry2leUWN8tRfP6Q2DJ8/fMSnnjr92PJE6TTideockGcPhx/7EzVnpWzycqkfuTcgD3cn9UcHpK8eHXvUkrSj5N0HX2rYZduz0d3vv28rbikwprirCJ50CxX0r92S9ebug9q0RynVRwbQjVvXv3vwxu0Bsp9Eg2eIGBKzEPm4OsOlIKTImEqHigZYayj2Z1wyIKMxz7WIfixsX5KOO3zaPJIDYuJjqCP//oVG10Z52PccOZodnx0QG+Xv+emT+nV0RXI126K6dc9fH01jRYrouOijPSe9y1AyFaBucn4EoYzzyJSFSNdawuP/v6NlnwobAP7LBDIDkE6JOes/AgStHOwDeJ+r5oxf7S4pv+2VCoBnL/fBXB01Nz9FVBk9bl+GAgKLgqvBQpYwg/m/gzRaMAtxydDTxR9zh2ZvunG2DWK2UmVtAUQlfZCUDRAzdQIKakxCUdkcVI3Lv7tGCxESsgMwpo9A0OgKRPWeIGk0RszU11DQ7jMUNQYEVRvB45E1hgJPZYuYkbGa7txI8yrBwOphmXLHqzBn0jFiGHeUdViU+DIdGRYRb+djAxa7uEJax0XJMkuzoqCn88jbsE4n0EZR0GCVHNYly8ak8HA265vCVIIeKEtEGEOGqdE6bUTjqQgMWGu9jEr8fBWMY6LDEAuWyvp1MJGE354WKUxEBWK+w1Bp6VT2S9bhRJHJWOoslkigR8uDGKbTGgKaMfuYBqYiC9PVoGaUJBxXsVUdYcO79Od4A6rUzxUCSSBCQdgQtlA8xYyo6rLjsIFTmwQ7yTi4gWcEG61JUDMAAAAA') format('woff2'),
|
||||
url('iconfont.woff?t=1575968442554') format('woff'),
|
||||
url('iconfont.ttf?t=1575968442554') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('iconfont.svg?t=1575968442554#iconfont') format('svg'); /* iOS 4.1- */
|
||||
src: url('iconfont.eot?t=1576034900220'); /* IE9 */
|
||||
src: url('iconfont.eot?t=1576034900220#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATUAAsAAAAACjAAAASGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDTgqHEIVyATYCJAMcCxAABCAFhG0HXxu5CMgusG3Yo5iAAtrKEQCAhQfKh74z38xs4oPg1tnWSQE4X5W+bv/XNCUWslGVKKuAtynWefdzQOkBCTN6/ibc3qTb1Hh4u73f3dKLW4aJZ1F2WxxgGnBUyO2ksEjA/v+fP2a61CrLZ98GNLWssuFoPE4eDdeXzWcnGKQnRreIZ5NLBSfnu/g8EICUJXdkPt49QhuH6wm0bZZB0E45cDVUQmwWllybQU4IiLvp9AaA2e7nyQ/fEAOUIIG/KHs9KFg3N/UxphiG8qSAgs4HYH4TwADuAA7IXhroVgsFd4x0m6uLB7uLxSja3NUh6l71seGBVgqEHs0V+aTkwqBJ/g9PiGA4FEgPbpADsVgvvHtKhUAAn9wRCEEdgoCAugcBA3UvAg7UxxyggBcd1wToAJkAsjCiv4E+B/kiSke5hMe15ZpyZTUzh4+MLiwdzz8mjx4VPniQ//Bhgepx1lKDgq2q03xnnvr4cZG0dMPoQ7f426qbihvVnviYdo+//8Eq5aZl/PLNRjoLNy5VLNkgHfG9jd/upLNxq2KL/SjlKijTUOGvrnsuN4AeG42KFvM9JBu5o16+Nt5vg2HhIr5PqjTctI0w/rTqpAmKbsNTOOfLNl5wQjric9uq1UZF0k2n+NP9fAYbt3ZYe0J5ypTk//SV452YJnSJo19JxzRly5kXT669l33kGnrk+Jf8xsn4uNqR778PcQc54+OOcPGDDrLkV48xsf9HjhdEngzPWz2V7T/4bVZP239oKp1CURqkKWmuFz6PW7RW8jhVdUUhuyCppEU9o2hYD4naqdPt8H01O37NHrffmX1njPtrjdUM/nEz+4TbiezZ2TfcbmQHf2864X7C8I9m+5/pk3ZNVfhl1aIyubG8tLysHDTouuWXfsP9huFvzTHT5TGawdURgJlyz5KLyucbVeqFmfkH+UtX//tn41fgq2dvWb0mLijOLMDXVP/Dh/qX6RFh7XS2k7z+r/cDN+s4foF+a2o2GGayMGmspImZECLLkmj4gI92AdH7/29N03tiHAAwjCNMAQCsVh4O88on9oeZOl11GMjSClT9Kw/B9XMYWzUK/y2W/VLTzwwn5qOivZLOJP4+ggT+g7aMGsyanZo7RXmjUrJ6JehzipZJkWBHylGAVIwB/76Irld0RoPRFCYkZhADJWIBjJg9liO6g4CMPwiJRYGUm6SbZfT0qiFZAsDVZAaEtt1AaToNjLabWI74EgQMfQYh7WAgVRh695RxjJZuXMgUs8LakdhSJ74u3XHXt9+zkbgUJtWO98xhZKXRx9M7Wz6xzyHFBX2DxrK/X8fGXvEwkb2MXVewu1ds1uJpc398XXl5NZZ90rSuy4OuOCFGYkxBtQqohUb4dDM51s19/z1mSLhIWDN0K/6MhSLW6siHJ+8W2JPBbzX0XHr7pAxL/ZjTocZ5q/CgRPQxVxQE6i7fZ2Oa2FRzj9zViheOamxrmI5v8l7nKQAp/sWioIQRjgiIkIiIGMLKFGpmq4l9QyXSGmWS75DV7DMlCaxWXyK5RdJoS0QRAAAA') format('woff2'),
|
||||
url('iconfont.woff?t=1576034900220') format('woff'),
|
||||
url('iconfont.ttf?t=1576034900220') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('iconfont.svg?t=1576034900220#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -23,6 +23,14 @@
|
|||
content: "\e7ba";
|
||||
}
|
||||
|
||||
.icon-zhankai:before {
|
||||
content: "\e771";
|
||||
}
|
||||
|
||||
.icon-shouqi:before {
|
||||
content: "\e772";
|
||||
}
|
||||
|
||||
.icon-suoxiao:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -19,6 +19,20 @@
|
|||
"unicode": "e7ba",
|
||||
"unicode_decimal": 59322
|
||||
},
|
||||
{
|
||||
"icon_id": "32852889",
|
||||
"name": "展开",
|
||||
"font_class": "zhankai",
|
||||
"unicode": "e771",
|
||||
"unicode_decimal": 59249
|
||||
},
|
||||
{
|
||||
"icon_id": "32852890",
|
||||
"name": "收起",
|
||||
"font_class": "shouqi",
|
||||
"unicode": "e772",
|
||||
"unicode_decimal": 59250
|
||||
},
|
||||
{
|
||||
"icon_id": "46750641",
|
||||
"name": "缩小",
|
||||
|
|
|
|||
|
|
@ -26,6 +26,12 @@ Created by iconfont
|
|||
<glyph glyph-name="gengduo" unicode="" d="M795.2824707 299.46020508000004c-48.9440918 0-87.50610352 37.07885742-87.50610351 84.53979492s40.04516602 84.53979492 87.50610351 84.53979492c48.9440918 0 87.50610352-37.07885742 87.50610352-84.53979492s-40.04516602-84.53979492-87.50610352-84.53979492z m-283.2824707 0c-48.9440918 0-87.50610352 37.07885742-87.50610352 84.53979492s40.04516602 84.53979492 87.50610352 84.53979492c48.9440918 0 87.50610352-37.07885742 87.50610352-84.53979492s-38.56201172-84.53979492-87.50610352-84.53979492z m-283.2824707 0C181.2565918 299.46020508000004 141.21142578 338.0222168 141.21142578 384s40.04516602 84.53979492 87.50610352 84.53979492c48.9440918 0 87.50610352-37.07885742 87.50610351-84.53979492s-38.56201172-84.53979492-87.50610351-84.53979492z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="zhankai" unicode="" d="M51.2 691.2a51.2 51.2 0 1 0 0 102.4h911.2064a51.2 51.2 0 1 0 0-102.4H51.2zM51.2-25.6a51.2 51.2 0 0 0 0 102.4h911.2064a51.2 51.2 0 1 0 0-102.4H51.2zM51.2 332.8a51.2 51.2 0 0 0 0 102.4h501.6064a51.2 51.2 0 1 0 0-102.4H51.2zM948.8384 394.0352l-199.8336 139.8784A20.48 20.48 0 0 1 716.8 517.12v-279.7568a20.48 20.48 0 0 1 32.256-16.7424l199.7824 139.8784a20.48 20.48 0 0 1 0 33.536z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="shouqi" unicode="" d="M51.2 691.2a51.2 51.2 0 1 0 0 102.4h911.2064a51.2 51.2 0 1 0 0-102.4H51.2zM51.2-25.6a51.2 51.2 0 0 0 0 102.4h911.2064a51.2 51.2 0 1 0 0-102.4H51.2zM460.8 332.8a51.2 51.2 0 0 0 0 102.4h501.6064a51.2 51.2 0 1 0 0-102.4H460.8zM59.904 394.0352l199.8336 139.8784a20.48 20.48 0 0 0 32.256-16.7936v-279.7568a20.48 20.48 0 0 0-32.256-16.7424L59.9552 360.448a20.48 20.48 0 0 0 0 33.536z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="suoxiao" unicode="" d="M601.6 409.6h-1.536a63.168 63.168 0 0 0-22.336 4.608 63.936 63.936 0 0 0-40.064 57.856V787.2a64 64 0 0 0 128 0v-159.104L914.688 877.248a64 64 0 0 0 90.496-90.496L756.096 537.6H915.2a64 64 0 0 0 0-128H601.6zM64-128a64 64 0 0 0-45.248 109.248l249.152 249.216H108.8a64 64 0 0 0 0 128H423.936a63.36 63.36 0 0 0 22.4-4.672 64 64 0 0 0 40.064-57.792V-19.2a64 64 0 0 0-128 0v159.168l-249.152-249.216A63.808 63.808 0 0 0 64-128z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
* @Description:
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-12-11 09:17:17
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-12-11 11:50:01
|
||||
*/
|
||||
$(document).ready(function () {
|
||||
$('#btn').on('click', function () {
|
||||
|
||||
if ($('.fixed-left').hasClass('active')) {
|
||||
// 改变样式
|
||||
$('.fixed-left').removeClass('active');
|
||||
$('.video_img, .search-area').show();
|
||||
$('.screen_icon').addClass('icon-kuoda').removeClass('icon-suoxiao');
|
||||
|
||||
// 重新加载知识图谱
|
||||
|
||||
} else {
|
||||
$('.fixed-left').addClass('active');
|
||||
$('.video_img, .search-area').hide();
|
||||
$('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
|
||||
}
|
||||
});
|
||||
|
||||
// 用户登录信息
|
||||
$('.drop-down').on('mouseover', function () {
|
||||
$('.drop-down-list').show();
|
||||
}).on('mouseout', function () {
|
||||
var timer = setTimeout(function () {
|
||||
$('.drop-down-list').hide();
|
||||
}, 300);
|
||||
$('.drop-down-list').on('mouseover', function () {
|
||||
clearTimeout(timer);
|
||||
$('.drop-down-list').show();
|
||||
}).on('mouseout', function () {
|
||||
$('.drop-down-list').hide();
|
||||
});
|
||||
});
|
||||
|
||||
// 收缩左侧侧边栏
|
||||
$('.collpase-icon').on('click', function() {
|
||||
if ($('.fixed-left').hasClass('collpased')) {
|
||||
$('.fixed-left').removeClass('collpased');
|
||||
$('.map_header').css({left: 0});
|
||||
// $('.collpase-icon').remove('icon-zhankai').add('icon-shouqi');
|
||||
// $('.collpase-icon').addClass('icon-zhankai').remove('icon-shouqi');
|
||||
} else {
|
||||
$('.fixed-left').addClass('collpased');
|
||||
$('.map_header').css({left: '400px'});
|
||||
// $('.collpase-icon').remove('icon-shouqi').add('icon-zhankai');
|
||||
}
|
||||
|
||||
if ($(this).hasClass('icon-zhankai')) {
|
||||
$(this).removeClass('icon-zhankai').addClass('icon-shouqi')
|
||||
} else {
|
||||
$(this).removeClass('icon-shouqi').addClass('icon-zhankai')
|
||||
}
|
||||
// $(this).hasClass('icon-zhankai')
|
||||
// ? $(this).removeClass('icon-zhankai').addClass('icon-shouqi')
|
||||
// : $(this).removeClass('icon-shouqi').addClass('icon-zhankai)
|
||||
})
|
||||
});
|
||||
Loading…
Reference in New Issue