Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
25a60066 by 任超
Options

style:个人中心

1 parent 02057ecc
Inline Side-by-side
Showing 11 changed files with 68 additions and 25 deletions
...@@ -70,9 +70,48 @@ ...@@ -70,9 +70,48 @@
70 display: block; 70 display: block;
71 height: 154px; 71 height: 154px;
72 border: 1px solid #F6F6F6; 72 border: 1px solid #F6F6F6;
73 background: url('../staticImages/wodeyewubg.png') no-repeat; 73 }
74 .business_module li .cardItem:hover .itemName{
75 color: #FFFFFF;
76 }
77 .business_module li div:hover {
78 background-color: #0097F6;
79 }
80 .business_module li:nth-child(1) a {
81 background: url('../staticImages/wodeyewubg.png') no-repeat right bottom;
82 background-size:83px 82px;
83 }
84 .business_module li:nth-child(2) a {
85 background: url('../staticImages/wodeyuyuebg.png') no-repeat right bottom;
86 background-size:83px 82px;
87 }
88 .business_module li:nth-child(3) a {
89 background: url('../staticImages/yewuchaxunbg.png') no-repeat right bottom;
90 background-size:83px 82px;
91 }
92 .business_module li:nth-child(4) a {
93 background: url('../staticImages/hetongbeianbg.png') no-repeat right bottom;
94 background-size:83px 82px;
95 }
96 .business_module li:nth-child(5) a {
97 background: url('../staticImages/budongchanzhengshubg.png') no-repeat right bottom;
98 background-size:83px 82px;
99 }
100 .business_module li:nth-child(6) a {
101 background: url('../staticImages/danganchaxunbg.png') no-repeat right bottom;
102 background-size:83px 82px;
103 }
104 .business_module li:nth-child(7) a {
105 background: url('../staticImages/zhengshuheyanbg.png') no-repeat right bottom;
106 background-size:83px 82px;
107 }
108 .business_module li:nth-child(8) a {
109 background: url('../staticImages/wodefapiaobg.png') no-repeat right bottom;
110 background-size:83px 82px;
111 }
112 .business_module li:nth-child(9) a {
113 background: url('../staticImages/wodezhifubg.png') no-repeat right bottom;
74 background-size:83px 82px; 114 background-size:83px 82px;
75 background-position: right bottom;
76 } 115 }
77 .business_module li a:hover { 116 .business_module li a:hover {
78 color: #0091FF; 117 color: #0091FF;
......
1 layui.use('element', function () { 1 layui.use('element', function () {
2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
3 //监听导航点击
4 element.on('nav(demo)', function (elem) {
5 //console.log(elem)
6 layer.msg(elem.text());
7 });
8 }); 3 });
9 $(function(){ 4 $(function(){
10 $('#username').text(getItem('myCookie').username) 5 $('#username').text(getItem('myCookie').username)
...@@ -12,7 +7,16 @@ $(function(){ ...@@ -12,7 +7,16 @@ $(function(){
12 $('#zjhm').text(getItem('myCookie').zjhm) 7 $('#zjhm').text(getItem('myCookie').zjhm)
13 $('#recordtime').text(getItem('myCookie').recordtime) 8 $('#recordtime').text(getItem('myCookie').recordtime)
14 $('#hellotime').text(getTimeState()) 9 $('#hellotime').text(getTimeState())
10 pageData();
15 }) 11 })
12 function pageData(){
13 $('.business_module li').mouseover(function(){
14 $(this).find('.itemImg').attr('src',$(this).find('.itemImg').attr('url'))
15 })
16 $('.business_module li').mouseout(function(){
17 $(this).find('.itemImg').attr('src',$(this).find('.itemImg').attr('pre'))
18 })
19 }
16 function getTimeState(){ 20 function getTimeState(){
17 // 获取当前时间 21 // 获取当前时间
18 let timeNow = new Date(); 22 let timeNow = new Date();
......
...@@ -44,72 +44,72 @@ ...@@ -44,72 +44,72 @@
44 <li> 44 <li>
45 <div class="cardItem"> 45 <div class="cardItem">
46 <a href="./wdyw.html" title="我的业务"> 46 <a href="./wdyw.html" title="我的业务">
47 <img src="../staticImages/myyewu.png"> 47 <img class="itemImg" url="../staticImages/semyyewu.png" src="../staticImages/myyewu.png" pre="../staticImages/myyewu.png">
48 <p>我的业务</p> 48 <p class="itemName">我的业务</p>
49 </a> 49 </a>
50 </div> 50 </div>
51 </li> 51 </li>
52 <li> 52 <li>
53 <div class="cardItem"> 53 <div class="cardItem">
54 <a href="./wdyy.html" title="我的预约"> 54 <a href="./wdyy.html" title="我的预约">
55 <img src="../staticImages/myyuyue.png"> 55 <img class="itemImg" url="../staticImages/semyyewu.png" src="../staticImages/myyuyue.png">
56 <p>我的预约</p> 56 <p class="itemName">我的预约</p>
57 </a> 57 </a>
58 </div> 58 </div>
59 </li> 59 </li>
60 <li> 60 <li>
61 <div class="cardItem"> 61 <div class="cardItem">
62 <a href="" title="业务查询"> 62 <a href="" title="业务查询">
63 <img src="../staticImages/myyewuchaxun.png"> 63 <img class="itemImg" url="../staticImages/semyyewu.png" src="../staticImages/myyewuchaxun.png">
64 <p>业务查询</p> 64 <p class="itemName">业务查询</p>
65 </a> 65 </a>
66 </div> 66 </div>
67 </li> 67 </li>
68 <li> 68 <li>
69 <div class="cardItem"> 69 <div class="cardItem">
70 <a href="" title="合同备案查询"> 70 <a href="" title="合同备案查询">
71 <img src="../staticImages/hetongbeianchaxun.png"> 71 <img class="itemImg" url="../staticImages/semyyewu.png" src="../staticImages/hetongbeianchaxun.png">
72 <p>合同备案查询</p> 72 <p class="itemName">合同备案查询</p>
73 </a> 73 </a>
74 </div> 74 </div>
75 </li> 75 </li>
76 <li> 76 <li>
77 <div class="cardItem"> 77 <div class="cardItem">
78 <a href="" title="不动产证书查询"> 78 <a href="" title="不动产证书查询">
79 <img src="../staticImages/budongchanzhengshu.png"> 79 <img class="itemImg" url="../staticImages/semyyewu.png" src="../staticImages/budongchanzhengshu.png">
80 <p>不动产证书查询</p> 80 <p class="itemName">不动产证书查询</p>
81 </a> 81 </a>
82 </div> 82 </div>
83 </li> 83 </li>
84 <li> 84 <li>
85 <div class="cardItem"> 85 <div class="cardItem">
86 <a href="" title="档案查询"> 86 <a href="" title="档案查询">
87 <img src="../staticImages/danganchaxun.png"> 87 <img class="itemImg" url="../staticImages/semyyewu.png" src="../staticImages/danganchaxun.png">
88 <p>档案查询</p> 88 <p class="itemName">档案查询</p>
89 </a> 89 </a>
90 </div> 90 </div>
91 </li> 91 </li>
92 <li> 92 <li>
93 <div class="cardItem"> 93 <div class="cardItem">
94 <a href="" title="证书核验"> 94 <a href="" title="证书核验">
95 <img src="../staticImages/zhengshuheyan.png"> 95 <img class="itemImg" url="../staticImages/semyyewu.png" src="../staticImages/zhengshuheyan.png">
96 <p>证书核验</p> 96 <p class="itemName">证书核验</p>
97 </a> 97 </a>
98 </div> 98 </div>
99 </li> 99 </li>
100 <li> 100 <li>
101 <div class="cardItem"> 101 <div class="cardItem">
102 <a href="" title="我的发票"> 102 <a href="" title="我的发票">
103 <img src="../staticImages/wodefapiao.png"> 103 <img class="itemImg" url="../staticImages/semyyewu.png" src="../staticImages/wodefapiao.png">
104 <p>我的发票</p> 104 <p class="itemName">我的发票</p>
105 </a> 105 </a>
106 </div> 106 </div>
107 </li> 107 </li>
108 <li> 108 <li>
109 <div class="cardItem"> 109 <div class="cardItem">
110 <a href="" title="我的支付"> 110 <a href="" title="我的支付">
111 <img src="../staticImages/wodezhifu.png"> 111 <img class="itemImg" url="../staticImages/semyyewu.png" src="../staticImages/wodezhifu.png">
112 <p>我的支付</p> 112 <p class="itemName">我的支付</p>
113 </a> 113 </a>
114 </div> 114 </div>
115 </li> 115 </li>
......