File: /www/wwwroot/www.scdc-marine.com/wp-content/themes/heku-cms/TempParts/Single/single-4.php
<?php
use Heku\HekuClass\Templates\Product;
/**
* 文章内容页
*/
global $is_from_show;
$is_from_show = true;
wp_enqueue_script( 'heku-viewer', HEKU_THEME_URI . '/Assets/js/viewer.min.js' );
$custom_inline_script = '// 内容图片 222点击放大， 元素框:id:single_info_content 高清图源:src(本身放大)
window.addEventListener("DOMContentLoaded", function () {
var single_info_galley = document.getElementById("single_info_content");
var single_info_viewer = new Viewer(single_info_galley, {
url: "src",
toolbar:{
oneToOne: false,
play: false,
prev: function() {
single_info_viewer.prev(true);
},
next: function() {
single_info_viewer.next(true);
},
},
title:false,
});
});';
wp_add_inline_script( 'heku-viewer', $custom_inline_script, 'after' );
$custom_tocbot_inline_script = '// 网站导航条自动悬浮设置 #heku_top_menu2
var id = 1;
$(".entry-content").children("h1,h2,h3,h4,h5").each(function () {
// .content 为正文容器的 class，根据自己的情况修改
var hyphenated = "mashiro-" + id;
$(this).attr("id", hyphenated);
id++;
});
tocbot.init({
// Where to render the table of contents.
tocSelector: ".toc-container",
// Where to grab the headings to build the table of contents.
contentSelector: ".entry-content",
// Which headings to grab inside of the contentSelector element.
headingSelector: "h2,h3,h4",
collapseDepth: 3,
headingsOffset: 100,
collapsibleClass: "is-collapsible",
isCollapsedClass: "is-collapsed",
scrollSmoothOffset: -100,
scrollSmoothDuration: 250,
// scrollEndCallback: function (e) {
// window.scrollTo(window.scrollX, window.scrollY - 180);
// },
orderedList: true,
});';
if(strpos(get_the_content(), 'hekutitle0') !== false){
wp_enqueue_script( 'heku-tocbot', HEKU_THEME_URI . '/Assets/js/tocbot.min.js' );
wp_add_inline_script( 'heku-tocbot', $custom_tocbot_inline_script, 'after' );
}
add_action('heku_footer_inline_js','footer_inline_js_html', 10);
function footer_inline_js_html(){
wp_print_scripts('heku-viewer');
wp_print_scripts('heku-tocbot');
}
$product_model = get_post_meta( get_the_ID(), 'product_model', true );
$banner_group = get_post_meta( get_the_ID(), 'product_imgs', true );
?>
<!-- / star heku_top -->
<?php get_template_part( "TempParts/Main/TopMenu/top_menu"); ?>
<?php get_template_part( "TempParts/Main/TopBanner/top_banner"); ?>
<!-- / end heku_top -->
<!-- / star single_bar_line -->
<?php get_template_part("TempParts/Main/Breadcrumb/breadcrumb"); ?>
<!-- / end single_bar_line -->
<div id="product_img_line">
<div class="container">
<div class="row no-gutters clearfix">
<div class="single-sidebar ">
<!-- / star single_bar_line -->
<?php //get_template_part("TempParts/Main/Sidebar/sidebar"); ?>
<!-- / end single_bar_line -->
<?php if(strpos(get_the_content(), 'hekutitle0') !== false){ ?>
<div class="toc-sidebar heku-box wow fadeInUp">
<h3 class="toc-header"><span class="icon font_family icon-time-2"></span>文章目录</h3>
<div class="toc-container"></div>
</div>
<?php } ?>
</div>
<div class="single-main col clearfix">
<div class="single-top heku-box clearfix">
<div class="product-img-left wow slideInUp">
<!-- star heku-top-img -->
<div id="Carousel_Product_Img" class="carousel slide carousel-slider" data-ride="carousel" >
<div id="viewer" class="carousel-inner product-img-inner heku-img-box heku-img-radius">
<!-- / start product-img-inner call --><?php
if(!empty($banner_group)){
$num = 0;
foreach ($banner_group as $key => $value) {
if(isset($value)){
$sss = get_post_meta($key,"_wp_attachment_image_alt" ); ?>
<div class="carousel-item product-img-bg <?php echo (( $num == '0')? 'active' : '');?>" data-interval="4000"><?php
if($sss){ ?>
<div class="product-img-video" >
<video autoplay="autoplay" loop="loop" muted="true" type="video/mp4" poster="'. $value .'" >
<source src="<?php echo get_post_meta($key,"_wp_attachment_image_alt" )[0];?>">
</video>
</div><?php
}else{ ?>
<img class=" " data-original="<?php echo $value;?>" src="<?php echo $value;?>" alt="" ><?php
} ?>
</div><?php
$num ++;
}
}
} ?>
<!-- / end product-img-inner call -->
</div>
<div class="carousel-control-prev">
<a href="#Carousel_Product_Img" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
</div>
<ol class="carousel-indicators product-img-indicators justify-content-start">
<!-- / start product-img-indicators call --><?php
if(!empty($banner_group)){
$num = 0;
foreach ($banner_group as $key => $value) {
if(isset($value)){ ?>
<li data-target="#Carousel_Product_Img" data-slide-to="<?php echo $num;?>" class="col <?php echo (( $num == '0')? 'active' : '');?>" style="background:url(<?php echo $value;?>) no-repeat center;background-size: cover;"></li><?php
}
$num ++;
}
} ?>
<!-- / end product-img-indicators call -->
</ol>
<div class="carousel-control-next">
<a href="#Carousel_Product_Img" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!-- end heku-top-img -->
</div>
<div class="product-summary-right wow slideInUp">
<!-- star heku-top-summary -->
<div id="Div_Product_Summary" class="product-summary">
<div class="product-summary-title"><span><?php echo get_the_title();?></span></div>
<div class="product-summary-model"><?php echo $product_model;?></div>
<div class="product-summary-detail">
<ul>
<li>体积小、111111重量轻、精度高；</li>
<li>全部采用工业器件，性能稳定可靠；</li>
<li>RS485 接口，兼容 modbus RTU 协议。</li>
<li>符合 CE 认证 EN61326。</li>
</ul>
</div>
<div class="product-summary-btn">
<a class="heku-btn heku-btn-white" href="#Heku_Form_Model" data-toggle="modal" data-target="#Heku_Form_Model">询价</a><a class="heku-btn heku-btn-white" href="#Heku_Form_Model" class="btn btn-primary2" data-toggle="modal" data-target="#Heku_Form_Model">样品申请</a>
</div>
</div>
<!-- end heku-top-summary -->
</div>
</div>
<div class="single-main mt-4 heku-box clearfix">
<div class="single-info entry-content no-gutters wow fadeInUp">
<?php the_content(); ?>
<?php if (is_single()){
$tags = wp_get_post_tags(get_the_id());
$i = 0;
foreach ($tags as $tag ) {
$posts = get_posts( ['fields' => 'ids','posts_per_page' => -1,'post_type' => 'post','tax_query' => [['taxonomy' => 'post_tag','field'=> 'id','terms'=> $tag->term_taxonomy_id,],],] );
$thumb_url = "/tag/" . $tag->slug;
if( isset( $posts[0] ) &&( count($posts) == 1 ) ){
$thumb_url = get_permalink($posts[0]);
}
if( $i++ < 5 ){ ?>
<ul class="single-meta-cat">
<li><span class="icon font_family icon-a-12"></span><a target="__blank" href="<?php echo $thumb_url; ?>" class="post-list-cat-item b2-radius" ><?php echo $tag->name; ?></a></li>
</ul>
<?php }
}
} ?>
</div>
</div>
<div class="post-pre-next row no-gutters justify-content-between ">
<div class="post-pre heku-box wow fadeInUp">
<div class="post-pre-next-info">
<div class="next-jt">
<span class="icon font_family icon-left"></span>
</div>
<div class="post-pre-next-tit">
<a href="/news/%e7%9b%b4%e5%b7%9d%e7%a7%91%e6%8a%80%e8%8d%a3%e8%8e%b72022%e7%ac%ac%e4%ba%8c%e5%b1%8a%e6%99%ba%e8%83%bd%e6%84%9f%e7%9f%a5%e4%ba%a7%e5%93%81%e8%af%84%e6%b5%8b%e5%a4%a7%e8%b5%9b%e5%80%be">
<span>直川科技荣获2022第二届智能感知产品评测大赛“倾角传感器品质奖”</span>
</a>
</div>
</div>
</div>
<div class="post-next heku-box wow fadeInUp">
<div class="post-pre-next-info">
<div class="post-pre-next-tit">
<a href="/news/%e7%9b%b4%e5%b7%9d%e7%a7%91%e6%8a%80%e8%8d%a3%e8%8e%b72022%e7%ac%ac%e4%ba%8c%e5%b1%8a%e6%99%ba%e8%83%bd%e6%84%9f%e7%9f%a5%e4%ba%a7%e5%93%81%e8%af%84%e6%b5%8b%e5%a4%a7%e8%b5%9b%e5%80%be">
<span>直川科技荣获2022第二届智能感知产品评测大赛“倾角传感器品质奖”</span>
</a>
</div>
<div class="next-jt">
<span class="icon font_family icon-right"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* ----------------------------------------------------
16) #Carousel_Product_Img 10-20 公共样式 顶部导航
------------------------------------------------------- */
.product-img-left{float:left;padding: 15px 15px 0px 15px;}
#Carousel_Product_Img .product-img-inner img{width:360px;height:360px;}
#Carousel_Product_Img .product-img-indicators{float:left;position:relative;margin: 8px 0px;padding: 0 20px;}
#Carousel_Product_Img .carousel-indicators li:first-child{margin-top:0px;}
#Carousel_Product_Img .carousel-indicators li:last-child{margin-bottom:0px;}
#Carousel_Product_Img .carousel-control-next,#Carousel_Product_Img .carousel-control-prev{width:360px;}
#Carousel_Product_Img .product-img-indicators li{display:inline-block;margin:0px 3px;width:85px;height:85px;padding:0px;cursor:pointer;border:1px solid #ddd}
#Carousel_Product_Img .product-img-indicators li.active{border:2px solid #007aff;box-shadow:0 0 4px rgb(0 122 255/50%);}
#Carousel_Product_Img .product-img-video{visibility:visible;position:absolute;width:100%;height:100%;display:block;pointer-events:none;-webkit-transition:display .3s;transition:display .3s;}
#Carousel_Product_Img .product-img-video video{width:100%;height:100%;}
#Carousel_Product_Img .carousel-item{width:100%;height:100%;}
#Carousel_Product_Img .carousel-control-next,#Carousel_Product_Img .carousel-control-prev{top: inherit;padding:25px 8px;bottom:-82px;z-index:99;width:10px;background:#a69999;border-radius:5px;}
.product-summary-right{float:right;padding: 15px;width:525px;}
.product-summary-title{height:42px;overflow:hidden;line-height:42px;}
.product-summary-title span{display:inline-block;font-size:25px;letter-spacing:2px;font-weight:bold;}
.product-summary-model{font-size:24px;line-height:48px;color:#235bb8;}
.product-summary-detail{height:266px;overflow:hidden;padding:20px 0;}
.product-summary-detail li{padding:10px 0;border-bottom:1px dashed #efefef;align-items:center;list-style:inside;}
.product-summary-btn a{width:150px;margin-right:30px;text-align:center;letter-spacing:5px;}
/* --- 1) 小于780尺寸时候使用¸ --- sm --- */
@media only screen and (max-width:768px){
#Carousel_Product_Img .product-img-indicators li{width:85px;height:85px;}
#Carousel_Product_Img .product-img-indicators{width:260px;}
#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:260px;height:260px;}
.product-summary-right{width:100%;padding:18px;}
.product-summary-detail{height:initial;padding:15px 0 20px 0;}
.product-summary-title span{font-size:25px;}
.product-summary-model{font-size:24px;line-height:48px;}
.product-summary-detail li{padding:10px 0;}
.product-summary-btn a{width:150px;margin-right:30px;letter-spacing:5px;line-height:40px;}
}
/* --- 1) 小于780尺寸时候使用 手机 mobile --- */
@media (max-width:576px){
#Carousel_Product_Img .product-img-indicators li{width:55px;height:55px;}
#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:260px;height:260px;}
.product-summary-right{width:100%;}
.product-summary-detail{height:initial;padding:6px 0 10px 0;}
.product-summary-title span{font-size:20px;}
.product-summary-model{font-size:18px;line-height:32px;}
.product-summary-detail li{padding:4px 0;}
.product-summary-btn a{width:120px;margin-right:18px;letter-spacing:2px;line-height:36px;}
#Carousel_Product_Img .carousel-control-prev{left:90px;}
}
/* --- 2) 大于768px尺寸 min --- */
@media(min-width:768px){
#Carousel_Product_Img .product-img-indicators li{width:60px;height:60px;}
#Carousel_Product_Img .product-img-indicators{width:320px;}
#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img,#Carousel_Product_Img .heku-video{width:320px;height:320px;}
.product-summary-right{width:300px;}
.product-summary-detail{height:180px;padding:5px 0;}
.product-summary-title span{font-size:20px;}
.product-summary-model{font-size:18px;line-height:32px;}
.product-summary-detail li{padding:4px 0;font-size:14px;}
.product-summary-btn a{width:120px;margin-right:14px;letter-spacing:2px;line-height:36px;}
}
/* --- 3) 大于992px尺寸 mid --- */
@media(min-width:992px){
#Carousel_Product_Img .product-img-indicators li{width:60px;height:60px;}
#Carousel_Product_Img .product-img-indicators{width:280px;}
#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:280px;height:280px;}
.product-summary-right{width:290px;}
.product-summary-detail{height:226px;padding:10px 0;}
.product-summary-title span{font-size:25px;}
.product-summary-model{font-size:18px;line-height:36px;}
.product-summary-detail li{padding:8px 0;font-size:16px;}
.product-summary-btn a{width:120px;margin-right:10px;letter-spacing:5px;line-height:40px;padding: 1px 10px;}
}
/* --- 4) 显示规定 大于1200尺寸时候使用 max --------- */
@media(min-width:1200px){
#Carousel_Product_Img .product-img-indicators li{width:70px;height:70px;}
#Carousel_Product_Img .product-img-indicators{width:360px;}
#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:360px;height:360px;}
.product-summary-right{width:400px;}
.product-summary-detail{height:284px;padding:15px 0;font-size:18px;}
.product-summary-btn a{width:150px;margin-right:30px;letter-spacing:5px;line-height:40px;padding: 1px 20px;}
}
/* ----------------------------------------------------
16) #Carousel_Product_Img 10-20 公共样式 顶部导航
------------------------------------------------------- */
</style>