CQ_JD
/
nazw


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新媒体矩阵</title>
    <link rel="stylesheet" href="css/conmon.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        .layui-laydate-main,
        .layui-laydate,
        .layui-laydate-hint {
            width: 505px !important;
            height: 261px !important;
            background: #FFFFFF;
            border: 1px solid #EEEEEE;
            box-shadow: 0px 3px 8px 0px rgba(42, 104, 187, 0.29);
            border-radius: 10px !important;
            margin: 0 !important;
        }

        .layui-laydate {
            margin-top: 20px !important;
            left: 60% !important;
        }

        .layui-laydate-content td,
        .layui-laydate-content th {
            width: 70px !important;
        }
    </style>
</head>

<body>
    <div class="cont-width first" style="display: flex;">
        <div class="left" style="width: 838px;padding-right: 47px;border-right: 1px solid rgb(20 88 180 / 18%);">
            <div class="title" style="background-image: url(images/line.png);">
                南岸区政务新媒体发布厅
            </div>
            <div style="display: flex;justify-content: space-between;position: relative;">
                <ul class="list">
                    <li class="click">
                        <img src="images/logo-zf.png" alt=""><span>重庆市南岸区人民政府</span>
                        <img src="images/code-b.png" alt="" class="code">
                        <div class="arrow"></div>
                    </li>
                    <li>
                        <img src="images/logo-zcstc.png" alt=""><span>广阳湾智创生态城</span>
                        <img src="images/code-a.png" alt="" class="code">
                        <div class="arrow" style="display: none;"></div>
                    </li>
                    <li>
                        <img src="images/logo-nawl.png" alt=""><span>南岸文旅</span>
                        <img src="images/code-a.png" alt="" class="code">
                        <div class="arrow" style="display: none;"></div>
                    </li>
                    <li>
                        <img src="images/logo-najkws.png" alt=""><span>南岸健康卫士</span>
                        <img src="images/code-a.png" alt="" class="code">
                        <div class="arrow" style="display: none;"></div>
                    </li>
                    <li>
                        <img src="images/logo-naga.png" alt=""><span>南岸公安</span>
                        <img src="images/code-a.png" alt="" class="code">
                        <div class="arrow" style="display: none;"></div>
                    </li>
                    <li>
                        <img src="images/logo-naxf.png" alt=""><span>重庆南岸消防</span>
                        <img src="images/code-a.png" alt="" class="code">
                        <div class="arrow" style="display: none;"></div>
                    </li>
                </ul>
                <div class="codeBig code1" style="display: none;position: absolute;z-index: 11;">
                    <div id="hoverTitle" style="font-weight: bold;"></div>
                    <img id="hoverImg" src="images/code-big.png" alt="">
                    <div style="display: flex;align-items: center;">
                        <div class="line"></div>
                        <div>扫码关注</div>
                        <div class="line"></div>
                    </div>
                </div>
                <div class="message messagetop"></div>
            </div>
        </div>
        <div class="right" style="width: 477px;padding-left: 48px;">
            <div class="title" style="background-image: url(images/line2.png);">
                南岸发布
            </div>
            <div class="time">
                <div id="time"
                    style="width: 100%;height:100%;position: absolute;display: flex;align-items: center;justify-content: center;">
                </div>
                <img src="images/logo-rl.png" alt="" class="logo">
                <img id="arrowTimeImg" src="images/arrow.png" alt="" class="arrow">
            </div>
            <div class="message" style="padding: 2px 23px;">
                <ul class="datali"></ul>
            </div>
        </div>
    </div>
    <div class="cont-width second">
        <div class="recommended">
            <div class="title" style="background-image: url(images/recommended.png);">热点推荐</div>
            <div class="shuaxin">
                <i class="iconfont ">&#xe613;</i>
            </div>
            <div class="huan select-hand" onclick="getHotRecommend()">
                换一换
            </div>
        </div>
        <div class="zhong" id="hotZhong">

        </div>
    </div>
    <div class="cont-width third">
        <ul class="top select-hand">
        <li id="headTab1" class="click" onclick="checkTab(1)"><img src="images/weixin.png" alt=""><span>微信公众号</span></li>
        <li id="headTab2" onclick="checkTab(2)"><img id="toutiaoImg" src="images/toutiao2.png" alt=""><span>今日头条</span></li>
        </ul>
        <div id="tab1" class="list" style="display: block">
            <div style="width: 1394px;position: relative;padding-bottom: 30px">
            <div id="messageDialogT" class="message" tabindex="1" onblur="closeDialog()" style="display:none;position: absolute;z-index: 11;">
                    <div id="messageDialog"></div>
                <div id="messageArrow" style="top: 175px" class="arrow"></div>
                </div>
                <ul class="banner" style="width: 697px;">
                    <li index="2" class="click" style="cursor:pointer;">南岸区</li>
                    <li index="0" style="cursor:pointer;">各区县政府</li>
                    <li index="1" style="cursor:pointer;">巿级部门</li>
                </ul>
                <ul class="item" id="ofaList"></ul>
            </div>
        </div>
        <div id="tab2" class="toutiao" style="padding: 30px;display: none">
            <div id="jrttList">
                <!-- <div class="news-item">
                <div class="jigou"><span>南岸文旅</span></div>
                <p>离不开的南岸⑦ | 凭南卧听，彼岸时光</p>
                <span class="time">2022-01-24 11:09</span>
            </div> -->
            </div>
        </div>
    </div>
    <div class="cont-width four">
        <div>
            <div class="title" style="background-image: url(images/senction2.png);width: 1295px;">
                政务新媒体服务集锦
            </div>
            <ul class="down">
            <li class="one model-item" data-url="images/xgyy.jpg"><text>新冠疫苗预约</text></li>
            <li class="two model-item" data-url="images/nasf_code.png"><text>法律服务</text></li>
            <li class="three model-item" data-url="images/shjf_code.png"><text>生活缴费</text></li>
            <li class="four model-item" data-url="images/wzcx_code.png"><text>违规查询</text></li>
            </ul>
        </div>

    </div>
