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

This commit is contained in:
a123456 2019-01-28 13:07:27 +08:00
parent 9b306f83f0
commit 3797ae5dc7
6 changed files with 71 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 320 KiB

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

View File

@ -32,11 +32,12 @@
</div> </div>
<div class="body"> <div class="body">
<span v-text="material.title"></span> <span v-text="material.title"></span>
<img v-lazy="material.img" /> <img :src="material.img" />
<p v-text="material.det"></p> <p v-text="material.det"></p>
</div> </div>
<div class="footer"> <div class="footer">
<i class="el-icon-edit"></i> <i class="el-icon-edit"></i>
<em></em>
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</div> </div>
@ -62,13 +63,13 @@
materialList: [{ materialList: [{
date: '12月27日', date: '12月27日',
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...', title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
img: '', img: '../images/data/img.png',
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日', date: '12月27日',
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...', title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
img: '', img: '../images/data/img.png',
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价后置摄像头后置莱卡散射12000万亿像素光脚1/1.6光圈)+1200万像素超广角......' det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价后置摄像头后置莱卡散射12000万亿像素光脚1/1.6光圈)+1200万像素超广角......'
} }
], ],

View File

@ -39,13 +39,13 @@
@titleColor: #333; @titleColor: #333;
//内容字体样式 //内容字体样式
@contentSize: 14px; @contentSize: 14px;
@contentColor: #333; @contentColor: #999;
// 默认字体样式 // 默认字体样式
@defalutSize: 14px; @defalutSize: 14px;
@defalutColor: #333; @defalutColor: #333;
//辅助性描述样式 //辅助性描述样式
@auxiliarySize: 12px; @auxiliarySize: 12px;
@auxiliaryColor: #999; @auxiliaryColor: #aaa;
/* /*
*头像 *头像

View File

@ -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: #999; color: #aaa;
resize: none; resize: none;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
@ -120,14 +120,46 @@ textarea::-webkit-input-placeholder {
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
padding: 10px 0; padding: 10px 0;
} }
.ms-admin-material-list .ms-admin-material-item .head span {
color: #999;
}
.ms-admin-material-list .ms-admin-material-item .body { .ms-admin-material-list .ms-admin-material-item .body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
line-height: 2em;
}
.ms-admin-material-list .ms-admin-material-item .body span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.ms-admin-material-list .ms-admin-material-item .body img {
width: 170px;
height: 110px;
margin: 0.5em auto;
object-fit: cover;
}
.ms-admin-material-list .ms-admin-material-item .body p {
margin: 0;
color: #999;
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-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-admin-material-list .ms-admin-material-item .footer i {
color: #999;
margin: auto; margin: auto;
cursor: pointer;
}
.ms-admin-material-list .ms-admin-material-item .footer em {
width: 1px;
height: 1em;
background: #e6e6e6;
} }

View File

@ -15,16 +15,39 @@
.head { .head {
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
padding: 10px 0; padding: 10px 0;
span {
color: @contentColor;
}
} }
.body { .body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
line-height: 2em;
span {
.ms-ellipsis;
}
img {
.ms-width-height(170px, 110px);
margin: 0.5em auto;
object-fit: cover;
}
p {
margin: 0;
color: @contentColor;
.ms-ellipsis-clamp(3);
}
} }
.footer { .footer {
display: flex; display: flex;
padding: 14px 0; padding: 14px 0;
i { i {
color: @contentColor;
margin: auto; margin: auto;
cursor: pointer;
}
em {
.ms-width-height(1px, 1em);
background: #e6e6e6;
} }
} }
} }