File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/newslist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{pboot:pagetitle}</title>
<meta name="keywords" content="{pboot:pagekeywords}">
<meta name="description" content="{pboot:pagedescription}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="{pboot:sitetplpath}/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/home.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/layui.css">
<style>
.dis_flex{
display:flex;
justify-content: flex-start;
}
.editionCenter {
width:1100px;
margin:0 auto;
border-radius: 4px;
}
.eps{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.mor_eps{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.mor_eps a{
font-weight: 800;
font-size: 14px;
line-height: 18px;
height: 36px;
display: inline-block;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.ym_header_right_nav .ym_nav_nav_right li:nth-child(2){
/* color:#fff !important; */
}
.ym_nav_nav_right_button2{
/*background: #ff6918;*/
color: #3822BA !important;
}
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #593be5 !important;
}
.head{
height:210px;
background-image:url('{pboot:sitetplpath}/static/picture/bg.png');
background-size: 100% 100%!important;
background-color: #593be5;
}
.banner{
height:auto;
}
.banner .title{
line-height:60px;
font-size: 24px;
color: #fff;
font-weight: 700;
min-height:70px;
flex-shrink: 0;
text-align: center;
}
.tab{
height:50px;
background:#fff;
margin:20px auto;
justify-content: space-between;
}
.tab div:first-child::-webkit-scrollbar{
width:0;
height:0;
}
.tab .hotIpt{
width:100%;
height:100%;
border-radius: 5px;
padding-left:20px;
padding-right:40px;
box-sizing: border-box;
background:#F0F2F5;
border:none;
border-radius: 15px;
}
.tab .toLeft{
width:20px;
height:50px;
position:absolute;
top:0;
left:0;
line-height: 50px;
text-align: center;
cursor: pointer;
background:#fff;
display:none;
}
.tab .toRight{
width:20px;
height:50px;
position:absolute;
right:-30px;
top:0;
line-height: 50px;
text-align: center;
cursor: pointer;
display:none;
}
.searchIcon{
height:30px;
width: 30px;
position:absolute;
right:20px;
top:10px;
line-height:30px;
text-align: center;
cursor: pointer;
}
.hotWords_list{
position:absolute;
width:100%;
padding:18px;
box-sizing: border-box;
border-radius: 10px;
background:#fff;
box-shadow: 0 3px 10px #ccc;
top:50px;
display: none;
}
.hotWords_list p{
font-size:14px;
font-weight: 600;
}
.hotWords_list ul{
width:100%;
}
.hotWords_list li{
font-size:12px;
padding:7px;
cursor: pointer;
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
.hotWords_list li:hover{
color:#FF6919;
background:rgba(200,200,200,0.1);
}
.hotWords_list li:hover strong{
color: #ff6919 !important;;
}
.tab_item{
font-size: 14px;
line-height: 50px;
color:#242841;
text-align: center;
margin:0 25px;
font-weight: 400;
font-family: PingFang SC , Microsoft YaHei, Microsoft YaHei-Regular;
cursor: pointer;
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
height:50px;
display: inline-block;
}
.tab_item:hover a{
color:#FF6919;
}
.tab_item.zhy_active{
border-bottom: 2px solid #FF6919;
height:48px;
}
.tab_item.zhy_active :any-link{
color:#FF6919;
font-weight: 700;
}
.section{
padding:20px;
box-sizing: border-box;
justify-content: space-between;
background:#fff;
margin-bottom: 44px;
}
.section .news_l{
width:710px;
position: relative;
}
.section .news_r{
width:310px;
}
.news_l .news_item{
justify-content: space-between;
width:100%;
height:150px;
border-bottom: 1px solid #F6F6F6;
padding-bottom: 20px;
box-sizing: border-box;
margin-top:20px;
}
.news_l .news_item:first-child{
margin-top:0;
}
.news_l>.clearfix{
/* position: absolute;
bottom:0;
right:0; */
width: 100%;
}
.news_l>.clearfix .page{
float:right;
margin:0;
}
.news_item .img{
width:200px;
height:130px;
}
.news_item .img img{
width:100%;
height:100%;
border-radius: 4px;
}
.news_item .content{
width:490px;
height:130px;
}
.news_item .title{
font-size: 20px;
font-family:PingFang SC , Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: #242841;
line-height: 24px;
cursor: pointer;
}
.news_item .title:hover a{
color:#4674f1;
}
.news_item .paragraph{
margin-top:10px;
font-size: 14px;
font-family: PingFang SC , Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #7a7c80;
line-height: 20px;
margin-bottom: 35px;
min-height: 40px;
max-height: 40px;
}
.news_tag{
display:inline-block;
height: 20px;
padding: 4px 12px;
font-size: 12px;
border-radius: 10px;
background:#f2f7ff;
font-family: PingFang SC , Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 200;
text-align: left;
color: #a1a8b3;
line-height: 12px;
box-sizing: border-box;
cursor: pointer;
}
.news_tag strong{
font-weight: 400!important;
}
.news_tag:hover{
background-color: #1a79ff;
color:#fff;
}
.news_item .news_time{
line-height:16px;
text-align: center;
float: right;
color:#9FA0A8;
}
.news_item .news_time strong{
font-weight: 400!important;
}
.recommend_title{
width:100%;
height:40px;
background:#F6F6F6;
text-align: left;
}
.recommend_title p{
display: inline-block;
font-weight: 400;
line-height:40px;
font-size:14px;
color:#242841;
}
.recommend_title img{
margin:0 10px;
}
.article{
text-align: center;
}
.article_item{
justify-content: space-between;
width:100%;
height:104px;
border-bottom: 1px solid #F6F6F6;
padding: 20px 0;
box-sizing: border-box;
}
.article_item .img{
width:96px;
height:63px;
}
.article_item .img img{
width:100%;
height:100%;
border-radius: 4px;
}
.article_item .content{
width:200px;
height:63px;
}
.article_item .title{
font-size: 14px;
font-family:PingFang SC , Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: #242841;
line-height: 18px;
cursor: pointer;
min-height: 37px;
}
.article_item .article_time{
line-height:40px;
text-align: center;
float: right;
color:#9FA0A8;
}
.article_item .seeNum {
width: 100px;
line-height: 40px;
text-align: left;
font-size: 14px;
float: left;
color: #9FA0A8;
}
.article .more{
font-size:12px;
font-family: PingFang SC , Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #7a7c80;
line-height: 12px;
padding:11px 21px;
margin:0 auto;
margin-top:3px;
margin-bottom: 30px;
border:none;
border-radius: 17px;
box-sizing: border-box;
cursor: pointer;
}
.article ul li:last-child{
border:none;
}
.tags{
flex-wrap: wrap;
margin-top: 15px;
}
.tags>a{
margin:5px;
}
h4:hover a{
color: #4674f1 !important;
}
.result{
border-bottom: 1px solid #F6F6F6;
line-height: 40px;
margin-bottom: 20px;
color:#7a7c80;
}
.noList{
text-align: center;
padding-bottom:40px;
}
.noList img{
margin:40px 0 20px;
}
.noList p{
color:#242841;
font-size:12px;
}
.delDefaultAStyleAll:hover{
opacity: 1;
color: #ffffff;
}
</style>
</head>
<body>
<div class="main">
<div class="head">
{include file=comm/head.html}
<div class="head-in">
<div class="banner">
<p class="title" style="margin-top: 30px;">三匠互联商学院</p>
</div>
</div>
</div>
<div class="tab editionCenter dis_flex">
<div style="position:relative;">
<div class="toLeft">
<img src="{pboot:sitetplpath}/static/picture/left.svg" alt="">
</div>
{include file=comm/sortnav.html}
<div class="toRight">
<img src="{pboot:sitetplpath}/static/picture/right.svg" alt="">
</div>
</div>
</div>
<section class="section editionCenter dis_flex">
<div class="news_l">
<ul style="width:100%;min-height:600px;">
{pboot:list num=10 page=1 order='date desc,id desc'}
<li class="news_item dis_flex">
<div class="img">
<img src="[list:ico]" alt="[list:title]">
</div>
<div class="content">
<h4 class="title eps"><a target="_blank" href="[list:link]" title="[list:title lencn=30]">[list:title]</a></h4>
<p class="paragraph mor_eps">[list:description function='cn_substr(Html2text("@me")."...",100)'/]</p>
<div>
<p class="news_time"><strong>[list:date style=Y-m-d]</strong></p>
</div>
</div>
</li>
{/pboot:list}
</ul>
<div class="pagination">{include file=comm/page.html}</div>
</div>
<div class="news_r">
<div class="article">
<div class="recommend_title">
<img src="{pboot:sitetplpath}/static/picture/article.svg" alt="">
<p>置顶热文</p>
</div>
<ul style="width:100%;">
{pboot:list scode=2 num=5 istop=1}
<li>
<div class="article_item dis_flex">
<div class="content" style="width: 100%" >
<h4 class="title mor_eps" id="2951"><a target="_blank" href="[list:link]" title="[list:title]">[list:title]</a></h4>
<div style="overflow: hidden">
<p class="seeNum">
<img style="height: 12px;transform: translateY(-1px);" src="{pboot:sitetplpath}/static/picture/see.svg" alt="">
<span style="color:#9FA0A8;font-size: 14px;">[list:visits]</span>
</p>
<p class="article_time">[list:date]</p>
</div>
</div>
</div>
</li>
{/pboot:list}
</ul>
</div>
<div class="article">
<div class="recommend_title">
<img src="{pboot:sitetplpath}/static/picture/article.svg" alt="">
<p>推荐阅读</p>
</div>
<ul style="width:100%;">
{pboot:list scode=2 num=5 isrecommend=1}
<li>
<div class="article_item dis_flex">
<div class="content" style="width: 100%" >
<h4 class="title mor_eps" id="2951"><a target="_blank" href="[list:link]" title="[list:title]">[list:title]</a></h4>
<div style="overflow: hidden">
<p class="seeNum">
<img style="height: 12px;transform: translateY(-1px);" src="{pboot:sitetplpath}/static/picture/see.svg" alt="">
<span style="color:#9FA0A8;font-size: 14px;">[list:visits]</span>
</p>
<p class="article_time">[list:date]</p>
</div>
</div>
</div>
</li>
{/pboot:list}
</ul>
</div>
</div>
</section>
{include file=comm/foot.html}
</div>
<script src="{pboot:sitetplpath}/static/js/keep_foot.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.hotIpt').on('focus',function() {
$('.hotWords_list').show()
})
$(document).on('mousedown',function(e){
if (e.target.localName != 'strong' && e.target.localName != 'li') {
$('.hotWords_list').hide()
}
});
var _scrollWidth,_w,_left
getWidth()
function getWidth() {
$('.scroll').each(function(){
_scrollWidth = this.scrollWidth
_w = this.offsetWidth
_left = this.scrollLeft
})
if (_scrollWidth > _w) {
$('.toLeft').show()
$('.toRight').show()
} else {
$('.toLeft').hide()
$('.toRight').hide()
}
}
$(function () {
$('.toLeft').on('click',function(){
getWidth()
$('.scroll').animate({scrollLeft:_left - _w})
// check()
})
$('.toRight').on('click',function(){
getWidth()
$('.scroll').animate({scrollLeft:_left + _w})
// check()
})
});
</script>
</body>
</html>