From ccf21dd4d4949dcc316b8d02274dc25b63e9c787 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Wed, 17 Jul 2024 13:49:06 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=94=BB=E5=BB=8A=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/image/square/index.vue | 53 ++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/views/ai/image/square/index.vue b/src/views/ai/image/square/index.vue
index 81643d19..4b89985c 100644
--- a/src/views/ai/image/square/index.vue
+++ b/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);
 }
 
-.card {
-  .img {
-    width: 50%;
-  }
+.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);
+}
+
+.gallery-item:hover {
+  transform: scale(1.05);
+}
+
 </style>