From 42fb675a05082914dc857586b11951d5c011e03f Mon Sep 17 00:00:00 2001 From: yinxr <2273460044@qq.com> Date: Tue, 29 Jan 2019 14:07:39 +0800 Subject: [PATCH] Signed-off-by: yinxr <2273460044@qq.com> --- .../WEB-INF/manager/include/head-file.ftl | 1 + .../WEB-INF/manager/mweixin/metarial/form.ftl | 30 +-- .../manager/mweixin/metarial/index.ftl | 182 +++++++++++------- .../webapp/WEB-INF/manager/mweixin/weixin.ftl | 13 +- .../ms-admin/4.7.0/less/base/mixin.less | 73 +++++++ .../ms-admin/4.7.0/less/base/style.less | 63 ++++++ .../static/mweixin/css/material-list.css | 55 +++--- .../webapp/static/mweixin/material-list.less | 102 +++++----- 8 files changed, 363 insertions(+), 156 deletions(-) create mode 100644 src/main/webapp/static/ms-admin/4.7.0/less/base/mixin.less create mode 100644 src/main/webapp/static/ms-admin/4.7.0/less/base/style.less 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 5b69dd92..02b4d0df 100644 --- a/src/main/webapp/WEB-INF/manager/include/head-file.ftl +++ b/src/main/webapp/WEB-INF/manager/include/head-file.ftl @@ -5,6 +5,7 @@ + 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 f56684e6..9fd5716b 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl @@ -13,7 +13,7 @@
- +
@@ -22,7 +22,7 @@

