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

perf: 样式调整

Browse Source
This commit is contained in:
rd
2025-08-01 18:28:38 +08:00
parent 0969c806f5
commit 0b358cc19d
4 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/error-img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

20
src/views/creative-generation-workshop/manuscript/components/edit-form/index.vue
View File

@ -10,7 +10,7 @@ import { getProjectList } from '@/api/all/propertyMarketing';
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants.ts'; import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
import { getImagePreSignedUrl, getVideoPreSignedUrl } from '@/api/all/common'; import { getImagePreSignedUrl, getVideoPreSignedUrl } from '@/api/all/common';
import icon1 from '@/assets/img/creative-generation-workshop/icon-close.png'; // import icon1 from '@/assets/img/creative-generation-workshop/icon-close.png';
// 表单验证规则 // 表单验证规则
const FORM_RULES = { const FORM_RULES = {
@ -324,23 +324,21 @@ export default {
}} }}
> >
<div> <div>
<div class="">
{/* 已上传的图片列表 */} {/* 已上传的图片列表 */}
<VueDraggable v-model={formData.value.files} class="grid grid-cols-7 gap-8px"> <VueDraggable v-model={formData.value.files} class="grid grid-cols-7 gap-y-8px">
{formData.value.files?.map((file, index) => ( {formData.value.files?.map((file, index) => (
<div key={index} class="group relative cursor-move"> <div key={index} class="group relative cursor-move overflow-visible py-8px pr-8px">
<img src={file} class="w-100px h-100px object-cover rounded-8px border-1px border-#E6E6E8" /> <div class="group-container relative rounded-8px w-100px h-100px">
<img <img src={file} class=" object-cover w-full h-full border-1px border-#E6E6E8 rounded-8px" />
src={icon1} <icon-close-circle-fill
width={16} size={16}
height={16} class="absolute top--8px right--8px cursor-pointer hidden color-#939499 hidden group-hover:block z-50"
class="absolute top-2px right-2px cursor-pointer hidden group-hover:block"
onClick={() => handleDeleteFile(index)} onClick={() => handleDeleteFile(index)}
/> />
</div> </div>
</div>
))} ))}
</VueDraggable> </VueDraggable>
</div>
{formData.value.files?.length < 18 && ( {formData.value.files?.length < 18 && (
<Upload <Upload
ref={uploadRef} ref={uploadRef}

3
src/views/creative-generation-workshop/manuscript/components/edit-form/style.scss
View File

@ -22,10 +22,11 @@
} }
} }
.group { .group {
cursor: move;
border-radius: 8px; border-radius: 8px;
&:hover { &:hover {
.group-container {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
url(<path-to-image>) lightgray 0px -40.771px / 100% 149.766% no-repeat; url(<path-to-image>) lightgray 0px -40.771px / 100% 149.766% no-repeat;
} }
} }
}

7
src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/index.vue
View File

@ -71,7 +71,11 @@
{{ exactFormatTime(record[column.dataIndex]) }} {{ exactFormatTime(record[column.dataIndex]) }}
</template> </template>
<template v-else-if="column.dataIndex === 'cover'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'cover'" #cell="{ record }">
<a-image :width="64" :height="64" :src="record.cover" class="!rounded-6px" /> <a-image :width="64" :height="64" :src="record.cover" class="!rounded-6px">
<template #error>
<img :src="icon4" class="w-full h-full" />
</template>
</a-image>
</template> </template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<div class="flex items-center"> <div class="flex items-center">
@ -99,6 +103,7 @@ import TextOverTips from '@/components/text-over-tips';
import icon1 from '@/assets/img/media-account/icon-delete.png'; import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png'; import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png'; import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
import icon4 from '@/assets/img/error-img.png';
const emits = defineEmits(['edit', 'sorterChange', 'delete']); const emits = defineEmits(['edit', 'sorterChange', 'delete']);
const router = useRouter(); const router = useRouter();