Signed-off-by: a123456 <1209165801@qq.com>
This commit is contained in:
a123456
parent
1dca637151
commit
2b31eea136
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
|
|
@ -1,9 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
<body>
|
<body>
|
||||||
<!--#include virtual="menu.ftl" -->
|
<!--#include virtual="menu.ftl" -->
|
||||||
<!--#include virtual="metarial/index.ftl" -->
|
<!--#include virtual="metarial/index.ftl" -->
|
||||||
|
<!--#include virtual="picture/index.ftl" -->
|
||||||
<!--#include virtual="keyword/index.ftl" -->
|
<!--#include virtual="keyword/index.ftl" -->
|
||||||
<!--#include virtual="keyword/form.ftl" -->
|
<!--#include virtual="keyword/form.ftl" -->
|
||||||
<!--#include virtual="menu/index.ftl" -->
|
<!--#include virtual="menu/index.ftl" -->
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue