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>
|
||||
<!--小图标-->
|
||||
<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">
|
||||
<!-- 引入组件库 -->
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<el-container class=" ms-container">
|
||||
<el-aside width="280px">
|
||||
<div class="ms-main-article">
|
||||
<img :src='mainArticle.basicPic'>
|
||||
<img :src='mainArticle.basicPic || '>
|
||||
<div class="ms-main-article-mask"></div>
|
||||
<span v-text='mainArticle.basicTitle'></span>
|
||||
</div>
|
||||
|
@ -22,7 +22,7 @@
|
|||
<p>
|
||||
<span v-text='element.basicTitle'></span>
|
||||
</p>
|
||||
<img :src='element.basicThumbnailsl'>
|
||||
<img :src='element.basicThumbnails'>
|
||||
</div>
|
||||
</draggable>
|
||||
<div class="ms-article-footer">
|
||||
|
@ -67,20 +67,10 @@
|
|||
el: '#article',
|
||||
data: {
|
||||
mainArticle: {
|
||||
basicPic: 'https://img03.sogoucdn.com/app/a/100520091/20190125112329', //主图
|
||||
basicTitle: '国足0-3不敌伊朗被淘汰,赛后还有一个消息', //标题
|
||||
basicPic: '', //主图
|
||||
basicTitle: '', //标题
|
||||
},
|
||||
// 文章列表
|
||||
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'
|
||||
}],
|
||||
subArticleList: [],// 子文章列表
|
||||
titleWordNumber: 64, //图文标题剩余字数
|
||||
authorWordNumber: 8, //图文作者剩余字数
|
||||
descWordNumber: 54, //摘要
|
||||
|
@ -93,6 +83,16 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
open:function(material){
|
||||
menuVue.menuActive = '新建图文';
|
||||
if(material && material.newsId>0){
|
||||
// 编辑
|
||||
this.subArticleList = material.articleList
|
||||
}else{
|
||||
// 新增
|
||||
}
|
||||
console.log('"material',material);
|
||||
},
|
||||
// 添加文章
|
||||
addArticle: function() {
|
||||
if(this.subArticleList.length > 6) {
|
||||
|
|
|
@ -1,80 +1,116 @@
|
|||
<!--图文素材页-->
|
||||
<link rel="stylesheet" href="../../../static/mweixin/css/material-list.css">
|
||||
<div id="material-list-vue" v-if="menuVue.menuActive == '图文'" class="ms-weixin-content">
|
||||
<el-container>
|
||||
<!--右侧头部-->
|
||||
<el-header class="ms-header" height="50px">
|
||||
<el-row>
|
||||
<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">同步微信素材</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-material-list">
|
||||
<div class="ms-admin-material-item" v-for="material in materialList">
|
||||
<div class="head">
|
||||
<span v-text="'更新于'+material.date"></span>
|
||||
<i class="iconfont icon-weixin"></i>
|
||||
</div>
|
||||
<div class="body">
|
||||
<span v-text="material.title"></span>
|
||||
<img :src="material.img" />
|
||||
<p v-text="material.det"></p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<i class="el-icon-edit" @click="menuVue.menuActive = '新建图文'"></i>
|
||||
<em></em>
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<el-container>
|
||||
<!--右侧头部-->
|
||||
<el-header class="ms-header" height="50px">
|
||||
<el-row>
|
||||
<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" @click='sync'>同步微信素材</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" @click='search'>查询</el-button>
|
||||
</el-header>
|
||||
<!--素材列表-->
|
||||
<el-main class="ms-admin-material-list">
|
||||
<div class="ms-admin-material-item" v-for="(material,index) in materialList" :key='index'>
|
||||
<div class="head">
|
||||
<span v-text="'更新于'+formmateTime(material.newsDateTime)"></span>
|
||||
<i class="iconfont icon-weixin" v-if='material.newsIsSyn'></i>
|
||||
</div>
|
||||
<div class="body">
|
||||
<span v-text="material.newsArticle.basicTitle"></span>
|
||||
<img :src="material.newsArticle.basicThumbnails || ms.base+'/WEB-INF/manager/images/data/ms-bg_1.jpg'" />
|
||||
<p v-text="material.newsArticle.basicDescription"></p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<i class="el-icon-edit" @click="articleVue.open(material)"></i>
|
||||
<em></em>
|
||||
<i class="el-icon-delete" @click='del(material,index)'></i>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#material-list-vue",
|
||||
data: {
|
||||
options1: [{
|
||||
value: '全部图片',
|
||||
label: '全部图片'
|
||||
}],
|
||||
options2: [{
|
||||
value: '全部图片',
|
||||
label: '全部图片'
|
||||
}],
|
||||
value1: '全部图片',
|
||||
value2: '',
|
||||
materialList: [{
|
||||
date: '12月27日',
|
||||
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
|
||||
img: '../images/data/img.png',
|
||||
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价,后置摄像头后置莱卡散射,12000万亿像素(光脚,1/1.6光圈)+1200万像素(超广角),......'
|
||||
},
|
||||
{
|
||||
date: '12月27日',
|
||||
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
|
||||
img: '../images/data/img.png',
|
||||
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价,后置摄像头后置莱卡散射,12000万亿像素(光脚,1/1.6光圈)+1200万像素(超广角),......'
|
||||
}
|
||||
],
|
||||
},
|
||||
methods: {},
|
||||
mounted: function() {}
|
||||
})
|
||||
var materialListVue = new Vue({
|
||||
el: "#material-list-vue",
|
||||
data: {
|
||||
options1: [{
|
||||
value: '全部图片',
|
||||
label: '全部图片'
|
||||
}],
|
||||
options2: [{
|
||||
value: '全部图片',
|
||||
label: '全部图片'
|
||||
}],
|
||||
value1: '全部图片',
|
||||
value2: '',
|
||||
materialList: [],
|
||||
},
|
||||
methods: {
|
||||
// 获取微信素材
|
||||
newsList: function () {
|
||||
var that = this;
|
||||
ms.http.get(ms.manager + "/weixin/news/list.do")
|
||||
.then(function (res) {
|
||||
that.materialList = res.rows
|
||||
console.log('微信', res);
|
||||
}, function (err) {
|
||||
that.$message.error(err)
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
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>
|
|
@ -18,4 +18,15 @@
|
|||
<!--#include virtual="menu/material-bank-form.ftl" -->
|
||||
<!--#include virtual="message/index.ftl" -->
|
||||
</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 {
|
||||
font-weight: initial;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
color: #999;
|
||||
resize: none;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
|
@ -68,13 +68,13 @@ textarea::-webkit-input-placeholder {
|
|||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
/*滚动条的圆角*/
|
||||
background-color: #ddd;
|
||||
background-color: #e6e6e6;
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
.ms-container {
|
||||
margin: 12px;
|
||||
height: calc(100% - 24px);
|
||||
padding: 14px 14px 0 14px;
|
||||
padding: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
.ms-header {
|
||||
|
@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
|
|||
height: 55px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px 25px 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
}
|
||||
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
|
||||
font-weight: bold;
|
||||
|
@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
|
|||
color: #333;
|
||||
}
|
||||
.ms-weixin-dialog .el-dialog__footer {
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
padding: 15px !important;
|
||||
}
|
||||
.ms-hover {
|
||||
|
@ -123,15 +123,18 @@ textarea::-webkit-input-placeholder {
|
|||
background: #fff;
|
||||
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;
|
||||
margin: 12px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ms-admin-material-list .ms-admin-material-item {
|
||||
margin: 0 24px 0 0;
|
||||
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item {
|
||||
margin: 0 24px 24px 0;
|
||||
padding: 0 10px;
|
||||
width: 230px;
|
||||
display: flex;
|
||||
|
@ -139,60 +142,68 @@ textarea::-webkit-input-placeholder {
|
|||
border: 1px solid #e6e6e6;
|
||||
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;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.ms-admin-material-list .ms-admin-material-item .head span {
|
||||
color: #999;
|
||||
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .head span {
|
||||
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;
|
||||
flex-direction: column;
|
||||
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;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
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;
|
||||
background: #fff;
|
||||
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;
|
||||
height: 110px;
|
||||
margin: 0 auto;
|
||||
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;
|
||||
color: #999;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-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;
|
||||
padding: 14px 0;
|
||||
}
|
||||
.ms-admin-material-list .ms-admin-material-item .footer i {
|
||||
color: #999;
|
||||
.ms-weixin-content .ms-admin-material-list .ms-admin-material-item .footer i {
|
||||
color: #333;
|
||||
margin: auto;
|
||||
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;
|
||||
background: #fff;
|
||||
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;
|
||||
height: 1em;
|
||||
background: #e6e6e6;
|
||||
|
|
|
@ -1,54 +1,66 @@
|
|||
@import "../ms-admin/4.7.0/less/app.less";
|
||||
.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 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;
|
||||
}
|
||||
.ms-weixin-content{
|
||||
.ms-header{
|
||||
>.el-select--small:first-child{
|
||||
width: 100px !important;
|
||||
}
|
||||
.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;
|
||||
flex-direction: column;
|
||||
line-height: 2em;
|
||||
span {
|
||||
.ms-ellipsis;
|
||||
.ms-hover;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px;
|
||||
.head {
|
||||
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 {
|
||||
.ms-width-height(170px, 110px);
|
||||
margin: 0 auto;
|
||||
object-fit: cover;
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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 {
|
||||
margin: 0;
|
||||
color: @contentColor;
|
||||
.ms-ellipsis-clamp(3);
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
padding: 14px 0;
|
||||
i {
|
||||
color: @contentColor;
|
||||
margin: auto;
|
||||
.ms-hover;
|
||||
}
|
||||
em {
|
||||
.ms-width-height(1px, 1em);
|
||||
background: #e6e6e6;
|
||||
.footer {
|
||||
display: flex;
|
||||
padding: 14px 0;
|
||||
i {
|
||||
color: @contentColor;
|
||||
margin: auto;
|
||||
.ms-hover;
|
||||
}
|
||||
em {
|
||||
.ms-width-height(1px, 1em);
|
||||
background: #e6e6e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue