You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
632 lines
18 KiB
632 lines
18 KiB
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>{ms:global.name/}</title> |
|
<#include "head-file.htm" /> |
|
</head> |
|
<body> |
|
<div id="app" v-cloak> |
|
<#include "nav.htm" /> |
|
<div class="content"> |
|
<!--新闻详情-start--> |
|
<div class="body"> |
|
<div class="left"> |
|
{ms:channel type='parent'} |
|
<span class="title"> ${field.typetitle} </span> |
|
{/ms:channel} |
|
<#assign typetitle=field.typetitle> |
|
<#if field.typeleaf> |
|
{ms:channel type='level'} |
|
<a href="{ms:global.url/}${field.typelink}" class="<#if typetitle==field.typetitle>sub-title-sel<#else>sub-title</#if>"> ${field.typetitle} </a> |
|
{/ms:channel} |
|
<#else> |
|
{ms:channel type='son'} |
|
<a href="{ms:global.url/}${field.typelink}" class="<#if typetitle==field.typetitle>sub-title-sel<#else>sub-title</#if>"> ${field.typetitle} </a> |
|
{/ms:channel} |
|
</#if> |
|
</div> |
|
<div class="right"> |
|
<div class="ms-channel-path"> |
|
<span class="ms-channel-path-label"> 当前位置： </span> |
|
<a href="/" class="ms-channel-path-index"> 首页 </a> {ms:channel type="path"} |
|
<i class="iconfont icon-youjiantou"></i> |
|
<a href="{ms:global.url/}${field.typelink}" class="ms-channel-path-link"> ${field.typetitle} </a> {/ms:channel} |
|
</div> |
|
<span class="big-title"> ${field.title} </span> |
|
<div class="news-date-hit"> |
|
<span> 发布时间: </span> |
|
<span class="date"> ${field.date?date?string("yyyy-MM-dd")} </span> |
|
<span> 预览次数: </span> |
|
<span> ${field.hit} </span> |
|
</div> |
|
<div class="news-body"> |
|
<span> ${field.content} </span> |
|
</div> |
|
<div class="news-pre"> |
|
<span class="label"> 上一篇: </span> |
|
<#if pre.title?has_content> |
|
<a href="{ms:global.url/}${pre.link}"> ${pre.title} </a> |
|
<#else> |
|
已经没有了 |
|
</#if> |
|
</div> |
|
<div class="news-next"> |
|
<span class="label"> 下一篇: </span> |
|
<#if next.title?has_content> |
|
<a href="{ms:global.url/}${next.link}"> ${next.title} </a> |
|
<#else> |
|
已经没有了 |
|
</#if> |
|
</div> |
|
</div> |
|
</div> |
|
<!--新闻详情-end--> |
|
</div> |
|
<#include "footer.htm" /> |
|
</div> |
|
<script> |
|
var app = new Vue({ |
|
el: '#app', |
|
watch:{ |
|
}, |
|
data: { |
|
}, |
|
methods: { |
|
switchShow:function(arr){ |
|
var that = this |
|
arr.forEach(function(x){ |
|
let e = that.$el.querySelector("#key_"+x) |
|
if(e){ |
|
e.style.display=e.style.display=='none'?'flex':'none' |
|
} |
|
}) |
|
}, |
|
}, |
|
created(){ |
|
} |
|
}) |
|
</script> |
|
<style> |
|
body { |
|
background-color:#fff; |
|
box-sizing:border-box; |
|
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif; |
|
moz-box-sizing:border-box; |
|
webkit-box-sizing:border-box; |
|
} |
|
|
|
.content |
|
{ |
|
align-items:flex-start; |
|
flex-direction:row; |
|
display:flex; |
|
padding-right:0px; |
|
box-sizing:border-box; |
|
justify-content:center; |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
width:100%; |
|
margin-bottom:0px; |
|
padding-top:0px; |
|
padding-left:0px; |
|
margin-top:0px; |
|
} |
|
.content .body |
|
{ |
|
padding-bottom:20px; |
|
flex-wrap:nowrap; |
|
flex-direction:row; |
|
display:flex; |
|
padding-right:0px; |
|
width:1200px; |
|
box-sizing:border-box; |
|
margin-bottom:0px; |
|
padding-top:20px; |
|
padding-left:0px; |
|
margin-top:0px; |
|
} |
|
.content .body .left |
|
{ |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
width:200px; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
padding-left:0px; |
|
margin-top:0px; |
|
height:100%; |
|
} |
|
.content .body .left .title |
|
{ |
|
border-bottom-color:#C0C4CC; |
|
color:#C0C4CC; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
border-bottom-style:dashed; |
|
padding-top:10px; |
|
border-bottom-width:1px; |
|
padding-left:10px; |
|
margin-top:0px; |
|
height:40px; |
|
} |
|
.content .body .left .sub-title-sel |
|
{ |
|
background-color:#F2F6FC; |
|
color:#409EFF; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:10px; |
|
padding-left:10px; |
|
margin-top:2px; |
|
height:40px; |
|
} |
|
.content .body .left .sub-title |
|
{ |
|
color:#5F5F5F; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:10px; |
|
padding-left:10px; |
|
margin-top:0px; |
|
height:40px; |
|
} |
|
.content .body .right |
|
{ |
|
align-items:center; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
box-sizing:border-box; |
|
justify-content:center; |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
width:1000px; |
|
margin-bottom:0px; |
|
padding-top:0px; |
|
padding-left:20px; |
|
margin-top:0px; |
|
height:100%; |
|
} |
|
.content .body .right .ms-channel-path |
|
{ |
|
align-items:center; |
|
flex-direction:row; |
|
display:flex; |
|
box-sizing:border-box; |
|
margin-left:auto; |
|
margin-right:auto; |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
width:100%; |
|
margin-bottom:10px; |
|
padding-top:0px; |
|
margin-top:10px; |
|
height:30px; |
|
} |
|
.content .body .right .ms-channel-path span |
|
{ |
|
color:#909399; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
} |
|
.content .body .right .ms-channel-path .ms-channel-path-index |
|
{ |
|
cursor:pointer; |
|
color:#000; |
|
font-size:16PX; |
|
text-decoration:none; |
|
margin-bottom:0px; |
|
margin-top:0px; |
|
} |
|
.content .body .right .ms-channel-path >i |
|
{ |
|
} |
|
.content .body .right .ms-channel-path .ms-channel-path-link |
|
{ |
|
cursor:pointer; |
|
color:#000; |
|
font-size:16PX; |
|
text-decoration:none; |
|
margin-bottom:0px; |
|
margin-top:0px; |
|
} |
|
.content .body .right .big-title |
|
{ |
|
text-align:center; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:22PX; |
|
padding-left:0px; |
|
} |
|
.content .body .right .news-date-hit |
|
{ |
|
margin-right:0px; |
|
align-items:center; |
|
flex-wrap:nowrap; |
|
flex-direction:row; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-left:0px; |
|
justify-content:center; |
|
height:40px; |
|
} |
|
.content .body .right .news-date-hit span |
|
{ |
|
color:#909399; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
} |
|
.content .body .right .news-date-hit .date |
|
{ |
|
margin-right:20px; |
|
color:#909399; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
margin-left:0px; |
|
} |
|
.content .body .right .news-body |
|
{ |
|
margin-right:0px; |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
margin-bottom:0px; |
|
padding-top:0px; |
|
margin-top:0px; |
|
margin-left:0px; |
|
} |
|
.content .body .right .news-body span |
|
{ |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:14px; |
|
} |
|
.content .body .right .news-pre |
|
{ |
|
margin-right:0px; |
|
padding-bottom:0px; |
|
align-items:center; |
|
flex-wrap:nowrap; |
|
flex-direction:row; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
justify-content:flex-start; |
|
margin-left:0px; |
|
height:40px; |
|
} |
|
.content .body .right .news-pre .label |
|
{ |
|
margin-right:10px; |
|
color:#909399; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:0px; |
|
} |
|
.content .body .right .news-pre a |
|
{ |
|
margin-right:0px; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:0px; |
|
} |
|
.content .body .right .news-next |
|
{ |
|
margin-right:0px; |
|
padding-bottom:0px; |
|
align-items:center; |
|
flex-wrap:nowrap; |
|
flex-direction:row; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
justify-content:flex-start; |
|
margin-left:0px; |
|
height:40px; |
|
} |
|
.content .body .right .news-next .label |
|
{ |
|
margin-right:10px; |
|
color:#909399; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:0px; |
|
} |
|
.content .body .right .news-next a |
|
{ |
|
margin-right:0px; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:0px; |
|
} |
|
@media (max-width: 768px){ |
|
.content |
|
{ |
|
align-items:center; |
|
flex-direction:row; |
|
display:flex; |
|
padding-right:0px; |
|
box-sizing:border-box; |
|
justify-content:center; |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
width:100%; |
|
margin-bottom:0px; |
|
padding-top:0px; |
|
padding-left:0px; |
|
margin-top:0px; |
|
} |
|
.content .body |
|
{ |
|
padding-bottom:20px; |
|
align-items:center; |
|
flex-wrap:wrap; |
|
flex-direction:row; |
|
display:flex; |
|
padding-right:0px; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-top:20px; |
|
padding-left:0px; |
|
justify-content:center; |
|
} |
|
.content .body .left |
|
{ |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
width:90%; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
padding-left:0px; |
|
margin-top:0px; |
|
height:100%; |
|
} |
|
.content .body .left .sub-title-sel |
|
{ |
|
background-color:#F2F6FC; |
|
color:#409EFF; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:10px; |
|
padding-left:10px; |
|
margin-top:2px; |
|
height:40px; |
|
} |
|
.content .body .left .sub-title |
|
{ |
|
color:#5F5F5F; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:10px; |
|
padding-left:10px; |
|
margin-top:0px; |
|
height:40px; |
|
} |
|
.content .body .right |
|
{ |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
width:90%; |
|
margin-bottom:0px; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
padding-left:0px; |
|
margin-top:0px; |
|
} |
|
.content .body .right .ms-channel-path |
|
{ |
|
margin-right:auto; |
|
align-items:center; |
|
flex-wrap:nowrap; |
|
flex-direction:row; |
|
display:flex; |
|
width:100%; |
|
margin-bottom:10px; |
|
box-sizing:border-box; |
|
margin-top:10px; |
|
height:30px; |
|
margin-left:auto; |
|
} |
|
.content .body .right .ms-channel-path span |
|
{ |
|
color:#5F5F5F; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:0px; |
|
padding-left:0px; |
|
} |
|
.content .body .right .ms-channel-path .ms-channel-path-index |
|
{ |
|
cursor:pointer; |
|
color:#000; |
|
font-size:16PX; |
|
text-decoration:none; |
|
margin-bottom:0px; |
|
margin-top:0px; |
|
} |
|
.content .body .right .ms-channel-path .ms-channel-path-link |
|
{ |
|
cursor:pointer; |
|
color:#000; |
|
font-size:16PX; |
|
text-decoration:none; |
|
margin-bottom:0px; |
|
margin-top:0px; |
|
} |
|
.content .body .right .big-title |
|
{ |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:22PX; |
|
padding-left:0px; |
|
} |
|
.content .body .right .news-date-hit |
|
{ |
|
margin-right:0px; |
|
align-items:center; |
|
flex-wrap:nowrap; |
|
flex-direction:row; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-left:0px; |
|
justify-content:center; |
|
height:40px; |
|
} |
|
.content .body .right .news-date-hit span |
|
{ |
|
color:#909399; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
} |
|
.content .body .right .news-date-hit .date |
|
{ |
|
margin-right:20px; |
|
color:#909399; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
margin-left:0px; |
|
} |
|
.content .body .right .news-body |
|
{ |
|
margin-right:0px; |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
margin-bottom:0px; |
|
padding-top:0px; |
|
margin-top:0px; |
|
height:300px; |
|
margin-left:0px; |
|
height: unset; |
|
} |
|
.content .body .right .news-body span |
|
{ |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:14px; |
|
} |
|
.content .body .right .news-pre |
|
{ |
|
margin-right:0px; |
|
padding-bottom:0px; |
|
align-items:center; |
|
flex-wrap:nowrap; |
|
flex-direction:row; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
justify-content:flex-start; |
|
margin-left:0px; |
|
height:40px; |
|
} |
|
.content .body .right .news-pre .label |
|
{ |
|
margin-right:10px; |
|
color:#909399; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:0px; |
|
} |
|
.content .body .right .news-pre a |
|
{ |
|
margin-right:0px; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:0px; |
|
} |
|
.content .body .right .news-next |
|
{ |
|
margin-right:0px; |
|
padding-bottom:0px; |
|
align-items:center; |
|
flex-wrap:nowrap; |
|
flex-direction:row; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
justify-content:flex-start; |
|
margin-left:0px; |
|
height:40px; |
|
} |
|
.content .body .right .news-next .label |
|
{ |
|
margin-right:10px; |
|
color:#909399; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:0px; |
|
} |
|
.content .body .right .news-next a |
|
{ |
|
margin-right:0px; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:0px; |
|
} |
|
|
|
}</style> |
|
</body> |
|
</html> |