Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
9717808c by 任超
Options

style:我的业务

1 parent 3cb1be7b
Inline Side-by-side
Showing 5 changed files with 408 additions and 6 deletions
1 .central_area {
2 min-height:calc(100vh - 190px);
3 margin-top: 20px;
4 color: #4A4A4A;
5 }
6 .navigation_crumbs {
7 height: 45px;
8 }
9 .perinfo {
10 height: 140px;
11 padding: 30px;
12 box-sizing: border-box;
13 background: #FFFFFF;
14 border-radius: 4px;
15 border: 1px solid #DEDEDE;
16 }
17 .perinfo_left{
18 float: left;
19 }
20 .perinfo_left ul li {
21 font-size: 16px;
22 color: #6D7278;
23 }
24 .perinfo_left ul li:first-child{
25 margin-top: 7px;
26 color: #4A4A4A;
27 }
28 .perinfo_left ul li:first-child span{
29 font-size: 18px;
30 }
31 .perinfo_left ul li:first-child p {
32 font-size: 18px;
33 }
34 .perinfo_left img {
35 width: 80px;
36 height: 80px;
37 float: left;
38 }
39 .perinfo_left ul {
40 float: left;
41 margin-left: 20px;
42 margin-top: 5px;
43 }
44 .perinfo_left ul li {
45 margin-bottom: 10px;
46 font-size: 16px;
47 }
48 .perinfo_left ul li p{
49 display: inline-block;
50 }
51 .perinfo button {
52 float: right;
53 margin-right: 70px;
54 margin-top: 10px;
55 width: 140px;
56 height: 42px;
57 position: relative;
58 }
59 .perinfo button a {
60 color: #FFFFFF;
61 display: block;
62 width: 140px;
63 height: 42px;
64 text-align: center;
65 line-height: 42px;
66 position: absolute;
67 left: 0;
68 top: 0;
69 }
70 .perinfo button a:hover {
71 color: #FFFFFF;
72 }
73 .my_appointment {
74 color: #5FB878;
75 border: 2px solid#5FB878;
76 font-size: 20px;
77 display: inline-block;
78 padding: 5px 10px;
79 border-radius: 5px;
80 margin-left: 20%;
81 margin-top: 10px;
82 }
83 .my_appointment:hover {
84 color: #f46143;
85 border-color: #f46143;
86 }
87 .time {
88 float: right;
89 margin-top: 20px;
90 }
91 /* ----------------预约列表-------------------- */
92 .appointment_list {
93 margin-top: 20px;
94 font-size: 0;
95 margin-left: -10px;
96 margin-right: -10px;
97 }
98 .appointment_list li {
99 width: 33.333%;
100 display: inline-block;
101 padding: 0 10px;
102 box-sizing: border-box;
103 float: left;
104 }
105 .appointment_list li .item_content {
106 border: 1px solid #CBCBCB;
107 border-radius: 4px;
108 border: 1px solid #CBCBCB;
109 font-size: 16px;
110 height: 368px;
111 }
112 .item_title {
113 height: 48px;
114 line-height: 48px;
115 color: #FFFFFF;
116 padding: 0 20px;
117 box-sizing: border-box;
118 }
119 .item_title h3 {
120 display: inline-block;
121 float: left;
122 }
123 .item_title p {
124 display: inline-block;
125 float: right;
126 }
127 .success {
128 background-color: #44D7B6;
129 }
130 .overdue {
131 background-color: #F26363;
132 }
133 .cancel {
134 background-color: #F26363;
135 opacity: 0.5;
136 }
137 .item_info {
138 padding: 30px;
139 height: 180px;
140 }
141 .item_info li{
142 width: 100%;
143 line-height: 38px;
144 box-sizing: border-box;
145 }
146 .item_info li span {
147 display: inline-block;
148 width: 108px;
149 text-align: right;
150 color: #9B9B9B;
151 white-space: nowrap;
152 }
153 .item_info li p{
154 display: inline-block;
155 color: #303030;
156 }
157 .item_info li a{
158 display: inline-block;
159 color: #0091FF;
160 margin-left: 20px;
161 }
162 .cancel_reservation {
163 display: block;
164 width: 100px;
165 height: 40px;
166 background: #FFFFFF;
167 border-radius: 3px;
168 border: 1px solid #E6E6E6;
169 font-size: 16px;
170 color: #9B9B9B;
171 line-height: 40px;
172 text-align: center;
173 margin: 0 auto;
174 }
175 .business_titleList {
176 width: 1200px;
177 margin: 15px auto;
178 font-size: 0;
179 }
180 .business_titleList li {
181 width: 25%;
182 font-size: 14px;
183 display: inline-block;
184 text-align: center;
185 }
186 .business_titleList li p:nth-child(1) {
187 font-size: 18px;
188 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,12 +4,8 @@ $(function () { ...@@ -4,12 +4,8 @@ $(function () {
4 form.on('select(type)', function (data) { 4 form.on('select(type)', function (data) {
5 console.log(data); 5 console.log(data);
6 }) 6 })
7
8 //监听提交 7 //监听提交
9 form.on('submit(demo1)', function (data) { 8 form.on('submit(demo1)', function (data) {
10 layer.alert(JSON.stringify(data.field), {
11 title: '最终的提交信息'
12 })
13 register(data.field) 9 register(data.field)
14 return false; 10 return false;
15 }); 11 });
...@@ -26,7 +22,7 @@ function register(formData) { ...@@ -26,7 +22,7 @@ function register(formData) {
26 data : JSON.stringify(formData), 22 data : JSON.stringify(formData),
27 //数据，这里使用的是Json格式进行传输 23 //数据，这里使用的是Json格式进行传输
28 success: function (result) {//返回数据根据结果进行相应的处理 24 success: function (result) {//返回数据根据结果进行相应的处理
29 if (result.code == 200 && result.data != null) { 25 if (result.code == 200) {
30 layui.use('layer', function () { 26 layui.use('layer', function () {
31 layer.msg('注册成功！'); 27 layer.msg('注册成功！');
32 }) 28 })
......
1 layui.use('element', function () {
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 });
9 $(function () {
10 _applyBusinessWiat()
11 })
12
13
14 //网上申请业务待提交
15 function _applyBusinessWiat() {
16 var li;
17 $.ajax({
18 type: "post", //提交方式
19 url: portal.api_url + "/portal/WorkBoxService/applyBusinessWiat",//路径
20 dataType: "json",
21 data: {
22 userId:'0026609ddc6d2afabaa3c9b0ea3b0ec3'
23 },
24 //数据，这里使用的是Json格式进行传输
25 success: function (result) {//返回数据根据结果进行相应的处理
26 if (result.code == 200 && result.data != null) {
27 console.log(result.data)
28 }
29 }
30 });
31 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
52 <div class="contentBox"> 52 <div class="contentBox">
53 <ul class="business_module"> 53 <ul class="business_module">
54 <li> 54 <li>
55 <a href="" title="我的业务"> 55 <a href="./wdyw.html" title="我的业务">
56 我的业务 56 我的业务
57 </a> 57 </a>
58 </li> 58 </li>
......
1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <style>
6 </style>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <title>我的业务</title>
9 <script type="text/javascript" src="../staticJs/head.js"></script>
10 <link rel="stylesheet" type="text/css" href="../staticCss/wdyw.css">
11 </head>
12 <body>
13 <div class="main">
14 <div class="navigation_crumbs">
15 <div class="contentBox">
16 <span class="layui-breadcrumb">
17 <a href="../index.html" title="首页">首页</a>
18 <a href="./grzx.html" title="个人中心">个人中心</a>
19 <a title="我的业务"><cite>我的业务</cite></a>
20 </span>
21 </div>
22 </div>
23 <!-- -----------------个人信息------------------------ -->
24 <div class="central_area">
25 <div class="perinfo contentBox">
26 <div class="perinfo_left">
27 <img src="../staticImages/person.png" alt="">
28 <ul>
29 <li>
30 <span>上午好：</span>
31 <p>任超</p>
32 </li>
33 <li>
34 <span>身份证号：</span>
35 <p>61012216464646</p>
36 </li>
37 </ul>
38 </div>
39 </div>
40 <ul class="business_titleList">
41 <li>
42 <p>
43 <span>5</span>
44 <b>件</b>
45 </p>
46 <p>办理合计</p>
47 </li>
48 <li>
49 <p>
50 <span>1</span>
51 <b>件</b>
52 </p>
53 <p>待提交</p>
54 </li>
55 <li>
56 <p>
57 <span>5</span>
58 <b>件</b>
59 </p>
60 <p>办理中</p>
61 </li>
62 <li>
63 <p>
64 <span>5</span>
65 <b>件</b>
66 </p>
67 <p>已办结</p>
68 </li>
69 </ul>
70 <!-- -------------预约列表--------------- -->
71 <div class="contentBox">
72 <ul class="appointment_list">
73 <li>
74 <div class="item_content">
75 <div class="item_title success">
76 <h3>正常</h3>
77 <p>
78 查看
79 <i class="layui-icon layui-icon-right"></i>
80 </p>
81 </div>
82 <ul class="item_info">
83 <li>
84 <span>预约人：</span>
85 <p>任超</p>
86 </li>
87 <li>
88 <span>办事大厅：</span>
89 <p>米香园办事大厅</p>
90 </li>
91 <li>
92 <span>办理业务类型：</span>
93 <p>二手房交易</p>
94 <a href="">办事指南</a>
95 </li>
96 <li>
97 <span>预约日期：</span>
98 <p>2020-12-56 上午 16：13</p>
99 </li>
100 <li>
101 <span>预约流水号：</span>
102 <p>897987987987</p>
103 </li>
104 </ul>
105 <a class="cancel_reservation">取消预约</a>
106 </div>
107 </li>
108 <li>
109 <div class="item_content">
110 <div class="item_title overdue">
111 <h3>正常</h3>
112 <p>
113 查看
114 <i class="layui-icon layui-icon-right"></i>
115 </p>
116 </div>
117 <ul class="item_info">
118 <li>
119 <span>预约人：</span>
120 <p>任超</p>
121 </li>
122 <li>
123 <span>办事大厅：</span>
124 <p>米香园办事大厅</p>
125 </li>
126 <li>
127 <span>办理业务类型：</span>
128 <p>二手房交易</p>
129 <a href="">办事指南</a>
130 </li>
131 <li>
132 <span>预约日期：</span>
133 <p>2020-12-56 上午 16：13</p>
134 </li>
135 <li>
136 <span>预约流水号：</span>
137 <p>897987987987</p>
138 </li>
139 </ul>
140 <a class="cancel_reservation">取消预约</a>
141 </div>
142 </li>
143 <li>
144 <div class="item_content">
145 <div class="item_title cancel">
146 <h3>正常</h3>
147 <p>
148 查看
149 <i class="layui-icon layui-icon-right"></i>
150 </p>
151 </div>
152 <ul class="item_info">
153 <li>
154 <span>预约人：</span>
155 <p>任超</p>
156 </li>
157 <li>
158 <span>办事大厅：</span>
159 <p>米香园办事大厅</p>
160 </li>
161 <li>
162 <span>办理业务类型：</span>
163 <p>二手房交易</p>
164 <a href="">办事指南</a>
165 </li>
166 <li>
167 <span>预约日期：</span>
168 <p>2020-12-56 上午 16：13</p>
169 </li>
170 <li>
171 <span>预约流水号：</span>
172 <p>897987987987</p>
173 </li>
174 </ul>
175 <a class="cancel_reservation">取消预约</a>
176 </div>
177 </li>
178 </ul>
179 </div>
180 </div>
181 </div>
182 </body>
183
184 </html>
185 <script type="text/javascript" src="../staticJs/common.js"></script>
186 <script type="text/javascript" src="../staticJs/down.js"></script>
187 <script type="text/javascript" src="../staticJs/wdyw.js"></script>
...\ No newline at end of file ...\ No newline at end of file