</body>
<script src="layui/layui.all.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/index.js"></script>
<script>
    // 日历的监听事件
    var timeInput = $('.first .right .time');
    var logo = $('.first .right .logo');
    var arrow = $('.first .right .arrow');
    $(document).click(function () {
        setTimeout(function () {
            if ($('.layui-laydate').length) {
                timeInput.css({ 'background': '#4DA1F6', 'color': '#FFFFFF' })
                logo.attr('src', "images/logo-rl2.png")
                arrow.attr('src', "images/arrow2.png");
            } else {
                timeInput.css({ 'background': '#F4FAFF', 'color': '#1458B4' })
                logo.attr('src', "images/logo-rl.png")
                arrow.attr('src', "images/arrow.png");
                timeInput.removeClass('click');
            }
        }, 50)
    })
    $('.first .right .time').click(function () {
        var classStr = $(this).attr('class');
        if (classStr && classStr.indexOf('click') != -1) {
            $(this).css({ 'background': '#F4FAFF', 'color': '#1458B4' })
            logo.attr('src', "images/logo-rl.png")
            arrow.attr('src', "images/arrow.png");
            $('.layui-laydate').remove();
            $(this).removeClass('click');
        } else {
            $(this).css({ 'background': '#4DA1F6', 'color': '#FFFFFF' })
            logo.attr('src', "images/logo-rl2.png")
            arrow.attr('src', "images/arrow2.png");
            $(this).addClass('click');
        }
    })

