123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>待处理故障</title>
- <style type="text/css">
- .cotainer{
- display: flex;
- flex-direction: column;
- margin: 14px;
- }
- .dclgz{
- flex-direction: row;
- display: flex;
- height: 29px;
- color: #353a84;
- font-weight: bold;
- border-top: solid #c4c2c2 1px;
- border-bottom: solid #c4c2c2 1px;
- margin-bottom: 8px;
-
- }
- .dclgz>:first-child{
- flex:0.95;
- padding-top: 4px;
-
- }
- .dclgz>:last-child{
- background-color: #3a3d84;
- width: 23px;
- height: 23px;
- border-radius: 50%;
- margin-top: 2px;
- }
- .square{
- width: 15px;
- height: 15px;
- margin-top: 4px;
- margin-left: 4px;
- border: solid white 1px;
- }
- tbody>:nth-child(odd){
- background-color: #f3f3f3;
- }
- tbody>:first-child{
- border-top: 1px solid gainsboro;
- padding-top: 10px;
- }
- tr{
- line-height: 24px;
- }
- td{
- padding-left: 10px;
- }
-
- tr>:first-child{
- width: 63%;
- }
- .num{
- width: 15px;
- height: 10px;
- background-color: red;
- position: relative;
- left: 9px;
- top: -17px;
- border-radius: 26%;
- font-size: 9px;
- color: wheat;
- text-align: center;
- }
- .active{
- color: #353a84;
- font-weight: bold;
- }
- .gztitle{
- justify-content: space-around;
- display: flex;
- font-size: 0.22rem;
- margin: 5px;
- }
- table tr td{
- line-height: 0.5rem !important;
- }
- </style>
- <script type="text/javascript">
- var iscroll;
- /**
- * 初始化滚动条
- * */
- iscroll = new IScroll(".wsclIscroll",{
- scrollbars: true,
- fadeScrollbars:true,
- scrollbars: 'custom',
- shrinkScrollbars:'clip',
- click:true
- });
- setTimeout(function(){
- iscroll.refresh();
- }, 100);
- $(".gztitle > div").on("click" , function(){
- $(this).addClass("active").siblings().removeClass("active");
- if($(this).hasClass("ycl")) {
- $("#ycl").show();
- $("#dcl").hide();
- }else {
- $("#ycl").hide();
- $("#dcl").show();
- }
- })
- </script>
- </head>
- <body>
- <section class="wsclIscroll" style="background: #fff;">
- <div>
- <div class="gztitle">
- <div class="active dcl">待处理故障</div>
- <div class="ycl">已处理故障</div>
- </div>
- <div>
- <table id='dcl' style="width:100%;">
- #foreach($!obj in $!sbgzList)
- <tr>
- <td>$!obj.gzlx</td>
- <td>$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!obj.fssj)</td>
- </tr>
- #end
- </table>
- <table id='ycl' style="width:100%;display:none;">
- #foreach($!obj in $!sbgzList1)
- <tr>
- <td>$!obj.gzlx</td>
- <td>$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!obj.clsj)</td>
- </tr>
- #end
- </table>
- </div>
- </div>
- </section>
- </body>
- </html>
|