Signed-off-by: yinxr 插入超链接交互
This commit is contained in:
parent
a40c4fb02e
commit
8cb9e90ae7
|
@ -1,94 +1,102 @@
|
||||||
<!-- 自定义菜单 -->
|
<!-- 自定义菜单 -->
|
||||||
<link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css">
|
<link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css">
|
||||||
<div id="custom-menu" class="ms-custom-menu ms-weixin-content" v-if="menuVue.menuActive == '自定义菜单'">
|
<div id="custom-menu" class="ms-custom-menu ms-weixin-content" v-if="menuVue.menuActive == '自定义菜单'">
|
||||||
<el-container class="ms-custom-container">
|
<el-container class="ms-custom-container">
|
||||||
<el-header class="ms-header" height="50px">
|
<el-header class="ms-header" height="50px">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-button type="danger" size="small" icon="el-icon-delet">删除</el-button>
|
<el-button type="danger" size="small" icon="el-icon-delet">删除</el-button>
|
||||||
<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
|
<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
|
||||||
<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
|
<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-container class="ms-container">
|
<el-container class="ms-container">
|
||||||
<el-aside>
|
<el-aside>
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header>公众号</el-header>
|
<el-header>公众号</el-header>
|
||||||
<el-main></el-main>
|
<el-main></el-main>
|
||||||
<el-footer>
|
<el-footer>
|
||||||
<el-button icon="el-icon-date"></el-button>
|
<el-button icon="el-icon-date"></el-button>
|
||||||
<div class="ms-create-menu">
|
<div class="ms-create-menu">
|
||||||
<div class="ms-create-sub-menu">
|
<div class="ms-create-sub-menu">
|
||||||
<el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
|
<el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
|
||||||
<el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
|
<el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
|
||||||
</div>
|
</div>
|
||||||
<el-button icon="el-icon-plus"></el-button>
|
<el-button icon="el-icon-plus"></el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-footer>
|
</el-footer>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-aside>
|
</el-aside>
|
||||||
<el-main>
|
<el-main>
|
||||||
<el-card class="custom-menu-card" shadow="never">
|
<el-card class="custom-menu-card" shadow="never">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>新建菜单</span>
|
<span>新建菜单</span>
|
||||||
</div>
|
</div>
|
||||||
<el-form ref="customMenuForm" :rule='customMenuFormRules' :model="customMenuForm" label-width="80px">
|
<el-form ref="customMenuForm" :rule='customMenuFormRules' :model="customMenuForm" label-width="80px">
|
||||||
<el-form-item label="菜单名称" prop='name' class="ms-custom-menu-name">
|
<el-form-item label="菜单名称" prop='name' class="ms-custom-menu-name">
|
||||||
<el-input v-model="customMenuForm.name" size='mini'></el-input>
|
<el-input v-model="customMenuForm.name" size='mini'></el-input>
|
||||||
<span>菜单名称字数不多于5个汉字或10个字母</span>
|
<span>菜单名称字数不多于5个汉字或10个字母</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="菜单内容" class="ms-custom-menu-content">
|
<el-form-item label="菜单内容" class="ms-custom-menu-content">
|
||||||
<el-tabs v-model="activeName" @tab-click="">
|
<el-tabs v-model="activeName" @tab-click="">
|
||||||
<el-tab-pane label="图片" name="picture">
|
<el-tab-pane label="图片" name="picture">
|
||||||
<span slot="label">
|
<span slot="label">
|
||||||
<i class="el-icon-picture"></i>图片</span>
|
<i class="el-icon-picture"></i>图片</span>
|
||||||
<div onclick="materialBankFormVue.open()">
|
<div onclick="materialBankFormVue.open()">
|
||||||
<i class="el-icon-picture-outline"></i>
|
<i class="el-icon-picture-outline"></i>
|
||||||
<span>从素材库选择</span>
|
<span>从素材库选择</span>
|
||||||
</div>
|
</div>
|
||||||
<div onclick="newPicFormVue.open()">
|
<div onclick="newPicFormVue.open()">
|
||||||
<i class="el-icon-plus"></i>
|
<i class="el-icon-plus"></i>
|
||||||
<span>新建图片</span>
|
<span>新建图片</span>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="图文管理" name="article">
|
<el-tab-pane label="图文管理" name="article">
|
||||||
<span slot="label">
|
<span slot="label">
|
||||||
<i class="el-icon-picture"></i>图文管理</span>
|
<i class="el-icon-picture"></i>图文管理</span>
|
||||||
</el-tab-pane>
|
<div onclick="materialBankFormVue.open()">
|
||||||
</el-tabs>
|
<i class="el-icon-picture-outline"></i>
|
||||||
</el-form-item>
|
<span>从素材库选择</span>
|
||||||
</el-form>
|
</div>
|
||||||
</el-card>
|
<div onclick="newPicFormVue.open()">
|
||||||
</el-main>
|
<i class="el-icon-plus"></i>
|
||||||
</el-container>
|
<span>新建图文</span>
|
||||||
</el-container>
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
var customMenuVue = new Vue({
|
var customMenuVue = new Vue({
|
||||||
el: "#custom-menu",
|
el: "#custom-menu",
|
||||||
data: {
|
data: {
|
||||||
customMenuForm: {
|
customMenuForm: {
|
||||||
name: '',
|
name: '',
|
||||||
},
|
},
|
||||||
customMenuFormRules: {
|
customMenuFormRules: {
|
||||||
name: [{
|
name: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入菜单名称',
|
message: '请输入菜单名称',
|
||||||
trigger: ['blur', 'change']
|
trigger: ['blur', 'change']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
min: 1,
|
min: 1,
|
||||||
max: 5,
|
max: 5,
|
||||||
message: '长度在 1 到 5 个字符',
|
message: '长度在 1 到 5 个字符',
|
||||||
trigger: ['blur', 'change']
|
trigger: ['blur', 'change']
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
addSubMenuShow: false, //子菜单添加弹窗
|
addSubMenuShow: false, //子菜单添加弹窗
|
||||||
activeName: 'picture'
|
activeName: 'picture'
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
|
@ -1,70 +1,152 @@
|
||||||
<!-- 消息回复 && 关注回复 -->
|
<!-- 消息回复 && 关注回复 -->
|
||||||
<link rel="stylesheet" href="../../../../static/mweixin/css/message-reply.css">
|
<link rel="stylesheet" href="../../../../static/mweixin/css/message-reply.css">
|
||||||
<div id="message-reply" class="ms-message-reply ms-weixin-content" v-if="menuVue.menuActive == '消息回复'||menuVue.menuActive == '关注时回复'">
|
<div id="message-reply" class="ms-message-reply ms-weixin-content" v-if="menuVue.menuActive == '消息回复'||menuVue.menuActive == '关注时回复'">
|
||||||
<el-container class="ms-admin-message-reply">
|
<el-container class="ms-admin-message-reply">
|
||||||
<el-header class="ms-header" height="50px">
|
<el-header class="ms-header" height="50px">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
|
<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
|
||||||
<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
|
<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header class="ms-tr ms-header">
|
<el-header class="ms-tr ms-header">
|
||||||
<el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-search">
|
<el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-search">
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-header>
|
</el-header>
|
||||||
<em-main class="ms-container">
|
<em-main class="ms-container">
|
||||||
<div>回复内容</div>
|
<div>回复内容</div>
|
||||||
<el-tabs v-model="activeName" @tab-click="" class="message-reply-tabs">
|
<el-tabs v-model="activeName" @tab-click="" class="message-reply-tabs">
|
||||||
<el-tab-pane label="文字" name="text">
|
<el-tab-pane label="文字" name="text">
|
||||||
<el-form ref="messageReplyForm" :rules='messageReplyFormRules' :model="messageReplyForm">
|
<el-form ref="messageReplyForm" :rules='messageReplyFormRules' :model="messageReplyForm">
|
||||||
<el-form-item class="ms-message-reply-content">
|
<el-form-item class="ms-message-reply-content">
|
||||||
<el-input type="textarea" v-model="messageReplyForm.reply" :autosize="{ minRows: 4, maxRows: 4}" resize='none'>
|
<el-input type="textarea" v-model="messageReplyForm.reply" :autosize="{ minRows: 4, maxRows: 4}" resize='none'>
|
||||||
</el-input>
|
</el-input>
|
||||||
<i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i>
|
<i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<i class="el-icon-star-off"></i>
|
<i class="el-icon-star-off"></i>
|
||||||
<a>插入超链接</a>
|
<!-- 插入超链接 -->
|
||||||
</div>
|
<el-popover placement="top-start" width="350" trigger="click" v-model='popoverShow'>
|
||||||
</el-form-item>
|
<el-form label-width="81px" :model="hyperlinkForm" ref="hyperlinkForm" :rules='hyperlinkRule'>
|
||||||
</el-form>
|
<el-form-item label="文本内容" prop='text'>
|
||||||
</el-form>
|
<el-input v-model="hyperlinkForm.text" size='mini'></el-input>
|
||||||
</el-tab-pane>
|
</el-form-item>
|
||||||
<el-tab-pane label="图片" name="picture">
|
<el-form-item label="链接地址" prop='link'>
|
||||||
</el-tab-pane>
|
<el-input v-model="hyperlinkForm.link" size='mini'></el-input>
|
||||||
<el-tab-pane label="图文" name="article">
|
</el-form-item>
|
||||||
</el-tab-pane>
|
<el-form-item style="margin:0">
|
||||||
</el-tabs>
|
<el-row type='flex' justify='end'>
|
||||||
</em-main>
|
<el-col span='6'>
|
||||||
</el-container>
|
<el-button type="primary" @click="saveLink" size='mini'>保存</el-button>
|
||||||
</el-container>
|
</el-col>
|
||||||
|
<el-col span='6'>
|
||||||
|
<el-button @click="cancelLink" size='mini'>取消</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<a slot="reference">插入超链接</a>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-form>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="图片" name="picture" class="message-reply-picture">
|
||||||
|
<div onclick="materialBankFormVue.open()">
|
||||||
|
<i class="el-icon-picture-outline"></i>
|
||||||
|
<span>从素材库选择</span>
|
||||||
|
</div>
|
||||||
|
<div onclick="newPicFormVue.open()">
|
||||||
|
<i class="el-icon-plus"></i>
|
||||||
|
<span>新建图片</span>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="图文" name="article" class="message-reply-article">
|
||||||
|
<div onclick="materialBankFormVue.open()">
|
||||||
|
<i class="el-icon-picture-outline"></i>
|
||||||
|
<span>从素材库选择</span>
|
||||||
|
</div>
|
||||||
|
<div onclick="newPicFormVue.open()">
|
||||||
|
<i class="el-icon-plus"></i>
|
||||||
|
<span>新建图文</span>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</em-main>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
var messageReplyVue = new Vue({
|
var messageReplyVue = new Vue({
|
||||||
el: "#message-reply",
|
el: "#message-reply",
|
||||||
data: {
|
data: {
|
||||||
messageReplyForm: {
|
messageReplyForm: {
|
||||||
reply: '',
|
reply: '',
|
||||||
},
|
},
|
||||||
messageReplyFormRules: {
|
messageReplyFormRules: {
|
||||||
name: [{
|
name: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入菜单名称',
|
message: '请输入菜单名称',
|
||||||
trigger: ['blur', 'change']
|
trigger: ['blur', 'change']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
min: 1,
|
min: 1,
|
||||||
max: 5,
|
max: 5,
|
||||||
message: '长度在 1 到 5 个字符',
|
message: '长度在 1 到 5 个字符',
|
||||||
trigger: ['blur', 'change']
|
trigger: ['blur', 'change']
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
activeName: 'text',
|
activeName: 'text',
|
||||||
},
|
// 超链接
|
||||||
methods: {
|
hyperlinkForm: {
|
||||||
|
text: "",
|
||||||
|
link: "",
|
||||||
|
},
|
||||||
|
hyperlinkRule: {
|
||||||
|
text: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入超链接显示的文本内容',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
min: 1,
|
||||||
|
max: 50,
|
||||||
|
message: '长度在 1 到 50 个字符',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
link: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入超链接地址',
|
||||||
|
trigger: 'change'
|
||||||
|
}, {
|
||||||
|
validator: function (rule, value, callback) {
|
||||||
|
/^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/.test(value) ?
|
||||||
|
callback() : callback('链接不合法')
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
popoverShow:false,//弹出层显示与否的状态值
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 保存超链接
|
||||||
|
saveLink: function () {
|
||||||
|
var that = this;
|
||||||
|
that.$refs.hyperlinkForm.validate(function (boolean,object) {
|
||||||
|
if(boolean){
|
||||||
|
// 校验成功
|
||||||
|
that.messageReplyForm.reply = that.messageReplyForm.reply + `<a href=${that.hyperlinkForm.link}>${that.hyperlinkForm.text}</a>`
|
||||||
|
that.cancelLink()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 取消超链接
|
||||||
|
cancelLink: function () {
|
||||||
|
this.$refs.hyperlinkForm.resetFields();
|
||||||
|
this.popoverShow = false
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
}
|
})
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
|
@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
|
||||||
textarea::-webkit-input-placeholder {
|
textarea::-webkit-input-placeholder {
|
||||||
font-weight: initial;
|
font-weight: initial;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #aaa;
|
color: #999;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
*::-webkit-scrollbar {
|
*::-webkit-scrollbar {
|
||||||
|
@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
|
||||||
*::-webkit-scrollbar-thumb {
|
*::-webkit-scrollbar-thumb {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
/*滚动条的圆角*/
|
/*滚动条的圆角*/
|
||||||
background-color: #ddd;
|
background-color: #e6e6e6;
|
||||||
/*滚动条的背景颜色*/
|
/*滚动条的背景颜色*/
|
||||||
}
|
}
|
||||||
.ms-container {
|
.ms-container {
|
||||||
|
@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
|
||||||
height: 55px;
|
height: 55px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 10px 10px 25px 10px;
|
padding: 10px 10px 25px 10px;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
|
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
.ms-weixin-dialog .el-dialog__footer {
|
.ms-weixin-dialog .el-dialog__footer {
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #e6e6e6;
|
||||||
padding: 15px !important;
|
padding: 15px !important;
|
||||||
}
|
}
|
||||||
.ms-hover {
|
.ms-hover {
|
||||||
|
@ -125,6 +125,7 @@ textarea::-webkit-input-placeholder {
|
||||||
}
|
}
|
||||||
.ms-admin-message-reply .ms-container {
|
.ms-admin-message-reply .ms-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: 256px;
|
||||||
}
|
}
|
||||||
.ms-admin-message-reply .ms-container .message-reply-tabs {
|
.ms-admin-message-reply .ms-container .message-reply-tabs {
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
|
@ -148,10 +149,11 @@ textarea::-webkit-input-placeholder {
|
||||||
}
|
}
|
||||||
.ms-message-reply .message-reply-tabs .el-tabs__header .el-tabs__nav-scroll {
|
.ms-message-reply .message-reply-tabs .el-tabs__header .el-tabs__nav-scroll {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
.ms-message-reply .message-reply-tabs .el-tabs__content {
|
.ms-message-reply .message-reply-tabs .el-tabs__content {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #e6e6e6;
|
||||||
|
height: calc(100% - 42px);
|
||||||
}
|
}
|
||||||
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane {
|
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
@ -174,7 +176,7 @@ textarea::-webkit-input-placeholder {
|
||||||
bottom: 66px;
|
bottom: 66px;
|
||||||
font-weight: initial;
|
font-weight: initial;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #aaa;
|
color: #999;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .el-icon-delete:hover {
|
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .el-icon-delete:hover {
|
||||||
|
@ -185,7 +187,7 @@ textarea::-webkit-input-placeholder {
|
||||||
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content textarea {
|
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content textarea {
|
||||||
height: 127px !important;
|
height: 127px !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-bottom: 1px solid #ddd !important;
|
border-bottom: 1px solid #e6e6e6 !important;
|
||||||
}
|
}
|
||||||
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer {
|
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer {
|
||||||
height: 58px;
|
height: 58px;
|
||||||
|
@ -213,3 +215,36 @@ textarea::-webkit-input-placeholder {
|
||||||
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer a:hover {
|
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer a:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture,
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article {
|
||||||
|
padding: 20px !important;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div,
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div {
|
||||||
|
flex: 1;
|
||||||
|
border: 1px dashed #e6e6e6;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div i,
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div i {
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #0099ff;
|
||||||
|
}
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div span,
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div span {
|
||||||
|
margin-top: 8px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div:hover,
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div:last-child,
|
||||||
|
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div:last-child {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
.ms-admin-message-reply {
|
.ms-admin-message-reply {
|
||||||
.ms-container {
|
.ms-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: 256px;
|
||||||
.message-reply-tabs {
|
.message-reply-tabs {
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
}
|
}
|
||||||
|
@ -31,10 +32,12 @@
|
||||||
}
|
}
|
||||||
.el-tabs__content {
|
.el-tabs__content {
|
||||||
border: 1px solid @borderColor;
|
border: 1px solid @borderColor;
|
||||||
|
height: calc(~'100% - 42px');
|
||||||
.el-tab-pane {
|
.el-tab-pane {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.ms-flex();
|
.ms-flex();
|
||||||
|
// 文字回复
|
||||||
>.el-form {
|
>.el-form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.ms-message-reply-content {
|
.ms-message-reply-content {
|
||||||
|
@ -53,6 +56,7 @@
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-bottom: 1px solid @borderColor !important;
|
border-bottom: 1px solid @borderColor !important;
|
||||||
}
|
}
|
||||||
|
// 底部插入超链接
|
||||||
.footer {
|
.footer {
|
||||||
height: 58px;
|
height: 58px;
|
||||||
padding: 0 14px;
|
padding: 0 14px;
|
||||||
|
@ -77,6 +81,35 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 图片回复
|
||||||
|
.message-reply-picture,.message-reply-article{
|
||||||
|
padding:20px !important;
|
||||||
|
height: 100%;
|
||||||
|
>div {
|
||||||
|
flex: 1;
|
||||||
|
border: 1px dashed @borderColor;
|
||||||
|
.ms-flex(center);
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
i {
|
||||||
|
.ms-font(20px, @themeColor, bolder);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
margin-top: 8px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>div:last-child {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 图文回复
|
||||||
|
.message-reply-article{
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue