From f63ac7bae9504e098f1f0458e8a451a661da53b6 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 27 Jul 2025 11:31:15 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90AI=20=E5=A4=A7=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E3=80=91image/index/ImageCard=20=E5=85=88=E6=8D=A2?=
 =?UTF-8?q?=E6=88=90=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai/image/index/components/ImageCard.vue   | 72 +++++--------------
 1 file changed, 19 insertions(+), 53 deletions(-)

diff --git a/src/views/ai/image/index/components/ImageCard.vue b/src/views/ai/image/index/components/ImageCard.vue
index 4ba78cac8..d8a543758 100644
--- a/src/views/ai/image/index/components/ImageCard.vue
+++ b/src/views/ai/image/index/components/ImageCard.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-card body-class="" class="image-card">
-    <div class="image-operation">
+  <el-card body-class="" style="width: 320px; height: auto; border-radius: 10px; position: relative; display: flex; flex-direction: column;">
+    <div style="display: flex; flex-direction: row; justify-content: space-between;">
       <div>
         <el-button type="primary" text bg v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS">
           生成中
@@ -15,24 +15,34 @@
       <!-- 操作区 -->
       <div>
         <el-button
-          class="btn"
+          style="padding: 10px; margin: 0;"
           text
           :icon="Download"
           @click="handleButtonClick('download', detail)"
         />
         <el-button
-          class="btn"
+          style="padding: 10px; margin: 0;"
           text
           :icon="RefreshRight"
           @click="handleButtonClick('regeneration', detail)"
         />
-        <el-button class="btn" text :icon="Delete" @click="handleButtonClick('delete', detail)" />
-        <el-button class="btn" text :icon="More" @click="handleButtonClick('more', detail)" />
+        <el-button
+          style="padding: 10px; margin: 0;"
+          text
+          :icon="Delete"
+          @click="handleButtonClick('delete', detail)"
+        />
+        <el-button
+          style="padding: 10px; margin: 0;"
+          text
+          :icon="More"
+          @click="handleButtonClick('more', detail)"
+        />
       </div>
     </div>
-    <div class="image-wrapper" ref="cardImageRef">
+    <div style="overflow: hidden; margin-top: 20px; height: 280px; flex: 1;" ref="cardImageRef">
       <el-image
-        class="image"
+        style="width: 100%; border-radius: 10px;"
         :src="detail?.picUrl"
         :preview-src-list="[detail.picUrl]"
         preview-teleported
@@ -42,7 +52,7 @@
       </div>
     </div>
     <!-- Midjourney 专属操作 -->
-    <div class="image-mj-btns">
+    <div style="margin-top: 5px; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;">
       <el-button
         size="small"
         v-for="button in detail?.buttons"
@@ -116,47 +126,3 @@ onMounted(async () => {
   await handleLoading(props.detail.status as string)
 })
 </script>
-
-<style scoped lang="scss">
-.image-card {
-  width: 320px;
-  height: auto;
-  border-radius: 10px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  .image-operation {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    .btn {
-      //border: 1px solid red;
-      padding: 10px;
-      margin: 0;
-    }
-  }
-
-  .image-wrapper {
-    overflow: hidden;
-    margin-top: 20px;
-    height: 280px;
-    flex: 1;
-
-    .image {
-      width: 100%;
-      border-radius: 10px;
-    }
-  }
-
-  .image-mj-btns {
-    margin-top: 5px;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-}
-</style>