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.
641 lines
17 KiB
641 lines
17 KiB
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>{ms:global.name/}</title> |
|
<#include "head-file.htm" /> |
|
</head> |
|
<body> |
|
<div id="app" v-cloak> |
|
<#include "header.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: { |
|
collectionFrorm: { |
|
collectionDataTitle: '${field.title}',//文章标题 |
|
dataId: '${field.id}',//文章id |
|
dataType: "cms" //业务类型 |
|
}, |
|
Total:0 // 点赞数 |
|
}, |
|
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() { |
|
this.likeTotal() |
|
} |
|
}) |
|
</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>
|
|
|