Преглед изворни кода

Signed-off-by: yinxr <2273460044@qq.com>

yinxr пре 6 година
родитељ
комит
12cabb5d54

+ 2 - 0
src/main/webapp/WEB-INF/manager/include/head-file.ftl

@@ -19,9 +19,11 @@
     
     <!-- <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/login.css"> -->
     <!-- <link rel="stylesheet" href="${base}/static/mweixin/css/custom-menu.css"> -->
+    <!-- <link rel="stylesheet" href="${base}/static/mweixin/css/message-reply.css"> -->
 
     <link rel="stylesheet" href="../../../static/ms-admin/4.7.0/css/login.css">
     <link rel="stylesheet" href="../../../static/mweixin/css/custom-menu.css">
+    <link rel="stylesheet" href="../../../static/mweixin/css/message-reply.css">
     <script>
         // ms.base = "${base}";
         // ms.manager = "${managerPath}";

+ 73 - 0
src/main/webapp/WEB-INF/manager/mweixin/message-reply.ftl

@@ -0,0 +1,73 @@
+<!-- 消息回复 && 关注回复 -->
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+    <title></title>
+    <!-- <#include "/include/head-file.ftl"/> -->
+    <!--#include virtual="../include/head-file.ftl" -->
+</head>
+
+<body>
+    <div id="message-reply" class="ms-message-reply ms-container">
+        <div>回复内容</div>
+        <el-tabs v-model="activeName" @tab-click="" class="message-reply-tabs">
+            <el-tab-pane label="文字" name="text">
+                <el-form ref="messageReplyForm" :rules='messageReplyFormRules' :model="messageReplyForm">
+                    <el-form-item class="ms-message-reply-content">
+                        <el-input 
+                            type="textarea" 
+                            placeholder="请输入内容" 
+                            v-model="messageReplyForm.reply"
+                            :autosize="{ minRows: 4, maxRows: 4}"
+                            resize='none'
+                            >
+                        </el-input>
+                        <i class="el-icon-delete"></i>
+                        <div>
+                            <i class="el-icon-star-off"></i>
+                            <a>插入超链接</a>
+                        </div>
+                    </el-form-item>
+                </el-form>
+                </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="图片" name="picture">
+            </el-tab-pane>
+            <el-tab-pane label="图文" name="article">
+            </el-tab-pane>
+        </el-tabs>
+
+    </div>
+</body>
+
+</html>
+<script>
+    var messageReplyVue = new Vue({
+        el: "#message-reply",
+        data: {
+            messageReplyForm: {
+                reply: '',
+            },
+            messageReplyFormRules: {
+                name: [{
+                        required: true,
+                        message: '请输入菜单名称',
+                        trigger: ['blur', 'change']
+                    },
+                    {
+                        min: 1,
+                        max: 5,
+                        message: '长度在 1 到 5 个字符',
+                        trigger: ['blur', 'change']
+                    }
+                ],
+            },
+            activeName: 'text',
+        },
+        methods: {
+
+        }
+
+    })
+</script>

+ 135 - 0
src/main/webapp/static/mweixin/css/message-reply.css

@@ -0,0 +1,135 @@
+/*
+*这里的值严格按照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;
+}
+.ms-message-reply {
+  display: flex;
+  justify-content: flex-start;
+  padding: 20px;
+}
+.ms-message-reply > div:first-child {
+  margin-right: 10px;
+  line-height: 40px;
+}
+.ms-message-reply .message-reply-tabs {
+  flex: 1;
+}
+.ms-message-reply .message-reply-tabs .el-tabs {
+  border: 1px solid #ddd;
+}
+.ms-message-reply .message-reply-tabs .el-tabs .el-tabs__header {
+  background: #f2f2f6;
+  border-radius: 4px 4px 0 0 !important;
+  margin: 0 !important;
+}
+.ms-message-reply .message-reply-tabs .el-tabs .el-tabs__header .el-tabs__nav-scroll {
+  padding: 0 20px;
+}
+.ms-message-reply .message-reply-tabs .el-tabs .el-tab-pane {
+  padding: 20px;
+  width: 100%;
+  height: 220px;
+  display: flex;
+  justify-content: space-between;
+}
+.ms-message-reply .message-reply-tabs .el-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content {
+  position: relative;
+}
+.ms-message-reply .message-reply-tabs .el-tabs .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content > .el-icon-delete {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+}

+ 43 - 0
src/main/webapp/static/mweixin/message-reply.less

@@ -0,0 +1,43 @@
+@import "../ms-admin/4.7.0/less/app.less";
+// 消息回复 && 关注回复
+.ms-message-reply{
+    .ms-flex(flex-start);
+    padding:20px;
+    >div:first-child{
+        margin-right:10px;
+        line-height: 40px;
+    }
+    // 导航切换
+    .message-reply-tabs{
+        flex: 1;
+        .el-tabs{
+            border: 1px solid @borderColor;
+            .el-tabs__header{
+                background: #f2f2f6;
+                border-radius:4px 4px 0 0 !important;
+                margin: 0 !important;
+                .el-tabs__nav-scroll{
+                    padding: 0 20px;
+                }
+            }
+            .el-tab-pane{
+                padding: 20px;
+                .ms-width-height(100%,220px);
+                .ms-flex();
+                >.el-form{
+                    .ms-message-reply-content{
+                        .el-form-item__content{
+                            position: relative;
+                            >.el-icon-delete{
+                                position: absolute;
+                                right: 5px;
+                                bottom: 5px;
+                            }
+                        }
+                        
+                    }
+                }
+            }
+        }
+    }
+}