优化导航,优化商户列表
parent
0f8726a5fa
commit
9dc659a13c
|
@ -351,6 +351,12 @@
|
|||
margin-top: .1rem;
|
||||
}
|
||||
|
||||
.business-tips{
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.navigation-btn {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
@ -665,4 +671,30 @@
|
|||
top: 50%;
|
||||
z-index: 9;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
/* 导航弹窗 */
|
||||
.navigation-box{
|
||||
width: 7.5rem;
|
||||
height: 0;
|
||||
border-radius: .3rem .3rem 0 0;
|
||||
box-shadow: 0 0 .5rem rgba(0, 0, 0, .3);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
transition: all .6s;
|
||||
}
|
||||
.navigation-box.show{
|
||||
height: 3rem;
|
||||
}
|
||||
.navigation-box .item{
|
||||
line-height: 1rem;
|
||||
text-align: center;
|
||||
border-bottom: .02rem solid #e1e1e1;
|
||||
}
|
||||
.navigation-box .item:last-child{
|
||||
border: 0;
|
||||
}
|
34
js/script.js
34
js/script.js
|
@ -41,6 +41,7 @@ jQuery(function($){
|
|||
$('.result-tips').addClass('show');
|
||||
},3000)
|
||||
});
|
||||
|
||||
// 关闭弹窗
|
||||
$('.tips-btn').click(function(){
|
||||
turntableFlag = true;
|
||||
|
@ -53,21 +54,36 @@ jQuery(function($){
|
|||
});
|
||||
}
|
||||
|
||||
// 立即导航
|
||||
// 打开导航弹窗
|
||||
if($('.navigation-btn').length){
|
||||
// 打开弹窗
|
||||
$('.navigation-btn').click(function(){
|
||||
// 百度地图(纬度,经度)
|
||||
window.open('http://api.map.baidu.com/marker?location=30.763954,104.098515&title=万圣家园B区&content=居民小区&output=html')
|
||||
$('.pull-bg').addClass('show');
|
||||
$('.navigation-box').addClass('show');
|
||||
});
|
||||
}
|
||||
|
||||
// 详情页导航
|
||||
if($('.addr-item-btn').length){
|
||||
// 打开弹窗
|
||||
$('.addr-item-btn').click(function(){
|
||||
// 百度地图(纬度,经度)
|
||||
window.open('http://api.map.baidu.com/marker?location=30.763954,104.098515&title=万圣家园B区&content=居民小区&output=html')
|
||||
// 开始导航
|
||||
if($('.navigation-box').length){
|
||||
// 腾讯地图
|
||||
$('.tx-navigation').click(function(){ // (lng,lat)
|
||||
window.open('https://apis.map.qq.com/uri/v1/marker?marker=coord:30.763954,104.098515;addr:万圣家园B区;&referer=webtest')
|
||||
});
|
||||
// 百度地图
|
||||
$('.bd-navigation').click(function(){ // (lng,lat)
|
||||
window.open('http://api.map.baidu.com/marker?location=30.763954,104.098515&title=万圣家园B区&output=html')
|
||||
});
|
||||
// 高德地图
|
||||
$('.gd-navigation').click(function(){ // (lat,lng)
|
||||
window.open('https://uri.amap.com/marker?position=104.098515,30.763954&name=万圣家园B区')
|
||||
});
|
||||
}
|
||||
|
||||
// 关闭导航弹窗
|
||||
if($('.pull-bg-navigation').length){
|
||||
$('.pull-bg-navigation').click(function(){
|
||||
$('.pull-bg').removeClass('show');
|
||||
$('.navigation-box').removeClass('show');
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -97,6 +97,15 @@
|
|||
<div class="navigation-btn font24 color-ff background-f35 radius25 flex">立即导航</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="business-tips font24 color-99">~ <span>下拉显示更多</span> ~</div>
|
||||
</div>
|
||||
<!-- 弹窗背景 -->
|
||||
<div class="pull-bg pull-bg-navigation"></div>
|
||||
<!-- 导航弹窗 -->
|
||||
<div class="navigation-box background-ff font32">
|
||||
<div class="item tx-navigation border-box">腾讯地图</div>
|
||||
<div class="item bd-navigation border-box">百度地图</div>
|
||||
<div class="item gd-navigation border-box">高德地图</div>
|
||||
</div>
|
||||
<!-- 尾部 -->
|
||||
<div class="footer background-ff border-box">
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
<div class="address border-box">
|
||||
<div class="addr-map" id="addr-map"></div>
|
||||
<div class="addr-txt">
|
||||
<div class="item addr-item-btn flex">
|
||||
<div class="item navigation-btn flex">
|
||||
<p class="font24"><strong>地址:四川省成都市天府新区华阳镇</strong></p>
|
||||
<span class="radius100 background-f35 flex">
|
||||
<img src="../images/icon/icon-addr.png" alt="导航" style="width: .26rem; height: .26rem;">
|
||||
|
@ -69,6 +69,14 @@
|
|||
zoom:10
|
||||
});
|
||||
</script>
|
||||
<!-- 弹窗背景 -->
|
||||
<div class="pull-bg pull-bg-navigation"></div>
|
||||
<!-- 导航弹窗 -->
|
||||
<div class="navigation-box background-ff font32">
|
||||
<div class="item bd-navigation border-box">百度地图</div>
|
||||
<div class="item gd-navigation border-box">高德地图</div>
|
||||
<div class="item tx-navigation border-box">腾讯地图</div>
|
||||
</div>
|
||||
<!-- 尾部 -->
|
||||
<div class="footer background-ff border-box">
|
||||
<div class="foot font24 flex">
|
||||
|
|
Loading…
Reference in New Issue