From 56dbdd1bd12724f6cec3b1d692e6464b09a955aa Mon Sep 17 00:00:00 2001 From: yinxr <2273460044@qq.com> Date: Fri, 25 Jan 2019 20:34:33 +0800 Subject: [PATCH] Signed-off-by: yinxr <2273460044@qq.com> --- src/main/webapp/WEB-INF/manager/index.ftl | 7 +- src/main/webapp/WEB-INF/manager/login.ftl | 5 +- .../WEB-INF/manager/mweixin/keyword-list.ftl | 59 +++++++++++ .../WEB-INF/manager/mweixin/keyword-reply.ftl | 98 +++++++++++------ .../WEB-INF/manager/mweixin/message-reply.ftl | 3 +- .../static/mweixin/css/keyword-list.css | 100 ++++++++++++++++++ .../static/mweixin/css/keyword-reply.css | 77 +++++++++++++- .../webapp/static/mweixin/keyword-list.less | 5 + .../webapp/static/mweixin/keyword-reply.less | 79 +++++++++++++- 9 files changed, 396 insertions(+), 37 deletions(-) create mode 100644 src/main/webapp/WEB-INF/manager/mweixin/keyword-list.ftl create mode 100644 src/main/webapp/static/mweixin/css/keyword-list.css create mode 100644 src/main/webapp/static/mweixin/keyword-list.less diff --git a/src/main/webapp/WEB-INF/manager/index.ftl b/src/main/webapp/WEB-INF/manager/index.ftl index f0339214..80068e94 100644 --- a/src/main/webapp/WEB-INF/manager/index.ftl +++ b/src/main/webapp/WEB-INF/manager/index.ftl @@ -2,7 +2,12 @@ - <#include "/include/head-file.ftl"/> + + + + + +
diff --git a/src/main/webapp/WEB-INF/manager/login.ftl b/src/main/webapp/WEB-INF/manager/login.ftl index 03f130f2..ed3c347b 100644 --- a/src/main/webapp/WEB-INF/manager/login.ftl +++ b/src/main/webapp/WEB-INF/manager/login.ftl @@ -4,8 +4,9 @@ - + + @@ -26,7 +27,7 @@ -

看不清?换一张

+

看不清?换一张

