ak
/
msopen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Signed-off-by: yinxr <2273460044@qq.com>

This commit is contained in:
yinxr 2019-01-26 18:52:55 +08:00
parent 9b306f83f0
commit 84111c4e73
7 changed files with 220 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/webapp/WEB-INF/manager/include/head-file.ftl
View File

@ -25,6 +25,10 @@
<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/lang/zh-cn/zh-cn.js"></script>
<!-- 拖拽 -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
<!-- <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/login.css"> -->
<!-- <link rel="stylesheet" href="${base}/static/mweixin/css/custom-menu.css"> -->
<!-- <link rel="stylesheet" href="${base}/static/mweixin/css/message-reply.css"> -->

62
src/main/webapp/WEB-INF/manager/mweixin/article/index.ftl
View File

@ -1,16 +1,6 @@
<!-- 新建图文 -->
<!--#include virtual="../../include/head-file.ftl" -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
<link rel="stylesheet" href="../../../../static/mweixin/css/article.css">
<!--jquery-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.parse.js"></script>
<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/lang/zh-cn/zh-cn.js"></script>
<!-- v-if="menuVue.menuActive == '新建图文'" -->
<div id='article' class="ms-article ms-container">
<div id='article' class="ms-article ms-container" v-if="menuVue.menuActive == '新建图文'">
<el-container>
<el-aside width="280px">
<div class="ms-main-article">
@ -30,23 +20,33 @@
</el-aside>
<el-main>
<div class="ms-main-header">
<el-upload class="ms-pic-uploader" :show-file-list="false">
<el-upload class="ms-pic-upload" :show-file-list="false">
<img v-if="false" :src="false" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<i v-else class="el-icon-picture"></i>
<span>添加封面</span>
</el-upload>
<el-form>
<el-form-item label="标题" prop="name">
<el-input size='mini' placeholder="请输入图文标题">
<el-form label-width='40px'>
<el-form-item label="标题" prop="">
<el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' @input="resetWordNum('title')">
<span slot='suffix' v-text="titleWordNumber+'/64'"></span>
</el-input>
</el-form-item>
<el-form-item label="作者" prop="region">
<el-input size='mini' placeholder="请输入图文作者">
<el-form-item label="作者" prop="">
<el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input="resetWordNum('author')">
<span slot='suffix' v-text="authorWordNumber+'/8'"></span>
</el-input>
</el-form-item>
<el-form-item label="摘要" prop="region">
<el-input size='mini' type='textarea' placeholder="选填，如果不写会默认抓取正文前54个字">
<el-form-item label="摘要" prop="">
<el-input
size='small'
type='textarea'
placeholder="选填，如果不写会默认抓取正文前54个字"
:autosize="{ minRows: 2, maxRows: 2}"
resize='none'
v-model='articleForm.basicDescription'
@input="resetWordNum('desc')"
>
<span slot='suffix' v-text="descWordNumber+'/54'"></span>
</el-input>
</el-form-item>
</el-form>
@ -77,13 +77,15 @@
basicTitle: '没有奇迹，国足0-3不敌伊朗止步八强!',
basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
}],
titleWordNumber: '', //图文标题剩余字数
authorWordNumber: '', //图文作者剩余字数
titleWordNumber: 64, //图文标题剩余字数
authorWordNumber: 8, //图文作者剩余字数
descWordNumber:54,//摘要
editor: null, //富文本实例
},
watch: {
subArticleList: function (n, o) {
console.log('n', n);
articleForm:{
basicTitle:'',//标题
articleAuthor:'',//作者
basicDescription:'', //摘要
articleContent:'', //正文
}
},
methods: {
@ -93,6 +95,10 @@
basicTitle: '新增文章标题',
basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
})
},
// 计算剩余字数
resetWordNum:function(type){
}
},
mounted: function () {
@ -122,8 +128,8 @@
zIndex: 10000,
elementPathEnabled: false,
wordCount: false,
initialFrameWidth: 600,
initialFrameHeight: 240,
initialFrameWidth: '100%',
initialFrameHeight: 500,
});
this.editor.ready(function () {
var a = $("#ueditor_0").contents()[0].activeElement;

5
src/main/webapp/WEB-INF/manager/mweixin/menu.ftl
View File

@ -52,7 +52,10 @@
}, {
title: '关键词回复'
}]
}, ], //左侧导航列表
},{
title:'新建图文'
}
], //左侧导航列表
menuActive: '图文', //选中
}
})

1
src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl
View File

@ -13,5 +13,6 @@
<!--#include virtual="keyword/form.ftl" -->
<!--#include virtual="menu/index.ftl" -->
<!--#include virtual="message/index.ftl" -->
<!--#include virtual="article/index.ftl" -->
</body>
</html>

128
src/main/webapp/static/mweixin/article.less
View File

