|
|
<!DOCTYPE html>
|
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>甘肃省人民检察院兰铁分院</title>
|
|
|
<link th:href="@{/home/base/favicon.ico}" rel="shortcut icon"/>
|
|
|
<link href="/home/lib/css/layui.css" th:href="@{/home/lib/css/layui.css}" rel="stylesheet"/>
|
|
|
<link th:href="@{/css/font-awesome.min.css?v=4.7.0}" rel="stylesheet"/>
|
|
|
<link rel="stylesheet" th:href="@{/js/base/owl-carousel/owl.carousel.css}">
|
|
|
<link rel="stylesheet" th:href="@{/js/base/owl-carousel/owl.theme.css}">
|
|
|
<link th:href="@{/css/base.css}" rel="stylesheet"/>
|
|
|
<style>
|
|
|
#owl-demo .item{
|
|
|
background-color: rgba(30,159,255,0.11);
|
|
|
padding: 30px 0px;
|
|
|
margin: 10px;
|
|
|
color: #FFF;
|
|
|
display:flex;
|
|
|
align-items:center;
|
|
|
justify-content:center;
|
|
|
-webkit-border-radius: 3px;
|
|
|
-moz-border-radius: 3px;
|
|
|
border-radius: 3px;
|
|
|
text-align: center;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
#owl-demo .item:hover {
|
|
|
transform: translateY(-5%);
|
|
|
}
|
|
|
#owl-demo .item a{
|
|
|
height: 74px;
|
|
|
line-height: 41px;
|
|
|
}
|
|
|
#owl-demo .item span{
|
|
|
display:inline-block;
|
|
|
width:50px;
|
|
|
height:50px;
|
|
|
border-radius:50%;
|
|
|
font-size:28px;
|
|
|
line-height:50px;
|
|
|
background-color:rgba(27, 110, 196, 0.68);
|
|
|
}
|
|
|
.customNavigation{
|
|
|
text-align: center;
|
|
|
}
|
|
|
.customNavigation a{
|
|
|
-webkit-user-select: none;
|
|
|
-khtml-user-select: none;
|
|
|
-moz-user-select: none;
|
|
|
-ms-user-select: none;
|
|
|
user-select: none;
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
|
}
|
|
|
.layui-col-md6{
|
|
|
min-height: 461px;
|
|
|
}
|
|
|
.layui-card{
|
|
|
min-height: 461px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="layui-bg-gray" style="">
|
|
|
<div id="content">
|
|
|
<!--头部-->
|
|
|
<th:block th:include="home_head1 :: home_head"/>
|
|
|
<div id="back-to-top" onclick="scrollToTop()">
|
|
|
<img th:src="@{/home/base/fanhui.png}" alt="返回顶部">
|
|
|
</div>
|
|
|
<div id="ad" th:if="${specialColumns[0].remark == '0'}">
|
|
|
<a th:href="@{/special_view.html(columnId=${specialColumns[0].columnId})}" th:title="${specialColumns[0].columnName}" target="_blank">
|
|
|
<img style="width: 100% ;filter: brightness(1.1);" th:src="${specialColumns[0].columnUrl}" th:alt="${specialColumns[0].columnName}">
|
|
|
</a>
|
|
|
<a onclick="closeAd()"><span>关闭</span></a>
|
|
|
</div>
|
|
|
<div class="layui-container" style="min-width: 1330px">
|
|
|
<div class="notice">
|
|
|
<div class="notice__inner">
|
|
|
<div class="notice__item" th:each="work,status : ${workList}">
|
|
|
<a style="color: #c70011" th:href="@{/public_view.html(type=2,id=${work.workId})}" th:title="${work.workTitle}" target="_blank" >[[${#strings.abbreviate(work.workTitle,33)}]]</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-row layui-col-space1">
|
|
|
<div class="layui-col-md6">
|
|
|
<div class="layui-carousel" id="ID-carousel-demo-image" style="width: 650px;height: 462px;">
|
|
|
<div carousel-item>
|
|
|
<div th:each="url,status : ${urlList}">
|
|
|
<a th:href="@{/public_view.html(type=2,id=${url.workId})}" th:title="${url.workTitle}" target="_blank">
|
|
|
<img th:src="${url.imgUrl}" style="height: 100%;width: 100% ;filter: brightness(1.1);">
|
|
|
<span class="sliderA">[[${#strings.abbreviate(url.workTitle,28)}]]</span>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<span style="position: absolute;top: 45%;left: 20%;" th:if="${urlList.isEmpty()}">
|
|
|
<img src="/home/base/nodata.png"/>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-md6">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">
|
|
|
<i class="layui-icon layui-icon-notice" style="display: inline-block;font-size: 21px;
|
|
|
font-weight: bold;border-bottom: 3px solid #0b61d3;height: 100%;line-height: 40px;color: #0b61d3;">最新通知</i>
|
|
|
<span class="more">
|
|
|
<a href="announce_view.html" target="_blank">更多+</a>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="layui-card-body" style="min-height: 400px;overflow: hidden;">
|
|
|
<div th:if="${!noticeList.isEmpty()}" style="width:100%;height: 125px;border-bottom: 1px solid #e6e6e6;box-sizing: border-box;line-height: 47px">
|
|
|
<h1 style="font-size: 22px;">
|
|
|
<a th:href="@{/public_view.html(type=1,id=${noticeList[0].noticeId})}" th:title="${noticeList[0].noticeTitle}" target="_blank" >[[${#strings.abbreviate(noticeList[0].noticeTitle,33)}]]</a>
|
|
|
</h1>
|
|
|
<p style="font-size: 16px;color: #777;">时间:[[${#dates.format(noticeList[0].createTime, 'yyyy年MM月dd日')}]]</p>
|
|
|
</div>
|
|
|
<ul class="newslist-to newslist-to-l">
|
|
|
<li th:each="notice,status : ${noticeList}" th:if="${!status.first}">
|
|
|
<a th:href="@{/public_view.html(type=1,id=${notice.noticeId})}" th:title="${notice.noticeTitle}" target="_blank" >[[${#strings.abbreviate(notice.noticeTitle,33)}]]</a>
|
|
|
<span class="time" >[[${#dates.format(notice.createTime, 'yyyy年MM月dd日')}]] </span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<span style="position: absolute;top: 45%;left: 20%;" th:if="${noticeList.isEmpty()}">
|
|
|
<!-- <p>暂无内容</p>-->
|
|
|
<img src="/home/base/nodata.png"/>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 宣传图-->
|
|
|
<div class="layui-container" style="padding-top: 30px;min-width: 1330px">
|
|
|
<div class="xuanchuanImage">
|
|
|
<a th:href="@{/special_view.html(columnId=${specialColumns[0].columnId})}" th:title="${specialColumns[0].columnName}" target="_blank">
|
|
|
<img th:src="@{/home/base/dangji.jpg}" style="width: 100%;filter: brightness(1.1);" class="slide active">
|
|
|
</a>
|
|
|
<a th:href="@{/special_view.html(columnId=${specialColumns[1].columnId})}" th:title="${specialColumns[1].columnName}" target="_blank">
|
|
|
<img th:src="@{/home/data/announceimg/21da.png}" style="width: 100%;filter: brightness(1.1);" class="slide">
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--工作动态、内设部门-->
|
|
|
<div class="layui-container" style="padding-top: 30px;min-width: 1330px">
|
|
|
<div class="layui-row layui-col-space15">
|
|
|
<div class="layui-col-md6">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header"><i class="layui-icon layui-icon-note" style="display: inline-block;font-size: 21px;
|
|
|
font-weight: bold;border-bottom: 3px solid #0b61d3;height: 100%;line-height: 40px;color: #0b61d3;">工作动态</i>
|
|
|
<span class="more">
|
|
|
<a href="work_view.html" target="_blank">更多+</a>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="layui-card-body" style="min-height: 400px;overflow: hidden;">
|
|
|
<div th:if="${!workList.isEmpty()}" style="width:100%;height: 165px;display: flex;justify-content: space-between;">
|
|
|
<div style="height: 100%;width: 47%;filter: brightness(1.1);">
|
|
|
<a th:href="@{/public_view.html(type=2,id=${workList[0].workId})}" th:title="${workList[0].workTitle}" target="_blank">
|
|
|
<img style="height: 95%;width: 90%" th:src="${workList[0].imgUrl}" th:alt="${workList[0].workTitle}" th:title="${workList[0].workTitle}">
|
|
|
</a>
|
|
|
</div>
|
|
|
<div style="height: 100%;width: 51%;text-align:left;line-height: 40px;">
|
|
|
<a th:href="@{/public_view.html(type=2,id=${workList[0].workId})}" th:title="${workList[0].workTitle}" target="_blank">
|
|
|
<b style="font-size:18px;">[[${#strings.abbreviate(workList[0].workTitle,28)}]]</b><br/>
|
|
|
<p style="font-size: 16px;color: #777;">[[${workList[0].createBy}]]</p>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<ul class="newslist-to newslist-to-l">
|
|
|
<li th:each="work,status : ${workList}" th:if="${!status.first}">
|
|
|
<a th:href="@{/public_view.html(type=2,id=${work.workId})}" th:title="${work.workTitle}" target="_blank">[[${#strings.abbreviate(work.workTitle,28)}]]</a>
|
|
|
<span class="time">[[${work.createBy}]]</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<span style="position: absolute;top: 45%;left: 20%;" th:if="${workList.isEmpty()}">
|
|
|
<img src="/home/base/nodata.png"/>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-md6">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header"><i class="layui-icon layui-icon-user" style="display: inline-block;font-size: 21px;
|
|
|
font-weight: bold;border-bottom: 3px solid #0b61d3;height: 100%;line-height: 40px;color: #0b61d3;">部门动态</i>
|
|
|
<span class="more">
|
|
|
<a href="dept_trends_view.html" target="_blank">更多+</a>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="layui-card-body">
|
|
|
<ul class="newslist zhuantidept">
|
|
|
<li th:each="trend,status : ${deptColumns}">
|
|
|
<a th:href="@{/dept_trends_view.html(columnId=${trend.columnId})}" style="color:#fff;" th:title="${trend.columnName}" target="_blank">
|
|
|
<!-- <i class="fa fa-bar-chart-o" th:class="${trend.icon}"></i>-->
|
|
|
<img th:src="@{/home/base/bumen.png}" style="position: absolute;left: 11px;top: 33%;height: 30px;width: 29px;filter: brightness(1.1);">
|
|
|
[[${trend.columnName}]]
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<hr>
|
|
|
<!-- 跳转链接-->
|
|
|
<div class="layui-container" style="min-width: 1330px;">
|
|
|
<div class="layui-card" style="min-height: 210px;">
|
|
|
<div class="layui-card-header">
|
|
|
<!-- <i class="layui-icon layui-icon-website" style="display: inline-block;font-size: 21px;-->
|
|
|
<!-- font-weight: bold;border-bottom: 3px solid #0b61d3;height: 100%;line-height: 40px;color: #0b61d3;">应用系统</i>-->
|
|
|
<span class="systemBg" style="background-image: url(/home/base/down.png)">
|
|
|
应用系统
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="layui-card-body layui-row systemSlider">
|
|
|
<div id="owl-demo" class="owl-carousel">
|
|
|
<div class="item" th:each="content,status : ${contentList}">
|
|
|
<a target="_blank" th:href="@{${content.contentUrl}}" th:title="${content.contentTitle}">
|
|
|
<span style="display:inline-block;width:50px;height:50px;border-radius:50%;font-size:28px;line-height:50px;background-color:rgba(27, 110, 196, 0.68);">
|
|
|
<i style="color: #fff;" class="fa fa-bar-chart-o" th:class="${content.icon}"></i>
|
|
|
</span>
|
|
|
<p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width:120px;color: #0b61d3;font-size: 16px;">
|
|
|
[[${content.contentTitle}]]
|
|
|
</p>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="customNavigation">
|
|
|
<a class="btn prev"></a>
|
|
|
<a class="btn next"></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<hr>
|
|
|
<div class="layui-container" style="min-width: 1330px;">
|
|
|
<div class="layui-row layui-col-space15">
|
|
|
<div class="layui-col-md6" style="width: 70%">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header"><i class="layui-icon layui-icon-tabs" style="display: inline-block;font-size: 21px;
|
|
|
font-weight: bold;border-bottom: 3px solid #0b61d3;height: 100%;line-height: 40px;color: #0b61d3;">检察业务</i>
|
|
|
<span class="more">
|
|
|
<a href="business_view.html" target="_blank">更多+</a>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="layui-card-body" style="min-height: 400px;overflow: hidden;">
|
|
|
<ul class="newslist-to">
|
|
|
<li style="list-style: none" th:each="business,status : ${businessList}" th:if="${!status.first}" th:class="${status.count == 1 ? 'firstLi' : (status.count == 2 ? 'secondLi' : (status.count == 3 ? 'thirdLi' : ''))}">
|
|
|
<span
|
|
|
th:class="${status.count == 1 ? 'first' : (status.count == 2 ? 'second' : (status.count == 3 ? 'third' : ''))}"
|
|
|
style="
|
|
|
text-align: center;
|
|
|
display: inline-block;
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
background-color: #838284;
|
|
|
line-height: 30px;
|
|
|
color: white;
|
|
|
"
|
|
|
>
|
|
|
[[${status.count}]]
|
|
|
</span>
|
|
|
<a th:href="@{/public_view.html(type=4,id=${business.businessId})}" th:title="${business.businessTitle}" target="_blank">[[${#strings.abbreviate(business.businessTitle,28)}]]</a>
|
|
|
<span class="time">[[${business.createBy}]]</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<span style="position: absolute;top: 45%;left: 30%;" th:if="${workList.isEmpty()}">
|
|
|
<img src="/home/base/nodata.png"/>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-md6" style="width: 30%">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header"><i class="layui-icon layui-icon-theme" style="display: inline-block;font-size: 21px;
|
|
|
font-weight: bold;border-bottom: 3px solid #0b61d3;;height: 100%;line-height: 40px;color: #0b61d3;">专题活动</i>
|
|
|
<span class="more">
|
|
|
<a href="special_view.html" target="_blank">更多+</a>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="layui-card-body" style="min-height:400px ">
|
|
|
<div class="myscroll" style="height:380px;overflow:hidden;font-size:13px;color:#666;padding:0 20px;line-height:25px;">
|
|
|
<ul class="newslist zhuanti" style="margin-top: 5px">
|
|
|
<li th:each="column,status : ${specialColumns}">
|
|
|
<a th:href="@{/special_view.html(columnId=${column.columnId})}" th:title="${column.columnName}" target="_blank">
|
|
|
<img style="height:155px;width: 100% ;filter: brightness(1.1);" th:src="${column.columnUrl}">
|
|
|
</a>
|
|
|
<span style="margin-top: 5px;font-size: 15px;">[[${column.columnName}]]</span >
|
|
|
<div style="width: 100%;height: 20px;background-color: white;border-radius: 5px;">
|
|
|
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<hr>
|
|
|
<!-- 兰铁之窗-->
|
|
|
<div class="layui-container" style="min-width: 1330px;">
|
|
|
<div class="layui-card" style="min-height: 210px;">
|
|
|
<div class="layui-card-header">
|
|
|
<!-- <i class="layui-icon layui-icon-website" style="display: inline-block;font-size: 21px;-->
|
|
|
<!-- font-weight: bold;border-bottom: 3px solid #0b61d3;height: 100%;line-height: 40px;color: #0b61d3;">兰铁视窗</i>-->
|
|
|
<span class="systemBg" style="background-image: url(/home/base/down.png)">
|
|
|
兰铁视窗
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="layui-card-body layui-row">
|
|
|
<div class="lantieContent">
|
|
|
<ul class="right">
|
|
|
<li th:each="content,status : ${windowColumns}" style="width:22%;text-align:center;">
|
|
|
<video th:src="${content.columnUrl}" class="video" style="width:100%;"></video>
|
|
|
<span style="font-size: 15px;">[[${content.columnName}]]</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<hr>
|
|
|
<!-- 友情链接 -->
|
|
|
<div class="layui-container" style="min-width: 1330px;">
|
|
|
<div class="layui-card" style="min-height: 360px">
|
|
|
<div class="layui-card-body layui-row">
|
|
|
<div class="lianjieBox">
|
|
|
<ul class="lianjieList">
|
|
|
<li>
|
|
|
<a target="_blank" href="http://www.gj.jcy/">中华人民共和国最高人民检察院</a>
|
|
|
<span>>></span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a target="_blank" href="http://143.208.161.100/">甘肃省人民检察院</a>
|
|
|
<span>>></span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a target="_blank" href="http://143.212.248.10">兰州铁路运输检察院</a>
|
|
|
<span>>></span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a target="_blank" href="http://143.212.252.50" >武威铁路运输检察院</a>
|
|
|
<span>>></span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a target="_blank" href="#">西宁铁路运输检察院</a>
|
|
|
<span>>></span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a target="_blank" href="#">银川铁路运输检察院</a>
|
|
|
<span>>></span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="map">
|
|
|
<li>
|
|
|
<img style="width: 70%;height: 330px;filter: brightness(1.1);" th:src="@{/home/base/map4.png}">
|
|
|
<a class="font1" target="_blank" href="http://143.212.248.10" title="兰州铁路运输检察院">
|
|
|
<img th:src="@{/home/base/2Dmap.png}" class="lantie">
|
|
|
<span>兰州</span>
|
|
|
</a>
|
|
|
<a class="font2" target="_blank" href="http://143.212.252.50" title="武威铁路运输检察院">
|
|
|
<img th:src="@{/home/base/2Dmap.png}" class="wutie">
|
|
|
<span>武威</span>
|
|
|
</a>
|
|
|
<a class="font3" target="_blank" href="#" title="西宁铁路运输检察院">
|
|
|
<img th:src="@{/home/base/2Dmap.png}" class="xitie">
|
|
|
<span>西宁</span>
|
|
|
</a>
|
|
|
<a class="font4" target="_blank" href="#" title="银川铁路运输检察院">
|
|
|
<img th:src="@{/home/base/2Dmap.png}" class="yintie">
|
|
|
<span>银川</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--底部-->
|
|
|
<th:block th:include="home_footer :: home_footer"/>
|
|
|
<script th:src="@{/home/lib/layui.js}"></script>
|
|
|
<script th:src="@{/js/base/js/jquery-1.9.1.min.js}"></script>
|
|
|
<script th:src="@{/js/base/owl-carousel/owl.carousel.js}"></script>
|
|
|
<script>
|
|
|
$(document).ready(function() {
|
|
|
var owl = $("#owl-demo");
|
|
|
owl.owlCarousel({
|
|
|
items :8,
|
|
|
itemsDesktop : [1500,5],
|
|
|
itemsDesktopSmall : [900,3],
|
|
|
itemsTablet: [600,2],
|
|
|
itemsMobile : false
|
|
|
});
|
|
|
$(".next").click(function(){
|
|
|
owl.trigger('owl.next');
|
|
|
})
|
|
|
$(".prev").click(function(){
|
|
|
owl.trigger('owl.prev');
|
|
|
})
|
|
|
});
|
|
|
</script>
|
|
|
<script type="text/javascript" th:inline="javascript">
|
|
|
window.addEventListener('DOMContentLoaded', function () {
|
|
|
var currentUrl = location.href;
|
|
|
// 获取所有的<a>标签
|
|
|
var links = document.querySelectorAll('a');
|
|
|
// 遍历每个链接，并判断其href属性是否与当前URL相同
|
|
|
for (var i = 0; i < links.length; i++) {
|
|
|
if (links[i].href === currentUrl) {
|
|
|
// 添加layui-this类名到对应的父元素的class中
|
|
|
links[i].parentNode.classList.add('layui-this');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
layui.use(function () {
|
|
|
var carousel = layui.carousel;
|
|
|
// 渲染 - 图片轮播
|
|
|
carousel.render({
|
|
|
elem: '#ID-carousel-demo-image',
|
|
|
autoplay: true,
|
|
|
interval: 4000,
|
|
|
indicator: 'inside',
|
|
|
width: '650px',
|
|
|
height: '462px',
|
|
|
anim: 'fade',
|
|
|
});
|
|
|
});
|
|
|
//返回顶部
|
|
|
window.onscroll = function() {scrollFunction()};
|
|
|
function scrollFunction() {
|
|
|
var backToTopBtn = document.getElementById("back-to-top");
|
|
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
|
|
backToTopBtn.style.display = "block";
|
|
|
} else {
|
|
|
backToTopBtn.style.display = "none";
|
|
|
}
|
|
|
}
|
|
|
function scrollToTop() {
|
|
|
window.scrollTo({
|
|
|
top:0,
|
|
|
behavior:"smooth"
|
|
|
});
|
|
|
}
|
|
|
//视频
|
|
|
var videos = document.getElementsByTagName("video");
|
|
|
var videoHover = document.querySelector('.right').getElementsByTagName("li");
|
|
|
|
|
|
for (var i = 0; i < videos.length; i++) {
|
|
|
videos[0].autoplay = true;
|
|
|
videos[0].loop = true;
|
|
|
videos[0].preload = true;
|
|
|
videos[0].muted = true;
|
|
|
// 使用闭包确保在事件监听器中能够正确访问到当前的 video 元素
|
|
|
(function(index) {
|
|
|
videos[index].addEventListener('mouseover', function() {
|
|
|
videos[index].controls = true;
|
|
|
});
|
|
|
|
|
|
videos[index].addEventListener('mouseout', function() {
|
|
|
videos[index].controls = false;
|
|
|
});
|
|
|
})(i);
|
|
|
}
|
|
|
|
|
|
var slides = document.querySelectorAll('.slide');
|
|
|
var currentSlide = 0;
|
|
|
|
|
|
function showNextSlide() {
|
|
|
slides[currentSlide].classList.remove('active');
|
|
|
currentSlide = (currentSlide + 1) % slides.length;
|
|
|
slides[currentSlide].classList.add('active');
|
|
|
}
|
|
|
|
|
|
setInterval(showNextSlide, 3000); // Change every 3 seconds
|
|
|
|
|
|
|
|
|
(function($){
|
|
|
$.fn.myScroll = function(options){
|
|
|
|
|
|
var defaults = {
|
|
|
speed:30,
|
|
|
};
|
|
|
|
|
|
var opts = $.extend({}, defaults, options),intId = [];
|
|
|
|
|
|
function marquee(obj, step){
|
|
|
obj.find("ul").animate({
|
|
|
marginTop: '-=1'
|
|
|
},0,function(){
|
|
|
var s = Math.abs(parseInt($(this).css("margin-top")));
|
|
|
if(s >= $(this).find("li").height()){
|
|
|
$(this).find("li").slice(0, 1).appendTo($(this));
|
|
|
$(this).css("margin-top", 0);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
this.each(function(i){
|
|
|
var sh = speed = opts["speed"],_this = $(this);
|
|
|
intId[i] = setInterval(function(){
|
|
|
if(_this.find("ul").height()<=_this.height()){
|
|
|
clearInterval(intId[i]);
|
|
|
}else{
|
|
|
marquee(_this, sh);
|
|
|
}
|
|
|
}, speed);
|
|
|
|
|
|
_this.hover(function(){
|
|
|
clearInterval(intId[i]);
|
|
|
},function(){
|
|
|
intId[i] = setInterval(function(){
|
|
|
if(_this.find("ul").height()<=_this.height()){
|
|
|
clearInterval(intId[i]);
|
|
|
}else{
|
|
|
marquee(_this, sh);
|
|
|
}
|
|
|
}, speed);
|
|
|
});
|
|
|
|
|
|
});
|
|
|
}
|
|
|
})(jQuery);
|
|
|
$('.myscroll').myScroll({
|
|
|
speed: 30,
|
|
|
});
|
|
|
|
|
|
var el = document.querySelector('#ad');
|
|
|
var styleTop = 0;
|
|
|
var styleLeft = 0;
|
|
|
var verticalFlag = true;
|
|
|
var horizontalFlag = true;
|
|
|
var isMouseOver = false; // 新变量用于跟踪鼠标是否在元素上
|
|
|
|
|
|
// 设置定时器的函数
|
|
|
function moveElement() {
|
|
|
if (!isMouseOver) { // 如果鼠标不在元素上，则继续移动
|
|
|
verticalFlag ? styleTop++ : styleTop--;
|
|
|
horizontalFlag ? styleLeft++ : styleLeft--;
|
|
|
|
|
|
(styleTop <= 0 || styleTop >= window.innerHeight - el.offsetHeight) && (verticalFlag = !verticalFlag);
|
|
|
(styleLeft <= 0 || styleLeft >= window.innerWidth - el.offsetWidth) && (horizontalFlag = !horizontalFlag);
|
|
|
|
|
|
el.style.top = styleTop +'px';
|
|
|
el.style.left = styleLeft + 'px';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
setInterval(moveElement, 20);
|
|
|
|
|
|
// 添加事件监听器以检测鼠标是否在元素上
|
|
|
el.addEventListener('mouseover', function () {
|
|
|
isMouseOver = true;
|
|
|
});
|
|
|
|
|
|
el.addEventListener('mouseout', function () {
|
|
|
isMouseOver = false;
|
|
|
});
|
|
|
function closeAd(){
|
|
|
isMouseOver = true;
|
|
|
el.style.display = 'none'
|
|
|
}
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
var noticeInner = document.querySelector('.notice__inner');
|
|
|
var noticeItems = Array.from(document.querySelectorAll('.notice__item'));
|
|
|
var currentIndex = 0;
|
|
|
if (noticeItems.length > 1) {
|
|
|
function showCurrentNotice() {
|
|
|
var numToShow = Math.min(currentIndex + 1, noticeItems.length);
|
|
|
for (var i = 0; i < noticeItems.length; i++) {
|
|
|
noticeItems[i].style.height = '';
|
|
|
}
|
|
|
for (var i = 0; i < numToShow; i++) {
|
|
|
noticeItems[i].style.height = 'auto';
|
|
|
}
|
|
|
noticeInner.style.transform = "translateY(" + ((-noticeItems[currentIndex].clientHeight * currentIndex)*1.39) + "px)";
|
|
|
noticeInner.style.transition = "all 2.5s";
|
|
|
noticeInner.scrollTop = noticeItems[currentIndex].offsetTop;
|
|
|
|
|
|
}
|
|
|
showCurrentNotice();
|
|
|
|
|
|
setInterval(function () {
|
|
|
currentIndex = (currentIndex + 1) % noticeItems.length;
|
|
|
showCurrentNotice();
|
|
|
}, 2500);
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
