Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
508f6fff by 焦小希
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/renchao/portalStaticPage

2 parents 4f925722 0efd4585
Inline Side-by-side
Showing 5 changed files with 75 additions and 3 deletions
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
107 </h2> 107 </h2>
108 <a class="news-img" href="" title="图片新闻地信中心开展外业安全生产监控系统培训工作"><img src="staticImages/news_demo.jpg" 108 <a class="news-img" href="" title="图片新闻地信中心开展外业安全生产监控系统培训工作"><img src="staticImages/news_demo.jpg"
109 alt="图片新闻地信中心开展外业安全生产监控系统培训工作" /></a> 109 alt="图片新闻地信中心开展外业安全生产监控系统培训工作" /></a>
110 <ul> 110 <ul id='ulNews'>
111 <li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li> 111 <li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
112 <li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li> 112 <li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
113 <li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li> 113 <li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
...@@ -570,6 +570,7 @@ ...@@ -570,6 +570,7 @@
570 </body> 570 </body>
571 571
572 </html> 572 </html>
573 <script src="./staticLib/jquery/jquery.min.js"></script>
573 <script src="./staticLib/layui/layui.js"></script> 574 <script src="./staticLib/layui/layui.js"></script>
574 <script src="./staticJs/staticIndex.js"></script> 575 <script src="./staticJs/staticIndex.js"></script>
575 <script src="https://at.alicdn.com/t/font_2174584_uxkon9mpq1.js"></script> 576 <script src="https://at.alicdn.com/t/font_2174584_uxkon9mpq1.js"></script>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -30,3 +30,20 @@ layui.use('util', function () { ...@@ -30,3 +30,20 @@ layui.use('util', function () {
30 } 30 }
31 }); 31 });
32 }); 32 });
33
34 //初始化方法
35 $(function(){
36 NewsData();
37 });
38
39
40 function NewsData(){
41 //$.ajax()
42 var ulNews=$("#ulNews");
43 ulNews.empty();
44 var str='';
45 for(var i=0;i<6;i++){
46 str='<li><a href="#" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>';
47 ulNews.append(str);
48 }
49 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -91,7 +91,7 @@ $(function () { ...@@ -91,7 +91,7 @@ $(function () {
91 91
92 // 办事大厅标记 92 // 办事大厅标记
93 var marker = new BMap.Marker(new BMap.Point(108.95346, 34.265725)); 93 var marker = new BMap.Marker(new BMap.Point(108.95346, 34.265725));
94 var marker1 = new BMap.Marker(new BMap.Point(108.953381,34.256923)); 94 var marker1 = new BMap.Marker(new BMap.Point(108.953381, 34.256923));
95 // 在地图上添加点标记 95 // 在地图上添加点标记
96 map.addOverlay(marker); 96 map.addOverlay(marker);
97 map.addOverlay(marker1); 97 map.addOverlay(marker1);
...@@ -103,12 +103,40 @@ $(function () { ...@@ -103,12 +103,40 @@ $(function () {
103 }; 103 };
104 var infoWindow = new BMap.InfoWindow('西安市大唐不夜城', opts); 104 var infoWindow = new BMap.InfoWindow('西安市大唐不夜城', opts);
105 var infoWindow1 = new BMap.InfoWindow('南门', opts); 105 var infoWindow1 = new BMap.InfoWindow('南门', opts);
106
106 // 点标记添加点击事件 107 // 点标记添加点击事件
107 marker.addEventListener('click', function () { 108 marker.addEventListener('click', function () {
109 $('.office_halls li').removeClass('hallActive')
110 $('.office_halls li').eq(0).addClass('hallActive')
111 point = new BMap.Point(108.95346, 34.265725);
108 map.openInfoWindow(infoWindow, point); // 开启信息窗口 112 map.openInfoWindow(infoWindow, point); // 开启信息窗口
109 }); 113 });
110 marker1.addEventListener('click', function () { 114 marker1.addEventListener('click', function () {
115 $('.office_halls li').removeClass('hallActive')
116 $('.office_halls li').eq(1).addClass('hallActive')
117 point = new BMap.Point(108.953381, 34.256923);
111 map.openInfoWindow(infoWindow1, point); // 开启信息窗口 118 map.openInfoWindow(infoWindow1, point); // 开启信息窗口
119
120
112 }); 121 });
122 // 办事大厅点亮
123 $('.office_halls li').click(function () {
124 $('.office_halls li').removeClass('hallActive')
125 $(this).addClass('hallActive')
126 var index = $(this).index();
127 if (index == 1) {
128 point = new BMap.Point(108.95346, 34.265725);
129 map.openInfoWindow(infoWindow, point); // 开启信息窗口
130 } else if (index == 2) {
131 point = new BMap.Point(108.953381, 34.256923);
132 map.openInfoWindow(infoWindow1, point);
133 }
134 })
113 135
136 infoWindow.addEventListener('close', function (type, target, point) {
137 $('.office_halls li').eq(0).removeClass('hallActive')
138 })
139 infoWindow1.addEventListener('close', function (type, target, point) {
140 $('.office_halls li').eq(1).removeClass('hallActive')
141 })
114 }) 142 })
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -111,6 +111,22 @@ ...@@ -111,6 +111,22 @@
111 .map_content { 111 .map_content {
112 margin-top: 20px; 112 margin-top: 20px;
113 } 113 }
114 .office_halls {
115 width: 15%;
116 float: left;
117 margin-right: 2%;
118 }
119 .office_halls h2 {
120 font-weight: 600;
121 margin-bottom: 6px;
122 }
123 .office_halls li{
124 line-height: 28px;
125 cursor: pointer;
126 }
127 .office_halls li:hover {
128 color: #0091FF;
129 }
114 .footer_button { 130 .footer_button {
115 margin: 20px 0; 131 margin: 20px 0;
116 text-align: center; 132 text-align: center;
...@@ -121,3 +137,8 @@ ...@@ -121,3 +137,8 @@
121 .footer_button a { 137 .footer_button a {
122 color: #fff; 138 color: #fff;
123 } 139 }
140
141 .hallActive {
142 background-color: rgb(236, 236, 236);
143 color: #0091FF;
144 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -134,7 +134,12 @@ ...@@ -134,7 +134,12 @@
134 </div> 134 </div>
135 <!-- ----------------------------------地图api--------------------------------------------------- --> 135 <!-- ----------------------------------地图api--------------------------------------------------- -->
136 <div class="map_content contentBox"> 136 <div class="map_content contentBox">
137 <div id="container" style="width: 100%;height: 500px;"></div> 137 <ul class="office_halls">
138 <h2>请选择办事大厅</h2>
139 <li>大唐不夜城</li>
140 <li>南门永宁门</li>
141 </ul>
142 <div id="container" style="width: 80%;height: 500px;"></div>
138 </div> 143 </div>
139 <div class="footer_button"> 144 <div class="footer_button">
140 <button type="button" class="layui-btn layui-btn-normal"> 145 <button type="button" class="layui-btn layui-btn-normal">
......