From 3765aa57b683f00b609bad8b5d9a9722f271fbac Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Fri, 18 Jul 2025 16:03:56 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96grid=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E9=98=B4=E5=BD=B1=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ShowFile/ShowFile.vue | 178 +++++++++++++++------------
 src/styles/home-index.scss           |   2 +-
 2 files changed, 97 insertions(+), 83 deletions(-)

diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 1a1dd48..698d717 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -351,19 +351,16 @@
           </div>
         </div>
       </el-breadcrumb>
-      <div>
-        <!--统计信息-->
-        <div class="info-statistics">
+      <div class="info-statistics">
           <span v-if="listModeSearch"
-            >{{ this.pagination['total'] }}个结果:&nbsp;</span
+          >{{ this.pagination['total'] }}个结果:&nbsp;</span
           >
-          <span v-if="tableLoading">获取更多数据...</span>
-          <span v-if="!tableLoading">{{
+        <span v-if="tableLoading">获取更多数据...</span>
+        <span v-if="!tableLoading">{{
             !finished
               ? '已加载 ' + getSummaries3
               : '已全部加载 ' + getSummaries3
           }}</span>
-        </div>
       </div>
 
       <!--右键菜单-->
@@ -527,85 +524,83 @@
           <van-checkbox-group
             ref="checkboxGroup"
           >
-            <van-grid
-              :center="true"
-              :column-num="gridColumnNum"
-              :border="false"
-              :style="{
-                width: '100%',
-                maxHeight: clientHeight - 25 + 'px',
-                minHeight: gridMinHeight + 'px',
-                rowGap: '10px',
-                overflow: 'auto',
-                paddingBottom: '12px',
-                'box-shadow':
-                  fileListScrollTop > 0
-                    ? '-1px -1px 4px #00152914'
-                    : '-1px -1px 4px #ffffff',
-              }"
-            >
-              <van-grid-item
-                v-for="(item, index) in fileList"
-                :key="item.id"
-                :style="{paddingTop: 100/gridColumnNum + '%'}"
+            <div :class="fileListScrollTop > 0 ? 'shadow-container' : ''">
+              <van-grid
+                :center="true"
+                :column-num="gridColumnNum"
+                :border="false"
+                :style="{
+                  width: '100%',
+                  maxHeight: clientHeight - 25 + 'px',
+                  minHeight: gridMinHeight + 'px',
+                  rowGap: '10px',
+                  overflow: 'auto',
+                  paddingBottom: '12px',
+                }"
               >
-                <div
-                  class="grid-item van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
-                  :style="{
-                    right: gridPaddingRight + 'px',
-                    bottom: '10px',
-                    height: gridItemWidth + 'px',
-                    background: selectRowData.includes(item) ? '#caeaf991' : '',
-                    'background-size': 'cover',
-                    'background-position': 'center',
-                    'box-shadow': selectRowData.includes(item) ? '0 4px 12px var(--apple-shadow-color)' : '',
-                    'transition': 'box-shadow 0.3s ease, transform 0.3s ease;',
-                    border: selectRowData.includes(item)
-                      ? 'solid 1px var(--apple-shadow-color)'
-                      : '',
-                  }"
-                  v-tooltip="tooltipConfig(item)"
-                  @click="gridItemClick(item, $event)"
-                  @dblclick="fileClick(item, $event)"
-                  @contextmenu.prevent="rowContextmenu(item)"
-                >
-                  <div
-                    class="grid-hover-back grid-hover van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
+                  <van-grid-item
+                    v-for="(item, index) in fileList"
+                    :key="item.id"
+                    :style="{paddingTop: 100/gridColumnNum + '%'}"
                   >
-                    <div class="grid-item-icon">
-                      <icon-file
-                        :item="item"
-                        :image-url="imageUrl"
-                        :audio-cover-url="audioCoverUrl"
-                        :grid="true"
-                        :grid-width="gridItemWidth"
-                      ></icon-file>
-                    </div>
-                    <el-input
-                      v-if="item.index === editingIndex"
-                      v-focus
-                      v-model="renameFileName"
-                      class="grid-item-text-input"
-                      placeholder=""
-                      type="textarea"
-                      autosize
-                      size="small"
-                      @focus="
-                        renameInputFocus($event.currentTarget, item.suffix)
-                      "
-                      @blur="setInputBlur()"
-                      @keyup.enter.prevent.native="
-                        rowRename(renameFileName, item)
-                      "
+                    <div
+                      class="grid-item van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
+                      :style="{
+                      right: gridPaddingRight + 'px',
+                      bottom: '10px',
+                      height: gridItemWidth + 'px',
+                      background: selectRowData.includes(item) ? '#caeaf991' : '',
+                      'background-size': 'cover',
+                      'background-position': 'center',
+                      'box-shadow': selectRowData.includes(item) ? '0 4px 12px var(--apple-shadow-color)' : '',
+                      'transition': 'box-shadow 0.3s ease, transform 0.3s ease;',
+                      border: selectRowData.includes(item)
+                        ? 'solid 1px var(--apple-shadow-color)'
+                        : '',
+                    }"
+                      v-tooltip="tooltipConfig(item)"
+                      @click="gridItemClick(item, $event)"
+                      @dblclick="fileClick(item, $event)"
+                      @contextmenu.prevent="rowContextmenu(item)"
                     >
-                    </el-input>
-                    <div v-if="item.index !== editingIndex" class="grid-item-text">
-                      <span>{{ gridFilename(item) }}</span>
+                      <div
+                        class="grid-hover-back grid-hover van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
+                      >
+                        <div class="grid-item-icon">
+                          <icon-file
+                            :item="item"
+                            :image-url="imageUrl"
+                            :audio-cover-url="audioCoverUrl"
+                            :grid="true"
+                            :grid-width="gridItemWidth"
+                          ></icon-file>
+                        </div>
+                        <el-input
+                          v-if="item.index === editingIndex"
+                          v-focus
+                          v-model="renameFileName"
+                          class="grid-item-text-input"
+                          placeholder=""
+                          type="textarea"
+                          autosize
+                          size="small"
+                          @focus="
+                          renameInputFocus($event.currentTarget, item.suffix)
+                        "
+                          @blur="setInputBlur()"
+                          @keyup.enter.prevent.native="
+                          rowRename(renameFileName, item)
+                        "
+                        >
+                        </el-input>
+                        <div v-if="item.index !== editingIndex" class="grid-item-text">
+                          <span>{{ gridFilename(item) }}</span>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
-              </van-grid-item>
-            </van-grid>
+                  </van-grid-item>
+              </van-grid>
+            </div>
           </van-checkbox-group>
         </div>
         <table class="drag-table" id="drag-table"></table>
@@ -4946,6 +4941,25 @@ export default {
   justify-content: space-between;
 }
 
+.shadow-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: white;
+}
+
+.shadow-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 0px, transparent 4px);
+  pointer-events: none;
+  z-index: 10;
+}
+
 >>> .van-grid-item__content {
   background-size: cover;
   background-position: center;
diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
index 268551a..98d4e27 100644
--- a/src/styles/home-index.scss
+++ b/src/styles/home-index.scss
@@ -283,7 +283,7 @@
 }
 
 >>> .van-grid {
-  padding-left: 20px;
+  padding: 0 0 0 20px;
 }
 
 >>> .van-grid-item__content .svg-icon{