ui修改

WebRoot/hbcyjc/region/130000/pages/kll/kll_currtime.jsp

@@ -4,7 +4,7 @@
 <%@ page import="com.cjy.sysdept.entity.SysDept" %>
 <%
     //SysUser sysUser = (SysUser) request.getSession().getAttribute("admin");
-    SysDept sysDept = (SysDept) request.getSession().getAttribute("region"); 
+    SysDept sysDept = (SysDept) request.getSession().getAttribute("region");
     String earecodets = sysDept.getDcode();
     String areacodets = "";
     if (sysDept.getLevel() == 1) {//省级
@@ -564,8 +564,12 @@
 <div class="page-tab">
     <div class="page-tab-box">
         <ul class="page-tab-nav" data-role="tablist">
-            <li onclick="changeForm('map')" class="active" data-toggle="tab" data-target="#tabsOne">地图模式</li>
-            <li onclick="changeForm('standard')" data-toggle="tab" data-target="#tabsTwo">标准模式</li>
+            <div class="p-jiao"></div>
+            <div class="p-jiao"></div>
+            <div class="p-jiao"></div>
+            <div class="p-jiao"></div>
+            <li onclick="changeForm('map')" class="active btn-list1" data-toggle="tab" data-target="#tabsOne">地图模式</li>
+            <li onclick="changeForm('standard')" class="btn-list2" data-toggle="tab" data-target="#tabsTwo">标准模式</li>
         </ul>
     </div>
 </div>

WebRoot/hbcyjc/region/130000/template/headercomm.jsp

@@ -25,7 +25,7 @@
 <script src="${ctx }/js/dateutil.js"></script>
 
 <header class="cj-page-header fixed" id="headerid">
-    <div class="cj-system-name" id="zsj_title"></div>
+    <div class="cj-system-name"><span class="cj-system-names" id="zsj_title"></span></div>
 <%--    悬浮筛选按钮--%>
     <div class="cj-top-btn" id="sstj" style="display: none;z-index: 999999" onclick="TC_xfbuttonclic()">
         <span class="cj-top-txt">

WebRoot/hbcyjc/region/130000/yuanxing/static/css/layout.css

@@ -170,22 +170,34 @@ th{text-align:left;}
 /* 公共 布局 */
 .cj-page-layer{position:relative;z-index:1010;width:100%;padding-right:2rem;padding-left:2rem;margin-right:auto;margin-left:auto;}
 .cj-page-bg{height:100%;background:url(../images/cj-page-bg.png) var(--pageBg,#fff) center no-repeat;background-size:cover;}
-.cj-page-header{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;height:5rem;padding-right:2rem;padding-left:2rem;background-color:var(--globalBox,#fff);box-shadow:0 0 3rem rgba(1,37,180,.4) inset;}
+.cj-page-header{display:-ms-flexbox;display:flex;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;height:5rem;background-image:url(../images/cj-page-head.png);background-repeat: no-repeat;background-size: cover}
 
 /* 公共 头部 */
-.cj-system-name{flex:1;font-size:1.7rem;font-weight:500;line-height:5rem;background-image:-webkit-linear-gradient(right,#00ffff,#00ffff,#3eabff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
+.cj-system-name{width:25%;font-size:1.7rem;padding-left: 65px;font-weight:500;line-height:5rem;position: relative;background-image: url(../images/cj-page-head_left.png);background-repeat: no-repeat;background-size: 100% 100%;}
+.cj-system-names{background-image:-webkit-linear-gradient(top, #fff, #99d2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
+.cj-system-name:before{content: '';position: absolute;left: 30px;top: 25px;width: 20px;height:20px;z-index:9;background:-webkit-linear-gradient(top, #fff, #99d2ff);border-radius: 5px}
+.cj-system-name:after{content: '';position: absolute;left: 35px;top: 30px;width: 20px;height:20px;border: solid 1px #00ffff;border-radius: 5px}
 .cj-system-tab{flex:1;}
-a.cj-system-tab_item{display:inline-block;width:138px;height:40px;margin-top:1.2rem;line-height:40px;text-align:center;color:#fff;background:url(../images/cj-system-tab.png) center no-repeat;background-size:cover;}
+a.cj-system-tab_item{display:inline-block;width:148px;height:40px;margin-top:1.2rem;line-height:40px;text-align:center;color:#fff;background:url(../images/cj-system-tab.png) center no-repeat;background-size:cover;position: relative;padding-left: 15px}
+a.cj-system-tab_item:before{content: '';position: absolute;left: 20px;top:10px;width: 20px;height: 20px;}
+a.cj-system-tab_item:before{background-image: url(../images/cj-system-tab1.png);background-repeat: no-repeat;background-size: cover}
+a.cj-system-tab_item:first-child.on:before{background-image: url(../images/cj-system-tabA1.png)}
+a.cj-system-tab_item:last-child:before{background-image: url(../images/cj-system-tab2.png);background-repeat: no-repeat;background-size: cover}
+a.cj-system-tab_item:last-child.on:before{background-image: url(../images/cj-system-tabA2.png)}
 a.cj-system-tab_item.on{background:url(../images/cj-system-tabA.png) center no-repeat;background-size:cover;}
-.cj-system_date{float:left;display:inline-block;line-height:5rem;font-size:1.2em;}
-.cj-system_date span:not(:last-child){margin-right:.5rem;}
+.cj-system_date{float:left;display:inline-block;line-height:5rem;font-size:1.2em;margin-right: 15px}
+.cj-system_date span:not(:last-child){margin-rigt:.5rem;}
 .cj-system_date span.time{color:var(--secondary,#fff);}
-.cj-system-exit,.cj-system-home,.cj-system-man{position:relative;float:left;display:inline-block;width:74px;height:50px;margin-left:1rem;margin-top:1rem;background:url(../images/cj-system-eh.png) center no-repeat;background-size:cover;opacity:.6;transition:all .4s;}
-.cj-system-exit:hover,.cj-system-home:hover,.cj-system-man:hover{opacity:1;}
+.cj-system-exit,.cj-system-home,.cj-system-man{position:relative;float:left;display:inline-block;width:50px;height:50px;margin-left:1rem;margin-top:1rem;opacity:.6;transition:all .4s;background-image: url(../images/cj-system-eh.png);background-repeat: no-repeat;background-size: cover}
+.cj-system-exit:hover,.cj-system-home:hover,.cj-system-man:hover{opacity:1;background-image: url(../images/cj-system-eh_active.png);background-repeat: no-repeat;background-size: cover}
 .cj-system-exit:after,.cj-system-home:after,.cj-system-man:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-block;width:25px;height:25px;}
 .cj-system-home:after{background:url(../images/cj-system-home.png) center no-repeat;background-size:cover;}
+.cj-system-home:hover:after{background:url(../images/cj-system-home_active.png) center no-repeat;background-size:cover;}
 .cj-system-man:after{background:url(../images/cj-man.png) center no-repeat;background-size:cover;}
+.cj-system-man:hover:after{background:url(../images/cj-man_active.png) center no-repeat;background-size:cover;}
 .cj-system-exit:after{background:url(../images/cj-system-exit.png) center no-repeat;background-size:cover;}
+.cj-system-exit:hover:after{background:url(../images/cj-system-exit_active.png) center no-repeat;background-size:cover;}
+.cj-system-right{margin-right: 40px}
 
 
 .cj-top-btn{ position:fixed; top:0; left:50%; margin-left:-2rem; width:4rem; margin-top:.5rem; height:4rem;background:url(../images/cj-topBtn.png) center no-repeat;background-size:cover; transition:transform .4s; cursor:pointer;}
@@ -1164,12 +1176,22 @@ white-space: nowrap;}
 }
 
 
-.page-tab{position: fixed; bottom: 0; left: 0; width: 100%; height: 164px; background: url(../images/page-tab-bg.png) no-repeat center; z-index: 1999;}
-.page-tab-box{ position: relative; bottom:-48px; margin: 0 auto; width: 275px; height: 60px;background: url(../images/page-tab.png) no-repeat center; background-size: cover;}
-.page-tab-nav{ margin: 0 30px;}
-.page-tab-nav li{ display: inline-block; float: left; width: 50%; text-align: center; line-height: 60px; cursor: pointer;}
-.page-tab-nav li.active{ background: url(../images/page-tab-arrow.png) no-repeat top center; background-size: 30px; color: #00FFFF;}
-
+.page-tab{position: fixed; bottom: 50px; left: 0; width: 100%; height: 164px; z-index: 1999;}
+.page-tab-box{ position: relative; bottom:-48px; margin: 0 auto;width: 575px;height: 180px;background: url(../images/page-tab.png) no-repeat center; background-size: contain;}
+.page-tab-nav{    display: block;height: 100%;position: relative;top: -55%;background-image: linear-gradient(to bottom, #071729, #081d33, #09243d, #092a48, #083153);width: 75%;margin: 0 auto;}
+.p-jiao{position: absolute;width: 20px;height: 20px;background-repeat: no-repeat;background-size: cover;}
+.p-jiao:nth-child(1){background-image: url(../images/page-tab-box-top_left.png);left: -3px;top: -3px}
+.p-jiao:nth-child(2){background-image: url(../images/page-tab-box-top_right.png);right: -3px;top: -3px}
+.p-jiao:nth-child(3){background-image: url(../images/page-tab-box-bottom_left.png);left: -3px;bottom: -3px}
+.p-jiao:nth-child(4){background-image: url(../images/page-tab-box-bottom_right.png);right: -3px;bottom: -3px}
+.page-tab-nav li{margin-top: 115px;display: inline-block; float: left; width: 50%; text-align: center; line-height: 60px; cursor: pointer;position: relative;font-size: 19px;transition: all 0.5s}
+.page-tab-nav li:before{content: '';position: absolute;width: 100%;height: 80px;background-image: url(../images/page-tab-box-icon-hover.png);background-repeat: no-repeat;background-size: contain;background-position-x: center;left: 0;top: -45px;}
+.page-tab-nav .btn-list1:after{content: '';position: absolute;width: 100%;height: 80px;background-image: url(../images/page-tab-box-icon1.png);background-repeat: no-repeat;background-size: 50px 50px}
+.page-tab-nav .btn-list2:after{content: '';position: absolute;width: 100%;height: 80px;background-image: url(../images/page-tab-box-icon2.png);background-repeat: no-repeat;background-size: 50px 50px}
+.page-tab-nav li:after{background-position-x: center;left: 0;top: -80px}
+.page-tab-nav li.active{color: #00FFFF;}
+.page-tab-nav .btn-list1.active:after{background-image: url(../images/page-tab-box-icon1-hover.png);}
+.page-tab-nav .btn-list2.active:after{background-image: url(../images/page-tab-box-icon2-hover.png);}
 
 .cj-flow{text-align: center;margin-bottom: 2rem;}
 .cj-flow-num{ position: relative;}