Skip to content

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

1

parent 0300a070
Show whitespace changes
Inline Side-by-side
Showing with 194 additions and 60 deletions
application/app/view/index/share_detail.html
View file @ 951ad470
......@@ -14,26 +14,105 @@
<link rel="stylesheet" href="/app/css/details_tl_tuiguang.css?new01">
<link>
</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">
<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="lp-bunner">
<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 class="line_a" style="margin-top: 1rem;">
</div>
</header>
<!--line 1-->
<div class="line_a">
</div>
<p class="b3_spanhao_font" id="font_24">
<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>
<!--line 1-->
<p class="line_hr"></p>
<!--line 2-->
<div class="line_b">
......@@ -294,6 +373,17 @@
<img src="/app/images/clik_shop_icon2.png" />
</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-1122-min.js" charset="UTF-8"></script>
<script src="/app/js/swiper.js"></script>
......
public/app/css/lunbo.css
View file @ 951ad470
......@@ -118,12 +118,15 @@
.JsNewsImg .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1
}
.lp-bunner {
position: relative;
height: 5.2rem;
width: 7.5rem;
position: fixed;
/*height: 53.2rem;*/
height: 100vh;
overflow: hidden;
background: #aaa
background: #aaa;
top: 0;
z-index: 99999999;
}
.lp-bunner ul, .lp-bunner li {
......@@ -131,9 +134,10 @@
}
.lp-bunner a {
height: 100%;
/*height: 100%;*/
display: block;
position: relative
/*position: relative;*/
}
.lp-bunner .icon-video {
......@@ -147,18 +151,27 @@
}
.lp-bunner-page {
font-size: 0.26rem;
font-size: 0.36rem;
position: absolute;
left:44%;
bottom: 0.3rem;
top: 0;
text-align: center;
color: #fff;
display: inline-block;
width: 1rem;
height: 0.5rem;
border-radius: 0.25rem;
background:rgba(0,0,0,0.5);
line-height: 0.48rem;
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;
left: .1rem;
width: .9rem;
height: .9rem;
background: rgba(255,255,255,1) url(/app/images/Path_details_shop@2x.png) no-repeat center center/.23rem .38rem
}
#classNames li {
......
public/app/js/detaila_tuiguang.js
View file @ 951ad470
......@@ -163,21 +163,32 @@
$('.depth-details').html(response.data.depth+'米');
$('.business-scope-details').html(response.data.business_scope);
$('.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 img_item_ul = "";
//平面图 去掉
// if(lp_img1.length == "0") {
// $("#planter").hide();
// }
// 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>'
// $(".slider3").html(slider3);
// }
var vadio_item_ul = "";
//滚动区域
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_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>'
$("#img_item_ul").html(img_item_ul);
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++) {
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(vadio_item_ul);
};
......@@ -191,28 +202,6 @@
// map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
// map.setCurrentCity("上海"); // 设置地图显示的城市 此项是必须设置的
// 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") {
//商场
......@@ -310,6 +299,48 @@
var _name = getUrlParam('user_name');
var _name_img = getUrlParam('user_img');
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推广
//经纪人 商铺列表 微门店
......
public/appnew/src/components/openSquareDetails/openSquareDetails.vue
View file @ 951ad470
......@@ -123,7 +123,7 @@
_this.articleTime = _news.create_time;
_this.houseId = _news.house_id;
_this.isVip = _news.is_vip;
_this.isShow = _news.isShow;
_this.isShow = _news.is_show;
_this.internalTitle = _news.internal_title;
_this.isExclusiveType = _news.is_exclusive_type;//字符串转化为数组
_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