Signed-off-by: a123456 <1209165801@qq.com>

src/main/webapp/WEB-INF/manager/mweixin/keyword/form.ftl

@@ -1,7 +1,7 @@
 <!-- 关键词回复 -->
 <link rel="stylesheet" href="../../../../static/mweixin/css/keyword-reply.css">
 
-<div id="keyword-reply" class="keyword-reply ms-container" v-if="menuVue.menuActive == '关键词表单'">
+<div id="keyword-reply" class="keyword-reply ms-container ms-content" v-if="menuVue.menuActive == '关键词表单'">
    <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'>

src/main/webapp/WEB-INF/manager/mweixin/keyword/index.ftl

@@ -1,7 +1,7 @@
 <!-- 关键字列表 -->
 <link rel="stylesheet" href="../../../../static/mweixin/css/keyword-list.css">
 
-<div id="keyword-list" class="keyword-list ms-container" v-if="menuVue.menuActive == '关键词回复'">
+<div id="keyword-list" class="keyword-list ms-container ms-content" v-if="menuVue.menuActive == '关键词回复'">
    <el-table :data="tableData" border style="width: 100%">
       <el-table-column prop="date" label="规则名" width="180" align='center'>
       </el-table-column>

src/main/webapp/WEB-INF/manager/mweixin/menu.ftl

@@ -2,11 +2,14 @@
 
 <div id="menu-vue">
    <!--左侧-->
-   <el-container class="am-admin-menu">
+   <el-container class="ms-admin-menu">
       <!--右侧头部-->
-      <el-header height="50px">
-         <div class="ms-admin-menu-title">
-            <i></i> 吕小布微信号
+      <el-header class="ms-header" height="50px">
+         <div>
+            <i class="el-icon-arrow-left"></i>
+            <span>
+               吕小布微信号
+            </span>
          </div>
       </el-header>
       <el-main>
@@ -19,9 +22,7 @@
                   <template slot="title">
                      <span v-text="menu.title"></span>
                   </template>
-                  <el-menu-item-group>
-                     <el-menu-item class="ms-admin-menu-menu-item" @click="menuActive = sub.title" :index="i+'-'+index" v-for="(sub,index) in menu.sub" v-text="sub.title"></el-menu-item>
-                  </el-menu-item-group>
+                  <el-menu-item class="ms-admin-menu-menu-item" @click="menuActive = sub.title" :index="i+'-'+index" v-for="(sub,index) in menu.sub" v-text="sub.title"></el-menu-item>
                </el-submenu>
             </template>
          </el-menu>

src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl

@@ -1,6 +1,6 @@
 <!-- 自定义菜单 -->
 <link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css">
-<div id="custom-menu" class="ms-custom-menu" v-if="menuVue.menuActive == '自定义菜单'">
+<div id="custom-menu" class="ms-custom-menu ms-content" v-if="menuVue.menuActive == '自定义菜单'">
    <el-container class="ms-custom-container">
       <el-aside>
          <el-container>

src/main/webapp/WEB-INF/manager/mweixin/message/index.ftl

@@ -1,6 +1,6 @@
 <!-- 消息回复 && 关注回复 -->
 <link rel="stylesheet" href="../../../../static/mweixin/css/message-reply.css">
-<div id="message-reply" class="ms-message-reply ms-container" v-if="menuVue.menuActive == '消息回复'||menuVue.menuActive == '关注时回复'">
+<div id="message-reply" class="ms-message-reply ms-container ms-content" v-if="menuVue.menuActive == '消息回复'||menuVue.menuActive == '关注时回复'">
    <div>回复内容</div>
    <el-tabs v-model="activeName" @tab-click="" class="message-reply-tabs">
       <el-tab-pane label="文字" name="text">

src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl

@@ -1,19 +1,21 @@
 <!--图文素材页-->
 <link rel="stylesheet" href="../../../static/mweixin/css/material-list.css">
-<div id="material-list-vue" v-if="menuVue.menuActive == '图文'">
+<div id="material-list-vue" v-if="menuVue.menuActive == '图文'" class="ms-content">
    <el-container>
       <!--右侧头部-->
-      <el-header height="50px">
-         <el-row class="ms-fr">
-            <el-button type="success">保存</el-button>
-            <el-button>更新</el-button>
-            <el-button>返回</el-button>
+      <el-header class="ms-header" height="52px">
+         <el-row>
+            <el-button type="primary" size="small">
+               <i class="el-icon-plus"></i>添加</el-button>
+            <el-button class="ms-fr" size="small">
+               <i class="el-icon-refresh"></i>刷新</el-button>
+            <el-button class="ms-fr" size="small">同步微信素材</el-button>
          </el-row>
       </el-header>
       <el-main>
          <!--内容同步-->
          <el-container>
-            <el-header height="50px">
+            <el-header class="ms-tr ms-header">
 
             </el-header>
             <!--素材列表-->

