重写将文件预览；本地引入font-awesome字体；

source/components/card/ul-card-file/_index.env

@@ -0,0 +1,6 @@
+title=文件预览卡片
+padding=1
+margin=0
+gray=1
+mobile=0
+inner_margin=0

source/components/card/ul-card-file/_index.html

@@ -0,0 +1,32 @@
+{volist name='[
+"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}

source/components/card/ul-card-file/_index.md

@@ -0,0 +1 @@
+> 注意：需要引入font awesome 字体文件，但也可以使用任何其他的字体文件或图片。只不过使用图片的话，内置的文件类型的图标颜色就不能用了

source/components/card/ul-card-file/_index.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+
+];

source/components/card/ul-card-file/_index.scss

@@ -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;
+    }
+}