renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 轮播图交互调整

Browse Source
This commit is contained in:
rd
2025-08-07 11:47:02 +08:00
parent a164ec9fec
commit c10f2c91bd
2 changed files with 46 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue
View File

@ -104,6 +104,18 @@ export default {
const handleSelectImage = (item) => { const handleSelectImage = (item) => {
emit('selectImage', 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') => { const renderUpload = (UploadBtn, action = 'upload') => {
return ( return (
@ -228,14 +240,14 @@ export default {
width={370} width={370}
height={370} height={370}
preview={false} preview={false}
class="flex items-center justify-center mb-16px" class="flex items-center justify-center mb-8px"
fit="contain" fit="contain"
v-slots={{ v-slots={{
error: () => <img src={icon4} class="w-full h-full" />, error: () => <img src={icon4} class="w-full h-full" />,
}} }}
/> />
<div class="swiper-wrap h-60px"> <div class="swiper-wrap h-78px">
<Swiper <Swiper
spaceBetween={16} spaceBetween={16}
modules={modules} modules={modules}
@ -245,31 +257,32 @@ export default {
prevEl: '.swiper-button-prev', prevEl: '.swiper-button-prev',
}} }}
> >
{props.modelValue.files.map((item) => ( {props.modelValue.files.map((item, index) => (
<SwiperSlide <SwiperSlide
key={item.id} key={item.id}
onClick={() => handleSelectImage(item)} 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' : '' item.id === props.selectedImageInfo.id ? 'active' : ''
}`} }`}
> >
<div class="group relative"> <div class="group relative w-full h-full rounded-5px">
<Image <Image
width={48} width={'100%'}
height={48} height={'100%'}
src={item.url} src={item.url}
class="!rounded-4px" class="!rounded-4px"
fit="cover" fit="contain"
preview={false} preview={false}
v-slots={{ v-slots={{
error: () => <img src={icon4} class="w-full h-full" />, 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> </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> </SwiperSlide>
))} ))}
<div class="swiper-box swiper-button-prev"> <div class="swiper-box swiper-button-prev">

28
src/views/creative-generation-workshop/manuscript/check/components/content-card/style.scss
View File

@ -75,15 +75,29 @@
} }
} }
.swiper-wrap { .swiper-wrap {
.swiper-item { :deep(.swiper) {
transition: all; height: 100%;
&.active { .swiper-wrapper {
width: 60px; align-items: center;
height: 60px; .swiper-slide {
border: 2px solid var(--Brand-6, #6d4cfe); transition: all;
background: url(<path-to-image>) lightgray 50% / cover no-repeat; &.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 { .swiper-box {
position: absolute; position: absolute;
margin-top: 0 !important; margin-top: 0 !important;