mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-06 12:22:49 +08:00
新增ul文件预览样式；
This commit is contained in:
@@ -31,13 +31,14 @@ ulthon扩展的layui样式库.
|
||||
|
||||
### 部分组件展示
|
||||
|
||||
[](https://imgtu.com/i/gmyXDS)
|
||||
[](https://imgtu.com/i/gmyINd)
|
||||
[](https://imgtu.com/i/gmyH3t)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 收藏组件
|
||||
|
||||
[](https://imgtu.com/i/gm6rqS)
|
||||
|
||||
|
||||
### 开发说明
|
||||
|
||||
|
||||
@@ -398,4 +398,86 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>文件预览卡片</legend>
|
||||
<div class="layui-field-box">
|
||||
<blockquote class="layui-elem-quote">注意：需要引入font awesome 字体文件</blockquote>
|
||||
<div class="demo-js-src" style="display: block;">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
{volist name='[
|
||||
"file",
|
||||
"excel",
|
||||
"zip",
|
||||
"word",
|
||||
"pdf",
|
||||
"powerpoint",
|
||||
"audio",
|
||||
"code",
|
||||
"image",
|
||||
"video",
|
||||
"text",
|
||||
]' id='file'}<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 fa-file-{$file}-o"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<span>来自ulthon邮箱</span>
|
||||
<span>2022年6月24日</span>
|
||||
</div>
|
||||
</div>
|
||||
{/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 fa-file-o"></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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
BIN
public/static/images/demo/ul-card-file.png
Normal file
BIN
public/static/images/demo/ul-card-file.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
@@ -7,6 +7,12 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ul-inline-block {
|
||||
display : inline-block !important;
|
||||
margin-right : 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ul-icon-exit {
|
||||
display : inline-block;
|
||||
width : 16px;
|
||||
|
||||
@@ -3,4 +3,5 @@
|
||||
@import './ul-info-card';
|
||||
@import './ul-card-data-simple';
|
||||
@import './ul-card-data-simple-bg-black';
|
||||
@import './ul-data-card';
|
||||
@import './ul-data-card';
|
||||
@import './ul-card-file';
|
||||
95
source/scss/card/_ul-card-file.scss
Normal file
95
source/scss/card/_ul-card-file.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
.ul-card-file {
|
||||
background-color: #fff;
|
||||
display : block;
|
||||
width : 240px;
|
||||
color : #000 !important;
|
||||
cursor : pointer;
|
||||
|
||||
box-shadow: 0 0 2px #bbb;
|
||||
|
||||
.main {
|
||||
display : flex;
|
||||
align-items : flex-start;
|
||||
justify-content: space-between;
|
||||
padding : 15px 15px 5px 15px;
|
||||
height : 60px;
|
||||
|
||||
.info {
|
||||
|
||||
.name {
|
||||
overflow : hidden;
|
||||
text-overflow : ellipsis;
|
||||
display : -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
width : 160px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color : #bbb;
|
||||
font-weight: normal;
|
||||
font-size : 12px;
|
||||
margin-top : 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
font-size: 40px;
|
||||
color : #999;
|
||||
|
||||
&.file {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
&.excel {
|
||||
color: rgb(32, 115, 70);
|
||||
}
|
||||
|
||||
&.zip {
|
||||
color: rgb(139, 87, 42);
|
||||
}
|
||||
|
||||
&.word {
|
||||
color: rgb(44, 86, 154);
|
||||
}
|
||||
|
||||
&.powerpoint {
|
||||
color: rgb(242, 97, 63);
|
||||
}
|
||||
|
||||
&.pdf {
|
||||
color: rgb(250, 81, 81);
|
||||
}
|
||||
|
||||
&.video {
|
||||
color: #7c8eee;
|
||||
}
|
||||
|
||||
&.audio {
|
||||
color: #f16c00;
|
||||
}
|
||||
|
||||
&.image {
|
||||
color: #f6ad00;
|
||||
}
|
||||
|
||||
&.text {
|
||||
color: #8289ad;
|
||||
}
|
||||
|
||||
&.link {
|
||||
color: #4876f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display : flex;
|
||||
justify-content: space-between;
|
||||
font-size : 12px;
|
||||
color : #999;
|
||||
border-top : 1px solid #eee;
|
||||
padding : 5px 15px 5px 15px;
|
||||
}
|
||||
}
|
||||
@@ -124,9 +124,6 @@
|
||||
</div>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
|
||||
$('.main-content h2,.main-content>.demo-page>fieldset').each(function (index, elem) {
|
||||
if ($(elem).find('.demo-js-src').length == 0) {
|
||||
$(elem).children('.layui-field-box')
|
||||
@@ -195,6 +192,10 @@
|
||||
var contentCode = htmlListNew.join("\n");
|
||||
if ($(this).siblings('pre.demo-js').length == 0) {
|
||||
var title = $(this).data('title');
|
||||
|
||||
if (!title) {
|
||||
title = $(this).closest('fieldset').find('legend').text();
|
||||
}
|
||||
$('<pre class="layui-code demo-js" lay-title="' + title + '"></pre>').insertAfter(this);
|
||||
}
|
||||
$(this).siblings('pre.demo-js').text(contentCode)
|
||||
|
||||
Reference in New Issue
Block a user