- +
@@ -67,20 +67,10 @@ el: '#article', data: { mainArticle: { - basicPic: 'https://img03.sogoucdn.com/app/a/100520091/20190125112329', //主图 - basicTitle: '国足0-3不敌伊朗被淘汰，赛后还有一个消息', //标题 + basicPic: '', //主图 + basicTitle: '', //标题 }, - // 文章列表 - subArticleList: [{ - basicTitle: '硬核！年会当着老板面唱，“干活的干不过写PPT的……', - basicThumbnailsl: 'https://img01.sogoucdn.com/app/a/100520091/20190125112509' - }, { - basicTitle: '知否知否，党组织犯错，处理有多严?', - basicThumbnailsl: 'https://img01.sogoucdn.com/app/a/100520091/20190125112509' - }, { - basicTitle: '没有奇迹，国足0-3不敌伊朗止步八强!', - basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148' - }], + subArticleList: [],// 子文章列表 titleWordNumber: 64, //图文标题剩余字数 authorWordNumber: 8, //图文作者剩余字数 descWordNumber: 54, //摘要 @@ -93,6 +83,16 @@ } }, methods: { + open:function(material){ + menuVue.menuActive = '新建图文'; + if(material && material.newsId>0){ + // 编辑 + this.subArticleList = material.articleList + }else{ + // 新增 + } + console.log('"material',material); + }, // 添加文章 addArticle: function() { if(this.subArticleList.length > 6) { 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 5082bdd1..048c1496 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl @@ -1,80 +1,116 @@
- - - - - 添加 - 刷新 - 同步微信素材 - - - - - - - - - - - - - - 查询 - - - -
-
- - -
-
- - -

-
-
- - - -
-
- - - + + + + + 添加 + 刷新 + 同步微信素材 + + + + + + + + + + + + + + 查询 + + + +
+
+ + +
+
+ + +

+
+
+ + + +
+
+ + +
\ No newline at end of file diff --git a/src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl b/src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl index 594e13a9..09c4b5bd 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl @@ -18,4 +18,15 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/src/main/webapp/static/ms-admin/4.7.0/less/base/mixin.less b/src/main/webapp/static/ms-admin/4.7.0/less/base/mixin.less new file mode 100644 index 00000000..435404c8 --- /dev/null +++ b/src/main/webapp/static/ms-admin/4.7.0/less/base/mixin.less @@ -0,0 +1,73 @@ +/* +*对常见的多行样式进行了方法封装，方便调用，加快开发效率 +*/ + +// 背景图片地址和大小 +.ms-background(@url) { + background-image: url(@url); + background-repeat: no-repeat; + background-size: 100% 100%; +} + +// 圆角 +.ms-radius(@radius) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + -ms-border-radius: @radius; + -o-border-radius: @radius; + border-radius: @radius; +} + +//宽高 +.ms-width-height(@width, @height: @width) { + width: @width; + height: @height; +} + +//字体大小，颜色 ，字体粗细 +.ms-font(@size, @color , @weight:initial) { + font-weight: @weight; + font-size: @size; + color: @color; +} + +//flex 布局和 子元素 对其方式 +.ms-flex(@type: space-between) { + display: flex; + justify-content: @type; +} + +//行级flex 布局和 子元素 对其方式 +.ms-inline-flex(@type: space-between) { + display: inline-flex; + justify-content: @type; +} + +//多行超文本隐藏 +.ms-ellipsis-clamp(@num) { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: @num; + -webkit-box-orient: vertical; +} + +//行高和高 +.ms-line-height(@num, @value: @num) { + height: @num; + line-height: @value; +} + +//圆角元素 +.ms-radius-size(@radius, @width, @height: @width) { + .ms-width-height(@width, @height); + .ms-radius(@radius); + text-align: center; + line-height: @height; +} + +//边距 +.ms-margin-padding(@margin, @padding: @margin) { + margin: @margin; + padding: @padding; +} \ No newline at end of file diff --git a/src/main/webapp/static/ms-admin/4.7.0/less/base/style.less b/src/main/webapp/static/ms-admin/4.7.0/less/base/style.less new file mode 100644 index 00000000..6e97bb50 --- /dev/null +++ b/src/main/webapp/static/ms-admin/4.7.0/less/base/style.less @@ -0,0 +1,63 @@ +/* +*这里的值严格按照UI设计图标注值来进行设置 +*/ + + +/* +*颜色 +*/ + +//主题颜色 +@themeColor: #0099ff; +//背景颜色 +@backgroundColor: #eee; +//边框颜色 +@borderColor: #e6e6e6; + +/* +*页面的边距 +*/ + +//整体区域内边距大小 +@warpperPadding: 20px; +//整体区域外边距大小 +@warpperMargin: 10px; +//列表内边距大小 +@listPadding: 20px; +//列表外边距大小 +@listMargin: 10px; + +/* +*字体 +*/ + +//标题字体样式 +//一级标题的样式 +@h1: 16px; +//一级标题的样式 +@h2: 14px; +@titleColor: #333; +//内容字体样式 +@contentSize: 14px; +@contentColor: #333; +// 默认字体样式 +@defalutSize: 14px; +@defalutColor: #333; +//辅助性描述样式 +@auxiliarySize: 12px; +@auxiliaryColor: #999; + +/* +*头像 +*/ + +//大头像 +// @bigHead: ; +//中头像 +// @midHead: ; +//小头像 +@smallHead: 24px; + +/* + * 按钮 + */ \ No newline at end of file diff --git a/src/main/webapp/static/mweixin/css/material-list.css b/src/main/webapp/static/mweixin/css/material-list.css index 3054da88..b23ccd6c 100644 --- a/src/main/webapp/static/mweixin/css/material-list.css +++ b/src/main/webapp/static/mweixin/css/material-list.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,13 +68,13 @@ textarea::-webkit-input-placeholder { *::-webkit-scrollbar-thumb { border-radius: 10px; /*滚动条的圆角*/ - background-color: #ddd; + background-color: #e6e6e6; /*滚动条的背景颜色*/ } .ms-container { margin: 12px; height: calc(100% - 24px); - padding: 14px 14px 0 14px; + padding: 14px; background: #fff; } .ms-header { @@ -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 { @@ -123,15 +123,18 @@ textarea::-webkit-input-placeholder { background: #fff; border-color: #0099ff; } -.ms-admin-material-list { +.ms-weixin-content .ms-header > .el-select--small:first-child { + width: 100px !important; +} +.ms-weixin-content .ms-admin-material-list { background: #fff; margin: 12px; padding: 14px; display: flex; flex-wrap: wrap; } -.ms-admin-material-list .ms-admin-material-item { - margin: 0 24px 0 0; +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item { + margin: 0 24px 24px 0; padding: 0 10px; width: 230px; display: flex; @@ -139,60 +142,68 @@ textarea::-webkit-input-placeholder { border: 1px solid #e6e6e6; border-radius: 4px; } -.ms-admin-material-list .ms-admin-material-item .head { +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head { border-bottom: 1px solid #e6e6e6; padding: 10px 0; + display: flex; + justify-content: space-between; + align-items: center; } -.ms-admin-material-list .ms-admin-material-item .head span { - color: #999; +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head span { + color: #333; } -.ms-admin-material-list .ms-admin-material-item .body { +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head .icon-weixin { + font-weight: initial; + font-size: 16px; + color: #9acd32; +} +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body { display: flex; flex-direction: column; line-height: 2em; } -.ms-admin-material-list .ms-admin-material-item .body span { +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; cursor: pointer; } -.ms-admin-material-list .ms-admin-material-item .body span:hover { +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body span:hover { color: #0099ff; background: #fff; border-color: #0099ff; } -.ms-admin-material-list .ms-admin-material-item .body img { +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body img { width: 170px; height: 110px; margin: 0 auto; object-fit: cover; } -.ms-admin-material-list .ms-admin-material-item .body p { +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body p { margin: 0; - color: #999; + color: #333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } -.ms-admin-material-list .ms-admin-material-item .footer { +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer { display: flex; padding: 14px 0; } -.ms-admin-material-list .ms-admin-material-item .footer i { - color: #999; +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer i { + color: #333; margin: auto; cursor: pointer; } -.ms-admin-material-list .ms-admin-material-item .footer i:hover { +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer i:hover { color: #0099ff; background: #fff; border-color: #0099ff; } -.ms-admin-material-list .ms-admin-material-item .footer em { +.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer em { width: 1px; height: 1em; background: #e6e6e6; diff --git a/src/main/webapp/static/mweixin/material-list.less b/src/main/webapp/static/mweixin/material-list.less index bf598068..49b8ebd4 100644 --- a/src/main/webapp/static/mweixin/material-list.less +++ b/src/main/webapp/static/mweixin/material-list.less @@ -1,54 +1,66 @@ @import "../ms-admin/4.7.0/less/app.less"; -.ms-admin-material-list { - background: #fff; - .ms-margin-padding(12px, 14px); - display: flex; - flex-wrap: wrap; - //单个素材 - .ms-admin-material-item { - .ms-margin-padding(0 24px 0 0, 0 10px); - width: 230px; - display: flex; - flex-direction: column; - border: 1px solid #e6e6e6; - border-radius: 4px; - .head { - border-bottom: 1px solid #e6e6e6; - padding: 10px 0; - span { - color: @contentColor; - } +.ms-weixin-content{ + .ms-header{ + >.el-select--small:first-child{ + width: 100px !important; } - .body { + } + .ms-admin-material-list{ + background: #fff; + .ms-margin-padding(12px, 14px); + display: flex; + flex-wrap: wrap; + //单个素材 + .ms-admin-material-item { + .ms-margin-padding(0 24px 24px 0, 0 10px); + width: 230px; display: flex; flex-direction: column; - line-height: 2em; - span { - .ms-ellipsis; - .ms-hover; + border: 1px solid #e6e6e6; + border-radius: 4px; + .head { + border-bottom: 1px solid #e6e6e6; + padding: 10px 0; + .ms-flex(); + align-items: center; + span { + color: @contentColor; + } + .icon-weixin{ + .ms-font(16px,rgb(154, 205, 50)); + } } - img { - .ms-width-height(170px, 110px); - margin: 0 auto; - object-fit: cover; + .body { + display: flex; + flex-direction: column; + line-height: 2em; + span { + .ms-ellipsis; + .ms-hover; + } + img { + .ms-width-height(170px, 110px); + margin: 0 auto; + object-fit: cover; + } + p { + margin: 0; + color: @contentColor; + .ms-ellipsis-clamp(3); + } } - p { - margin: 0; - color: @contentColor; - .ms-ellipsis-clamp(3); - } - } - .footer { - display: flex; - padding: 14px 0; - i { - color: @contentColor; - margin: auto; - .ms-hover; - } - em { - .ms-width-height(1px, 1em); - background: #e6e6e6; + .footer { + display: flex; + padding: 14px 0; + i { + color: @contentColor; + margin: auto; + .ms-hover; + } + em { + .ms-width-height(1px, 1em); + background: #e6e6e6; + } } } }