yujialong 2 years ago
parent 15efbd83c6
commit 23b785bcbe
  1. 0
      src/assets/images/about-bg.png
  2. 0
      src/assets/images/about.png
  3. 0
      src/assets/images/channel-bg.png
  4. 0
      src/assets/images/channel1.png
  5. 0
      src/assets/images/channel2.png
  6. 0
      src/assets/images/info-bg.png
  7. 0
      src/assets/images/intro-bg.png
  8. 102
      src/components/editor.js
  9. 218
      src/pages/article/add/editor.js
  10. 26
      src/pages/column/page/home.vue
  11. 397
      src/pages/page/add/index.vue
  12. 179
      src/pages/page/list/index.vue

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

Before

Width:  |  Height:  |  Size: 466 KiB

After

Width:  |  Height:  |  Size: 466 KiB

Before

Width:  |  Height:  |  Size: 602 KiB

After

Width:  |  Height:  |  Size: 602 KiB

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

Before

Width:  |  Height:  |  Size: 562 KiB

After

Width:  |  Height:  |  Size: 562 KiB

@ -5,38 +5,15 @@ export default {
language:'zh_CN', language:'zh_CN',
plugins: 'print powerpaste preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter', plugins: 'print powerpaste preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter',
toolbar: 'code undo redo restoredraft | cut copy powerpaste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \ toolbar: 'code undo redo restoredraft | cut copy powerpaste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \ styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em lineheight formatpainter', table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em lineheight formatpainter',
// width: 1000,
height: 650, //编辑器高度 height: 650, //编辑器高度
min_height: 400, min_height: 400,
// content_css: [ //可设置编辑区内容展示的css,谨慎使用 content_css: [ //可设置编辑区内容展示的css,谨慎使用
// '/static/reset.css', './editor.css',
// ], ],
content_style: `.mce-content-body:not([dir=rtl]) blockquote { // content_style: Style,
padding: 8px 15px;
border-left: 0;
background-color: #ededed;
}
blockquote p {
margin: 0;
font-style: italic;
}
.block {
margin-bottom: 20px;
overflow: hidden;
}
.block .fl {
float: left;
margin-right: 10px;
}
.block .fr {
float: right;
margin-left: 10px;
}
.block p {
margin: 0 0 10px;
}
`,
fontsize_formats: '12px 14px 16px 19px 24px 36px 48px 56px 72px', fontsize_formats: '12px 14px 16px 19px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif', font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
link_list: [ link_list: [
@ -67,18 +44,67 @@ export default {
//为内容模板插件提供预置模板 //为内容模板插件提供预置模板
templates: [ templates: [
{ title: '文章模板1', description: '图片文字流', content: ` { title: '文章模板1', description: '图片文字流', content: `
<div class="block"> <div class="tiny-wrap">
<img align="left" hspace="5" vspace="5" src="https://tse1-mm.cn.bing.net/th/id/OIP-C._S-t6T2kt-j6ydemeoB1wAHaEs?w=301&h=190&c=7&r=0&o=5&pid=1.7"/> <div class="block">
<div class="texts"> <div class="fl">
<p>S³FEL主要由一台超导直线加速器波荡器光束线和实验站组成可产生重复频率达1MHz电子束能量达2.5 GeV的软X 射线自由电子激光可在百飞秒内级实现原子分子及外壳层电子结构的无损动态监测是科学家认识和了解物质微观结构及动态变化的高速摄像机S³FEL为科学家和企业用户提供了一种具有超高时间分辨空间分辨和能量分辨的新方法新技术 S³FEL在量子材料能源催化生物医药大气与星际科学原子分子科学等领域的应用研究将为促进我国战略性新兴产业创新发展和关键 <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C._S-t6T2kt-j6ydemeoB1wAHaEs?w=301&h=190&c=7&r=0&o=5&pid=1.7"/>
<p class="img-des">图片描述</p>
</div>
<div class="texts">
<p>S³FEL主要由一台超导直线加速器波荡器光束线和实验站组成可产生重复频率达1MHz电子束能量达2.5 GeV的软X 射线自由电子激光可在百飞秒内级实现原子分子及外壳层电子结构的无损动态监测是科学家认识和了解物质微观结构及动态变化的高速摄像机S³FEL为科学家和企业用户提供了一种具有超高时间分辨空间分辨和能量分辨的新方法新技术 S³FEL在量子材料能源催化生物医药大气与星际科学原子分子科学等领域的应用研究将为促进我国战略性新兴产业创新发展和关键S³FEL主要由一台超导直线加速器波荡器光束线和实验站组成可产生重复频率达1MHz电子束能量达2.5 GeV的软X 射线自由电子激光可在百飞秒内级实现原子分子及外壳层电子结构的无损动态监测是科学家认识和了解物质微观结构及动态变化的高速摄像机S³FEL为科学家和企业用户提供了一种具有超高时间分辨空间分辨和能量分辨的新方法新技术 S³FEL在量子材料能源催化生物医药大气与星际科学原子分子科学等领域的应用研究将为促进我国战略性新兴产业创新发展和关键S³FEL主要由一台超导直线加速器波荡器光束线和实验站组成可产生重复频率达1MHz电子束能量达2.5 GeV的软X 射线自由电子激光可在百飞秒内级实现原子分子及外壳层电子结构的无损动态监测是科学家认识和了解物质微观结构及动态变化的高速摄像机S³FEL为科学家和企业用户提供了一种具有超高时间分辨空间分辨和能量分辨的新方法新技术 S³FEL在量子材料能源催化生物医药大气与星际科学原子分子科学等领域的应用研究将为促进我国战略性新兴产业创新发展和关键S³FEL主要由一台超导直线加速器波荡器光束线和实验站组成可产生重复频率达1MHz电子束能量达2.5 GeV的软X 射线自由电子激光可在百飞秒内级实现原子分子及外壳层电子结构的无损动态监测是科学家认识和了解物质微观结构及动态变化的高速摄像机S³FEL在量子材料能源催化生物医药大气与星际科学原子分子科学等领域的应用研究将为促进我国战略性新兴产业创新发展和关键S³FEL主要由一台超导直线加速器波荡器光束线和实验站组成可产生重复频率达1MHz电子束能量达2.5 GeV的软X 射线自由电子激光可在百飞秒内级实现原子分子及外壳层电子结构的无损动态监测是科学家认识和了解物质微观结构及动态变化的高速摄像机
</p>
</div>
</div>
<div class="block">
<div class="fr">
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C._S-t6T2kt-j6ydemeoB1wAHaEs?w=301&h=190&c=7&r=0&o=5&pid=1.7"/>
<p class="img-des">图片描述</p>
</div>
<div>
<p>集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地</p>
<p>S³FEL汇聚并培养信息生命材料能源等学科领域的国际水平科技领军人才集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地是展示我国科技实力提高全民族科学素质和民族自信的重要宣传窗口 S³FEL主体建筑将成为深圳市地标式建筑促进提升深圳市的城市形象和国际化知名度S³FEL汇聚并培养信息生命材料能源等学科领域的国际水平科技领军人才集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地是展示我国科技实力提高全民族科学素质和民族自信的重要宣传窗口 S³FEL主体建筑将成为深圳市地标式建筑促进提升深圳市的城市形象和国际化知名度S³FEL汇聚并培养信息生命材料能源等学科领域的国际水平科技领军人才集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地是展示我国科技实力提高全民族科学素质和民族自信的重要宣传窗口 S³FEL主体建筑将成为深圳市地标式建筑促进提升深圳市的城市形象和国际化知名度</p>
</div>
</div>
</div>
`
},
{ title: '新闻模板', description: '', content: `
<div class="tiny-wrap">
<div class="block" style="margin-bottom: 70px;">
<div class="fr">
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C._S-t6T2kt-j6ydemeoB1wAHaEs?w=301&h=190&c=7&r=0&o=5&pid=1.7"/>
<p class="img-des">图片描述</p>
</div>
<div>
<p>S³FEL汇聚并培养信息生命材料能源等学科领域的国际水平科技领军人才集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地是展示我国科技实力提高全民族科学素质和民族自信的重要宣传窗口 S³FEL主体建筑将成为深圳市地标式建筑促进提升深圳市的城市形象和国际化知名度S³FEL汇聚并培养信息生命材料能源等学科领域的国际水平科技领军人才集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地是展示我国科技实力提高全民族科学素质和民族自信的重要宣传窗口 S³FEL主体建筑将成为深圳市地标式建筑促进提升深圳市的城市形象和国际化知名度S³FEL汇聚并培养信息生命材料能源等学科领域的国际水平科技领军人才集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地是展示我国科技实力提高全民族科学素质和民族自信的重要宣传窗口 S³FEL主体建筑将成为深圳市地标式建筑促进提升深圳市的城市形象和国际化知名度</p>
<div class="quote">
Here is a long quotation here is a long quotation here is a long quotation
here is a long quotation here is a long quotation here is a long quotation
here is a long quotation here is a long quotation here is a long quotation.
</div>
</div>
</div>
<div class="block">
<div class="img-wrap">
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C._S-t6T2kt-j6ydemeoB1wAHaEs?w=301&h=190&c=7&r=0&o=5&pid=1.7"/>
<p class="img-des">图片描述</p>
</div>
<div class="texts">
<h6 class="tiny-title">小标题</h6>
<p>S³FEL主要由一台超导直线加速器波荡器光束线和实验站组成可产生重复频率达1MHz电子束能量达2.5 GeV的软X 射线自由电子激光可在百飞秒内级实现原子分子及外壳层电子结构的无损动态监测是科学家认识和了解物质微观结构及动态变化的高速摄像机S³FEL为科学家和企业用户提供了一种具有超高时间分辨空间分辨和能量分辨的新方法新技术 S³FEL在量子材料能源催化生物医药大气与星际科学原子分子科学等领域的应用研究将为促进我国战略性新兴产业创新发展和关键S³FEL主要由一台超导直线加速器波荡器光束线和实验站组成可产生重复频率达1MHz电子束能量达2.5 GeV的软X 射线自由电子激光可在百飞秒内级实现原子分子及外壳层电子结构的无损动态监测是科学家认识和了解物质微观结构及动态变化的高速摄像机S³FEL为科学家和企业用户提供了一种具有超高时间分辨空间分辨和能量分辨的新方法新技术 S³FEL在量子材料能源催化生物医药大气与星际科学原子分子科学等领域的应用研究将为促进我国战略性新兴产业创新发展和关键
</p> </p>
</div>
</div> </div>
</div> </div>
<div class="block"> `
<img align="right" hspace="5" vspace="5" src="https://tse1-mm.cn.bing.net/th/id/OIP-C._S-t6T2kt-j6ydemeoB1wAHaEs?w=301&h=190&c=7&r=0&o=5&pid=1.7"/> },
<div> { title: '图片描述', description: '', content: `
<p>集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地</p> <div class="tiny-wrap">
<p>S³FEL汇聚并培养信息生命材料能源等学科领域的国际水平科技领军人才集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地是展示我国科技实力提高全民族科学素质和民族自信的重要宣传窗口 S³FEL主体建筑将成为深圳市地标式建筑促进提升深圳市的城市形象和国际化知名度</p> <div class="block">
<div class="img-wrap">
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C._S-t6T2kt-j6ydemeoB1wAHaEs?w=301&h=190&c=7&r=0&o=5&pid=1.7"/>
<p class="img-des">图片描述</p>
</div>
</div> </div>
</div> </div>
` `

@ -1,13 +1,177 @@
import axios from 'axios' import Axios from 'axios'
import Api from '@/api' import Api from '@/api'
export default { export default {
//skin:'oxide-dark', //skin:'oxide-dark',
language:'zh_CN', language:'zh_CN',
plugins: 'print powerpaste preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter', plugins: 'print powerpaste preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter',
toolbar: 'code undo redo restoredraft | cut copy powerpaste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \ toolbar: 'code undo redo restoredraft | cut copy powerpaste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify | \
styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \ styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em lineheight formatpainter', table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em formatpainter',
// width: 1000, style_formats: [
//新增 首行缩进与行高 配置
{
title: '首行缩进',
block: 'p',
styles: {
'text-indent': '2em'
}
},
{
title: '行高',
items: [{
title: '1',
styles: {
'line-height': '1'
},
inline: 'span'
},
{
title: '1.5',
styles: {
'line-height': '1.5'
},
inline: 'span'
},
{
title: '2',
styles: {
'line-height': '2'
},
inline: 'span'
},
{
title: '2.5',
styles: {
'line-height': '2.5'
},
inline: 'span'
},
{
title: '3',
styles: {
'line-height': '3'
},
inline: 'span'
}
]
},
//默认的配置
{
title: 'Headings',
items: [
{
title: 'Heading 1',
format: 'h1'
},
{
title: 'Heading 2',
format: 'h2'
},
{
title: 'Heading 3',
format: 'h3'
},
{
title: 'Heading 4',
format: 'h4'
},
{
title: 'Heading 5',
format: 'h5'
},
{
title: 'Heading 6',
format: 'h6'
}
]
},
{
title: 'Inline',
items: [
{
title: 'Bold',
icon: 'bold',
format: 'bold'
},
{
title: 'Italic',
icon: 'italic',
format: 'italic'
},
{
title: 'Underline',
icon: 'underline',
format: 'underline'
},
{
title: 'Strikethrough',
icon: 'strikethrough',
format: 'strikethrough'
},
{
title: 'Superscript',
icon: 'superscript',
format: 'superscript'
},
{
title: 'Subscript',
icon: 'subscript',
format: 'subscript'
},
{
title: 'Code',
icon: 'code',
format: 'code'
}
]
},
{
title: 'Blocks',
items: [
{
title: 'Paragraph',
format: 'p'
},
{
title: 'Blockquote',
format: 'blockquote'
},
{
title: 'Div',
format: 'div'
},
{
title: 'Pre',
format: 'pre'
}
]
},
{
title: 'Alignment',
items: [
{
title: 'Left',
icon: 'alignleft',
format: 'alignleft'
},
{
title: 'Center',
icon: 'aligncenter',
format: 'aligncenter'
},
{
title: 'Right',
icon: 'alignright',
format: 'alignright'
},
{
title: 'Justify',
icon: 'alignjustify',
format: 'alignjustify'
}
]
}
],
height: 650, //编辑器高度 height: 650, //编辑器高度
min_height: 400, min_height: 400,
content_css: [ //可设置编辑区内容展示的css,谨慎使用 content_css: [ //可设置编辑区内容展示的css,谨慎使用
@ -15,7 +179,7 @@ export default {
], ],
// content_style: Style, // content_style: Style,
fontsize_formats: '12px 14px 16px 19px 24px 36px 48px 56px 72px', fontsize_formats: '12px 14px 16px 19px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif', font_formats: '苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
link_list: [ link_list: [
{ title: '预置链接1', value: 'http://www.tinymce.com' }, { title: '预置链接1', value: 'http://www.tinymce.com' },
{ title: '预置链接2', value: 'http://tinymce.ax-z.cn' } { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
@ -129,7 +293,7 @@ export default {
console.log("🚀 ~ file: editor.js ~ line 62 ~ blobInfo", blobInfo) console.log("🚀 ~ file: editor.js ~ line 62 ~ blobInfo", blobInfo)
const form = new FormData() const form = new FormData()
form.append('file', blobInfo.blob()), form.append('file', blobInfo.blob()),
axios({ Axios({
method: 'post', method: 'post',
url: Api.upload, url: Api.upload,
data: form, data: form,
@ -140,5 +304,45 @@ export default {
succFun(data.url) succFun(data.url)
}).catch(res => {}) }).catch(res => {})
}, },
//icons:'ax-color', //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发
file_picker_callback: function (callback, value, meta) {
if (meta.filetype === 'file') {
callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
}
if (meta.filetype === 'image') {
callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
}
// 主要判断 media
if (meta.filetype === 'media') {
// 动态创建上传input,并进行模拟点击上传操作,达到本地上传视频效果。
let input = document.createElement('input');//创建一个隐藏的input
input.setAttribute('type', 'file');
input.setAttribute("accept", ".mp4");
input.onchange = function(){
let file = this.files[0];
let fd = new FormData();
fd.append("file", file);
Axios({
method: 'post',
url: Api.upload,
data: fd,
headers: {
'Content-Type': 'multipart/form-data'
},
}).then(({ data }) => {
callback(data.url)
}).catch(res => {})
}
//触发点击
input.click();
}
},
// 初始化事件
setup: function(editor) {
editor.on('init', function(ed) {
// 设置默认字体
ed.target.editorCommands.execCommand("fontName", false, "PingFang SC")
ed.target.editorCommands.execCommand("fontSize", false, "19px");
})
},
} }

@ -59,7 +59,7 @@
</div> </div>
<ul class="news"> <ul class="news">
<li> <li>
<img src="@/assets/images/channel/channel1.png" alt=""> <img src="@/assets/images/channel1.png" alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p>
@ -67,7 +67,7 @@
</div> </div>
</li> </li>
<li> <li>
<img src="@/assets/images/channel/channel1.png" alt=""> <img src="@/assets/images/channel1.png" alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p>
@ -75,7 +75,7 @@
</div> </div>
</li> </li>
<li> <li>
<img src="@/assets/images/channel/channel1.png" alt=""> <img src="@/assets/images/channel1.png" alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p>
@ -83,7 +83,7 @@
</div> </div>
</li> </li>
<li> <li>
<img src="@/assets/images/channel/channel1.png" alt=""> <img src="@/assets/images/channel1.png" alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p>
@ -91,7 +91,7 @@
</div> </div>
</li> </li>
<li> <li>
<img src="@/assets/images/channel/channel1.png" alt=""> <img src="@/assets/images/channel1.png" alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p>
@ -99,7 +99,7 @@
</div> </div>
</li> </li>
<li> <li>
<img src="@/assets/images/channel/channel1.png" alt=""> <img src="@/assets/images/channel1.png" alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p>
@ -134,7 +134,7 @@
<div class="about"> <div class="about">
<div class="inner"> <div class="inner">
<img src="@/assets/images/channel/about.png" alt=""> <img src="@/assets/images/about.png" alt="">
<div class="line"></div> <div class="line"></div>
<div class="text">{{ modules[8].form.title }}</div> <div class="text">{{ modules[8].form.title }}</div>
<div class="des" v-html="modules[8].form.des"></div> <div class="des" v-html="modules[8].form.des"></div>
@ -199,7 +199,7 @@ export default {
type: 'banner', type: 'banner',
list: [ list: [
{ {
pic: require('@/assets/images/channel/channel-bg.png'), pic: require('@/assets/images/channel-bg.png'),
link: { link: {
linkName: '无', linkName: '无',
connectionType: 1, connectionType: 1,
@ -262,7 +262,7 @@ export default {
} }
], ],
form: { form: {
pic: require('@/assets/images/channel/channel1.png'), pic: require('@/assets/images/channel1.png'),
title: 'Shenzhen Innovation Lightsource Facility', title: 'Shenzhen Innovation Lightsource Facility',
link: { link: {
linkName: '无', linkName: '无',
@ -305,7 +305,7 @@ export default {
} }
], ],
form: { form: {
pic: require('@/assets/images/channel/channel1.png'), pic: require('@/assets/images/channel1.png'),
title: 'Shenzhen Innovation Lightsource Facility', title: 'Shenzhen Innovation Lightsource Facility',
link: { link: {
linkName: '无', linkName: '无',
@ -421,7 +421,7 @@ export default {
}, },
list: [ list: [
{ {
pic: require('@/assets/images/channel/channel1.png'), pic: require('@/assets/images/channel1.png'),
title: 'Shenzhen Innovation Lightsource Facility', title: 'Shenzhen Innovation Lightsource Facility',
subTitle: '', subTitle: '',
link: { link: {
@ -660,7 +660,7 @@ export default {
} }
&.news-block { &.news-block {
background: url(../../../assets/images/channel/info-bg.png) 0 0/100% 100% no-repeat; background: url(../../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
} }
.news { .news {
position: relative; position: relative;
@ -757,7 +757,7 @@ export default {
.about { .about {
position: relative; position: relative;
padding: 77px 0 198px; padding: 77px 0 198px;
background: url(../../../assets/images/channel/about-bg.png) 0 0/100% 100% no-repeat; background: url(../../../assets/images/about-bg.png) 0 0/100% 100% no-repeat;
.line { .line {
display: flex; display: flex;
align-items: center; align-items: center;

@ -1,397 +0,0 @@
<template>
<div class="wrap">
<div class="actions">
<el-button type="primary">预览</el-button>
<el-button>保存为草稿</el-button>
<el-button type="primary">发布</el-button>
<el-button @click="$router.back()">放弃编辑</el-button>
</div>
<div class="relative">
<img width="100%" height="500" src="@/assets/images/channel/channel-bg.png" alt="">
<div class="cover" @click="toSet">点击更换banner与链接</div>
</div>
<div class="block">
<div class="inner">
<h2 class="b-title">OUR FACILITIES</h2>
<p class="intro">IASF will carry a world-class light source research park by operating a synchrotron radiation facility and a soft X-ray Superconducting free-electron laser facility.</p>
<ul class="card">
<li>
<img width="100%" src="@/assets/images/channel/channel1.png" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div>
</li>
<li>
<img width="100%" src="@/assets/images/channel/channel2.png" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div>
</li>
</ul>
</div>
</div>
<div class="block news-block">
<div class="inner">
<h2 class="b-title">Latest information</h2>
<p class="intro">Keep up with what happen with IASF</p>
<ul class="news">
<li>
<img src="@/assets/images/channel/channel1.png" alt="">
<div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p>
<span class="meta">2022.08.12</span>
</div>
</li>
<li>
<img src="@/assets/images/channel/channel1.png" alt="">
<div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p>
<span class="meta">2022.08.12</span>
</div>
</li>
<li>
<img src="@/assets/images/channel/channel1.png" alt="">
<div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p>
<span class="meta">2022.08.12</span>
</div>
</li>
<li>
<img src="@/assets/images/channel/channel1.png" alt="">
<div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</p>
<span class="meta">2022.08.12</span>
</div>
</li>
</ul>
</div>
</div>
<div class="block">
<div class="inner">
<h2 class="b-title">Light Chasers' Home at IASF</h2>
<p class="intro">Keep up with what happen with IASF</p>
<ul class="people">
<li>
<img class="pic" src="@/assets/images/channel/channel1.png" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div>
</li>
<li>
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div>
<img class="pic" src="@/assets/images/channel/channel2.png" alt="">
</li>
</ul>
</div>
</div>
<div class="about">
<div class="inner">
<img src="@/assets/images/channel/about.png" alt="">
<div class="line"></div>
<div class="text">ABOUT</div>
<div class="des">
<p>The Institute of Advanced Science Facilities in Shenzhen, China is home to world-class science, world-class facilities, and world-class people. Located 25 miles east of Shenzhen city center, on a 1.2 acre campus, IASF has over three hundred researchers and support staff.</p>
</div>
</div>
</div>
<div class="block" style="padding-bottom: 0">
<div class="inner">
<h2 class="glance">IASF at a glance</h2>
<ul class="stat">
<li>
<p class="num">2020</p>
<p class="text">The year IASF was founded</p>
</li>
<li>
<p class="num">2</p>
<p class="text">Facility projects</p>
</li>
<li>
<p class="num">240</p>
<p class="text">Employees</p>
</li>
<li>
<p class="num">10</p>
<p class="text">Academicians</p>
</li>
<li>
<p class="num">45%</p>
<p class="text">Hold doctorates or the highest degree in their field</p>
</li>
<li>
<p class="num">$32B+</p>
<p class="text">Facility construction need-based grant aid provided </p>
</li>
</ul>
</div>
</div>
<el-dialog title="Banner模块管理" :visible.sync="moduleVisible" width="600px" :close-on-click-modal="false">
<span slot="footer" class="dialog-footer">
<el-button @click="moduleVisible = false">取消</el-button>
<el-button type="primary" @click="moduleSubmit">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Setting from '@/setting'
import Util from '@/libs/util'
export default {
data() {
return {
id: this.$route.query.id,
form: {},
moduleVisible: false
}
},
watch: {
'$route'() {
this.id = this.$route.query.id
// this.getInfo()
}
},
mounted() {
},
methods: {
//
getInfo() {
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
this.form = data
this.columnId = data.columnId
}).catch(err => {})
},
//
toSet() {
this.moduleVisible = true
},
//
moduleSubmit() {
}
}
};
</script>
<style lang="scss" scoped>
.actions {
margin-bottom: 20px;
text-align: right;
}
.block {
padding: 118px 0;
.b-title {
position: relative;
margin-bottom: 50px;
font-size: 50px;
line-height: 59px;
text-align: center;
color: #1F1F1F;
&:after {
content: '';
position: absolute;
top: 70px;
left: 50%;
width: 136px;
height: 4px;
transform: translateX(-50%);
background: #1583FF;
}
}
.intro {
margin-bottom: 80px;
font-size: 30px;
text-align: center;
color: #5B5B5E;
line-height: 40px;
}
.card {
display: flex;
justify-content: space-between;
li {
width: 660px;
}
.texts {
padding-left: 22px;
margin-top: 60px;
border-left: 2px solid #DFE4E9;
}
h6 {
margin-bottom: 25px;
font-size: 24px;
color: #333;
}
.des {
font-size: 18px;
color: #222;
line-height: 30px;
}
.arrow {
cursor: pointer;
}
}
&.news-block {
background: url(../../../assets/images/channel/info-bg.png) 0 0/100% 100% no-repeat;
}
.news {
display: flex;
flex-wrap: wrap;
li {
display: inline-flex;
width: 686px;
padding: 34px;
margin-bottom: 28px;
background-color: #fff;
&:nth-child(odd) {
margin-right: 28px;
}
}
img {
width: 237px;
height: 167px;
}
.texts {
margin-left: 34px;
}
h6 {
font-size: 18px;
color: #0648A8;
}
.des {
margin: 14px 0;
font-size: 16px;
color: #333;
line-height: 22px;
}
.meta {
font-size: 16px;
color: #999;
}
}
.people {
li {
display: flex;
justify-content: space-between;
margin-bottom: 126px;
}
.pic {
width: 660px;
height: 465px;
}
.texts {
width: 680px;
padding-top: 150px;
}
h6 {
font-size: 40px;
}
.des {
font-size: 18px;
color: #020202;
line-height: 30px;
}
}
.glance {
padding-bottom: 50px;
font-size: 45px;
border-bottom: 1px solid #DEDEDE;
}
.stat {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 60px;
li {
width: 30%;
margin-bottom: 50px;
}
.num {
margin-bottom: 10px;
font-size: 60px;
font-weight: 800;
color: #035CE1;
line-height: 49px;
}
.text {
font-size: 24px;
}
}
}
.inner {
width: 1400px;
margin: 0 auto;
}
.about {
padding: 77px 0 198px;
background: url(../../../assets/images/channel/about-bg.png) 0 0/100% 100% no-repeat;
.line {
display: flex;
align-items: center;
margin: 50px 0 30px;
width: 88px;
height: 6px;
background-color: #fff;
&:after {
content: '';
width: 6px;
height: 6px;
}
}
.text {
font-size: 30px;
color: #fff;
}
.des {
padding: 38px 60px;
margin-top: 84px;
font-size: 30px;
color: #fff;
line-height: 42px;
text-align: center;
background: rgba(111, 69, 36, .56);
border-radius: 17px;
}
}
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: rgba(0, 0, 0, .5);
cursor: pointer;
&:hover {
background-color: rgba(0, 0, 0, .7);
}
}
</style>

@ -1,179 +0,0 @@
<template>
<div class="page">
<div class="tool">
<p class="page-name">页面列表</p>
<div style="display: inline-flex;align-items: center;">
<el-dropdown class="setting" trigger="click" :hide-on-click="false">
<img class="icon" src="@/assets/images/setting.png" alt="">
<el-dropdown-menu>
<el-dropdown-item>
<el-button @click="resetColumns" type="text">列重置</el-button>
</el-dropdown-item>
<el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0">
<el-checkbox v-model="column.show">{{ column.name }}</el-checkbox>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="search-wrap">
<el-select v-model="field" @change="initData">
<el-option
v-for="(item, i) in keywords"
:key="i"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-input class="keyword" :placeholder="'请输入' + keywords.find(e => e.id === field).name" v-model.trim="keyword" clearable></el-input>
</div>
</div>
</div>
<el-table ref="table" :data="list" default-expand-all class="table" header-align="center" row-key="id">
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
<el-table-column v-if="settings[0].show" prop="columnName" label="长页栏目名称" align="center"></el-table-column>
<el-table-column v-if="settings[1].show" prop="articleTemplate" label="模板名称" align="center"></el-table-column>
<el-table-column v-if="settings[2].show" prop="columnName" label="上级栏目" align="center">
<template slot-scope="scope">
{{ scope.row.parents }}
</template>
</el-table-column>
<el-table-column v-if="settings[3].show" prop="createTime" label="创建时间" align="center"></el-table-column>
<el-table-column v-if="settings[4].show" prop="updateTime" label="最近编辑" align="center"></el-table-column>
<el-table-column v-if="settings[5].show" prop="editorName" label="编辑人" align="center"></el-table-column>
<el-table-column v-if="settings[6].show" label="操作" width="170" align="center">
<template slot-scope="scope">
<el-button v-auth="'/site/list:' + site.siteName + ':内容管理:页面管理:预览'" type="text" @click="preview(scope.row)">预览</el-button>
<el-button v-auth="'/site/list:' + site.siteName + ':内容管理:页面管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button>
<el-button v-auth="'/site/list:' + site.siteName + ':内容管理:页面管理:删除'" type="text" @click="start(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Setting from '@/setting'
export default {
data() {
return {
site: this.$store.state.content.site,
field: 'programName',
keywords: [
{
id: 'programName',
name: '栏目名称'
},
{
id: 'templateName',
name: '模板名称'
}
],
keyword: '',
list: [],
originSettings: [],
settings: [
{
name: '长页栏目名称',
show: true
},
{
name: '模板名称',
show: true
},
{
name: '上级栏目',
show: true
},
{
name: '创建日期',
show: true
},
{
name: '最近编辑',
show: true
},
{
name: '编辑人',
show: true
},
{
name: '操作',
show: true
}
]
};
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer)
this.searchTimer = setTimeout(() => {
this.initData()
}, 500)
}
},
mounted() {
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
route: '/site'
},
{
name: '内容管理'
},
{
name: '页面管理'
}
])
this.originSettings = JSON.parse(JSON.stringify(this.settings))
this.getData()
},
methods: {
//
getData() {
this.$post(this.api.longPageColumnList, {
siteId: this.site.id,
pageNum: this.page,
pageSize: this.pageSize,
programName: this.field === 'programName' ? this.keyword : '',
templateName: this.field === 'templateName' ? this.keyword : ''
}).then(({ data }) => {
data.map(e => {
//
e.parents = e.superiorColumn ?
e.superiorColumn.map(n => n.columnName).join(' / ') :
'--'
})
this.list = data
}).catch(err => {})
},
initData() {
this.page = 1
this.getData()
},
//
resetColumns() {
this.settings = JSON.parse(JSON.stringify(this.originSettings))
},
handleCurrentChange(val) {
this.page = val
this.getData()
},
//
preview(row) {
window.open(`http://192.168.31.${Setting.isDev ? 126 : 136}:8095/#/channel?id=` + row.id)
},
edit(row) {
this.$router.push(`add?id=${row.id}`)
}
}
};
</script>
<style lang="scss" scoped>
.el-radio-group {
white-space: nowrap;
}
.el-radio.is-bordered + .el-radio.is-bordered {
margin-left: 0;
}
</style>
Loading…
Cancel
Save