@ -1,77 +1,139 @@
// 新建图文
@import "../ms-admin/4.7.0/less/app.less";
.ms-article{
.ms-article {
.ms-flex();
width: 100%;
background: transparent !important;
.el-container{
.el-container {
// 侧边
.el-aside{
padding:14px;
background: #fff;
// 主文章
.ms-main-article{
.el-aside {
padding: 14px;
background: #fff; // 主文章
.ms-main-article {
position: relative;
img{
.ms-width-height(100%,146px);
img {
.ms-width-height(100%, 146px);
}
.ms-main-article-mask{
.ms-main-article-mask {
background: #000;
opacity: .2;
.ms-width-height(100%,146px);
.ms-width-height(100%, 146px);
position: absolute;
top: 0;
left: 0;
}
span{
span {
position: absolute;
bottom: 0;
padding: 15px;
color: #fff;
.ms-ellipsis-clamp(2);
}
}
// 子文章
.ms-article-item{
.ms-width-height(100%,70px);
} // 子文章
.ms-article-item {
.ms-width-height(100%, 70px);
.ms-flex();
padding:10px 0;
padding: 10px 0;
border-bottom: 1px solid @borderColor;
p{
p {
margin: 0 10px 0 0;
.ms-flex();
align-items: center;
span{
span {
width: 100%;
display: inline-block;
.ms-ellipsis-clamp(1);
}
}
img{
img {
.ms-width-height(50px);
}
&:hover{
&:hover {
cursor: pointer;
}
}
// 尾部
.ms-article-footer{
} // 尾部
.ms-article-footer {
background: #fff;
padding-top:20px;
.el-button{
padding-top: 20px;
.el-button {
width: 100%;
background: rgb(242, 242, 246);
i,span{
.ms-font(@auxiliarySize,@auxiliaryColor);
i,
span {
.ms-font(@auxiliarySize, @auxiliaryColor);
}
}
}
}
// 内容区域
.el-main{
flex:1;
background: #fff;
} // 内容区域
.el-main {
flex: 1;
margin-left: 14px;
padding: 0 !important;
.ms-main-header {
background: #fff;
.ms-flex();
height: 180px;
padding: 20px;
padding-bottom: 24px;
box-sizing: border-box;
border-bottom: 1px solid @borderColor; // 图片上传
.ms-pic-upload {
.ms-width-height(140px);
border-radius: 4px;
border: 1px dashed @borderColor;
.ms-flex(center);
flex-direction: column;
margin-right: 20px;
.el-upload {
.ms-flex();
flex-direction: column;
align-items: center;
span {
.ms-font(@auxiliarySize, @auxiliaryColor);
margin-top: 4px;
}
i {
.ms-font(18px, @auxiliaryColor);
}
}
} // 表单
.el-form {
flex: 1;
margin: 0 !important;
.ms-flex();
flex-direction: column;
.el-form-item {
margin-bottom: 0 !important;
}
.el-input__suffix {
top: -3px !important;
}
}
}
.ms-main-body {
height: calc(~'100% - 180px');
background: #fff;
.edui-editor {
height: 100%;
.edui-editor-toolbarboxouter {
background-color: none !important;
background-image: none !important;
} // 编辑器样式
.edui-editor {
border: none !important;
.edui-editor-toolbarbox {
box-shadow: none !important;
.edui-editor-toolbarboxouter {
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
}
}
}
}
}
}
}

2
src/main/webapp/static/mweixin/css/app.css
View File

@ -22,7 +22,7 @@
html,
body {
min-height: 100vh;
width: 100%;
width: 100vw;
background-color: #eee;
margin: 0;
display: flex;

83
src/main/webapp/static/mweixin/css/article.css
View File

@ -22,7 +22,7 @@
html,
body {
min-height: 100vh;
width: 100%;
width: 100vw;
background-color: #eee;
margin: 0;
display: flex;
@ -73,7 +73,7 @@ textarea::-webkit-input-placeholder {
}
.ms-container {
margin: 12px;
height: 100%;
height: calc(100% - 24px);
padding: 14px 14px 0 14px;
background: #fff;
}
@ -97,6 +97,9 @@ textarea::-webkit-input-placeholder {
.el-button + .el-button {
margin-left: 0;
}
.ms-weixin-content {
width: calc(100% - 140px);
}
.ms-article {
display: flex;
justify-content: space-between;
@ -180,6 +183,80 @@ textarea::-webkit-input-placeholder {
}
.ms-article .el-container .el-main {
flex: 1;
background: #fff;
margin-left: 14px;
padding: 0 !important;
}
.ms-article .el-container .el-main .ms-main-header {
background: #fff;
display: flex;
justify-content: space-between;
height: 180px;
padding: 20px;
padding-bottom: 24px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
.ms-article .el-container .el-main .ms-main-header .ms-pic-upload {
width: 140px;
height: 140px;
border-radius: 4px;
border: 1px dashed #ddd;
display: flex;
justify-content: center;
flex-direction: column;
margin-right: 20px;
}
.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
}
.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload span {
font-weight: initial;
font-size: 12px;
color: #999;
margin-top: 4px;
}
.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload i {
font-weight: initial;
font-size: 18px;
color: #999;
}
.ms-article .el-container .el-main .ms-main-header .el-form {
flex: 1;
margin: 0 !important;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item {
margin-bottom: 0 !important;
}
.ms-article .el-container .el-main .ms-main-header .el-form .el-input__suffix {
top: -3px !important;
}
.ms-article .el-container .el-main .ms-main-body {
height: calc(100% - 180px);
background: #fff;
}
.ms-article .el-container .el-main .ms-main-body .edui-editor {
height: 100%;
}
.ms-article .el-container .el-main .ms-main-body .edui-editor .edui-editor-toolbarboxouter {
background-color: none !important;
background-image: none !important;
}
.ms-article .el-container .el-main .ms-main-body .edui-editor .edui-editor {
border: none !important;
}
.ms-article .el-container .el-main .ms-main-body .edui-editor .edui-editor .edui-editor-toolbarbox {
box-shadow: none !important;
}
.ms-article .el-container .el-main .ms-main-body .edui-editor .edui-editor .edui-editor-toolbarbox .edui-editor-toolbarboxouter {
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}