合并画布代码

src/component/home/tools/toProduct/index.vue

@@ -10,56 +10,57 @@
 					<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
 						<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
 					</div> -->
-					<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
-					<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
-						<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
-							<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[item?.isChecked?'active':'']">
-							<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
+					<div class="selectImg">
+						<div class="head">
+							<div class="text">{{$t('ProductImg.SelectCollection')}}</div>
 						</div>
-						<div class="content_item_imgBox_itemImg" v-for="(file, index) in fileList[productimgMenu.value]" :key="file">
-							<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
-								<a-spin
-									:indicator="indicator"
-									tip="Uploading..."
-								/>
-							</div>
-							<div
-								class="imgBox"
-								v-show="file?.status === 'done'"
-
-							>
-								<img @click="setGenerate(file)" :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
-								<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
-							</div>
-						</div>
-						<div class="upload_file_item upload_component">
-						<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
-							<a-upload
-								:action="uploadUrl + '/api/history/toProductImageElementUpload'"
-								list-type="picture-card"
-								:capture="null"
-								:data="{
-									...upload,
-								}"
-								:headers="{ Authorization: token }"
-								:before-upload="beforeUpload"
-								v-model:file-list="fileList[productimgMenu.value]"
-								:multiple="true"
-								:maxCount="8"
-								accept=".jpg,.png,.jpeg,.bmp"
-								@change="(file) => fileUploadChange(file)"
-							>
-								<div
-									class="upload_tip_block"
-								>
-									<i class="fi fi-br-upload"></i>
-									<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+						<div class="imgBox" v-mousewheel>
+							<!-- <div class="item" :class="[item?.isChecked?'active':'']" v-for="item in selectList[productimgMenu.value]" @click="setGenerate(item)">
+								<img :src="item.imgUrl || item.url" alt="">	
+								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
+							</div> -->
+							<div class="item" :class="[item?.isChecked?'active':'']" v-for="item,index in fileList[productimgMenu.value]" @click="setGenerate(item)">
+								<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
+									<a-spin size="large" />
 								</div>
-							</a-upload>
+								<img v-show="item.status != 'uploading'" :src="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)">
+										<i class="fi fi-rr-trash icon_delete"></i>
+									</div>
+								</div>
+								<!-- <a-checkbox v-model:checked="item.isChecked"></a-checkbox> -->
+							</div>
+							<div class="upload_item item">
+								<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"
+										v-model:file-list="fileList[productimgMenu.value]"
+										:multiple="true"
+										accept=".jpg,.png,.jpeg,.bmp"
+										@change="(file) => fileUploadChange(file)"
+									>
+										<div
+											class="upload_tip_block"
+										>
+											<i class="fi fi-br-upload"></i>
+											<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+										</div>
+									</a-upload>
+								</div>	
+							</div>
 						</div>
-
 					</div>
-					
 					<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.Similarity')}}</span>
 					</div>
@@ -74,15 +75,21 @@
 						<input type="number" readonly v-model="similarity">
 					</div>
 					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
-						<span>{{$t('ProductImg.RelightDirection')}}</span>
+						<span>Selection Function</span>
 					</div>
 					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
+						<a-select  style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
+					</div>
+					<div v-show="productimgMenu.value == 'Relight' && 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 != 'flux'" class="productImg_content_item_Direction">
 						<a-select  style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
 					</div>
-					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
+					<div v-show="productimgMenu.value == 'Relight' && 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'" class="productImg_content_item_similarity">
+					<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_similarity">
 						<a-slider class="system_silder"
 							v-model:value="brightenValue"
 							:tooltipVisible="false"
@@ -114,8 +121,12 @@
 					</div>
 					<div class="productImg_content_item_generate_btn input_border">
 						<div class="generage_btn_box ">
-							<div v-show="!isProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
-								{{ $t('Generate.Generate') }}
+							<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 && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
 								<i class="fi fi-br-loading"></i>