src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl

@@ -13,6 +13,5 @@
       <!--#include virtual="keyword/form.ftl" -->
       <!--#include virtual="menu/index.ftl" -->
       <!--#include virtual="message/index.ftl" -->
-      <!--#include virtual="article/index.ftl" -->
    </body>
 </html>

src/main/webapp/static/ms-admin/4.7.0/less/app.less

@@ -3,6 +3,7 @@
 html,
 body {
     min-height: 100vh;
+    width: 100vw;
     background-color: @backgroundColor;
     margin: 0;
     display: flex;
@@ -63,7 +64,7 @@ textarea::-webkit-input-placeholder {
 
 .ms-container {
     margin: 12px;
-    height: 100%;
+    height: ~'calc(100% - 24px)';
     padding: 14px 14px 0 14px;
     background: #fff;
 }
@@ -91,4 +92,8 @@ textarea::-webkit-input-placeholder {
 
 .el-button+.el-button {
     margin-left: 0
-}
+}
+
+.ms-content{
+    width: ~'calc(100% - 200px)';
+}

src/main/webapp/static/mweixin/css/custom-menu.css

@@ -22,8 +22,10 @@
 html,
 body {
   min-height: 100vh;
+  width: 100vw;
   background-color: #eee;
   margin: 0;
+  display: flex;
   font-weight: initial !important;
   font-size: 14px !important;
   color: #333 !important;
@@ -71,7 +73,7 @@ textarea::-webkit-input-placeholder {
 }
 .ms-container {
   margin: 12px;
-  height: 100%;
+  height: calc(100% - 24px);
   padding: 14px 14px 0 14px;
   background: #fff;
 }
@@ -95,6 +97,9 @@ textarea::-webkit-input-placeholder {
 .el-button + .el-button {
   margin-left: 0;
 }
+.ms-content {
+  width: calc(100% - 200px);
+}
 .ms-custom-menu {
   color: #f2f2f6;
 }

src/main/webapp/static/mweixin/css/keyword-list.css

@@ -22,8 +22,10 @@
 html,
 body {
   min-height: 100vh;
+  width: 100vw;
   background-color: #eee;
   margin: 0;
+  display: flex;
   font-weight: initial !important;
   font-size: 14px !important;
   color: #333 !important;
@@ -71,7 +73,7 @@ textarea::-webkit-input-placeholder {
 }
 .ms-container {
   margin: 12px;
-  height: 100%;
+  height: calc(100% - 24px);
   padding: 14px 14px 0 14px;
   background: #fff;
 }
@@ -95,6 +97,9 @@ textarea::-webkit-input-placeholder {
 .el-button + .el-button {
   margin-left: 0;
 }
+.ms-content {
+  width: calc(100% - 200px);
+}
 .keyword-list {
   padding: 14px;
 }

src/main/webapp/static/mweixin/css/keyword-reply.css

@@ -22,8 +22,10 @@
 html,
 body {
   min-height: 100vh;
+  width: 100vw;
   background-color: #eee;
   margin: 0;
+  display: flex;
   font-weight: initial !important;
   font-size: 14px !important;
   color: #333 !important;
@@ -71,7 +73,7 @@ textarea::-webkit-input-placeholder {
 }
 .ms-container {
   margin: 12px;
-  height: 100%;
+  height: calc(100% - 24px);
   padding: 14px 14px 0 14px;
   background: #fff;
 }
@@ -95,6 +97,9 @@ textarea::-webkit-input-placeholder {
 .el-button + .el-button {
   margin-left: 0;
 }
+.ms-content {
+  width: calc(100% - 200px);
+}
 .keyword-reply {
   padding-bottom: 20px;
 }

src/main/webapp/static/mweixin/css/material-list.css

@@ -22,8 +22,10 @@
 html,
 body {
   min-height: 100vh;
+  width: 100vw;
   background-color: #eee;
   margin: 0;
+  display: flex;
   font-weight: initial !important;
   font-size: 14px !important;
   color: #333 !important;
@@ -71,7 +73,7 @@ textarea::-webkit-input-placeholder {
 }
 .ms-container {
   margin: 12px;
-  height: 100%;
+  height: calc(100% - 24px);
   padding: 14px 14px 0 14px;
   background: #fff;
 }
@@ -95,6 +97,9 @@ textarea::-webkit-input-placeholder {
 .el-button + .el-button {
   margin-left: 0;
 }
+.ms-content {
+  width: calc(100% - 200px);
+}
 .ms-admin-material-list {
   margin: 15px;
   padding: 10px;

src/main/webapp/static/mweixin/css/menu.css

@@ -22,6 +22,7 @@
 html,
 body {
   min-height: 100vh;
+  width: 100vw;
   background-color: #eee;
   margin: 0;
   display: flex;
@@ -72,7 +73,7 @@ textarea::-webkit-input-placeholder {
 }
 .ms-container {
   margin: 12px;
-  height: 100%;
+  height: calc(100% - 24px);
   padding: 14px 14px 0 14px;
   background: #fff;
 }
@@ -96,15 +97,42 @@ textarea::-webkit-input-placeholder {
 .el-button + .el-button {
   margin-left: 0;
 }
-.ms-admin-title {
-  height: 50px;
+.ms-content {
+  width: calc(100% - 200px);
+}
+.ms-admin-menu {
+  min-height: 100vh;
+  min-width: 200px;
+}
+.ms-admin-menu .ms-header {
+  border-right: solid 1px #e6e6e6;
+}
+.ms-admin-menu .ms-header div {
+  height: 100%;
   display: flex;
   align-items: center;
 }
-.ms-admin-menu {
+.ms-admin-menu .ms-header div i {
+  display: inline-block;
+  text-align: center;
+  line-height: 1.4em;
+  width: 1.4em;
+  height: 1.4em;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 1.4em;
+  background: #02CF5D;
+}
+.ms-admin-menu .ms-header div span {
+  margin: auto;
+}
+.ms-admin-menu .el-main {
+  padding: 0;
+}
+.ms-admin-menu .el-main .ms-admin-menu-menu {
   min-height: calc(100vh - 50px);
   background: #fff;
 }
-.ms-admin-menu-item {
+.ms-admin-menu .el-main .ms-admin-menu-menu-item {
   min-width: 100% !important;
 }

src/main/webapp/static/mweixin/css/message-reply.css

@@ -22,8 +22,10 @@
 html,
 body {
   min-height: 100vh;
+  width: 100vw;
   background-color: #eee;
   margin: 0;
+  display: flex;
   font-weight: initial !important;
   font-size: 14px !important;
   color: #333 !important;
@@ -71,7 +73,7 @@ textarea::-webkit-input-placeholder {
 }
 .ms-container {
   margin: 12px;
-  height: 100%;
+  height: calc(100% - 24px);
   padding: 14px 14px 0 14px;
   background: #fff;
 }
@@ -95,6 +97,9 @@ textarea::-webkit-input-placeholder {
 .el-button + .el-button {
   margin-left: 0;
 }
+.ms-content {
+  width: calc(100% - 200px);
+}
 .ms-message-reply {
   display: flex;
   justify-content: flex-start;

src/main/webapp/static/mweixin/keyword-reply.less

@@ -3,15 +3,15 @@
 .keyword-reply {
     padding-bottom:20px;
     .el-select .el-input {
-        width: 90px;
+        width: 90px; 
         >input {
             padding: 0 10px !important;
         }
     }
-    // 关键词
+    // 关键词 
     .ms-keyword-input{
         margin-bottom: 15px !important;
-        // 尾词
+        // 尾词 
         .el-input__suffix{
             line-height: 28px;
         }

src/main/webapp/static/mweixin/material-list.less

@@ -1,5 +1,4 @@
 @import "../ms-admin/4.7.0/less/app.less";
-
 .ms-admin-material-list {
     .ms-margin-padding(15px, 10px);
 }

src/main/webapp/static/mweixin/menu.less

@@ -1,15 +1,35 @@
 @import "../ms-admin/4.7.0/less/app.less";
-.ms-admin-title {
-    height: 50px;
-    display: flex;
-    align-items: center;
-}
-
 .ms-admin-menu {
-    min-height: ~'calc(100vh - 50px)';
-    background: #fff;
-}
-
-.ms-admin-menu-item {
-    min-width: 100% !important;
+    min-height: 100vh;
+    min-width: 200px;
+    .ms-header {
+        border-right: solid 1px #e6e6e6;
+        div {
+            height: 100%;
+            .ms-align-center;
+            i {
+                display: inline-block;
+                text-align: center;
+                line-height: 1.4em;
+                .ms-width-height(1.4em);
+                border-radius: 4px;
+                color: #fff;
+                font-size: 1.4em;
+                background: #02CF5D;
+            }
+            span {
+                margin: auto;
+            }
+        }
+    }
+    .el-main {
+        padding: 0;
+        .ms-admin-menu-menu {
+            min-height: ~'calc(100vh - 50px)';
+            background: #fff;
+        }
+        .ms-admin-menu-menu-item {
+            min-width: 100% !important;
+        }
+    }
 }

src/main/webapp/static/mweixin/message-reply.less

@@ -3,12 +3,12 @@
 .ms-message-reply{
     .ms-flex(flex-start);
     padding:20px;
-    height: 267px;
+    height: 267px; 
     >div:first-child{
         margin-right:10px;
-        line-height: 40px;
+        line-height: 40px; 
     }
-    // 导航切换
+    // 导航切换 
     .message-reply-tabs{
         flex: 1;
         border: 1px solid @borderColor;