ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-09 13:42:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增ul文件预览样式；

Browse Source
This commit is contained in:
augushong
2022-06-24 14:11:43 +08:00
parent d22a97151e
commit c89c269903
7 changed files with 194 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -31,13 +31,14 @@ ulthon扩展的layui样式库.
### 部分组件展示 ### 部分组件展示
[![gmyXDS.png](https://z3.ax1x.com/2021/05/03/gmyXDS.png)](https://imgtu.com/i/gmyXDS) ![gmyXDS.png](https://z3.ax1x.com/2021/05/03/gmyXDS.png)
[![gmyINd.png](https://z3.ax1x.com/2021/05/03/gmyINd.png)](https://imgtu.com/i/gmyINd) ![gmyINd.png](https://z3.ax1x.com/2021/05/03/gmyINd.png)
[![gmyH3t.png](https://z3.ax1x.com/2021/05/03/gmyH3t.png)](https://imgtu.com/i/gmyH3t) ![gmyH3t.png](https://z3.ax1x.com/2021/05/03/gmyH3t.png)
![ul-card-file](public/static/images/demo/ul-card-file.png)
### 收藏组件 ### 收藏组件
[![gm6rqS.png](https://z3.ax1x.com/2021/05/03/gm6rqS.png)](https://imgtu.com/i/gm6rqS) ![gm6rqS.png](https://z3.ax1x.com/2021/05/03/gm6rqS.png)
### 开发说明 ### 开发说明

82
demo/pc/card.html
View File

@@ -398,4 +398,86 @@
</div> </div>
</div> </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> </fieldset>

BIN
public/static/images/demo/ul-card-file.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

6
source/scss/_common.scss
View File

@@ -7,6 +7,12 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
.ul-inline-block {
display : inline-block !important;
margin-right : 15px;
margin-bottom: 15px;
}
.ul-icon-exit { .ul-icon-exit {
display : inline-block; display : inline-block;
width : 16px; width : 16px;

3
source/scss/card/_index.scss
View File

@@ -3,4 +3,5 @@
@import './ul-info-card'; @import './ul-info-card';
@import './ul-card-data-simple'; @import './ul-card-data-simple';
@import './ul-card-data-simple-bg-black'; @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
View 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;
}
}

7
view/index/index/index.html
View File

@@ -124,9 +124,6 @@
</div> </div>
<script> <script>
$('.main-content h2,.main-content>.demo-page>fieldset').each(function (index, elem) { $('.main-content h2,.main-content>.demo-page>fieldset').each(function (index, elem) {
if ($(elem).find('.demo-js-src').length == 0) { if ($(elem).find('.demo-js-src').length == 0) {
$(elem).children('.layui-field-box') $(elem).children('.layui-field-box')
@@ -195,6 +192,10 @@
var contentCode = htmlListNew.join("\n"); var contentCode = htmlListNew.join("\n");
if ($(this).siblings('pre.demo-js').length == 0) { if ($(this).siblings('pre.demo-js').length == 0) {
var title = $(this).data('title'); 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); $('<pre class="layui-code demo-js" lay-title="' + title + '"></pre>').insertAfter(this);
} }
$(this).siblings('pre.demo-js').text(contentCode) $(this).siblings('pre.demo-js').text(contentCode)