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

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

@@ -1,17 +1,24 @@
 <!-- 新建图文 -->
-<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
+<!--#include virtual="../../include/head-file.ftl" -->
 <script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
+<link rel="stylesheet" href="../../../../static/mweixin/css/article.css">
 <!-- v-if="menuVue.menuActive == '新建图文'" -->
-<div id='article'>
+<div id='article' class="ms-article">
     <el-container>
         <el-aside width="280px">
-            <draggable v-model="myArray" :options="{draggable:'.item'}">
-                <div v-for="element in myArray" :key="element.id" class="item">
-                    {{element.name}}
+            <div class="ms-main-article">
+                <img src='https://img03.sogoucdn.com/app/a/100520091/20190125112329'>
+                <div class="ms-main-article-mask"></div>
+                <span>国足0-3不敌伊朗被淘汰，赛后还有一个消息</span>
+            </div>
+            <draggable v-model="subArticleList" :options="{draggable:'.item'}">
+                <div v-for="(element,index) in subArticleList" :key="index" class="ms-article-item">
+                    <p><span v-text='element.title'></span></p>
+                    <img :src='element.thumbnail'>
                 </div>
-                <button slot="footer" @click="addPeople">Add</button>
             </draggable>
+            <el-button size='mini'>添加图文</el-button>
         </el-aside>
         <el-main>Main</el-main>
     </el-container>
@@ -19,31 +26,37 @@
 <script>
     var articleVue = new Vue({
         el: '#article',
-        data:{
-            myArray:[{
-                name:'染发个人',
-                id:'001100'
-            },{
-                name:'个问题grew',
-                id:'001100'
-            },{
-                name:'跟他玩过任务',
-                id:'001100'
-            },{
-                name:'供热外国人',
-                id:'001100'
-            },{
-                name:'天文台认为',
-                id:'001100'
+        data: {
+            // 文章列表
+            subArticleList: [{
+                title: '硬核！年会当着老板面唱，“干活的干不过写PPT的……',
+                desc: '001100',
+                thumbnail:'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
+            }, {
+                title: '个问题grew',
+                desc: '001100',
+                thumbnail:'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
+            }, {
+                title: '跟他玩过任务',
+                desc: '001100',
+                thumbnail:'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
+            }, {
+                title: '供热外国人',
+                desc: '001100',
+                thumbnail:'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
+            }, {
+                title: '天文台认为',
+                desc: '001100',
+                thumbnail:'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
             }]
         },
-        watch:{
-            myArray:function(n,o){
-                console.log('n',n);
+        watch: {
+            subArticleList: function (n, o) {
+                console.log('n', n);
             }
         },
-        methods:{
-            addPeople:function(){
+        methods: {
+            addPeople: function () {
 
             }
         }

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

@@ -0,0 +1,52 @@
+// 新建图文
+@import "../ms-admin/4.7.0/less/app.less";
+.ms-article{
+    .el-container{
+        // 侧边
+        .el-aside{
+            padding:14px;
+            // 主文章
+            .ms-main-article{
+                position: relative;
+                img{
+                    .ms-width-height(100%,146px);
+                }
+                .ms-main-article-mask{
+                    background: #000;
+                    opacity: .2;
+                    .ms-width-height(100%,146px);
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                }
+                span{
+                    position: absolute;
+                    bottom: 0;
+                    padding: 15px;
+                    color: #fff;
+                    .ms-ellipsis-clamp(2);
+                }
+            }
+            // 子文章
+            .ms-article-item{
+                .ms-width-height(100%,70px);
+                .ms-flex();
+                padding:10px 0;
+                border-bottom: 1px solid @borderColor;
+                p{
+                    margin: 0 10px 0 0;
+                    .ms-flex();
+                    align-items: center;
+                    span{
+                        width: 100%;
+                        display: inline-block;
+                        .ms-ellipsis-clamp(1);
+                    }
+                }
+                img{
+                    .ms-width-height(50px);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,154 @@
+/*
+*这里的值严格按照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-article .el-container .el-aside {
+  padding: 14px;
+}
+.ms-article .el-container .el-aside .ms-main-article {
+  position: relative;
+}
+.ms-article .el-container .el-aside .ms-main-article img {
+  width: 100%;
+  height: 146px;
+}
+.ms-article .el-container .el-aside .ms-main-article .ms-main-article-mask {
+  background: #000;
+  opacity: .2;
+  width: 100%;
+  height: 146px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.ms-article .el-container .el-aside .ms-main-article span {
+  position: absolute;
+  bottom: 0;
+  padding: 15px;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.ms-article .el-container .el-aside .ms-article-item {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid #ddd;
+}
+.ms-article .el-container .el-aside .ms-article-item p {
+  margin: 0 10px 0 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ms-article .el-container .el-aside .ms-article-item p span {
+  width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.ms-article .el-container .el-aside .ms-article-item img {
+  width: 50px;
+  height: 50px;
+}