File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/news.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{pboot:pagetitle}</title>
<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:#ffffff!important;*/
}
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #673afd !important;
}
.head{
height:210px;
background-image:url('{pboot:sitetplpath}/static/images/banner.png');
background-size: 100% 100%!important;
}
.banner{
height:auto;
}
.head .title{
line-height:60px;
font-size: 24px;
color: #fff;
font-weight: 700;
min-height:70px;
flex-shrink: 0;
text-align: center;
margin-top:20px;
}
.tab{
height:50px;
line-height:50px;
}
.tab a{
color:#0B1732;
font-weight: 400;
}
.tabs{
height:50px;
line-height:50px;
border-bottom:1px solid #F6F6F6;
}
.tab_item{
font-size: 14px;
line-height: 50px;
color:#242841;
text-align: center;
margin:0 25px;
display: inline-block;
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;
}
.tab_item.active{
color:#FF6919;
font-weight: 700;
}
.tab_line{
width:0;
height:2px;
background:#FF6919;
transform: translateY(-2px) translateX(25px);
transition: all 0.5s;
}
.section{
padding:20px;
box-sizing: border-box;
justify-content: space-between;
background:#fff;
margin-bottom: 44px;
}
.section .news_l{
width:710px;
}
.section .news_r{
width:310px;
}
.tags{
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;
}
.tags strong{
font-weight: 400!important;
}
.tags:hover{
background-color: #1a79ff;
color:#fff;
}
.news_item .news_time{
line-height:34px;
text-align: center;
float: right;
color:#9FA0A8;
}
.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 .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: 22px;
min-height: 40px;
max-height: 40px;
}
.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;
}
.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;
font-size: 14px;
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,.recommend_tag ul li:last-child{
border:none;
}
.tags{
flex-wrap: wrap;
}
.tags>a{
margin:5px;
}
.news_title{
border-bottom: 1px solid #F6F6F6;
padding-bottom:20px;
}
.news_title h1{
font-size: 28px;
color:#222;
line-height: 28px;
font-weight: 700;
}
.news_img{
width:100%;
height:87px;
}
.news_content{
box-sizing: border-box;
padding:20px;
}
.news_content p,span{
}
.news_content p{
line-height: 1.8;
margin-top: 24px;
letter-spacing: 0.5px;
font-size: 16px;
color: #333;
}
.news_content p:first-child{
margin-top: 0;
}
.news_content img {
height: auto;
display: block;
}
.zan{
font-size: 16px;
line-height:18px;
color:#9FA0A8;
margin:0 20px 0 5px;
}
.zanImg{
width:20px;
height:18px;
}
.news_btn{
margin-top:15px;
margin-bottom: 30px;
}
.zan_btn{
width:141px;
height:41px;
background:#FF6919;
border-radius: 21px;
line-height:41px;
text-align: center;
cursor: pointer;
color:#fff;
}
.cai_btn{
width:139px;
height:39px;
background:#fff;
border-radius: 21px;
line-height:41px;
text-align: center;
cursor: pointer;
color:#9FA0A8;
margin-left:20px;
border: 1px solid #D6D6D6;
}
.goods_news{
margin-top:20px;
color:#222;
font-size: 14px;
font-weight: 400;
}
.zanActive{
background:#fff;
color:#FF6919;
border:1px solid #FF6919;
width:139px;
height:39px;
}
.caiActive{
background:#9FA0A8;
color:#fff;
border:none;
width:141px;
height:41px;
}
.caiActive img{
transform: translateY(2px);
}
.news_zan{
position: relative;
}
.news_zan .add{
position:absolute;
top: 0px;
left: 65px;
color: #fff;
font-size: 24px;
cursor: pointer;
opacity: 0;
}
.dialog{
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
position:fixed;
top:0;
left:0;
display: none;
z-index:99;
}
.dialog_content{
width:500px;
height:335px;
background:#fff;
border-radius: 5px;
position: absolute;
top:0;
left:0;
bottom: 0;
right: 0;
margin:auto;
box-sizing: border-box;
z-index:999;
}
.close{
position: absolute;
top:20px;
right:20px;
cursor: pointer;
}
.dialog .title{
line-height:60px;
text-align: center;
/* background:; */
}
h4:hover a{
color: #4674f1 !important;
}
.submit{
padding:12px 20px;
font-size:16px;
line-height:16px;
background:#FF6919;
border:none;
border-radius: 5px;
color:#fff;
cursor: pointer;
position: relative;
left:43%;
bottom:0;
}
.noList{
text-align: center;
padding-bottom:40px;
}
.noList img{
margin:40px 0 20px;
}
.noList p{
color:#242841;
font-size:12px;
}
.news_content img{
max-width: 100%;
}
#intro {
white-space: normal;
word-break: break-all;
overflow: hidden;
}
#intro ol {
float: none;
width: auto;
list-style-type: decimal;
padding: 0 20px;
}
#intro ol li {
float: none;
width: auto;
line-height: normal;
overflow: visible;
list-style-type: decimal;
list-style: decimal;
padding: 0 20px;
white-space: normal;
}
#intro ul {
float: none;
width: auto;
padding: 0 20px;
}
#intro ul li {
float: none;
width: auto;
line-height: normal;
overflow: visible;
padding: 0 20px;
white-space: normal;
}
.ym_nav_nav_right_button2{
/*background: #ff6918;*/
color: #3822BA !important;
}
</style>
<style>
.ycm_new_ad{
margin: 24px 0;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #F5F7F9;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.ycm_new_ad .ycm_new_ad_left{
width: 270px;
height: 180px;
font-size: 0;
}
.ycm_new_ad .ycm_new_ad_left .ycm_new_ad_img{
width: 100%;
height: 100%;
}
.ycm_new_ad .ycm_new_ad_right{
width: calc(100% - 270px - 20px);
}
.ycm_new_ad .ycm_new_ad_right .ycm_new_ad_title{
font-size: 22px;
font-weight: 700;
text-align: left;
color: #242841;
}
.ycm_new_ad .ycm_new_ad_right .ycm_new_ad_text{
margin-top: 12px;
font-size: 15px;
font-weight: 400;
color: #777777;
white-space: pre-line;
}
.ycm_new_ad .ycm_new_ad_right .ycm_new_ad_link{
margin-top: 13px;
display: inline-block;
width: 150px;
height: 40px;
background: #ff6919;
border-radius: 20px;
text-align: center;
font-size: 16px;
color: #ffffff;
line-height: 40px;
/*position: absolute;*/
/*left: 0;*/
/*bottom: 0;*/
}
</style>
</head>
<body>
<div class="main">
<div class="head">
{include file=comm/head.html}
<div class="banner">
<p class="title">{content:title}</p>
</div>
</div>
<nav class="tab editionCenter">
当前位置： <a href="/article" style="cursor: pointer;" title="新闻动态">新闻动态</a> >
<span class="lableName" style="display: none;"><a href="javascript:;" style="color:#717377"></a> ></span>
<span style="color:#717377"><a target="_blank" href="{content:link}" title="{content:title}">{content:title}</a></span>
</nav>
<section class="section editionCenter dis_flex">
<div class="news_l">
<div class="news_title">
<h1>{content:title}</h1>
<div class="dis_flex" style="justify-content:space-between;margin-top:30px;">
<p style="color:#A4A6AB;font-size:14px;">{content:author}</p>
<p style="color:#A4A6AB;font-size:14px;">{content:date}</p>
</div>
</div>
<div class="news_content" id="intro">
{content:content}
</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 isrecommend=1}
<li>
<div class="article_item dis_flex">
<div class="content" style="width: 100%" >
<h4 class="title mor_eps"><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 style=Y-m-d]</p>
</div>
</div>
</div>
</li>
{/pboot:list}
</ul>
<div class="noList" style="display: none;" >
<img src="{pboot:sitetplpath}/static/picture/nolist.png" alt="">
<p>暂无最新文章，敬请期待~</p>
</div>
</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 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>
</section>
{include file=comm/foot.html}
</div>
<script src="{pboot:sitetplpath}/static/js/layui.js"></script>
<script src="{pboot:sitetplpath}/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>