</script>
<script>
    // 热点
    var hotList = [];
    // 刷新后回到顶部
    window.onbeforeunload = function () {
        window.scrollTo(0,0);
    };
    // 进入页面调用
    window.onload = function () {
        //获取iframeID
        var content_iframe = window.parent.document.getElementsByTagName("iframe");
        $(content_iframe[1]).css("width", "1400px");
        $(content_iframe[1]).css("height", "2500px");
        $('.model-item').on('click', function () {
            var url = $(this).attr('data-url');
            layer.open({
                type: 1,
                title: '',
                offset: ['38%', '40%'],
                closeBtn: 0, //不显示关闭按钮
                anim: 2,
                shadeClose: true, //开启遮罩关闭
                content: '<img style="width:344px;height:344px;" src="' + url + '"></img>'
            });
        });
        // 南岸发布今天的数据
        changeDate({ date: new Date() }, PATH);
        // 南岸区政务新媒体发布厅
        getajaxTop({ page: 1, limit: 12, name: "重庆市南岸区人民政府" }, PATH);
        // 初始化发布厅数据
        initHotData();
        // 获取热点推荐数据
        getHotRecommend();
        // 今日头条，微信公共号
        getTabData({ type: 1, official: "重庆市南岸区人民政府" }, PATH);
        // 微信公众号 南岸区
        initPage();
    };
    // 日历选择时间
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        var myDate = new Date();//获取当前时间设置选择时间的范围
        var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate());//拼接当前是时间
        //执行一个laydate实例
        laydate.render({
            elem: '#time',
            value: new Date(),
            showBottom: false,
            max: maxtime,
            change: function (value, date) {
            }, done: function (value, date, endDate) {
                changeDate({ date: value }, PATH); // 时间改变获取值
                var timeInput = $('.first .right .time');
                var logo = $('.first .right .logo');
                var arrow = $('.first .right .arrow');
                timeInput.css({ 'background': '#F4FAFF', 'color': '#1458B4' })
                logo.attr('src', "images/logo-rl.png")
                arrow.attr('src', "images/arrow.png");
            }, ready: function (date) {
                $("#arrowTimeImg").attr('src', "images/arrow.png");
            }
        });
    });
</script>
<script>

    //
    // 南岸区政务新媒体发布中心的列表点击样式
    var tapsIndex = 1;
    $('.first .list li').click(function () {
        $(this).addClass('click').siblings().removeClass('click');

        var tapsTitleLi = $('.first .list li');
        var tabsArrowli = $('.first .list li .arrow');
        var tapCode = $('.first .list li .code');
        tapsTitleLi.each(function (index) {
            var classStr = $(this).attr('class');
            if (classStr && classStr.indexOf('click') != -1) {
                tapsIndex = index;
            }
        });

        tabsArrowli.each(function (index) {
            if (tapsIndex == index) {
                $(this).show();
            } else {
                $(this).hide();
            }
        })
        tapCode.each(function (index) {
            if (tapsIndex == index) {
                $(this).attr('src', 'images/code-b.png');
            } else {
                $(this).attr('src', 'images/code-a.png');
            }
        })
        var params = { page: 1, limit: 12, name: $(this)[0].innerText };
        getajaxTop(params, PATH);
    })

    // 南岸区政务新媒体发布中心二维码hover事件
    var codeSrc = '';
    var mediaTitle = ['重庆市南岸区人民政府', '广阳湾智创生态城', '南岸文旅', '南岸健康卫士', '南岸公安', '重庆南岸消防'];
    var mediaImg = ['images/naqrmzfewm.png', 'images/gywzcstc_qrcode.jpg', 'images/nawlewm.png', 'images/najkwsewm.png', 'images/nagaewm.png', 'images/naxfewm.png'];
    $('.first .list li .code').mouseover(function () {
        $(this).addClass('hover');
        var tapsTitleLi = $('.first .list li .code');
        var hoverTitle = $('#hoverTitle');
        var hoverImg = $('#hoverImg');
        tapsTitleLi.each(function (index) {
            var classStr = $(this).attr('class');
            if (classStr && classStr.indexOf('hover') != -1) {
                hoverTitle[0].innerText = mediaTitle[index];
                hoverImg[0].setAttribute("src", mediaImg[index]);
                $('.code1').css('top', (index * 75) + 'px')
            }
        });
        codeSrc = $(this)[0].src;
        $('.code1').css('display', 'flex')
        if ($(this)[0].src.indexOf('code-c.png') != -1) {
            $(this).attr('src', 'images/code-a.png');
        } else {
            $(this).attr('src', 'images/code-c.png');
        }
    })
    $('.first .list li .code').mouseout(function () {
        $(this).attr('src', codeSrc);
        $('.code1').css('display', 'none')
        $(this).removeClass('hover');
    })
</script>

