|
|
|
@ -739,117 +739,117 @@ defineExpose({
|
|
|
|
|
<span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <n-spin :show="loading"> -->
|
|
|
|
|
<div ref="el" class="scroll" :style="listStyle">
|
|
|
|
|
<waterfall :col="8" :data="listData" :gutter-width="10" @finish="finish">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in listData"
|
|
|
|
|
:key="item.calHeight"
|
|
|
|
|
:style="{ height: gridHeight }"
|
|
|
|
|
class="grid-item"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
:key="item.thumburl"
|
|
|
|
|
v-lazy="item.thumburl"
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
}"
|
|
|
|
|
:style="{ height: `${`${item.calHeight}px`}` }"
|
|
|
|
|
class="img"
|
|
|
|
|
alt="加载错误"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<n-image
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
:key="item.imgUrl"
|
|
|
|
|
class="img"
|
|
|
|
|
:img-props="{
|
|
|
|
|
onClick: ($event) => {
|
|
|
|
|
hideDownload($event);
|
|
|
|
|
showClose = true;
|
|
|
|
|
},
|
|
|
|
|
}"
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
}"
|
|
|
|
|
:preview-src="item.imgUrl"
|
|
|
|
|
:src="item.thumburl"
|
|
|
|
|
:fallback-src="bgLoadingImg"
|
|
|
|
|
:style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
|
|
|
|
|
style="display: none"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
v-if="item.states == 3"
|
|
|
|
|
class="tag-status"
|
|
|
|
|
src="@/assets/images/task/tag-pass.png"
|
|
|
|
|
alt=""
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
v-if="item.states == 5"
|
|
|
|
|
class="tag-status"
|
|
|
|
|
src="@/assets/images/task/tag-not-pass.png"
|
|
|
|
|
alt=""
|
|
|
|
|
<n-spin :show="loading">
|
|
|
|
|
<div ref="el" class="scroll" :style="listStyle">
|
|
|
|
|
<waterfall :col="8" :data="listData" :gutter-width="10" @finish="finish">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in listData"
|
|
|
|
|
:key="item.calHeight"
|
|
|
|
|
:style="{ height: gridHeight }"
|
|
|
|
|
class="grid-item"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
:key="item.thumburl"
|
|
|
|
|
v-lazy="item.thumburl"
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
}"
|
|
|
|
|
:style="{ height: `${`${item.calHeight}px`}` }"
|
|
|
|
|
class="img"
|
|
|
|
|
alt="加载错误"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<n-image
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
:key="item.imgUrl"
|
|
|
|
|
class="img"
|
|
|
|
|
:img-props="{
|
|
|
|
|
onClick: ($event) => {
|
|
|
|
|
hideDownload($event);
|
|
|
|
|
showClose = true;
|
|
|
|
|
},
|
|
|
|
|
}"
|
|
|
|
|
:class="{
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
}"
|
|
|
|
|
:preview-src="item.imgUrl"
|
|
|
|
|
:src="item.thumburl"
|
|
|
|
|
:fallback-src="bgLoadingImg"
|
|
|
|
|
:style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
|
|
|
|
|
style="display: none"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div v-if="item.similar != -1" class="percent">
|
|
|
|
|
<SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
|
|
|
|
|
<div class="val">
|
|
|
|
|
{{ `${item.similar}%` }}
|
|
|
|
|
<img
|
|
|
|
|
v-if="item.states == 3"
|
|
|
|
|
class="tag-status"
|
|
|
|
|
src="@/assets/images/task/tag-pass.png"
|
|
|
|
|
alt=""
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
v-if="item.states == 5"
|
|
|
|
|
class="tag-status"
|
|
|
|
|
src="@/assets/images/task/tag-not-pass.png"
|
|
|
|
|
alt=""
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<div v-if="item.similar != -1" class="percent">
|
|
|
|
|
<SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
|
|
|
|
|
<div class="val">
|
|
|
|
|
{{ `${item.similar}%` }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="isAllowDownload" class="glass">
|
|
|
|
|
<SvgIcon
|
|
|
|
|
size="16"
|
|
|
|
|
name="download"
|
|
|
|
|
style="margin-top: -6px; cursor: pointer"
|
|
|
|
|
@click="downloadImage(item)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="isAllowDownload" class="glass">
|
|
|
|
|
<SvgIcon
|
|
|
|
|
size="16"
|
|
|
|
|
name="download"
|
|
|
|
|
style="margin-top: -6px; cursor: pointer"
|
|
|
|
|
@click="downloadImage(item)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<div class="img-name">
|
|
|
|
|
<n-tooltip trigger="hover">
|
|
|
|
|
<template #trigger>
|
|
|
|
|
<span>{{ item.imgName }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<span
|
|
|
|
|
style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
|
|
|
|
|
>{{ item.imgName }}</span>
|
|
|
|
|
</n-tooltip>
|
|
|
|
|
<div class="info">
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<div class="img-name">
|
|
|
|
|
<n-tooltip trigger="hover">
|
|
|
|
|
<template #trigger>
|
|
|
|
|
<span>{{ item.imgName }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<span
|
|
|
|
|
style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
|
|
|
|
|
>{{ item.imgName }}</span>
|
|
|
|
|
</n-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="icon-wrap"
|
|
|
|
|
@click="
|
|
|
|
|
($event) => {
|
|
|
|
|
previewHandler(index, $event);
|
|
|
|
|
hideDownload($event);
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<SvgIcon
|
|
|
|
|
size="13"
|
|
|
|
|
name="magnifying-2"
|
|
|
|
|
style="cursor: pointer; color: #898481"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="icon-wrap"
|
|
|
|
|
@click="
|
|
|
|
|
($event) => {
|
|
|
|
|
previewHandler(index, $event);
|
|
|
|
|
hideDownload($event);
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<SvgIcon
|
|
|
|
|
size="13"
|
|
|
|
|
name="magnifying-2"
|
|
|
|
|
style="cursor: pointer; color: #898481"
|
|
|
|
|
<div class="left">
|
|
|
|
|
<n-avatar
|
|
|
|
|
:src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
|
|
|
|
|
class="avatar"
|
|
|
|
|
round
|
|
|
|
|
/>
|
|
|
|
|
<span>{{ item.upname }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left">
|
|
|
|
|
<n-avatar
|
|
|
|
|
:src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
|
|
|
|
|
class="avatar"
|
|
|
|
|
round
|
|
|
|
|
/>
|
|
|
|
|
<span>{{ item.upname }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</waterfall>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </n-spin> -->
|
|
|
|
|
</waterfall>
|
|
|
|
|
</div>
|
|
|
|
|
</n-spin>
|
|
|
|
|
</div>
|
|
|
|
|
<PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
|
|
|
|
|
<GeneratePackageModal ref="generateModalRef" />
|
|
|
|
|