From 84111c4e73fb6e092e8ce0342350d55b7c12a294 Mon Sep 17 00:00:00 2001 From: yinxr <2273460044@qq.com> Date: Sat, 26 Jan 2019 18:52:55 +0800 Subject: [PATCH] Signed-off-by: yinxr <2273460044@qq.com> --- .../WEB-INF/manager/include/head-file.ftl | 4 + .../WEB-INF/manager/mweixin/article/index.ftl | 62 +++++---- .../webapp/WEB-INF/manager/mweixin/menu.ftl | 5 +- .../webapp/WEB-INF/manager/mweixin/weixin.ftl | 1 + src/main/webapp/static/mweixin/article.less | 130 +++++++++++++----- src/main/webapp/static/mweixin/css/app.css | 2 +- .../webapp/static/mweixin/css/article.css | 83 ++++++++++- 7 files changed, 220 insertions(+), 67 deletions(-) diff --git a/src/main/webapp/WEB-INF/manager/include/head-file.ftl b/src/main/webapp/WEB-INF/manager/include/head-file.ftl index ab4b1116..2d3a7a5a 100644 --- a/src/main/webapp/WEB-INF/manager/include/head-file.ftl +++ b/src/main/webapp/WEB-INF/manager/include/head-file.ftl @@ -24,6 +24,10 @@ + + + + diff --git a/src/main/webapp/WEB-INF/manager/mweixin/article/index.ftl b/src/main/webapp/WEB-INF/manager/mweixin/article/index.ftl index e0f16900..73023cb7 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/article/index.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/article/index.ftl @@ -1,16 +1,6 @@ - - - - - - - - - - -
+
@@ -30,23 +20,33 @@
- + - + + 添加封面 - - - + + + - - + + - - + + + @@ -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; diff --git a/src/main/webapp/WEB-INF/manager/mweixin/menu.ftl b/src/main/webapp/WEB-INF/manager/mweixin/menu.ftl index 939d7367..920def15 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/menu.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/menu.ftl @@ -52,7 +52,10 @@ }, { title: '关键词回复' }] - }, ], //左侧导航列表 + },{ + title:'新建图文' + } + ], //左侧导航列表 menuActive: '图文', //选中 } }) diff --git a/src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl b/src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl index 3602a7a6..159bf5fa 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl @@ -13,5 +13,6 @@ + \ No newline at end of file diff --git a/src/main/webapp/static/mweixin/article.less b/src/main/webapp/static/mweixin/article.less index c28e07f7..277f0ca6 100644 --- a/src/main/webapp/static/mweixin/article.less +++ b/src/main/webapp/static/mweixin/article.less @@ -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; + 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; + } + } } } } } - // 内容区域 - .el-main{ - flex:1; - background: #fff; - margin-left: 14px; - } } } \ No newline at end of file diff --git a/src/main/webapp/static/mweixin/css/app.css b/src/main/webapp/static/mweixin/css/app.css index 1bbcf495..39f96349 100644 --- a/src/main/webapp/static/mweixin/css/app.css +++ b/src/main/webapp/static/mweixin/css/app.css @@ -22,7 +22,7 @@ html, body { min-height: 100vh; - width: 100%; + width: 100vw; background-color: #eee; margin: 0; display: flex; diff --git a/src/main/webapp/static/mweixin/css/article.css b/src/main/webapp/static/mweixin/css/article.css index a3b7bcf6..9f3b60ad 100644 --- a/src/main/webapp/static/mweixin/css/article.css +++ b/src/main/webapp/static/mweixin/css/article.css @@ -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; }