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.
547 lines
16 KiB
547 lines
16 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"> |
|
<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> |
|
<div class="product"> |
|
<div class="pic"> |
|
<img title="" alt="" src="{ms:global.host/}/{@ms:file field.litpic/}"> |
|
<div class="text"> |
|
<span class="big-title"> ${field.title} </span> |
|
<span class="desc"> ${field.descrip} </span> |
|
</div> |
|
</div> |
|
<div class="content"> |
|
<div class="content-body"> |
|
<span> ${field.content} </span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</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; |
|
padding-top:20px; |
|
padding-left:0px; |
|
} |
|
.content .body .left |
|
{ |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
width:100%; |
|
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 |
|
{ |
|
padding-bottom:0px; |
|
flex-wrap:wrap; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
width:1000px; |
|
margin-bottom:0px; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
position:relative; |
|
padding-left:20px; |
|
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; |
|
padding-left:0px; |
|
margin-top:10px; |
|
height:30px; |
|
margin-left:auto; |
|
} |
|
.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 .product |
|
{ |
|
margin-right:0px; |
|
padding-bottom:0px; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
width:980px; |
|
margin-bottom:0px; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
padding-left:0px; |
|
margin-top:0px; |
|
} |
|
.content .body .right .product .pic |
|
{ |
|
flex-wrap:nowrap; |
|
flex-direction:row; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-left:0px; |
|
height:240px; |
|
} |
|
.content .body .right .product .pic img |
|
{ |
|
width:320px; |
|
padding-left:0px; |
|
height:206px; |
|
} |
|
.content .body .right .product .pic .text |
|
{ |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
width:740px; |
|
box-sizing:border-box; |
|
padding-left:20px; |
|
height:100%; |
|
} |
|
.content .body .right .product .pic .text .big-title |
|
{ |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:22PX; |
|
padding-left:0px; |
|
} |
|
.content .body .right .product .pic .text .desc |
|
{ |
|
color:#C8C8C8; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-top:0px; |
|
padding-left:0px; |
|
} |
|
.content .body .right .product .content |
|
{ |
|
padding-bottom:10px; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-top:10px; |
|
padding-left:0px; |
|
} |
|
.content .body .right .product .content .label |
|
{ |
|
padding-bottom:0px; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:18PX; |
|
padding-top:0px; |
|
padding-left:0px; |
|
} |
|
.content .body .right .product .content .content-body |
|
{ |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
padding-left:0px; |
|
height:100%; |
|
} |
|
.content .body .right .product .content .content-body span |
|
{ |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:14px; |
|
} |
|
@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; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
width:90%; |
|
box-sizing:border-box; |
|
padding-top:20px; |
|
padding-left:0px; |
|
} |
|
.content .body .left |
|
{ |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
padding-left: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 .right |
|
{ |
|
padding-bottom:0px; |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
width:100%; |
|
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; |
|
padding-left:0px; |
|
margin-top:10px; |
|
height:30px; |
|
margin-left:auto; |
|
} |
|
.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 .ms-channel-path-link |
|
{ |
|
cursor:pointer; |
|
color:#000; |
|
font-size:16PX; |
|
text-decoration:none; |
|
margin-bottom:0px; |
|
margin-top:0px; |
|
} |
|
.content .body .right .product |
|
{ |
|
margin-right:0px; |
|
padding-bottom:0px; |
|
flex-direction:column; |
|
display:flex; |
|
padding-right:0px; |
|
width:100%; |
|
margin-bottom:0px; |
|
box-sizing:border-box; |
|
padding-top:0px; |
|
padding-left:0px; |
|
margin-top:0px; |
|
height:610px; |
|
} |
|
.content .body .right .product .pic |
|
{ |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-left:0px; |
|
height:240px; |
|
} |
|
.content .body .right .product .pic img |
|
{ |
|
padding-bottom:0px; |
|
width:100%; |
|
padding-top:0px; |
|
padding-left:0px; |
|
height:400px; |
|
} |
|
.content .body .right .product .pic .text |
|
{ |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-left:0px; |
|
height:100%; |
|
} |
|
.content .body .right .product .pic .text .big-title |
|
{ |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:22PX; |
|
padding-left:0px; |
|
} |
|
.content .body .right .product .pic .text .desc |
|
{ |
|
color:#C8C8C8; |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:16PX; |
|
padding-left:0px; |
|
} |
|
.content .body .right .product .content |
|
{ |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-left:0px; |
|
height:240px; |
|
} |
|
.content .body .right .product .content .label |
|
{ |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:18PX; |
|
padding-top:0px; |
|
padding-left:0px; |
|
} |
|
.content .body .right .product .content .content-body |
|
{ |
|
flex-wrap:nowrap; |
|
flex-direction:column; |
|
display:flex; |
|
width:100%; |
|
box-sizing:border-box; |
|
padding-top:20px; |
|
padding-left:0px; |
|
height:100%; |
|
} |
|
.content .body .right .product .content .content-body span |
|
{ |
|
flex-direction:row; |
|
word-wrap:break-word; |
|
display:inline-block; |
|
font-size:14px; |
|
} |
|
|
|
}</style> |
|
</body> |
|
</html> |