1609 lines
48 KiB
Vue
1609 lines
48 KiB
Vue
<template>
|
||
<div class="toProduct">
|
||
<div class="productImg_content">
|
||
<div class="productImg_content_bottom">
|
||
<div class="productImg_left generalModel_state" :class="{ active: button.left }">
|
||
<div class="selectImg">
|
||
<div class="head">
|
||
<div class="text">
|
||
{{
|
||
source == 'design'
|
||
? $t('ProductImg.DesignSelectCollection')
|
||
: productimgMenu.value == 'ToProductImage'
|
||
? $t('ProductImg.SelectCollection')
|
||
: $t('ProductImg.SelectCollectionRelight')
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="imgBox" v-mousewheel>
|
||
<div
|
||
class="item"
|
||
:class="[item?.isChecked ? 'active' : '']"
|
||
v-for="(item, index) in fileList[productimgMenu.value]"
|
||
@click="setGenerate(item)"
|
||
:key="item.id"
|
||
>
|
||
<div
|
||
class=""
|
||
v-if="item.status == 'uploading'"
|
||
style="display: flex; align-items: center"
|
||
>
|
||
<a-spin size="large" />
|
||
</div>
|
||
<img
|
||
v-show="item.status != 'uploading'"
|
||
:src="item.designOutfitUrl || item.imgUrl || item.url"
|
||
alt=""
|
||
/>
|
||
<div v-show="item.status != 'uploading'" class="btnBox">
|
||
<div :class="{ active: item.isChecked }">
|
||
<i class="fi fi-br-check"></i>
|
||
</div>
|
||
<div
|
||
@click.stop="setUploadDelete(item, index)"
|
||
v-if="source != 'design'"
|
||
>
|
||
<i class="fi fi-rr-trash icon_delete"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="upload_item item" v-show="!isDesignPage">
|
||
<div class="upload_file_item">
|
||
<a-upload
|
||
:action="uploadUrl + '/api/history/toProductImageElementUpload'"
|
||
list-type="picture-card"
|
||
:capture="null"
|
||
:data="{
|
||
...upload
|
||
}"
|
||
:headers="{ Authorization: token }"
|
||
:before-upload="beforeUpload"
|
||
:multiple="!!upload.projectId"
|
||
accept=".jpg,.png,.jpeg,.bmp"
|
||
@change="file => fileUploadChange(file)"
|
||
>
|
||
<div class="upload_tip_block">
|
||
<i class="fi fi-br-upload"></i>
|
||
</div>
|
||
</a-upload>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-show="productimgMenu.value == 'ToProductImage' && !speedData.value"
|
||
class="productImg_content_item_title productImg_content_item_title_similarity"
|
||
>
|
||
<span>{{ $t('ProductImg.Similarity') }}</span>
|
||
</div>
|
||
<div
|
||
v-show="productimgMenu.value == 'ToProductImage' && !speedData.value"
|
||
class="productImg_content_item_similarity"
|
||
>
|
||
<a-slider
|
||
class="system_silder"
|
||
v-model:value="similarity"
|
||
@afterChange="setSimilarity"
|
||
:tooltipVisible="false"
|
||
:step="5"
|
||
:max="100"
|
||
></a-slider>
|
||
<input
|
||
style="margin-left: 2rem"
|
||
type="number"
|
||
readonly
|
||
v-model="similarity"
|
||
/>
|
||
</div>
|
||
<div
|
||
v-show="
|
||
productimgMenu.value == 'Relight' &&
|
||
!(speedData.value == 'advanced' || speedData.value == 'flux')
|
||
"
|
||
class="productImg_content_item_title productImg_content_item_title_similarity"
|
||
>
|
||
<span>{{ $t('ProductImg.RelightDirection') }}</span>
|
||
</div>
|
||
<div
|
||
v-show="
|
||
productimgMenu.value == 'Relight' &&
|
||
!(speedData.value == 'advanced' || speedData.value == 'flux')
|
||
"
|
||
class="productImg_content_item_Direction generalModel_state_item"
|
||
>
|
||
<a-select
|
||
size="large"
|
||
style="width: 100%"
|
||
v-model:value="RelightDirection"
|
||
:options="RelightDirectionList"
|
||
></a-select>
|
||
</div>
|
||
<div
|
||
v-show="
|
||
productimgMenu.value == 'Relight' &&
|
||
!(speedData.value == 'advanced' || speedData.value == 'flux')
|
||
"
|
||
class="productImg_content_item_title productImg_content_item_title_similarity"
|
||
>
|
||
<span>{{ $t('ProductImg.Highlight') }}</span>
|
||
</div>
|
||
<div
|
||
v-show="
|
||
productimgMenu.value == 'Relight' &&
|
||
!(speedData.value == 'advanced' || speedData.value == 'flux')
|
||
"
|
||
class="productImg_content_item_similarity"
|
||
>
|
||
<a-slider
|
||
class="system_silder"
|
||
v-model:value="brightenValue"
|
||
:tooltipVisible="false"
|
||
:max="3"
|
||
:min="1"
|
||
:step="0.1"
|
||
></a-slider>
|
||
<input
|
||
style="margin-left: 2rem"
|
||
type="number"
|
||
readonly
|
||
v-model="brightenValue"
|
||
/>
|
||
</div>
|
||
<div class="prompt-container">
|
||
<div class="prompt-title">{{ $t('ProductImg.Prompt') }}</div>
|
||
<div class="input_border productImg_content_item_generate">
|
||
<div class="input_box">
|
||
<div class="input_box_btnBox">
|
||
<textarea
|
||
class="textarea"
|
||
ref="textarea"
|
||
@input="ifMaximumLength"
|
||
:placeholder="
|
||
productimgMenu.value == 'Relight'
|
||
? $t('ProductImg.relightInput')
|
||
: $t('ProductImg.productInput')
|
||
"
|
||
@keydown.enter.prevent="getPrductimg()"
|
||
v-model="searchName[productimgMenu.value]"
|
||
></textarea>
|
||
<div class="asistant-btn" @click="handleClickAssistBtn">
|
||
<i class="fi fi-bs-magic-wand asistant-icon"></i>
|
||
<span>{{ $t('ProductImg.PromptAssit') }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="productImg_content_item_generate_btn input_border">
|
||
<div class="generage_btn_box">
|
||
<div v-show="!isProductimg" class="generage_btn started_btn">
|
||
<i
|
||
class="fi fi-bs-magic-wand"
|
||
style="background-color: #000; font-size: 2.3rem; flex: 1; margin: 0"
|
||
@click="getPrductimg"
|
||
></i>
|
||
<div
|
||
v-show="productimgMenu.value != 'Relight'"
|
||
class="icon iconfont icon-xiala"
|
||
:class="{ active: speedState }"
|
||
@click.stop="openSpeed"
|
||
></div>
|
||
<div class="content" v-show="speedState">
|
||
<div
|
||
v-for="item in speedList"
|
||
:key="item.value"
|
||
:class="{ active: item.value == speedData.value }"
|
||
@click="setSpeed(item)"
|
||
:title="item.title"
|
||
>
|
||
{{ item.label }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-show="isProductimg"
|
||
class="generage_btn started_btn"
|
||
@click="getPrductimg"
|
||
>
|
||
<i class="fi fi-br-loading"></i>
|
||
</div>
|
||
<!-- <div v-show="isProductimg && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
|
||
<i class="fi fi-br-loading"></i>
|
||
</div> -->
|
||
<!-- <div v-show="remProductimg" @click="removeProductimg" class="generage_btn started_btn">
|
||
{{$t('Generate.Close')}}
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="productImg_right">
|
||
<div class="productImg_right_item_box generalScroll">
|
||
<div class="content_header_left">
|
||
<i class="fi fi-rs-comments"></i>
|
||
<span class="content_header_des">
|
||
{{
|
||
source == 'design'
|
||
? $t('ProductImg.DesignSelectedDesign')
|
||
: $t('ProductImg.SelectedDesign')
|
||
}}
|
||
</span>
|
||
</div>
|
||
<div class="content">
|
||
<img
|
||
class="guide"
|
||
v-if="
|
||
locale == 'ENGLISH' &&
|
||
likeList[productimgMenu.value] == 0 &&
|
||
generateList[productimgMenu.value] == 0
|
||
"
|
||
:src="
|
||
'/image/toolsGuide/' +
|
||
(productimgMenu.value == 'ToProductImage' ? 'productEN' : 'relightEN') +
|
||
'.png'
|
||
"
|
||
alt=""
|
||
/>
|
||
<img
|
||
class="guide"
|
||
v-else-if="
|
||
likeList[productimgMenu.value] == 0 &&
|
||
generateList[productimgMenu.value] == 0
|
||
"
|
||
:src="
|
||
'/image/toolsGuide/' +
|
||
(productimgMenu.value == 'ToProductImage' ? 'productCN' : 'relightCN') +
|
||
'.png'
|
||
"
|
||
alt=""
|
||
/>
|
||
<generalDrag
|
||
ref="generalDragLeft"
|
||
:type="productimgMenu.value"
|
||
:isCopy="!isDesignPage"
|
||
@setBtn="selectSetBtn"
|
||
:isDelete="false"
|
||
:isLike="true"
|
||
:list="likeList[productimgMenu.value]"
|
||
></generalDrag>
|
||
</div>
|
||
<!-- </div> -->
|
||
|
||
<!-- <div class="btnLeft" @click="setSize('left')">
|
||
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
|
||
</div> -->
|
||
<div class="btnRight" @click="setSize('right')">
|
||
<span
|
||
class="icon iconfont icon-xiala"
|
||
:class="{ active: button.right }"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="productImg_right"
|
||
:class="{ active: button.right, designPage: isDesignPage }"
|
||
>
|
||
<div class="productImg_right_item_box right generalScroll">
|
||
<div class="content_header_left">
|
||
<i class="fi fi-rs-comments"></i>
|
||
<span class="content_header_des">
|
||
{{
|
||
source == 'design'
|
||
? $t('ProductImg.DesignproductImageDrafts')
|
||
: $t('ProductImg.productImageDrafts')
|
||
}}
|
||
</span>
|
||
</div>
|
||
<div class="content">
|
||
<generalDrag
|
||
ref="generalDragRight"
|
||
:type="productimgMenu.value"
|
||
:isCopy="!isDesignPage"
|
||
@setBtn="generateSetBtn"
|
||
:list="generateList[productimgMenu.value]"
|
||
:showMark="isShowMark"
|
||
></generalDrag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<scaleImage
|
||
ref="scaleImage"
|
||
:productData="{
|
||
upload: upload,
|
||
similarity: similarity,
|
||
brightenValue: brightenValue,
|
||
RelightDirection: RelightDirection,
|
||
RelightDirectionList: RelightDirectionList
|
||
}"
|
||
:isProductimg="true"
|
||
></scaleImage>
|
||
<Prompt v-model:showModal="showPromptAssist" :promptList="promptTextList" />
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { LoadingOutlined } from '@ant-design/icons-vue'
|
||
import {
|
||
defineComponent,
|
||
watch,
|
||
createVNode,
|
||
h,
|
||
ref,
|
||
toRefs,
|
||
computed,
|
||
reactive,
|
||
triggerRef,
|
||
nextTick,
|
||
inject,
|
||
onMounted
|
||
} from 'vue'
|
||
import { Https } from '@/tool/https'
|
||
import { getCookie, setCookie } from '@/tool/cookie'
|
||
// import domTurnImg from '@/tool/domTurnImg'
|
||
import { getUploadUrl, isMoible } from '@/tool/util'
|
||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||
import { Upload, message, Modal } from 'ant-design-vue'
|
||
import { downloadIamge } from '@/tool/util'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useStore } from 'vuex'
|
||
import scaleImage from '@/component/HomePage/scaleImage.vue'
|
||
import generalMenu from '@/component/HomePage/generalMenu.vue'
|
||
import generalDrag from '@/component/modules/generalDrag.vue'
|
||
import Prompt from './Prompt.vue'
|
||
import { List } from 'echarts'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
|
||
export default defineComponent({
|
||
components: {
|
||
scaleImage,
|
||
generalMenu,
|
||
generalDrag,
|
||
Prompt
|
||
},
|
||
props: {
|
||
setTask: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
source: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
productimgMenu: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
isDesignPage: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
isState: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
emit: ['unLike'],
|
||
setup(props, { emit }) {
|
||
const store = useStore()
|
||
let userDetail: any = computed(() => {
|
||
return store.state.UserHabit.userDetail
|
||
})
|
||
const { t, locale } = useI18n()
|
||
const upload: any = ref({
|
||
projectId: computed(() => store.state.Workspace.probjects.id)
|
||
})
|
||
let driver__: any = computed(() => {
|
||
return store.state.Guide.guide
|
||
})
|
||
const route = useRoute()
|
||
const createProbject: any = inject('createProbject', () => {})
|
||
let productImgData: any = reactive({
|
||
isShowMark: false,
|
||
fileList: {},
|
||
searchName: {
|
||
ToProductImage: '',
|
||
Relight: ''
|
||
},
|
||
remProductimg: false, //是否出现取消按钮
|
||
isProductimg: false, //开始生成
|
||
selectProductimgList: [],
|
||
generateList: {
|
||
ToProductImage: computed(() => {
|
||
if (!route.query?.id && route.query.tools == 'toProduct') {
|
||
return []
|
||
} else {
|
||
return store.state.HomeStoreModule.toProductImageList.list
|
||
}
|
||
}),
|
||
Relight: computed(() => {
|
||
if (!route.query?.id && route.query.tools == 'relight') {
|
||
return []
|
||
} else {
|
||
return store.state.HomeStoreModule.relightList.list
|
||
}
|
||
})
|
||
},
|
||
selectObject: computed(() => store.state.Workspace.probjects), //选择的项目
|
||
likeList: {
|
||
ToProductImage: computed(() => {
|
||
if (!route.query?.id && route.query.tools == 'toProduct') {
|
||
return []
|
||
} else {
|
||
return store.state.HomeStoreModule.toProductImageList.likedList
|
||
}
|
||
}),
|
||
Relight: computed(() => {
|
||
if (!route.query?.id && route.query.tools == 'relight') {
|
||
return []
|
||
} else {
|
||
return store.state.HomeStoreModule.relightList.likedList
|
||
}
|
||
})
|
||
} as any,
|
||
similarity: 30,
|
||
brightenValue: 1,
|
||
button: {
|
||
left: false,
|
||
right: false
|
||
},
|
||
textarea: null as any
|
||
})
|
||
let speed = reactive({
|
||
speedList: [
|
||
{
|
||
title: '',
|
||
label: t('speedList.toproductFlus'),
|
||
relightLabel: t('speedList.relightEdit'),
|
||
value: 'advanced'
|
||
},
|
||
{
|
||
title: '',
|
||
label: t('speedList.toproductBasic'),
|
||
relightLabel: t('speedList.changeBackground'),
|
||
value: ''
|
||
}
|
||
],
|
||
speedState: false,
|
||
speedData: {
|
||
title: '',
|
||
label: t('speedList.toproductFlus'),
|
||
relightLabel: t('speedList.relightEdit'),
|
||
value: 'advanced'
|
||
}
|
||
})
|
||
const productImgDom = reactive({
|
||
generalDragLeft: null as any,
|
||
generalDragRight: null as any
|
||
})
|
||
let productimgMenuList = ref([
|
||
{
|
||
value: 'ToProductImage',
|
||
label: useI18n().t('ProductImg.ProductImage')
|
||
},
|
||
{
|
||
value: 'Relight',
|
||
label: useI18n().t('ProductImg.Relight')
|
||
}
|
||
])
|
||
// let productimgMenu:any = ref(productimgMenuList.value[0])
|
||
let RelightDirectionList = ref([
|
||
{
|
||
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')
|
||
}
|
||
])
|
||
let RelightDirection: any = ref(RelightDirectionList.value[0].value)
|
||
// let likeDesignCollectionList: any = computed(() => {
|
||
// return store.state.HomeStoreModule.likeDesignCollectionList;
|
||
// });
|
||
let selectDesignList: any = computed(() => {
|
||
return store.state.UploadFilesModule.modularData
|
||
})
|
||
let userlikeGroupId = 0
|
||
watch(
|
||
() => store.state.HomeStoreModule.uploadElement.length,
|
||
(newVal, oldVal) => {
|
||
setFileList()
|
||
}
|
||
)
|
||
const setFileList = () => {
|
||
if (props.isDesignPage) return
|
||
if (!route.query?.id && route.query.tools) {
|
||
productImgData.fileList[props.productimgMenu.value] = []
|
||
} else {
|
||
productImgData.fileList[props.productimgMenu.value] =
|
||
store.state.HomeStoreModule.uploadElement
|
||
if (productImgData.fileList[props.productimgMenu.value][0]) {
|
||
productImgData.fileList[props.productimgMenu.value][0].isChecked = true
|
||
}
|
||
}
|
||
}
|
||
const openSetData = (designList: any) => {
|
||
// cleardata()
|
||
// if(props.productimgMenu.value == 'ToProductImage'){
|
||
// selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(selectDesignList.value.design.likeData))
|
||
// }else if(props.productimgMenu.value == 'Relight'){
|
||
// selectList.value['Relight'] = JSON.parse(JSON.stringify(selectDesignList.value.toProduct))
|
||
// }
|
||
if (props.isDesignPage) {
|
||
productImgData.fileList[props.productimgMenu.value] = designList
|
||
return
|
||
}
|
||
setFileList()
|
||
userlikeGroupId = selectDesignList.value.userlikeGroupId
|
||
// getLikeProductImage(selectDesignList.value.userlikeGroupId)
|
||
productImgDom.generalDragLeft.setItemPosition()
|
||
setCloudImg()
|
||
}
|
||
const setCloudImg = () => {
|
||
let arr = store.state.UploadFilesModule.cloudList
|
||
if (props.productimgMenu.value == 'ToProductImage') {
|
||
let list = JSON.parse(JSON.stringify(arr.toProduct)) || []
|
||
productImgData.generateList[props.productimgMenu.value].unshift(...list)
|
||
store.commit('clearCloudList', 'ToProductImage')
|
||
} else if (props.productimgMenu.value == 'Relight') {
|
||
let list = JSON.parse(JSON.stringify(arr.relight)) || []
|
||
productImgData.generateList[props.productimgMenu.value].unshift(...list)
|
||
store.commit('clearCloudList', 'relight')
|
||
}
|
||
}
|
||
let setproduct = (value: any) => {
|
||
// props.productimgMenu = value
|
||
}
|
||
let getLikeProductImage = (userGroupId: any) => {
|
||
let data = {
|
||
userLikeGroupId: userGroupId,
|
||
type: props.productimgMenu.value
|
||
}
|
||
Https.axiosPost(Https.httpUrls.productImageLikeList, data)
|
||
.then(rv => {
|
||
rv.forEach((item: any) => {
|
||
item.imgUrl = item.url
|
||
})
|
||
let value = {
|
||
likedList: rv,
|
||
str: 'add',
|
||
index: -1
|
||
}
|
||
if (props.productimgMenu.value == 'ToProductImage') {
|
||
store.commit('setToProductImage', value)
|
||
} else {
|
||
store.commit('setRelightList', value)
|
||
}
|
||
})
|
||
.catch(res => {})
|
||
}
|
||
let cleardata = () => {
|
||
productImgData.generateList = []
|
||
// props.productimgMenu = productimgMenuList.value[0]
|
||
}
|
||
|
||
let fileUploadChange = (data: any) => {
|
||
let file = data.file
|
||
let bor = true
|
||
if (file.status === 'done') {
|
||
let res = JSON.parse(file.xhr.response)
|
||
if (res.errCode == 0) {
|
||
file.imgUrl = res.data.url
|
||
file.id = res.data.id
|
||
file.isChecked = true
|
||
file.type = 'ProductElement'
|
||
// if(props.productimgMenu.value == 'Relight'){
|
||
// file.type = "ToProductImage"
|
||
// }
|
||
let storeData = {
|
||
str: 'add',
|
||
list: [file]
|
||
}
|
||
store.commit('setUploadElement', storeData)
|
||
} else {
|
||
bor = false
|
||
}
|
||
} else if (file.status === 'error') {
|
||
bor = false
|
||
}
|
||
}
|
||
let isSelectObject = false
|
||
let beforeUpload = async (file: any) => {
|
||
const isJpgOrPng =
|
||
file.type === 'image/jpeg' ||
|
||
file.type === 'image/png' ||
|
||
file.type === 'image/jpg' ||
|
||
file.type === 'image/bmp'
|
||
if (!isJpgOrPng) {
|
||
message.info(useI18n().t('MoodboardUpload.jsContent3'))
|
||
}
|
||
const isLt2M = file.size / 1024 / 1024 < 5
|
||
if (!isLt2M) {
|
||
message.info(useI18n().t('MoodboardUpload.jsContent4'))
|
||
}
|
||
if (!productImgData.selectObject.id && !isSelectObject) {
|
||
isSelectObject = true
|
||
productImgData.selectObject.id = await createProbject()
|
||
upload.value = {
|
||
projectId: productImgData.selectObject.id,
|
||
CollectionType: props.productimgMenu.value
|
||
}
|
||
}
|
||
return !!(
|
||
(isJpgOrPng && isLt2M && productImgData.selectObject.id) ||
|
||
Upload.LIST_IGNORE
|
||
)
|
||
}
|
||
let setGenerate = (item: any) => {
|
||
item.isChecked = !item.isChecked
|
||
}
|
||
const setUploadDelete = (item: any, index: any) => {
|
||
let value = {
|
||
id: item.id
|
||
}
|
||
Https.axiosPost(
|
||
Https.httpUrls.toProductImageElementDelete,
|
||
{},
|
||
{ params: value }
|
||
).then(rv => {
|
||
let storeData = {
|
||
str: 'delete',
|
||
index
|
||
}
|
||
store.commit('setUploadElement', storeData)
|
||
})
|
||
}
|
||
let likeFile = (item: any, str: any, index: any) => {
|
||
let url
|
||
let data = {
|
||
toProductImageResultId: [item.id],
|
||
projectId: store.state.Workspace.probjects.id,
|
||
collectionSortParentId: props.isDesignPage ? item.parentId : ''
|
||
}
|
||
if (str == 'like') {
|
||
url = Https.httpUrls.productImageLike
|
||
} else {
|
||
url = Https.httpUrls.productImageUnLike
|
||
if (props.isDesignPage) {
|
||
emit('unLike', item)
|
||
}
|
||
}
|
||
Https.axiosPost(url, data)
|
||
.then(rv => {
|
||
if (str == 'like') {
|
||
// if(rv?.sort)item.sort = rv.sort
|
||
if (rv?.sort) item.oldSort = rv.sort
|
||
if (rv?.id) item.userLikeSortId = rv.id
|
||
item.newLike = true
|
||
let value = {
|
||
likedList: [item],
|
||
str: 'add',
|
||
index: -1
|
||
}
|
||
if (props.productimgMenu.value == 'ToProductImage') {
|
||
store.commit('setToProductImage', value)
|
||
} else {
|
||
store.commit('setRelightList', value)
|
||
}
|
||
productImgData.generateList[props.productimgMenu.value].splice(index, 1)
|
||
} else {
|
||
let value = {
|
||
likedList: [item],
|
||
str: 'splice',
|
||
index: index
|
||
}
|
||
productImgData.generateList[props.productimgMenu.value].push(item)
|
||
if (props.productimgMenu.value == 'ToProductImage') {
|
||
store.commit('setToProductImage', value)
|
||
} else {
|
||
store.commit('setRelightList', value)
|
||
}
|
||
}
|
||
})
|
||
.catch(res => {})
|
||
}
|
||
let remPrductimgTime: any = null
|
||
let prductimgTime: any = null
|
||
let getPrductimg = () => {
|
||
// 未输入prompt时不可生成
|
||
if (!productImgData.searchName[props.productimgMenu.value]) {
|
||
message.info(t('ProductImg.noPrompt'))
|
||
return
|
||
}
|
||
if (productImgData.isProductimg) return
|
||
clearInterval(remPrductimgTime)
|
||
let selectArr: any = []
|
||
let obj = {
|
||
createTime: '',
|
||
elementId: 0,
|
||
elementType: '',
|
||
id: 0,
|
||
isLike: 0,
|
||
taskId: '',
|
||
toProductImageRecordId: 0,
|
||
url: '',
|
||
parentId: null
|
||
}
|
||
if (productImgData.fileList[props.productimgMenu.value]) {
|
||
productImgData.fileList[props.productimgMenu.value].forEach((item: any) => {
|
||
if (item.isChecked) {
|
||
if (item.resultType == 'Design') {
|
||
obj.elementId = item.designOutfitId
|
||
obj.elementType = 'DesignOutfit'
|
||
} else {
|
||
obj.elementId = item.id
|
||
obj.elementType = item.resultType || 'ProductElement'
|
||
obj.elementType =
|
||
obj.elementType == 'Relight' ? 'ToProductImage' : obj.elementType
|
||
}
|
||
;(obj.parentId = item?.parentId || item?.userLikeSortId),
|
||
selectArr.push(JSON.parse(JSON.stringify(obj)))
|
||
}
|
||
})
|
||
}
|
||
if (selectArr.length == 0) {
|
||
message.info(t('ProductImg.jsContent2'))
|
||
return
|
||
}
|
||
let imageStrength = (70 / 100) * productImgData.similarity
|
||
let data: any = {
|
||
prompt: productImgData.searchName[props.productimgMenu.value],
|
||
toProductImageVOList: selectArr,
|
||
// userLikeGroupId:upload.value.userlikeGroupId,
|
||
projectId: productImgData.selectObject.id,
|
||
modelName:
|
||
props.productimgMenu.value == 'Relight' ? 'flux' : speed.speedData.value,
|
||
direction: RelightDirection.value,
|
||
ageGroup: store.state.Workspace.probjects.ageGroup,
|
||
brightenValue: productImgData.brightenValue,
|
||
imageStrength: (100 - imageStrength) / 100,
|
||
|
||
isDefaultLike: false //表示是否生成就like
|
||
}
|
||
productImgData.isProductimg = true
|
||
|
||
// 设置默认prompt
|
||
if (!productImgData.searchName[props.productimgMenu.value]) {
|
||
const isFromDesignPage = props.source == 'design' || props.isDesignPage
|
||
const { ageGroup, httpType } = store.state.Workspace.probjects
|
||
const isSingleDesign = httpType === 'SINGLE_DESIGN'
|
||
|
||
if (!isFromDesignPage) {
|
||
data.prompt = t('poseTransfer.UploadWithModel')
|
||
} else if (ageGroup === 'Adult') {
|
||
data.prompt = isSingleDesign
|
||
? t('poseTransfer.SingleAdultTryOn')
|
||
: t('poseTransfer.SeriesAdultTryOn')
|
||
} else if (isSingleDesign) {
|
||
data.prompt = t('poseTransfer.SingleGarment')
|
||
}
|
||
}
|
||
let url = Https.httpUrls.toProduct
|
||
if (props.productimgMenu.value == 'Relight') {
|
||
url = Https.httpUrls.relight
|
||
}
|
||
productImgData.isShowMark = true
|
||
Https.axiosPost(url, data)
|
||
.then(rv => {
|
||
productImgData.remProductimg = true
|
||
productImgData.isShowMark = false
|
||
let arr: any = []
|
||
rv.forEach((item: any) => {
|
||
arr.push(item.taskId)
|
||
})
|
||
productImgData.generateList[props.productimgMenu.value].unshift(...rv)
|
||
setPrductimg(arr)
|
||
})
|
||
.catch(res => {
|
||
productImgData.isShowMark = false
|
||
productImgData.isProductimg = false
|
||
clearInterval(remPrductimgTime)
|
||
productImgData.remProductimg = false
|
||
if (res.errCode === 2) {
|
||
Modal.confirm({
|
||
title: res.errMsg,
|
||
icon: createVNode(ExclamationCircleOutlined),
|
||
okText: 'Yes',
|
||
cancelText: 'No',
|
||
mask: false,
|
||
zIndex: 99999,
|
||
centered: true,
|
||
onOk() {
|
||
store.commit('setUpgradePlan', true)
|
||
},
|
||
onCancel() {}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
let generateProceedList: any = []
|
||
let setPrductimg = (dataList: any) => {
|
||
let data = dataList
|
||
let dataNum = dataList.length
|
||
let state = true
|
||
let url = Https.httpUrls.toProductImageResult
|
||
if (props.productimgMenu.value == 'Relight') {
|
||
url = Https.httpUrls.relightResult
|
||
}
|
||
|
||
prductimgTime = setInterval(() => {
|
||
if (!state) return
|
||
state = false
|
||
Https.axiosPost(url, data)
|
||
.then(rv => {
|
||
state = true
|
||
if (productImgData.isProductimg) {
|
||
//防止取消后有正在执行的获取状态
|
||
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
|
||
rv.forEach((element: any) => {
|
||
if (element.status == 'Success') {
|
||
element.imgUrl = element.url
|
||
let index = productImgData.generateList[
|
||
props.productimgMenu.value
|
||
].findIndex((obj: any) => obj.taskId === element.taskId)
|
||
for (const key in element) {
|
||
if (element[key]) {
|
||
productImgData.generateList[props.productimgMenu.value][index][
|
||
key
|
||
] = element[key]
|
||
}
|
||
}
|
||
productImgData.generateList[props.productimgMenu.value][
|
||
index
|
||
].modelName =
|
||
props.productimgMenu.value == 'Relight'
|
||
? 'flux'
|
||
: speed.speedData.value
|
||
// productImgData.generateList[props.productimgMenu.value][index] = {
|
||
// ...element,
|
||
// modelName:props.productimgMenu.value == 'Relight'?'flux':speed.speedData.value,
|
||
// }
|
||
// productImgData.generateList[props.productimgMenu.value].unshift(element)
|
||
data = data.filter((item: any) => item !== element.taskId)
|
||
} else if (element.status == 'Fail') {
|
||
message.info(element?.errorMessage || t('ProductImg.jsContent3'))
|
||
let index = productImgData.generateList[
|
||
props.productimgMenu.value
|
||
].findIndex((obj: any) => obj.taskId === element.taskId)
|
||
productImgData.generateList[props.productimgMenu.value].splice(index, 1)
|
||
data = data.filter((item: any) => item !== element.taskId)
|
||
}
|
||
})
|
||
generateProceedList = data
|
||
if (data.length == 0) {
|
||
// if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
|
||
// }
|
||
store.dispatch('getCredits')
|
||
clearInterval(prductimgTime)
|
||
clearInterval(remPrductimgTime)
|
||
productImgData.remProductimg = false
|
||
productImgData.isProductimg = false
|
||
}
|
||
}
|
||
})
|
||
.catch(res => {
|
||
productImgData.generateList[props.productimgMenu.value].filter(
|
||
(item: any) => item.status == 'Success'
|
||
)
|
||
clearInterval(prductimgTime)
|
||
clearInterval(remPrductimgTime)
|
||
productImgData.isProductimg = false
|
||
productImgData.remProductimg = false
|
||
})
|
||
}, 1000)
|
||
}
|
||
let removeProductimg = () => {
|
||
productImgData.isProductimg = false
|
||
productImgData.remProductimg = false
|
||
clearInterval(prductimgTime)
|
||
if (generateProceedList) {
|
||
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
|
||
let str = generateProceedList.join(',')
|
||
let data = {
|
||
uniqueId: str,
|
||
userId: userDetail.value.userId,
|
||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||
type: props.productimgMenu.value
|
||
}
|
||
Https.axiosGet(Https.httpUrls.generateStopWaiting, { params: data })
|
||
.then(rv => {
|
||
generateProceedList = []
|
||
let aa = productImgData.generateList[props.productimgMenu.value].filter(
|
||
(item: any) => item.status == 'Success'
|
||
)
|
||
})
|
||
.catch(res => {})
|
||
generateProceedList.forEach((item: any) => {
|
||
const index = productImgData.generateList[props.productimgMenu.value].findIndex(
|
||
item => item.status != 'Success'
|
||
)
|
||
if (props.productimgMenu == 'ToProductImage') {
|
||
}
|
||
})
|
||
}
|
||
}
|
||
let scaleImage = ref()
|
||
let setScaleImage = (arr: any, index: any, isLike: any) => {
|
||
arr.forEach((item: any) => {
|
||
item.imgUrl = item.url
|
||
})
|
||
scaleImage.value.isProductimg = isLike
|
||
// scaleImage.value.isProductimg = false
|
||
scaleImage.value.isLike = false
|
||
scaleImage.value.productimgSearchName =
|
||
productImgData.searchName[props.productimgMenu.value]
|
||
scaleImage.value.productimgSimilarity = productImgData.similarity
|
||
scaleImage.value.productimgBrightenValue = productImgData.brightenValue
|
||
scaleImage.value.productimgRelightDirection = RelightDirection.value
|
||
scaleImage.value.init(arr, index)
|
||
scaleImage.value.isComparison = true
|
||
}
|
||
let setSimilarity = (num: any) => {}
|
||
|
||
//超分
|
||
let setTask = (data: any) => {
|
||
emit('setTask', data)
|
||
}
|
||
|
||
const setLikeZoom = (item: any, str: string, index: number, list: List) => {
|
||
if (str == 'zoom') {
|
||
setScaleImage(list, index, true)
|
||
} else if (str == 'copy') {
|
||
setCopy(item)
|
||
} else {
|
||
likeFile(item, str, index)
|
||
}
|
||
}
|
||
const selectSetBtn = (id: any, str: string) => {
|
||
productImgData.likeList[props.productimgMenu.value].forEach(
|
||
(item: any, index: number) => {
|
||
if (item.id == id) {
|
||
let selectStr = ''
|
||
str == 'like' ? (str = 'noLike') : str
|
||
setLikeZoom(
|
||
item,
|
||
str,
|
||
index,
|
||
productImgData.likeList[props.productimgMenu.value]
|
||
)
|
||
}
|
||
}
|
||
)
|
||
}
|
||
const generateSetBtn = (id: any, str: string) => {
|
||
if (str == 'delete') {
|
||
let type = 'ToProductImage'
|
||
if (props.productimgMenu.value == 'Relight') type = 'Relight'
|
||
let value = {
|
||
type,
|
||
id,
|
||
projectId: productImgData.selectObject.id
|
||
}
|
||
Https.axiosGet(Https.httpUrls.historyDeleteResult, { params: value }).then(() => {
|
||
let index = productImgData.generateList[props.productimgMenu.value].findIndex(
|
||
(v: any) => v.id == id
|
||
)
|
||
productImgData.generateList[props.productimgMenu.value].splice(index, 1)
|
||
})
|
||
// productImgData.generateList[props.productimgMenu.value] = productImgData.generateList[props.productimgMenu.value].filter((v:any) => v.id != id);
|
||
} else {
|
||
productImgData.generateList[props.productimgMenu.value].forEach(
|
||
(item: any, index: number) => {
|
||
if (item.id == id) {
|
||
let selectStr = ''
|
||
str == 'zoom' ? (selectStr = 'zoom') : (selectStr = 'like')
|
||
setLikeZoom(
|
||
item,
|
||
str,
|
||
index,
|
||
productImgData.generateList[props.productimgMenu.value]
|
||
)
|
||
}
|
||
}
|
||
)
|
||
}
|
||
}
|
||
const setCopy = (item: any) => {
|
||
let value = {
|
||
id: item.id
|
||
}
|
||
Https.axiosPost(Https.httpUrls.convertRelightElement, {}, { params: value }).then(
|
||
rv => {
|
||
if (!productImgData.fileList[props.productimgMenu.value]?.length)
|
||
productImgData.fileList[props.productimgMenu.value] = []
|
||
productImgData.fileList[props.productimgMenu.value].unshift(rv)
|
||
}
|
||
)
|
||
}
|
||
const setItemPosition = () => {
|
||
productImgDom.generalDragLeft.setItemPosition()
|
||
productImgDom.generalDragRight.setItemPosition()
|
||
}
|
||
const setSize = (str: string) => {
|
||
productImgData.button[str] = !productImgData.button[str]
|
||
nextTick(() => {
|
||
setItemPosition()
|
||
})
|
||
}
|
||
const ifMaximumLength = async () => {
|
||
// await nextTick()
|
||
// let textarea = productImgData.textarea
|
||
// const scrollTop = textarea.scrollTop
|
||
// // 2. 计算单行高度
|
||
// const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20 // 默认20px
|
||
// // 3. 重置高度为1行
|
||
// textarea.style.height = lineHeight + 'px'
|
||
// // 4. 计算实际需要的高度
|
||
// const newHeight = Math.max(lineHeight, textarea.scrollHeight)
|
||
// textarea.style.height = newHeight + 'px'
|
||
// textarea.scrollTop = scrollTop
|
||
// 随着输入内容自动调整高度
|
||
let textarea = productImgData.textarea
|
||
textarea.style.height = 'auto'
|
||
textarea.style.height = textarea.scrollHeight + 'px'
|
||
}
|
||
const openSpeed = () => {
|
||
speed.speedState = !speed.speedState
|
||
if (speed.speedState) {
|
||
document.addEventListener('click', openSpeed)
|
||
} else {
|
||
document.removeEventListener('click', openSpeed)
|
||
}
|
||
}
|
||
const setSpeed = (item: any) => {
|
||
speed.speedData = item
|
||
speed.speedState = false
|
||
document.removeEventListener('click', openSpeed)
|
||
}
|
||
//watch立即执行一次
|
||
watch(
|
||
() => productImgData.selectObject.id,
|
||
(newVal, oldVal) => {
|
||
createProbject.generateList = []
|
||
let list = []
|
||
if (props?.productimgMenu.value == 'ToProductImage') {
|
||
list = store.state.HomeStoreModule.toProductImageList.list || []
|
||
} else {
|
||
list = store.state.HomeStoreModule.relightList.list || []
|
||
}
|
||
let taskIdList = list.filter((item: any) => !item?.url)
|
||
if (taskIdList?.length > 0) {
|
||
let arr: any = []
|
||
taskIdList.forEach((item: any) => {
|
||
arr.push(item.taskId)
|
||
})
|
||
productImgData.isProductimg = true
|
||
productImgData.remProductimg = true
|
||
productImgData.isShowMark = false
|
||
setPrductimg(arr)
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
onMounted(() => {
|
||
ifMaximumLength()
|
||
})
|
||
|
||
// 计算属性：根据条件生成提示词列表
|
||
const promptTextList = computed(() => {
|
||
const isFromDesignPage = props.source === 'design' || props.isDesignPage
|
||
const { ageGroup, httpType } = store.state.Workspace.probjects
|
||
const isSingleDesign = httpType === 'SINGLE_DESIGN'
|
||
const isAdult = ageGroup === 'Adult'
|
||
|
||
if (!isFromDesignPage) {
|
||
// 如果不是从design来的，返回两个提示词
|
||
return [t('poseTransfer.UploadWithoutModel'), t('poseTransfer.UploadWithModel')]
|
||
} else {
|
||
// 如果是从design来的
|
||
if (isSingleDesign) {
|
||
// SINGLE_DESIGN: 两个提示词
|
||
const secondPrompt = isAdult
|
||
? t('poseTransfer.SingleAdultTryOn')
|
||
: t('poseTransfer.SingleChildTryOn')
|
||
return [t('poseTransfer.SingleGarment'), secondPrompt]
|
||
} else {
|
||
// SERIES_DESIGN: 一个提示词
|
||
return [
|
||
isAdult
|
||
? t('poseTransfer.SeriesAdultTryOn')
|
||
: t('poseTransfer.SeriesChildTryOn')
|
||
]
|
||
}
|
||
}
|
||
})
|
||
|
||
const showPromptAssist = ref(false)
|
||
const handleClickAssistBtn = () => {
|
||
showPromptAssist.value = true
|
||
}
|
||
|
||
return {
|
||
upload,
|
||
driver__,
|
||
openSetData,
|
||
...toRefs(productImgData),
|
||
...toRefs(productImgDom),
|
||
...toRefs(speed),
|
||
productimgMenuList,
|
||
RelightDirectionList,
|
||
RelightDirection,
|
||
promptTextList,
|
||
showPromptAssist,
|
||
|
||
setproduct,
|
||
fileUploadChange,
|
||
beforeUpload,
|
||
setGenerate,
|
||
setUploadDelete,
|
||
likeFile,
|
||
getPrductimg,
|
||
removeProductimg,
|
||
scaleImage,
|
||
setScaleImage,
|
||
setSimilarity,
|
||
setTask,
|
||
selectSetBtn,
|
||
generateSetBtn,
|
||
setItemPosition,
|
||
setSize,
|
||
ifMaximumLength,
|
||
openSpeed,
|
||
setSpeed,
|
||
locale,
|
||
handleClickAssistBtn
|
||
}
|
||
},
|
||
directives: {
|
||
mousewheel: {
|
||
mounted(el) {
|
||
el.addEventListener(
|
||
'wheel',
|
||
(e: WheelEvent) => {
|
||
let num = 0
|
||
if (e.deltaY > 0) {
|
||
num = 25
|
||
} else {
|
||
num = -25
|
||
}
|
||
el.scrollBy(num, 0)
|
||
},
|
||
{ passive: true }
|
||
)
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
indicator: h(LoadingOutlined, {
|
||
style: {
|
||
fontSize: '2.4rem'
|
||
},
|
||
spin: true
|
||
}),
|
||
// moodTemplateId: "", //模板id
|
||
token: '',
|
||
uploadUrl: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.token = getCookie('token') || ''
|
||
this.uploadUrl = getUploadUrl()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.toProduct {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.productImg_content {
|
||
height: 100%;
|
||
width: 100%;
|
||
.modal_title_text {
|
||
height: 4rem;
|
||
}
|
||
}
|
||
.productImg_content_bottom {
|
||
height: 100%;
|
||
--border-color: #c4c4c4;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex: 1;
|
||
}
|
||
.productImg_content_item_title {
|
||
font-weight: 600;
|
||
font-size: 1.6rem;
|
||
margin-bottom: 1rem;
|
||
&.productImg_content_item_title_menu {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
:deep(.generalMenu_printModel) {
|
||
margin: 0;
|
||
width: 100%;
|
||
> div,
|
||
> ul {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.productImg_content_item_title_menubtn {
|
||
font-size: 1.6rem;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
.productImg_content_item_intro {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.selectImg {
|
||
display: flex;
|
||
flex-direction: column;
|
||
> .imgBox {
|
||
flex: 1;
|
||
max-height: 45rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
overflow-x: auto;
|
||
column-gap: 1rem;
|
||
// &.active
|
||
|
||
> .item {
|
||
margin-right: 1rem;
|
||
width: calc(100% / 2 - 0.5rem);
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
height: 25rem;
|
||
position: relative;
|
||
// &.active{
|
||
// border: 2px solid;
|
||
// }
|
||
:deep(.ant-checkbox-wrapper) {
|
||
position: absolute;
|
||
top: 2rem;
|
||
right: 2rem;
|
||
}
|
||
> .btnBox {
|
||
position: absolute;
|
||
right: 1rem;
|
||
top: 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
> div {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
display: flex;
|
||
border: 1px solid;
|
||
align-items: center;
|
||
border-radius: 0.5rem;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
margin-bottom: 1rem;
|
||
> i {
|
||
display: flex;
|
||
}
|
||
> .fi-br-check {
|
||
color: #fff;
|
||
display: none;
|
||
}
|
||
&.active {
|
||
background: #000;
|
||
> i {
|
||
display: flex;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
> img {
|
||
width: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
> .upload_item {
|
||
border: none;
|
||
}
|
||
}
|
||
> .head {
|
||
color: #000;
|
||
// font-weight: 600;
|
||
margin-bottom: 2rem;
|
||
> .text {
|
||
display: inline-block;
|
||
font-size: 1.6rem;
|
||
}
|
||
}
|
||
}
|
||
.productImg_left,
|
||
.productImg_right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.productImg_content_item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.productImg_left {
|
||
overflow-y: auto !important;
|
||
width: 25%;
|
||
position: relative;
|
||
display: flex;
|
||
height: 100%;
|
||
flex-direction: column;
|
||
padding-right: 3.8rem;
|
||
width: 39rem;
|
||
align-items: stretch;
|
||
flex-wrap: nowrap;
|
||
&.active {
|
||
width: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
.productImg_content_item_imgBox {
|
||
flex-shrink: 0;
|
||
margin-bottom: 3rem;
|
||
width: 100%;
|
||
height: 25rem;
|
||
.content_item_imgBox_itemImg,
|
||
.upload_file_item {
|
||
margin-right: 1rem;
|
||
width: calc(100% / 2 - 0.5rem);
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
height: 25rem;
|
||
position: relative;
|
||
|
||
> .imgBox {
|
||
width: 100%;
|
||
}
|
||
img {
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
}
|
||
.productImg_content_item_generate {
|
||
--width: 100%;
|
||
padding-bottom: 1rem;
|
||
// margin-top: auto;
|
||
}
|
||
.productImg_content_item_similarity {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 3rem;
|
||
.system_silder {
|
||
flex: 1;
|
||
}
|
||
input {
|
||
width: 30%;
|
||
width: 5rem;
|
||
height: 5rem;
|
||
text-align: center;
|
||
font-size: 1.8rem;
|
||
margin-left: 2rem;
|
||
}
|
||
}
|
||
.productImg_content_item_Direction {
|
||
padding-bottom: 1rem;
|
||
margin-right: 0;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.selectText {
|
||
margin-bottom: 2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
> div {
|
||
background: #efeff1;
|
||
width: 100%;
|
||
font-size: 1.6rem;
|
||
margin-bottom: 1.2rem;
|
||
border-radius: 1.6rem;
|
||
cursor: pointer;
|
||
padding: 1.2rem;
|
||
white-space: nowrap; /* 文本不换行 */
|
||
overflow: hidden; /* 溢出部分隐藏 */
|
||
text-overflow: ellipsis; /* 显示省略号 */
|
||
&:hover {
|
||
background: #f9fafa;
|
||
}
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
.productImg_content_item_generate_btn {
|
||
width: 100%;
|
||
justify-content: space-around;
|
||
.generage_btn_box {
|
||
flex: 0;
|
||
margin-left: auto;
|
||
}
|
||
.started_btn {
|
||
// width: 13rem;
|
||
// text-align: center;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
.productImg_right {
|
||
height: 100%;
|
||
flex-direction: row;
|
||
flex: 1;
|
||
&.active {
|
||
flex: 0;
|
||
overflow: hidden;
|
||
}
|
||
.productImg_right_item_box {
|
||
// height: 40%;
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
&.right {
|
||
padding-left: 2.3rem;
|
||
}
|
||
> .content {
|
||
background: #f6f6fa;
|
||
border-radius: 2rem;
|
||
padding: 1rem 1.5rem;
|
||
border-radius: 2rem;
|
||
position: relative;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
.guide {
|
||
position: absolute;
|
||
width: 50rem;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
> .btnLeft,
|
||
> .btnRight {
|
||
position: absolute;
|
||
width: 3rem;
|
||
height: 7rem;
|
||
background: #fff;
|
||
border: 2px solid;
|
||
border-right: none;
|
||
border-radius: 2rem 0 0 2rem;
|
||
top: 50%;
|
||
transform: translate(-100%, -50%);
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
> span {
|
||
transition: all 0.3s;
|
||
transform: rotate(90deg);
|
||
&.active {
|
||
transform: rotate(270deg);
|
||
}
|
||
}
|
||
}
|
||
> .btnRight {
|
||
left: calc(100% + 3rem);
|
||
transform: translate(-100%, -50%) rotate(180deg);
|
||
&:hover {
|
||
width: 4rem;
|
||
left: calc(100% + 4rem);
|
||
}
|
||
}
|
||
.content_header_left {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 2rem;
|
||
.content_header_des {
|
||
font-size: 1.6rem;
|
||
color: #000000;
|
||
margin-left: 1rem;
|
||
font-weight: 900;
|
||
}
|
||
}
|
||
.mark_loading {
|
||
position: absolute;
|
||
}
|
||
}
|
||
.productImg_right_titleBtn {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.designPage {
|
||
margin-right: 4rem;
|
||
}
|
||
|
||
.upload_file_item {
|
||
:deep(.ant-upload-picture-card-wrapper) {
|
||
.ant-upload-list-picture-card {
|
||
.ant-upload-select-picture-card {
|
||
width: 9.6rem;
|
||
height: 13.4rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.prompt-container {
|
||
margin-top: 4rem;
|
||
margin-bottom: 3rem;
|
||
position: relative;
|
||
.prompt-title {
|
||
margin-bottom: 1.4rem;
|
||
font-size: 1.6rem;
|
||
// margin-bottom: 1rem;
|
||
}
|
||
.input_border {
|
||
padding-bottom: 0;
|
||
.input_box {
|
||
.input_box_btnBox {
|
||
position: relative;
|
||
.textarea {
|
||
min-height: 12.7rem;
|
||
max-height: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.asistant-btn {
|
||
height: 2.3rem;
|
||
padding: 0 0.6rem;
|
||
font-size: 1rem;
|
||
font-weight: 400;
|
||
color: #313131;
|
||
position: absolute;
|
||
bottom: 1.3rem;
|
||
left: 1.3rem;
|
||
display: flex;
|
||
column-gap: 0.3rem;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #f2f2f2;
|
||
border: 1px solid #dfdfdf;
|
||
border-radius: 0.5rem;
|
||
cursor: pointer;
|
||
.asistant-icon {
|
||
font-size: 1rem;
|
||
margin-right: 0;
|
||
width: initial;
|
||
// margin-top: -0.2rem;
|
||
}
|
||
}
|
||
}
|
||
</style>
|