Signed-off-by: yinxr <2273460044@qq.com>
This commit is contained in:
parent
8c9a3c3759
commit
42fb675a05
|
@ -5,6 +5,7 @@
|
||||||
<script type="text/javascript" src="https://unpkg.com/vue@2.5.21/dist/vue.min.js"></script>
|
<script type="text/javascript" src="https://unpkg.com/vue@2.5.21/dist/vue.min.js"></script>
|
||||||
<!--小图标-->
|
<!--小图标-->
|
||||||
<link rel="stylesheet" href="//at.alicdn.com/t/font_847907_mkdvd7gopsg.css">
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_847907_mkdvd7gopsg.css">
|
||||||
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_1035189_ddqz6fpwzxb.css">
|
||||||
<!-- 引入样式 -->
|
<!-- 引入样式 -->
|
||||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||||
<!-- 引入组件库 -->
|
<!-- 引入组件库 -->
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<el-container class=" ms-container">
|
<el-container class=" ms-container">
|
||||||
<el-aside width="280px">
|
<el-aside width="280px">
|
||||||
<div class="ms-main-article">
|
<div class="ms-main-article">
|
||||||
<img :src='mainArticle.basicPic'>
|
<img :src='mainArticle.basicPic || '>
|
||||||
<div class="ms-main-article-mask"></div>
|
<div class="ms-main-article-mask"></div>
|
||||||
<span v-text='mainArticle.basicTitle'></span>
|
<span v-text='mainArticle.basicTitle'></span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -22,7 +22,7 @@
|
||||||
<p>
|
<p>
|
||||||
<span v-text='element.basicTitle'></span>
|
<span v-text='element.basicTitle'></span>
|
||||||
</p>
|
</p>
|
||||||
<img :src='element.basicThumbnailsl'>
|
<img :src='element.basicThumbnails'>
|
||||||
</div>
|
</div>
|
||||||
</draggable>
|
</draggable>
|
||||||
<div class="ms-article-footer">
|
<div class="ms-article-footer">
|
||||||
|
@ -67,20 +67,10 @@
|
||||||
el: '#article',
|
el: '#article',
|
||||||
data: {
|
data: {
|
||||||
mainArticle: {
|
mainArticle: {
|
||||||
basicPic: 'https://img03.sogoucdn.com/app/a/100520091/20190125112329', //主图
|
basicPic: '', //主图
|
||||||
basicTitle: '国足0-3不敌伊朗被淘汰,赛后还有一个消息', //标题
|
basicTitle: '', //标题
|
||||||
},
|
},
|
||||||
// 文章列表
|
subArticleList: [],// 子文章列表
|
||||||
subArticleList: [{
|
|
||||||
basicTitle: '硬核!年会当着老板面唱,“干活的干不过写PPT的……',
|
|
||||||
basicThumbnailsl: 'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
|
|
||||||
}, {
|
|
||||||
basicTitle: '知否知否,党组织犯错,处理有多严?',
|
|
||||||
basicThumbnailsl: 'https://img01.sogoucdn.com/app/a/100520091/20190125112509'
|
|
||||||
}, {
|
|
||||||
basicTitle: '没有奇迹,国足0-3不敌伊朗止步八强!',
|
|
||||||
basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
|
|
||||||
}],
|
|
||||||
titleWordNumber: 64, //图文标题剩余字数
|
titleWordNumber: 64, //图文标题剩余字数
|
||||||
authorWordNumber: 8, //图文作者剩余字数
|
authorWordNumber: 8, //图文作者剩余字数
|
||||||
descWordNumber: 54, //摘要
|
descWordNumber: 54, //摘要
|
||||||
|
@ -93,6 +83,16 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
open:function(material){
|
||||||
|
menuVue.menuActive = '新建图文';
|
||||||
|
if(material && material.newsId>0){
|
||||||
|
// 编辑
|
||||||
|
this.subArticleList = material.articleList
|
||||||
|
}else{
|
||||||
|
// 新增
|
||||||
|
}
|
||||||
|
console.log('"material',material);
|
||||||
|
},
|
||||||
// 添加文章
|
// 添加文章
|
||||||
addArticle: function() {
|
addArticle: function() {
|
||||||
if(this.subArticleList.length > 6) {
|
if(this.subArticleList.length > 6) {
|
||||||
|
|
|
@ -1,80 +1,116 @@
|
||||||
<!--图文素材页-->
|
<!--图文素材页-->
|
||||||
<link rel="stylesheet" href="../../../static/mweixin/css/material-list.css">
|
<link rel="stylesheet" href="../../../static/mweixin/css/material-list.css">
|
||||||
<div id="material-list-vue" v-if="menuVue.menuActive == '图文'" class="ms-weixin-content">
|
<div id="material-list-vue" v-if="menuVue.menuActive == '图文'" class="ms-weixin-content">
|
||||||
<el-container>
|
<el-container>
|
||||||
<!--右侧头部-->
|
<!--右侧头部-->
|
||||||
<el-header class="ms-header" height="50px">
|
<el-header class="ms-header" height="50px">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-button type="primary" size="small" icon="el-icon-plus" @click="menuVue.menuActive = '新建图文'">添加</el-button>
|
<el-button type="primary" size="small" icon="el-icon-plus" @click="menuVue.menuActive = '新建图文'">添加</el-button>
|
||||||
<el-button class="ms-fr" size="small" icon="el-icon-refresh">刷新</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-button class="ms-fr" size="small" @click='sync'>同步微信素材</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-container>
|
<el-container>
|
||||||
<!--内容头部-->
|
<!--内容头部-->
|
||||||
<el-header class="ms-tr ms-header">
|
<el-header class="ms-tr ms-header">
|
||||||
<el-select v-model="value1" placeholder="请选择" size="small">
|
<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 v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-select v-model="value2" placeholder="请选择" size="small">
|
<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 v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
|
<el-button type="primary" icon="el-icon-search" size="small" @click='search'>查询</el-button>
|
||||||
</el-header>
|
</el-header>
|
||||||
<!--素材列表-->
|
<!--素材列表-->
|
||||||
<el-main class="ms-admin-material-list">
|
<el-main class="ms-admin-material-list">
|
||||||
<div class="ms-admin-material-item" v-for="material in materialList">
|
<div class="ms-admin-material-item" v-for="(material,index) in materialList" :key='index'>
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<span v-text="'更新于'+material.date"></span>
|
<span v-text="'更新于'+formmateTime(material.newsDateTime)"></span>
|
||||||
<i class="iconfont icon-weixin"></i>
|
<i class="iconfont icon-weixin" v-if='material.newsIsSyn'></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<span v-text="material.title"></span>
|
<span v-text="material.newsArticle.basicTitle"></span>
|
||||||
<img :src="material.img" />
|
<img :src="material.newsArticle.basicThumbnails || ms.base+'/WEB-INF/manager/images/data/ms-bg_1.jpg'" />
|
||||||
<p v-text="material.det"></p>
|
<p v-text="material.newsArticle.basicDescription"></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<i class="el-icon-edit" @click="menuVue.menuActive = '新建图文'"></i>
|
<i class="el-icon-edit" @click="articleVue.open(material)"></i>
|
||||||
<em></em>
|
<em></em>
|
||||||
<i class="el-icon-delete"></i>
|
<i class="el-icon-delete" @click='del(material,index)'></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-container>
|
</el-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
new Vue({
|
var materialListVue = new Vue({
|
||||||
el: "#material-list-vue",
|
el: "#material-list-vue",
|
||||||
data: {
|
data: {
|
||||||
options1: [{
|
options1: [{
|
||||||
value: '全部图片',
|
value: '全部图片',
|
||||||
label: '全部图片'
|
label: '全部图片'
|
||||||
}],
|
}],
|
||||||
options2: [{
|
options2: [{
|
||||||
value: '全部图片',
|
value: '全部图片',
|
||||||
label: '全部图片'
|
label: '全部图片'
|
||||||
}],
|
}],
|
||||||
value1: '全部图片',
|
value1: '全部图片',
|
||||||
value2: '',
|
value2: '',
|
||||||
materialList: [{
|
materialList: [],
|
||||||
date: '12月27日',
|
},
|
||||||
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
|
methods: {
|
||||||
img: '../images/data/img.png',
|
// 获取微信素材
|
||||||
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价,后置摄像头后置莱卡散射,12000万亿像素(光脚,1/1.6光圈)+1200万像素(超广角),......'
|
newsList: function () {
|
||||||
},
|
var that = this;
|
||||||
{
|
ms.http.get(ms.manager + "/weixin/news/list.do")
|
||||||
date: '12月27日',
|
.then(function (res) {
|
||||||
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
|
that.materialList = res.rows
|
||||||
img: '../images/data/img.png',
|
console.log('微信', res);
|
||||||
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价,后置摄像头后置莱卡散射,12000万亿像素(光脚,1/1.6光圈)+1200万像素(超广角),......'
|
}, function (err) {
|
||||||
}
|
that.$message.error(err)
|
||||||
],
|
})
|
||||||
},
|
},
|
||||||
methods: {},
|
// 删除
|
||||||
mounted: function() {}
|
del: function (material,index) {
|
||||||
})
|
var that = this;
|
||||||
|
ms.http.post(ms.manager + "/weixin/news/"+material.newsId+"/delete.do")
|
||||||
|
.then(function (res) {
|
||||||
|
if(res.result){
|
||||||
|
that.$message.success('素材删除成功');
|
||||||
|
that.materialList.splice(index,1);
|
||||||
|
}
|
||||||
|
}, function (err) {
|
||||||
|
that.$message.error(err);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 同步微信素材
|
||||||
|
sync: function () {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 刷新图文素材
|
||||||
|
refresh: function () {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 查询
|
||||||
|
search: function () {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 格式化时间
|
||||||
|
formmateTime: function (time) {
|
||||||
|
var updateTime = /^[0-9]{4}-[0-9]{2}-[0-9]{2}/.exec(time)
|
||||||
|
if (updateTime != null) {
|
||||||
|
return updateTime[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
var that = this;
|
||||||
|
// 微信图文素材
|
||||||
|
that.newsList();
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
|
@ -18,4 +18,15 @@
|
||||||
<!--#include virtual="menu/material-bank-form.ftl" -->
|
<!--#include virtual="menu/material-bank-form.ftl" -->
|
||||||
<!--#include virtual="message/index.ftl" -->
|
<!--#include virtual="message/index.ftl" -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
<script>
|
||||||
|
// 测试使用 ==> 微信其他接口走之前需要先走这几个接口
|
||||||
|
(function(){
|
||||||
|
ms.http.get(ms.manager + "/mweixin/11/function.do")
|
||||||
|
.then((res)=>{
|
||||||
|
console.log('res',true);
|
||||||
|
}, (err) => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
})()
|
||||||
|
</script>
|
|
@ -0,0 +1,73 @@
|
||||||
|
/*
|
||||||
|
*对常见的多行样式进行了方法封装,方便调用,加快开发效率
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 背景图片地址和大小
|
||||||
|
.ms-background(@url) {
|
||||||
|
background-image: url(@url);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 圆角
|
||||||
|
.ms-radius(@radius) {
|
||||||
|
-webkit-border-radius: @radius;
|
||||||
|
-moz-border-radius: @radius;
|
||||||
|
-ms-border-radius: @radius;
|
||||||
|
-o-border-radius: @radius;
|
||||||
|
border-radius: @radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
//宽高
|
||||||
|
.ms-width-height(@width, @height: @width) {
|
||||||
|
width: @width;
|
||||||
|
height: @height;
|
||||||
|
}
|
||||||
|
|
||||||
|
//字体大小,颜色 ,字体粗细
|
||||||
|
.ms-font(@size, @color , @weight:initial) {
|
||||||
|
font-weight: @weight;
|
||||||
|
font-size: @size;
|
||||||
|
color: @color;
|
||||||
|
}
|
||||||
|
|
||||||
|
//flex 布局和 子元素 对其方式
|
||||||
|
.ms-flex(@type: space-between) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: @type;
|
||||||
|
}
|
||||||
|
|
||||||
|
//行级flex 布局和 子元素 对其方式
|
||||||
|
.ms-inline-flex(@type: space-between) {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: @type;
|
||||||
|
}
|
||||||
|
|
||||||
|
//多行超文本隐藏
|
||||||
|
.ms-ellipsis-clamp(@num) {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: @num;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
//行高和高
|
||||||
|
.ms-line-height(@num, @value: @num) {
|
||||||
|
height: @num;
|
||||||
|
line-height: @value;
|
||||||
|
}
|
||||||
|
|
||||||
|
//圆角元素
|
||||||
|
.ms-radius-size(@radius, @width, @height: @width) {
|
||||||
|
.ms-width-height(@width, @height);
|
||||||
|
.ms-radius(@radius);
|
||||||
|
text-align: center;
|
||||||
|
line-height: @height;
|
||||||
|
}
|
||||||
|
|
||||||
|
//边距
|
||||||
|
.ms-margin-padding(@margin, @padding: @margin) {
|
||||||
|
margin: @margin;
|
||||||
|
padding: @padding;
|
||||||
|
}
|
|
@ -0,0 +1,63 @@
|
||||||
|
/*
|
||||||
|
*这里的值严格按照UI设计图标注值来进行设置
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
*颜色
|
||||||
|
*/
|
||||||
|
|
||||||
|
//主题颜色
|
||||||
|
@themeColor: #0099ff;
|
||||||
|
//背景颜色
|
||||||
|
@backgroundColor: #eee;
|
||||||
|
//边框颜色
|
||||||
|
@borderColor: #e6e6e6;
|
||||||
|
|
||||||
|
/*
|
||||||
|
*页面的边距
|
||||||
|
*/
|
||||||
|
|
||||||
|
//整体区域内边距大小
|
||||||
|
@warpperPadding: 20px;
|
||||||
|
//整体区域外边距大小
|
||||||
|
@warpperMargin: 10px;
|
||||||
|
//列表内边距大小
|
||||||
|
@listPadding: 20px;
|
||||||
|
//列表外边距大小
|
||||||
|
@listMargin: 10px;
|
||||||
|
|
||||||
|
/*
|
||||||
|
*字体
|
||||||
|
*/
|
||||||
|
|
||||||
|
//标题字体样式
|
||||||
|
//一级标题的样式
|
||||||
|
@h1: 16px;
|
||||||
|
//一级标题的样式
|
||||||
|
@h2: 14px;
|
||||||
|
@titleColor: #333;
|
||||||
|
//内容字体样式
|
||||||
|
@contentSize: 14px;
|
||||||
|
@contentColor: #333;
|
||||||
|
// 默认字体样式
|
||||||
|
@defalutSize: 14px;
|
||||||
|
@defalutColor: #333;
|
||||||
|
//辅助性描述样式
|
||||||
|
@auxiliarySize: 12px;
|
||||||
|
@auxiliaryColor: #999;
|
||||||
|
|
||||||
|
/*
|
||||||
|
*头像
|
||||||
|
*/
|
||||||
|
|
||||||
|
//大头像
|
||||||
|
// @bigHead: ;
|
||||||
|
//中头像
|
||||||
|
// @midHead: ;
|
||||||
|
//小头像
|
||||||
|
@smallHead: 24px;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 按钮
|
||||||
|
*/
|
|
@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
|
||||||
textarea::-webkit-input-placeholder {
|
textarea::-webkit-input-placeholder {
|
||||||
font-weight: initial;
|
font-weight: initial;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #aaa;
|
color: #999;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
*::-webkit-scrollbar {
|
*::-webkit-scrollbar {
|
||||||
|
@ -68,13 +68,13 @@ textarea::-webkit-input-placeholder {
|
||||||
*::-webkit-scrollbar-thumb {
|
*::-webkit-scrollbar-thumb {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
/*滚动条的圆角*/
|
/*滚动条的圆角*/
|
||||||
background-color: #ddd;
|
background-color: #e6e6e6;
|
||||||
/*滚动条的背景颜色*/
|
/*滚动条的背景颜色*/
|
||||||
}
|
}
|
||||||
.ms-container {
|
.ms-container {
|
||||||
margin: 12px;
|
margin: 12px;
|
||||||
height: calc(100% - 24px);
|
height: calc(100% - 24px);
|
||||||
padding: 14px 14px 0 14px;
|
padding: 14px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
.ms-header {
|
.ms-header {
|
||||||
|
@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
|
||||||
height: 55px;
|
height: 55px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 10px 10px 25px 10px;
|
padding: 10px 10px 25px 10px;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
|
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
.ms-weixin-dialog .el-dialog__footer {
|
.ms-weixin-dialog .el-dialog__footer {
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #e6e6e6;
|
||||||
padding: 15px !important;
|
padding: 15px !important;
|
||||||
}
|
}
|
||||||
.ms-hover {
|
.ms-hover {
|
||||||
|
@ -123,15 +123,18 @@ textarea::-webkit-input-placeholder {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-color: #0099ff;
|
border-color: #0099ff;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list {
|
.ms-weixin-content .ms-header > .el-select--small:first-child {
|
||||||
|
width: 100px !important;
|
||||||
|
}
|
||||||
|
.ms-weixin-content .ms-admin-material-list {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
margin: 12px;
|
margin: 12px;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item {
|
||||||
margin: 0 24px 0 0;
|
margin: 0 24px 24px 0;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
width: 230px;
|
width: 230px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -139,60 +142,68 @@ textarea::-webkit-input-placeholder {
|
||||||
border: 1px solid #e6e6e6;
|
border: 1px solid #e6e6e6;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .head {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head {
|
||||||
border-bottom: 1px solid #e6e6e6;
|
border-bottom: 1px solid #e6e6e6;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .head span {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head span {
|
||||||
color: #999;
|
color: #333;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .body {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head .icon-weixin {
|
||||||
|
font-weight: initial;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #9acd32;
|
||||||
|
}
|
||||||
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .body span {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body span {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .body span:hover {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body span:hover {
|
||||||
color: #0099ff;
|
color: #0099ff;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-color: #0099ff;
|
border-color: #0099ff;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .body img {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body img {
|
||||||
width: 170px;
|
width: 170px;
|
||||||
height: 110px;
|
height: 110px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .body p {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .body p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #999;
|
color: #333;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 3;
|
-webkit-line-clamp: 3;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .footer {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 14px 0;
|
padding: 14px 0;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .footer i {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer i {
|
||||||
color: #999;
|
color: #333;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .footer i:hover {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer i:hover {
|
||||||
color: #0099ff;
|
color: #0099ff;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-color: #0099ff;
|
border-color: #0099ff;
|
||||||
}
|
}
|
||||||
.ms-admin-material-list .ms-admin-material-item .footer em {
|
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer em {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
background: #e6e6e6;
|
background: #e6e6e6;
|
||||||
|
|
|
@ -1,54 +1,66 @@
|
||||||
@import "../ms-admin/4.7.0/less/app.less";
|
@import "../ms-admin/4.7.0/less/app.less";
|
||||||
.ms-admin-material-list {
|
.ms-weixin-content{
|
||||||
background: #fff;
|
.ms-header{
|
||||||
.ms-margin-padding(12px, 14px);
|
>.el-select--small:first-child{
|
||||||
display: flex;
|
width: 100px !important;
|
||||||
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;
|
|
||||||
span {
|
|
||||||
color: @contentColor;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.body {
|
}
|
||||||
|
.ms-admin-material-list{
|
||||||
|
background: #fff;
|
||||||
|
.ms-margin-padding(12px, 14px);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
//单个素材
|
||||||
|
.ms-admin-material-item {
|
||||||
|
.ms-margin-padding(0 24px 24px 0, 0 10px);
|
||||||
|
width: 230px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
line-height: 2em;
|
border: 1px solid #e6e6e6;
|
||||||
span {
|
border-radius: 4px;
|
||||||
.ms-ellipsis;
|
.head {
|
||||||
.ms-hover;
|
border-bottom: 1px solid #e6e6e6;
|
||||||
|
padding: 10px 0;
|
||||||
|
.ms-flex();
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
color: @contentColor;
|
||||||
|
}
|
||||||
|
.icon-weixin{
|
||||||
|
.ms-font(16px,rgb(154, 205, 50));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
img {
|
.body {
|
||||||
.ms-width-height(170px, 110px);
|
display: flex;
|
||||||
margin: 0 auto;
|
flex-direction: column;
|
||||||
object-fit: cover;
|
line-height: 2em;
|
||||||
|
span {
|
||||||
|
.ms-ellipsis;
|
||||||
|
.ms-hover;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
.ms-width-height(170px, 110px);
|
||||||
|
margin: 0 auto;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
color: @contentColor;
|
||||||
|
.ms-ellipsis-clamp(3);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
p {
|
.footer {
|
||||||
margin: 0;
|
display: flex;
|
||||||
color: @contentColor;
|
padding: 14px 0;
|
||||||
.ms-ellipsis-clamp(3);
|
i {
|
||||||
}
|
color: @contentColor;
|
||||||
}
|
margin: auto;
|
||||||
.footer {
|
.ms-hover;
|
||||||
display: flex;
|
}
|
||||||
padding: 14px 0;
|
em {
|
||||||
i {
|
.ms-width-height(1px, 1em);
|
||||||
color: @contentColor;
|
background: #e6e6e6;
|
||||||
margin: auto;
|
}
|
||||||
.ms-hover;
|
|
||||||
}
|
|
||||||
em {
|
|
||||||
.ms-width-height(1px, 1em);
|
|
||||||
background: #e6e6e6;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue