Signed-off-by: yinxr <2273460044@qq.com>
This commit is contained in:
parent
db5d47bafe
commit
56dbdd1bd1
|
@ -2,7 +2,12 @@
|
|||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<#include "/include/head-file.ftl"/>
|
||||
<!-- <#include "/include/head-file.ftl"/> -->
|
||||
<!-- <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/index.css"> -->
|
||||
|
||||
<!--#include virtual="include/head-file.ftl" -->
|
||||
<link rel="stylesheet" href="../../../static/ms-admin/4.7.0/css/index.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
|
|
@ -4,8 +4,9 @@
|
|||
<head>
|
||||
<title></title>
|
||||
<!-- <#include "/include/head-file.ftl"/> -->
|
||||
<!--#include virtual="include/head-file.ftl" -->
|
||||
<!-- <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/login.css"> -->
|
||||
|
||||
<!--#include virtual="include/head-file.ftl" -->
|
||||
<link rel="stylesheet" href="../../../static/ms-admin/4.7.0/css/login.css">
|
||||
</head>
|
||||
|
||||
|
@ -26,7 +27,7 @@
|
|||
<el-form-item prop="code" class="ms-admin-form-item ms-admin-form-item-code">
|
||||
<el-input type="text" placeholder='验证码' v-model="loginForm.rand_code" autocomplete="off"></el-input>
|
||||
<img :src="code" class="code-img" @click="code" />
|
||||
<p><span>看不清?</span><span>换一张</span></p>
|
||||
<p><span>看不清?</span><span @click="code">换一张</span></p>
|
||||
</el-form-item>
|
||||
<el-form-item class="ms-admin-form-item ms-admin-form-item-checkout">
|
||||
<el-checkbox v-model="rememberPass">记住密码</el-checkbox>
|
||||
|
|
|
@ -0,0 +1,59 @@
|
|||
<!-- 关键字列表 -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- <#include "/include/head-file.ftl"/> -->
|
||||
<!--#include virtual="../include/head-file.ftl" -->
|
||||
<link rel="stylesheet" href="../../../static/mweixin/css/keyword-list.css">
|
||||
<!-- <link rel="stylesheet" href="${base}/static/mweixin/css/keyword-list.css"> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="keyword-list" class="keyword-list ms-container">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="date" label="规则名" width="180" align='center'>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="关键词" width="180" align='center'>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="消息回复类型" align='center'>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="发送对象" align='center'>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="回复方式" align='center'>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script>
|
||||
var keywordListVue = new Vue({
|
||||
el: '#keyword-list',
|
||||
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 弄'
|
||||
}]
|
||||
},
|
||||
methods:{
|
||||
// 获取关键词列表
|
||||
list:function(){
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
|
@ -1,6 +1,7 @@
|
|||
<!-- 关键字回复 -->
|
||||
<!-- 关键词回复 -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- <#include "/include/head-file.ftl"/> -->
|
||||
|
@ -11,18 +12,42 @@
|
|||
|
||||
<body>
|
||||
<div id="keyword-reply" class="keyword-reply ms-container">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="date" label="规则名" width="180" align='center'>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="关键词" width="180" align='center'>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="消息回复类型" align='center'>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="发送对象" align='center'>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="回复方式" align='center'>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-form :model="keywordReplyForm" status-icon :rules="keywordReplyFormRules" ref="keywordReplyForm"
|
||||
label-width="100px">
|
||||
<el-form-item label="关键词" prop="keyword" class="ms-keyword-input">
|
||||
<el-row type='flex' justify='space-between' align='center'>
|
||||
<el-col :span='12'>
|
||||
<el-input placeholder="请输入内容" v-model="keywordReplyForm.keyword" class="input-with-select" size='mini'
|
||||
maxlength='30' @input='resetWord'>
|
||||
<el-select v-model="keywordReplyForm.select" slot="prepend" placeholder="请选择">
|
||||
<el-option label="模糊匹配" value="1"></el-option>
|
||||
<el-option label="全匹配" value="2"></el-option>
|
||||
</el-select>
|
||||
<span slot='suffix' v-text="wordNumber+'/30'"></span>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col><i class="el-icon-plus" @click='addKeyWord'></i></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item class="ms-keyword-reply-content" label="回复内容">
|
||||
<el-tabs v-model="activeName" @tab-click="" class="keyword-reply-tabs">
|
||||
<el-tab-pane label="文字" name="text">
|
||||
<el-input type="textarea" v-model="keywordReplyForm.reply" :autosize="{ minRows: 4, maxRows: 4}"
|
||||
resize='none'>
|
||||
</el-input>
|
||||
<i class="el-icon-delete" @click="keywordReplyForm.reply = ''"></i>
|
||||
<div class="footer">
|
||||
<i class="el-icon-star-off"></i>
|
||||
<a>插入超链接</a>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图片" name="picture">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图文" name="article">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
|
@ -5,8 +5,9 @@
|
|||
<head>
|
||||
<title></title>
|
||||
<!-- <#include "/include/head-file.ftl"/> -->
|
||||
<!--#include virtual="../include/head-file.ftl" -->
|
||||
<!-- <link rel="stylesheet" href="${base}/static/mweixin/css/message-reply.css"> -->
|
||||
|
||||
<!--#include virtual="../include/head-file.ftl" -->
|
||||
<link rel="stylesheet" href="../../../static/mweixin/css/message-reply.css">
|
||||
|
||||
</head>
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
@import "../ms-admin/4.7.0/less/app.less";
|
||||
// 关键字列表
|
||||
.keyword-list{
|
||||
padding:14px;
|
||||
}
|
|
@ -1,5 +1,80 @@
|
|||
@import "../ms-admin/4.7.0/less/app.less";
|
||||
// 关键字回复
|
||||
.keyword-reply {
|
||||
padding:14px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue