ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-08 21:22:48 +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

2
public/cdn/layui-ul.css
View File

@@ -903,6 +903,8 @@
.ul-card-file .main .icon { .ul-card-file .main .icon {
font-size: 40px; font-size: 40px;
color: #999; color: #999;
width: 40px;
text-align: center;
} }
.ul-card-file .main .icon.file { .ul-card-file .main .icon.file {
color: #bbb; color: #bbb;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -1,6 +1,6 @@
{volist name='[ {volist name='[
"excel", "excel",
"zip", "zipper",
"word", "word",
"pdf", "pdf",
"powerpoint", "powerpoint",
@@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<div class="icon {$file}"> <div class="icon {$file}">
<i class="fa fa-file-{$file}-o"></i> <i class="fa fa-file-{$file}"></i>
</div> </div>
</div> </div>
<div class="footer"> <div class="footer">
@@ -30,3 +30,42 @@
</div> </div>
</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 { .ul-card-file {
background-color: #fff; background-color: #fff;
display : block; display: block;
width : 240px; width: 240px;
color : #000 !important; color: #000 !important;
cursor : pointer; cursor: pointer;
box-shadow: 0 0 2px #bbb; box-shadow: 0 0 2px #bbb;
.main { .main {
display : flex; display: flex;
align-items : flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
padding : 15px 15px 5px 15px; padding: 15px 15px 5px 15px;
height : 60px; height: 60px;
.info { .info {
.name { .name {
overflow : hidden; overflow: hidden;
text-overflow : ellipsis; text-overflow: ellipsis;
display : -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
width : 160px; width: 160px;
} }
.desc { .desc {
color : #bbb; color: #bbb;
font-weight: normal; font-weight: normal;
font-size : 12px; font-size: 12px;
margin-top : 5px; margin-top: 5px;
} }
} }
.icon { .icon {
font-size: 40px; font-size: 40px;
color : #999; color: #999;
width: 40px;
text-align: center;
&.file { &.file {
color: #bbb; color: #bbb;
@@ -85,11 +87,11 @@
} }
.footer { .footer {
display : flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size : 12px; font-size: 12px;
color : #999; color: #999;
border-top : 1px solid #eee; border-top: 1px solid #eee;
padding : 5px 15px 5px 15px; padding: 5px 15px 5px 15px;
} }
} }