diff --git a/src/main/webapp/WEB-INF/manager/images/data/article-default.png b/src/main/webapp/WEB-INF/manager/images/data/article-default.png new file mode 100644 index 00000000..86f0f434 Binary files /dev/null and b/src/main/webapp/WEB-INF/manager/images/data/article-default.png differ diff --git a/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl b/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl index 9fd5716b..a8462104 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl @@ -12,9 +12,10 @@ +
- -
+ +
@@ -31,24 +32,38 @@
- - - - 添加封面 + +
+ +
+ + - + - + - + @@ -70,6 +85,7 @@ basicPic: '', //主图 basicTitle: '', //标题 }, + defaultMainArticle:'',//拷贝主图信息 subArticleList: [],// 子文章列表 titleWordNumber: 64, //图文标题剩余字数 authorWordNumber: 8, //图文作者剩余字数 @@ -80,7 +96,19 @@ articleAuthor: '', //作者 basicDescription: '', //摘要 articleContent: '', //正文 - } + }, + defaultArticleForm:'',//拷贝表单值 + thumbnailShow:false,//显示缩略图 + thumbnailUrl:'',//缩略图路径 + headMask:false,//缩略图删除 + }, + watch:{ + articleForm:{ + handler:function(n,o){ + this.mainArticle.basicTitle = n.basicTitle + }, + deep:true, + } }, methods: { open:function(material){ @@ -88,11 +116,37 @@ if(material && material.newsId>0){ // 编辑 this.subArticleList = material.articleList + this.mainArticle = material.newsArticle }else{ // 新增 + console.log('this.defaultArticleForm',this.defaultArticleForm); + this.articleForm = this.defaultArticleForm + this.mainArticle = this.defaultMainArticle } console.log('"material',material); }, + // 图片上传之前的钩子 + beforeBasicPicUpload:function(file){ + var fileType = false; + if(file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'){ + fileType = true; + } + const isLt2M = file.size / 1024 / 1024 < 2; + if (!fileType) { + this.$message.error('文章配图只能是 JPG、JPEG、PNG 格式!'); + } + if (!isLt2M) { + this.$message.error('文章配图大小不能超过 2MB!'); + } + return fileType && isLt2M; + }, + // 图片上传成功函数 + basicPicSuccess:function(url){ + this.thumbnailShow = true + this.thumbnailUrl = ms.web + url + this.mainArticle.basicPic = this.thumbnailUrl + + }, // 添加文章 addArticle: function() { if(this.subArticleList.length > 6) { @@ -108,9 +162,23 @@ basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148' }) }, - // 计算剩余字数 - resetWordNum: function(type) { + delThumbnail:function(){ + }, + // 计算剩余字数 + resetWordNum: function(type,limit) { + var result = event.target.value; + if(type.indexOf('Title') > -1){ + this.titleWordNumber = this.titleWordNumber - result.length + }else{ + this.authorWordNumber = this.authorWordNumber - result.length + } + if(result.length >= limit){ + this.$message.error('超出字数限制，请输入不超过'+limit+'字符'); + this.$nextTick(function(){ + this.articleForm[type] = result.slice(0,limit); + }) + } } }, mounted: function() { @@ -150,6 +218,10 @@ ); }); } + + // 初始化默认值 + this.defaultArticleForm = JSON.parse(JSON.stringify(this.articleForm)) + this.defaultMainArticle = JSON.parse(JSON.stringify(this.mainArticle)) } }) \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl b/src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl index 048c1496..c5657f55 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl @@ -5,7 +5,7 @@ - 添加 + 添加 刷新 同步微信素材 diff --git a/src/main/webapp/static/ms-admin/4.7.0/images/login-bg.jpg b/src/main/webapp/static/ms-admin/4.7.0/images/login-bg.jpg new file mode 100644 index 00000000..57471b8f Binary files /dev/null and b/src/main/webapp/static/ms-admin/4.7.0/images/login-bg.jpg differ diff --git a/src/main/webapp/static/ms-admin/4.7.0/images/login-slogn.png b/src/main/webapp/static/ms-admin/4.7.0/images/login-slogn.png new file mode 100644 index 00000000..0ee38948 Binary files /dev/null and b/src/main/webapp/static/ms-admin/4.7.0/images/login-slogn.png differ diff --git a/src/main/webapp/static/mweixin/article.less b/src/main/webapp/static/mweixin/article.less index 9edee892..e5cf45e6 100644 --- a/src/main/webapp/static/mweixin/article.less +++ b/src/main/webapp/static/mweixin/article.less @@ -5,6 +5,14 @@ width: 100%; background: transparent !important; padding: 0 !important; + .ms-article-mask { + background: #000; + opacity: .2; + .ms-width-height(100%, 146px); + position: absolute; + top: 0; + left: 0; + } .el-container { .ms-container { padding: 0; @@ -21,14 +29,6 @@ img { .ms-width-height(100%, 146px); } - .ms-main-article-mask { - background: #000; - opacity: .2; - .ms-width-height(100%, 146px); - position: absolute; - top: 0; - left: 0; - } span { position: absolute; bottom: 0; @@ -77,6 +77,7 @@ margin-left: 14px; padding: 0 !important; .ms-main-header { + position: relative; background: #fff; .ms-flex(); height: 180px; @@ -102,8 +103,25 @@ i { .ms-font(18px, @auxiliaryColor); } + // 文章缩略图 + .article-thumbnail{ + .ms-width-height(140px); + } + >.ms-article-mask{ + .ms-width-height(140px); + .ms-flex(center); + align-items: center; + left: 21px; + top: 20px; + z-index: 99; + opacity: .6; + >i{ + .ms-font(19px,#fff); + } + } } - } // 表单 + } + // 表单 .el-form { flex: 1; margin: 0 !important; @@ -111,9 +129,12 @@ flex-direction: column; .el-form-item { margin-bottom: 0 !important; - } - .el-input__suffix { - top: -3px !important; + .el-input__suffix { + top: -3px !important; + >input{ + padding-right: 50px !important; + } + } } } } diff --git a/src/main/webapp/static/mweixin/css/article.css b/src/main/webapp/static/mweixin/css/article.css index c5f1d7e6..cd61c2c1 100644 --- a/src/main/webapp/static/mweixin/css/article.css +++ b/src/main/webapp/static/mweixin/css/article.css @@ -50,7 +50,7 @@ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-weight: initial; font-size: 12px; - color: #aaa; + color: #999; resize: none; } *::-webkit-scrollbar { @@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder { *::-webkit-scrollbar-thumb { border-radius: 10px; /*滚动条的圆角*/ - background-color: #ddd; + background-color: #e6e6e6; /*滚动条的背景颜色*/ } .ms-container { @@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder { height: 55px; box-sizing: border-box; padding: 10px 10px 25px 10px; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #e6e6e6; } .ms-weixin-dialog .el-dialog__header .el-dialog__title { font-weight: bold; @@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder { color: #333; } .ms-weixin-dialog .el-dialog__footer { - border-top: 1px solid #ddd; + border-top: 1px solid #e6e6e6; padding: 15px !important; } .ms-hover { @@ -130,6 +130,15 @@ textarea::-webkit-input-placeholder { background: transparent !important; padding: 0 !important; } +.ms-article .ms-article-mask { + background: #000; + opacity: .2; + width: 100%; + height: 146px; + position: absolute; + top: 0; + left: 0; +} .ms-article .el-container .ms-container { padding: 0; background: transparent; @@ -146,15 +155,6 @@ textarea::-webkit-input-placeholder { width: 100%; height: 146px; } -.ms-article .el-container .el-aside .ms-main-article .ms-main-article-mask { - background: #000; - opacity: 0.2; - width: 100%; - height: 146px; - position: absolute; - top: 0; - left: 0; -} .ms-article .el-container .el-aside .ms-main-article span { position: absolute; bottom: 0; @@ -172,7 +172,7 @@ textarea::-webkit-input-placeholder { display: flex; justify-content: space-between; padding: 10px 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #e6e6e6; } .ms-article .el-container .el-aside .ms-article-item p { margin: 0 10px 0 0; @@ -208,7 +208,7 @@ textarea::-webkit-input-placeholder { .ms-article .el-container .el-aside .ms-article-footer .el-button span { font-weight: initial; font-size: 12px; - color: #aaa; + color: #999; } .ms-article .el-container .el-main { flex: 1; @@ -216,6 +216,7 @@ textarea::-webkit-input-placeholder { padding: 0 !important; } .ms-article .el-container .el-main .ms-main-header { + position: relative; background: #fff; display: flex; justify-content: space-between; @@ -223,13 +224,13 @@ textarea::-webkit-input-placeholder { padding: 20px; padding-bottom: 24px; box-sizing: border-box; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #e6e6e6; } .ms-article .el-container .el-main .ms-main-header .ms-pic-upload { width: 140px; height: 140px; border-radius: 4px; - border: 1px dashed #ddd; + border: 1px dashed #e6e6e6; display: flex; justify-content: center; flex-direction: column; @@ -244,13 +245,33 @@ textarea::-webkit-input-placeholder { .ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload span { font-weight: initial; font-size: 12px; - color: #aaa; + 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: #aaa; + color: #999; +} +.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload .article-thumbnail { + width: 140px; + height: 140px; +} +.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload > .ms-article-mask { + width: 140px; + height: 140px; + display: flex; + justify-content: center; + align-items: center; + left: 21px; + top: 20px; + z-index: 99; + opacity: .6; +} +.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload > .ms-article-mask > i { + font-weight: initial; + font-size: 19px; + color: #fff; } .ms-article .el-container .el-main .ms-main-header .el-form { flex: 1; @@ -262,9 +283,12 @@ textarea::-webkit-input-placeholder { .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 { +.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item .el-input__suffix { top: -3px !important; } +.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item .el-input__suffix > input { + padding-right: 50px !important; +} .ms-article .el-container .el-main .ms-main-body { height: calc(100% - 180px); background: #fff; diff --git a/src/main/webapp/static/mweixin/css/material-list.css b/src/main/webapp/static/mweixin/css/material-list.css index b23ccd6c..b3cf5f28 100644 --- a/src/main/webapp/static/mweixin/css/material-list.css +++ b/src/main/webapp/static/mweixin/css/material-list.css @@ -188,6 +188,9 @@ textarea::-webkit-input-placeholder { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; + font-weight: initial; + font-size: 12px; + color: #999; } .ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer { display: flex; diff --git a/src/main/webapp/static/mweixin/material-list.less b/src/main/webapp/static/mweixin/material-list.less index 49b8ebd4..81f41a6b 100644 --- a/src/main/webapp/static/mweixin/material-list.less +++ b/src/main/webapp/static/mweixin/material-list.less @@ -47,6 +47,7 @@ margin: 0; color: @contentColor; .ms-ellipsis-clamp(3); + .ms-font(@auxiliarySize,@auxiliaryColor); } } .footer {