2025-05-20 16:47:27 +08:00
|
|
|
|
<template>
|
2025-06-18 22:57:10 +08:00
|
|
|
|
<div class="designPage">
|
|
|
|
|
|
<div class="page_content">
|
|
|
|
|
|
<div class="page_content_body">
|
|
|
|
|
|
<div class="designPage_body">
|
|
|
|
|
|
<div class="designPage_left" ref="hidden">
|
|
|
|
|
|
<div class="designPage_left_content" :class="{ active: domHidden }">
|
|
|
|
|
|
<!-- 有图状态 start-->
|
|
|
|
|
|
|
|
|
|
|
|
<div class="home_left_info">
|
|
|
|
|
|
<div class="left_info_content scroll_style">
|
|
|
|
|
|
<div class="left_info_content_body" ref="collection_canvas">
|
|
|
|
|
|
<div class="right_content_header">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="content_header_left"
|
|
|
|
|
|
style="padding-top: 2rem"
|
|
|
|
|
|
>
|
|
|
|
|
|
<i class="fi fi-rs-comments"></i
|
|
|
|
|
|
><span class="content_header_des">
|
|
|
|
|
|
{{ $t("HomeView.elementTitle") }}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<NewCollectionReview
|
|
|
|
|
|
id="collectionReview"
|
|
|
|
|
|
@openCollection="openCollection"
|
|
|
|
|
|
></NewCollectionReview>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div v-show="isMannequinShow" class="left_info_hint">
|
|
|
|
|
|
<span class="icon iconfont icon-zhuyi"></span>
|
|
|
|
|
|
<span>{{ $t("HomeView.masnnequinHint") }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 有图状态 end-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="designPage_left_bottom"
|
|
|
|
|
|
@click="setShowHide('domHidden')"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="icon iconfont icon-xiala"
|
|
|
|
|
|
:class="{ active: domHidden }"
|
|
|
|
|
|
></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="designPage_right">
|
|
|
|
|
|
<div class="right_top">
|
|
|
|
|
|
<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
|
|
|
|
|
|
<div class="right_top_left">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="gallery_btn white Guide_1_15"
|
|
|
|
|
|
@click="designNewCollection()"
|
|
|
|
|
|
>
|
|
|
|
|
|
<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
|
|
|
|
|
|
{{ $t("HomeView.Design") }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
|
2025-05-20 16:47:27 +08:00
|
|
|
|
@click="resDesignCollection()">
|
|
|
|
|
|
{{ $t('HomeView.Redesign') }}
|
|
|
|
|
|
</div> -->
|
2025-06-18 22:57:10 +08:00
|
|
|
|
<div
|
|
|
|
|
|
class="silder button_margin_14"
|
|
|
|
|
|
v-show="likeDesignCollectionList?.length > 0"
|
|
|
|
|
|
></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="right_top_right"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="right_content_block_box">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="right_content_block"
|
|
|
|
|
|
ref="rightContentBlockBox"
|
|
|
|
|
|
@mouseenter="mouseenter($event, 'like')"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="right_content_body">
|
|
|
|
|
|
<div class="right_content_header">
|
|
|
|
|
|
<div class="content_header_left">
|
|
|
|
|
|
<i class="fi fi-rs-comments"></i
|
|
|
|
|
|
><span class="content_header_des">
|
|
|
|
|
|
{{ $t("HomeView.SelectedDesign") }}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="generalModel_state"
|
|
|
|
|
|
v-show="domHidden || !recycleDomHidden"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
v-show="isUnfold"
|
|
|
|
|
|
class="generalModel_state_item smail"
|
|
|
|
|
|
style="margin-right: 1rem"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>Type :</span>
|
|
|
|
|
|
<a-select
|
|
|
|
|
|
v-model:value="resultType"
|
|
|
|
|
|
size="large"
|
|
|
|
|
|
style="width: 15rem"
|
|
|
|
|
|
placeholder="Please select"
|
|
|
|
|
|
:options="resultTypeList"
|
|
|
|
|
|
@change="changeResultType"
|
|
|
|
|
|
>
|
|
|
|
|
|
</a-select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
@click="setUnfold"
|
|
|
|
|
|
class="generalModel_state_item smail"
|
|
|
|
|
|
style="margin-right: 1rem"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>Unfold :</span>
|
|
|
|
|
|
<a-switch
|
|
|
|
|
|
v-model:checked="isUnfold"
|
|
|
|
|
|
@change="setUnfold"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="generalModel_state_item smail"
|
|
|
|
|
|
style="margin-right: 0"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>Size :</span>
|
|
|
|
|
|
<a-select
|
|
|
|
|
|
v-model:value="widthValue.value"
|
|
|
|
|
|
size="large"
|
|
|
|
|
|
style="width: 15rem"
|
|
|
|
|
|
placeholder="Please select"
|
|
|
|
|
|
:options="widthList"
|
|
|
|
|
|
@change="setSystemDesigner(500)"
|
|
|
|
|
|
>
|
|
|
|
|
|
</a-select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="right_content_img_block scroll_style active">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="right_content_img_item"
|
|
|
|
|
|
ref="likeItemDom"
|
|
|
|
|
|
designType="like"
|
|
|
|
|
|
:index="0"
|
|
|
|
|
|
>
|
|
|
|
|
|
<!-- likeDesignCollectionList -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="content_img_block content_img_GetWidth active"
|
|
|
|
|
|
:style="likeStyle"
|
|
|
|
|
|
v-for="(design, index) in selectLikeDesign"
|
|
|
|
|
|
:key="design.id || design.designItemId"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="content_img_flex"
|
|
|
|
|
|
:class="[design.resultType]"
|
|
|
|
|
|
@mouseenter="
|
|
|
|
|
|
startHover(getMousePosition($event, false), design)
|
|
|
|
|
|
"
|
|
|
|
|
|
@mouseleave="
|
|
|
|
|
|
endHover(getMousePosition($event, false), design)
|
|
|
|
|
|
"
|
|
|
|
|
|
@mousedown.stop="
|
|
|
|
|
|
designMousedown(
|
|
|
|
|
|
getMousePosition($event, false),
|
|
|
|
|
|
design,
|
|
|
|
|
|
'like'
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
@touchstart.passive="
|
|
|
|
|
|
designMousedown(
|
|
|
|
|
|
getMousePosition($event, true),
|
|
|
|
|
|
design,
|
|
|
|
|
|
'like'
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
@click="
|
|
|
|
|
|
designDetail(
|
|
|
|
|
|
design,
|
|
|
|
|
|
index,
|
|
|
|
|
|
selectLikeDesign,
|
|
|
|
|
|
'like'
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
<img
|
|
|
|
|
|
class="content_img"
|
|
|
|
|
|
v-if="design.resultType == 'PoseTransfer'"
|
|
|
|
|
|
:src="design.firstFrameUrl"
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
@mouseenter.stop="gifPlay($event, design)"
|
|
|
|
|
|
@mouseleave.stop="gifPause($event, design)"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<img
|
|
|
|
|
|
class="content_img"
|
|
|
|
|
|
v-show="!design?.generateAwait"
|
|
|
|
|
|
:src="design.designOutfitUrl || design.url"
|
|
|
|
|
|
:key="design.designOutfitUrl"
|
|
|
|
|
|
designType="like"
|
|
|
|
|
|
:index="index"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<a-spin
|
|
|
|
|
|
v-show="design?.generateAwait"
|
|
|
|
|
|
size="large"
|
|
|
|
|
|
></a-spin>
|
2025-06-18 11:05:23 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
<!-- <div class="content_img_block_child" @click.stop>
|
2025-06-18 11:05:23 +08:00
|
|
|
|
<div class="content_img_block content_img_GetWidth active childItem"
|
|
|
|
|
|
:style="likeStyle"
|
|
|
|
|
|
v-for="childItem,childIndex in design.childList"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="content_img_flex">
|
|
|
|
|
|
<img class="content_img" v-show="!design?.generateAwait" :src="childItem.designOutfitUrl||childItem.url" alt="">
|
|
|
|
|
|
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn" v-show="!childItem?.generateAwait">
|
|
|
|
|
|
<i @click.stop="openEditBtn(childItem,childIndex,$event)" class="fi fi-br-menu-dots-vertical"></i>
|
2025-06-03 14:57:18 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-06-18 11:05:23 +08:00
|
|
|
|
<div class="content_img_block content_img_GetWidth active childItem"
|
|
|
|
|
|
:style="likeStyle"
|
|
|
|
|
|
v-for="childItem,childIndex in design.childList"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="content_img_flex">
|
|
|
|
|
|
<img class="content_img" v-show="!design?.generateAwait" :src="childItem.designOutfitUrl||childItem.url" alt="">
|
|
|
|
|
|
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn" v-show="!childItem?.generateAwait">
|
|
|
|
|
|
<i @click.stop="openEditBtn(childItem,childIndex,$event)" class="fi fi-br-menu-dots-vertical"></i>
|
|
|
|
|
|
</div>
|
2025-06-03 14:57:18 +08:00
|
|
|
|
</div>
|
2025-06-18 11:05:23 +08:00
|
|
|
|
</div> -->
|
2025-06-18 22:57:10 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn" v-show="!design?.generateAwait">
|
|
|
|
|
|
<i
|
|
|
|
|
|
@click.stop="openEditBtn(design, index, $event)"
|
|
|
|
|
|
class="fi fi-br-menu-dots-vertical"
|
|
|
|
|
|
></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="right_content_block recycleBin"
|
|
|
|
|
|
@mouseenter="mouseenter($event, 'recycle')"
|
|
|
|
|
|
:class="{ recycleBinShow: recycleDomHidden }"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="right_content_body">
|
|
|
|
|
|
<div class="right_content_header">
|
|
|
|
|
|
<div class="content_header_left">
|
|
|
|
|
|
<i class="fi fi-rs-comments"></i
|
|
|
|
|
|
><span class="content_header_des">
|
|
|
|
|
|
{{ $t("HomeView.GeneratedDesign") }}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="right_content_img_block scroll_style Guide_1_17"
|
|
|
|
|
|
:class="[driver__.driver ? 'showEvents' : '']"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="right_content_img_item"
|
|
|
|
|
|
ref="collItemDom"
|
|
|
|
|
|
designType="disLike"
|
|
|
|
|
|
:index="0"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="content_img_block"
|
|
|
|
|
|
v-show="showDesignMark"
|
|
|
|
|
|
:style="collStyle"
|
|
|
|
|
|
>
|
|
|
|
|
|
<a-spin size="large" class="content_img_flex"></a-spin>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="content_img_block content_img_GetWidth"
|
|
|
|
|
|
v-for="(design, index) in designCollectionList"
|
|
|
|
|
|
:key="design?.designItemId"
|
|
|
|
|
|
:style="collStyle"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="content_img_flex"
|
|
|
|
|
|
:class="[
|
|
|
|
|
|
driver__.driver && driver__.index == 32
|
|
|
|
|
|
? 'hideEvents'
|
|
|
|
|
|
: '',
|
|
|
|
|
|
]"
|
|
|
|
|
|
@mousedown.stop="
|
|
|
|
|
|
designMousedown(
|
|
|
|
|
|
getMousePosition($event, false),
|
|
|
|
|
|
design.designItemId || design.id,
|
|
|
|
|
|
'disLike'
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
@touchstart.passive="
|
|
|
|
|
|
designMousedown(
|
|
|
|
|
|
getMousePosition($event, true),
|
|
|
|
|
|
design.designItemId || design.id,
|
|
|
|
|
|
'disLike'
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
@click="
|
|
|
|
|
|
designDetail(
|
|
|
|
|
|
design,
|
|
|
|
|
|
index,
|
|
|
|
|
|
designCollectionList,
|
|
|
|
|
|
'disLike'
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
<img
|
|
|
|
|
|
class="content_img"
|
|
|
|
|
|
v-if="design.resultType == 'PoseTransfer'"
|
|
|
|
|
|
:src="design.firstFrameUrl"
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
@mouseenter.stop="gifPlay($event, design)"
|
|
|
|
|
|
@mouseleave.stop="gifPause($event, design)"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<img
|
|
|
|
|
|
class="content_img"
|
|
|
|
|
|
v-show="!design?.generateAwait"
|
|
|
|
|
|
:src="design.designOutfitUrl || design.url"
|
|
|
|
|
|
designType="disLike"
|
|
|
|
|
|
:index="index"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<a-spin
|
|
|
|
|
|
v-show="design?.generateAwait"
|
|
|
|
|
|
size="large"
|
|
|
|
|
|
></a-spin>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="icon iconfont icon-jushoucang icon_like"
|
|
|
|
|
|
@click="
|
|
|
|
|
|
likeDesignCollection(
|
|
|
|
|
|
design,
|
|
|
|
|
|
index,
|
|
|
|
|
|
design.resultType
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
></div>
|
|
|
|
|
|
<i
|
|
|
|
|
|
class="fi fi-rr-trash icon_delete"
|
|
|
|
|
|
@click="setDeleteDesign(design, index)"
|
|
|
|
|
|
>
|
|
|
|
|
|
</i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="designPage_left_bottom"
|
|
|
|
|
|
:class="{ active: recycleDomHidden }"
|
|
|
|
|
|
@click="setShowHide('recycleDomHidden')"
|
|
|
|
|
|
v-show="designCollectionId"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="icon iconfont icon-xiala"
|
|
|
|
|
|
:class="{ active: recycleDomHidden }"
|
|
|
|
|
|
></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
ref="designBtn"
|
|
|
|
|
|
class="btnOpen"
|
|
|
|
|
|
@click.stop="() => (openEditBtnId = -1)"
|
|
|
|
|
|
:class="{
|
|
|
|
|
|
active:
|
|
|
|
|
|
openEditBtnId == selectEditBtn?.designItemId ||
|
|
|
|
|
|
openEditBtnId == selectEditBtn?.id,
|
|
|
|
|
|
}"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="item"
|
|
|
|
|
|
@click="
|
|
|
|
|
|
dislikeDesignCollection(
|
|
|
|
|
|
selectEditBtn,
|
|
|
|
|
|
selectEditBtn?.resultType,
|
|
|
|
|
|
selectEditBtnIndex
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="text">Delete</div>
|
|
|
|
|
|
<i class="fi fi-rr-trash icon_delete"> </i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="item"
|
|
|
|
|
|
v-show="selectEditBtn?.resultType == 'ToProductImage'"
|
|
|
|
|
|
@click="
|
|
|
|
|
|
setEditDesignType(
|
|
|
|
|
|
selectLikeDesign,
|
|
|
|
|
|
selectEditBtnIndex,
|
|
|
|
|
|
'PoseTransfer',
|
|
|
|
|
|
'add',
|
|
|
|
|
|
'like'
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="text">Transfer Pose</div>
|
|
|
|
|
|
<i class="fi fi fi-rr-play-alt"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="item"
|
|
|
|
|
|
v-show="selectEditBtn?.resultType == 'ToProductImage'"
|
|
|
|
|
|
@click="
|
|
|
|
|
|
setEditDesignType(
|
|
|
|
|
|
selectLikeDesign,
|
|
|
|
|
|
selectEditBtnIndex,
|
|
|
|
|
|
'Relight',
|
|
|
|
|
|
'add',
|
|
|
|
|
|
'like'
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="text">Relight</div>
|
|
|
|
|
|
<i class="fi fi fi-br-keyboard-brightness"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="item"
|
|
|
|
|
|
v-show="selectEditBtn?.resultType == 'Design'"
|
|
|
|
|
|
@click="
|
|
|
|
|
|
setEditDesignType(
|
|
|
|
|
|
selectLikeDesign,
|
|
|
|
|
|
selectEditBtnIndex,
|
|
|
|
|
|
'ToProductImage',
|
|
|
|
|
|
'add',
|
|
|
|
|
|
'like'
|
|
|
|
|
|
)
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="text">To Product Image</div>
|
|
|
|
|
|
<i class="fi fi fi-ss-box-open"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<collectionModal ref="collectionModal"></collectionModal>
|
|
|
|
|
|
<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
|
|
|
|
|
|
<!-- 导出缩略图的蒙层 start-->
|
|
|
|
|
|
<div class="mark_loading" v-show="isShowMark">
|
|
|
|
|
|
<a-spin size="large" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 导出缩略图的蒙层 end-->
|
|
|
|
|
|
<!-- design collection的进度蒙层 start-->
|
|
|
|
|
|
<!-- design collection的进度蒙层 end-->
|
|
|
|
|
|
<affiche ref="affiche"></affiche>
|
|
|
|
|
|
<DesignDetailcopy
|
|
|
|
|
|
v-if="detailDestroy"
|
|
|
|
|
|
ref="designDetail"
|
|
|
|
|
|
@destroy="setDetailDestroy"
|
|
|
|
|
|
@finishRedesign="finishRedesign"
|
|
|
|
|
|
></DesignDetailcopy>
|
|
|
|
|
|
<editDesignType
|
|
|
|
|
|
ref="editDesignType"
|
|
|
|
|
|
@addGenerateImg="addGenerateImg"
|
|
|
|
|
|
:productData="{
|
|
|
|
|
|
upload: upload,
|
|
|
|
|
|
RelightDirection: RelightDirection,
|
|
|
|
|
|
RelightDirectionList: RelightDirectionList,
|
|
|
|
|
|
}"
|
|
|
|
|
|
@setGenerateAwait="setGenerateAwait"
|
|
|
|
|
|
:isProductimg="true"
|
|
|
|
|
|
></editDesignType>
|
|
|
|
|
|
</div>
|
2025-05-20 16:47:27 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
2025-06-18 22:57:10 +08:00
|
|
|
|
import {
|
|
|
|
|
|
defineComponent,
|
|
|
|
|
|
h,
|
|
|
|
|
|
ref,
|
|
|
|
|
|
computed,
|
|
|
|
|
|
toRefs,
|
|
|
|
|
|
inject,
|
|
|
|
|
|
provide,
|
|
|
|
|
|
nextTick,
|
|
|
|
|
|
reactive,
|
|
|
|
|
|
onBeforeUnmount,
|
|
|
|
|
|
toRef,
|
|
|
|
|
|
watch,
|
|
|
|
|
|
} from "vue";
|
2025-05-20 16:47:27 +08:00
|
|
|
|
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
|
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
|
|
|
|
|
|
import generalCanvas from "@/component/modules/generalCanvas.vue";
|
|
|
|
|
|
import affiche from "@/component/HomePage/affiche.vue";
|
|
|
|
|
|
import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
|
|
|
|
|
|
import html2canvas from "html2canvas";
|
2025-06-18 22:57:10 +08:00
|
|
|
|
import { message, Modal } from "ant-design-vue";
|
2025-05-20 16:47:27 +08:00
|
|
|
|
import { useStore } from "vuex";
|
|
|
|
|
|
import { Https } from "@/tool/https";
|
2025-06-18 22:57:10 +08:00
|
|
|
|
import { openGuide, driverObj__ } from "@/tool/guide";
|
|
|
|
|
|
import {
|
|
|
|
|
|
LoadingOutlined,
|
|
|
|
|
|
ExclamationCircleOutlined,
|
|
|
|
|
|
} from "@ant-design/icons-vue";
|
|
|
|
|
|
import editDesignType from "./editDesignType/index.vue";
|
2025-05-20 16:47:27 +08:00
|
|
|
|
// import JSZip, { forEach } from "jszip";
|
|
|
|
|
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
|
|
|
|
|
import i18n from "@/lang";
|
|
|
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
|
|
import { getMousePosition } from "@/tool/mdEvent";
|
|
|
|
|
|
import { removeClass } from "element-plus/es/utils";
|
2025-06-18 22:57:10 +08:00
|
|
|
|
import collectionModal from "./collection.vue";
|
|
|
|
|
|
import FileSaver from "file-saver";
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
2025-06-18 22:57:10 +08:00
|
|
|
|
name: "homePage",
|
|
|
|
|
|
components: {
|
|
|
|
|
|
collectionModal,
|
|
|
|
|
|
// HeaderComponent,
|
|
|
|
|
|
NewCollectionReview,
|
|
|
|
|
|
affiche,
|
|
|
|
|
|
generalCanvas,
|
|
|
|
|
|
DesignDetailcopy,
|
|
|
|
|
|
editDesignType,
|
2025-05-20 16:47:27 +08:00
|
|
|
|
},
|
2025-06-18 22:57:10 +08:00
|
|
|
|
emits: ["setTask"],
|
|
|
|
|
|
activated() {},
|
|
|
|
|
|
deactivated() {},
|
|
|
|
|
|
props: ["isState"],
|
|
|
|
|
|
setup(props, { emit }) {
|
|
|
|
|
|
const store = useStore();
|
|
|
|
|
|
const editDesignType = reactive({
|
|
|
|
|
|
upload: { id: store.state.Workspace.probjects.id },
|
|
|
|
|
|
RelightDirectionList: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "Right Light",
|
|
|
|
|
|
label: useI18n().t("ProductImg.RightLight"),
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "Left Light",
|
|
|
|
|
|
label: useI18n().t("ProductImg.LeftLight"),
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "Top Light",
|
|
|
|
|
|
label: useI18n().t("ProductImg.TopLight"),
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "Bottom Light",
|
|
|
|
|
|
label: useI18n().t("ProductImg.BottomLight"),
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
RelightDirection: "Right Light",
|
|
|
|
|
|
});
|
|
|
|
|
|
let likeDesignCollectionList: any = computed(() => {
|
|
|
|
|
|
return store.state.HomeStoreModule.likeDesignCollectionList;
|
|
|
|
|
|
});
|
|
|
|
|
|
let deleteDesignCollectionList: any = computed(() => {
|
|
|
|
|
|
return store.state.HomeStoreModule.deleteDesignCollectionList;
|
|
|
|
|
|
});
|
|
|
|
|
|
let designCollectionList: any = computed(() => {
|
|
|
|
|
|
return store.state.HomeStoreModule.designCollectionList;
|
|
|
|
|
|
});
|
|
|
|
|
|
let userDetail = computed(() => {
|
|
|
|
|
|
return store.state.UserHabit.userDetail;
|
|
|
|
|
|
});
|
|
|
|
|
|
let bindEmail = computed(() => {
|
|
|
|
|
|
return store.state.UserHabit.bindEmail;
|
|
|
|
|
|
});
|
|
|
|
|
|
let userGroupId: any = computed(() => {
|
|
|
|
|
|
return store.state.HomeStoreModule.userGroupId;
|
|
|
|
|
|
}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
|
|
|
|
|
|
let setPortfolio = (data: any) => {
|
|
|
|
|
|
portfolio.value = data;
|
|
|
|
|
|
};
|
|
|
|
|
|
provide("setPortfolio", setPortfolio);
|
|
|
|
|
|
let designCollectionId: any = computed(() => {
|
|
|
|
|
|
return store.state.HomeStoreModule.designCollectionId;
|
|
|
|
|
|
});
|
|
|
|
|
|
let designId: any = computed(() => {
|
|
|
|
|
|
return store.state.HomeStoreModule.designId;
|
|
|
|
|
|
});
|
|
|
|
|
|
let contentImgMax = {
|
|
|
|
|
|
width: "",
|
|
|
|
|
|
height: "",
|
|
|
|
|
|
};
|
|
|
|
|
|
let contentImg = {
|
|
|
|
|
|
width: "",
|
|
|
|
|
|
height: "",
|
|
|
|
|
|
};
|
|
|
|
|
|
let exportNav = ref([
|
|
|
|
|
|
{
|
|
|
|
|
|
name: useI18n().t("HomeView.moodboard"),
|
|
|
|
|
|
change: true,
|
|
|
|
|
|
noChange: true,
|
|
|
|
|
|
value: "moodboardFiles",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: useI18n().t("HomeView.printboard"),
|
|
|
|
|
|
change: true,
|
|
|
|
|
|
noChange: false,
|
|
|
|
|
|
value: "printboardFiles",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: useI18n().t("HomeView.colorboard"),
|
|
|
|
|
|
change: true,
|
|
|
|
|
|
noChange: false,
|
|
|
|
|
|
value: "colorBoards",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: useI18n().t("HomeView.sketchboard"),
|
|
|
|
|
|
change: true,
|
|
|
|
|
|
noChange: false,
|
|
|
|
|
|
value: "sketchboardFiles",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: useI18n().t("HomeView.mannequins"),
|
|
|
|
|
|
change: true,
|
|
|
|
|
|
noChange: true,
|
|
|
|
|
|
value: "",
|
|
|
|
|
|
},
|
|
|
|
|
|
]);
|
|
|
|
|
|
const dataDom = reactive({
|
|
|
|
|
|
collectionModal: null as any,
|
|
|
|
|
|
editDesignType: null as any,
|
|
|
|
|
|
designBtn: null as any,
|
|
|
|
|
|
});
|
|
|
|
|
|
const designData = reactive({
|
|
|
|
|
|
openEditBtnId: -1,
|
|
|
|
|
|
selectEditBtn: null as any,
|
|
|
|
|
|
selectEditBtnIndex: -1,
|
|
|
|
|
|
likeLoading: false, //喜欢防抖
|
|
|
|
|
|
widthList: [
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "Medium",
|
|
|
|
|
|
value: 170,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "Large",
|
|
|
|
|
|
value: 250,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "Extra-large",
|
|
|
|
|
|
value: 400,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
selectDesign: null as any, //当前选择的design
|
|
|
|
|
|
isUnfold: false,
|
|
|
|
|
|
selectLikeDesign: [] as any,
|
|
|
|
|
|
|
|
|
|
|
|
//类型
|
|
|
|
|
|
resultTypeList: [
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "All",
|
|
|
|
|
|
value: "All",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "Design",
|
|
|
|
|
|
value: "Design",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "Product",
|
|
|
|
|
|
value: "Product",
|
|
|
|
|
|
},
|
|
|
|
|
|
// ,{
|
|
|
|
|
|
// label:'To Product Image',
|
|
|
|
|
|
// value:'ToProductImage',
|
|
|
|
|
|
// },{
|
|
|
|
|
|
// label:'Relight',
|
|
|
|
|
|
// value:'Relight',
|
|
|
|
|
|
// },
|
|
|
|
|
|
{
|
|
|
|
|
|
label: "Pose Transfer",
|
|
|
|
|
|
value: "PoseTransfer",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
resultType: "All",
|
|
|
|
|
|
oldSelectLikeDesign: null as any,
|
|
|
|
|
|
});
|
|
|
|
|
|
watch(
|
|
|
|
|
|
() => likeDesignCollectionList.value.length,
|
|
|
|
|
|
(val) => {
|
|
|
|
|
|
if (val > 0) uploadLikeDom();
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
provide("exportNav", exportNav);
|
|
|
|
|
|
let isShowOperate = ref(false);
|
|
|
|
|
|
let { t } = useI18n();
|
|
|
|
|
|
let driver__: any = computed(() => {
|
|
|
|
|
|
return store.state.Guide.guide;
|
|
|
|
|
|
});
|
|
|
|
|
|
let likeDesignItemIdList = ref([]);
|
|
|
|
|
|
let workspacePosition: any = computed(() => {
|
|
|
|
|
|
return store.state.Workspace.probjects.positionList;
|
|
|
|
|
|
});
|
|
|
|
|
|
let allBoardData: any = computed(() => {
|
|
|
|
|
|
return store.state.UploadFilesModule.allBoardData;
|
|
|
|
|
|
});
|
|
|
|
|
|
let isMannequinShow = ref(false);
|
|
|
|
|
|
let chooseIsDesign: any = computed(() => {
|
|
|
|
|
|
return store.state.UploadFilesModule.chooseIsDesign;
|
|
|
|
|
|
});
|
|
|
|
|
|
let portfolio: any = ref({});
|
|
|
|
|
|
provide("portfolio", portfolio);
|
|
|
|
|
|
let showDesignMark = ref(false);
|
|
|
|
|
|
let sessionStorageCollValue = JSON.parse(
|
|
|
|
|
|
sessionStorage.getItem("collValue") as any
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
const collItemSize = reactive({
|
|
|
|
|
|
widthValue: {
|
|
|
|
|
|
label: "Medium",
|
|
|
|
|
|
value: 170,
|
|
|
|
|
|
},
|
|
|
|
|
|
collValue: 6,
|
|
|
|
|
|
padding: 60,
|
|
|
|
|
|
likeStyle: {
|
|
|
|
|
|
width: "240px",
|
|
|
|
|
|
height: "370px",
|
|
|
|
|
|
position: "absolute",
|
|
|
|
|
|
},
|
|
|
|
|
|
collStyle: {
|
|
|
|
|
|
width: "0",
|
|
|
|
|
|
height: "0",
|
|
|
|
|
|
position: "absolute",
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
width: 0,
|
|
|
|
|
|
height: 0,
|
|
|
|
|
|
},
|
|
|
|
|
|
scale: [1, 1.54],
|
|
|
|
|
|
collTime: null as any,
|
|
|
|
|
|
isMove: false,
|
|
|
|
|
|
});
|
|
|
|
|
|
const posiitonData = ref({
|
|
|
|
|
|
likeElList: [] as any,
|
|
|
|
|
|
likeSelectIndex: 0,
|
|
|
|
|
|
generateElList: [] as any,
|
|
|
|
|
|
generateSelectIndex: 0,
|
|
|
|
|
|
});
|
|
|
|
|
|
let likeItemDom = ref();
|
|
|
|
|
|
let collItemDom = ref();
|
|
|
|
|
|
let domHidden = ref(
|
|
|
|
|
|
JSON.parse(sessionStorage.getItem("domHidden") as any) || false
|
|
|
|
|
|
);
|
|
|
|
|
|
let recycleDomHidden = ref(false);
|
|
|
|
|
|
if (designCollectionList.value.length > 0) {
|
|
|
|
|
|
recycleDomHidden.value =
|
|
|
|
|
|
JSON.parse(sessionStorage.getItem("recycleDomHidden") as any) || false;
|
|
|
|
|
|
}
|
|
|
|
|
|
let getDesignTime = null as any;
|
|
|
|
|
|
const setSystemDesigner = (time: any) => {
|
|
|
|
|
|
clearTimeout(collItemSize.collTime);
|
|
|
|
|
|
collItemSize.collTime = setTimeout(() => {
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
let parentWidth = likeItemDom.value.parentElement.offsetWidth;
|
|
|
|
|
|
collItemSize.widthValue.value =
|
|
|
|
|
|
collItemSize.widthValue.value == -1
|
|
|
|
|
|
? 100
|
|
|
|
|
|
: collItemSize.widthValue.value;
|
|
|
|
|
|
collItemSize.widthValue.value =
|
|
|
|
|
|
collItemSize.widthValue.value > parentWidth
|
|
|
|
|
|
? parentWidth
|
|
|
|
|
|
: collItemSize.widthValue.value;
|
|
|
|
|
|
collItemSize.collValue = Math.floor(
|
|
|
|
|
|
parentWidth / collItemSize.widthValue.value
|
|
|
|
|
|
);
|
|
|
|
|
|
collItemSize.padding = Math.floor(
|
|
|
|
|
|
parentWidth - collItemSize.collValue * collItemSize.widthValue.value
|
|
|
|
|
|
);
|
|
|
|
|
|
let value = collItemSize.collValue;
|
|
|
|
|
|
|
|
|
|
|
|
collItemSize.itemStyle.width =
|
|
|
|
|
|
(parentWidth - collItemSize.padding - value * 10) / value;
|
|
|
|
|
|
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54;
|
2025-06-18 11:05:23 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
collItemSize.collStyle.width =
|
|
|
|
|
|
((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[0] +
|
|
|
|
|
|
"px";
|
|
|
|
|
|
collItemSize.collStyle.height =
|
|
|
|
|
|
((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[1] +
|
|
|
|
|
|
"px";
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
collItemSize.likeStyle.width = collItemSize.itemStyle.width + "px";
|
|
|
|
|
|
collItemSize.likeStyle.height = collItemSize.itemStyle.height + "px";
|
|
|
|
|
|
let elArr = likeItemDom.value.children;
|
|
|
|
|
|
posiitonData.value.likeElList = [];
|
|
|
|
|
|
for (let i = 0; i < elArr.length; i++) {
|
|
|
|
|
|
posiitonData.value.likeElList.push({
|
|
|
|
|
|
el: elArr[i],
|
|
|
|
|
|
sort: designData.selectLikeDesign[i].sort - 1,
|
|
|
|
|
|
// sort: likeDesignCollectionList.value[i].sort - 1,
|
|
|
|
|
|
index: i,
|
|
|
|
|
|
userLikeSortId:
|
|
|
|
|
|
designData.selectLikeDesign[i].userLikeSortId ||
|
|
|
|
|
|
designData.selectLikeDesign[i].id,
|
|
|
|
|
|
// userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
moveItem("like");
|
|
|
|
|
|
});
|
|
|
|
|
|
}, time);
|
|
|
|
|
|
};
|
|
|
|
|
|
const setDesignItemStyle = () => {
|
|
|
|
|
|
posiitonData.value.generateElList = [];
|
|
|
|
|
|
let elArr = collItemDom.value.querySelectorAll(".content_img_GetWidth");
|
|
|
|
|
|
designCollectionList.value.forEach((item: any, index: any) => {
|
|
|
|
|
|
posiitonData.value.generateElList.unshift({
|
|
|
|
|
|
el: elArr[index],
|
|
|
|
|
|
sort: designCollectionList.value.length - index - 1,
|
|
|
|
|
|
index: designCollectionList.value.length - index - 1,
|
|
|
|
|
|
userLikeSortId: item.designItemId || item.id,
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
const setDeleteDesign = (value: any, index: any) => {
|
|
|
|
|
|
store.commit("setDeleteDesignCollectionList", index);
|
|
|
|
|
|
let collItem = posiitonData.value.generateElList.filter(
|
|
|
|
|
|
(item: any) => item.userLikeSortId == value.designItemId
|
|
|
|
|
|
)[0];
|
|
|
|
|
|
posiitonData.value.generateElList =
|
|
|
|
|
|
posiitonData.value.generateElList.filter(
|
|
|
|
|
|
(item: any) => item.userLikeSortId != value.designItemId
|
|
|
|
|
|
);
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
posiitonData.value.generateElList.forEach((item: any) => {
|
|
|
|
|
|
if (item.sort > collItem.sort) {
|
|
|
|
|
|
item.sort -= 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
moveItem("");
|
|
|
|
|
|
};
|
|
|
|
|
|
const cancelDeleteDesign = (index: any) => {
|
|
|
|
|
|
store.commit("cancelDeleteDesignCollectionList", index);
|
|
|
|
|
|
};
|
|
|
|
|
|
const designMousedown = (e: any, design: any, str: string) => {
|
|
|
|
|
|
if (design.resultType != "Design" || designData.isUnfold) return;
|
|
|
|
|
|
if (str != "like" && showDesignMark.value) return;
|
|
|
|
|
|
let Id = design.userLikeSortId || design.id;
|
|
|
|
|
|
let arr =
|
|
|
|
|
|
str == "like"
|
|
|
|
|
|
? posiitonData.value.likeElList
|
|
|
|
|
|
: posiitonData.value.generateElList;
|
|
|
|
|
|
let item: any = arr.filter((item: any) => item.userLikeSortId == Id)[0];
|
|
|
|
|
|
item.el.style.zIndex = 2;
|
|
|
|
|
|
item.el.style.transition = "all 0s";
|
|
|
|
|
|
let startX = e.clientX,
|
|
|
|
|
|
startY = e.clientY,
|
|
|
|
|
|
left = item.el.offsetLeft,
|
|
|
|
|
|
top = item.el.offsetTop;
|
|
|
|
|
|
collItemSize.isMove = false;
|
|
|
|
|
|
let moveFun = (e: any) => {
|
|
|
|
|
|
collItemSize.isMove = true;
|
|
|
|
|
|
let X = e.clientX - startX + left;
|
|
|
|
|
|
let Y = e.clientY - startY + top;
|
|
|
|
|
|
item.el.style.left = `${X}px`;
|
|
|
|
|
|
item.el.style.top = `${Y}px`;
|
|
|
|
|
|
reRange(item, X, Y, str);
|
|
|
|
|
|
};
|
|
|
|
|
|
let mouseUpFun = () => {
|
|
|
|
|
|
document.removeEventListener("mousemove", mouseMove);
|
|
|
|
|
|
document.removeEventListener("touchmove", touchmove);
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
document.removeEventListener("mouseup", mouseUpFun);
|
|
|
|
|
|
document.removeEventListener("touchend", mouseUpFun);
|
|
|
|
|
|
item.el.style.zIndex = 1;
|
|
|
|
|
|
item.el.style.transition = "top,left .5s";
|
|
|
|
|
|
moveItem(str);
|
|
|
|
|
|
if (str == "like") sortDesignCollection();
|
|
|
|
|
|
};
|
|
|
|
|
|
let mouseMove = function (event: any) {
|
|
|
|
|
|
let e = getMousePosition(event, false);
|
|
|
|
|
|
moveFun(e);
|
|
|
|
|
|
};
|
|
|
|
|
|
let touchmove = function (event: any) {
|
|
|
|
|
|
let e = getMousePosition(event, true);
|
|
|
|
|
|
moveFun(e);
|
|
|
|
|
|
};
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
document.addEventListener("mousemove", mouseMove);
|
|
|
|
|
|
document.addEventListener("touchmove", touchmove);
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
document.addEventListener("mouseup", mouseUpFun);
|
|
|
|
|
|
document.addEventListener("touchend", mouseUpFun);
|
|
|
|
|
|
};
|
|
|
|
|
|
//排序 从大到小
|
|
|
|
|
|
const sortDesignCollection = () => {
|
|
|
|
|
|
let arrData: any = [];
|
|
|
|
|
|
if (!likeDesignCollectionList.value) return;
|
|
|
|
|
|
likeDesignCollectionList.value.forEach((likeItem: any) => {
|
|
|
|
|
|
let item = posiitonData.value.likeElList.filter(
|
|
|
|
|
|
(item: any) =>
|
|
|
|
|
|
item.userLikeSortId == likeItem.userLikeSortId ||
|
|
|
|
|
|
item.userLikeSortId == likeItem.id
|
|
|
|
|
|
)[0];
|
|
|
|
|
|
likeItem.sort = item.sort + 1;
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
id: likeItem.userLikeSortId || likeItem.id,
|
|
|
|
|
|
sort: item.sort + 1,
|
|
|
|
|
|
userLikeGroupId: likeItem.userLikeGroupId,
|
|
|
|
|
|
userLikeId: likeItem.id,
|
|
|
|
|
|
};
|
|
|
|
|
|
arrData.push(obj);
|
|
|
|
|
|
});
|
|
|
|
|
|
let data = {
|
|
|
|
|
|
userLikeGroupId: userGroupId.value,
|
|
|
|
|
|
userLikeSortList: arrData,
|
|
|
|
|
|
};
|
|
|
|
|
|
Https.axiosPost(Https.httpUrls.designSort, data).then((rv: any) => {});
|
|
|
|
|
|
};
|
|
|
|
|
|
const mouseenter = (e: any, str: string) => {};
|
|
|
|
|
|
const reRange = (item: any, x: number, y: number, str: string) => {
|
|
|
|
|
|
let elList =
|
|
|
|
|
|
str == "like"
|
|
|
|
|
|
? posiitonData.value.likeElList
|
|
|
|
|
|
: posiitonData.value.generateElList;
|
|
|
|
|
|
let index =
|
|
|
|
|
|
str == "like"
|
|
|
|
|
|
? posiitonData.value.likeSelectIndex
|
|
|
|
|
|
: posiitonData.value.generateSelectIndex;
|
|
|
|
|
|
let value = collItemSize.collValue;
|
|
|
|
|
|
let width, height, num;
|
|
|
|
|
|
if (str == "like") {
|
|
|
|
|
|
num = value;
|
|
|
|
|
|
width = collItemSize.itemStyle.width;
|
|
|
|
|
|
height = collItemSize.itemStyle.height;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
num = 3;
|
|
|
|
|
|
width =
|
|
|
|
|
|
((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[0];
|
|
|
|
|
|
height =
|
|
|
|
|
|
((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[1];
|
|
|
|
|
|
}
|
|
|
|
|
|
let padding = str == "like" ? collItemSize.padding / 2 : 0;
|
|
|
|
|
|
let moveIndex =
|
|
|
|
|
|
Math.round((x - padding) / (width + 10)) +
|
|
|
|
|
|
Math.round(y / (height + 10)) * num;
|
|
|
|
|
|
moveIndex = elList.length - 1 - moveIndex;
|
|
|
|
|
|
moveIndex = moveIndex < 0 ? 0 : moveIndex;
|
|
|
|
|
|
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
|
|
|
|
|
|
if (moveIndex != index) {
|
|
|
|
|
|
if (str == "like") {
|
|
|
|
|
|
posiitonData.value.likeSelectIndex = moveIndex;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
posiitonData.value.generateSelectIndex = moveIndex;
|
|
|
|
|
|
}
|
|
|
|
|
|
let currentSort = item.sort;
|
|
|
|
|
|
for (let i = 0; i < elList.length; i++) {
|
|
|
|
|
|
if (currentSort < moveIndex) {
|
|
|
|
|
|
if (elList[i].sort > currentSort && elList[i].sort <= moveIndex) {
|
|
|
|
|
|
elList[i].sort -= 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
} else if (currentSort > moveIndex) {
|
|
|
|
|
|
if (elList[i].sort < currentSort && elList[i].sort >= moveIndex) {
|
|
|
|
|
|
elList[i].sort += 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
elList[item.index].sort = moveIndex;
|
|
|
|
|
|
moveItem(str);
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
const setLikeDislLike = (str: string, value: any) => {
|
|
|
|
|
|
designData.selectLikeDesign = [];
|
|
|
|
|
|
posiitonData.value.likeSelectIndex = 0;
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
if (str == "like") {
|
|
|
|
|
|
let elArr = likeItemDom.value.children;
|
|
|
|
|
|
posiitonData.value.likeElList.push({
|
|
|
|
|
|
el: elArr[0],
|
|
|
|
|
|
sort: value.sort - 1,
|
|
|
|
|
|
index: value.sort - 1,
|
|
|
|
|
|
userLikeSortId: value.userLikeSortId,
|
|
|
|
|
|
});
|
|
|
|
|
|
let collItem = posiitonData.value.generateElList.filter(
|
|
|
|
|
|
(item: any) =>
|
|
|
|
|
|
item.userLikeSortId == value.designItemId ||
|
|
|
|
|
|
item.userLikeSortId == value.id
|
|
|
|
|
|
)[0];
|
|
|
|
|
|
if (collItem) {
|
|
|
|
|
|
posiitonData.value.generateElList =
|
|
|
|
|
|
posiitonData.value.generateElList.filter(
|
|
|
|
|
|
(item: any) => item.userLikeSortId != value.designItemId
|
|
|
|
|
|
);
|
|
|
|
|
|
posiitonData.value.generateElList.forEach((item: any) => {
|
|
|
|
|
|
if (item.sort > collItem.sort) {
|
|
|
|
|
|
item.sort -= 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
} else if (str == "disLike") {
|
|
|
|
|
|
let elArr = collItemDom.value.querySelectorAll(
|
|
|
|
|
|
".content_img_GetWidth"
|
|
|
|
|
|
);
|
|
|
|
|
|
posiitonData.value.likeElList = posiitonData.value.likeElList.filter(
|
|
|
|
|
|
(item: any) => item.sort + 1 != value.sort
|
|
|
|
|
|
);
|
|
|
|
|
|
posiitonData.value.likeElList.forEach((item: any) => {
|
|
|
|
|
|
if (item.sort > value.sort - 1) {
|
|
|
|
|
|
item.sort -= 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
posiitonData.value.generateElList.push({
|
|
|
|
|
|
el: elArr[elArr.length - 1],
|
|
|
|
|
|
sort: posiitonData.value.generateElList.length,
|
|
|
|
|
|
index: posiitonData.value.generateElList.length,
|
|
|
|
|
|
userLikeSortId: value.designItemId || value.id,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
setDesignItemStyle();
|
|
|
|
|
|
setSystemDesigner(100);
|
|
|
|
|
|
// moveItem('disLike');
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
//排列
|
|
|
|
|
|
const moveItem = (str: any) => {
|
|
|
|
|
|
let elLikeList = posiitonData.value.likeElList;
|
|
|
|
|
|
let generateElList = posiitonData.value.generateElList;
|
|
|
|
|
|
let value = collItemSize.collValue;
|
|
|
|
|
|
let width: any, height: any;
|
|
|
|
|
|
width =
|
|
|
|
|
|
((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[0];
|
|
|
|
|
|
height =
|
|
|
|
|
|
((collItemDom.value.offsetWidth - 30) / 3) * collItemSize.scale[1];
|
2025-06-03 14:57:18 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
// let num = str == 'like'?value:3
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
for (let i = 0; i < elLikeList.length; i++) {
|
|
|
|
|
|
elLikeList[i].el.style.left =
|
|
|
|
|
|
((elLikeList.length - 1 - elLikeList[i].sort) % value) *
|
|
|
|
|
|
(collItemSize.itemStyle.width + 10) +
|
|
|
|
|
|
collItemSize.padding / 2 +
|
|
|
|
|
|
"px";
|
|
|
|
|
|
elLikeList[i].el.style.top =
|
|
|
|
|
|
parseInt(
|
|
|
|
|
|
String((elLikeList.length - 1 - elLikeList[i].sort) / value)
|
|
|
|
|
|
) *
|
|
|
|
|
|
(collItemSize.itemStyle.height + 10) +
|
|
|
|
|
|
"px";
|
|
|
|
|
|
}
|
|
|
|
|
|
for (let i = 0; i < generateElList.length; i++) {
|
|
|
|
|
|
generateElList[i].el.style.left =
|
|
|
|
|
|
((generateElList.length - 1 - generateElList[i].sort) % 3) *
|
|
|
|
|
|
(width + 10) +
|
|
|
|
|
|
"px";
|
|
|
|
|
|
generateElList[i].el.style.top =
|
|
|
|
|
|
parseInt(
|
|
|
|
|
|
String((generateElList.length - 1 - generateElList[i].sort) / 3)
|
|
|
|
|
|
) *
|
|
|
|
|
|
(height + 10) +
|
|
|
|
|
|
"px";
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
const openCollection = (str: string) => {
|
|
|
|
|
|
dataDom.collectionModal.init(str);
|
|
|
|
|
|
};
|
|
|
|
|
|
const openEditBtn = (design: any, index: number, event: any) => {
|
|
|
|
|
|
if (designData.selectLikeDesign[index].resultType != "Design") {
|
|
|
|
|
|
designData.selectDesign = designData.selectLikeDesign.filter(
|
|
|
|
|
|
(item: any) =>
|
|
|
|
|
|
item.resultType == "Design" &&
|
|
|
|
|
|
item.userLikeSortId == designData.selectLikeDesign[index].parentId
|
|
|
|
|
|
)[0];
|
|
|
|
|
|
} else {
|
|
|
|
|
|
designData.selectDesign = designData.selectLikeDesign[index];
|
|
|
|
|
|
}
|
|
|
|
|
|
designData.openEditBtnId = design.designItemId || design.id;
|
|
|
|
|
|
designData.selectEditBtn = design;
|
|
|
|
|
|
designData.selectEditBtnIndex = index;
|
|
|
|
|
|
let width = event.target.offsetWidth;
|
|
|
|
|
|
let height = event.target.offsetHeight;
|
|
|
|
|
|
let parentRect = dataDom.designBtn.parentElement.getBoundingClientRect();
|
|
|
|
|
|
|
|
|
|
|
|
let x = event.clientX - parentRect.x - event.offsetX + width;
|
|
|
|
|
|
let y = event.clientY - parentRect.y - event.offsetY + height;
|
|
|
|
|
|
dataDom.designBtn.style.left = x + "px";
|
|
|
|
|
|
dataDom.designBtn.style.top = y + "px";
|
|
|
|
|
|
|
|
|
|
|
|
let removeEditBtnId = () => {
|
|
|
|
|
|
designData.openEditBtnId = -1;
|
|
|
|
|
|
document.removeEventListener("click", removeEditBtnId);
|
|
|
|
|
|
};
|
|
|
|
|
|
document.addEventListener("click", removeEditBtnId);
|
|
|
|
|
|
};
|
|
|
|
|
|
let setEditDesignType = (
|
|
|
|
|
|
arr: any,
|
|
|
|
|
|
index: any,
|
|
|
|
|
|
type: any,
|
|
|
|
|
|
status: any,
|
|
|
|
|
|
listType: string
|
|
|
|
|
|
) => {
|
|
|
|
|
|
arr = JSON.parse(JSON.stringify(arr));
|
|
|
|
|
|
let item = arr[index];
|
|
|
|
|
|
if (status == "add") {
|
|
|
|
|
|
item.sourceUrl = item.designOutfitUrl || item.url;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
}
|
|
|
|
|
|
arr[index].resultType = type;
|
|
|
|
|
|
// dataDom.editDesignType.isProductimg = isLike
|
|
|
|
|
|
dataDom.editDesignType.isProductimg = true;
|
|
|
|
|
|
dataDom.editDesignType.init(arr, index, null, status, listType);
|
|
|
|
|
|
dataDom.editDesignType.isLike = false;
|
|
|
|
|
|
dataDom.editDesignType.productimgRelightDirection =
|
|
|
|
|
|
editDesignType.RelightDirection;
|
|
|
|
|
|
dataDom.editDesignType.isComparison = true;
|
|
|
|
|
|
};
|
|
|
|
|
|
const addGenerateImg = (data: any) => {
|
|
|
|
|
|
if (!data.id) return;
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
id: data.id,
|
|
|
|
|
|
designItemId: data.id,
|
|
|
|
|
|
// designItemId:data.elementId,
|
|
|
|
|
|
designOutfitId: "",
|
|
|
|
|
|
designOutfitUrl: data.designOutfitUrl,
|
|
|
|
|
|
sourceUrl: data.sourceUrl,
|
|
|
|
|
|
resultType: data.resultType,
|
|
|
|
|
|
elementId: data.elementId,
|
|
|
|
|
|
elementType: data.elementType,
|
|
|
|
|
|
userGroupId: data.userGroupId || data.id,
|
|
|
|
|
|
firstFrameUrl: data.firstFrameUrl,
|
|
|
|
|
|
gifUrl: data.gifUrl,
|
|
|
|
|
|
userLikeSortId: data.userLikeSortId,
|
|
|
|
|
|
};
|
|
|
|
|
|
let list = [];
|
|
|
|
|
|
if (data.listType == "disLike") {
|
|
|
|
|
|
list = designCollectionList.value;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
list = likeDesignCollectionList.value;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (list[data.isIndex]?.generateAwait)
|
|
|
|
|
|
list[data.isIndex].generateAwait = false;
|
|
|
|
|
|
if (data.status == "add") {
|
|
|
|
|
|
if (data.listType == "like") {
|
|
|
|
|
|
likeDesignCollection(obj, -1, data.resultType);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
list.unshift(obj);
|
|
|
|
|
|
}
|
|
|
|
|
|
} else if (data.status == "cove") {
|
|
|
|
|
|
// collectionLikeUpdate
|
|
|
|
|
|
// Https
|
|
|
|
|
|
if (data.listType == "like") {
|
|
|
|
|
|
let value = {
|
|
|
|
|
|
oldRelationId: data.oldId,
|
|
|
|
|
|
relationId: data.id,
|
|
|
|
|
|
relationType: data.resultType,
|
|
|
|
|
|
};
|
|
|
|
|
|
Https.axiosPost(Https.httpUrls.collectionLikeUpdate, value).then(
|
|
|
|
|
|
(rv: any) => {
|
|
|
|
|
|
if (rv) {
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
list[data.isIndex].designOutfitUrl = obj.designOutfitUrl;
|
|
|
|
|
|
list[data.isIndex].resultType = obj.resultType;
|
|
|
|
|
|
list[data.isIndex].id = obj.id;
|
|
|
|
|
|
list[data.isIndex].designItemId = obj.designItemId;
|
|
|
|
|
|
list[data.isIndex].sourceUrl = obj.sourceUrl;
|
|
|
|
|
|
}
|
|
|
|
|
|
// nextTick().then(()=>{
|
|
|
|
|
|
// // setDesignItemStyle()
|
|
|
|
|
|
// // setSystemDesigner(100)
|
|
|
|
|
|
// uploadLikeDom()
|
|
|
|
|
|
// })
|
|
|
|
|
|
};
|
|
|
|
|
|
const setNoDesignLike = (
|
|
|
|
|
|
design: any,
|
|
|
|
|
|
index: any,
|
|
|
|
|
|
type: any,
|
|
|
|
|
|
str: string
|
|
|
|
|
|
) => {
|
|
|
|
|
|
let url;
|
|
|
|
|
|
let data = {
|
|
|
|
|
|
toProductImageResultId: [design.designItemId || design.id],
|
|
|
|
|
|
projectId: store.state.Workspace.probjects.id,
|
|
|
|
|
|
collectionSortParentId:
|
|
|
|
|
|
designData?.selectDesign?.userLikeSortId || design.parentId,
|
|
|
|
|
|
} as any;
|
|
|
|
|
|
let params = {} as any;
|
|
|
|
|
|
if (type == "ToProductImage" || type == "Relight") {
|
|
|
|
|
|
if (str == "like") {
|
|
|
|
|
|
url = Https.httpUrls.productImageLike;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
url = Https.httpUrls.productImageUnLike;
|
|
|
|
|
|
}
|
|
|
|
|
|
} else if (type == "PoseTransfer") {
|
|
|
|
|
|
url = Https.httpUrls.poselikeOrDisike;
|
|
|
|
|
|
if (str == "like") {
|
|
|
|
|
|
params = {
|
|
|
|
|
|
likeOrDislike: "like",
|
|
|
|
|
|
transformedId: design.id,
|
|
|
|
|
|
projectId: store.state.Workspace.probjects.id,
|
|
|
|
|
|
collectionSortParentId:
|
|
|
|
|
|
designData?.selectDesign?.userLikeSortId || design.parentId,
|
|
|
|
|
|
};
|
|
|
|
|
|
} else {
|
|
|
|
|
|
params = {
|
|
|
|
|
|
likeOrDislike: "dislike",
|
|
|
|
|
|
transformedId: design.id,
|
|
|
|
|
|
projectId: store.state.Workspace.probjects.id,
|
|
|
|
|
|
collectionSortParentId:
|
|
|
|
|
|
designData?.selectDesign?.userLikeSortId || design.parentId,
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
if (str == "like") {
|
|
|
|
|
|
url = Https.httpUrls.productImageLike;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
url = Https.httpUrls.productImageUnLike;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
designData.likeLoading = true;
|
|
|
|
|
|
Https.axiosPost(url, data, { params: params.likeOrDislike ? params : "" })
|
|
|
|
|
|
.then((rv) => {
|
|
|
|
|
|
if (str == "like") {
|
|
|
|
|
|
likeDesignCollectionList.value.forEach((item: any) => {
|
|
|
|
|
|
if (
|
|
|
|
|
|
item.resultType == "Design" &&
|
|
|
|
|
|
item.userLikeSortId == designData.selectDesign.userLikeSortId
|
|
|
|
|
|
) {
|
|
|
|
|
|
item.childList.push(design);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
likeDesignCollectionList.value.forEach((item: any) => {
|
|
|
|
|
|
if (
|
|
|
|
|
|
item.resultType == "Design" &&
|
|
|
|
|
|
item.userLikeSortId == designData.selectDesign.userLikeSortId
|
|
|
|
|
|
) {
|
|
|
|
|
|
item.childList = item.childList.filter((item: any) => {
|
|
|
|
|
|
return item.id != design.id;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
nextTick().then(() => {
|
|
|
|
|
|
uploadLikeDom();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//一下代码是生成的design时候也可以toproduct
|
|
|
|
|
|
// if(str == 'like'){
|
|
|
|
|
|
// let value:any = {
|
|
|
|
|
|
// ...design,
|
|
|
|
|
|
// sort:likeDesignCollectionList.value.length + 1,
|
|
|
|
|
|
// userLikeGroupId:design.id,
|
|
|
|
|
|
// }
|
|
|
|
|
|
// design.groupDetailId = rv.groupDetailId;
|
|
|
|
|
|
// store.commit(
|
|
|
|
|
|
// "addLikeDesignCollectionList",
|
|
|
|
|
|
// value
|
|
|
|
|
|
// );
|
|
|
|
|
|
// setLikeDislLike('like',value)
|
|
|
|
|
|
// if(index != -1)store.commit("deleteDesignCollectionList", index);
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
|
|
|
|
|
|
// store.commit("addDesignCollectionList", [design]);
|
|
|
|
|
|
// likeDesignCollectionList.value.forEach((item:any)=>{
|
|
|
|
|
|
// if(item.sort > design.sort){
|
|
|
|
|
|
// item.sort-=1
|
|
|
|
|
|
// }
|
|
|
|
|
|
// })
|
|
|
|
|
|
// }
|
|
|
|
|
|
designData.likeLoading = false;
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((res) => {
|
|
|
|
|
|
designData.likeLoading = false;
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
let likeDesignCollection = (design: any, index: any, type: any) => {
|
|
|
|
|
|
if (designData.likeLoading) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (type != "Design") {
|
|
|
|
|
|
setNoDesignLike(design, index, type, "like");
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
let data = {
|
|
|
|
|
|
designItemId: design.designItemId,
|
|
|
|
|
|
userGroupId: store.state.HomeStoreModule.userGroupId,
|
|
|
|
|
|
projectId: store.state.Workspace.probjects.id,
|
|
|
|
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
|
|
|
|
designPythonOutfitId: design.designOutfitId
|
|
|
|
|
|
? design.designOutfitId
|
|
|
|
|
|
: design.designPythonOutfitId,
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
designData.likeLoading = true;
|
|
|
|
|
|
Https.axiosPost(Https.httpUrls.designLike, data)
|
|
|
|
|
|
.then((rv: any) => {
|
|
|
|
|
|
if (rv) {
|
|
|
|
|
|
let value: any = {
|
|
|
|
|
|
...design,
|
|
|
|
|
|
id: rv.userLikeId,
|
|
|
|
|
|
groupDetailId: rv.userLikeId,
|
|
|
|
|
|
userLikeSortId: rv.userLikeSortId,
|
|
|
|
|
|
userLikeGroupId: rv.userGroupId,
|
|
|
|
|
|
sort: rv.sort,
|
|
|
|
|
|
};
|
|
|
|
|
|
store.commit("setUserGroupId", rv.userGroupId);
|
|
|
|
|
|
design.groupDetailId = rv.groupDetailId;
|
|
|
|
|
|
store.commit("addLikeDesignCollectionList", value);
|
|
|
|
|
|
setLikeDislLike("like", value);
|
|
|
|
|
|
if (index != -1) store.commit("deleteDesignCollectionList", index);
|
|
|
|
|
|
}
|
|
|
|
|
|
designData.likeLoading = false;
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((rv) => {
|
|
|
|
|
|
designData.likeLoading = false;
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
const upDataLikeListType = () => {};
|
|
|
|
|
|
const setGenerateAwait = (data: any) => {
|
|
|
|
|
|
let list = [];
|
|
|
|
|
|
if (data.listType == "disLike") {
|
|
|
|
|
|
list = designCollectionList.value;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
list = likeDesignCollectionList.value;
|
|
|
|
|
|
}
|
|
|
|
|
|
list[data.index].generateAwait = true;
|
|
|
|
|
|
};
|
|
|
|
|
|
const gifPlay = (e: any, item: any) => {
|
|
|
|
|
|
e.target.src = item.gif || item.gifUrl; //使用gif图片
|
|
|
|
|
|
};
|
|
|
|
|
|
const gifPause = (e: any, item: any) => {
|
|
|
|
|
|
e.target.src = item.firstFrame || item.firstFrameUrl; //静态图片
|
|
|
|
|
|
};
|
|
|
|
|
|
const startHover = (e: any, item: any) => {};
|
|
|
|
|
|
const endHover = (e: any, item: any) => {};
|
|
|
|
|
|
const setUnfold = () => {
|
|
|
|
|
|
designData.isUnfold = !designData.isUnfold;
|
|
|
|
|
|
if (!designData.isUnfold) {
|
|
|
|
|
|
designData.selectLikeDesign = designData.oldSelectLikeDesign || [];
|
|
|
|
|
|
}
|
|
|
|
|
|
uploadLikeDom();
|
|
|
|
|
|
};
|
|
|
|
|
|
const uploadLikeDom = () => {
|
|
|
|
|
|
if (designData.isUnfold) {
|
|
|
|
|
|
// const parents = designData.selectLikeDesign.filter((item:any) => item.type === 'design');
|
|
|
|
|
|
designData.selectLikeDesign = [];
|
|
|
|
|
|
likeDesignCollectionList.value.sort((a: any, b: any) => {
|
|
|
|
|
|
return a.sort - b.sort;
|
|
|
|
|
|
});
|
|
|
|
|
|
let childLength = 0;
|
|
|
|
|
|
likeDesignCollectionList.value.forEach((likeItem: any, index: any) => {
|
|
|
|
|
|
let item = JSON.parse(JSON.stringify(likeItem));
|
|
|
|
|
|
item.oldSort = item.sort;
|
|
|
|
|
|
if (item?.childList?.length > 0) {
|
|
|
|
|
|
item.childList.forEach((childItem: any, childIndex: number) => {
|
|
|
|
|
|
childItem.sort = childIndex + item.sort + childLength;
|
|
|
|
|
|
designData.selectLikeDesign.push(childItem);
|
|
|
|
|
|
});
|
|
|
|
|
|
childLength = item.childList.length + childLength;
|
|
|
|
|
|
}
|
|
|
|
|
|
item.sort = childLength + item.sort;
|
|
|
|
|
|
designData.selectLikeDesign.push(item);
|
|
|
|
|
|
});
|
|
|
|
|
|
designData.oldSelectLikeDesign = [];
|
|
|
|
|
|
designData.resultType = "All";
|
|
|
|
|
|
} else {
|
|
|
|
|
|
if (designData.selectLikeDesign.length == 0) {
|
|
|
|
|
|
designData.selectLikeDesign = likeDesignCollectionList.value;
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
const parents = designData.selectLikeDesign.filter(
|
|
|
|
|
|
(item: any) => item.resultType === "Design"
|
|
|
|
|
|
);
|
|
|
|
|
|
parents.map((parent: any) => {
|
|
|
|
|
|
parent.sort = parent.oldSort || parent.sort;
|
|
|
|
|
|
return {
|
|
|
|
|
|
...parent,
|
|
|
|
|
|
childList: designData.selectLikeDesign.filter(
|
|
|
|
|
|
(item: any) =>
|
|
|
|
|
|
item.parentId === parent.userLikeSortId &&
|
|
|
|
|
|
item.resultType !== "Design"
|
|
|
|
|
|
),
|
|
|
|
|
|
};
|
|
|
|
|
|
});
|
|
|
|
|
|
designData.selectLikeDesign = parents;
|
|
|
|
|
|
}
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
setSystemDesigner(0);
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
const changeResultType = () => {
|
|
|
|
|
|
if (designData.resultType != "All") {
|
|
|
|
|
|
if (designData.oldSelectLikeDesign.length == 0)
|
|
|
|
|
|
designData.oldSelectLikeDesign = designData.selectLikeDesign;
|
|
|
|
|
|
if (designData.resultType == "Product") {
|
|
|
|
|
|
designData.selectLikeDesign = designData.oldSelectLikeDesign.filter(
|
|
|
|
|
|
(item: any) =>
|
|
|
|
|
|
item.resultType === "ToProductImage" ||
|
|
|
|
|
|
item.resultType === "Relight"
|
|
|
|
|
|
);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
designData.selectLikeDesign = designData.oldSelectLikeDesign.filter(
|
|
|
|
|
|
(item: any) => item.resultType === designData.resultType
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
designData.selectLikeDesign.forEach((item: any, index: number) => {
|
|
|
|
|
|
item.sort = index + 1;
|
|
|
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
designData.selectLikeDesign = designData.oldSelectLikeDesign;
|
|
|
|
|
|
designData.selectLikeDesign.forEach((item: any, index: number) => {
|
|
|
|
|
|
item.sort = index + 1;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
setSystemDesigner(0);
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
return {
|
|
|
|
|
|
store,
|
|
|
|
|
|
...toRefs(editDesignType),
|
|
|
|
|
|
likeDesignCollectionList,
|
|
|
|
|
|
deleteDesignCollectionList,
|
|
|
|
|
|
designCollectionList,
|
|
|
|
|
|
userGroupId,
|
|
|
|
|
|
userDetail,
|
|
|
|
|
|
bindEmail,
|
|
|
|
|
|
setPortfolio,
|
|
|
|
|
|
designCollectionId,
|
|
|
|
|
|
designId,
|
|
|
|
|
|
contentImgMax,
|
|
|
|
|
|
contentImg,
|
|
|
|
|
|
exportNav,
|
|
|
|
|
|
isShowOperate,
|
|
|
|
|
|
t,
|
|
|
|
|
|
driver__,
|
|
|
|
|
|
likeDesignItemIdList,
|
|
|
|
|
|
workspacePosition,
|
|
|
|
|
|
allBoardData,
|
|
|
|
|
|
isMannequinShow,
|
|
|
|
|
|
chooseIsDesign,
|
|
|
|
|
|
portfolio,
|
|
|
|
|
|
setSystemDesigner,
|
|
|
|
|
|
setDesignItemStyle,
|
|
|
|
|
|
showDesignMark,
|
|
|
|
|
|
...toRefs(collItemSize),
|
|
|
|
|
|
...toRefs(designData),
|
|
|
|
|
|
...toRefs(dataDom),
|
|
|
|
|
|
likeItemDom,
|
|
|
|
|
|
collItemDom,
|
|
|
|
|
|
domHidden,
|
|
|
|
|
|
recycleDomHidden,
|
|
|
|
|
|
getDesignTime,
|
|
|
|
|
|
|
|
|
|
|
|
setDeleteDesign,
|
|
|
|
|
|
cancelDeleteDesign,
|
|
|
|
|
|
designMousedown,
|
|
|
|
|
|
sortDesignCollection,
|
|
|
|
|
|
getMousePosition,
|
|
|
|
|
|
mouseenter,
|
|
|
|
|
|
setLikeDislLike,
|
|
|
|
|
|
posiitonData,
|
|
|
|
|
|
moveItem,
|
|
|
|
|
|
openCollection,
|
|
|
|
|
|
setEditDesignType,
|
|
|
|
|
|
openEditBtn,
|
|
|
|
|
|
addGenerateImg,
|
|
|
|
|
|
setNoDesignLike,
|
|
|
|
|
|
upDataLikeListType,
|
|
|
|
|
|
setGenerateAwait,
|
|
|
|
|
|
gifPlay,
|
|
|
|
|
|
gifPause,
|
|
|
|
|
|
startHover,
|
|
|
|
|
|
endHover,
|
|
|
|
|
|
setUnfold,
|
|
|
|
|
|
changeResultType,
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
isFinishLoading: false,
|
|
|
|
|
|
isShowMark: false, //导出的loading蒙层
|
|
|
|
|
|
indicator: h(LoadingOutlined, {
|
|
|
|
|
|
style: {
|
|
|
|
|
|
fontSize: "4.8rem",
|
|
|
|
|
|
marginTop: "3rem",
|
|
|
|
|
|
color: "#341e57",
|
|
|
|
|
|
},
|
|
|
|
|
|
spin: true,
|
|
|
|
|
|
}),
|
|
|
|
|
|
designProgress: 0,
|
|
|
|
|
|
startDesignType: "design", //设计类型 design 和 resdesign
|
|
|
|
|
|
disLikeLoading: false, //不喜欢防抖
|
|
|
|
|
|
dragIdx: 0,
|
|
|
|
|
|
designRandom: "",
|
|
|
|
|
|
detailDestroy: false, //销毁detail
|
|
|
|
|
|
designFailure: {
|
|
|
|
|
|
num: 0,
|
|
|
|
|
|
currentNum: 0,
|
|
|
|
|
|
}, //获取20次都为空的话就停止获取
|
|
|
|
|
|
observerData: {
|
|
|
|
|
|
time: false as any,
|
|
|
|
|
|
observer: null as any,
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
workspacePosition: {
|
|
|
|
|
|
handler(newVal: any, oldVal: any) {
|
|
|
|
|
|
this.isMannequin();
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
allBoardData: {
|
|
|
|
|
|
handler(newVal: any, oldVal: any) {
|
|
|
|
|
|
this.isMannequin();
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
2025-06-18 11:05:23 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
beforeUnmount() {
|
|
|
|
|
|
clearTimeout(this.getDesignTime);
|
|
|
|
|
|
sessionStorage.setItem("domHidden", JSON.stringify(this.domHidden));
|
|
|
|
|
|
sessionStorage.setItem(
|
|
|
|
|
|
"recycleDomHidden",
|
|
|
|
|
|
JSON.stringify(this.recycleDomHidden)
|
|
|
|
|
|
);
|
|
|
|
|
|
sessionStorage.setItem("collValue", JSON.stringify(this.collValue));
|
|
|
|
|
|
if (this.$props.isState) this.sortDesignCollection();
|
|
|
|
|
|
// window.removeEventListener('resize', this.setItemPosition)
|
|
|
|
|
|
this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
|
|
|
|
|
|
},
|
|
|
|
|
|
async mounted() {
|
|
|
|
|
|
window.addEventListener("beforeunload", (event) => {
|
|
|
|
|
|
this.store.commit("clearAllCollection");
|
|
|
|
|
|
});
|
|
|
|
|
|
// window.addEventListener('resize', this.setItemPosition)
|
2025-06-09 10:25:54 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
this.$refs.rightContentBlockBox;
|
|
|
|
|
|
this.observerData.observer = new ResizeObserver((entries) => {
|
|
|
|
|
|
for (let entry of entries) {
|
|
|
|
|
|
clearTimeout(this.observerData.time);
|
|
|
|
|
|
this.observerData.time = setTimeout(() => {
|
|
|
|
|
|
this.setSystemDesigner(0);
|
|
|
|
|
|
this.setDesignItemStyle();
|
|
|
|
|
|
}, 100);
|
|
|
|
|
|
// const { width } = entry.contentRect;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
this.observerData.observer.observe(this.$refs.rightContentBlockBox);
|
|
|
|
|
|
if (this.designCollectionList?.length > 0) {
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
this.setDesignItemStyle();
|
|
|
|
|
|
this.setShowHide("recycleDomHidden");
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
directives: {
|
|
|
|
|
|
mousewheel: {
|
|
|
|
|
|
mounted(el) {
|
|
|
|
|
|
let bodyDom: any = document.getElementsByClassName(
|
|
|
|
|
|
"right_content_block"
|
|
|
|
|
|
)[0];
|
|
|
|
|
|
let dom: any = document.getElementsByClassName("right_content_body");
|
|
|
|
|
|
let mouseover = () => {
|
|
|
|
|
|
bodyDom.classList.add("active");
|
|
|
|
|
|
};
|
|
|
|
|
|
let mouseleave = () => {
|
|
|
|
|
|
bodyDom.classList.remove("active");
|
|
|
|
|
|
};
|
|
|
|
|
|
dom.forEach((item: any) => {
|
|
|
|
|
|
item.addEventListener("mouseover", mouseover);
|
|
|
|
|
|
item.addEventListener("mouseleave", mouseleave);
|
|
|
|
|
|
});
|
2025-06-09 10:25:54 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
el.addEventListener(
|
|
|
|
|
|
"wheel",
|
|
|
|
|
|
(e: WheelEvent) => {
|
|
|
|
|
|
let num = 0;
|
|
|
|
|
|
if (e.deltaY > 0) {
|
|
|
|
|
|
num = 25;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
num = -25;
|
|
|
|
|
|
}
|
|
|
|
|
|
el.scrollBy(num, 0);
|
|
|
|
|
|
},
|
|
|
|
|
|
{ passive: true }
|
|
|
|
|
|
);
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// addTeam (team:any) {
|
|
|
|
|
|
// this.likeDesignCollectionList.push(team)
|
|
|
|
|
|
// },
|
|
|
|
|
|
openSetData() {
|
|
|
|
|
|
this.setItemPosition();
|
|
|
|
|
|
},
|
|
|
|
|
|
setItemPosition() {
|
|
|
|
|
|
this.setSystemDesigner(0);
|
|
|
|
|
|
this.setDesignItemStyle();
|
|
|
|
|
|
},
|
|
|
|
|
|
affiche(text: any) {
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
let affiche: any = this.$refs.affiche;
|
|
|
|
|
|
affiche.init(text);
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
2025-06-18 11:05:23 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
//判断模特和当前start的sketch是否匹配
|
|
|
|
|
|
isMannequin() {
|
|
|
|
|
|
this.isMannequinShow = false;
|
|
|
|
|
|
let num = 0;
|
|
|
|
|
|
this.allBoardData?.sketchboardFiles?.forEach((sketchItem: any) => {
|
|
|
|
|
|
this.workspacePosition.forEach((positionItem: any) => {
|
|
|
|
|
|
if (positionItem.value == sketchItem.categoryValue) {
|
|
|
|
|
|
num++;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
if (
|
|
|
|
|
|
this.allBoardData?.sketchboardFiles?.length &&
|
|
|
|
|
|
this.allBoardData?.sketchboardFiles?.length > 0
|
|
|
|
|
|
) {
|
|
|
|
|
|
if (num != this.allBoardData?.sketchboardFiles?.length) {
|
|
|
|
|
|
this.isMannequinShow = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.isMannequinShow = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
//设计新的collection
|
|
|
|
|
|
designNewCollection() {
|
|
|
|
|
|
clearTimeout(this.getDesignTime);
|
|
|
|
|
|
let data = this.getDesignData("");
|
|
|
|
|
|
if (this.driver__.driver) {
|
|
|
|
|
|
nextTick().then(() => {
|
|
|
|
|
|
driverObj__.moveNext();
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
this.isShowMark = true;
|
|
|
|
|
|
// this.store.commit("setLikeDesignCollectionList", []);
|
|
|
|
|
|
Https.axiosPost(Https.httpUrls.designCollection, data)
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
.then((rv: any) => {
|
|
|
|
|
|
if (rv) {
|
|
|
|
|
|
let value = {
|
|
|
|
|
|
objectSignList: data.requestIdList.join(),
|
|
|
|
|
|
requestId: rv,
|
|
|
|
|
|
};
|
|
|
|
|
|
this.posiitonData.generateElList.forEach((item: any) => {
|
|
|
|
|
|
item.sort -= 1;
|
|
|
|
|
|
});
|
|
|
|
|
|
this.moveItem("disLike");
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
this.getDesignResult(value, "newDesign");
|
|
|
|
|
|
this.startDesignType = "design";
|
|
|
|
|
|
// this.posiitonData.likeSelectIndex = 0
|
|
|
|
|
|
// this.posiitonData.likeElList = []
|
|
|
|
|
|
}
|
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((res) => {
|
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
getDesignResult(data: any, str: any) {
|
|
|
|
|
|
this.showDesignMark = true;
|
|
|
|
|
|
this.recycleDomHidden = true;
|
|
|
|
|
|
this.setSystemDesigner(0);
|
|
|
|
|
|
Https.axiosGet(Https.httpUrls.getDesignResult, { params: data })
|
|
|
|
|
|
.then(async (rv) => {
|
|
|
|
|
|
if (rv.designCollectionItems) {
|
|
|
|
|
|
let arr: any = [];
|
|
|
|
|
|
if (this.designCollectionList.length == 0) {
|
|
|
|
|
|
arr.push(...rv.designCollectionItems);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
arr = rv.designCollectionItems.filter(
|
|
|
|
|
|
(itemA: any) =>
|
|
|
|
|
|
!this.designCollectionList.some(
|
|
|
|
|
|
(itemB: any) => itemA.objectSign === itemB.objectSign
|
|
|
|
|
|
)
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
for (let index = 0; index < arr.length; index++) {
|
|
|
|
|
|
const item = arr[index];
|
|
|
|
|
|
await new Promise((resolve, reject) => {
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
this.designCollectionList.unshift(item);
|
|
|
|
|
|
nextTick().then(() => {
|
|
|
|
|
|
let dom: any = this.$refs.collItemDom;
|
|
|
|
|
|
let elArr: any = dom.querySelectorAll(
|
|
|
|
|
|
".content_img_GetWidth"
|
|
|
|
|
|
);
|
|
|
|
|
|
this.posiitonData.generateElList.push({
|
|
|
|
|
|
el: elArr[0],
|
|
|
|
|
|
sort: elArr.length - 2,
|
|
|
|
|
|
index: elArr.length - 1,
|
|
|
|
|
|
userLikeSortId: item.designItemId,
|
|
|
|
|
|
});
|
|
|
|
|
|
this.moveItem("disLike");
|
|
|
|
|
|
});
|
|
|
|
|
|
resolve("");
|
|
|
|
|
|
}, 200);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
if (rv.unfinishedList.length == 0) {
|
|
|
|
|
|
this.showDesignMark = false;
|
|
|
|
|
|
if (str == "newDesign") {
|
|
|
|
|
|
if (rv.designCollectionItems) {
|
|
|
|
|
|
// this.store.commit("deleteUserGroupId");
|
|
|
|
|
|
this.store.commit("setDesignCollectionId", rv.collectionId);
|
|
|
|
|
|
this.store.commit("setDesignId", rv.designId);
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// this.designProgress = 0,
|
|
|
|
|
|
this.store.commit("setDesignId", rv.designId);
|
|
|
|
|
|
}
|
|
|
|
|
|
nextTick().then(() => {
|
|
|
|
|
|
driverObj__.moveNext();
|
|
|
|
|
|
this.posiitonData.generateElList.forEach((item: any) => {
|
|
|
|
|
|
item.sort += 1;
|
|
|
|
|
|
});
|
|
|
|
|
|
this.moveItem("disLike");
|
|
|
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
data.objectSignList = rv.unfinishedList.join();
|
|
|
|
|
|
this.getDesignTime = setTimeout(() => {
|
|
|
|
|
|
if (this.designFailure.currentNum == rv.unfinishedList.length) {
|
|
|
|
|
|
this.designFailure.num++;
|
|
|
|
|
|
if (this.designFailure.num >= 10) data.objectSignList = "";
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.designFailure.num = 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
this.getDesignResult(data, str);
|
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(() => (this.showDesignMark = false));
|
|
|
|
|
|
},
|
|
|
|
|
|
//重新设计collection
|
|
|
|
|
|
resDesignCollection() {
|
|
|
|
|
|
if (this.driver__.driver) {
|
|
|
|
|
|
nextTick().then(() => {
|
|
|
|
|
|
driverObj__.moveNext();
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
clearTimeout(this.getDesignTime);
|
|
|
|
|
|
this.isShowMark = true;
|
|
|
|
|
|
let data = this.getDesignData(this.designCollectionId);
|
|
|
|
|
|
Https.axiosPost(Https.httpUrls.reDesignCollection, data)
|
|
|
|
|
|
.then((rv: any) => {
|
|
|
|
|
|
if (rv) {
|
|
|
|
|
|
let value = {
|
|
|
|
|
|
objectSignList: data.requestIdList.join(),
|
|
|
|
|
|
requestId: rv,
|
|
|
|
|
|
};
|
|
|
|
|
|
this.posiitonData.generateElList.forEach((item: any) => {
|
|
|
|
|
|
item.sort -= 1;
|
|
|
|
|
|
});
|
|
|
|
|
|
this.moveItem("disLike");
|
|
|
|
|
|
this.getDesignResult(value, "resDesign");
|
|
|
|
|
|
this.startDesignType = "resDesign";
|
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((res) => {
|
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
getDesignData(designCollectionId: any) {
|
|
|
|
|
|
let {
|
|
|
|
|
|
moodboardFiles,
|
|
|
|
|
|
printboardFiles,
|
|
|
|
|
|
disposeMoodboard,
|
|
|
|
|
|
// generatePrintFiles,
|
|
|
|
|
|
colorBoards,
|
|
|
|
|
|
sketchboardFiles,
|
|
|
|
|
|
marketingSketchFiles,
|
|
|
|
|
|
moodboardPosition,
|
|
|
|
|
|
} = this.store.state.UploadFilesModule.allBoardData;
|
|
|
|
|
|
console.log(
|
|
|
|
|
|
JSON.parse(
|
|
|
|
|
|
JSON.stringify(this.store.state.UploadFilesModule.allBoardData)
|
|
|
|
|
|
)
|
|
|
|
|
|
);
|
|
|
|
|
|
this.randomNum();
|
|
|
|
|
|
let modelList = [] as any;
|
|
|
|
|
|
let workspace: any = this.store.state.Workspace.probjects;
|
|
|
|
|
|
workspace.model.forEach((item: any) => {
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
id: item.id,
|
|
|
|
|
|
type: item.type,
|
|
|
|
|
|
collectionElementId: item.collectionElementId,
|
|
|
|
|
|
};
|
|
|
|
|
|
modelList.push(obj);
|
|
|
|
|
|
});
|
|
|
|
|
|
let data: any = {
|
|
|
|
|
|
colorBoards: this.getColorBoard(colorBoards),
|
|
|
|
|
|
// marketingSketchs: this.getBoardId(marketingSketchFiles),
|
|
|
|
|
|
moodBoards: this.getBoardId(moodboardFiles),
|
|
|
|
|
|
printBoards: this.getPrintId(printboardFiles),
|
|
|
|
|
|
sketchBoards: this.getSkecthBoard(sketchboardFiles),
|
|
|
|
|
|
moodboardPosition: moodboardPosition
|
|
|
|
|
|
? JSON.stringify(moodboardPosition)
|
|
|
|
|
|
: null,
|
|
|
|
|
|
switchCategory:
|
|
|
|
|
|
workspace.type == "seriesDesign" ? "" : workspace.position.value,
|
|
|
|
|
|
singleOverall: workspace.type == "seriesDesign" ? "overall" : "single",
|
|
|
|
|
|
systemScale: workspace.systemDesignerPercentage
|
|
|
|
|
|
? workspace.systemDesignerPercentage * 0.01
|
|
|
|
|
|
: 0.3,
|
|
|
|
|
|
templateId: "",
|
|
|
|
|
|
// templateId: workspace.model.id,
|
|
|
|
|
|
mannequins: modelList,
|
|
|
|
|
|
modelType: "",
|
|
|
|
|
|
modelSex: workspace?.sex,
|
|
|
|
|
|
moodTemplateId: disposeMoodboard?.[0]
|
|
|
|
|
|
? String(disposeMoodboard[0].id)
|
|
|
|
|
|
: null,
|
|
|
|
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
|
|
|
|
processId: this.designRandom,
|
|
|
|
|
|
projectId: workspace.id,
|
|
|
|
|
|
};
|
|
|
|
|
|
// data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
|
|
|
|
|
|
this.setSystemDesigner(0);
|
|
|
|
|
|
this.designFailure = {
|
|
|
|
|
|
num: 0,
|
|
|
|
|
|
currentNum: 0,
|
|
|
|
|
|
};
|
|
|
|
|
|
if (designCollectionId) {
|
|
|
|
|
|
data.collectionId = designCollectionId;
|
|
|
|
|
|
}
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
let arr = [];
|
|
|
|
|
|
for (let index = 0; index < 8; index++) {
|
|
|
|
|
|
let floor = Math.floor(Math.random() * 90000000) + 10000000;
|
|
|
|
|
|
arr.push(floor);
|
|
|
|
|
|
}
|
|
|
|
|
|
data.requestIdList = arr;
|
|
|
|
|
|
return data;
|
|
|
|
|
|
},
|
|
|
|
|
|
randomNum() {
|
|
|
|
|
|
this.designRandom = String(
|
|
|
|
|
|
Math.floor(Math.random() * 9000000000000000) + 1000000000000000
|
|
|
|
|
|
);
|
|
|
|
|
|
},
|
|
|
|
|
|
getBoardId(boardData: any) {
|
|
|
|
|
|
boardData = boardData || [];
|
|
|
|
|
|
let dataList = boardData.map((v: any) => {
|
|
|
|
|
|
let data: any = {
|
|
|
|
|
|
id: v.resData.id,
|
|
|
|
|
|
designType: v.resData.designType,
|
|
|
|
|
|
};
|
|
|
|
|
|
return data;
|
|
|
|
|
|
});
|
|
|
|
|
|
return dataList;
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
getPrintId(boardData: any) {
|
|
|
|
|
|
boardData = boardData || [];
|
|
|
|
|
|
let dataList = boardData.map((v: any) => {
|
|
|
|
|
|
let data: any = {
|
|
|
|
|
|
id: v.resData.id,
|
|
|
|
|
|
designType: v.resData.designType,
|
|
|
|
|
|
level2Type: v.categoryValue,
|
|
|
|
|
|
isPin: v.pin ? 1 : 0,
|
|
|
|
|
|
};
|
|
|
|
|
|
return data;
|
|
|
|
|
|
});
|
|
|
|
|
|
return dataList;
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
getSkecthBoard(boardData: any) {
|
|
|
|
|
|
boardData = boardData || [];
|
|
|
|
|
|
let sketchBoards = boardData.map((v: any) => {
|
|
|
|
|
|
let data = {
|
|
|
|
|
|
designType: v.resData.designType,
|
|
|
|
|
|
isPin: v.pin ? 1 : 0,
|
|
|
|
|
|
level2Type: v.categoryValue,
|
|
|
|
|
|
sketchBoardId: v.resData.id,
|
|
|
|
|
|
};
|
|
|
|
|
|
return data;
|
|
|
|
|
|
});
|
|
|
|
|
|
return sketchBoards;
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
getColorBoard(boardData: any) {
|
|
|
|
|
|
boardData = boardData || [];
|
|
|
|
|
|
let colorBoards = boardData.map((v: any) => {
|
|
|
|
|
|
let data = {
|
|
|
|
|
|
id: v.id,
|
|
|
|
|
|
name: v.name,
|
|
|
|
|
|
tcx: v.tcx,
|
|
|
|
|
|
gradient: v.gradient,
|
|
|
|
|
|
rgbValue: "",
|
|
|
|
|
|
};
|
|
|
|
|
|
data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
|
|
|
|
|
|
return data;
|
|
|
|
|
|
});
|
|
|
|
|
|
return colorBoards;
|
|
|
|
|
|
},
|
|
|
|
|
|
deleteDesignCollection(list: any, index: any) {
|
|
|
|
|
|
list.splice(index, 1);
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
likeDesignCollection(design: any, index: any, type: any) {
|
|
|
|
|
|
if (this.likeLoading) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (type != "Design") {
|
|
|
|
|
|
this.setNoDesignLike(design, index, type, "like");
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
let data = {
|
|
|
|
|
|
designItemId: design.designItemId,
|
|
|
|
|
|
userGroupId: this.store.state.HomeStoreModule.userGroupId,
|
|
|
|
|
|
projectId: this.store.state.Workspace.probjects.id,
|
|
|
|
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
|
|
|
|
designPythonOutfitId: design.designOutfitId
|
|
|
|
|
|
? design.designOutfitId
|
|
|
|
|
|
: design.designPythonOutfitId,
|
|
|
|
|
|
};
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
this.likeLoading = true;
|
|
|
|
|
|
Https.axiosPost(Https.httpUrls.designLike, data)
|
|
|
|
|
|
.then((rv: any) => {
|
|
|
|
|
|
if (rv) {
|
|
|
|
|
|
let value: any = {
|
|
|
|
|
|
...design,
|
|
|
|
|
|
id: rv.userLikeId,
|
|
|
|
|
|
groupDetailId: rv.userLikeId,
|
|
|
|
|
|
userLikeSortId: rv.userLikeSortId,
|
|
|
|
|
|
userLikeGroupId: rv.userGroupId,
|
|
|
|
|
|
sort: rv.sort,
|
|
|
|
|
|
};
|
|
|
|
|
|
this.store.commit("setUserGroupId", rv.userGroupId);
|
|
|
|
|
|
design.groupDetailId = rv.groupDetailId;
|
|
|
|
|
|
this.store.commit("addLikeDesignCollectionList", value);
|
|
|
|
|
|
this.setLikeDislLike("like", value);
|
|
|
|
|
|
if (index != -1)
|
|
|
|
|
|
this.store.commit("deleteDesignCollectionList", index);
|
|
|
|
|
|
if (this.startDesignType === "resDesign") {
|
|
|
|
|
|
this.getHistoryChoose(this.userGroupId, "like");
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
this.likeLoading = false;
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((rv) => {
|
|
|
|
|
|
this.likeLoading = false;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
//不喜欢设计
|
|
|
|
|
|
dislikeDesignCollection(design: any, type: string, index: any) {
|
|
|
|
|
|
let data = {
|
|
|
|
|
|
designId: design.designId || this.designId,
|
|
|
|
|
|
designPythonOutfitId: design.designOutfitId,
|
|
|
|
|
|
groupDetailId: design.groupDetailId || design.id,
|
|
|
|
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
|
|
|
|
};
|
|
|
|
|
|
if (type != "Design") {
|
|
|
|
|
|
this.setNoDesignLike(design, index, type, "disLike");
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (this.disLikeLoading) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
this.disLikeLoading = true;
|
|
|
|
|
|
Https.axiosPost(Https.httpUrls.designDislike, data)
|
|
|
|
|
|
.then((rv: any) => {
|
|
|
|
|
|
if (rv) {
|
|
|
|
|
|
// this.store.commit("addDesignCollectionList", [design]);
|
|
|
|
|
|
this.likeDesignCollectionList.forEach((item: any) => {
|
|
|
|
|
|
if (item.sort > design.sort) {
|
|
|
|
|
|
item.sort -= 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
this.store.commit("deleteLikeDesignCollectionList", index);
|
|
|
|
|
|
this.setLikeDislLike("disLike", design);
|
|
|
|
|
|
}
|
|
|
|
|
|
this.disLikeLoading = false;
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((rv) => {
|
|
|
|
|
|
this.disLikeLoading = false;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
//获取选择的组
|
|
|
|
|
|
getHistoryChoose(userGroupId: any, type: any) {
|
|
|
|
|
|
this.isShowMark = true;
|
|
|
|
|
|
let url = Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
|
|
|
|
|
|
Https.axiosGet(url)
|
|
|
|
|
|
.then((rv: any) => {
|
|
|
|
|
|
this.setPortfolio(rv.portfolioDTO);
|
|
|
|
|
|
this.store.commit("setUserGroupId", rv.userGroupId);
|
|
|
|
|
|
this.dealHistoryChooseData(rv, type);
|
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((rv) => {
|
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
getWorks(userGroupId: any, type: any) {
|
|
|
|
|
|
let data: any = {
|
|
|
|
|
|
accountId: 0,
|
|
|
|
|
|
collectionId: 0,
|
|
|
|
|
|
coverId: 0,
|
|
|
|
|
|
createDate: "",
|
|
|
|
|
|
id: userGroupId,
|
|
|
|
|
|
isDeleted: 0,
|
|
|
|
|
|
portfolioDes: "",
|
|
|
|
|
|
portfolioName: "",
|
|
|
|
|
|
portfolioType: "",
|
|
|
|
|
|
status: 0,
|
|
|
|
|
|
updateDate: "",
|
|
|
|
|
|
userLikeGroupId: "",
|
|
|
|
|
|
};
|
|
|
|
|
|
this.isShowMark = true;
|
|
|
|
|
|
Https.axiosPost(Https.httpUrls.setPorfolioChoose, data)
|
|
|
|
|
|
.then((rv: any) => {
|
|
|
|
|
|
this.setPortfolio(rv.portfolioDTO);
|
|
|
|
|
|
this.store.commit("setUserGroupId", rv.userGroupId);
|
|
|
|
|
|
this.dealHistoryChooseData(rv, type);
|
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((res) => {
|
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
//处理选择组的数据
|
|
|
|
|
|
dealHistoryChooseData(data: any, type: any) {
|
|
|
|
|
|
let collectionData = {
|
|
|
|
|
|
disposeMoodboard: data.collection.moodTemplateId
|
|
|
|
|
|
? [
|
|
|
|
|
|
{
|
|
|
|
|
|
id: data.collection.moodTemplateId,
|
|
|
|
|
|
imgUrl: data.collection.moodTemplateUrl,
|
|
|
|
|
|
resData: {
|
|
|
|
|
|
name: data.collection.moodTemplateName,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
: [],
|
|
|
|
|
|
moodboardPosition: data.collection.moodboardPosition
|
|
|
|
|
|
? JSON.parse(data.collection.moodboardPosition)
|
|
|
|
|
|
: {},
|
|
|
|
|
|
moodboardFiles: this.dealViewChooseData(
|
|
|
|
|
|
data.collection.moodBoards,
|
|
|
|
|
|
"Moodboard"
|
|
|
|
|
|
),
|
|
|
|
|
|
printboardFiles: this.dealViewChooseData(
|
|
|
|
|
|
data.collection.printBoards,
|
|
|
|
|
|
"Printboard"
|
|
|
|
|
|
),
|
|
|
|
|
|
generatePrintFiles: [],
|
|
|
|
|
|
colorBoards: this.dealViewChooseColor(data.collection.colorBoards),
|
|
|
|
|
|
sketchboardFiles: this.dealViewChooseData(
|
|
|
|
|
|
data.collection.sketchBoards,
|
|
|
|
|
|
"Sketchboard"
|
|
|
|
|
|
),
|
|
|
|
|
|
marketingSketchFiles: this.dealViewChooseData(
|
|
|
|
|
|
data.collection.marketingSketchs,
|
|
|
|
|
|
""
|
|
|
|
|
|
),
|
|
|
|
|
|
};
|
|
|
|
|
|
this.store.commit("setAllBoardDataChoose", collectionData);
|
|
|
|
|
|
// this.store.commit('clearShowSketchboard')
|
|
|
|
|
|
this.store.commit("setShowSketchboard", data.collection.sketchBoards);
|
|
|
|
|
|
this.store.commit("setDesignCollectionId", data.collection.collectionId);
|
|
|
|
|
|
if (type === "normal") {
|
|
|
|
|
|
let likeDesignCollectionList = data.userLikeDetails.map((v: any) => {
|
|
|
|
|
|
let data = {
|
|
|
|
|
|
...v,
|
|
|
|
|
|
groupDetailId: v.id,
|
|
|
|
|
|
designItemUrl: v.designOutfitUrl,
|
|
|
|
|
|
designItemId: v.designItemId,
|
|
|
|
|
|
};
|
|
|
|
|
|
return data;
|
|
|
|
|
|
});
|
|
|
|
|
|
this.store.commit(
|
|
|
|
|
|
"setLikeDesignCollectionList",
|
|
|
|
|
|
likeDesignCollectionList
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
this.setSystemDesigner(100);
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
//统一处理选择组的渲染数据
|
|
|
|
|
|
dealViewChooseData(data: any, str: string) {
|
|
|
|
|
|
if (!data) {
|
|
|
|
|
|
return [];
|
|
|
|
|
|
}
|
|
|
|
|
|
let filesList = data.map((v: any) => {
|
|
|
|
|
|
let newData: any = {
|
|
|
|
|
|
imgUrl: v.url ? v.url : v.designOutfitUrl,
|
|
|
|
|
|
id: v.id,
|
|
|
|
|
|
status: "done",
|
|
|
|
|
|
resData: v,
|
|
|
|
|
|
type_: {
|
|
|
|
|
|
type1: "material",
|
|
|
|
|
|
type2: v.level1Type,
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
if (v.level1Type === "Sketchboard") {
|
|
|
|
|
|
newData.pin = v.isPin;
|
|
|
|
|
|
newData.categoryValue = v.level2Type;
|
|
|
|
|
|
newData.level2Type = v.level2Type;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (v.level1Type === "Printboard") {
|
|
|
|
|
|
newData.pin = v.isPin;
|
|
|
|
|
|
newData.level2Type = v.level2Type;
|
|
|
|
|
|
newData.categoryValue = v.level2Type;
|
|
|
|
|
|
}
|
|
|
|
|
|
return newData;
|
|
|
|
|
|
});
|
|
|
|
|
|
return filesList;
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
//统一处理选择组的渲染数据
|
|
|
|
|
|
dealViewChooseColor(data: any) {
|
|
|
|
|
|
let colorList = data.map((v: any) => {
|
|
|
|
|
|
let rgbValue = v.rgbValue.split(" ");
|
|
|
|
|
|
let newData: any = {
|
|
|
|
|
|
id: v.id,
|
|
|
|
|
|
name: v.name,
|
|
|
|
|
|
tcx: v.tcx || "",
|
|
|
|
|
|
rgbValue: {
|
|
|
|
|
|
r: rgbValue[0],
|
|
|
|
|
|
g: rgbValue[1],
|
|
|
|
|
|
b: rgbValue[2],
|
|
|
|
|
|
a: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
if (v.gradient) {
|
|
|
|
|
|
newData.gradient = v.gradient;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
delete newData.gradient;
|
|
|
|
|
|
}
|
|
|
|
|
|
return newData;
|
|
|
|
|
|
});
|
|
|
|
|
|
return colorList;
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
//销毁图片详情
|
|
|
|
|
|
setDetailDestroy() {
|
|
|
|
|
|
// let designDetail: any = this.$refs.designDetail;
|
|
|
|
|
|
// designDetail.destroy();
|
|
|
|
|
|
this.detailDestroy = false;
|
|
|
|
|
|
},
|
|
|
|
|
|
//打开图片详情
|
|
|
|
|
|
designDetail(
|
|
|
|
|
|
design: any,
|
|
|
|
|
|
index: number,
|
|
|
|
|
|
collectionList: any,
|
|
|
|
|
|
type: string
|
|
|
|
|
|
) {
|
|
|
|
|
|
// if()
|
|
|
|
|
|
if (this.isMove) return;
|
|
|
|
|
|
if (design.resultType != "Design") {
|
|
|
|
|
|
this.setEditDesignType(
|
|
|
|
|
|
collectionList,
|
|
|
|
|
|
index,
|
|
|
|
|
|
design.resultType,
|
|
|
|
|
|
"edit",
|
|
|
|
|
|
type
|
|
|
|
|
|
);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
design.designOutfitId = design.designPythonOutfitId
|
|
|
|
|
|
? design.designPythonOutfitId
|
|
|
|
|
|
: design.designOutfitId;
|
|
|
|
|
|
let data = {
|
|
|
|
|
|
design: design,
|
|
|
|
|
|
index: index,
|
|
|
|
|
|
collectionList: collectionList,
|
|
|
|
|
|
type: type,
|
|
|
|
|
|
};
|
|
|
|
|
|
this.detailDestroy = true;
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
let designDetail: any = this.$refs.designDetail;
|
|
|
|
|
|
designDetail.showDesignDetailModal(data);
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
//完成单个图片设计
|
|
|
|
|
|
finishRedesign(event: any) {
|
|
|
|
|
|
let { design, index, type } = event;
|
|
|
|
|
|
if (type === "disLike") {
|
|
|
|
|
|
this.store.commit("setSingleDesignCollectionList", {
|
|
|
|
|
|
index: index,
|
|
|
|
|
|
design: design,
|
|
|
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.store.commit("setSingleLikeDesignCollectionList", {
|
|
|
|
|
|
index: index,
|
|
|
|
|
|
design: design,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
this.setDetailDestroy();
|
|
|
|
|
|
},
|
|
|
|
|
|
setTask(data: any) {
|
|
|
|
|
|
this.$emit("setTask", data);
|
|
|
|
|
|
// this.exportModel()
|
|
|
|
|
|
},
|
|
|
|
|
|
setShowHide(str: string) {
|
|
|
|
|
|
if (str == "recycleDomHidden")
|
|
|
|
|
|
this.recycleDomHidden = !this.recycleDomHidden;
|
|
|
|
|
|
if (str == "domHidden") this.domHidden = !this.domHidden;
|
|
|
|
|
|
// this.setSystemDesigner(0)
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
2025-05-20 16:47:27 +08:00
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
.designPage {
|
2025-06-18 22:57:10 +08:00
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
// padding-right:5rem;
|
|
|
|
|
|
overflow: initial !important;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.page_content {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
.designPage_left_bottom {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 4rem;
|
|
|
|
|
|
height: 7rem;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border: 2px solid;
|
|
|
|
|
|
border-right: none;
|
|
|
|
|
|
border-radius: 2rem 0 0 2rem;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translate(-100%, -50%);
|
|
|
|
|
|
left: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
> span {
|
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
transform: rotate(270deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.page_content_body {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
// padding-bottom: 4rem;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
.right_content_header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
height: 6.5rem;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 0 3.2rem 0 1.9rem;
|
|
|
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.right_content_export {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.icon-xiala {
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
transition: 0.3s all;
|
|
|
|
|
|
margin-left: 1rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
.icon_rotate {
|
|
|
|
|
|
-moz-transform: rotate(180deg);
|
|
|
|
|
|
-webkit-transform: rotate(180deg);
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
|
animation-direction: 0.5s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.export_nav {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 5.5rem;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
|
border: 2px solid;
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
label {
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.content_header_left {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.icon-dangqianweizhi {
|
|
|
|
|
|
font-size: 1.6rem;
|
|
|
|
|
|
color: #000;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.content_header_des {
|
|
|
|
|
|
font-size: 1.6rem;
|
|
|
|
|
|
color: #000000;
|
|
|
|
|
|
margin-left: 1rem;
|
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.designPage_body {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
// padding-left: 0.7rem;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
.designPage_left {
|
|
|
|
|
|
// width: 44.4rem;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
.designPage_left_content {
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
width: 50rem;
|
|
|
|
|
|
// width: 55rem;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
// transition: all .3s;
|
|
|
|
|
|
padding-right: 1.2rem;
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
|
width: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.home_left_info {
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
background: #f6f6fa;
|
|
|
|
|
|
border-radius: 2rem;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
.left_info_content {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: calc(100% - 6.9rem);
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
&.left_info_content::-webkit-scrollbar {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.left_info_content_body {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.left_info_hint {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
span {
|
|
|
|
|
|
font-size: 1.3rem;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
.designPage_right {
|
|
|
|
|
|
// width: calc(100% - 44.4rem);
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.designPage_left_bottom {
|
|
|
|
|
|
border-radius: 0 2rem 2rem 0rem;
|
|
|
|
|
|
left: 2rem;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: auto;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
transform: translate(100%, -50%);
|
|
|
|
|
|
// top: calc(50% - 10.4rem / 2);
|
|
|
|
|
|
border: 2px solid;
|
|
|
|
|
|
border-left: none;
|
|
|
|
|
|
background: #000;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
right: 53rem;
|
|
|
|
|
|
transform: translate(0, -50%);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.right_top {
|
|
|
|
|
|
padding: 1rem 3.2rem 2rem 1.2rem;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
|
|
|
|
|
|
background: rgba(255, 255, 255, 0.4);
|
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
|
height: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.right_top_left {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
.button_margin_14 {
|
|
|
|
|
|
margin-left: 1.4rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
.silder {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.text {
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 1.8rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
.system_silder {
|
|
|
|
|
|
margin: 0 3rem;
|
|
|
|
|
|
width: 12rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.right_content_block_box {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.right_content_block {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
width: 0;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
&.recycleBin {
|
|
|
|
|
|
flex: none;
|
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
|
width: 0;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
&.recycleBinShow {
|
|
|
|
|
|
width: auto;
|
|
|
|
|
|
margin-left: 2rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
.right_content_body {
|
|
|
|
|
|
width: 55rem;
|
|
|
|
|
|
// width: 55rem;
|
|
|
|
|
|
.right_content_img_block {
|
|
|
|
|
|
.content_img_block {
|
|
|
|
|
|
width: 16rem;
|
|
|
|
|
|
height: 23rem;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
&.right_content_block::-webkit-scrollbar {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
.right_content_body {
|
|
|
|
|
|
// padding: 0 1.8rem 0 1.2rem;
|
|
|
|
|
|
// height: calc(50% - 4.5rem);
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
background: #f6f6fa;
|
|
|
|
|
|
border-radius: 2rem;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
.right_content_img_block {
|
|
|
|
|
|
// overflow-y: auto;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
width: auto;
|
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
// padding-bottom: 1rem;
|
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
&.active::-webkit-scrollbar {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
// &.active::-webkit-scrollbar-button:single-button{
|
|
|
|
|
|
// display: none;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// &.active::-webkit-scrollbar {
|
|
|
|
|
|
// /* 竖轴的宽度 */
|
|
|
|
|
|
// width: 1rem;
|
|
|
|
|
|
// /* 横轴的高度 */
|
|
|
|
|
|
// height: 1rem;
|
|
|
|
|
|
// transition: all .3s;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// /* 进度 */
|
|
|
|
|
|
// &.active::-webkit-scrollbar-thumb {
|
|
|
|
|
|
// border-radius: 1rem;
|
|
|
|
|
|
// background: rgba(238, 238, 244, 0);
|
|
|
|
|
|
// }
|
|
|
|
|
|
// /* 轨道 */
|
|
|
|
|
|
// &.active::-webkit-scrollbar-track {
|
|
|
|
|
|
// border-radius: 1rem;
|
|
|
|
|
|
// background: rgba(238, 238, 244, 0);
|
|
|
|
|
|
// }
|
|
|
|
|
|
// &.active:hover {
|
|
|
|
|
|
// // overflow-x: scroll;
|
|
|
|
|
|
// &.active::-webkit-scrollbar-thumb {
|
|
|
|
|
|
// background: #543087;
|
|
|
|
|
|
// }
|
|
|
|
|
|
// /* 轨道 */
|
|
|
|
|
|
// &.active::-webkit-scrollbar-track {
|
|
|
|
|
|
// background: rgba(84, 48, 135,.2);
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
> div {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
// padding: 0 2.8rem 0 0.9rem;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
// align-content: flex-start;
|
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.content_img_block {
|
|
|
|
|
|
// width: 24rem;
|
|
|
|
|
|
// height: 37rem;
|
|
|
|
|
|
width: calc(33.33% - 30px);
|
|
|
|
|
|
height: calc((33.33% - 30px) * 1.54);
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
margin: 5px;
|
|
|
|
|
|
// min-height: 271px;
|
|
|
|
|
|
// max-height: 80%;
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
display: inline-block;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
transition: top, left 0.5s;
|
|
|
|
|
|
// transition: top,left .3s;
|
|
|
|
|
|
&:hover .btn {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
}
|
|
|
|
|
|
.content_img_flex {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
border-radius: 2rem;
|
|
|
|
|
|
border: 2px solid #e0e0e0;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
.content_img_block_child {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
border-radius: 2rem;
|
|
|
|
|
|
border: 2px solid #00000070;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
left: -43%;
|
|
|
|
|
|
transform: translateX(69%);
|
|
|
|
|
|
top: 0rem;
|
|
|
|
|
|
> .childItem {
|
|
|
|
|
|
> .content_img_flex {
|
|
|
|
|
|
border: 2px solid #00000070;
|
|
|
|
|
|
}
|
|
|
|
|
|
position: relative !important;
|
|
|
|
|
|
> img {
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
.icon_like,
|
|
|
|
|
|
.icon_delete {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
.content_img_flex {
|
|
|
|
|
|
&.Design {
|
|
|
|
|
|
border: 2px solid #000;
|
|
|
|
|
|
}
|
|
|
|
|
|
&.PoseTransfer {
|
|
|
|
|
|
border: 2px solid #f0d9d0;
|
|
|
|
|
|
}
|
|
|
|
|
|
&.ToProductImage {
|
|
|
|
|
|
border: 2px solid #ccece5;
|
|
|
|
|
|
}
|
|
|
|
|
|
&.Relight {
|
|
|
|
|
|
border: 2px solid #ccece5;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.content_img {
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
// object-fit: contain;
|
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
}
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
.btn {
|
|
|
|
|
|
top: 1rem;
|
|
|
|
|
|
right: 1rem;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
> i {
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
width: 3rem;
|
|
|
|
|
|
height: 3rem;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
.icon_like,
|
|
|
|
|
|
.icon_delete {
|
|
|
|
|
|
font-size: 1.4rem;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
.icon_delete {
|
|
|
|
|
|
top: 5rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
.icon-jushoucang {
|
|
|
|
|
|
color: #000;
|
|
|
|
|
|
}
|
|
|
|
|
|
.icon-jushoucanggift {
|
|
|
|
|
|
// color: rgba(52, 53, 121, 1);
|
|
|
|
|
|
color: #000;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-06-18 11:05:23 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
.page_content_bg {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
.progress_mark {
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
2025-05-20 16:47:27 +08:00
|
|
|
|
|
2025-06-18 22:57:10 +08:00
|
|
|
|
.mark_content {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.btnOpen {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: max-content;
|
|
|
|
|
|
left: 30px;
|
|
|
|
|
|
top: 30px;
|
|
|
|
|
|
transform: translateX(-100%);
|
|
|
|
|
|
background: #e4e4e7;
|
|
|
|
|
|
padding: 12px;
|
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
z-index: 999;
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
> .item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
padding: 8px;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
> .text {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
background: #efeff1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-05-20 16:47:27 +08:00
|
|
|
|
}
|
2025-06-18 22:57:10 +08:00
|
|
|
|
</style>
|
