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 () {
layer.msg(elem.text());
});
});
// 地图
var map = new BMap.Map('container');
var point = new BMap.Point(108.95346, 34.265725);
map.centerAndZoom(point, 15);
// 创建点标记
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 创建信息窗口
var opts = {
width: 200,
height: 100,
title: '不夜城'
};
var infoWindow = new BMap.InfoWindow('大唐不夜城', opts);
// 点标记添加点击事件
map.openInfoWindow(infoWindow, point); // 开启信息窗口
marker.addEventListener('click', function () {
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
map.enableScrollWheelZoom();
});
\ No newline at end of file
......
......@@ -77,4 +77,57 @@
/* ---------------预约信息---------------------- */
.appointment_status {
padding: 10px;
font-size: 14px;
box-sizing: border-box;
}
.status_info {
float: left;
}
.appointment_status .title {
color: #009688;
font-weight: 600;
margin-bottom: 10px;
}
.appointment_status .title h3 {
font-weight: 600;
margin-bottom: 8px;
}
.appointment_status .title h3 span {
color: #FF5722;
}
.appointment_status ul li {
line-height: 24px;
}
.code {
float: left;
width: 100px;
height: 100px;
margin-left: 20%;
margin-top: 15px;
}
.code img {
width: 100%;
height: 100%;
}
.appointment_info_content {
margin: 15px auto;
font-size: 14px;
}
.appointment_info {
width: 25%;
float: left;
height: 500px;
box-sizing: border-box;
padding: 10px;
margin-right:10px;
}
.appointment_info h3 {
font-weight: 600;
margin-bottom: 10px;
}
.appointment_info li {
line-height: 30px;
}
.appointment_info li p {
display: inline-block;
}
\ No newline at end of file
......
......@@ -100,19 +100,51 @@
</div>
<!-- ---------------------预约状态------------------------- -->
<div class="appointment_status layui-bg-gray contentBox">
<div class="title">
<h3>
预约成功！您的预约号：
<span>952567654</span>
</h3>
<p>请记录下您的预约号，以便后续的预约服务。</p>
<div class="status_info">
<div class="title">
<h3>
预约成功！您的预约号：
<span>952567654</span>
</h3>
<p>请记录下您的预约号，以便后续的预约服务。</p>
</div>
<ul>
<li>1.您曾经失约（0）次，请留意您本次的预约时间和业务类型，切勿迟到或失约。</li>
<li>2.如确需取消预约，请提前1天登陆系统办理</li>
<li>3.请凭预约号及相关证件，按预约时间提前10分钟到选定的不动产登记中心办理业务</li>
</ul>
</div>
<div class="code">
<img src="../../staticImages/code.png">
</div>
<ul>
<li></li>
</ul>
</div>
<div class="appointment_info">
<div class="appointment_info_content contentBox">
<div class="appointment_info layui-bg-gray">
<h3>预约信息</h3>
<ul>
<li>
<span>姓名：</span>
<p>任超</p>
</li>
<li>
<span>身份证号：</span>
<p>6101245646546</p>
</li>
<li>
<span>办事大厅：</span>
<p>碑林区办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<p>二手房过户</p>
</li>
<li>
<span>预约时间：</span>
<p>2020年10月16日上午 11:00</p>
</li>
</ul>
</div>
<div id="container" style="width: 74%;height: 500px;"></div>
</div>
</div>
<!-- ----------------------------------内容模块的end----------------------------------------------- -->
......@@ -188,7 +220,8 @@
</body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0NWXXsCSawnWID4UYI7Uhrl9WgtI2IGs"></script>
<script type="text/javascript" src="../../staticLib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../staticLib/layui/layui.js"></script>
<script src="../../staticJs/swiper-bundle.min.js"></script>
<script type="text/javascript" src="../../staticJs/yyjg.js"></script>
\ No newline at end of file
<script type="text/javascript" src="../../staticJs/yyjg.js"></script>
......