From c10f2c91bdadf8a222dcd68ac11ae1b9be4afc83 Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Thu, 7 Aug 2025 11:47:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BD=AE=E6=92=AD=E5=9B=BE=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../check/components/content-card/index.vue   | 37 +++++++++++++------
 .../check/components/content-card/style.scss  | 28 ++++++++++----
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue b/src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue
index cc047d7..65111b7 100644
--- a/src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue
+++ b/src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue
@@ -104,6 +104,18 @@ export default {
     const handleSelectImage = (item) => {
       emit('selectImage', item);
     };
+    const onDeleteImage = (e, item, index) => {
+      e.stopPropagation();
+
+      const _newFiles = cloneDeep(props.modelValue.files);
+      _newFiles.splice(index, 1);
+
+      if (item.id === props.selectedImageInfo.id) {
+        emit('selectImage', _newFiles.length ? _newFiles[0] : {});
+      }
+
+      emit('filesChange', _newFiles);
+    };
 
     const renderUpload = (UploadBtn, action = 'upload') => {
       return (
@@ -228,14 +240,14 @@ export default {
                 width={370}
                 height={370}
                 preview={false}
-                class="flex items-center justify-center mb-16px"
+                class="flex items-center justify-center mb-8px"
                 fit="contain"
                 v-slots={{
                   error: () => <img src={icon4} class="w-full h-full" />,
                 }}
               />
 
-              <div class="swiper-wrap h-60px">
+              <div class="swiper-wrap h-78px">
                 <Swiper
                   spaceBetween={16}
                   modules={modules}
@@ -245,31 +257,32 @@ export default {
                     prevEl: '.swiper-button-prev',
                   }}
                 >
-                  {props.modelValue.files.map((item) => (
+                  {props.modelValue.files.map((item, index) => (
                     <SwiperSlide
                       key={item.id}
                       onClick={() => handleSelectImage(item)}
-                      class={`swiper-item !h-48px !w-48px bg-#F7F8FA cursor-pointer rounded-4px overflow-hidden !flex items-center ${
+                      class={`!h-48px !w-48px !relative bg-#F7F8FA cursor-pointer  !flex items-center ${
                         item.id === props.selectedImageInfo.id ? 'active' : ''
                       }`}
                     >
-                      <div class="group relative">
+                      <div class="group relative w-full h-full rounded-5px">
                         <Image
-                          width={48}
-                          height={48}
+                          width={'100%'}
+                          height={'100%'}
                           src={item.url}
                           class="!rounded-4px"
-                          fit="cover"
+                          fit="contain"
                           preview={false}
                           v-slots={{
                             error: () => <img src={icon4} class="w-full h-full" />,
                           }}
                         />
-                        <icon-close-circle-fill
-                          size={16}
-                          class="absolute top--8px right--8px hidden cursor-pointer color-#939499  group-hover:block z-50"
-                        />
                       </div>
+                      <icon-close-circle-fill
+                        size={16}
+                        class="close-icon absolute top--8px right--8px hidden cursor-pointer color-#737478 hover:!color-#211F24 z-50"
+                        onClick={(e) => onDeleteImage(e, item, index)}
+                      />
                     </SwiperSlide>
                   ))}
                   <div class="swiper-box swiper-button-prev">
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/content-card/style.scss b/src/views/creative-generation-workshop/manuscript/check/components/content-card/style.scss
index c79a193..507d4b7 100644
--- a/src/views/creative-generation-workshop/manuscript/check/components/content-card/style.scss
+++ b/src/views/creative-generation-workshop/manuscript/check/components/content-card/style.scss
@@ -75,15 +75,29 @@
       }
     }
     .swiper-wrap {
-      .swiper-item {
-        transition: all;
-        &.active {
-          width: 60px;
-          height: 60px;
-          border: 2px solid var(--Brand-6, #6d4cfe);
-          background: url(<path-to-image>) lightgray 50% / cover no-repeat;
+      :deep(.swiper) {
+        height: 100%;
+        .swiper-wrapper {
+          align-items: center;
+          .swiper-slide {
+            transition: all;
+            &.active {
+              width: 60px !important;
+              height: 60px !important;
+              .group {
+                border: 2px solid var(--Brand-6, #6d4cfe);
+                background: url(<path-to-image>) lightgray 50% / cover no-repeat;
+              }
+            }
+            &:hover {
+              .close-icon {
+                display: block;
+              }
+            }
+          }
         }
       }
+
       .swiper-box {
         position: absolute;
         margin-top: 0 !important;