feat: 轮播图交互调整

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">

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;