From bcfc4e12a0a82abcbc30ef2f0777acce99d189fc Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Thu, 23 Oct 2025 21:14:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9B=B8=E5=86=8C=E7=9A=84=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/goods/album/index.vue | 54 +++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/pages/goods/album/index.vue b/src/pages/goods/album/index.vue
index ebf32fc..5223df8 100644
--- a/src/pages/goods/album/index.vue
+++ b/src/pages/goods/album/index.vue
@@ -8,20 +8,22 @@
     </view>
 
     <scroll-view scroll-y class="scroll-container overflow-auto">
-      <view class="pl-8 pr-8 pb-24">
-        <view class="flex flex-wrap">
+      <view class="pl-4 pr-4 pb-24">
+        <view class="grid-container">
           <view
             class="album-item"
             v-for="(item, index) in albumList"
             :key="index"
           >
-            <image
-              class="album-image"
-              :src="item.photoUrl"
-              mode="aspectFill"
-              @click="handlePreview(item.photoUrl)"
-            ></image>
-            <view class="album-title">{{ item.title }}</view>
+            <view class="album-image-wrapper">
+              <image
+                class="album-image"
+                :src="item.photoUrl"
+                mode="aspectFill"
+                @click="handlePreview(item.photoUrl)"
+              ></image>
+              <view class="album-title">{{ item.name }}</view>
+            </view>
           </view>
         </view>
       </view>
@@ -53,35 +55,49 @@ const handlePreview = (photoUrl) => {
 </script>
 
 <style scoped lang="scss">
-.scroll-container {
-  flex: 1;
-  height: 100%;
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); // 每行2列
+  grid-gap: 8px;
+  padding: 12px;
 }
 
 .album-item {
   position: relative;
-  width: calc(50% - 8px);
-  margin: 4px;
+  width: 100%;
+}
+
+.album-image-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1 / 1; // 保持宽高1:1
   border-radius: 8px;
   overflow: hidden;
 }
 
 .album-image {
   width: 100%;
-  height: 150px;
-  border-radius: 8px;
+  height: 100%;
+  object-fit: cover;
 }
 
 .album-title {
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 100%;
+  right: 0;
   padding: 8px;
-  background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, #000000 100%);
-  border-radius: 0 0 8px 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
   color: #fff;
   font-size: 14px;
   font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 0 0 8px 8px;
 }
 </style>