<script>
    // 获取热点推荐
    function getHotRecommend() {
        var items = [0, 1, 2, 3, 4, 5];
        var hotIndexs = getRandomArrayElements(items, 4);
        var subIndexs = [];
        subIndexs.push(getRandom(hotList[hotIndexs[0]].length - 1))
        subIndexs.push(getRandom(hotList[hotIndexs[1]].length - 1))
        subIndexs.push(getRandom(hotList[hotIndexs[2]].length - 1))
        subIndexs.push(getRandom(hotList[hotIndexs[3]].length - 1))
        var hotData = []
        for (var i = 0; i < 4; i++) {
            hotData.push(hotList[hotIndexs[i]][subIndexs[i]])
        }
        var hotHtml = ""
        hotData.forEach((item) => {
            console.log('item', item)
            if (!item.url) {
                item.url = ''
            }
            hotHtml += `<div onclick="openUrl('${item.url}')" class="mokuai1 select-hand"><div class="top">${item.title}</div><div class="center"><div class="left">${item.nowTime}</div><div class="right"></div></div><div class="border"></div><div class="bottom"><img class="left" src="${getHotLogo(item.officialAccount)}"></img><div class="center">${item.officialAccount}</div><img class="right" src="images/erweima.png"></div></div>`
        });
        hotHtml += "<div class=\"codeBig code2\" style=\"display: none;position: absolute;z-index: 11;\">" +
            "<div style=\"font-weight: bold;\" id=\"hoverHotTitle\"></div>" +
            "<img id=\"hoverHotImg\" src=\"images/code-big.png\" alt=\"\">" +
            "<div style=\"display: flex;align-items: center;\">" +
            "<div class=\"line\"></div>" +
            "<div>扫码关注</div>" +
            "<div class=\"line\"></div>" +
            "</div>" +
            "</div>"
        $("#hotZhong").html(hotHtml)

        // 南岸区政务新媒体发布中心二维码hover事件
        var codeSrc = '';
        var mediaTitle = ['重庆市南岸区人民政府', '广阳湾智创生态城', '南岸文旅', '南岸健康卫士', '南岸公安', '重庆南岸消防'];
        var mediaImg = ['images/naqrmzfewm.png', 'images/gywzcstc_qrcode.jpg', 'images/nawlewm.png', 'images/najkwsewm.png', 'images/nagaewm.png', 'images/naxfewm.png'];
        // 热点推荐二维码hover事件
        $('.second .bottom .right').mouseover(function () {
            $(this).addClass('hover');
            var tapsTitleLi = $('.second .bottom .right');
            var hoverTitle = $('#hoverHotTitle');
            var hoverImg = $('#hoverHotImg');
            tapsTitleLi.each(function (index) {
                var classStr = $(this).attr('class');
                if (classStr && classStr.indexOf('hover') != -1) {
                    hoverTitle[0].innerText = mediaTitle[hotIndexs[index]];
                    hoverImg[0].setAttribute("src", mediaImg[hotIndexs[index]]);
                    if (index < 3) {
                        $('.code2').css('left', ((index + 1) * 320) + 'px')
                    } else {
                        $('.code2').css('left', (3 * 320) + 40 + 'px')
                    }

                }
            });
            codeSrc = $(this)[0].src;
            $('.code2').css('display', 'flex')
            if ($(this)[0].src.indexOf('erweima1.png') != -1) {
                $(this).attr('src', 'images/erweima1.png');
            } else {
                $(this).attr('src', 'images/erweima1.png');
            }
        })
        $('.second .bottom .right').mouseout(function () {
            $(this).attr('src', codeSrc);
            $('.code2').css('display', 'none')
            $(this).removeClass('hover');
        })
    }

    // 初始化热点推荐的列表
    function initHotData() {
        hot1 = getHotData({ page: 1, limit: 12, name: "重庆市南岸区人民政府" }, PATH);
        hot2 = getHotData({ page: 1, limit: 12, name: "广阳湾智创生态城" }, PATH);
        hot3 = getHotData({ page: 1, limit: 12, name: "南岸文旅" }, PATH);
        hot4 = getHotData({ page: 1, limit: 12, name: "南岸健康卫士" }, PATH);
        hot5 = getHotData({ page: 1, limit: 12, name: "南岸公安" }, PATH);
        hot6 = getHotData({ page: 1, limit: 12, name: "重庆南岸消防" }, PATH);
        hotList.push(hot1);
        hotList.push(hot2);
        hotList.push(hot3);
        hotList.push(hot4);
        hotList.push(hot5);
        hotList.push(hot6);
        console.log('list', hotList)
    }

    // 拿随机数组
    function getRandomArrayElements(arr, count) {
        var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
        while (i-- > min) {
            index = Math.floor((i + 1) * Math.random());
            temp = shuffled[index];
            shuffled[index] = shuffled[i];
            shuffled[i] = temp;
        }
        return shuffled.slice(min);
    }

    // 拿随机值
    function getRandom(max) {
        return Math.round(Math.random() * max);
    }

    function getHotLogo(str) {
        switch (str) {
            case "重庆市南岸区人民政府":
                return "images/logo-zf.png";
                break;
            case "广阳湾智创生态城":
                return "images/logo-zcstc.png";
                break;
            case "南岸文旅":
                return "images/logo-nawl.png";
                break;
            case "南岸健康卫士":
                return "images/logo-najkws.png";
                break;
            case "南岸公安":
                return "images/logo-naga.png";
                break;
            case "重庆南岸消防":
                return "images/logo-naxf.png";
                break;
        }
    }
