Lee
/
consumer-coupon
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化导航，优化商户列表

master
Lee 2022-09-12 13:52:42 +08:00
parent 0f8726a5fa
commit 9dc659a13c
4 changed files with 75 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
css/style.css
View File

@ -351,6 +351,12 @@
margin-top: .1rem;
}
.business-tips{
text-align: center;
margin-top: 20px;
}
.navigation-btn {
justify-content: center;
align-items: center;
@ -666,3 +672,29 @@
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
View File

@ -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');
});
}

9
user/business.html
View File

@ -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">

10
user/detail.html
View File

@ -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">