feat: 相册的优化

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"
           >
+            <view class="album-image-wrapper">
               <image
                 class="album-image"
                 :src="item.photoUrl"
                 mode="aspectFill"
                 @click="handlePreview(item.photoUrl)"
               ></image>
-            <view class="album-title">{{ item.title }}</view>
+              <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>