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

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

@@ -28,6 +28,9 @@
     <!-- <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"> -->
+    
+    <!--图片懒加载-->
+		<script src="https://cdn.bootcss.com/vue-lazyload/1.2.6/vue-lazyload.js"></script>
 
     <link rel="stylesheet" href="../../../static/ms-admin/4.7.0/css/login.css">
     <link rel="stylesheet" href="../../../static/mweixin/css/custom-menu.css">
@@ -38,4 +41,9 @@
 
         ms.base = "http://192.168.0.54:82";
         ms.manager = "http://192.168.0.54:82/apis";
+        //图片懒加载
+			  Vue.use(VueLazyload, {
+			    error: ms.base + '/images/ic_image_deault.png',
+			    loading: ms.base + '/images/ic_image_deault.png',
+			  })
     </script>

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

@@ -24,20 +24,20 @@
             <el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
          </el-header>
          <!--素材列表-->
-         <el-main class="ms-admin-material-list ms-container">
+         <el-main class="ms-admin-material-list">
             <div class="ms-admin-material-item" v-for="material in materialList">
-               <div>
+               <div class="head">
                   <span v-text="'更新于'+material.date"></span>
                   <i class="iconfont icon-weixin"></i>
                </div>
-               <div>
+               <div class="body">
-                  <span></span>
+                  <span v-text="material.title"></span>
-                  <img />
+                  <img v-lazy="material.img" />
-                  <p></p>
+                  <p v-text="material.det"></p>
                </div>
-               <div>
+               <div class="footer">
-                  <i></i>
+                  <i class="el-icon-edit"></i>
-                  <i></i>
+                  <i class="el-icon-delete"></i>
                </div>
             </div>
          </el-main>
@@ -60,11 +60,18 @@
          value1: '全部图片',
          value2: '',
          materialList: [{
-            date: '12月27日',
+               date: '12月27日',
-            title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
+               title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
-            img: '',
+               img: '',
-            det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
+               det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
-         }],
+            },
+            {
+               date: '12月27日',
+               title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
+               img: '',
+               det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
+            }
+         ],
       },
       methods: {},
       mounted: function() {}

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

@@ -101,6 +101,33 @@ textarea::-webkit-input-placeholder {
   width: calc(100% - 140px);
 }
 .ms-admin-material-list {
-  margin: 15px;
+  background: #fff;
-  padding: 10px;
+  margin: 12px;
+  padding: 14px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.ms-admin-material-list .ms-admin-material-item {
+  margin: 0 24px 0 0;
+  padding: 0 10px;
+  width: 230px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+}
+.ms-admin-material-list .ms-admin-material-item .head {
+  border-bottom: 1px solid #e6e6e6;
+  padding: 10px 0;
+}
+.ms-admin-material-list .ms-admin-material-item .body {
+  display: flex;
+  flex-direction: column;
+}
+.ms-admin-material-list .ms-admin-material-item .footer {
+  display: flex;
+  padding: 14px 0;
+}
+.ms-admin-material-list .ms-admin-material-item .footer i {
+  margin: auto;
 }

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

@@ -1,4 +1,31 @@
 @import "../ms-admin/4.7.0/less/app.less";
 .ms-admin-material-list {
-    .ms-margin-padding(15px, 10px);
+    background: #fff;
+    .ms-margin-padding(12px, 14px);
+    display: flex;
+    flex-wrap: wrap;
+    //单个素材
+    .ms-admin-material-item {
+        .ms-margin-padding(0 24px 0 0, 0 10px);
+        width: 230px;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #e6e6e6;
+        border-radius: 4px;
+        .head {
+            border-bottom: 1px solid #e6e6e6;
+            padding: 10px 0;
+        }
+        .body {
+            display: flex;
+            flex-direction: column;
+        }
+        .footer {
+            display: flex;
+            padding: 14px 0;
+            i {
+                margin: auto;
+            }
+        }
+    }
 }