|
|
|
|
@ -34,9 +34,8 @@ |
|
|
|
|
<script type="text/javascript" src="./video-v2_files/kendo.messages.zh-CN.min.js"></script> |
|
|
|
|
<script type="text/javascript" src="./video-v2_files/kendo.culture.zh-CN.min.js"></script> |
|
|
|
|
<script type="text/javascript" src="./video-v2_files/ext.js"></script> |
|
|
|
|
<script type="text/javascript" src="./video-v2_files/common.js></script> |
|
|
|
|
<script type=" text |
|
|
|
|
/javascript" src="./video-v2_files/util.js"></script> |
|
|
|
|
<script type="text/javascript" src="./video-v2_files/common.js"></script> |
|
|
|
|
<script type="text/javascript" src="./video-v2_files/util.js"></script> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
.ztree li span.button.ico_docu { |
|
|
|
|
@ -62,7 +61,17 @@ |
|
|
|
|
margin: 0; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cj-system_date{ |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
line-height: unset !important; |
|
|
|
|
margin-top: -10px; |
|
|
|
|
text-align: right; |
|
|
|
|
} |
|
|
|
|
.cj-system_date .bx{ |
|
|
|
|
display: flex; |
|
|
|
|
} |
|
|
|
|
.inline > label { |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
@ -160,6 +169,52 @@ |
|
|
|
|
.video-top { |
|
|
|
|
height: 100px; |
|
|
|
|
padding-top: 30px; |
|
|
|
|
background-image: url(img/cj-page-head.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-size: cover; |
|
|
|
|
background-position: center; |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-top:before { |
|
|
|
|
content: ''; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 10px; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
top: -5px; |
|
|
|
|
background-image: url(img/cj-page-head_light1.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position-x: -118px; |
|
|
|
|
background-position-y: top; |
|
|
|
|
z-index: 99999; |
|
|
|
|
background-size: contain; |
|
|
|
|
animation: light linear 18s infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-top:after { |
|
|
|
|
content: ''; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 10px; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
bottom: -5px; |
|
|
|
|
background-image: url(img/cj-page-head_light2.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position-x: -118px; |
|
|
|
|
background-position-y: top; |
|
|
|
|
background-size: contain; |
|
|
|
|
animation: light linear 15s infinite; |
|
|
|
|
animation-delay: 1s |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@keyframes light { |
|
|
|
|
0% { |
|
|
|
|
background-position-x: -118px; |
|
|
|
|
} |
|
|
|
|
100% { |
|
|
|
|
background-position-x: 110%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-left { |
|
|
|
|
@ -170,18 +225,21 @@ |
|
|
|
|
position: absolute; |
|
|
|
|
left: -280px; |
|
|
|
|
top: 105px; |
|
|
|
|
background: rgba(63, 81, 116, .9); |
|
|
|
|
background: #061626c4; |
|
|
|
|
z-index: 999; |
|
|
|
|
transition: all .3s linear; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.btn-group{ |
|
|
|
|
width: 100%; |
|
|
|
|
margin-left: 75px; |
|
|
|
|
margin-top: 5px; |
|
|
|
|
} |
|
|
|
|
.video-right { |
|
|
|
|
width: calc(100%); |
|
|
|
|
height: 100%; |
|
|
|
|
height: 95%; |
|
|
|
|
padding: 0px; |
|
|
|
|
position: relative; |
|
|
|
|
padding-left: 65px; |
|
|
|
|
padding-top: 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-list { |
|
|
|
|
@ -190,16 +248,19 @@ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-list li { |
|
|
|
|
height: 100px; |
|
|
|
|
height: 180px; |
|
|
|
|
width: 40px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
background: rgb(53, 64, 90); |
|
|
|
|
background-image: url(img/i.svg); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: center; |
|
|
|
|
background-size: cover; |
|
|
|
|
border-top-right-radius: 10px; |
|
|
|
|
border-bottom-right-radius: 10px; |
|
|
|
|
position: relative; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #fff; |
|
|
|
|
cursor: pointer; |
|
|
|
|
margin-bottom: -13px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-list li span { |
|
|
|
|
@ -210,12 +271,42 @@ |
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-list li.active { |
|
|
|
|
.video-list li.active,.video-list li:hover { |
|
|
|
|
color: #83c3ff; |
|
|
|
|
background-image: url(img/li.active.svg); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
background: rgba(63, 81, 116, 0.9) |
|
|
|
|
.video-list li:nth-child(1) span:before{ |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
|
width: 15px; |
|
|
|
|
height: 15px; |
|
|
|
|
top: -25px; |
|
|
|
|
left: 0; |
|
|
|
|
background-image: url(img/li-icon1.svg); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-size: contain; |
|
|
|
|
background-position: center; |
|
|
|
|
} |
|
|
|
|
.video-list li.active:nth-child(1) span:before,.video-list li:hover:nth-child(1) span:before{ |
|
|
|
|
background-image: url(img/li-icon1-active.svg); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-list li:nth-child(2) span:before{ |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
|
width: 15px; |
|
|
|
|
height: 15px; |
|
|
|
|
top: -25px; |
|
|
|
|
left: 0; |
|
|
|
|
background-image: url(img/li-icon2.svg); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-size: contain; |
|
|
|
|
background-position: center; |
|
|
|
|
} |
|
|
|
|
.video-list li.active:nth-child(2) span:before,.video-list li:hover:nth-child(2) span:before{ |
|
|
|
|
background-image: url(img/li-icon2-active.svg); |
|
|
|
|
} |
|
|
|
|
/*视频样式*/ |
|
|
|
|
.video-ul-list { |
|
|
|
|
width: 100%; |
|
|
|
|
@ -275,49 +366,51 @@ |
|
|
|
|
/*视频点击按钮*/ |
|
|
|
|
.video-btn-box { |
|
|
|
|
float: right; |
|
|
|
|
height: 45px; |
|
|
|
|
width: 440px; |
|
|
|
|
padding-right: 50px; |
|
|
|
|
} |
|
|
|
|
.video-btn-box .cj-system-home{ |
|
|
|
|
margin: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-btn > span { |
|
|
|
|
display: inline-block; |
|
|
|
|
width: 40px; |
|
|
|
|
height: 40px; |
|
|
|
|
width: 20px; |
|
|
|
|
height: 20px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
/*margin-top: 25px;*/ |
|
|
|
|
margin-top: 10px; |
|
|
|
|
margin-right: 25px; |
|
|
|
|
float: left; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-btn > span:nth-child(1) { |
|
|
|
|
background: url(https://enjoyskins.tourage.cn/tourism-projects/theme/black/tourism-projects/static/images/video/1.png) no-repeat center center; |
|
|
|
|
background: url(img/span1.svg) no-repeat center center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-btn > span:nth-child(1).active { |
|
|
|
|
background: url(https://enjoyskins.tourage.cn/tourism-projects/theme/black/tourism-projects/static/images/video/1-1.png) no-repeat center center; |
|
|
|
|
.video-btn > span:nth-child(1).active,.video-btn > span:nth-child(1):hover { |
|
|
|
|
background: url(img/span1-active.svg) no-repeat center center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-btn > span:nth-child(2) { |
|
|
|
|
background: url(https://enjoyskins.tourage.cn/tourism-projects/theme/black/tourism-projects/static/images/video/2.png) no-repeat center center; |
|
|
|
|
background: url(img/span4.svg) no-repeat center center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-btn > span:nth-child(2).active { |
|
|
|
|
background: url(https://enjoyskins.tourage.cn/tourism-projects/theme/black/tourism-projects/static/images/video/2-2.png) no-repeat center center; |
|
|
|
|
.video-btn > span:nth-child(2).active,.video-btn > span:nth-child(2):hover { |
|
|
|
|
background: url(img/span4-active.svg) no-repeat center center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-btn span:nth-child(3) { |
|
|
|
|
background: url(https://enjoyskins.tourage.cn/tourism-projects/theme/black/tourism-projects/static/images/video/3.png) no-repeat center center; |
|
|
|
|
background: url(img/span6.svg) no-repeat center center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-btn > span:nth-child(3).active { |
|
|
|
|
background: url(https://enjoyskins.tourage.cn/tourism-projects/theme/black/tourism-projects/static/images/video/3-3.png) no-repeat center center; |
|
|
|
|
.video-btn > span:nth-child(3).active,.video-btn > span:nth-child(3):hover { |
|
|
|
|
background: url(img/span6-active.svg) no-repeat center center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-btn > span:nth-child(4) { |
|
|
|
|
background: url(https://enjoyskins.tourage.cn/tourism-projects/theme/black/tourism-projects/static/images/video/4.png) no-repeat center center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-btn > span:nth-child(4).active { |
|
|
|
|
.video-btn > span:nth-child(4).active,.video-btn > span:nth-child(4):hover { |
|
|
|
|
background: url(https://enjoyskins.tourage.cn/tourism-projects/theme/black/tourism-projects/static/images/video/4-4.png) no-repeat center center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -506,7 +599,7 @@ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#video-content { |
|
|
|
|
height: calc(100%); |
|
|
|
|
height: calc(95%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#video-content > div { |
|
|
|
|
@ -597,6 +690,15 @@ |
|
|
|
|
<div class="video-top"> |
|
|
|
|
<!--<p class="beijing-title">北京市旅游行业安全视频监控平台</p>--> |
|
|
|
|
<ul class="video-weather"> |
|
|
|
|
<li> |
|
|
|
|
<div class="cj-system_date"> |
|
|
|
|
<div class="date" id="now_date">5月13日</div> |
|
|
|
|
<div class="bx"> |
|
|
|
|
<div class="week" id="week">周四</div> |
|
|
|
|
<div class="time" id="header_shijian">14:47:09</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<div class="weather"><span class="weather-time">实时天气情况<br>----------</span> <span |
|
|
|
|
class="weather-du"><span class="iconfont icon-qing"></span><span |
|
|
|
|
@ -616,23 +718,23 @@ |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div class="video-btn-box"> |
|
|
|
|
|
|
|
|
|
<a class="cj-system-home" href="javascript:gotoIndex();"></a> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div style="height:calc(100vh - 102px);border-top: 1px solid #114A7A;"> |
|
|
|
|
<div class="btn-group"> |
|
|
|
|
<div class="video-btn" id="video_btn"> |
|
|
|
|
<span onclick="setRowCol(1,0);"></span> |
|
|
|
|
<span onclick="setRowCol(4,1);"></span> |
|
|
|
|
<span onclick="setRowCol(6,2);" class="active"></span> |
|
|
|
|
<!--<span onClick="setRowCol(9,3);"></span>--> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="lunbo" style="border: 1px solid rgb(66, 211, 225); padding: 0px 6px 0px 0px;"><span |
|
|
|
|
style="color: rgb(66, 211, 225); float: right;">OFF</span> |
|
|
|
|
<div style="background: rgb(66, 211, 225); float: left;"></div> |
|
|
|
|
</div> |
|
|
|
|
<li style="height:40px;"> |
|
|
|
|
<a class="a_home" href="/"></a> |
|
|
|
|
</li> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div style="height:calc(100vh - 102px);border-top: 1px solid #114A7A;"> |
|
|
|
|
<div class="video-left" id="treelist_div"> |
|
|
|
|
<div class="video_left_box" style="overflow-x: hidden;height:100%; padding-left: 20px;"> |
|
|
|
|
<span id="curr_group_name">当前主题：景区视频</span> |
|
|
|
|
@ -951,7 +1053,27 @@ |
|
|
|
|
|
|
|
|
|
<!--树--> |
|
|
|
|
<script> |
|
|
|
|
$(document).ready(function() { |
|
|
|
|
var time = new Date(); |
|
|
|
|
var mon = time.getMonth() + 1;//月 |
|
|
|
|
var day = time.getDate();//日 |
|
|
|
|
var now_date = (mon<10?"0"+mon:mon) + "月" +(day<10?"0"+day:day) + "日"; |
|
|
|
|
$("#now_date").html(now_date); |
|
|
|
|
var week = "周" + "日一二三四五六".charAt(new Date().getDay()); |
|
|
|
|
$("#week").html(week); |
|
|
|
|
showTime(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
//显示实时时间 |
|
|
|
|
function showTime(){ |
|
|
|
|
var time = new Date(); |
|
|
|
|
var hour = time.getHours();//时 |
|
|
|
|
var minute = time.getMinutes();//分 |
|
|
|
|
var second = time.getSeconds();//秒 |
|
|
|
|
var nowTime = (hour<10?"0"+hour:hour) + ":" + (minute<10?"0"+minute:minute) + ":" + (second<10?"0"+second:second); |
|
|
|
|
$("#header_shijian").html(nowTime); |
|
|
|
|
} |
|
|
|
|
setInterval("showTime()",1000); |
|
|
|
|
//视频节点数组，保存所有的视频信息 |
|
|
|
|
var videoNodesArray = new Array(); |
|
|
|
|
//双击节点数组 |
|
|
|
|
@ -992,7 +1114,10 @@ |
|
|
|
|
} |
|
|
|
|
// //console.log(area); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
//回到主页 |
|
|
|
|
function gotoIndex(){ |
|
|
|
|
window.location.href = "${ctx}/"; |
|
|
|
|
} |
|
|
|
|
function weatherList() { |
|
|
|
|
var area = {}; |
|
|
|
|
var lonLat = _CTX_gdlnglat.split(","); |
|
|
|
|
|