</script>

<script>
    function checkTab(id) {
        if (id == 1) {
            if ($("#tab1").css("display") == 'none') {
                $("#tab1").css("display", "block");
                $("#headTab1").addClass('click');
                $("#headTab2").removeClass('click');
                $("#tab2").css("display", "none");
                $("#toutiaoImg").attr('src', "images/toutiao2.png")
            }
        } else {
            if ($("#tab2").css("display") == 'none') {
                $("#tab2").css("display", "block")
                $("#headTab2").addClass('click');
                $("#headTab1").removeClass('click');
                $("#tab1").css("display", "none");
                $("#toutiaoImg").attr('src', "images/toutiao.png")
            }
        }
    }
    // 南岸区公众号矩阵的tab进行切换
    $(".third .banner li").click(function () {
        var index = this.getAttribute("index");
        $(".third .banner li")[0].classList = [];
        $(".third .banner li")[1].classList = [];
        $(".third .banner li")[2].classList = [];
        $("#messageDialogT").css("display", "none");
        page = 1;
        if (index == 2) {
            $(".third .banner li")[0].classList = ['click'];
            initPage();
        } else if (index == 0) {
            $(".third .banner li")[1].classList = ['click'];
            regionPage();
        } else if (index == 1) {
            $(".third .banner li")[2].classList = ['click'];
            departments();
        }
    });
    function closeDialog(){
        var tapsTitleLi = $('.third .list .wxInfo');
        {
            for (var i = 0; i < tapsTitleLi.length; i++) {
                tapsTitleLi[i].classList = ['wxInfo'];
            }
            $("#messageDialogT").css("display", "none")
        }
    }
    function openDetail(index, name) {
        var tapsTitleLi = $('.third .list .wxInfo');
        var left = index % 6;
        var top = parseInt(index / 6);
        if ($("#messageDialogT").css("display") == 'none') {
            tapsTitleLi[index].classList = ['wxInfo click'];
            $("#messageDialogT").addClass("click");
            $("#messageDialogT").css("display", "block");
            $("#messageDialogT").focus();
            document.onkeydown=function(event){
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if(e && e.keyCode==9){
                    e.preventDefault();
                }
            };
            $("#messageDialogT").css("top", (top*200) + "px");
            $("#messageDialogT").css("left", (250 + left*220) + "px");
            if (left >= 4) {
                $("#messageArrow").css("left", 433 + "px");
                $("#messageArrow").css("transform", "rotate(45deg)");
                $("#messageDialogT").css("left", (left * 220 - 425) + "px");
            } else {
                $("#messageArrow").css("left", -14 + "px");
                $("#messageArrow").css("transform", "rotate(224deg)");
            }
            regionWeChartList(name);
        } else {
            for (var i = 0; i < tapsTitleLi.length; i++) {
                tapsTitleLi[i].classList = ['wxInfo'];
            }
            $("#messageDialogT").css("display", "none")
        }
    }
</script>


</html>