@@ -135,32 +146,8 @@
 								{{ $t('ProductImg.SelectedDesign') }}
 							</span>
 						</div>
-						<!-- <div class="productImg_right_item" v-for="item,index in generateList" :key="item"> -->
-							<!-- <div class="productImg_right_item_imgBox" v-if="item?.status != 'Success' && !item.imgUrl">
-								<img class="loadingImg" src="@/assets/images/homePage/loading.gif" alt="">
-							</div>
-
-							<div class="productImg_right_item_imgBox" v-else>
-								<img :src="item.url" alt="">
-								<div class="productImg_right_item_iconRight">
-									<div class="productImg_right_item_like"  @click.stop="likeFile(item,'like',index)">
-										<i class="fi fi-rr-heart"></i>
-									</div>
-								</div>
-								<div class="productImg_right_item_iconLeft" >
-									<div class="productImg_right_item_scale" @click.stop="setScaleImage(generateList,index,true)">
-										<i class="fi fi-bs-expand-arrows-alt"></i>
-									</div>
-									<div v-show="item.resultType != 'Relight'" class="productImg_right_item_men" @click.stop="setMenuShow(item)">
-										<i class="fi fi-rr-circle-ellipsis"></i>
-										<ul v-show="item.menuShow">
-											<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
-										</ul>
-									</div>
-								</div>
-							</div> -->
 						<div class="content">
-							<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :isDelete="false" :isLike="true" :list="likeList[productimgMenu.value]"></generalDrag>
+							<generalDrag ref="generalDragLeft" :type="productimgMenu.value" @setBtn="selectSetBtn" :isDelete="false" :isLike="true" :list="likeList[productimgMenu.value]"></generalDrag>
 						</div>
 						<!-- </div> -->
 						
@@ -180,30 +167,8 @@
 							</span>
 						</div>
 						<div class="content">
-							<generalDrag ref="generalDragRight" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
+							<generalDrag ref="generalDragRight" :type="productimgMenu.value" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
 						</div>
-						<!-- <div class="mark_loading" v-show="isShowMark">
-							<a-spin size="large" />
-						</div> -->
-						<!-- <div class="productImg_right_item" v-for="item,index in likeList[productimgMenu.value]" :key="item" >
-							<img :src="item.url" alt="">
-							<div class="productImg_right_item_iconRight">
-								<div class="productImg_right_item_like" @click.stop="likeFile(item,'noLike',index)">
-									<i class="fi fi-sr-heart"></i>
-								</div>
-							</div>
-							<div class="productImg_right_item_iconLeft">
-								<div class="productImg_right_item_scale" @click.stop="setScaleImage(likeList[productimgMenu.value],index,false)">
-									<i class="fi fi-bs-expand-arrows-alt"></i>
-								</div>
-								<div v-show="item.resultType != 'Relight'" class="productImg_right_item_menu" :title="$t('ProductImg.moreTitle')" @click.stop="setMenuShow(item)">
-									<i class="fi fi-rr-circle-ellipsis"></i>
-									<ul v-show="item.menuShow">
-										<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
-									</ul>
-								</div>
-							</div>
-						</div> -->
 					</div>
 				</div>
 			</div>
@@ -223,7 +188,7 @@
 
 <script lang="ts">
 import { LoadingOutlined } from "@ant-design/icons-vue";
-import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, inject} from "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'
@@ -238,7 +203,7 @@ import generalMenu from "@/component/HomePage/generalMenu.vue";
 import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
 import generalDrag from '@/component/modules/generalDrag.vue';
 import { List } from "echarts";
