Skip to content

石磊 / cihai

Go to a project
Commit a6fada53 by 侯昆
Options

24节气修改

1 parent cd00176d
Inline Side-by-side
Showing 7 changed files with 1210 additions and 5 deletions
serverside/cihai-app/src/main/webapp/WEB-INF/jsp/word/statement_baike.jsp
......@@ -94,7 +94,43 @@
<p>${item}</p>
</c:forEach>
<c:if test="${vo.word eq '二十四节气'}">
<p><img style="max-width: 80%" src="/static/temp/season.jpg"></p>
<div class="st-wrap">
<img src="/static/images/24.jpg" alt="">
<div class="st-links">
<div class="st-row">
<a class="st-link" href="/word/473"></a>
<a class="st-link" href="/word/463"></a>
<a class="st-link" href="/word/472"></a>
<a class="st-link" href="/word/462"></a>
<a class="st-link" href="/word/517"></a>
<a class="st-link" href="/word/470"></a>
</div>
<div class="st-row">
<a class="st-link" href="/word/476"></a>
<a class="st-link" href="/word/482"></a>
<a class="st-link" href="/word/477"></a>
<a class="st-link" href="/word/606"></a>
<a class="st-link" href="/word/483"></a>
<a class="st-link" href="/word/467"></a>
</div>
<div class="st-row">
<a class="st-link" href="/word/475"></a>
<a class="st-link" href="/word/465"></a>
<a class="st-link" href="/word/464"></a>
<a class="st-link" href="/word/479"></a>
<a class="st-link" href="/word/471"></a>
<a class="st-link" href="/word/480"></a>
</div>
<div class="st-row">
<a class="st-link" href="/word/474"></a>
<a class="st-link" href="/word/484"></a>
<a class="st-link" href="/word/468"></a>
<a class="st-link" href="/word/469"></a>
<a class="st-link" href="/word/481"></a>
<a class="st-link" href="/word/466"></a>
</div>
</div>
</div>
</c:if>
<c:if test="${vo.word eq '鲁迅'}">
<div class="media-yuci" id="accordion">
......
serverside/cihai-app/src/main/webapp/static/24节气.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<title>24节气</title>
<link rel="stylesheet" href="css/vendor.css">
</head>
<body>
<div class="container-fluid">
<div class="wrapper-ipad-app-h5">
<div class="header-main-2 clearfix">
<div class="header-main-left">
<h1>象</h1>
<div class="header-main-desc">
<div class="word-read">
<span>【xiàng】</span>
<a class="link js-play-voice" href="javascript:;">
<i class="icon icon-shengyin"></i>
</a>
</div>
<h4>长鼻目象科哺乳动物</h4>
</div>
</div>
<div class="header-main-right">
<div class="album">
<a>
<img src="temp/xiang.jpg">
<span>象图册（5）</span>
</a>
</div>
</div>
</div>
<div class="row encyclopedias">
<div class="col-sm-6">
<table>
<tbody>
<tr>
<th width="80">中文学名：</th>
<td>象</td>
</tr>
<tr>
<th>拉丁学名：</th>
<td>Elephantidae</td>
</tr>
<tr>
<th>别称：</th>
<td>大象</td>
</tr>
<tr>
<th>界：</th>
<td>动物界</td>
</tr>
<tr>
<th>门：</th>
<td>脊索动物门</td>
</tr>
<tr>
<th>亚门：</th>
<td>脊椎动物亚门</td>
</tr>
<tr>
<th>纲：</th>
<td>哺乳纲</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6">
<table class="encyclopedias">
<tbody>
<tr>
<th width="80">亚纲：</th>
<td>真兽亚纲</td>
</tr>
<tr>
<th>目：</th>
<td>长鼻目</td>
</tr>
<tr>
<th>科：</th>
<td>象科</td>
</tr>
<tr>
<th>属：</th>
<td>亚洲象属、非洲象属</td>
</tr>
<tr>
<th>种：</th>
<td>普通非洲象，非洲森林象，亚洲象</td>
</tr>
<tr>
<th rowspan="2">分布区域：</th>
<td rowspan="2">非洲撒哈拉沙漠以南和南亚及东南亚以及中国南部边</td>
</tr>
</tbody>
</table>
</div>
</div>
<article class="content-detail">
<ul class="nav nav-tabs nav-tabs-main" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#content-detail-tab-0" role="tab" data-toggle="tab">释义</a>
</li>
</ul>
<div class="tab-content pt-3">
<div class="tab-pane show active" id="content-detail-tab-0" role="tabpanel">
<p>哺乳纲，长鼻目，象科。陆上现存最大的哺乳动物。肩高2.5～3.0米。皮厚毛少，肢粗如柱。鼻与上唇愈合成圆筒状长鼻，鼻端有指状突起一或两个。上颌门齿大而长，称“象牙”。有两种：亚洲象（Elephas maximus），体较小，额部下凹，鼻端具一指状凸起，耳小，后足四蹄。仅雄象有象牙，分布于南亚、东南亚等地；亦见于中国云南等地，国家一级保护动物。非洲象（Loxodonta africana），体较大，额部凸出，鼻端有两个指状凸起，耳大披肩，后足三蹄。雌雄均有象牙，不易驯服，分布于非洲。</p>
<div class="st-wrap">
<img src="./images/24.jpg" alt="">
<div class="st-links">
<div class="st-row">
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
</div>
<div class="st-row">
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
</div>
<div class="st-row">
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
</div>
<div class="st-row">
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
<a class="st-link" href=""></a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<script src="js/plugins/jquery.min.js"></script>
<script src="js/vendor.js" merge="true"></script>
<script src="js/plugins/echarts.min.js"></script>
<script src="js/plugins/echarts-gl.js"></script>
<script>
$(function() {
// 折叠展开
$('.js-collapse').each(function() {
var $this = $(this);
$($this.attr('href')).on('show.bs.collapse', function() {
$($this.siblings().attr('href')).collapse('hide');
});
});
});
</script>
</body>
</html>
\ No newline at end of file
serverside/cihai-app/src/main/webapp/static/css/vendor.css
This diff could not be displayed because it is too large.
serverside/cihai-app/src/main/webapp/static/js/vendor.js
This diff could not be displayed because it is too large.
serverside/cihai-app/src/main/webapp/static/太阳系.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<title>太阳系</title>
<link rel="stylesheet" href="css/vendor.css">
</head>
<body>
<div class="container-fluid">
<div class="wrapper-ipad-app-h5">
<div class="header-main-2 clearfix">
<div class="header-main-left">
<h1>象</h1>
<div class="header-main-desc">
<div class="word-read">
<span>【xiàng】</span>
<a class="link js-play-voice" href="javascript:;">
<i class="icon icon-shengyin"></i>
</a>
</div>
<h4>长鼻目象科哺乳动物</h4>
</div>
</div>
<div class="header-main-right">
<div class="album">
<a>
<img src="temp/xiang.jpg">
<span>象图册（5）</span>
</a>
</div>
</div>
</div>
<div class="row encyclopedias">
<div class="col-sm-6">
<table>
<tbody>
<tr>
<th width="80">中文学名：</th>
<td>象</td>
</tr>
<tr>
<th>拉丁学名：</th>
<td>Elephantidae</td>
</tr>
<tr>
<th>别称：</th>
<td>大象</td>
</tr>
<tr>
<th>界：</th>
<td>动物界</td>
</tr>
<tr>
<th>门：</th>
<td>脊索动物门</td>
</tr>
<tr>
<th>亚门：</th>
<td>脊椎动物亚门</td>
</tr>
<tr>
<th>纲：</th>
<td>哺乳纲</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6">
<table class="encyclopedias">
<tbody>
<tr>
<th width="80">亚纲：</th>
<td>真兽亚纲</td>
</tr>
<tr>
<th>目：</th>
<td>长鼻目</td>
</tr>
<tr>
<th>科：</th>
<td>象科</td>
</tr>
<tr>
<th>属：</th>
<td>亚洲象属、非洲象属</td>
</tr>
<tr>
<th>种：</th>
<td>普通非洲象，非洲森林象，亚洲象</td>
</tr>
<tr>
<th rowspan="2">分布区域：</th>
<td rowspan="2">非洲撒哈拉沙漠以南和南亚及东南亚以及中国南部边</td>
</tr>
</tbody>
</table>
</div>
</div>
<article class="content-detail">
<ul class="nav nav-tabs nav-tabs-main" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#content-detail-tab-0" role="tab" data-toggle="tab">释义</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content-detail-tab-1" role="tab" data-toggle="tab">视频
<div class="badge badge-secondary">2</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content-detail-tab-2" role="tab" data-toggle="tab">音频</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-map" href="#content-detail-tab-3" role="tab" data-toggle="tab">图谱</a>
</li>
</ul>
<div class="tab-content pt-3">
<div class="tab-pane show active" id="content-detail-tab-0" role="tabpanel">
<p>哺乳纲，长鼻目，象科。陆上现存最大的哺乳动物。肩高2.5～3.0米。皮厚毛少，肢粗如柱。鼻与上唇愈合成圆筒状长鼻，鼻端有指状突起一或两个。上颌门齿大而长，称“象牙”。有两种：亚洲象（Elephas maximus），体较小，额部下凹，鼻端具一指状凸起，耳小，后足四蹄。仅雄象有象牙，分布于南亚、东南亚等地；亦见于中国云南等地，国家一级保护动物。非洲象（Loxodonta africana），体较大，额部凸出，鼻端有两个指状凸起，耳大披肩，后足三蹄。雌雄均有象牙，不易驯服，分布于非洲。</p>
</div>
<div class="tab-pane" id="content-detail-tab-1" role="tabpanel">
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
</div>
<div class="tab-pane" id="content-detail-tab-2" role="tabpanel">
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
</div>
<div class="tab-pane" id="content-detail-tab-3" role="tabpanel">
<div id="chart-earth"></div>
</div>
</div>
</article>
</div>
</div>
<script src="js/plugins/jquery.min.js"></script>
<script src="js/vendor.js" merge="true"></script>
<script src="js/plugins/echarts.min.js"></script>
<script src="js/plugins/echarts-gl.js"></script>
<script>
$(function() {
// 折叠展开
$('.js-collapse').each(function() {
var $this = $(this);
$($this.attr('href')).on('show.bs.collapse', function() {
$($this.siblings().attr('href')).collapse('hide');
});
});
// 地球
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
}
}
}
};
$("#nav-map").one('shown.bs.tab', function(e) {
var chart = $("#chart-earth").get(0)
var earth = echarts.init(chart)
earth.setOption(option)
})
});
</script>
</body>
</html>
\ No newline at end of file
serverside/cihai-app/src/main/webapp/static/心脏.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<title>心脏</title>
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="js/plugins/swiper.min.css">
</head>
<body>
<div class="container-fluid">
<div class="wrapper-ipad-app-h5">
<div class="header-main-2 clearfix">
<div class="header-main-left">
<h1>象</h1>
<div class="header-main-desc">
<div class="word-read">
<span>【xiàng】</span>
<a class="link js-play-voice" href="javascript:;">
<i class="icon icon-shengyin"></i>
</a>
</div>
<h4>长鼻目象科哺乳动物</h4>
</div>
</div>
<div class="header-main-right">
<div class="album">
<a>
<img src="temp/xiang.jpg">
<span>象图册（5）</span>
</a>
</div>
</div>
</div>
<div class="row encyclopedias">
<div class="col-sm-6">
<table>
<tbody>
<tr>
<th width="80">中文学名：</th>
<td>象</td>
</tr>
<tr>
<th>拉丁学名：</th>
<td>Elephantidae</td>
</tr>
<tr>
<th>别称：</th>
<td>大象</td>
</tr>
<tr>
<th>界：</th>
<td>动物界</td>
</tr>
<tr>
<th>门：</th>
<td>脊索动物门</td>
</tr>
<tr>
<th>亚门：</th>
<td>脊椎动物亚门</td>
</tr>
<tr>
<th>纲：</th>
<td>哺乳纲</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6">
<table class="encyclopedias">
<tbody>
<tr>
<th width="80">亚纲：</th>
<td>真兽亚纲</td>
</tr>
<tr>
<th>目：</th>
<td>长鼻目</td>
</tr>
<tr>
<th>科：</th>
<td>象科</td>
</tr>
<tr>
<th>属：</th>
<td>亚洲象属、非洲象属</td>
</tr>
<tr>
<th>种：</th>
<td>普通非洲象，非洲森林象，亚洲象</td>
</tr>
<tr>
<th rowspan="2">分布区域：</th>
<td rowspan="2">非洲撒哈拉沙漠以南和南亚及东南亚以及中国南部边</td>
</tr>
</tbody>
</table>
</div>
</div>
<article class="content-detail">
<ul class="nav nav-tabs nav-tabs-main" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#content-detail-tab-0" role="tab" data-toggle="tab">释义</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content-detail-tab-1" role="tab" data-toggle="tab">视频
<div class="badge badge-secondary">2</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content-detail-tab-2" role="tab" data-toggle="tab">音频</a>
</li>
<li class="nav-item">
<a class="nav-link" id="heart-tab" href="#content-detail-tab-3" role="tab" data-toggle="tab">图谱</a>
</li>
</ul>
<div class="tab-content pt-3">
<div class="tab-pane show active" id="content-detail-tab-0" role="tabpanel">
<p>哺乳纲，长鼻目，象科。陆上现存最大的哺乳动物。肩高2.5～3.0米。皮厚毛少，肢粗如柱。鼻与上唇愈合成圆筒状长鼻，鼻端有指状突起一或两个。上颌门齿大而长，称“象牙”。有两种：亚洲象（Elephas maximus），体较小，额部下凹，鼻端具一指状凸起，耳小，后足四蹄。仅雄象有象牙，分布于南亚、东南亚等地；亦见于中国云南等地，国家一级保护动物。非洲象（Loxodonta africana），体较大，额部凸出，鼻端有两个指状凸起，耳大披肩，后足三蹄。雌雄均有象牙，不易驯服，分布于非洲。</p>
</div>
<div class="tab-pane" id="content-detail-tab-1" role="tabpanel">
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
</div>
<div class="tab-pane" id="content-detail-tab-2" role="tabpanel">
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
<div class="row list-img">
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
<div class="col-sm-3">
<a>
<img class="img-fluid" src="temp/xiang.jpg">
</a>
</div>
</div>
</div>
<div class="tab-pane" id="content-detail-tab-3" role="tabpanel">
<div class="swiper-container tp-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="chart"></div>
</div>
<div class="swiper-slide">
<div class="chart"></div>
</div>
<div class="swiper-slide">
<div class="chart"></div>
</div>
<div class="swiper-slide">
<div class="chart"></div>
</div>
<div class="swiper-slide">
<div class="chart"></div>
</div>
<div class="swiper-slide">
<div class="chart"></div>
</div>
</div>
<div class="swiper-control">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<script src="js/plugins/jquery.min.js"></script>
<script src="js/vendor.js" merge="true"></script>
<script src="js/plugins/echarts.min.js"></script>
<script src="js/plugins/echarts-gl.js"></script>
<script src="js/plugins/swiper.min.js"></script>
<script>
$(function() {
// 折叠展开
$('.js-collapse').each(function() {
var $this = $(this);
$($this.attr('href')).on('show.bs.collapse', function() {
$($this.siblings().attr('href')).collapse('hide');
});
});
// 图谱
//- 心脏
function option(data) {
return {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [{
type: 'tree',
data: [data],
left: "5%",
right: "15%",
top: 0,
//- layout: 'radial',
symbol: 'emptyCircle',
symbolSize: 7,
label: {
offset: [10, -15],
},
initialTreeDepth: -1,
expandAndCollapse: true,
animationDurationUpdate: 750
}]
}
}
var obj = [{
name: '心',
children: [{
name: "心率"
}, {
name: "胸心血管外科学"
}, {
name: "心内膜",
children: [{
name: "感染性心内膜炎"
}, {
name: "心肌",
children: [{
name: "心肌炎"
}, {
name: "心肌病"
}, {
name: "心肌梗死"
}, {
name: "心力储备"
}, {
name: "心输出量"
}, {
name: "心脏传导系统",
children: [{
name: "心脏传导阻滞",
children: [{
name: "心脏起搏器"
}]
}, {
name: "心房",
children: [{
name: "心房扑动"
}, {
name: "心房颤动"
}, {
name: "中心静脉压"
}]
}, {
name: "心室",
children: [{
name: "心室颤动"
}]
}, {
name: "心外膜",
children: [{
name: "心外膜",
children: [{
name: "心包",
children: [{
name: "心脏压塞"
}, {
name: "心包摩擦音"
}, {
name: "心包炎"
}, {
name: "心包络",
children: [{
name: "围心腔",
children: [{
name: "肺",
children: [{
name: '肺气肿',
children: [{
name: "肺心病"
}]
}]
}]
}]
}]
}]
}]
}]
}]
}]
}]
}, {
name: '心脏',
children: [{
name: '心瓣膜病',
children: [{
name: '风湿性心脏病'
}, {
name: '心导管球囊扩张术'
}]
}, {
name: "先天性心脏病",
children: [{
name: "微创心脏外科手术",
}]
}, {
name: "冠心病"
}, {
name: "心力衰竭",
children: [{
name: "强心苷"
}]
}, {
name: "心脏导管检查术",
}, {
name: "心脏内直视手术",
children: [{
name: "体外循环",
children: [{
name: "人工心肺机"
}]
}, {
name: "低温麻醉"
}]
}, {
name: "心脏闭合性损"
}, {
name: "高血压心脏病"
}, {
name: "心音",
children: [{
name: '心脏杂音',
children: [{
name: "心音图"
}]
}, {
name: "胎心音"
}]
}, {
name: "心源性猝死",
children: [{
name: "人工呼吸"
}, {
name: "心脏按压"
}]
}]
}, {
name: "冠心病",
children: [{
name: "心绞痛"
}, {
name: "心律失常"
}, {
name: "急性冠状动脉综合症"
}, {
name: "心肌梗死"
}, {
name: "心力衰竭"
}, {
name: "心源性猝死"
}, {
name: "微创心脏外科手术"
}, {
name: "冠状动脉搭桥术"
}]
}, {
name: "心痛",
children: [{
name: "抗心绞痛药",
chidren: [{
name: "心痛定",
children: [{
name: "硝苯地平"
}]
}, {
name: "消心痛",
children: [{
name: '硝酸异山梨酯'
}]
}]
}, {
name: "麝香保心丸"
}, {
name: "天王补心丹"
}, {
name: "胃痛"
}, {
name: "虫痛"
}, {
name: "心绞痛"
}, {
name: "心肌梗死"
}]
}, {
name: '心律',
children: [{
name: "心律不齐",
children: [{
name: "心动过速"
}, {
name: "心动过缓"
}, {
name: "早搏"
}, {
name: "郁积综合征"
}, {
name: "心脏传导阻滞"
}]
}, {
name: "心动周期",
children: [{
name: "超声心动图"
}]
}, {
name: "心电图",
children: [{
name: "心电图"
}]
}, {
name: "窦性心律"
}]
}, {
name: "心病 \n （中医学）",
children: [{
name: "热入心包"
}, {
name: "水气凌心"
}, {
name: "心血虚"
}, {
name: "心血淤"
}, {
name: "怔忡"
}, {
name: "心悸"
}, {
name: "心阳虚"
}, {
name: "心阴虚"
}, {
name: "盗汗"
}]
}]
var arr = []
$("#heart-tab").one('shown.bs.tab', function(e) {
// 图谱轮播
var swiperTp = new Swiper('.tp-swiper', {
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
onInit: function(swiper) {
var index = swiper.activeIndex
arr.push(index)
var tar = $(".tp-swiper").find(".swiper-slide").eq(index).children().get(0)
var chart = echarts.init(tar)
chart.setOption(option(obj[index]))
},
onSlideChangeEnd: function(swiper) {
var index = swiper.activeIndex
var short = [2, 3, 5]
if (arr.indexOf(index) === -1) {
arr.push(index)
var tar = $(".tp-swiper").find(".swiper-slide").eq(index).children().get(0)
var chart = echarts.init(tar)
if (short.indexOf(index >= 0)) {
chart.setOption(option(obj[index]))
return
}
chart.setOption(option(obj[index]))
}
}
})
})
});
</script>
</body>
</html>
\ No newline at end of file
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/home/index.jsp
......@@ -87,8 +87,8 @@
<div class="row">
<div class="col-lg-11 col-lg-push-6 col-xs-24">
<div class="card">
<div class="card-title">每日一字</div>
<div class="card-title">推荐词条</div>
<%--<div class="card-title">每日一字</div>--%>
<%--<div class="card-title">推荐词条</div>--%>
<div class="card-main">
<div class="card-col card-character">
<div class="card-character-main">
......@@ -123,7 +123,7 @@
</div>
<div class="col-lg-6 col-lg-pull-11 col-xs-12">
<div class="card">
<div class="card-title">知识专题</div>
<%--<div class="card-title">知识专题</div>--%>
<div class="card-main">
<div class="theme clearfix">
<a class="theme-cell" href="javascript:;">中国特色社会主义</a>
......@@ -139,7 +139,7 @@
</div>
<div class="col-lg-7 col-xs-12">
<div class="card">
<div class="card-title">词云</div>
<%--<div class="card-title">词云</div>--%>
<div class="card-main">
<div class="word"></div>
</div>
......@@ -222,5 +222,17 @@
});
});
var ciyun = ['ciyun', 'ciyun2', 'ciyun3']
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
var ran = getRandomInt(0, 3)
$(".word").css({
"background-image": "url(/static/images/" + ciyun[ran] + ".png)"
})
})
</script>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!