fix: 完善文件展示的布局 (#13)

README.md

@@ -26,6 +26,8 @@
 
 # 模板
 <template>
+    <div>
+    </div>
 </template>
 
 <script setup lang="ts">

src/assets/icons/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4414354 */
-  src: url('iconfont.woff2?t=1706180461250') format('woff2'),
-       url('iconfont.woff?t=1706180461250') format('woff'),
-       url('iconfont.ttf?t=1706180461250') format('truetype');
+  src: url('iconfont.woff2?t=1706246601025') format('woff2'),
+       url('iconfont.woff?t=1706246601025') format('woff'),
+       url('iconfont.ttf?t=1706246601025') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-wenjian:before {
+  content: "\e638";
+}
+
+.icon-jianzhuanquan-:before {
+  content: "\e614";
+}
+
+.icon-shipinwenjian:before {
+  content: "\e6ee";
+}
+
+.icon-yinlewenjian:before {
+  content: "\e9c5";
+}
+
 .icon-jia:before {
   content: "\e60d";
 }

src/assets/icons/iconfont.json

@@ -5,6 +5,34 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1346676",
+      "name": "文件",
+      "font_class": "wenjian",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "5041659",
+      "name": "图片文件",
+      "font_class": "jianzhuanquan-",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "9881684",
+      "name": "KHCFDC_视频文件",
+      "font_class": "shipinwenjian",
+      "unicode": "e6ee",
+      "unicode_decimal": 59118
+    },
+    {
+      "icon_id": "38283090",
+      "name": "音乐文件",
+      "font_class": "yinlewenjian",
+      "unicode": "e9c5",
+      "unicode_decimal": 59845
+    },
     {
       "icon_id": "1288623",
       "name": "加",

src/views/personal/files.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="files-box">
+        <!-- <div class="contents">
+            <div class="images">
+                <i class="iconfont icon-wenjian"></i>
+            </div>
+            <div class="title">复习资料</div>
+            <div class="time">2024/01/26 13:14</div>
+        </div>
+        <div class="contents">
+            <div class="images">
+                <i class="iconfont icon-file-alt-solid"></i>
+            </div>
+            <div class="title">期末作业</div>
+            <div class="time">2024/01/26 13:14</div>
+        </div>
+        <div class="contents">
+            <div class="images">
+                <i class="iconfont icon-shipinwenjian radio"></i>
+            </div>
+            <div class="title">宋浩高数不挂科</div>
+            <div class="time">2024/01/26 13:14</div>
+        </div>
+        <div class="contents">
+            <div class="images">
+                <i class="iconfont icon-yinlewenjian music"></i>
+            </div>
+            <div class="title">兰淞清唱合集</div>
+            <div class="time">2024/01/26 13:14</div>
+        </div>
+        <div class="contents">
+            <div class="images">
+                <i class="iconfont icon-jianzhuanquan- image"></i>
+            </div>
+            <div class="title">兰淞自拍合集</div>
+            <div class="time">2024/01/26 13:14</div>
+        </div> -->
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped lang="css">
+.files-box {
+    width: 100%;
+    height: 92%;
+    padding: 10px 10px 20px 10px;
+    margin-bottom: 120px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 150px);
+    grid-template-rows: repeat(auto-fill, 200px);
+    grid-row-gap: 10px;
+    grid-column-gap: 10px;
+    justify-content: space-between;
+    align-items: center;
+    overflow-y: auto;
+    
+    
+    .contents {
+        width: 150px; 
+        height: 180px; 
+        background-color: #fff;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .images {
+            width: 100px;
+            height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            i {
+                font-size: 100px;
+                color: #96b0df;
+            }
+
+            .radio {
+                font-size: 80px;
+            }
+
+            .music {
+                font-size: 85px;
+            }
+
+            .image {
+                font-size: 75px;
+            }
+        }
+
+
+        .title {
+            font-size: 15px;
+            color: #252526;
+        }
+
+        .time {
+            font-size: 12px;
+            color: #a0a0a0;
+            margin-top: 5px;
+        }
+    }
+
+    .contents:hover {
+        background-color: #f5f5f5;
+        border-radius: 20px;
+    }
+}
+</style>

src/views/personal/personal.vue

@@ -64,7 +64,7 @@
                 </div>
             </header>
             <footer class="footer">
-                <div></div>
+                <Files></Files>
                 <i class="iconfont icon-jia add"></i>
             </footer>
         </div>
@@ -74,6 +74,7 @@
 <script setup lang="ts">
 import Nav from '@/components/navigation.vue'
 import Search from '@/components/search.vue'
+import Files from '@/views/personal/files.vue'
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 
@@ -146,6 +147,7 @@ const clickMusic = () => {
     width: 100%;
     height: 100%;
     display: flex;
+    overflow: hidden;
 
     .nav {
         width: 80px;
@@ -287,6 +289,8 @@ const clickMusic = () => {
             width: 100%;
             height: 100%;
             box-shadow: 14px 5px 15px 2px rgb(230, 239, 255) inset;
+            padding: 10px 10px 10px 22px;
+
             .add {
                 position: absolute;
                 font-size: 80px;