移动端适配公开信箱

nngkxxdp/src/main/resources/static/nngkxxdp/css/index.css

@@ -28,8 +28,8 @@ body {
 } */
 
 .all {
-    min-width: 1200px;
-    height: 1080px;
+    min-width: 85.714rem;
+    height: 77.143rem;
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
@@ -37,27 +37,27 @@ body {
 .showTime {
     color: #fff;
     position: fixed;
-    top: 2px;
-    left: 16px;
+    top: 0.143rem;
+    left: 1.143rem;
     display: flex;
-    height: 42px;
+    height: 3rem;
     color: #61BEFF;
 
 }
 
 .showTime .timeDeatil {
     font-family: electronicFont;
-    font-size: 40px;
-    margin-right: 10px;
+    font-size: 2.857rem;
+    margin-right: 0.714rem;
 }
 
 .logo {
     width: 100%;
-    height: 110px;
-    line-height: 110px;
+    height: 7.857rem;
+    line-height: 7.857rem;
     color: aliceblue;
-    font-size: 30px;
-    letter-spacing: 2px;
+    font-size: 2.143rem;
+    letter-spacing: 0.143rem;
     text-align: center;
     background-size: 100% 100%;
     background-repeat: no-repeat;
@@ -69,15 +69,15 @@ body {
     background-image: -webkit-linear-gradient(bottom, #6acce9, #ffffff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    letter-spacing: 5px;
+    letter-spacing: 0.357rem;
     /* text-shadow: 1px 1px 1px #bbb; */
-    margin-bottom: 20px;
+    margin-bottom: 1.429rem;
 }
 
 .borderweb, .borderwindow {
     float: left;
-    width: 15px;
-    height: 15px;
+    width: 1.071rem;
+    height: 1.071rem;
 
     border: 50%;
 }
@@ -93,52 +93,52 @@ body {
 }
 
 .bookDetail {
-    height: 440px;
+    height: 31.429rem;
     background-image: url(../img/departme.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    margin-bottom: 10px;
+    margin-bottom: 0.714rem;
 }
 
 .departmentDetail {
-    height: 300px;
+    height: 21.429rem;
     background-image: url(../img/¾ØÐÎ%20729.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
 
 .allInOne {
-    height: 320px;
+    height: 22.857rem;
     background-image: url(../img/list-bg.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    margin-bottom: 10px;
+    margin-bottom: 0.714rem;
 }
 
 .comments {
-    height: 420px;
+    height: 30rem;
     background-image: url(../img/list-bg.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
 
 .reportParts {
-    height: 268px;
+    height: 19.143rem;
 
     background-image: url(../img/list-bg.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    margin-bottom: 10px;
+    margin-bottom: 0.714rem;
 }
 
 .itemAll {
-    height: 163px;
+    height: 11.643rem;
     position: relative;
-    margin-bottom: 10px;
+    margin-bottom: 0.714rem;
 }
 
 .line {
-    height: 299px;
+    height: 21.357rem;
     background-image: url(../img/list-bg.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
@@ -146,17 +146,17 @@ body {
 
 .bookDetail-title {
     color: #fff;
-    font-size: 18px;
+    font-size: 1.286rem;
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
 
 .bookDetail-title span {
-    width: 4px;
+    width: 0.286rem;
     background-color: #00a8ff;
     display: inline-block;
-    height: 14px;
-    margin-left: 5px;
+    height: 1rem;
+    margin-left: 0.357rem;
 }
 
 .allInOne .title,
@@ -168,11 +168,11 @@ body {
 .line .title {
     color: #f7f7f7;
     text-align: center;
-    line-height: 40px;
-    margin-left: 30px;
-    font-size: 20px;
-    letter-spacing: 3px;
-    text-shadow: 0 0 10px #f7f7f7,
+    line-height: 2.857rem;
+    margin-left: 2.143rem;
+    font-size: 1.429rem;
+    letter-spacing: 0.214rem;
+    text-shadow: 0 0 0.714rem #f7f7f7,
     0 0 20px #228DFF,
     0 0 30px #228DFF,
     0 0 40px #228DFF,
@@ -185,14 +185,14 @@ body {
 
 .dateLine {
     color: #6bd3ff;
-    text-shadow: 0 0 10px #f7f7f7,
-    0 0 20px #228DFF,
-    0 0 30px #228DFF,
-    0 0 40px #228DFF,
-    0 0 70px #228DFF,
-    0 0 80px #228DFF,
-    0 0 100px #228DFF,
-    0 0 150px #228DFF;
+    text-shadow: 0 0 0.714rem #f7f7f7,
+    0 0 1.429rem #228DFF,
+    0 0 2.143rem #228DFF,
+    0 0 2.857rem #228DFF,
+    0 0 5rem #228DFF,
+    0 0 5.714rem #228DFF,
+    0 0 7.143rem #228DFF,
+    0 0 10.714rem #228DFF;
 }
 
 .topList {
@@ -200,13 +200,13 @@ body {
     /* margin: 0 10px; */
     width: 100%;
     justify-content: space-between;
-    height: 180px;
-    margin-bottom: 20px;
+    height: 12.857rem;
+    margin-bottom: 1.429rem;
 }
 
 .Topblue {
     color: #1585f7;
-    font-size: 20px;
+    font-size: 1.429rem;
 }
 
 .topOne ul,
@@ -224,12 +224,12 @@ body {
 }
 
 .topList li {
-    width: 80px;
+    width: 5.714rem;
     font-weight: inherit;
 }
 
 .bottomList {
-    height: 760px;
+    height: 54.286rem;
     display: flex;
 
 }

nngkxxdp/src/main/resources/static/nngkxxdp/css/mobile_letterBox.css

@@ -1,40 +1,40 @@
 body {
     width: 100vw;
     background-color: #EBF0F3;
-    height: 100vh;
+    height: 100%;
     overflow: auto;
 }
 
 .firstArea {
     width: 100%;
-    height: 560px;
+    height: 34rem;
     background-color: #FFFFFF;
 }
 
 .header {
     width: 100%;
-    height: 87px;
-    font-size: 50px;
+    height: 4.214rem;
+    font-size: 1.571rem;
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #2775CC;
-    padding: 18px 26px 0px;
+    padding: 1.286rem 1.857rem 0rem;
     box-sizing: border-box;
-    border-bottom: 1px #2775CC solid;
+    border-bottom: 0.071rem #2775CC solid;
 }
 
 /* 办理情况 */
 .transactionCase {
     width: 100%;
-    height: 473px;
-    padding: 10px 20px;
+    height: 33.786rem;
+    padding: 0.714rem 1.429rem;
     box-sizing: border-box;
 }
 
 .transactionCase .title {
-    height: 72px;
-    line-height: 72px;
-    font-size: 40px;
+    height: 5.143rem;
+    line-height: 5.143rem;
+    font-size: 1.3rem;
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #2775CC;
@@ -42,7 +42,7 @@ body {
 
 .transactionCase .line {
     width: 100%;
-    height: 1px;
+    height: 0.071rem;
     background-color: rgba(224, 230, 241, 0.2);
     position: relative;
 }
@@ -50,27 +50,27 @@ body {
 .line::before {
     content: " ";
     display: inline-block;
-    width: 38px;
-    height: 2px;
+    width: 2.714rem;
+    height: 0.143rem;
     background-color: #2775CC;
     position: absolute;
-    top: -2px;
+    top: -0.143rem;
 }
 
 .line::after {
     content: " ";
     display: inline-block;
-    width: 16px;
-    height: 2px;
+    width: 1.143rem;
+    height: 0.143rem;
     background-color: #2775CC;
     position: absolute;
-    top: -2px;
+    top: -0.143rem;
     right: 0px;
 }
 
 .transactionCase .caseChart {
-    width: 100%;
-    height: 5.333rem;
+    width: 21rem;
+    height: 21.429rem;
     padding-top: 0.28rem;
     box-sizing: border-box;
 }
@@ -78,7 +78,7 @@ body {
 /* 第二区域 */
 .secondArea {
     width: 100%;
-    height: calc(100vh - 560px);
+    height: 81rem;
     margin-top: 15px;
     background-color: #FFFFFF;
     padding: 28px 21px 28px 19px;
@@ -88,29 +88,30 @@ body {
 
 .secondArea .navList {
     width: 100%;
-    height: 130px;
+    height: 22rem;
 }
 
 .navList li {
-    width: 31%;
-    height: 127px;
+    width: 100%;
+    height: 6.071rem;
     background: #ECF0F8;
     float: left;
     padding: 15px 0px 22px 33px;
     box-sizing: border-box;
+    margin-bottom: 2rem;
 }
 
-.navList li:nth-child(2) {
-    margin-left: 31px;
-    margin-right: 31px;
-}
+/*.navList li:nth-child(2) {*/
+/*    margin-left: 2.214rem;*/
+/*    margin-right: 2.214rem;*/
+/*}*/
 
 .navList li > div {
     float: left;
 }
 
 .navList .inconArea {
-    width: 25%;
+    width: 17%;
     height: 80%;
     background-color: pink;
     /*margin-right: 20px;*/
@@ -122,10 +123,10 @@ body {
 }
 
 .inconArea i {
-    font-size: 43px;
+    font-size: 2.071rem;
     text-align: center;
-    line-height: 73px;
-    margin-left: 13px;
+    line-height: 3.214rem;
+    margin-left: 0.55rem;
 
 }
 
@@ -164,8 +165,8 @@ body {
     color: transparent;
     -webkit-text-fill-color: transparent;
     text-fill-color: transparent;
-    font-size: 40px;
-    margin-left: 17px;
+    font-size: 1.857rem;
+    margin-left: 0.56rem;
 }
 
 .navList .textArea {
@@ -175,18 +176,18 @@ body {
 
 .textArea .textAreaTop {
     width: 100%;
-    height: 20px;
-    margin-bottom: 15px;
-    font-size: 30px;
-    line-height: 18px;
+    height: 1.429rem;
+    margin-bottom: 1.071rem;
+    font-size: 1rem;
+    line-height: 1.286rem;
     color: #333333;
     opacity: 0.6;
 }
 
 .textArea .textAreaBottom span:first-child {
     width: 100%;
-    height: 30px;
-    font-size: 35px;
+    height: 2.143rem;
+    font-size: 1.5rem;
     font-family: Microsoft YaHei;
     font-weight: bold;
     font-style: italic;
@@ -194,21 +195,21 @@ body {
 }
 
 .textArea .textAreaBottom span {
-    font-size: 35px;
+    font-size: 1.5rem;
     font-style: normal;
 }
 
 /* 统计区域 */
 .statisticalArea {
-    height: 1200px;
+    height: 52rem;
     width: 100%;
-    margin-top: 47px;
+    margin-top: 3.357rem;
 }
 
 .staCommon {
     width: 100%;
-    height: 50%;
-    margin-top: 30px;
+    height: 25rem;
+    margin-top: 2.143rem;
 }
 
 .staLeft {
@@ -220,9 +221,9 @@ body {
 }
 
 .staCommon .staTitle {
-    height: 72px;
-    line-height: 72px;
-    font-size: 40px;
+    height: 3.143rem;
+    line-height: 3.143rem;
+    font-size: 1.5rem;
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #2775CC;
@@ -237,23 +238,23 @@ body {
 
 .staContent {
     width: 100%;
-    height: 520px;
-    border: 1px solid #CDCDCD;
-    margin-top: 28px;
+    height: 20.143rem;
+    border: 0.071rem solid #CDCDCD;
+    margin-top: 2rem;
 }
 
 /* 详细信息 */
 .detail {
     width: 100%;
-    height: 445px;
-    margin-top: 49px;
+    height: 31.786rem;
+    margin-top: 3.5rem;
     /*overflow: auto;*/
 }
 
 .detail .staTitle {
-    height: 72px;
-    line-height: 72px;
-    font-size: 40px;
+    height: 3.143rem;
+    line-height: 3.143rem;
+    font-size: 1.5rem;
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #2775CC;
@@ -262,59 +263,66 @@ body {
 
 .detail .line {
     width: 100%;
-    height: 1px;
+    height: 0.071rem;
     background-color: rgba(224, 230, 241, 0.2);
     position: relative;
 }
 
 .tableItem {
     width: 100%;
-    height: 355px;
-    margin-top: 16px;
+    height: 25.357rem;
+    margin-top: 1.143rem;
 }
 
 .tableItem table {
     width: 100%;
-    border: 1px solid #C4D0DC;
-    border-radius: 4px;
+    border: 0.071rem solid #C4D0DC;
+    border-radius: 0.286rem;
 }
 
 .tableItem table .tHeader {
-    height: 50px;
+    height: 2rem;
     background-color: #E1E7ED;
-    border-radius: 4px 4px 0px 0px;
+    border-radius: 0.286rem 0.286rem 0rem 0rem;
 }
 
 .tableItem table .tHeader th {
-    font-size: 30px;
+    font-size: 0.8rem;
     font-family: Microsoft YaHei;
     font-weight: 400;
     color: #333333;
-    border: 1px solid #C4D0DC;
+    border: 0.071rem solid #C4D0DC;
 }
 
 .tableItem table .tHeader > th:first-child {
-    width: 189px;
+    width: 8.5rem;
 }
 
 .tableItem table .tHeaderSecond > th {
     background-color: #E1E7ED;
-    font-size: 25px;
+    font-size: 0.6rem;
     font-family: Microsoft YaHei;
     font-weight: 400;
     color: #333333;
-    border: 1px solid #C4D0DC;
+    border: 0.071rem solid #C4D0DC;
 }
 
 .tableItem table tr td {
     text-align: center;
-    height: 30px;
-    line-height: 30px;
-    font-size: 28px;
+    height: 0.8rem;
+    line-height:  0.8rem;
+    font-size: 0.5rem;
     font-family: Microsoft YaHei;
     font-weight: 400;
     color: #333333;
 }
+.layui-table td, .layui-table th{
+    position: relative;
+    padding: 0.343rem 0.031rem;
+    min-height: 20px;
+    line-height: 20px;
+    font-size: 14px;
+}
 
 .tableItem table tr:nth-child(even) {
     background-color: #F1F5F9 !important;
@@ -330,13 +338,13 @@ thead th {
 }
 
 .layui-laypage a {
-    font-size: 30px;
+    font-size: 0.8rem;
 }
 
 .layui-laypage span {
-    font-size: 30px;
+    font-size: 0.8rem;
 }
 
 .layui-laypage span select {
-    font-size: 20px;
+    font-size: 0.6rem;
 }

nngkxxdp/src/main/resources/static/nngkxxdp/index.html

@@ -109,7 +109,7 @@
     // PC端 移动端 跳转
     var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
     if (is_mobi) {
-        window.location.href = "mobile_index.html";
+        window.parent.location.href = "mobile_indexs.html";
     }
 </script>
 </body>

nngkxxdp/src/main/resources/static/nngkxxdp/js/mobile_letterBox.js

@@ -238,7 +238,7 @@ function drawHandleByBarChart() {
             // subtext: '单位:1 件',
             text: '单位: 件',
             textStyle: {
-                fontSize: 30
+                fontSize: 10
             }
         },
         tooltip: {
@@ -268,7 +268,7 @@ function drawHandleByBarChart() {
                 return htmlStr;
             },
             textStyle: {
-                fontSize: 40
+                fontSize: 10
             },
             axisPointer: {
                 type: 'line'
@@ -295,7 +295,7 @@ function drawHandleByBarChart() {
                 rotate: 45,
                 textStyle: {
                     color: '#999999',
-                    fontSize: 30
+                    fontSize: 10
                 }
             }
         },
@@ -306,7 +306,7 @@ function drawHandleByBarChart() {
             },
             axisLabel: {
                 textStyle: {
-                    fontSize: 30
+                    fontSize: 10
                 }
             }
         },
@@ -366,13 +366,13 @@ function drawHandleTypeByPieChart() {
             // formatter: '{a} <br/>{b} : {c} ({d}%)'
             formatter: '{b}：{c} 件',
             textStyle: {
-                fontSize: 40
+                fontSize: 10
             }
         },
         series: [{
             name: '办理类别',
             type: 'pie',
-            radius: ['50%', '80%'],
+            radius: ['30%', '60%'],
             center: ['50%', '50%'],
             roseType: 'radius',
             itemStyle: {
@@ -380,11 +380,11 @@ function drawHandleTypeByPieChart() {
             },
             data: pieData,
             label: {
-                fontSize: 30
+                fontSize: 10
             },
             labelLine: {
-                length: 20,
-                length2: 20
+                length:5,
+                length2: 5
             }
         }]
     };
@@ -411,13 +411,13 @@ function drawHandleAreaByPieChart() {
             // formatter: '{a} <br/>{b} : {c} ({d}%)'
             formatter: '{b}：{c} 件',
             textStyle: {
-                fontSize: 40
+                fontSize: 10
             }
         },
         series: [{
             name: '公开信箱领域',
             type: 'pie',
-            radius: ['50%', '80%'],
+            radius: ['30%', '60%'],
             center: ['50%', '50%'],
             roseType: 'radius',
             itemStyle: {
@@ -425,7 +425,7 @@ function drawHandleAreaByPieChart() {
             },
             data: pieData,
             label: {
-                fontSize: 30
+                fontSize: 10
             }
         }]
     };

nngkxxdp/src/main/resources/static/nngkxxdp/mobile_index.html

@@ -102,10 +102,10 @@
 <script type="text/javascript" src="js/mobile_letterBox.js" charset="utf-8"></script>
 <script>
     // PC端 移动端 跳转
-    var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
-    if (!is_mobi) {
-        window.location.href="mobile_index.html"
-    }
+    // var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
+    // if (!is_mobi) {
+    //     window.location.href="mobile_index.html"
+    // }
 </script>
 </body>
 </html>