记住密码 diff --git a/src/main/webapp/WEB-INF/manager/mweixin/keyword-list.ftl b/src/main/webapp/WEB-INF/manager/mweixin/keyword-list.ftl new file mode 100644 index 00000000..86013877 --- /dev/null +++ b/src/main/webapp/WEB-INF/manager/mweixin/keyword-list.ftl @@ -0,0 +1,59 @@ + + + + + + + + + + + + +
+ + + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/manager/mweixin/keyword-reply.ftl b/src/main/webapp/WEB-INF/manager/mweixin/keyword-reply.ftl index 68ec6f2c..f0f8088f 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/keyword-reply.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/keyword-reply.ftl @@ -1,6 +1,7 @@ - + + @@ -11,18 +12,42 @@
- - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -31,23 +56,36 @@ var keywordReplyVue = new Vue({ el: '#keyword-reply', data: { - tableData: [{ - date: '2016-05-02', - name: '王小虎', - address: '上海市普陀区金沙江路 1518 弄' - }, { - date: '2016-05-04', - name: '王小虎', - address: '上海市普陀区金沙江路 1517 弄' - }, { - date: '2016-05-01', - name: '王小虎', - address: '上海市普陀区金沙江路 1519 弄' - }, { - date: '2016-05-03', - name: '王小虎', - address: '上海市普陀区金沙江路 1516 弄' - }] + keywordReplyForm: { + keyword: "",//关键词 + select: '', + reply: "", + }, + keywordReplyFormRules: { + + }, + activeName: 'text', + wordNumber:30,//剩余字数 + }, + methods: { + // 添加关键词 + addKeyWord:function(){ + + }, + // 计算剩余字数 + resetWord: function (value) { + if(!value)return 30; + if (value.length >= 30) { + this.$message.error('任务名称不得超过30个字'); + // 这里涉及到获取数据更新之后的DOM,需要用$nextTick + this.$nextTick(function () { + this.keywordReplyForm.keyword = event.target.value = value.slice(0, 30); + }) + this.wordNumber = 0 + }else{ + this.wordNumber = 30 - value.length + } + } } }) \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/manager/mweixin/message-reply.ftl b/src/main/webapp/WEB-INF/manager/mweixin/message-reply.ftl index d16a41d2..a5b8d055 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/message-reply.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/message-reply.ftl @@ -5,8 +5,9 @@ - + + diff --git a/src/main/webapp/static/mweixin/css/keyword-list.css b/src/main/webapp/static/mweixin/css/keyword-list.css new file mode 100644 index 00000000..fc555ac4 --- /dev/null +++ b/src/main/webapp/static/mweixin/css/keyword-list.css @@ -0,0 +1,100 @@ +/* +*这里的值严格按照UI设计图标注值来进行设置 +*/ +/* +*颜色 +*/ +/* +*页面的边距 +*/ +/* +*字体 +*/ +/* +*头像 +*/ +/* + * 按钮 + */ +/* +*对常见的多行样式进行了方法封装,方便调用,加快开发效率 +*/ +html, +body { + min-height: 100vh; + background-color: #eee; + margin: 0; + font-weight: initial !important; + font-size: 14px !important; + color: #333 !important; +} +html *, +body * { + text-decoration: none !important; + font-family: Verdana, Arial, Helvetica, sans-serif; + box-sizing: border-box; +} +.ms-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} +.ms-align-center { + display: flex; + align-items: center; +} +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + font-weight: initial; + font-size: 12px; + color: #999; + resize: none; +} +*::-webkit-scrollbar { + width: 8px; + height: 8px; +} +/*定义滚动条轨道 内阴影+圆角*/ +*::-webkit-scrollbar-track { + border-radius: 10px; + /*滚动条的背景区域的圆角*/ + background-color: #eee; + /*滚动条的背景颜色*/ +} +/*定义滑块 内阴影+圆角*/ +*::-webkit-scrollbar-thumb { + border-radius: 10px; + /*滚动条的圆角*/ + background-color: #ddd; + /*滚动条的背景颜色*/ +} +.ms-container { + margin: 12px; + height: 100%; + padding: 14px 14px 0 14px; + background: #fff; +} +.ms-header { + padding: 10px; + margin: 0; + border-bottom: 1px solid #ddd; + background: #fff; + height: 50px; +} +.ms-pagination { + padding: 20px 0; + text-align: right; +} +.ms-fr { + float: right; +} +.ms-tr { + text-align: right; +} +.el-button + .el-button { + margin-left: 0; +} +.keyword-list { + padding: 14px; +} diff --git a/src/main/webapp/static/mweixin/css/keyword-reply.css b/src/main/webapp/static/mweixin/css/keyword-reply.css index cca617b4..0499aa40 100644 --- a/src/main/webapp/static/mweixin/css/keyword-reply.css +++ b/src/main/webapp/static/mweixin/css/keyword-reply.css @@ -96,5 +96,80 @@ textarea::-webkit-input-placeholder { margin-left: 0; } .keyword-reply { - padding: 14px; + padding-bottom: 20px; +} +.keyword-reply .el-select .el-input { + width: 90px; +} +.keyword-reply .el-select .el-input > input { + padding: 0 10px !important; +} +.keyword-reply .ms-keyword-input { + margin-bottom: 15px !important; +} +.keyword-reply .ms-keyword-input .el-input__suffix { + line-height: 28px; +} +.keyword-reply .ms-keyword-input .el-icon-plus { + margin-left: 20px; + font-weight: bold; + font-size: 14px; + color: #0099ff; +} +.keyword-reply .ms-keyword-input .el-icon-plus:hover { + cursor: pointer; +} +.keyword-reply .ms-keyword-reply-content { + margin: 0; +} +.keyword-reply .ms-keyword-reply-content .keyword-reply-tabs { + flex: 1; + border: 1px solid #ddd; + border-radius: 4px 4px 0 0 !important; + min-height: 226px; +} +.keyword-reply .ms-keyword-reply-content .keyword-reply-tabs .el-tabs__header { + margin: 0 !important; +} +.keyword-reply .ms-keyword-reply-content .keyword-reply-tabs .el-tabs__header .el-tabs__nav-scroll { + padding: 0 20px; +} +.keyword-reply .ms-keyword-reply-content .el-form-item__content { + position: relative; +} +.keyword-reply .ms-keyword-reply-content .el-form-item__content .el-icon-delete { + position: absolute; + right: 5px; + bottom: 66px; + font-weight: initial; + font-size: 12px; + color: #999; +} +.keyword-reply .ms-keyword-reply-content .el-form-item__content .el-icon-delete:hover { + cursor: pointer; +} +.keyword-reply .ms-keyword-reply-content .el-form-item__content textarea { + height: 127px !important; + border: none !important; + border-bottom: 1px solid #ddd !important; +} +.keyword-reply .ms-keyword-reply-content .el-form-item__content .footer { + height: 58px; + padding: 0 14px; + display: flex; + justify-content: flex-start; + align-items: center; +} +.keyword-reply .ms-keyword-reply-content .el-form-item__content .footer i { + margin-right: 12px; + font-size: 16px; +} +.keyword-reply .ms-keyword-reply-content .el-form-item__content .footer a { + font-weight: initial; + font-size: 14px; + color: #0099ff; +} +.keyword-reply .ms-keyword-reply-content .el-form-item__content .footer i:hover, +.keyword-reply .ms-keyword-reply-content .el-form-item__content .footer a:hover { + cursor: pointer; } diff --git a/src/main/webapp/static/mweixin/keyword-list.less b/src/main/webapp/static/mweixin/keyword-list.less new file mode 100644 index 00000000..f4ff5d44 --- /dev/null +++ b/src/main/webapp/static/mweixin/keyword-list.less @@ -0,0 +1,5 @@ +@import "../ms-admin/4.7.0/less/app.less"; +// 关键字列表 +.keyword-list{ + padding:14px; +} \ No newline at end of file diff --git a/src/main/webapp/static/mweixin/keyword-reply.less b/src/main/webapp/static/mweixin/keyword-reply.less index 2bbcfdfd..8a3b4a33 100644 --- a/src/main/webapp/static/mweixin/keyword-reply.less +++ b/src/main/webapp/static/mweixin/keyword-reply.less @@ -1,5 +1,80 @@ @import "../ms-admin/4.7.0/less/app.less"; // 关键字回复 -.keyword-reply{ - padding:14px; +.keyword-reply { + padding-bottom:20px; + .el-select .el-input { + width: 90px; + >input { + padding: 0 10px !important; + } + } + // 关键词 + .ms-keyword-input{ + margin-bottom: 15px !important; + // 尾词 + .el-input__suffix{ + line-height: 28px; + } + // 添加 + .el-icon-plus{ + margin-left:20px; + .ms-font(@defalutSize,@themeColor,bold); + &:hover{ + cursor: pointer; + } + } + } + // 回复内容 + .ms-keyword-reply-content { + margin: 0; + .keyword-reply-tabs { + flex: 1; + border: 1px solid @borderColor; + border-radius: 4px 4px 0 0 !important; + min-height: 226px; + .el-tabs__header { + // background: #f2f2f6; + margin: 0 !important; + .el-tabs__nav-scroll { + padding: 0 20px; + } + } + } + .el-form-item__content { + position: relative; + .el-icon-delete { + position: absolute; + right: 5px; + bottom: 66px; + .ms-font(@auxiliarySize, @auxiliaryColor); + &:hover { + cursor: pointer; + } + } + textarea { + height: 127px !important; + border: none !important; + border-bottom: 1px solid @borderColor !important; + } + .footer { + height: 58px; + padding: 0 14px; + .ms-flex(flex-start); + align-items: center; + i { + margin-right: 12px; + font-size: 16px; + } + a { + .ms-font(@defalutSize, @themeColor); + } + i, + a { + &:hover { + cursor: pointer; + } + } + } + } + } } \ No newline at end of file