<!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"/>
</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}">
    </div>
    <div id="ad">
        <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}">
        </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="notice,status : ${noticeList}">
                    <a style="color: #c70011" th:href="@{/public_view.html(type=1,id=${notice.noticeId})}" th:title="${notice.noticeTitle}" target="_blank" >[[${#strings.abbreviate(notice.noticeTitle,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>
                        <tbody 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>
                        </tbody>
                    </div>
                </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="max-height: 400px;overflow: hidden;">
                        <div style="width:100%;height: 163px;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>
                    </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="max-height: 400px;overflow: hidden;">
                            <div 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;">时间:[[${#dates.format(workList[0].createTime, 'yyyy年MM月dd日')}]]</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">[[${#dates.format(work.createTime, 'yyyy年MM月dd日')}]]</span>
                                </li>
                            </ul>
                        </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="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">
                <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="max-height: 400px;overflow: hidden;">
                            <ul  class="newslist-to">
                                <li style="list-style: none" th:each="business,status : ${businessList}" 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">[[${#dates.format(business.createTime, 'yyyy年MM月dd日')}]]</span>
                                </li>
                            </ul>
                        </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">
                    <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">
                    <div class="layui-card-body layui-row">
                        <div class="lianjieBox">
                            <ul class="lianjieList">
                                <li>
                                    <a target="_blank" href="http://www.gj.jcy/">中华人民共和国最高人民检察院</a>
                                    <span>&gt;&gt;</span>
                                </li>
                                <li>
                                    <a target="_blank" href="http://143.208.161.100/">甘肃省人民检察院</a>
                                    <span>&gt;&gt;</span>
                                </li>
                                <li>
                                    <a target="_blank" href="http://143.212.248.10">兰州铁路运输检察院</a>
                                    <span>&gt;&gt;</span>
                                </li>
                                <li>
                                    <a target="_blank" href="http://143.212.252.50" >武威铁路运输检察院</a>
                                    <span>&gt;&gt;</span>
                                </li>
                                <li>
                                    <a target="_blank" href="#">西宁铁路运输检察院</a>
                                    <span>&gt;&gt;</span>
                                </li>
                                <li>
                                    <a target="_blank" href="#">银川铁路运输检察院</a>
                                    <span>&gt;&gt;</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>
<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 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);
    }
</style>
<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">
    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);
        }

    const slides = document.querySelectorAll('.slide');
    let 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,
    });

    let el = document.querySelector('#ad');
    let styleTop = 0;
    let styleLeft = 0;
    let verticalFlag = true;
    let horizontalFlag = true;
    let 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', () => {
        isMouseOver = true;
    });

    el.addEventListener('mouseout', () => {
        isMouseOver = false;
    });
    function closeAd(){
        isMouseOver = true;
        el.style.display = 'none'
    }
</script>
</body>
</html>