【优化】优化画廊样式

Author: cherishsince

src/views/ai/image/square/index.vue

@@ -1,23 +1,22 @@
 <template>
-  <div class="card-list">
-    <div v-for="item in publicList" :key="item.id" class="card">
-      <img :src="item.picUrl" class="img" />
+  <div class="gallery">
+    <div v-for="item in publicList" :key="item" class="gallery-item">
+      <img :src="item.picUrl" class="img"/>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ImageApi, ImageVO } from '@/api/ai/image'
+import { ImageApi, ImageVO, ImageMidjourneyButtonsVO } from '@/api/ai/image'
 
 /** 属性 */
-// TODO @fan：queryParams 里面搞分页哈。
 const pageNo = ref<number>(1)
 const pageSize = ref<number>(20)
 const publicList = ref<ImageVO[]>([])
 
 /** 获取数据 */
 const getListData = async () => {
-  const res = await ImageApi.getImagePagePublic({ pageNo: pageNo.value, pageSize: pageSize.value })
-  publicList.value = res.list as ImageVO[]
+  const res = await ImageApi.getImagePagePublic({pageNo: pageNo.value, pageSize: pageSize.value});
+  publicList.value = res.list as ImageVO[];
   console.log('publicList.value', publicList.value)
 }
 
@@ -26,16 +25,38 @@ onMounted(async () => {
 })
 </script>
 <style scoped lang="scss">
-.card-list {
-  //display: flex;
-  //flex-direction: column;
-  column-count: 4;
-  column-gap: 3px;
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
+  //max-width: 1000px;
+  padding: 20px;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.gallery-item {
+  position: relative;
+  overflow: hidden;
+  background: #f0f0f0;
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+
+.gallery-item img {
+  width: 100%;
+  height: auto;
+  display: block;
+  transition: transform 0.3s;
+}
+
+.gallery-item:hover img {
+  transform: scale(1.1);
 }
 
-.card {
-  .img {
-    width: 50%;
-  }
+.gallery-item:hover {
+  transform: scale(1.05);
 }
+
 </style>