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

28
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 { 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 = {
@ -324,23 +324,21 @@ export default {
}}
>
<div>
<div class="">
{/* 已上传的图片列表 */}
<VueDraggable v-model={formData.value.files} class="grid grid-cols-7 gap-8px">
{formData.value.files?.map((file, index) => (
<div key={index} class="group relative cursor-move">
<img src={file} class="w-100px h-100px object-cover rounded-8px border-1px border-#E6E6E8" />
<img
src={icon1}
width={16}
height={16}
class="absolute top-2px right-2px cursor-pointer hidden group-hover:block"
{/* 已上传的图片列表 */}
<VueDraggable v-model={formData.value.files} class="grid grid-cols-7 gap-y-8px">
{formData.value.files?.map((file, index) => (
<div key={index} class="group relative cursor-move overflow-visible py-8px pr-8px">
<div class="group-container relative rounded-8px w-100px h-100px">
<img src={file} class=" object-cover w-full h-full border-1px border-#E6E6E8 rounded-8px" />
<icon-close-circle-fill
size={16}
class="absolute top--8px right--8px cursor-pointer hidden color-#939499 hidden group-hover:block z-50"
onClick={() => handleDeleteFile(index)}
/>
</div>
))}
</VueDraggable>
</div>
</div>
))}
</VueDraggable>
{formData.value.files?.length < 18 && (
<Upload
ref={uploadRef}

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

@ -22,10 +22,11 @@
}
}
.group {
cursor: move;
border-radius: 8px;
&:hover {
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;
.group-container {
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;
}
}
}
}

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

@ -71,7 +71,11 @@
{{ exactFormatTime(record[column.dataIndex]) }}
</template>
<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 v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<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 icon2 from '@/assets/img/creative-generation-workshop/icon-photo.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 router = useRouter();