Signed-off-by: yinxr <2273460044@qq.com>
This commit is contained in:
parent
9b306f83f0
commit
84111c4e73
|
@ -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"> -->
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -52,7 +52,10 @@
|
|||
}, {
|
||||
title: '关键词回复'
|
||||
}]
|
||||
}, ], //左侧导航列表
|
||||
},{
|
||||
title:'新建图文'
|
||||
}
|
||||
], //左侧导航列表
|
||||
menuActive: '图文', //选中
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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>
|
|
@ -8,8 +8,7 @@
|
|||
// 侧边
|
||||
.el-aside {
|
||||
padding: 14px;
|
||||
background: #fff;
|
||||
// 主文章
|
||||
background: #fff; // 主文章
|
||||
.ms-main-article {
|
||||
position: relative;
|
||||
img {
|
||||
|
@ -30,8 +29,7 @@
|
|||
color: #fff;
|
||||
.ms-ellipsis-clamp(2);
|
||||
}
|
||||
}
|
||||
// 子文章
|
||||
} // 子文章
|
||||
.ms-article-item {
|
||||
.ms-width-height(100%, 70px);
|
||||
.ms-flex();
|
||||
|
@ -53,25 +51,89 @@
|
|||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// 尾部
|
||||
} // 尾部
|
||||
.ms-article-footer {
|
||||
background: #fff;
|
||||
padding-top: 20px;
|
||||
.el-button {
|
||||
width: 100%;
|
||||
background: rgb(242, 242, 246);
|
||||
i,span{
|
||||
i,
|
||||
span {
|
||||
.ms-font(@auxiliarySize, @auxiliaryColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 内容区域
|
||||
} // 内容区域
|
||||
.el-main {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -22,7 +22,7 @@
|
|||
html,
|
||||
body {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
background-color: #eee;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue