Skip to content

石磊 / cihai

Go to a project
Commit 2acc2bb6 by 侯昆
Options

pc添加地球和几个页面

1 parent 41bf65df
Expand all
Inline Side-by-side
Showing 25 changed files with 660 additions and 5 deletions
serverside/cihai-pc/src/main/java/com/dookay/cihai/pc/controller/HomeController.java
...@@ -173,4 +173,39 @@ public class HomeController extends BaseController { ...@@ -173,4 +173,39 @@ public class HomeController extends BaseController {
return mv; return mv;
} }
/**
* 万国志
*
* @author houkun
* @date 2018/2/8
*/
@RequestMapping(value = "/country", method = RequestMethod.GET)
public ModelAndView country() {
ModelAndView mv = new ModelAndView("/home/country");
return mv;
}
/**
* 地方志
*
* @author houkun
* @date 2018/2/8
*/
@RequestMapping(value = "/area", method = RequestMethod.GET)
public ModelAndView area() {
ModelAndView mv = new ModelAndView("/home/area");
return mv;
}
/**
* 人物志
*
* @author houkun
* @date 2018/2/8
*/
@RequestMapping(value = "/people", method = RequestMethod.GET)
public ModelAndView people() {
ModelAndView mv = new ModelAndView("/home/people");
return mv;
}
} }
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/home/area.jsp 0 → 100644
<%@ include file="/WEB-INF/jsp/include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="/WEB-INF/jsp/include/header_search.jsp">
<jsp:param name="pageTitle" value="地方志"/>
</jsp:include>
<div class="container-fluid">
<div class="article">
<img src="/static/images/shanghai.png">
</div>
</div>
<footer class="footer-main">
<div class="container">
<p class="copyright">Copyright © 2006-2016 上海辞书出版社有限公司
<a class="beian" href="#" target="_blank">沪ICP备12009386号-3</a>
</p>
</div>
</footer>
<jsp:include page="/WEB-INF/jsp/include/footer.jsp"/>
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/home/country.jsp 0 → 100644
<%@ include file="/WEB-INF/jsp/include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="/WEB-INF/jsp/include/header_search.jsp">
<jsp:param name="pageTitle" value="万国志"/>
</jsp:include>
<div class="container-fluid">
<div class="article">
<img src="/static/images/america.png">
</div>
</div>
<footer class="footer-main">
<div class="container">
<p class="copyright">Copyright © 2006-2016 上海辞书出版社有限公司
<a class="beian" href="#" target="_blank">沪ICP备12009386号-3</a>
</p>
</div>
</footer>
<jsp:include page="/WEB-INF/jsp/include/footer.jsp"/>
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/home/index.jsp
...@@ -76,6 +76,11 @@ ...@@ -76,6 +76,11 @@
</div> </div>
</div> </div>
</form> </form>
<div class="navbar-links navbar-form">
<a href="/country">万国志</a>
<a href="/area">地方志</a>
<a href="/people">人物志</a>
</div>
</div> </div>
<div class="push-main"> <div class="push-main">
<div class="container-fluid"> <div class="container-fluid">
......
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/home/people.jsp 0 → 100644
<%@ include file="/WEB-INF/jsp/include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="/WEB-INF/jsp/include/header_search.jsp">
<jsp:param name="pageTitle" value="人物志"/>
</jsp:include>
<div class="container-fluid">
<div class="article">
<img src="/static/images/china.png">
</div>
</div>
<footer class="footer-main">
<div class="container">
<p class="copyright">Copyright © 2006-2016 上海辞书出版社有限公司
<a class="beian" href="#" target="_blank">沪ICP备12009386号-3</a>
</p>
</div>
</footer>
<jsp:include page="/WEB-INF/jsp/include/footer.jsp"/>
serverside/cihai-pc/src/main/webapp/static/css/index.css
body,html{height:100%}.wrapper-index{position:relative;height:100%;min-height:770px;background:url(../images/bg-index.jpg) top center no-repeat}.wrapper-index .navbar-default{padding:40px 0}.wrapper-index .navbar-default,.wrapper-index .navbar-default .navbar-collapse{background-color:transparent;border-color:transparent}.wrapper-index .navbar-nav{top:18px}.wrapper-index .navbar-form .navbar-main-list{margin-top:20px}.wrapper-index .logo{position:absolute;left:40px;top:40px}.wrapper-index .search-main{padding-top:400px}.wrapper-index .search-main .navbar-form{width:775px}.wrapper-index .search-main .navbar-form .btn-link{float:left;margin-left:15px}.wrapper-index .search-main .navbar-form .logo-search{text-align:center;width:380px;height:70px;padding-right:150px;margin:0 auto 30px}.wrapper-index .search-main .navbar-form .logo-search img{display:inline-block}.wrapper-index .push-main{padding:0 50px}.wrapper-index .push-main .footer-main .qr{float:right;margin-top:-2px}.wrapper-index .push-main .footer-main .qr a:hover .icon-qr{background-image:url(../images/sprite-2.png);background-position:0 0}.wrapper-index .push-main .footer-main .copyright{text-align:left}.wrapper-index .search-main-input-wrapper{position:relative;float:left;padding:0 6px 4px 0;background:url(../images/right.png) right 0 no-repeat}.wrapper-index .search-main-input-wrapper .search-main-input-inner{padding:0 0 6px 0;background:url(../images/bottom.png) 4px bottom no-repeat}.wrapper-index .search-main-input-img{position:absolute;left:-60px;bottom:100%}.btn-search{border:none;width:160px!important;height:75px!important;outline:0;background:url(../images/btn-search.png) center no-repeat}.btn-search:active,.btn-search:focus{background:url(../images/btn-search.png) center no-repeat}.navbar-form .form-group{padding:13px 0!important}.container-fluid .navbar-form .form-group{border-color:#c13633}@media (min-width:1400px){.wrapper-index .navbar-form .navbar-main-list{width:103%;font-size:22px;line-height:30px}.wrapper-index .navbar-form .navbar-main-list .icon-search{margin-top:-4px}.wrapper-index .navbar-form .navbar-main-list a{margin:0 18px}.wrapper-index .navbar .navbar-form{width:1005px}}@media (max-width:1400px){.wrapper-index .container .navbar-form .form-group,.wrapper-index .container-fluid .navbar-form .form-group{width:531px}.wrapper-index .container .navbar-form .form-group .form-control,.wrapper-index .container-fluid .navbar-form .form-group .form-control{width:441px!important}.wrapper-index .container .navbar-form .form-group .btn,.wrapper-index .container-fluid .navbar-form .form-group .btn{width:38px}.wrapper-index .push-main{padding:0 40px}}@media (max-width:1200px){.container-fluid .navbar-header{margin-left:0}.container-fluid .navbar-collapse{margin-right:0}.wrapper-index .push-main{padding:0 10px}}@media (max-width:1200px){.container-fluid .navbar-header{margin-left:-10px}.container-fluid .navbar-collapse{margin-right:0}.wrapper-index .push-main{padding:0}}.word{padding:35px 0;height:230px;background-clip:content-box;background-position:center;background-repeat:no-repeat;background-size:contain;background-image:url(../images/ciyun.png)}.calendar{position:absolute;right:0;top:0}
\ No newline at end of file \ No newline at end of file
body,html{height:100%}.wrapper-index{position:relative;height:100%;min-height:770px;background:url(../images/bg-index.jpg) top center no-repeat}.wrapper-index .navbar-default{padding:40px 0}.wrapper-index .navbar-default,.wrapper-index .navbar-default .navbar-collapse{background-color:transparent;border-color:transparent}.wrapper-index .navbar-nav{top:18px}.wrapper-index .navbar-form .navbar-main-list{margin-top:20px}.wrapper-index .logo{position:absolute;left:40px;top:40px}.wrapper-index .search-main{padding-top:400px}.wrapper-index .search-main .navbar-form{width:775px}.wrapper-index .search-main .navbar-form .btn-link{float:left;margin-left:15px}.wrapper-index .search-main .navbar-form .logo-search{text-align:center;width:380px;height:70px;padding-right:150px;margin:0 auto 30px}.wrapper-index .search-main .navbar-form .logo-search img{display:inline-block}.wrapper-index .push-main{padding:0 50px}.wrapper-index .push-main .footer-main .qr{float:right;margin-top:-2px}.wrapper-index .push-main .footer-main .qr a:hover .icon-qr{background-image:url(../images/sprite-2.png);background-position:0 0}.wrapper-index .push-main .footer-main .copyright{text-align:left}.wrapper-index .search-main-input-wrapper{position:relative;float:left;padding:0 6px 4px 0;background:url(../images/right.png) right 0 no-repeat}.wrapper-index .search-main-input-wrapper .search-main-input-inner{padding:0 0 6px 0;background:url(../images/bottom.png) 4px bottom no-repeat}.wrapper-index .search-main-input-img{position:absolute;left:-60px;bottom:100%}.btn-search{border:none;width:160px!important;height:75px!important;outline:0;background:url(../images/btn-search.png) center no-repeat}.btn-search:active,.btn-search:focus{background:url(../images/btn-search.png) center no-repeat}.navbar-form .form-group{padding:13px 0!important}.container-fluid .navbar-form .form-group{border-color:#c13633}@media (min-width:1400px){.wrapper-index .navbar-form .navbar-main-list{width:103%;font-size:22px;line-height:30px}.wrapper-index .navbar-form .navbar-main-list .icon-search{margin-top:-4px}.wrapper-index .navbar-form .navbar-main-list a{margin:0 18px}.wrapper-index .navbar .navbar-form{width:1005px}}@media (max-width:1400px){.wrapper-index .container .navbar-form .form-group,.wrapper-index .container-fluid .navbar-form .form-group{width:531px}.wrapper-index .container .navbar-form .form-group .form-control,.wrapper-index .container-fluid .navbar-form .form-group .form-control{width:441px!important}.wrapper-index .container .navbar-form .form-group .btn,.wrapper-index .container-fluid .navbar-form .form-group .btn{width:38px}.wrapper-index .push-main{padding:0 40px}}@media (max-width:1200px){.container-fluid .navbar-header{margin-left:0}.container-fluid .navbar-collapse{margin-right:0}.wrapper-index .push-main{padding:0 10px}}@media (max-width:1200px){.container-fluid .navbar-header{margin-left:-10px}.container-fluid .navbar-collapse{margin-right:0}.wrapper-index .push-main{padding:0}}.word{padding:35px 0;height:230px;background-clip:content-box;background-position:center;background-repeat:no-repeat;background-size:contain;background-image:url(../images/ciyun.png)}.calendar{position:absolute;right:0;top:0}.container-fluid .navbar-links{padding:15px 0 40px;font-size:16px}.container-fluid .navbar-links>a{color:#999;margin-right:20px}.container-fluid .navbar-links>a:hover{color:#187bb2}
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/css/vendor.css
This diff could not be displayed because it is too large.
serverside/cihai-pc/src/main/webapp/static/index.html
...@@ -37,6 +37,11 @@ ...@@ -37,6 +37,11 @@
</div> </div>
</div> </div>
</form> </form>
<div class="navbar-links navbar-form">
<a href="万国志.html">万国志</a>
<a href="地方志.html">地方志</a>
<a href="人物志.html">人物志</a>
</div>
</div> </div>
<div class="push-main"> <div class="push-main">
<div class="container-fluid"> <div class="container-fluid">
......
serverside/cihai-pc/src/main/webapp/static/js/echarts-gl.js 0 → 100644
This diff could not be displayed because it is too large.
serverside/cihai-pc/src/main/webapp/static/js/echarts.min.js 0 → 100644
This diff could not be displayed because it is too large.
serverside/cihai-pc/src/main/webapp/static/万国志.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>搜索</title>
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="js/plugins/vis/vis.min.css">
<link rel="stylesheet" href="css/h5.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png">
</a>
</div>
<div class="navbar-collapse">
<form class="navbar-form clearfix">
<div class="form-group input-group-lg">
<input class="form-control" type="text" placeholder="之云">
<button class="btn navbar-search-camera" type="button">
<div class="icon icon-camera"></div>
</button>
<button class="btn navbar-search-microphone" type="button">
<div class="icon icon-microphone"></div>
</button>
</div>
<button class="btn btn-inverse btn-lg" type="button">进入词条</button>
<button class="btn btn-default btn-lg" type="button">搜索词条</button>
<a class="btn btn-link btn-lg" type="button">搜索助手
<span class="icon icon-help"></span>
</a>
<div class="navbar-main-list">
<span class="icon icon-search-tag"></span>
<a href="#">语词</a>
<a href="#">哲学</a>
<a href="#">社会</a>
<a href="#">民族</a>
<a href="#">历史</a>
<a href="#">地理</a>
<a href="#">文学</a>
<a href="#">艺术</a>
<a href="#">生命</a>
<a href="#">农业</a>
<a href="#">医学</a>
<a href="#">科技</a>
</div>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="article">
<img src="images/america.png">
</div>
</div>
<footer class="footer-main">
<div class="container">
<p class="copyright">Copyright © 2006-2016 上海辞书出版社有限公司
<a class="beian" href="#" target="_blank">沪ICP备12009386号-3</a>
</p>
</div>
</footer>
<script src="js/plugins/jquery.min.js"></script>
<script src="js/vendor.js" merge="true"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.js"></script>
<script src="js/plugins/vis/vis.min.js"></script>
<script src="js/common.js"></script>
<script>
$(function() {
$('.js-album').click(function() {
layer.open({
type: 1,
title: false,
shadeClose: true,
shade: 0.6,
closeBtn: false,
area: false,
content: $('.album-alert')
});
var mySwiper = new Swiper('.album-swiper', {
loop: true,
pagination: '.swiper-pagination',
paginationClickable: true
});
});
//- 地球
var option = {
backgroundColor: '#000',
globe: {
baseTexture: "./images/world.topo.bathy.200401.jpg",
heightTexture: "./images/world.topo.bathy.200401.jpg",
displacementScale: 0.04,
shading: 'realistic',
environment: './images/starfield.jpg',
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: './images/pisa.hdr',
diffuseIntensity: 0.2
}
}
}
};
$("#map-tab").one('shown.bs.tab', function(e) {
var chart = $("#chart-earth").get(0)
var earth = echarts.init(chart)
earth.setOption(option)
})
// tab选项卡
$(".js-tab a").click(function(e) {
e.preventDefault()
$(this).tab('show')
})
// 显示起源
$(".js-origin").click(function() {
$(this).toggleClass("active").siblings().removeClass("active")
$("#collapse").slideToggle()
})
// layer
$(".js-calligraphy").click(function() {
$(this).toggleClass("active").siblings().removeClass("active")
if ($("#collapse").is(":visible")) $("#collapse").slideUp()
layer.open({
type: 1,
content: $("#calligraphy"),
area: ['900px'],
title: false,
btn: [],
cancel: function() {
$(".js-calligraphy").removeClass("active")
}
})
})
// 复制
var clipboard = new Clipboard(".js-copy")
$(".js-copy").click(function(e) {
e.preventDefault()
var parent = $(this).parents(".js-sec")
var text = parent.find(".paraphrase-title").text() + "\n" + parent.find(".paraphrase-p").text()
$(this).attr('data-clipboard-text', text)
})
});
</script>
</body>
</html>
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/人物志.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>搜索</title>
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="js/plugins/vis/vis.min.css">
<link rel="stylesheet" href="css/h5.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png">
</a>
</div>
<div class="navbar-collapse">
<form class="navbar-form clearfix">
<div class="form-group input-group-lg">
<input class="form-control" type="text" placeholder="之云">
<button class="btn navbar-search-camera" type="button">
<div class="icon icon-camera"></div>
</button>
<button class="btn navbar-search-microphone" type="button">
<div class="icon icon-microphone"></div>
</button>
</div>
<button class="btn btn-inverse btn-lg" type="button">进入词条</button>
<button class="btn btn-default btn-lg" type="button">搜索词条</button>
<a class="btn btn-link btn-lg" type="button">搜索助手
<span class="icon icon-help"></span>
</a>
<div class="navbar-main-list">
<span class="icon icon-search-tag"></span>
<a href="#">语词</a>
<a href="#">哲学</a>
<a href="#">社会</a>
<a href="#">民族</a>
<a href="#">历史</a>
<a href="#">地理</a>
<a href="#">文学</a>
<a href="#">艺术</a>
<a href="#">生命</a>
<a href="#">农业</a>
<a href="#">医学</a>
<a href="#">科技</a>
</div>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="article">
<img src="images/china.png">
</div>
</div>
<footer class="footer-main">
<div class="container">
<p class="copyright">Copyright © 2006-2016 上海辞书出版社有限公司
<a class="beian" href="#" target="_blank">沪ICP备12009386号-3</a>
</p>
</div>
</footer>
<script src="js/plugins/jquery.min.js"></script>
<script src="js/vendor.js" merge="true"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.js"></script>
<script src="js/plugins/vis/vis.min.js"></script>
<script src="js/common.js"></script>
<script>
$(function() {
$('.js-album').click(function() {
layer.open({
type: 1,
title: false,
shadeClose: true,
shade: 0.6,
closeBtn: false,
area: false,
content: $('.album-alert')
});
var mySwiper = new Swiper('.album-swiper', {
loop: true,
pagination: '.swiper-pagination',
paginationClickable: true
});
});
//- 地球
var option = {
backgroundColor: '#000',
globe: {
baseTexture: "./images/world.topo.bathy.200401.jpg",
heightTexture: "./images/world.topo.bathy.200401.jpg",
displacementScale: 0.04,
shading: 'realistic',
environment: './images/starfield.jpg',
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: './images/pisa.hdr',
diffuseIntensity: 0.2
}
}
}
};
$("#map-tab").one('shown.bs.tab', function(e) {
var chart = $("#chart-earth").get(0)
var earth = echarts.init(chart)
earth.setOption(option)
})
// tab选项卡
$(".js-tab a").click(function(e) {
e.preventDefault()
$(this).tab('show')
})
// 显示起源
$(".js-origin").click(function() {
$(this).toggleClass("active").siblings().removeClass("active")
$("#collapse").slideToggle()
})
// layer
$(".js-calligraphy").click(function() {
$(this).toggleClass("active").siblings().removeClass("active")
if ($("#collapse").is(":visible")) $("#collapse").slideUp()
layer.open({
type: 1,
content: $("#calligraphy"),
area: ['900px'],
title: false,
btn: [],
cancel: function() {
$(".js-calligraphy").removeClass("active")
}
})
})
// 复制
var clipboard = new Clipboard(".js-copy")
$(".js-copy").click(function(e) {
e.preventDefault()
var parent = $(this).parents(".js-sec")
var text = parent.find(".paraphrase-title").text() + "\n" + parent.find(".paraphrase-p").text()
$(this).attr('data-clipboard-text', text)
})
});
</script>
</body>
</html>
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/历史上的今天.html
...@@ -51,7 +51,28 @@ ...@@ -51,7 +51,28 @@
</div> </div>
</nav> </nav>
<div class="history-content text-center"> <div class="history-content text-center">
<img src="images/history-01.jpg"> <ul class="history-tab js-tab">
<li>
<a href="#his1"></a>
</li>
<li>
<a href="#his2"></a>
</li>
<li>
<a href="#his3"></a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="his1">
<img src="images/historyall.png">
</div>
<div class="tab-pane" id="his2">
<img src="images/historything.png">
</div>
<div class="tab-pane" id="his3">
<img src="images/historytoday.png">
</div>
</div>
</div> </div>
<footer class="footer-main"> <footer class="footer-main">
<div class="container"> <div class="container">
...@@ -62,5 +83,12 @@ ...@@ -62,5 +83,12 @@
</footer> </footer>
<script src="js/plugins/jquery.min.js"></script> <script src="js/plugins/jquery.min.js"></script>
<script src="js/vendor.js" merge="true"></script> <script src="js/vendor.js" merge="true"></script>
<script>
// tab选项卡
$(".js-tab a").click(function(e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/地方志.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>搜索</title>
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="js/plugins/vis/vis.min.css">
<link rel="stylesheet" href="css/h5.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png">
</a>
</div>
<div class="navbar-collapse">
<form class="navbar-form clearfix">
<div class="form-group input-group-lg">
<input class="form-control" type="text" placeholder="之云">
<button class="btn navbar-search-camera" type="button">
<div class="icon icon-camera"></div>
</button>
<button class="btn navbar-search-microphone" type="button">
<div class="icon icon-microphone"></div>
</button>
</div>
<button class="btn btn-inverse btn-lg" type="button">进入词条</button>
<button class="btn btn-default btn-lg" type="button">搜索词条</button>
<a class="btn btn-link btn-lg" type="button">搜索助手
<span class="icon icon-help"></span>
</a>
<div class="navbar-main-list">
<span class="icon icon-search-tag"></span>
<a href="#">语词</a>
<a href="#">哲学</a>
<a href="#">社会</a>
<a href="#">民族</a>
<a href="#">历史</a>
<a href="#">地理</a>
<a href="#">文学</a>
<a href="#">艺术</a>
<a href="#">生命</a>
<a href="#">农业</a>
<a href="#">医学</a>
<a href="#">科技</a>
</div>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="article">
<img src="images/shanghai.png">
</div>
</div>
<footer class="footer-main">
<div class="container">
<p class="copyright">Copyright © 2006-2016 上海辞书出版社有限公司
<a class="beian" href="#" target="_blank">沪ICP备12009386号-3</a>
</p>
</div>
</footer>
<script src="js/plugins/jquery.min.js"></script>
<script src="js/vendor.js" merge="true"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.js"></script>
<script src="js/plugins/vis/vis.min.js"></script>
<script src="js/common.js"></script>
<script>
$(function() {
$('.js-album').click(function() {
layer.open({
type: 1,
title: false,
shadeClose: true,
shade: 0.6,
closeBtn: false,
area: false,
content: $('.album-alert')
});
var mySwiper = new Swiper('.album-swiper', {
loop: true,
pagination: '.swiper-pagination',
paginationClickable: true
});
});
//- 地球
var option = {
backgroundColor: '#000',
globe: {
baseTexture: "./images/world.topo.bathy.200401.jpg",
heightTexture: "./images/world.topo.bathy.200401.jpg",
displacementScale: 0.04,
shading: 'realistic',
environment: './images/starfield.jpg',
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: './images/pisa.hdr',
diffuseIntensity: 0.2
}
}
}
};
$("#map-tab").one('shown.bs.tab', function(e) {
var chart = $("#chart-earth").get(0)
var earth = echarts.init(chart)
earth.setOption(option)
})
// tab选项卡
$(".js-tab a").click(function(e) {
e.preventDefault()
$(this).tab('show')
})
// 显示起源
$(".js-origin").click(function() {
$(this).toggleClass("active").siblings().removeClass("active")
$("#collapse").slideToggle()
})
// layer
$(".js-calligraphy").click(function() {
$(this).toggleClass("active").siblings().removeClass("active")
if ($("#collapse").is(":visible")) $("#collapse").slideUp()
layer.open({
type: 1,
content: $("#calligraphy"),
area: ['900px'],
title: false,
btn: [],
cancel: function() {
$(".js-calligraphy").removeClass("active")
}
})
})
// 复制
var clipboard = new Clipboard(".js-copy")
$(".js-copy").click(function(e) {
e.preventDefault()
var parent = $(this).parents(".js-sec")
var text = parent.find(".paraphrase-title").text() + "\n" + parent.find(".paraphrase-p").text()
$(this).attr('data-clipboard-text', text)
})
});
</script>
</body>
</html>
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/太阳系.html
...@@ -52,8 +52,9 @@ ...@@ -52,8 +52,9 @@
</div> </div>
</div> </div>
</nav> </nav>
<div class="encyclopedia" style="background-image:url(images/word-bg-01.jpg)">
<div class="container"> <div class="container">
<div class="encyclopedia" style="background-image:url(images/world.topo.bathy.200401.jpg)">
<div class="encyclopedia-mask"></div>
<div class="content"> <div class="content">
<div class="row"> <div class="row">
<div class="col-xs-17"> <div class="col-xs-17">
...@@ -144,6 +145,9 @@ ...@@ -144,6 +145,9 @@
<li class="main-tab-item active"> <li class="main-tab-item active">
<a href="#tab1">释义</a> <a href="#tab1">释义</a>
</li> </li>
<li class="main-tab-item">
<a href="#tab2" id="map-tab">地球</a>
</li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active" id="tab1"> <div class="tab-pane active" id="tab1">
...@@ -257,6 +261,9 @@ ...@@ -257,6 +261,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane" id="tab2">
<div id="chart-earth"></div>
</div>
</div> </div>
</div> </div>
<div class="js-top"></div> <div class="js-top"></div>
...@@ -291,6 +298,8 @@ ...@@ -291,6 +298,8 @@
</footer> </footer>
<script src="js/plugins/jquery.min.js"></script> <script src="js/plugins/jquery.min.js"></script>
<script src="js/vendor.js" merge="true"></script> <script src="js/vendor.js" merge="true"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.js"></script>
<script src="js/plugins/vis/vis.min.js"></script> <script src="js/plugins/vis/vis.min.js"></script>
<script src="js/common.js"></script> <script src="js/common.js"></script>
<script> <script>
...@@ -311,7 +320,38 @@ ...@@ -311,7 +320,38 @@
paginationClickable: true paginationClickable: true
}); });
}); });
//- 地球
var option = {
backgroundColor: '#000',
globe: {
baseTexture: "./images/world.topo.bathy.200401.jpg",
heightTexture: "./images/world.topo.bathy.200401.jpg",
displacementScale: 0.04,
shading: 'realistic',
environment: './images/starfield.jpg',
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: './images/pisa.hdr',
diffuseIntensity: 0.2
}
}
}
};
$("#map-tab").one('shown.bs.tab', function(e) {
var chart = $("#chart-earth").get(0)
var earth = echarts.init(chart)
earth.setOption(option)
})
// tab选项卡 // tab选项卡
$(".js-tab a").click(function(e) { $(".js-tab a").click(function(e) {
e.preventDefault() e.preventDefault()
...@@ -345,7 +385,6 @@ ...@@ -345,7 +385,6 @@
var text = parent.find(".paraphrase-title").text() + "\n" + parent.find(".paraphrase-p").text() var text = parent.find(".paraphrase-title").text() + "\n" + parent.find(".paraphrase-p").text()
$(this).attr('data-clipboard-text', text) $(this).attr('data-clipboard-text', text)
}) })
}); });
</script> </script>
</body> </body>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!