1591 lines
47 KiB
Vue
1591 lines
47 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-if="productimgMenu.value == 'ToProductImage'"
|
|
v-model:showModal="showPromptAssist"
|
|
:isDesignPage="isDesignPage"
|
|
/>
|
|
<PromptEditProduct
|
|
v-if="productimgMenu.value == 'Relight'"
|
|
v-model:showModal="showPromptAssist"
|
|
></PromptEditProduct>
|
|
</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 PromptEditProduct from './PromptEditProduct.vue'
|
|
import { List } from 'echarts'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
scaleImage,
|
|
generalMenu,
|
|
generalDrag,
|
|
Prompt,
|
|
PromptEditProduct
|
|
},
|
|
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
|
|
watch(
|
|
() => route.query,
|
|
(query: any, oldQuery: any) => {
|
|
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'))
|
|
}
|
|
const objectId = route?.query?.id
|
|
if (!objectId && !isSelectObject) {
|
|
isSelectObject = true
|
|
productImgData.selectObject.id = await createProbject()
|
|
upload.value = {
|
|
projectId: productImgData.selectObject.id,
|
|
CollectionType: props.productimgMenu.value
|
|
}
|
|
}
|
|
return !!((isJpgOrPng && isLt2M && objectId) || 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] && !props.isDesignPage) {
|
|
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
|
|
|
|
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 showPromptAssist = ref(false)
|
|
const handleClickAssistBtn = () => {
|
|
const { httpType } = store.state.Workspace.probjects
|
|
const isSingleDesign = httpType === 'SINGLE_DESIGN'
|
|
if (props.isDesignPage && !isSingleDesign) {
|
|
const promptText = t('ProductImg.Series')
|
|
productImgData.searchName[props.productimgMenu.value] = promptText
|
|
return
|
|
}
|
|
showPromptAssist.value = true
|
|
}
|
|
|
|
return {
|
|
upload,
|
|
driver__,
|
|
openSetData,
|
|
...toRefs(productImgData),
|
|
...toRefs(productImgDom),
|
|
...toRefs(speed),
|
|
productimgMenuList,
|
|
RelightDirectionList,
|
|
RelightDirection,
|
|
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: 12.7rem;
|
|
height: 17.8rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
.textarea {
|
|
// flex: 1;
|
|
min-height: 12.7rem;
|
|
max-height: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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>
|