Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
154ba2e6 by 任超
Options

feat:预约结果页面

1 parent b0b02c40
Inline Side-by-side
Showing 3 changed files with 118 additions and 12 deletions
...@@ -6,4 +6,24 @@ $(function () { ...@@ -6,4 +6,24 @@ $(function () {
6 layer.msg(elem.text()); 6 layer.msg(elem.text());
7 }); 7 });
8 }); 8 });
9 // 地图
10 var map = new BMap.Map('container');
11 var point = new BMap.Point(108.95346, 34.265725);
12 map.centerAndZoom(point, 15);
13 // 创建点标记
14 var marker = new BMap.Marker(point);
15 map.addOverlay(marker);
16 // 创建信息窗口
17 var opts = {
18 width: 200,
19 height: 100,
20 title: '不夜城'
21 };
22 var infoWindow = new BMap.InfoWindow('大唐不夜城', opts);
23 // 点标记添加点击事件
24 map.openInfoWindow(infoWindow, point); // 开启信息窗口
25 marker.addEventListener('click', function () {
26 map.openInfoWindow(infoWindow, point); // 开启信息窗口
27 });
28 map.enableScrollWheelZoom();
9 }); 29 });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -77,4 +77,57 @@ ...@@ -77,4 +77,57 @@
77 /* ---------------预约信息---------------------- */ 77 /* ---------------预约信息---------------------- */
78 .appointment_status { 78 .appointment_status {
79 padding: 10px; 79 padding: 10px;
80 font-size: 14px;
81 box-sizing: border-box;
82 }
83 .status_info {
84 float: left;
85 }
86 .appointment_status .title {
87 color: #009688;
88 font-weight: 600;
89 margin-bottom: 10px;
90 }
91 .appointment_status .title h3 {
92 font-weight: 600;
93 margin-bottom: 8px;
94 }
95 .appointment_status .title h3 span {
96 color: #FF5722;
97 }
98 .appointment_status ul li {
99 line-height: 24px;
100 }
101 .code {
102 float: left;
103 width: 100px;
104 height: 100px;
105 margin-left: 20%;
106 margin-top: 15px;
107 }
108 .code img {
109 width: 100%;
110 height: 100%;
111 }
112 .appointment_info_content {
113 margin: 15px auto;
114 font-size: 14px;
115 }
116 .appointment_info {
117 width: 25%;
118 float: left;
119 height: 500px;
120 box-sizing: border-box;
121 padding: 10px;
122 margin-right:10px;
123 }
124 .appointment_info h3 {
125 font-weight: 600;
126 margin-bottom: 10px;
127 }
128 .appointment_info li {
129 line-height: 30px;
130 }
131 .appointment_info li p {
132 display: inline-block;
80 } 133 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -100,19 +100,51 @@ ...@@ -100,19 +100,51 @@
100 </div> 100 </div>
101 <!-- ---------------------预约状态------------------------- --> 101 <!-- ---------------------预约状态------------------------- -->
102 <div class="appointment_status layui-bg-gray contentBox"> 102 <div class="appointment_status layui-bg-gray contentBox">
103 <div class="title"> 103 <div class="status_info">
104 <h3> 104 <div class="title">
105 预约成功！您的预约号： 105 <h3>
106 <span>952567654</span> 106 预约成功！您的预约号：
107 </h3> 107 <span>952567654</span>
108 <p>请记录下您的预约号，以便后续的预约服务。</p> 108 </h3>
109 <p>请记录下您的预约号，以便后续的预约服务。</p>
110 </div>
111 <ul>
112 <li>1.您曾经失约（0）次，请留意您本次的预约时间和业务类型，切勿迟到或失约。</li>
113 <li>2.如确需取消预约，请提前1天登陆系统办理</li>
114 <li>3.请凭预约号及相关证件，按预约时间提前10分钟到选定的不动产登记中心办理业务</li>
115 </ul>
116 </div>
117 <div class="code">
118 <img src="../../staticImages/code.png">
109 </div> 119 </div>
110 <ul>
111 <li></li>
112 </ul>
113 </div> 120 </div>
114 <div class="appointment_info"> 121 <div class="appointment_info_content contentBox">
115 122 <div class="appointment_info layui-bg-gray">
123 <h3>预约信息</h3>
124 <ul>
125 <li>
126 <span>姓名：</span>
127 <p>任超</p>
128 </li>
129 <li>
130 <span>身份证号：</span>
131 <p>6101245646546</p>
132 </li>
133 <li>
134 <span>办事大厅：</span>
135 <p>碑林区办事大厅</p>
136 </li>
137 <li>
138 <span>办理业务类型：</span>
139 <p>二手房过户</p>
140 </li>
141 <li>
142 <span>预约时间：</span>
143 <p>2020年10月16日上午 11:00</p>
144 </li>
145 </ul>
146 </div>
147 <div id="container" style="width: 74%;height: 500px;"></div>
116 </div> 148 </div>
117 </div> 149 </div>
118 <!-- ----------------------------------内容模块的end----------------------------------------------- --> 150 <!-- ----------------------------------内容模块的end----------------------------------------------- -->
...@@ -188,7 +220,8 @@ ...@@ -188,7 +220,8 @@
188 </body> 220 </body>
189 221
190 </html> 222 </html>
223 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0NWXXsCSawnWID4UYI7Uhrl9WgtI2IGs"></script>
191 <script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script> 224 <script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script>
192 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script> 225 <script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
193 <script src="../../staticJs/swiper-bundle.min.js"></script> 226 <script src="../../staticJs/swiper-bundle.min.js"></script>
194 <script type="text/javascript" src="../../staticJs/yyjg.js"></script>
...\ No newline at end of file ...\ No newline at end of file
227 <script type="text/javascript" src="../../staticJs/yyjg.js"></script>
......