Skip to content

T
tl_estate
Commit 951ad470 authored by agping's avatar agping
Browse files
Options

1

parent 0300a070
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 67 deletions
application/app/view/index/share_detail.html
View file @ 951ad470
...@@ -14,26 +14,105 @@ ...@@ -14,26 +14,105 @@
<link rel="stylesheet" href="/app/css/details_tl_tuiguang.css?new01"> <link rel="stylesheet" href="/app/css/details_tl_tuiguang.css?new01">
<link> <link>
</head> </head>
<style type="text/css">
.shop-img-list{
margin-top: .8rem;
width: 7.5rem;
overflow-x: scroll;
white-space: nowrap;
box-sizing: border-box;
padding-left: .36rem;
}
.shop-img-list>div{
display: inline-block;
position: relative;
}
.img_video_bofang{
position: absolute;
width: 3.2rem;
height: 2.38rem;
background: url(/app/images/bofang@2x.png) no-repeat center center/.6rem .6rem;
}
.shop-img-list img{
width: 3.2rem;
height: 2.38rem;
border-radius:.1rem;
margin-right: .18rem;
}
.m_part1_w{
height: 4.2rem!important;
border: 0!important;
}
#img_item_ul video{
width: 7.5rem;
max-height:calc(100vh - 1.96rem);
object-fit:fill;
/*position: absolute;
bottom: 1.06rem;*/
}
#img_item_ul img{
width: 7.5rem;
}
#img_item_ul li{
display: flex;
align-items: center;
background: #F8F9FB;
}
.shop-detail-tel{
position: absolute;
bottom: 0;
width:7.50rem;
height:1.06rem;
background:rgba(255,255,255,1);
box-sizing: border-box;
padding: .3rem;
}
.shop-detail-tel span:nth-of-type(1){
font-size:.28rem;
font-weight:500;
color:rgba(51,51,51,1);
}
.shop-detail-tel span:nth-of-type(2){
font-size:.24rem;
font-weight:400;
color:rgba(102,102,102,1);
margin-right: 1rem;
}
.shop-detail-tel span:nth-of-type(3){
font-size:.28rem;
font-weight:400;
color:rgba(255,128,24,1);
}
.tel-agent-video{
position: absolute;
right: .2rem;
top: .18rem;
width: .6rem;
height: .6rem;
background: url(/app/images/agent-tel-pc.png) no-repeat center center/.4rem .4rem;
}
</style>
<body style="background: #FFFFFF"> <body style="background: #FFFFFF">
<header class="m_part1_w"> <header class="m_part1_w">
<div class="u_btn1b" onclick="window.history.go(-1)" style="margin-top:0.1rem"><span style=""><i class="icon-angle-left" style="font-size:0.65rem"></i></span></div> <div class="u_btn1b" onclick="window.history.go(-1)" style="margin-top:0.1rem"><span style=""><i class="icon-angle-left" style="font-size:0.65rem"></i></span></div>
<div class="lp-bunner"> <div class="line_a" style="margin-top: 1rem;">
<ul class="swiper-wrapper" id="img_item_ul">
</ul>
<span class="lp-bunner-page"> <span class="lp-index"> 1 </span> / <span class="lp-sum"> 50 </span> </span>
</div> </div>
<p class="b3_spanhao_font" id="font_24" style="margin-bottom: .1rem;">
<span class="b3_spanhao_left">
编号：
<span class="b3_spanhao"></span>
</span>
</p>
<div class="shop-img-list">
</div>
</header> </header>
<!--line 1--> <!--line 1-->
<div class="line_a">
</div>
<p class="b3_spanhao_font" id="font_24">
<span class="b3_spanhao_left">
编号：
<span class="b3_spanhao"></span>
</span>
</p>
<p class="line_hr"></p> <p class="line_hr"></p>
<!--line 2--> <!--line 2-->
<div class="line_b"> <div class="line_b">
...@@ -293,6 +372,17 @@ ...@@ -293,6 +372,17 @@
<!--<img src="/app/images/img_more@2x.png" alt="" />--> <!--<img src="/app/images/img_more@2x.png" alt="" />-->
<img src="/app/images/clik_shop_icon2.png" /> <img src="/app/images/clik_shop_icon2.png" />
</div> </div>
<!--点击任意视频 全屏显示（轮播）-->
<div class="lp-bunner" style="display: none;">
<ul class="swiper-wrapper" id="img_item_ul">
</ul>
<span class="lp-bunner-page">
<span class="back-to-shop-detail"></span>
<span class="lp-index"> 1 </span> / <span class="lp-sum"> 50 </span>
</span>
</div>
<!--<script src="/app/js/jquery.js"></script>--> <!--<script src="/app/js/jquery.js"></script>-->
<script src="/app/js/jquery-1122-min.js" charset="UTF-8"></script> <script src="/app/js/jquery-1122-min.js" charset="UTF-8"></script>
......
public/app/css/lunbo.css
View file @ 951ad470
...@@ -118,12 +118,15 @@ ...@@ -118,12 +118,15 @@
.JsNewsImg .swiper-pagination .swiper-pagination-bullet-active { .JsNewsImg .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1 opacity: 1
} }
.lp-bunner { .lp-bunner {
position: relative; width: 7.5rem;
height: 5.2rem; position: fixed;
overflow: hidden; /*height: 53.2rem;*/
background: #aaa height: 100vh;
overflow: hidden;
background: #aaa;
top: 0;
z-index: 99999999;
} }
.lp-bunner ul, .lp-bunner li { .lp-bunner ul, .lp-bunner li {
...@@ -131,9 +134,10 @@ ...@@ -131,9 +134,10 @@
} }
.lp-bunner a { .lp-bunner a {
height: 100%; /*height: 100%;*/
display: block; display: block;
position: relative /*position: relative;*/
} }
.lp-bunner .icon-video { .lp-bunner .icon-video {
...@@ -147,18 +151,27 @@ ...@@ -147,18 +151,27 @@
} }
.lp-bunner-page { .lp-bunner-page {
font-size: 0.26rem; font-size: 0.36rem;
position: absolute;
top: 0;
text-align: center;
color: #333333;
width: 7.5rem;
height:.9rem;
line-height: .9rem;
background:rgba(255,255,255,1);
box-shadow:0px 4px 8px 0px rgba(186,186,186,0.15);
}
.back-to-shop-detail{
cursor: pointer;
position: absolute; position: absolute;
left:44%; left: .1rem;
bottom: 0.3rem; width: .9rem;
text-align: center; height: .9rem;
color: #fff; background: rgba(255,255,255,1) url(/app/images/Path_details_shop@2x.png) no-repeat center center/.23rem .38rem
display: inline-block;
width: 1rem;
height: 0.5rem;
border-radius: 0.25rem;
background:rgba(0,0,0,0.5);
line-height: 0.48rem;
} }
#classNames li { #classNames li {
......
public/app/js/detaila_tuiguang.js
View file @ 951ad470
...@@ -163,21 +163,32 @@ ...@@ -163,21 +163,32 @@
$('.depth-details').html(response.data.depth+'米'); $('.depth-details').html(response.data.depth+'米');
$('.business-scope-details').html(response.data.business_scope); $('.business-scope-details').html(response.data.business_scope);
$('.decoration-details').html(has_decoration); $('.decoration-details').html(has_decoration);
//视频相关
var lp_img = response.data.images; //轮播图 var lp_img = response.data.images; //轮播图(图片)
var lp_video = response.data.shop_videos; //轮播图(视频)
var lp_img1 = response.data.plan_images; //楼层平面图 var lp_img1 = response.data.plan_images; //楼层平面图
var img_item_ul = ""; var img_item_ul = "";
//平面图 去掉 var vadio_item_ul = "";
// if(lp_img1.length == "0") { //滚动区域
// $("#planter").hide(); for(var n = 0; n < lp_video.length; n++) {
// } img_item_ul += '<div class="luobo-shop-detail" style="cursor:pointer" data-num="'+ (n+1) +'"><div class="img_video_bofang"></div><img src="' + response.data.shop_videos[n].video_image + '" onerror="src=\'/app/images/pzz_.jpg\'"/></div>'
// for(var n = 0; n < lp_img1.length; n++) { };
// slider3 += '<div class="slide"><img src="' + response.data.api_path + response.data.plan_images[n].img_name + '"></div>' for(var n = 0; n < lp_img.length; n++) {
// $(".slider3").html(slider3); img_item_ul += '<div class="luobo-shop-detail" data-num="'+ (lp_video.length*1+n+1) +'"><img src="' + response.data.api_path + response.data.images[n].img_name + '" onerror="src=\'/app/images/pzz_.jpg\'"/></div>'
// } $(".shop-img-list").html(img_item_ul);
};
//滚动区域
// 视频详情
for(var n = 0; n < lp_video.length; n++) {//视频详情
vadio_item_ul += '<li class="swiper-slide swiper-slide-active" data-index="1" data-totalindex="1" data-class="101" data-sum="6" style="width: 414px;"><video src="' + response.data.shop_videos[n].video_path + '" controls="controls" preload="auto" webkit-playsinline="true" playsinline="playsinline" loop="loop" poster=" ' + response.data.shop_videos[n].video_image + '"></video><div class="shop-detail-tel"><span>'+ response.data.shop_videos[n].upload_name +'</span><span>（该视频由我上传）</span><span>'+ response.data.shop_videos[n].upload_phone+'</span><a class="tel-agent-video" href="tel:' + response.data.shop_videos[n].upload_phone + '"></a></div></li>'
};
for(var n = 0; n < lp_img.length; n++) { for(var n = 0; n < lp_img.length; n++) {
img_item_ul += '<li class="swiper-slide swiper-slide-active" data-index="1" data-totalindex="1" data-class="101" data-sum="6" style="width: 414px;"><a><img src="' + response.data.api_path + response.data.images[n].img_name + '" onerror="src=\'/app/images/pzz_.jpg\'"/></a></li>' vadio_item_ul += '<li class="swiper-slide swiper-slide-active" data-index="1" data-totalindex="1" data-class="101" data-sum="6" style="width: 414px;"><a><img src="' + response.data.api_path + response.data.images[n].img_name + '" onerror="src=\'/app/images/pzz_.jpg\'"/></a></li>'
$("#img_item_ul").html(img_item_ul); $("#img_item_ul").html(vadio_item_ul);
}; };
...@@ -191,28 +202,6 @@ ...@@ -191,28 +202,6 @@
// map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 // map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
// map.setCurrentCity("上海"); // 设置地图显示的城市 此项是必须设置的 // map.setCurrentCity("上海"); // 设置地图显示的城市 此项是必须设置的
// map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 // map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var swiper = new Swiper('.lp-bunner', {
preloadImages: false,
lazyLoading: true,
lazyLoadingOnTransitionStart: true,
onTransitionEnd: function(swiper) {
$('.lp-index').text(swiper.activeIndex + 1);
},
onInit: function(swiper) {
$('.lp-index').text(swiper.activeIndex + 1);
$('.lp-sum').text(swiper.imagesToLoad.length || swiper.imagesLoaded || $('img', '.lp-bunner').size());
}
});
var liWidth = $('.showBigClass li').click(function() {
$(this).addClass('on').siblings().removeClass('on');
var albumType = $(this).attr('data-index');
var $li = $(".shopBigBox .swiper-wrapper").find("[data-class=" + albumType + "]:first");
bimgSwiper.slideTo(+$li.data("totalindex") - 1, 500, true);
}).width();
typeSwiper = new Swiper('.showBigClass', {
width: liWidth ? liWidth : 52.5
});
//隐藏时间 //隐藏时间
if(shang == "0") { if(shang == "0") {
//商场 //商场
...@@ -310,6 +299,48 @@ ...@@ -310,6 +299,48 @@
var _name = getUrlParam('user_name'); var _name = getUrlParam('user_name');
var _name_img = getUrlParam('user_img'); var _name_img = getUrlParam('user_img');
var _tel = getUrlParam('user_tel'); var _tel = getUrlParam('user_tel');
//操作 视频 轮播
//点击 视频区域
$(document).on('click', '.luobo-shop-detail', function(e) {
$('.lp-bunner').show();
var click_shop_img = $(this).attr('data-num');
var swiper = new Swiper('.lp-bunner', {
preloadImages: false,
lazyLoading: true,
lazyLoadingOnTransitionStart: true,
initialSlide:click_shop_img-1,
onTransitionEnd: function(swiper) {
$('.lp-index').text(swiper.activeIndex + 1);
},
onInit: function(swiper) {
//默认第一页 怎么显示
if(click_shop_img*1 > 1){
swiper.activeIndex = click_shop_img-1;
}
$('.lp-index').text(swiper.activeIndex + 1);
$('.lp-sum').text($('.swiper-slide').size());
}
});
var liWidth = $('.showBigClass li').click(function() {
$(this).addClass('on').siblings().removeClass('on');
var albumType = $(this).attr('data-index');
var $li = $(".shopBigBox .swiper-wrapper").find("[data-class=" + albumType + "]:first");
bimgSwiper.slideTo(+$li.data("totalindex") - 1, 500, true);
}).width();
typeSwiper = new Swiper('.showBigClass', {
width: liWidth ? liWidth : 52.5
});
});
//点击视频详情 返回
$(document).on('click', '.back-to-shop-detail', function(e) {
$('.lp-bunner').hide(); //隐藏视频详情
window.location.reload()
});
// pc h5推广 // pc h5推广
//经纪人 商铺列表 微门店 //经纪人 商铺列表 微门店
......
public/appnew/src/components/openSquareDetails/openSquareDetails.vue
View file @ 951ad470
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
_this.articleTime = _news.create_time; _this.articleTime = _news.create_time;
_this.houseId = _news.house_id; _this.houseId = _news.house_id;
_this.isVip = _news.is_vip; _this.isVip = _news.is_vip;
_this.isShow = _news.isShow; _this.isShow = _news.is_show;
_this.internalTitle = _news.internal_title; _this.internalTitle = _news.internal_title;
_this.isExclusiveType = _news.is_exclusive_type;//字符串转化为数组 _this.isExclusiveType = _news.is_exclusive_type;//字符串转化为数组
_this.shopSign=_news.shop_sign.split(',') _this.shopSign=_news.shop_sign.split(',')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment