月度分类统计tab样式

src/main/resources/templates/admin/government/land_statistic/region.html

@@ -81,33 +81,40 @@
         }
 
         .chartContent .date_line {
-            border-bottom: 1px solid #e2e3e4;
-            width: 90%;
-            margin: 0 auto;
-            padding-left: 20px;
-            padding-right: 20px;
+            width: 1200px;
             position: relative;
+            overflow: hidden;
         }
 
-        .chartContent .date_line .pre_month {
+        .chartContent .date_line > i {
+            z-index:5;
             position: absolute;
-            left: 0;
-            top: 10px;
+            top: 0;
+            padding: 10px;
             font-weight: bold;
             cursor: pointer;
+            background: #ffffff;
         }
 
-        .chartContent .date_line .next_month {
-            position: absolute;
-            right: 0;
-            top: 10px;
-            font-weight: bold;
-            cursor: pointer;
-            overflow-x: hidden;
+        .chartContent .date_line .pre_month {
+            left: -8px;
         }
 
-        .chartContent .date_line .month_box {
+        .chartContent .date_line .next_month {
+            right: -8px;
+        }
+        .chartContent .date_line .date_tab_list {
+            border-bottom: 1px solid #e2e3e4;
+            width: 6000px;
+            position: relative;
+            left: 0;
+            top: 0;
+        }
+        .chartContent .date_line .date_tab_list .date_tab_item {
             display: inline-block;
+            float: left;
+            width:58px;
+            text-align: center;
             margin-left: 15px;
             margin-right: 15px;
             border: 1px solid #e2e3e3;
@@ -117,8 +124,10 @@
             cursor: pointer;
             margin-bottom: -1px;
         }
-
-        .chartContent .date_line .active_month {
+        .chartContent .date_line .date_tab_list .date_tab_item:first-child {
+            margin-left: 30px;
+        }
+        .chartContent .date_line .date_tab_list .active_month {
             background-color: #ffffff;
             color: #00a0e9;
         }
@@ -193,21 +202,29 @@
 <div class="chartContent">
     <div class="title">月度分类统计</div>
     <div class="date_line">
-        <i class="pre_month Hui-iconfont">&#xe63d;</i>
-        <i class="next_month Hui-iconfont">&#xe67d;</i>
-        <span class="active_month month_box">2019-05</span>
-        <span class="month_box">2019-06</span>
-        <span class="month_box">2019-07</span>
-        <span class="month_box">2019-06</span>
-        <span class="month_box">2019-07</span>
-        <span class="month_box">2019-06</span>
-        <span class="month_box">2019-07</span>
-        <span class="month_box">2019-06</span>
-        <span class="month_box">2019-07</span>
-        <span class="month_box">2019-06</span>
-        <span class="month_box">2019-07</span>
-        <span class="month_box">2019-06</span>
-        <span class="month_box">2019-07</span>
+        <i class="pre_month Hui-iconfont Hui-iconfont-slider-left"></i>
+        <i class="next_month Hui-iconfont Hui-iconfont-slider-right"></i>
+        <ul class="date_tab_list clearfix">
+            <li class="active_month date_tab_item">2019-05</li>
+            <li class="date_tab_item">2019-06</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-06</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-06</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-06</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-06</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-06</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-07</li>
+            <li class="date_tab_item">2019-07</li>
+        </ul>
     </div>
     <div id="monthly_type_bar" style="width: 1200px; height: 400px"></div>
 </div>
@@ -804,6 +821,40 @@
 
     })
 
+    // 点击前一页
+    $('.date_line .pre_month').click(function(){
+        let offsetNum = $('.date_tab_list').position().left
+        // console.log('父元素偏移量', offsetNum)
+        if (Math.abs(offsetNum) >= 1170) {
+            let offsetLeft = (offsetNum + 1170 + 'px')
+            $(".date_tab_list").animate({left: offsetLeft}, 1000)
+        } else {
+            console.log('已到头')
+        }
+    })
+
+    // 点击后一页
+    $('.date_line .next_month').click(function(){
+        let offsetNum = $('.date_tab_list').position().left
+        let childrenNum = $('.date_tab_list').children('.date_tab_item').length
+        let maxOffset = (Math.ceil(childrenNum/9) - 1) * 1170
+        // console.log('父元素偏移量', offsetNum)
+        // console.log('子元素数量', childrenNum)
+        // console.log('最大偏移量', maxOffset)
+        if (Math.abs(offsetNum) < maxOffset) {
+            let offsetLeft = (offsetNum - 1170 + 'px')
+            $(".date_tab_list").animate({left: offsetLeft}, 1000)
+        } else {
+            console.log('已到达最大距离')
+        }
+    })
+
+    // 点击统计日期
+    $('.date_tab_list .date_tab_item').click(function(){
+        console.log('当前点击日期', $(this).html())
+        $(this).addClass('active_month').siblings().removeClass("active_month")
+    })
+
     Date.prototype.format = function (format) {
         var o = {
             "M+": this.getMonth() + 1, //month