p42689073
/
geo_info_platform
forked from p51497208/geo_info_platform
1
0
Fork 0
Code Issues Pull Requests 1 Releases 1 Wiki Activity

update style

This commit is contained in:
tangjiang 2019-12-11 16:08:04 +08:00
parent fb41f0d23f
commit a79f7bef8f
4 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/demo.css
View File

@ -93,7 +93,7 @@ body{
}
.screen-btn{
position: absolute;
right: 10px;
left: -50px;
top: 60px;
color: #fff;
z-index: 100;

6
css/flexleft.css
View File

@ -9,10 +9,6 @@
transition: width .3s;
}
.fixed-left.collpased{
width: 400px;
}
.fixed-left::before{
position: absolute;
left: 0;
@ -62,7 +58,7 @@
left: 0;
right: 0;
background: rgba(78, 173, 222, 1);
z-index: 50;
z-index: 100;
transition: .3s;
}

37
demo.html
View File

@ -155,10 +155,16 @@
<script type="text/javascript" src="./js/jquery.easy_slides.js"></script>
<script type="text/javascript" src="./js/demo.js"></script>
<script type="text/javascript">
var graphContainer = document.getElementById('mainGraph');
// 基于准备好的dom，初始化echarts实例，地图
var myChart = echarts.init(document.getElementById('main'));
// var resizeGraphContainer = function () {
// graphContainer.style.width = document.body.clientWidth + 'px';
// graphContainer.style.height = document.body.clientHeight + 'px';
// }
// 知识图谱
var myChartGraph = echarts.init(document.getElementById('mainGraph'));
var myChartGraph = echarts.init(graphContainer);
function tooltipCharts() {
console.log(arguments[0]);
@ -1437,24 +1443,29 @@
$('#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');
$('.left_echart').css({
width: '400px'
$('.fixed-left').removeClass('active');
$('.video_img, .search-area').show();
$('.screen_icon').removeClass('icon-suoxiao').addClass('icon-kuoda');
$('.screen-btn').css({
left: '360px'
})
// 重新加载知识图谱
graphContainer.style.width = 400 + 'px';
graphContainer.style.height = '60%';
} else {
var width = document.body.clientWidth;
$('.fixed-left').addClass('active');
$('.screen-btn').css({
left: width - 40 + 'px'
});
$('.video_img, .search-area').hide();
$('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
$('.left_echart').css({
width: '100%'
})
graphContainer.style.width = document.body.clientWidth + 'px';
graphContainer.style.height = document.body.clientHeight + 'px';
}
redrawGraph();
// redrawGraph();
myChartGraph.resize();
});
// 点击省份加载图片
function loadPic(name) {
@ -1497,7 +1508,7 @@
$('.slider_one_big_picture').EasySlides({
'autoplay': true,
'stepbystep': false,
'show': 5,
'show': 0,
'loop': true
});

10
js/demo.js
View File

@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-12-11 09:17:17
* @LastEditors: tangjiang
* @LastEditTime: 2019-12-11 14:20:31
* @LastEditTime: 2019-12-11 16:00:21
*/
$(document).ready(function () {
@ -26,12 +26,16 @@ $(document).ready(function () {
// 点击地图时，调用此方法
function showOrHideSlider () {
if ($('.fixed-left').hasClass('collpased')) {
$('.fixed-left').removeClass('collpased');
$('.fixed-left').css({ left: '-400px'}).removeClass('collpased');
$('.left_echart').css({left: '-400px'});
$('.screen-btn').css({left: '-50px'});
// $('.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');
$('.fixed-left').css({ left: '0px' }).addClass('collpased');
$('.left_echart').css({left: '0px'});
$('.screen-btn').css({ left: '370px' });
// $('.map_header').css({left: '400px'});
// $('.collpase-icon').remove('icon-shouqi').add('icon-zhankai');
}