ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-01 10:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化文件卡片

Browse Source
This commit is contained in:
augushong
2023-05-11 10:56:24 +08:00
parent 2afb732311
commit 4f82f78b3e
4 changed files with 68 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
source/components/card/ul-card-file/_index.html
View File

@@ -1,6 +1,6 @@
{volist name='[
"excel",
"zip",
"zipper",
"word",
"pdf",
"powerpoint",
@@ -21,7 +21,7 @@
</div>
</div>
<div class="icon {$file}">
<i class="fa fa-file-{$file}-o"></i>
<i class="fa fa-file-{$file}"></i>
</div>
</div>
<div class="footer">
@@ -29,4 +29,43 @@
<span>2022年6月24日</span>
</div>
</div>
{/volist}
{/volist}
<div class="ul-card-file ul-inline-block">
<div class="main">
<div class="info">
<div class="name">
核弹制作与发射 从入门到精通
</div>
<div class="desc">
75GB
</div>
</div>
<div class="icon file">
<i class="fa-regular fa-file"></i>
</div>
</div>
<div class="footer">
<span>来自ulthon邮箱</span>
<span>2022年6月24日</span>
</div>
</div>
<div class="ul-card-file ul-inline-block">
<div class="main">
<div class="info">
<div class="name">
核弹制作与发射 从入门到精通
</div>
<div class="desc">
75GB
</div>
</div>
<div class="icon link">
<i class="fa fa-link"></i>
</div>
</div>
<div class="footer">
<span>来自ulthon邮箱</span>
<span>2022年6月24日</span>
</div>
</div>

44
source/components/card/ul-card-file/_index.scss
View File

@@ -1,42 +1,44 @@
.ul-card-file {
background-color: #fff;
display : block;
width : 240px;
color : #000 !important;
cursor : pointer;
display: block;
width: 240px;
color: #000 !important;
cursor: pointer;
box-shadow: 0 0 2px #bbb;
.main {
display : flex;
align-items : flex-start;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding : 15px 15px 5px 15px;
height : 60px;
padding: 15px 15px 5px 15px;
height: 60px;
.info {
.name {
overflow : hidden;
text-overflow : ellipsis;
display : -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width : 160px;
width: 160px;
}
.desc {
color : #bbb;
color: #bbb;
font-weight: normal;
font-size : 12px;
margin-top : 5px;
font-size: 12px;
margin-top: 5px;
}
}
.icon {
font-size: 40px;
color : #999;
color: #999;
width: 40px;
text-align: center;
&.file {
color: #bbb;
@@ -85,11 +87,11 @@
}
.footer {
display : flex;
display: flex;
justify-content: space-between;
font-size : 12px;
color : #999;
border-top : 1px solid #eee;
padding : 5px 15px 5px 15px;
font-size: 12px;
color: #999;
border-top: 1px solid #eee;
padding: 5px 15px 5px 15px;
}
}