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

7 years ago · 2b31eea136
parent 1dca637151
commit 2b31eea136
6 changed files with 295 additions and 9 deletions
--- a/src/main/webapp/WEB-INF/manager/images/data/ms-bg_1.jpg
+++ b/src/main/webapp/WEB-INF/manager/images/data/ms-bg_1.jpg
--- a/src/main/webapp/WEB-INF/manager/mweixin/img/index.ftl
+++ b/src/main/webapp/WEB-INF/manager/mweixin/img/index.ftl
@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-   <head>
-      <meta charset="UTF-8">
-      <title></title>
-   </head>
-   <body>
-   </body>
-</html>
--- a/src/main/webapp/WEB-INF/manager/mweixin/picture/index.ftl
+++ b/src/main/webapp/WEB-INF/manager/mweixin/picture/index.ftl
@ -0,0 +1,80 @@
+<!--图文素材页-->
+<link rel="stylesheet" href="../../../static/mweixin/css/picture-list.css">
+<div id="picture-list-vue" v-if="menuVue.menuActive == '图片'" class="ms-weixin-content">
+   <el-container>
+      <!--右侧头部-->
+      <el-header class="ms-header" height="52px">
+         <el-row>
+            <el-button type="primary" size="small" icon="el-icon-plus">添加</el-button>
+            <el-button class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button>
+            <el-button class="ms-fr" size="small">同步微信素材</el-button>
+         </el-row>
+      </el-header>
+      <el-container>
+         <!--内容头部-->
+         <el-header class="ms-tr ms-header">
+            <el-select v-model="value1" placeholder="请选择" size="small">
+               <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+               </el-option>
+            </el-select>
+            <el-select v-model="value2" placeholder="请选择" size="small">
+               <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+               </el-option>
+            </el-select>
+            <el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
+         </el-header>
+         <!--素材列表-->
+         <el-main class="ms-admin-picture-list">
+            <div class="ms-admin-picture-item" v-for="picture in pictureList">
+               <div class="body">
+                  <img :src="picture.img" />
+                  <div>
+                     <input type="checkbox" />
+                     <span v-text="picture.title"></span>
+                  </div>
+               </div>
+               <div class="footer">
+                  <i class="el-icon-edit"></i>
+                  <em></em>
+                  <i class="el-icon-delete"></i>
+                  <em></em>
+                  <i class="el-icon-delete"></i>
+               </div>
+            </div>
+         </el-main>
+      </el-container>
+   </el-container>
+</div>
+
+<script>
+   new Vue({
+      el: "#picture-list-vue",
+      data: {
+         options1: [{
+            value: '全部图片',
+            label: '全部图片'
+         }],
+         options2: [{
+            value: '全部图片',
+            label: '全部图片'
+         }],
+         value1: '全部图片',
+         value2: '',
+         pictureList: [{
+               date: '12月27日',
+               title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
+               img: '../images/data/ms-bg_1.jpg',
+               det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
+            },
+            {
+               date: '12月27日',
+               title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
+               img: '../images/data/ms-bg_1.jpg',
+               det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
+            }
+         ],
+      },
+      methods: {},
+      mounted: function() {}
+   })
+</script>
--- a/src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl
+++ b/src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl
@ -9,6 +9,7 @@
   <body>
      <!--#include virtual="menu.ftl" -->
      <!--#include virtual="metarial/index.ftl" -->
+      <!--#include virtual="picture/index.ftl" -->
      <!--#include virtual="keyword/index.ftl" -->
      <!--#include virtual="keyword/form.ftl" -->
      <!--#include virtual="menu/index.ftl" -->
--- a/src/main/webapp/static/mweixin/css/picture-list.css
+++ b/src/main/webapp/static/mweixin/css/picture-list.css
@ -0,0 +1,168 @@
+/*
+*这里的值严格按照UI设计图标注值来进行设置
+*/
+/*
+*颜色
+*/
+/*
+*页面的边距
+*/
+/*
+*字体
+*/
+/*
+*头像
+*/
+/*
+ * 按钮
+ */
+/*
+*对常见的多行样式进行了方法封装，方便调用，加快开发效率
+*/
+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;
+}
+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: #aaa;
+  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: calc(100% - 24px);
+  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-weixin-content {
+  width: calc(100% - 140px);
+}
+.ms-weixin-dialog .el-dialog__header {
+  height: 55px;
+  box-sizing: border-box;
+  padding: 10px 10px 25px 10px;
+  border-bottom: 1px solid #ddd;
+}
+.ms-weixin-dialog .el-dialog__header .el-dialog__title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+.ms-weixin-dialog .el-dialog__footer {
+  border-top: 1px solid #ddd;
+  padding: 15px !important;
+}
+.ms-admin-picture-list {
+  background: #fff;
+  margin: 12px;
+  padding: 14px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.ms-admin-picture-list .ms-admin-picture-item {
+  margin: 0 24px 0 0;
+  padding: 10px 10px 0 10px;
+  width: 230px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+}
+.ms-admin-picture-list .ms-admin-picture-item .body {
+  display: flex;
+  flex-direction: column;
+  line-height: 2em;
+}
+.ms-admin-picture-list .ms-admin-picture-item .body div {
+  margin-top: 0.5em;
+  display: flex;
+  align-items: center;
+}
+.ms-admin-picture-list .ms-admin-picture-item .body div span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.ms-admin-picture-list .ms-admin-picture-item .body img {
+  width: 100%;
+  height: 110px;
+  object-fit: cover;
+}
+.ms-admin-picture-list .ms-admin-picture-item .footer {
+  display: flex;
+  padding: 14px 0;
+}
+.ms-admin-picture-list .ms-admin-picture-item .footer i {
+  color: #999;
+  margin: auto;
+  cursor: pointer;
+}
+.ms-admin-picture-list .ms-admin-picture-item .footer em {
+  width: 1px;
+  height: 1em;
+  background: #e6e6e6;
+}
--- a/src/main/webapp/static/mweixin/picture-list.less
+++ b/src/main/webapp/static/mweixin/picture-list.less
@ -0,0 +1,46 @@
+@import "../ms-admin/4.7.0/less/app.less";
+.ms-admin-picture-list {
+    background: #fff;
+    .ms-margin-padding(12px, 14px);
+    display: flex;
+    flex-wrap: wrap;
+    //单个素材
+    .ms-admin-picture-item {
+        .ms-margin-padding(0 24px 0 0, 10px 10px 0 10px);
+        width: 230px;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #e6e6e6;
+        border-radius: 4px;
+        .body {
+            display: flex;
+            flex-direction: column;
+            line-height: 2em;
+            div {
+                margin-top: 0.5em;
+                display: flex;
+                align-items: center;
+                span {
+                    .ms-ellipsis;
+                }
+            }
+            img {
+                .ms-width-height(100%, 110px);
+                object-fit: cover;
+            }
+        }
+        .footer {
+            display: flex;
+            padding: 14px 0;
+            i {
+                color: @contentColor;
+                margin: auto;
+                cursor: pointer;
+            }
+            em {
+                .ms-width-height(1px, 1em);
+                background: #e6e6e6;
+            }
+        }
+    }
+}