Quellcode durchsuchen

修改日历样式

sunjuan vor 2 Jahren
Ursprung
Commit
a9d75ab809

+ 2 - 3
nngkxxdp/src/main/resources/static/xmtjz/css/index.css

@@ -221,12 +221,12 @@
 
 .first .right .time {
     height: 49px;
-    background: #4DA1F6;
+    background: #F4FAFF;
     border-radius: 10px;
     margin-top: 20px;
     font-size: 18px;
     font-weight: bold;
-    color: #FFFFFF;
+    color: #1458B4;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -488,7 +488,6 @@ line-height: 24px;
     display: flex;
     align-items: flex-end;
     justify-content: flex-start;
-    padding-left: 20px;
     padding-bottom: 5px;
     box-sizing: border-box;
 }

BIN
nngkxxdp/src/main/resources/static/xmtjz/images/arrow.png


+ 165 - 132
nngkxxdp/src/main/resources/static/xmtjz/index.html

@@ -36,133 +36,172 @@
 </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 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 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 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>
-            <img src="images/logo-rl2.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 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>
-    <div class="zhong" id="hotZhong">
+        <div class="zhong" id="hotZhong">
 
+        </div>
     </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" style="display:none;position: absolute;z-index: 11;">
-                <div id="messageDialog"></div>
-                <div id="messageArrow" class="arrow"></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" style="display:none;position: absolute;z-index: 11;">
+                    <div id="messageDialog"></div>
+                    <div id="messageArrow" 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>
-            <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 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>
-<div class="cont-width four">
-    <div>
-        <div class="title" style="background-image: url(images/senction2.png);width: 1295px;">
-            政务新媒体服务集锦
+    <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">新冠疫苗预约</li>
+                <li class="two model-item" data-url="images/nasf_code.png">法律服务</li>
+                <li class="three model-item" data-url="images/shjf_code.png">生活缴费</li>
+                <li class="four model-item" data-url="images/wzcx_code.png">违规查询</li>
+            </ul>
         </div>
-        <ul class="down">
-            <li class="one model-item" data-url="images/xgyy.jpg">新冠疫苗预约</li>
-            <li class="two model-item" data-url="images/nasf_code.png">法律服务</li>
-            <li class="three model-item" data-url="images/shjf_code.png">生活缴费</li>
-            <li class="four model-item" data-url="images/wzcx_code.png">违规查询</li>
-        </ul>
-    </div>
 
-</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 = []
     // 进入页面调用
@@ -180,15 +219,15 @@
             });
         });
         // 南岸发布今天的数据
-        changeDate({date: new Date()}, PATH);
+        changeDate({ date: new Date() }, PATH);
         // 南岸区政务新媒体发布厅
-        getajaxTop({page: 1, limit: 12, name: "重庆市南岸区人民政府"}, PATH);
+        getajaxTop({ page: 1, limit: 12, name: "重庆市南岸区人民政府" }, PATH);
         // 初始化发布厅数据
         initHotData();
         // 获取热点推荐数据
         getHotRecommend();
         // 今日头条,微信公共号
-        getTabData({type: 1, official: "重庆市南岸区人民政府"}, PATH);
+        getTabData({ type: 1, official: "重庆市南岸区人民政府" }, PATH);
         // 微信公众号 南岸区
         initPage();
     };
@@ -204,25 +243,19 @@
             showBottom: false,
             max: maxtime,
             change: function (value, date) {
-                console.log(value, '999')
-                console.log(date)
             }, done: function (value, date, endDate) {
-                changeDate({date: value}, PATH); // 时间改变获取值
-                console.log(value, '88888'); //得到日期生成的值,如:2017-08-18
-                console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
-                console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
-            }, ready: function(date){
+                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");
             }
         });
     });
-    $('.first .right .arrow').click(function () {
-        var timeInput = $('.first .right .time');
-        var logo = $('.first .right .logo');
-        // background: #4DA1F6;
-        // color: #FFFFFF;
-        // logo-rl2.png
-    })
 </script>
 <script>
 
@@ -256,7 +289,7 @@
                 $(this).attr('src', 'images/code-a.png');
             }
         })
-        var params = {page: 1, limit: 12, name: $(this)[0].innerText};
+        var params = { page: 1, limit: 12, name: $(this)[0].innerText };
         getajaxTop(params, PATH);
     })
 
@@ -298,7 +331,7 @@
         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[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))
@@ -365,12 +398,12 @@
 
     // 初始化热点推荐的列表
     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);
+        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);
@@ -468,13 +501,13 @@
             tapsTitleLi[index].classList = ['wxInfo click'];
             $("#messageDialogT").addClass("click");
             $("#messageDialogT").css("display", "block");
-            $("#messageDialogT").css("top", (140 + top*200) + "px");
-            $("#messageDialogT").css("left", (250 + left*220) + "px");
+            $("#messageDialogT").css("top", (140 + 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  {
+                $("#messageDialogT").css("left", (left * 220 - 425) + "px");
+            } else {
                 $("#messageArrow").css("left", -14 + "px");
                 $("#messageArrow").css("transform", "rotate(224deg)");
             }

+ 1 - 0
nngkxxdp/src/main/resources/static/xmtjz/js/index.js

@@ -8,6 +8,7 @@ function getajaxTop(params, path) {
             var liText = "";
             console.log(res, "first");
             if (res.code === 0 && res.data && res.data.length > 0) {
+                console.log(res.data)
                 if (res.data.length > 7) {
                     res.data.splice(7);
                 }