From 685c79ec15ea475e0546156152c55474ae09e8b4 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 24 Sep 2024 10:23:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=86=E4=BA=AB?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6grid=E8=A7=86=E5=9B=BE=E4=B8=8B=E7=9A=84?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Breadcrumb/BreadcrumbFilePath.vue         |  1 -
 src/components/Icon/IconFile.vue              |  9 ++++--
 src/components/ShowFile/ShowFile.vue          |  7 +++--
 src/styles/home-index.scss                    |  4 +--
 src/styles/index.scss                         |  3 +-
 src/views/home/mobile/index.vue               |  1 -
 src/views/public/share/shareList.vue          | 29 +++++++++++++++++--
 7 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/components/Breadcrumb/BreadcrumbFilePath.vue b/src/components/Breadcrumb/BreadcrumbFilePath.vue
index 9b18fd3..d328eef 100644
--- a/src/components/Breadcrumb/BreadcrumbFilePath.vue
+++ b/src/components/Breadcrumb/BreadcrumbFilePath.vue
@@ -96,7 +96,6 @@
 <style lang="scss" scoped>
   .share-dir {
     color: #52c41a;
-    margin-right: -0.5rem;
     font-size: 1.2rem !important;
   }
   .redirect {
diff --git a/src/components/Icon/IconFile.vue b/src/components/Icon/IconFile.vue
index 52ea9af..05a9071 100644
--- a/src/components/Icon/IconFile.vue
+++ b/src/components/Icon/IconFile.vue
@@ -57,7 +57,7 @@
         <div v-if="grid && pc" class="grid-play-icon">
           <svg-icon icon-class="play1"/>
         </div>
-        <el-image lazy v-if="grid" :style="{'height':details?'110px':(gridWidth-50) + 'px'}" fit="contain"
+        <el-image :lazy="lazy" v-if="grid" :style="{'height':details?'110px':(gridWidth-50) + 'px'}" fit="contain"
                   :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
           <div slot="error" class="image-slot-error">
             <svg-icon icon-class="video"/>
@@ -131,6 +131,10 @@ export default {
       type: Boolean,
       default: false
     },
+    lazy: {
+      type: Boolean,
+      default: true
+    },
     public: {
       type: Boolean,
       default: false
@@ -148,6 +152,7 @@ export default {
     }
   },
   mounted() {
+    console.log(this.item, this.gridWidth)
   },
   computed: {
     findIconClass() {
@@ -310,7 +315,7 @@ export default {
   line-height: 12px;
 }
 >>> .el-image.cover {
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.5);
 }
 
 </style>
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index c2978c6..a927773 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -463,6 +463,7 @@
               :style="{
                 width: '100%',
                 'max-height': clientHeight - 25 + 'px',
+                rowGap: '8px',
                 overflow: 'auto',
                 'box-shadow':
                   fileListScrollTop > 0
@@ -501,7 +502,7 @@
                   :style="{
                     right: gridPaddingRight + 'px',
                     bottom: '10px',
-                    height: gridItemWidth - 5 + 'px',
+                    height: gridItemWidth + 'px',
                     background: selectRowData.includes(item) ? '#caeaf991' : '',
                     'background-size': 'cover',
                     'background-position': 'center',
@@ -1161,7 +1162,7 @@ export default {
           return filename;
         }
         const singleLine = (item.contentType && item.contentType.startsWith('image')) || item.showCover
-        const gridFilenameLength = singleLine ? 14 : 32
+        const gridFilenameLength = singleLine ? 13 : 28
         // 分离文件名和后缀
         let parts = filename.split('.');
         let suffix = parts.length > 1 ? parts.pop() : '';
@@ -1187,7 +1188,7 @@ export default {
         }
         // 根据是否有后缀返回相应的格式
         if (suffix) {
-          return prev + '…' + '.' + suffix;
+          return prev + '…' + suffix;
         }
         return prev + '…';
       };
diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
index e1649ca..c6bc5b4 100644
--- a/src/styles/home-index.scss
+++ b/src/styles/home-index.scss
@@ -298,7 +298,7 @@
   cursor: default;
   text-align: center;
   color: #606266;
-  font-size: smaller;
+  font-size: small;
   //flex: 1;
   //align-items: center;
   justify-content: space-evenly;
@@ -312,7 +312,7 @@
   cursor: default;
   text-align: center;
   color: #606266;
-  font-size: smaller;
+  font-size: small;
   word-wrap: break-word;
   width: -webkit-fill-available;
   overflow: hidden;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e5b0288..b61433b 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -10,7 +10,8 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   //font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;;
+  //font-family: Menlo,Monaco,Consolas,"Courier New",monospace;;
+  font-family: BlinkMacSystemFont, Inter, "Segoe UI", Roboto, Oxygen, sans-serif;
   .el-tooltip__popper .popper__arrow {
     border-width: 0;
   }
diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue
index dc8dcd5..fa33b5d 100644
--- a/src/views/home/mobile/index.vue
+++ b/src/views/home/mobile/index.vue
@@ -1723,7 +1723,6 @@ input {
 >>> .grid-item-text {
   text-align: center;
   color: #606266;
-  font-size: smaller;
   word-wrap: break-word;
   width: -webkit-fill-available;
   overflow: hidden;
diff --git a/src/views/public/share/shareList.vue b/src/views/public/share/shareList.vue
index b981c10..d5d1582 100644
--- a/src/views/public/share/shareList.vue
+++ b/src/views/public/share/shareList.vue
@@ -214,10 +214,18 @@
               <van-checkbox v-show="gridHoverItemIndex === index || indexList.includes(index)"
                             class="grid-item-checkbox" :name="item" @click.stop="clickGridItemCheckBox(item,index)"/>
               <div class="grid-item-icon">
-                <icon-file v-if="sharer" :item="item" :image-url="imageUrl" :audio-cover-url="audioUrl" :grid="true" :grid-width="gridColumnWidth"
-                           :public="true"></icon-file>
+                <icon-file
+                  v-if="sharer"
+                  :item="item"
+                  :image-url="imageUrl"
+                  :audio-cover-url="audioUrl"
+                  :lazy="false"
+                  grid
+                  :grid-width="gridColumnWidth - 20"
+                ></icon-file>
               </div>
-              <span class="grid-item-text">{{ item.name }}</span>
+
+              <span class="grid-file-text" :style="{ width: gridColumnWidth + 'px' }">{{ item.name }}</span>
             </div>
           </van-grid-item>
         </van-grid>
@@ -1287,5 +1295,20 @@ export default {
   margin-left: 5px !important;
 }
 
+>>> .van-grid-item__content .svg-icon{
+  font-size: 4.5rem;
+}
+
+>>> .grid-file-text {
+  margin-top: 5px;
+  cursor: default;
+  text-align: center;
+  color: #606266;
+  font-size: small;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 </style>