File: /www/wwwroot/www.scdc-marine.com/wp-content/themes/heku-cms/TempParts/Main/Sidebar/sidebar.php
<?php
use Heku\HekuClass\Templates\SidebarNavMenu;
/**
* Sidebar 列表
*
*/
?>
<?php if(is_single()||is_archive()||is_tag()){ ?>
<div class="about-sidebar sidebar-bg heku-box wow fadeInUp">
<div class="about-header sidebar-title">
<h2><span class="icon font_family icon-time-2"></span>产品中心</h2>
</div>
<div class="about-container sidebar-box">
<!-- star heku-top-menu -->
<?php $arg = array(
'theme_location' => 'sidebar-product',
'container_id' => '',
'container_class' => 'sidebar-nav-menu',
'menu_id' => '',
'menu_class'=> 'sub-menu',
'echo' => FALSE,
'items_wrap' => '%3$s',
'item_spacing' => 'preserve',
'fallback_cb' => '__return_false'
);
$arg['walker'] = new SidebarNavMenu();
echo wp_nav_menu($arg); ?>
<!-- end heku-top-menu -->
</div>
</div>
<?php } ?>
<?php if(is_single()||is_archive()||is_tag()){ ?>
<div id="bg_sidebar" class="sidebar-bg wow fadeInUp">
<div class="sidebar-title">
<h2>7B2模板教程</h2>
</div>
<div class="sidebar-box">
<ul class="sidebar-list-ul">
<li class="sidebar-li">
<a href="https://www.ourule.com/643.html">
<div class="sidebar-li-box">
<div class="sidebar-li-title">
<h2>7B2 关键词/分类/搜索结果页文章缩略图比例详解</h2>
<time class="b2timeago" >7 个月前</time>
</div>
<div class="sidebar-li-img">
<div class="sidebar-img-box sidebar-img-radius">
<img class=" " src="https://www.ourule.com/wp-content/uploads/thumb/2022/12/fill_w100_h62_g0_mark_postimgs.png" >
</div>
</div>
</div>
</a>
</li>
<li class="sidebar-li">
<a href="https://www.ourule.com/643.html">
<div class="sidebar-li-box">
<div class="sidebar-li-title">
<h2>7B2文章列表瀑布流样式二次优化修改</h2>
<time class="b2timeago" >7 个月前</time>
</div>
<div class="sidebar-li-img">
<div class="sidebar-img-box sidebar-img-radius">
<img class="b2-radius lazy entered loaded" src="https://www.ourule.com/wp-content/uploads/thumb/2022/11/fill_w100_h62_g0_mark_flut.png" data-ll-status="loaded">
</div>
</div>
</div>
</a>
</li>
<li class="sidebar-li">
<a href="https://www.ourule.com/643.html">
<div class="sidebar-li-box">
<div class="sidebar-li-title">
<h2>7B2主题新增文章阅读目录导航（已废弃原主题自带此功能）</h2>
<time class="b2timeago" >7 个月前</time>
</div>
<div class="sidebar-li-img">
<div class="sidebar-img-box sidebar-img-radius">
<img class="b2-radius lazy entered loaded" data-src="https://www.ourule.com/wp-content/uploads/thumb/2022/11/fill_w100_h62_g0_mark_category.png" alt="7B2默认分类页面优化-添加背景图片和ICON" src="https://www.ourule.com/wp-content/uploads/thumb/2022/11/fill_w100_h62_g0_mark_category.png" data-ll-status="loaded">
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<?php } ?>
<?php if(is_single()||is_archive()||is_tag()){ ?>
<div class="single-sidebar">
<div class="about-sidebar wow fadeInUp heku-box">
<h3 class="about-header"><span class="icon font_family icon-time-2"></span>相关推荐</h3>
<div class="about-container">
<li class="news-item wow fadeInUp animated">
<div class="news-img">
<img class="news-img" src="https://www.zclink.com/wp-content/uploads/news_2815_5.jpg" alt="直川科技荣获2022第二届智能感知产品评测大... ">
</div>
<div class="news-comt">
<div class="news-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="news-attribute row no-gutters justify-content-between">
<div class="news-time">
<div class="news-time-ymd">2023-05-16</div>
</div>
<div class="single-eye">
<span class="icon font_family icon-a-13"></span><span><?php if(function_exists('the_views')) { the_views(); } ?></span>
</div>
</div>
</div>
</li>
<li class="news-item wow fadeInUp animated">
<div class="news-img">
<img class="news-img" src="https://www.zclink.com/wp-content/uploads/news_2815_5.jpg" alt="直川科技荣获2022第二届智能感知产品评测大... ">
</div>
<div class="news-comt">
<div class="news-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="news-attribute row no-gutters justify-content-between">
<div class="news-time">
<div class="news-time-ymd">2023-05-16</div>
</div>
<div class="single-eye">
<span class="icon font_family icon-a-13"></span><span><?php if(function_exists('the_views')) { the_views(); } ?></span>
</div>
</div>
</div>
</li>
<li class="news-item wow fadeInUp animated">
<div class="news-img">
<img class="news-img" src="https://www.zclink.com/wp-content/uploads/news_2815_5.jpg" alt="直川科技荣获2022第二届智能感知产品评测大... ">
</div>
<div class="news-comt">
<div class="news-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="news-attribute row no-gutters justify-content-between">
<div class="news-time">
<div class="news-time-ymd">2023-05-16</div>
</div>
<div class="single-eye">
<span class="icon font_family icon-a-13"></span><span><?php if(function_exists('the_views')) { the_views(); } ?></span>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
<?php } ?>
<style>
.sidebar-box{}
.about-sidebar .sidebar-title h2{padding:5px;border-bottom:none}
.about-sidebar .sidebar-box{padding:10px 0px 0px 0px;}
.sidebar-bg{background-image:linear-gradient(45deg,#93a5cf 0%,#e4efe9 100%);border-radius:var(--radius_big);-webkit-box-shadow:var(--box_shadow);box-shadow:var(--box_shadow);margin-bottom:25px;}
#bg_sidebar{background-image:linear-gradient(45deg,#93a5cf 0%,#e4efe9 100%);border-radius:var(--radius_big);-webkit-box-shadow:var(--box_shadow);box-shadow:var(--box_shadow);margin-bottom:25px;}
.sidebar-title{background-image:url(/wp-content/themes/heku-cms/assets/img/43.png);padding:24px 26px 0px 24px;background-position:top right;background-repeat:no-repeat;}
.sidebar-title h2{padding-bottom:15px;border-bottom:1px solid #f2f2f2;font-size:24px;color:#000;}
.sidebar-box{padding:15px 20px 20px 20px;}
.sidebar-li-title h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-bottom:2px;word-break:break-all;font-size:14px;}
.sidebar-li-title time{font-size:12px;color:#bcbcbc;margin-top:5px;}
.sidebar-li-box{display:flex;align-items:center;}
.sidebar-li-img{padding:8px 9px;border-radius:var(--radius_big);}
.sidebar-img-box{overflow:hidden;border-radius:5px;}
.sidebar-img-box:hover img{transform:scale(1.2);transition:filter 375ms .2s,transform .6s;}
li.sidebar-li{list-style:none;}
.sidebar-nav-menu > li .sidebar-cat-img{width: 72px;padding: 0 10px;}
.sidebar-nav-menu > li{list-style: none;line-height:60px;overflow: hidden;}
.sidebar-nav-menu .current-menu-item .sub-menu-0{max-height: 500px;overflow: hidden;}
.sidebar-nav-menu > li .icon:before{content:"\e615";}
.sidebar-nav-menu li.current-menu-item .icon:before{content:"\e617";}
.sidebar-nav-menu > li .icon{float: right;padding-right:12px;}
.sidebar-nav-menu .sub-menu-0 {padding: 0 20px;max-height: 0px;-webkit-transition:all 0.7s ease-out 0s;-moz-transition:all 0.7s ease-out 0s;-ms-transition:all 0.7s ease-out 0s;-o-transition:all 0.7s ease-out 0s;transition:all 0.7s ease-out 0s;}
.sidebar-nav-menu .sub-menu-0 > li{border-bottom:1px solid var(--forecolor);border-bottom-style:dashed;color:var(--forecolor);list-style:none;}
.sidebar-nav-menu li.current-menu-item .sidebar-menu-li,.sidebar-nav-menu > li:hover .sidebar-menu-li{background:var(--forecolor_translucent_3) ;border:1px solid #ceb4b4;border-right:3px solid #e32626;border-left:3px solid #e32626;}
.sidebar-nav-menu li.current-menu-item .sidebar-menu-li a span,.sidebar-nav-menu > li:hover .sidebar-menu-li a span{font-size:20px;color:var(--color_eye);}
.sidebar-nav-menu li .sidebar-menu-li a span{font-size:18px;}
.sidebar-nav-menu li .sidebar-menu-li{padding: 0 6px;}
.sidebar-nav-menu .sub-menu-0 > li:last-child{border-bottom: none;}
/* ----------------------------------------------------
43) .single-sidebar 新闻侧边栏 ，展示模板：Sing-news-temp01 css样式
------------------------------------------------------- */
.single-sidebar{padding:0px 32px 0px 0px;width:320px;}
.single-sidebar .about-header,.single-sidebar .toc-header{font-size:24px;padding:15px 15px 12px 25px;border-bottom:1px solid var(--forecolor);border-bottom-style:dashed;color:var(--forecolor);}
.single-sidebar .about-header .icon,.single-sidebar .toc-header .icon{font-size:24px;padding:0 12px 0 0px;}
/* --- 1) .about-sidebar 相关推荐 新闻列表 css --- */
.about-sidebar{position:sticky;overflow:hidden;margin-bottom:24px;}
.about-container .news-img img{width:100px;height:64px;border-radius:var(--radius_img);display:block;cursor:pointer;}
.about-container .news-item{visibility:visible;animation-name:fadeInUp;padding:8px 0px;font-weight:400;display:-webkit-box;display:-ms-flexbox;display:flex;}
.about-container .news-item:hover,.about-sidebar .news-item:hover a{color:var(--color_eye);}
.about-container .news-comt{-webkit-box-orient:vertical;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:12px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.about-container .news-comt .news-tit a{font-family:PingFangSC-Regular;font-weight:400;font-size:16px;line-height:22px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-orient:vertical;}
.about-container .news-comt .news-attribute{font-size: 14px;opacity: 0.6;padding-right: 8px;}
.about-container .news-comt .news-attribute .single-eye .icon{font-size:14px;padding-right:6px;}
/* --- 1) 小于780尺寸时候使用¸ --- sm --- */
@media only screen and (max-width:768px){
.single-sidebar{padding:0px 32px 0px 0px;width:320px;}
}
/* --- 1) 小于780尺寸时候使用 手机 mobile --- */
@media (max-width:576px){
.single-sidebar{padding:0px 32px 0px 0px;width:320px;}
}
/* --- 2) 大于768px尺寸 min --- */
@media(min-width:768px){
.single-sidebar{padding:0px 0x 0px 0px;width:0px;}
}
/* --- 3) 大于992px尺寸 mid --- */
@media(min-width:992px){
.single-sidebar{padding:0px 32px 0px 0px;width:320px;}
}
/* --- 4) 显示规定 大于1200尺寸时候使用 max --------- */
@media(min-width:1200px){
.single-sidebar{padding:0px 32px 0px 0px;width:320px;}
}
</style>