p85126437
/
geo_info_platform
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updagte style

This commit is contained in:
tangjiang 2019-12-11 11:51:00 +08:00
parent d269d45c37
commit 4c6c9b1835
13 changed files with 492 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
css/demo.css
View File

@ -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-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-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-b{ width:400px;height:536px;padding:5px;color:rgb(255, 255, 255);position: relative;} */
.div-a{ .div-a{
position: fixed; position: fixed;
@ -46,15 +46,22 @@ body{
.div-a.active{ .div-a.active{
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 100%;
} }
.div-a.active .div-c{
display: none;
}
.div-b, .div-b,
.div-c{ .div-c{
color:rgb(255, 255, 255); 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{ .div-c{
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@ -67,6 +74,15 @@ body{
content: ''; content: '';
border-top: 1px solid #fff; border-top: 1px solid #fff;
} }
.div-a.active .div-c{
display: none;
}
.div-a.active .div-b{
width: 100%;
height: 100%;
}
.div-video{ .div-video{
height: 60%; height: 60%;
/* background: pink; */ /* background: pink; */
@ -78,23 +94,16 @@ body{
.screen-btn{ .screen-btn{
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 10px; top: 60px;
color: #fff; color: #fff;
z-index: 10; z-index: 10;
cursor: pointer; cursor: pointer;
color: #fff; color: #fff;
} }
.search-area{
position: fixed;
right: 20px;
top: 20px;
z-index: 10;
text-align: right;
}
.show_detail{ .show_detail{
position: relative; position: relative;
top: 2px;
} }
.more_icon{ .more_icon{
display: inline-block; display: inline-block;
@ -108,28 +117,31 @@ body{
transform: rotate(90deg); transform: rotate(90deg);
font-size: 20px !important; font-size: 20px !important;
cursor: pointer; cursor: pointer;
color: black;
} }
.detail_info{ .detail_info{
/* display: block; */
display: none; display: none;
position: absolute; position: absolute;
background: #fff; background: #fff;
padding: 10px 0; /* padding: 10px 0; */
right: 40px; left: 40px;
top: -10px; top: 6px;
border-radius: 5px; border-radius: 5px;
z-index: 50;
} }
.detail_info::before{ .detail_info::before{
position: absolute; position: absolute;
left: 100%; right: 100%;
top: 18px; top: 12px;
content: ''; content: '';
width: 0; width: 0;
height: 0; height: 0;
border: 8px solid transparent; border: 6px solid transparent;
border-left-color: #fff; border-right-color: #fff;
} }
.info_txt{ .info_txt{
width: 50px; width: 50px;
@ -139,6 +151,7 @@ body{
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
color: black;
transition: color .3s; transition: color .3s;
} }
.info_txt:hover{ .info_txt:hover{
@ -149,14 +162,18 @@ body{
} }
.search-prov{ .search-prov{
position: relative;
top: 5px;
font-size: 0; font-size: 0;
margin-right: 10px;
/* margin-top: 5px; */ /* margin-top: 5px; */
} }
.search-prov, .search-prov,
.lat_lon_sec{ .lat_lon_sec{
display: none; display: none;
margin-top: 10px; /* display: block; */
/* margin-top: 10px; */
} }
.search_input, .search_input,
@ -184,32 +201,44 @@ body{
width: 150px; width: 150px;
padding: 0 15px; padding: 0 15px;
} }
.search_icon{ .search_icon{
cursor: pointer; cursor: pointer;
width: 40px; width: 40px;
line-height: 40px;
text-align: center; text-align: center;
background: #fff; background: #fff;
border: 1px solid #eee; border: 1px solid #eee;
box-sizing: border-box; box-sizing: border-box;
color: black;
/* box-shadow: 5px 5px 10px #eee; */ /* box-shadow: 5px 5px 10px #eee; */
} }
.search_input_common{ .search_input_common{
position: relative;
top: -1px;
outline: none; outline: none;
border: none; border: none;
padding: 5px 10px; /* padding: 5px 10px; */
width: 50px; width: 100px;
height: 40px;
padding: 0 10px;
} }
.lat_lon_search{ .lat_lon_search{
display: inline-block;
vertical-align: top;
position: relative;
top: 5px;
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
display: inline-block; width: 40px;
height: 24px; height: 40px;
line-height: 24px;
width: 24px;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
margin-right: 10px;
line-height: 42px;
color: black;
} }

163
css/flexleft.css Normal file
View File

@ -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
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>map</title> <title>map</title>
<link href="./css/demo.css" rel="stylesheet"> <link href="./css/demo.css" rel="stylesheet">
<link rel="stylesheet" href="./css/flexleft.css">
<link href="./css/slider.css" rel="stylesheet"> <link href="./css/slider.css" rel="stylesheet">
<link href="./font/iconfont.css" rel="stylesheet"> <link href="./font/iconfont.css" rel="stylesheet">
<!-- 引入 echarts.js --> <!-- 引入 echarts.js -->
@ -15,14 +16,117 @@
</head> </head>
<body> <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"> <div class="screen-btn screen-open" id="btn">
<span class="screen_icon iconfont icon-kuoda"></span> <span class="screen_icon iconfont icon-kuoda"></span>
</div> </div>
<div class="div-b" id="mainGraph">知识图谱</div> <div class="video_img">
<!-- 视频与图片 -->
<div class="div-c">
<div class="div-video"> <div class="div-video">
<video width="100%" height="100%" controls> <video width="100%" height="100%" controls>
<source src="movie.mp4" type="video/mp4"> <source src="movie.mp4" type="video/mp4">
@ -63,36 +167,18 @@
<div class="nav_indicators"></div> <div class="nav_indicators"></div>
</div> </div>
</div> </div>
</div>
<!-- 搜索,径纬度 区域 --> <div class="left_echart" id="mainGraph"></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> </div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom --> <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:100vh;"></div> <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-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.easy_slides.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"> <script type="text/javascript">
// 基于准备好的dom，初始化echarts实例，地图 // 基于准备好的dom，初始化echarts实例，地图
var myChart = echarts.init(document.getElementById('main')); var myChart = echarts.init(document.getElementById('main'));
@ -1368,26 +1454,6 @@
</script> </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"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
$('.slider_one_big_picture').EasySlides({ $('.slider_one_big_picture').EasySlides({
@ -1404,17 +1470,19 @@
$('.search_input').removeClass('active'); $('.search_input').removeClass('active');
}); });
// 搜索
$('.more_icon').on('mouseover', function () { $('.more_icon').on('mouseover', function () {
$('.detail_info').show(); $('.detail_info').show();
}).on('mouseout', function () { }).on('mouseout', function () {
var timer = setTimeout(function () { var timer = setTimeout(function () {
$('.detail_info').on('mouseover', function () { $('.detail_info').hide();
$('.detail_info').show(); }, 300);
}).on('mouseout', function () { $('.detail_info').on('mouseover', function () {
$('.detail_info').hide(); clearTimeout(timer);
}); $('.detail_info').show();
}, 500); }).on('mouseout', function () {
$('.detail_info').hide(); $('.detail_info').hide();
});
}) })
@ -1468,6 +1536,11 @@
$('.lat_lon_search').on('click', function () { $('.lat_lon_search').on('click', function () {
latOrLonSearch(); latOrLonSearch();
}) })
// 左侧滑屏结束后调用该事件，重新渲染知识图谱
$('.fixed-left').on('transitionend', function () {
console.log('滑屏结束时，调用渲染知识图谱');
})
}); });
</script> </script>
</body> </body>

46
font/demo_index.html
View File

@ -40,6 +40,18 @@
<div class="code-name">&amp;#xe7ba;</div> <div class="code-name">&amp;#xe7ba;</div>
</li> </li>
<li class="dib">
<span class="icon iconfont">&#xe771;</span>
<div class="name">展开</div>
<div class="code-name">&amp;#xe771;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe772;</span>
<div class="name">收起</div>
<div class="code-name">&amp;#xe772;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe62b;</span> <span class="icon iconfont">&#xe62b;</span>
<div class="name">缩小</div> <div class="name">缩小</div>
@ -120,6 +132,24 @@
</div> </div>
</li> </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"> <li class="dib">
<span class="icon iconfont icon-suoxiao"></span> <span class="icon iconfont icon-suoxiao"></span>
<div class="name"> <div class="name">
@ -183,6 +213,22 @@
<div class="code-name">#icon-gengduo</div> <div class="code-name">#icon-gengduo</div>
</li> </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"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-suoxiao"></use> <use xlink:href="#icon-suoxiao"></use>

20
font/iconfont.css
View File

@ -1,10 +1,10 @@
@font-face {font-family: "iconfont"; @font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1575968442554'); /* IE9 */ src: url('iconfont.eot?t=1576034900220'); /* IE9 */
src: url('iconfont.eot?t=1575968442554#iefix') format('embedded-opentype'), /* IE6-IE8 */ src: url('iconfont.eot?t=1576034900220#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('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=1575968442554') format('woff'), url('iconfont.woff?t=1576034900220') format('woff'),
url('iconfont.ttf?t=1575968442554') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.ttf?t=1576034900220') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1575968442554#iconfont') format('svg'); /* iOS 4.1- */ url('iconfont.svg?t=1576034900220#iconfont') format('svg'); /* iOS 4.1- */
} }
.iconfont { .iconfont {
@ -23,6 +23,14 @@
content: "\e7ba"; content: "\e7ba";
} }
.icon-zhankai:before {
content: "\e771";
}
.icon-shouqi:before {
content: "\e772";
}
.icon-suoxiao:before { .icon-suoxiao:before {
content: "\e62b"; content: "\e62b";
} }

BIN
font/iconfont.eot
View File

Binary file not shown.

2
font/iconfont.js
View File

File diff suppressed because one or more lines are too long

14
font/iconfont.json
View File

@ -19,6 +19,20 @@
"unicode": "e7ba", "unicode": "e7ba",
"unicode_decimal": 59322 "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", "icon_id": "46750641",
"name": "缩小", "name": "缩小",

6
font/iconfont.svg
View File

@ -26,6 +26,12 @@ Created by iconfont
<glyph glyph-name="gengduo" unicode="&#59322;" 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="gengduo" unicode="&#59322;" 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="&#59249;" 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="&#59250;" 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="&#58923;" 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" /> <glyph glyph-name="suoxiao" unicode="&#58923;" 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" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
font/iconfont.ttf
View File

Binary file not shown.

BIN
font/iconfont.woff
View File

Binary file not shown.

BIN
font/iconfont.woff2
View File

Binary file not shown.

64
js/demo.js Normal file
View File

@ -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)
})
});