-
+import { useRouter,useRoute } from 'vue-router'
 
 export default defineComponent({
 	components:{
@@ -252,10 +217,13 @@ export default defineComponent({
 			return store.state.UserHabit.userDetail
 		})
 		const {t} = useI18n()
-		const upload:any = ref({})
+		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,
@@ -279,7 +247,43 @@ export default defineComponent({
 			button:{
 				left:false,
 				right:false,
-			}
+			},
+		})
+		let speed = reactive({
+			speedList:[
+				{
+					title:'Generate with high quality',
+					label:'High',
+					relightLabel:'Relight',
+					value:'',
+				},{
+					title:'',
+					label:'FLUX',
+					relightLabel:'Edit',
+					value:'flux',
+				},
+			],
+			speedState:false,
+			speedData:{
+				title:'Generate with high quality',
+				relightLabel:'Relight',
+				label:'High',
+				value:'',
+			},
+		})
+		//watch立即执行一次
+		// watch(()=>productImgData.selectObject.id,(newVal,oldVal)=>{
+		// 	createProbject.generateList = []
+		// },{immediate: true })
+		watch(() => route.query.id,
+			(query:any, oldQuery:any) => {
+				if(oldQuery && query != oldQuery){
+					productImgData.generateList = []
+				}
+			},
+		);
+		watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
+			productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement
 		})
 		const productImgDom = reactive({
 			generalDragLeft:null as any,
@@ -326,13 +330,10 @@ export default defineComponent({
 			}else if(props.productimgMenu.value == 'Relight'){
 				selectList.value['Relight'] = JSON.parse(JSON.stringify(selectDesignList.value.toProduct))
 			}
-			upload.value = {
-				projectId:productImgData.selectObject.id
-			}
+			
 			userlikeGroupId = selectDesignList.value.userlikeGroupId
 			// getLikeProductImage(selectDesignList.value.userlikeGroupId)
 			productImgDom.generalDragLeft.setItemPosition()
-
 			setCloudImg()
 		}
 		const setCloudImg = ()=>{
@@ -430,6 +431,18 @@ export default defineComponent({
 		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 = {
@@ -492,7 +505,7 @@ export default defineComponent({
 				productImgData.fileList[props.productimgMenu.value].forEach((item:any)=>{
 					if(item.isChecked){
 						obj.elementId = item.id
-						obj.elementType = item.type
+						obj.elementType = item.type || 'ProductElement'
 						selectArr.push(JSON.parse(JSON.stringify(obj)))
 					}
 				})
@@ -521,14 +534,15 @@ export default defineComponent({
 				toProductImageVOList:selectArr,
 				// userLikeGroupId:upload.value.userlikeGroupId,
 				projectId:productImgData.selectObject.id,
+				modelName:speed.speedData.value,
 				direction:RelightDirection.value,
 				brightenValue:productImgData.brightenValue,
 				imageStrength:(100 - imageStrength)/100,
 			}
 			productImgData.isProductimg = true
-			remPrductimgTime = setTimeout(()=>{
-				productImgData.remProductimg = true
-			},10000)
+			// remPrductimgTime = setTimeout(()=>{
+			// 	productImgData.remProductimg = true
+			// },10000)
 			let url = Https.httpUrls.toProduct
 			if(props.productimgMenu.value == 'Relight'){
 				url = Https.httpUrls.relight
@@ -536,12 +550,12 @@ export default defineComponent({
 			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.unshift(...rv)
 					setPrductimg(arr)
                 }
@@ -699,6 +713,8 @@ export default defineComponent({
 		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)
 			}
@@ -707,13 +723,12 @@ export default defineComponent({
 			productImgData.likeList[props.productimgMenu.value].forEach((item:any,index:number)=>{
 				if(item.id == id){
 					let selectStr = ''
-					str == 'zoom'?selectStr = 'zoom':selectStr ='noLike'
-					setLikeZoom(item,selectStr,index,productImgData.likeList[props.productimgMenu.value])
+					str == 'like'?(str = 'noLike'):str
+					setLikeZoom(item,str,index,productImgData.likeList[props.productimgMenu.value])
 				}
 			})
 		}
 		const generateSetBtn = (id:any,str:string)=>{
-			console.log(str)
 			if(str == 'delete'){
 				productImgData.generateList = productImgData.generateList.filter((v:any) => v.id != id);
 			}else{
@@ -721,12 +736,21 @@ export default defineComponent({
 					if(item.id == id){
 						let selectStr = ''
 						str == 'zoom'?selectStr = 'zoom':selectStr ='like'
-						setLikeZoom(item,selectStr,index,productImgData.generateList)
+						setLikeZoom(item,str,index,productImgData.generateList)
 					}
 				})
 			}
 
 		}
+		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()
@@ -749,94 +773,109 @@ export default defineComponent({
 			textarea.style.height = newHeight + 'px';
 			textarea.scrollTop = scrollTop;
 		}
+		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
+		}
         return {
 			upload,
 			driver__,
 			openSetData,
 			...toRefs(productImgData),
 			...toRefs(productImgDom),
+			...toRefs(speed),
 			productimgMenuList,
+			RelightDirectionList,
+			RelightDirection,
 
-		RelightDirectionList,
-		RelightDirection,
-
-		selectList,
-		setproduct,
-		fileUploadChange,
-		beforeUpload,
-		deleteFile,
-		setGenerate,
-		likeFile,
-		getPrductimg,
-		removeProductimg,
-		scaleImage,
-		setScaleImage,
-		setMenu,
-		setMenuShow,
-		setSimilarity,
-		setTask,
-		selectSetBtn,
-		generateSetBtn,
-		setItemPosition,
-		setSize,
-		ifMaximumLength,
-	};
-},
-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",
+			selectList,
+			setproduct,
+			fileUploadChange,
+			beforeUpload,
+			deleteFile,
+			setGenerate,
+			setUploadDelete,
+			likeFile,
+			getPrductimg,
+			removeProductimg,
+			scaleImage,
+			setScaleImage,
+			setMenu,
+			setMenuShow,
+			setSimilarity,
+			setTask,
+			selectSetBtn,
+			generateSetBtn,
+			setItemPosition,
+			setSize,
+			ifMaximumLength,
+			openSpeed,
+			setSpeed,
+		};
+	},
+	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 })
+				}
 			},
-			spin: true,
-		}),
-		// moodTemplateId: "", //模板id
-		token: "",
-		uploadUrl: "",
-		
-	};
-},
-mounted() {
-	this.token = getCookie("token") || "";
-	this.uploadUrl = getUploadUrl();
-},
-methods: {
-	// init(list:any,index:any,dialogueIndex:any){
-		
-	// },
-	// cancelDsign(){
-	// 	this.productImg = false
-	// 	// this.productImgList = []
-	// 	// this.productImgIndex = 0
-	// },
-	// download(){
-	// 	// downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
-	// },
-	// setScaleImageIndex(index:any){
-	// 	// this.productImgIndex = index
-	// 	// console.log(this.productImgIndex);
-		
-	// },
-	// LikeFile(item:any,str:string){
-	// 	let parent:any = this.$parent
-	// 	parent.likeFile(item,str)
-	// },
-},
+	},
+	data() {
+		return {
+			indicator: h(LoadingOutlined, {
+				style: {
+					fontSize: "2.4rem",
+				},
+				spin: true,
+			}),
+			// moodTemplateId: "", //模板id
+			token: "",
+			uploadUrl: "",
+			
+		};
+	},
+	mounted() {
+		this.token = getCookie("token") || "";
+		this.uploadUrl = getUploadUrl();
+	},
+	methods: {
+		// init(list:any,index:any,dialogueIndex:any){
+			
+		// },
+		// cancelDsign(){
+		// 	this.productImg = false
+		// 	// this.productImgList = []
+		// 	// this.productImgIndex = 0
+		// },
+		// download(){
+		// 	// downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
+		// },
+		// setScaleImageIndex(index:any){
+		// 	// this.productImgIndex = index
+		// 	// console.log(this.productImgIndex);
+			
+		// },
+		// LikeFile(item:any,str:string){
+		// 	let parent:any = this.$parent
+		// 	parent.likeFile(item,str)
+		// },
+	},
 });
 </script>
 
