Files
2024-10-29 14:04:59 +08:00

590 lines
30 KiB
PHTML
Executable File
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{include file="include/head-product" /}
<script type="text/javascript">
var navID = "1";
</script>
</head>
<body>
<!--top-->
{include file="include/top-product" /}
<!--top End-->
<script type="text/javascript" src="__PUBLIC__/webth/scripts/large.js"></script>
<div class="indexbox4 cpmbox">
<div class="swt-Container-1200">
<div class="product_address"><a href="/us/index">Home</a>
<span class="icon-arrow arrow_address"></span>
<?php if($pid==''){?>
<a href="<?php echo url_rewrite('us/product', ['id' => $cid['id']]); ?>"><?php echo $cid['name'];?></a>
<?php }else{?>
<a href="<?php echo url_rewrite('us/product', ['id' => $pid['id']]); ?>"><?php echo $pid['name'];?></a>
<?php }?>
<span class="icon-arrow arrow_address"></span>
<a href="<?php echo url_rewrite('us/productsub', ['id' => $detail['cid']]); ?>"><?php echo $category['name'];?></a>
</div>
<!-- 产品 s -->
<div class="cp outBox">
<div class="cpfl">
<?php
$color = '/uploads/product/'.$color.'.jpg';
$proimages = [];
$images = [];
if ($product_images):
foreach ($product_images as $imgrow) {
$proimages[$imgrow['image_color']][] = $imgrow['image_url'];
}
if (isset($proimages[$color])) {
$images = $proimages[$color];
} else {
$images = $proimages[$product_images[0]['image_color']];
}
?>
<!--preview start-->
<div class="preview">
<div class="smallImg">
<div class="scrollbutton smallImgUp disabled"></div>
<div id="imageMenu">
<ul>
<?php
$firstimage = '';
foreach ($images as $k => $img):
?>
<li<?php if ($k == 0):$firstimage = $images[0]; ?> id="onlickImg"<?php endif; ?>><img src="<?php echo getImage($img); ?>"></li>
<?php endforeach; ?>
</ul>
</div>
<div class="scrollbutton smallImgDown"></div>
</div><!--smallImg end-->
<div id="vertical" class="bigImg">
<img src="<?php echo getImage($firstimage); ?>" id="midimg" />
</div><!--bigImg end-->
</div>
<!--preview end-->
<!-- phone s-->
<div class="swiper-container banners">
<div class="swiper-wrapper">
<?php foreach ($images as $img): ?>
<div class="swiper-slide"><a href="javascript:void(0);"><img src="<?php echo getImage($img); ?>"></a></div>
<?php endforeach; ?>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination bandot"></div>
</div>
<script type="text/javascript">
var swiper = new Swiper('.banners', {
loop: true,
autoplay: true,
pagination: {el: '.bandot', },
});
$(function() {
$(".plbtn").click(function() {
$(".play").show();
var video = document.getElementById("pvideo");
video.play();
});
$(".pcha").click(function() {
var video = document.getElementById("pvideo");
video.pause();
$(".play").hide();
});
});
</script>
<!-- phone e -->
<?php endif; ?>
<!-- 视频播放 s -->
<?php if($detail['videopath']==""){ ?><?php } else{ ?>
<div class="play play1">
<a href="javascript:;" class="pcha"><img src="__PUBLIC__/web/images/images/cha1.png"></a>
<div class="moimg"><video id="pvideo" width="100%" height="auto" controls poster="<?php echo getImage($detail['picture']); ?>">
<source src="<?php echo $detail['videopath']; ?>">
您的浏览器不支持 video 标签。
Your browser does not support HTML5 video.
</video></div>
</div>
<div class="plbtn" ><a href="javascript:;"><img src="__PUBLIC__/web/images/images/play.png"></a></div>
<?php }?>
<!-- 视频播放 e -->
</div>
<div class="cprh">
<div class="cpcon">
<p class="ctit1"><?php echo $detail['name']; ?></p>
<p class="ctit2"><?php echo $detail['shortname']; ?></p>
</div>
<ul class="cpul">
<?php
$desc = str_replace("\r\n", "\n", $detail['description']);
$descarr = explode("\n", $desc);
foreach ($descarr as $l):
?>
<li><i></i><?php echo $l; ?></li>
<?php endforeach; ?>
</ul>
<?php if ($proimages): ?>
<div class="hd">
<ul>
<?php foreach ($proimages as $c => $imgclrs): $b=trim(strrchr($c, '/'),'/');$b=substr($b,0,strpos($b, '.'));?>
<li class="img-responsive" <?php if ($c == $color): ?> class="on"<?php endif; ?>>
<?php if($c==''){ ?>
<?php } else{?>
<a <?php echo 'style="background: url(__PUBLIC__/web/images/' . $c . '.png);" href="' . url_rewrite('us/productdetail', ['id' => $detail['id'], 'color' => $b]) . '"'; ?>><img src="<?php echo $c;?>" alt="" style="width:18px; height: 18px; border-radius: 9px; margin:3px;"></a>
<?php }?>
</li>
<?php endforeach; ?>
</ul>
<?php if($c==''){ ?>
<?php } else{?>
<span>颜色</span>
<?php }?>
</div>
<?php endif; ?>
<div class="buy">
<a href="<?php echo $detail['url_tm']; ?>" target="_blank">购买天猫</a>
<a href="<?php echo $detail['url_jd']; ?>" target="_blank">购买京东</a>
</div>
</div>
<div class="clear"></div>
</div>
<!-- 产品 e -->
</div>
</div>
<div class="warp">
<div class="warpa">
<!-- 锚链接 s
<ul class="w1440 cpa">
<li><a href="#link1">亮点</a></li>
<li><a href="#link2">相关</a></li>
<li><a href="#link3">评论</a></li>
<li><a href="#link4">规格</a></li>
<li><a href="#link5">下载</a></li>
<li><a href="#link6">常见问题</a></li>
<div class="clear"></div>
</ul>
<!-- 锚链接 e -->
</div>
<!-- 亮点 s-->
<div class="warp1 proTfg">
<div class="swt-Container-1200">
<div class="light">
<!--<div class="lgtit" id="link1">亮点</div>
<div class="lgimg"><img src="<?php /*echo getImage($detail['ld_picture']); */?>"></div>
<div class="lgfl"><img src="<?php /*echo getImage($detail['ld_md_picture']); */?>"></div>
<div class="lgrh">
<p class="lgtext"><?php /*echo $detail['ld_md_title']; */?></p>
<p><?php /*echo $detail['ld_md_description']; */?></p>
<?php
/* if ($detail['ld_md_content']) {
$ld_md_contents = unserialize($detail['ld_md_content']);
if ($ld_md_contents) {
*/?>
<ul class="lgul">
<?php /*foreach ($ld_md_contents as $ld_md_content): */?>
<li><i></i><?php /*echo $ld_md_content; */?></li>
<?php /*endforeach; */?>
</ul>
<?php
/* }
}
*/?>
</div>
<div class="clear"></div>
<ul class="cplist">
<li>
<img src="<?php /*echo getImage($detail['ld_left_picture']); */?>">
<p class="lg1"><?php /*echo $detail['ld_left_title']; */?></p>
<p class="lg2"><?php /*echo $detail['ld_left_description']; */?></p>
</li>
<li>
<img src="<?php /*echo getImage($detail['ld_right_picture']); */?>">
<p class="lg1"><?php /*echo $detail['ld_right_title']; */?></p>
<p class="lg2"><?php /*echo $detail['ld_right_description']; */?></p>
</li>
<div class="clear"></div>
</ul>-->
<?php
if ($detail['product_desc']) {
$detail_descs = unserialize($detail['product_desc']);
if ($detail_descs) {
?>
<ul class="msul">
<div class="mstit">产品描述</div>
<?php foreach ($detail_descs as $detail_desc): ?>
<li>
<p class="ms1"><?php echo $detail_desc['desc_title']; ?></p>
<p class="ms2"><?php echo $detail_desc['desc_desc']; ?></p>
</li>
<?php endforeach; ?>
</ul>
<?php
}
}
?>
</div>
<!-- 亮点 e-->
</div>
</div>
<!-- 亮点 e-->
<!-- 关联产品 s <?php //if ($product_relateds)print_r($product_relateds); ?>-->
<div class="warp2 proTfg">
<div class="swt-Container-1200">
<div class="gltit" id="link2">关联产品</div>
<?php if ($product_relateds): ?>
<div class="cpBox">
<div class="owl-carousel">
<?php foreach ($product_relateds as $product): ?>
<div class="item wow">
<?php $img =getProductReated($product['id']);?>
<a href="<?php echo url_rewrite('us/productdetail', ['id' => $product['id']]); ?>">
<div class="glimg img-responsive"><img src="<?php if (isset($img[0]['image_url'])) {echo $img[0]['image_url'];} ; ?>"></div>
<div class="gltext">
<p class="gl1"><?php echo $product['name']; ?></p>
<!-- <p class="gl2">--><?php //echo $product['shortname']; ?><!--</p>-->
</div>
<div class="clear"></div>
</a>
</div>
<?php endforeach; ?>
</div>
<script>
var owl = $(".cpBox .owl-carousel");
owl.owlCarousel({
autoplay: true,
navigationText: ["", ""],
responsive: {
0: {
items: 1,
margin: 0
},
420: {
items: 2,
margin: 0,
smartSpeed: 80,
dots: false
},
640: {
items: 3,
margin: 0,
smartSpeed: 80,
dots: false
},
998: {
items: 4,
margin: 0,
smartSpeed: 80,
dots: false
},
},
})
</script>
</div>
<?php endif; ?>
</div>
</div>
<!-- 关联产品 e -->
<!-- 评论 s
<div class="nybox proTfg">
<div class="w1440">
<div class="pltitle">
<p class="pltit" id="link3">评论</p>
<p class="plimg">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x2.png">
</p>
<p class="pltit1">128条评论</p>
</div>
<div class="plcon">
<p class="py1">标题ORICO L12000 Scharge聚合物移动电源</p>
<p class="plimg">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x2.png">
<span>4</span>
</p>
<p class="py2">2018-08-28</p>
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
</div>
<div class="plcon">
<p class="py1">标题ORICO L12000 Scharge聚合物移动电源</p>
<p class="plimg">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x2.png">
<span>4</span>
</p>
<p class="py2">2018-08-28</p>
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
</div>
<div class="plcon">
<p class="py1">标题ORICO L12000 Scharge聚合物移动电源</p>
<p class="plimg">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x2.png">
<span>4</span>
</p>
<p class="py2">2018-08-28</p>
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
</div>
<div class="plcon">
<p class="py1">标题ORICO L12000 Scharge聚合物移动电源</p>
<p class="plimg">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x2.png">
<span>4</span>
</p>
<p class="py2">2018-08-28</p>
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
</div>
<div class="plcon">
<p class="py1">标题ORICO L12000 Scharge聚合物移动电源</p>
<p class="plimg">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x2.png">
<span>4</span>
</p>
<p class="py2">2018-08-28</p>
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
</div>
<div class="plcon">
<p class="py1">标题ORICO L12000 Scharge聚合物移动电源</p>
<p class="plimg">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x1.png">
<img src="__PUBLIC__/web/images/x2.png">
<span>4</span>
</p>
<p class="py2">2018-08-28</p>
<p class="py3">评价内容12000mAh移动电源 LCD屏高精度显示电量 A+级聚合物安全电芯 智能快充</p>
</div>
<!-- 分页 s
<div class="Pages" style="margin-top:20px;">
<span class="p_page">
<a href="javascript:void(0);" class="a_prev"></a>
<em class="num">
<a href="#" class="a_cur">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<span>...</span>
<a href="#">126</a>
</em>
<a href="javascript:void(0);" class="a_next"></a>
</span>
</div>
<!-- 分页 e
</div>
</div>
<!-- 评论 e -->
<!-- 规格参数 s -->
<div class="nybox proTfg">
<div class="swt-Container-1200">
<?php
if ($detail['product_view']) {
$detail_views = unserialize($detail['product_view']);
if ($detail_views) {
?>
<ul class="msul">
<p class="gltit" id="link4"> 规格参数</p>
<?php foreach ($detail_views as $detail_view): ?>
<li>
<div class="ms3"><?php echo $detail_view['desc_title']; ?></div>
<div class="ms4"><?php echo $detail_view['desc_desc']; ?></div>
</li>
<?php endforeach; ?>
</ul>
<?php
}
}
?>
</div>
</div>
<!-- 规格参数 e -->
<!-- 相关下载 s -->
<?php if(!$product_dls){?>
<?php }else{ ?>
<div class="nybox proTfg">
<div class="swt-Container-1200">
<div class="sptit" id="link5">相关下载</div>
<?php
if ($product_dls):
$selectTypeArr = config("product_dltype");
$prodls = [];
foreach ($product_dls as $dlrow) {
$prodls[$dlrow['dl_type']][] = $dlrow;
}
?>
<?php foreach ($prodls as $type => $dlclrs): ?>
<div class="xz">
<p class="xztit"><?php echo isset($selectTypeArr[$type]) ? $selectTypeArr[$type] : ''; ?></p>
<?php foreach ($dlclrs as $dl): ?>
<p class="xz1"><a href="<?php echo url('us/download/prodownload', ['id' => $dl['id']]); ?>"><i></i><?php echo $dl['dl_name']; ?></a></p>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<?php }?>
<!-- 相关下载 e -->
<?php if ($product_questions): ?>
<!-- 常见问题 s -->
<div class="nybox proTfg">
<div class="swt-Container-1200">
<div class="sptit" id="link6">常见问题</div>
<?php foreach ($product_questions as $k => $question): ?>
<div class="ans" <?php if (!$k): ?>style="display:block;"<?php endif; ?>>
<div class="antit">
<i></i><?php echo $question['name']; ?>
</div>
<div class="anbox">
<p><?php echo $question['description']; ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- 常见问题 e -->
<?php endif; ?>
<script type="text/javascript">
$(function() {
var $category = $(".ans .anbox");
$category.hide();
$(".ans .antit").click(function() {
if ($(this).next(".anbox").is(":visible")) {
$(this).removeClass('on').next().slideUp(800);
$(this).parent('.ans').removeClass('on');
$(this).children("i").removeClass("ons")
} else {
$category.hide();
$(".ans .antit").removeClass('on');
$(this).children("i").addClass("ons")
$(this).addClass('on').next().slideDown(800);
$(this).parent('.ans').addClass('on');
}
});
});
$(function() {
$('a[href*=#],area[href*=#]').click(function() {
console.log(this.pathname)
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top - 50;
$('html,body').animate({
scrollTop: targetOffset
}, 800);
return false; //页面锚点跳转动画 后面的800是锚点跳转的时间 800ms
}
}
});
})
$(document).ready(function() {
//获取div-one距离顶部的距离
var navtop = $(".warpa").offset().top;
$(document).scroll(function() {
//获取滚动条滚动的高度
var scroltop = $(document).scrollTop();
if (scroltop > navtop) {
$(".warpa").css({
"position": "fixed",
"top": "0px",
"left": "0px",
"right": "0px",
"z-index": "999"
})
} else {
$(".warpa").css({
"position": "",
"top": "",
"left": "",
"right": "",
"z-index": ""
})
}
})
})
$("input").click(function() {
$(this).siblings("div").children("span").addClass("active");
$(this).parents("div").siblings("div").find("span").removeClass("active");
});
$(function() {
$(window).scroll(function() {
var arr = []
$.each($(".proTfg"), function(k, v) {
arr[k] = $(this).offset().top + $(this).height();
})
$.each(arr, function(k, v) {
if (($(window).scrollTop() + $(".cpa li").eq(k - 1).height() + 10) < v) {
if (!$(".cpa li").eq(k).hasClass("current")) {
$(".cpa li").eq(k).attr("class", "current").siblings().removeClass();
}
return false;
}
})
})
})
</script>
</div>
<div class="enlarge-img" style="display: none;">
<div class="scrollbutton_01 smallImgUp disabled"></div>
<img src="<?php echo getImage($firstimage); ?>">
<div class="scrollbutton_01 smallImgDown"></div>
<div class="close"><span class="icon-close"></div>
</div>
<script>
/*图片放大效果*/
$(".bigImg").click(function(){
$(".enlarge-img").show();
});
$(".enlarge-img .close").click(function(){
$(".enlarge-img").hide();
});
</script>
<!-- bottom s -->
{include file="include/bottom" /}
<!-- bottom e -->
</body>
</html>