@@ -890,59 +929,145 @@ methods: {
 .productImg_content_item_intro{
 	font-size: 1.4rem;
 }
-.productImg_content_item_imgBox{
-	display: flex;
-	overflow-x: auto;
-	width: auto;
-	margin-bottom: 2rem;
-	align-items: center;
-	flex-wrap: nowrap;
-	.content_item_imgBox_itemImg{
-		display: flex;
-		margin-right: 1rem;
-		position: relative;
-		height: 36rem;
-		max-height: 100%;
-		position: relative;
-		img{
-			height: 100%;
-			width: 100%;
-			cursor: pointer;
-			object-fit: contain;
-			opacity: .5;
-			&.active{
-				opacity: 1;
-			}
-		}
-		.ant-checkbox-wrapper{
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-		&.content_item_imgBox_itemImg:hover{
-			.content_item_imgBox_itemImg_delete{
-				display: block;
-				cursor: pointer;
-			}
-		}
-		.content_item_imgBox_itemImg_delete{
-			display: none;	
-			width: 100%;
-			height: 100%;
-			background: rgba(0,0,0,.2);
-			position: absolute;
-			i{
-				position: absolute;
-				left: 50%;
-				top: 50%;
-				transform: translate(-50%,-50%);
-				color: #fff;
-			}
-		}
+// .productImg_content_item_imgBox{
+// 	display: flex;
+// 	overflow-x: auto;
+// 	width: auto;
+// 	margin-bottom: 2rem;
+// 	align-items: center;
+// 	flex-wrap: nowrap;
+// 	.content_item_imgBox_itemImg{
+// 		display: flex;
+// 		margin-right: 1rem;
+// 		position: relative;
+// 		height: 36rem;
+// 		max-height: 100%;
+// 		position: relative;
+// 		img{
+// 			height: 100%;
+// 			width: 100%;
+// 			cursor: pointer;
+// 			object-fit: contain;
+// 			opacity: .5;
+// 			&.active{
+// 				opacity: 1;
+// 			}
+// 		}
+// 		.ant-checkbox-wrapper{
+// 			position: absolute;
+// 			right: 0;
+// 			top: 0;
+// 		}
+// 		&.content_item_imgBox_itemImg:hover{
+// 			.content_item_imgBox_itemImg_delete{
+// 				display: block;
+// 				cursor: pointer;
+// 			}
+// 		}
+// 		.content_item_imgBox_itemImg_delete{
+// 			display: none;	
+// 			width: 100%;
+// 			height: 100%;
+// 			background: rgba(0,0,0,.2);
+// 			position: absolute;
+// 			i{
+// 				position: absolute;
+// 				left: 50%;
+// 				top: 50%;
+// 				transform: translate(-50%,-50%);
+// 				color: #fff;
+// 			}
+// 		}
 
+// 	}
+// 	.content_item_imgBox_itemImg:last-child{
+// 		margin-right: 0;
+// 	}
+// }
+.selectImg{
+	display: flex;
+	flex-direction: column;
+	> .imgBox{
+		flex: 1;
+		max-height: 45rem;
+		margin-top: 2rem;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		width: 100%;
+		overflow: hidden;
+		overflow-x: auto;
+		// &.active
+		
+		> .item{
+			margin-right: 1rem;
+			width: calc(100% / 2 - .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: .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;
+		}
 	}
-	.content_item_imgBox_itemImg:last-child{
-		margin-right: 0;
+	> .head{
+		color: #000;
+		font-weight: 600;
+		> .text{
+			display: inline-block;
+			font-size: 1.6rem;
+		}
 	}
 }
 .productImg_left,.productImg_right{