push Develop

2024-06-17 09:39:01 +08:00
parent c93483e36f
commit 363b880276
55 changed files with 5880 additions and 1359 deletions
--- a/src/component/HomePage/productImg.vue
+++ b/src/component/HomePage/productImg.vue
@@ -26,10 +26,10 @@
 					<div class="productImg_content_item_title">Select Collection</div>
 					<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
 						<div class="content_item_imgBox_itemImg" v-for="item in likeDesignCollectionList" :key="item.id" >
-							<img v-lazy="item.designOutfitUrl" alt="">
+							<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl" alt="" :class="{active:item.isChecked}">
 						</div>
 					</div>
-					<div class="productImg_content_item_title">Up Load</div>
+					<div class="productImg_content_item_title">Upload</div>
 					<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
                        <div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
                            <div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
@@ -41,17 +41,18 @@
                            <div
                                class="upload_file_item_content content_item_imgBox_itemImg"
                                v-show="file?.status === 'done'"
+
                            >
-                                <img :src="file?.imgUrl" class="upload_img" />
-								<div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
+                                <img @click="setGenerate(file)" :src="file?.imgUrl" class="upload_img" :class="{active:file?.isChecked}"/>
+								<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
 									<i class="fi fi-rr-trash"></i>
-								</div>
+								</div> -->
                            </div>
                        </div>
                        <div class="upload_file_item upload_component ">
 						<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
                            <a-upload
-                                :action="uploadUrl + '/api/element/upload'"
+                                :action="uploadUrl + '/api/history/toProductImageElementUpload'"
                                list-type="picture-card"
 								:capture="null"
                                :data="{
@@ -76,29 +77,62 @@
                        </div>
                    </div>
 					<div class="productImg_content_item_title">Magic Tools</div>
-
-
+					<div class="input_border productImg_content_item_generate">
+						<div class="input_box">
+							<div class="input_box_btnBox">
+								<input
+									class="search_input"
+									:placeholder="$t('Generate.inputContent1')"
+									v-model="searchName"
+									@keydown.enter="getPrductimg()"
+								/>
+								<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
+								<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="()=>isTextarea = !isTextarea"></i>
+							</div>
+							<textarea 
+								v-show="isTextarea"
+								class="search_textarea "  
+								@keydown.enter="getPrductimg()"
+								v-model="searchName"
+							></textarea>
+							<div v-show="!isProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
+								{{ $t('Generate.Generate') }}
+							</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_content_item_title">Selected Product</div>
 					<div class="productImg_right_item_box generalScroll" v-mousewheel>
 						<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
-							<img v-lazy="item.url" alt="">
+							<img :src="item.url" alt="">
 							<div class="productImg_right_item_like">
 								<i class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
 							</div>
+							<div class="productImg_right_item_scale">
+								<i class="fi fi-bs-expand-arrows-alt" @click.stop="setScaleImage(generateList,index)"></i>
+							</div>
 						</div>
 					</div>
 					<div class="productImg_content_item_title productImg_right_titleBtn">
 						Selected Product
-						<div class="button_second">Export</div>
+						<div class="button_second" @click="setExport">Export</div>
 					</div>
 					<div class="productImg_right_item_box generalScroll" v-mousewheel>
 						<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
-							<img v-lazy="item.url" alt="">
+							<img :src="item.url" alt="">
 							<div class="productImg_right_item_like">
 								<i class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike',index)"></i>
 							</div>
+							<div class="productImg_right_item_scale">
+								<i class="fi fi-bs-expand-arrows-alt" @click.stop="setScaleImage(likeList,index)"></i>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -108,6 +142,7 @@
 			<a-spin size="large" />
 		</div>
 		<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
+		<scaleImage ref="scaleImage"></scaleImage>
 	</a-modal>
 </template>

@@ -125,74 +160,59 @@ import { downloadIamge } from "@/tool/util";
 import { useI18n } from "vue-i18n";
 import ExportModel from "@/component/HomePage/ExportModel.vue";
 import { useStore } from "vuex";
+import scaleImage from "@/component/HomePage/scaleImage.vue";
+
 export default defineComponent({
 	components:{
 		ExportModel,
+		scaleImage,
 	},
    setup(props,{emit}) {
 		const store = useStore();
 		const {t} = useI18n()
+		const upload:any = ref({})
        let productImg: any = ref(false);//弹窗
 		let productImgMask:any = ref(false)//弹窗遮罩
 		let productImgData:any = reactive({
 			isShowMark:false,
+			beenPublished:0,
 			fileList:[],
+			searchName:'',
+			isTextarea:false,//是否展开
+			remProductimg:false,//是否出现取消按钮
+			isProductimg:false,//开始生成
+			selectProductimgList:[],
 			generateList:[
-				{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:2,
-				}
+				
 			],
 			likeList:[
-				{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},
+				
 			],
 		})
+		let ExportModel = ref()
 		let likeDesignCollectionList: any = computed(() => {
 			return store.state.HomeStoreModule.likeDesignCollectionList;
 		});
-		let init = ()=>{
+		let userlikeGroupId = 0
+		let init = (userGroupId:any,beenPublished:any)=>{
 			productImg.value = true
-			console.log(likeDesignCollectionList);
-			
+			productImgData.beenPublished = beenPublished
+			upload.value = {
+				userlikeGroupId:userGroupId
+			}
+			userlikeGroupId = userGroupId
+			getLikeProductImage(userGroupId)
+		}
+		let getLikeProductImage = (userGroupId:any)=>{
+			let data = {
+				userLikeGroupId:userGroupId
+			}
+			Https.axiosPost(Https.httpUrls.productImageLikeList, data).then(
+				(rv) => {
+					productImgData.likeList.push(...rv)
+				}
+			).catch(res=>{
+			});
 		}
 		let cancelDsign = ()=>{
 			Modal.confirm({
@@ -219,11 +239,9 @@ export default defineComponent({
                let res = JSON.parse(file.xhr.response);
 				if(res.errCode == 0){
 					file.imgUrl = res.data.url;
-					// file.type_ = {
-					// 	type1:'upload',
-					// 	type2:'Moodboard'
-					// };
 					file.id = res.data.id
+					file.isChecked = true
+					file.type = 'ProductElement'
 					productImgData.fileList.filter((v: any) => v.status === "done");
 				}else{
 					bor = false
@@ -242,7 +260,7 @@ export default defineComponent({
            if (!isJpgOrPng) {
                message.info(useI18n().t('MoodboardUpload.jsContent3'));
            }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.info(useI18n().t('MoodboardUpload.jsContent4'));
            }
@@ -251,35 +269,191 @@ export default defineComponent({
 		let deleteFile = (index:any)=>{
 			productImgData.fileList.splice(index,1)
 		}
+		let setGenerate = (item:any)=>{
+			item.isChecked = !item.isChecked
+			// productImgData.selectProductimgList
+		}
 		let likeFile = (item:any,str:any,index:any) =>{
-			if(str == 'like'){
-			    productImgData.likeList.push(item)
-			    productImgData.generateList.splice(index,1)
-				
-			}else{
-			    productImgData.generateList.push(item)
-			    productImgData.likeList.splice(index,1)
+			let url
+			let data = {
+				toProductImageResultId:[item.id]
 			}
+			if(str == 'like'){
+				url = Https.httpUrls.productImageLike
+			}else{
+				url = Https.httpUrls.productImageUnLike
+			}
+			Https.axiosPost(url, data).then(
+				(rv) => {
+					if(str == 'like'){
+						productImgData.likeList.push(item)
+						productImgData.generateList.splice(index,1)
+					}else{
+						productImgData.generateList.push(item)
+						productImgData.likeList.splice(index,1)
+					}
+					
+				}
+			).catch(res=>{
+			});
 		}
 		let setExport = ()=>{
-		    // let exportModel:any = this.$refs.ExportModel
-			// exportModel.init()
+			let data = {
+				key:'likePorductImg',
+				imgList:productImgData.likeList,
+				userlikeGroupId,
+				beenPublished:productImgData.beenPublished
+			}
+		    let exportModel:any = ExportModel.value
+			exportModel.init(data)
 		}
+		let remPrductimgTime:any = null
+		let prductimgTime:any = null
+		let getPrductimg = ()=>{
+			if(productImgData.isProductimg) return
+			clearInterval(remPrductimgTime)
+			let selectArr:any = []
+			let obj = {
+				"createTime": "",
+				"elementId": 0,
+				"elementType": "",
+				"id": 0,
+				"isLike": 0,
+				"taskId": "",
+				"toProductImageRecordId": 0,
+				"url": ""
+			}
+			productImgData.fileList.forEach((item:any)=>{
+				if(item.isChecked){
+					obj.elementId = item.id
+					obj.elementType = item.type
+					selectArr.push(JSON.parse(JSON.stringify(obj)))
+				}
+			})
+			likeDesignCollectionList.value.forEach((item:any)=>{
+				if(item.isChecked){
+					obj.elementId = item.designOutfitId
+					obj.elementType = 'DesignOutfit'
+					selectArr.push(JSON.parse(JSON.stringify(obj)))
+				}
+			})
+			if(selectArr.length == 0) {
+				message.info('Please select at least one picture')
+				return
+			}
+			let data:any ={
+				prompt:productImgData.searchName,
+				toProductImageVOList:selectArr,
+				userLikeGroupId:upload.value.userlikeGroupId,
+			}
+			productImgData.isProductimg = true
+			remPrductimgTime = setTimeout(()=>{
+				productImgData.remProductimg = true
+			},10000)
+			Https.axiosPost(Https.httpUrls.toProduct, data).then(
+                (rv) => {
+					let arr:any = []
+					rv.forEach((item:any)=>{
+					  arr.push(item.taskId)  
+					})
+					setPrductimg(arr)
+                }
+            ).catch(res=>{
+				productImgData.isProductimg = false
+				clearInterval(remPrductimgTime)
+				productImgData.remProductimg= false
+            });
+		}
+		let generateProceedList:any = []
+		let setPrductimg = (dataList:any)=>{
+			
+			let data = dataList
+			let dataNum = dataList.length
+			let state = true
+			prductimgTime = setInterval(()=>{
+				if(!state)return
+				state = false
+				Https.axiosPost(Https.httpUrls.toProductImageResult, 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
+									productImgData.generateList.unshift(element)
+								}
+								data = data.filter((item:any) => item !== element.taskId);
+							});
+							generateProceedList = data
+							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
+								// if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
+								// }
+								clearInterval(prductimgTime)
+								clearInterval(remPrductimgTime)
+								productImgData.remProductimg = false
+								productImgData.isProductimg = false
+							}
+						}
+					}
+				).catch(res=>{
+					clearInterval(prductimgTime)
+					clearInterval(remPrductimgTime)
+					productImgData.isProductimg = false
+					productImgData.remProductimg= false
+				});
+			},1000)
+		}
+		let removeProductimg = ()=>{
+			productImgData.isProductimg = false
+			productImgData.remProductimg= false
+			clearInterval(prductimgTime)
+			let userInfo:any = getCookie("userInfo")
+			if(generateProceedList){
+				// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
+				let str = generateProceedList.join(',')
+				console.log(str,generateProceedList);
+				let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
+				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
+					(rv) => {
+						generateProceedList = []
+					}
+				).catch(res=>{
+				});
+			}
+		}
+		let scaleImage = ref()
+		let setScaleImage = (arr:any,index:any)=>{
+			arr.forEach((item:any)=>{
+			  item.imgUrl = item.url  
+			})
+			scaleImage.value.init(arr,index)
+			scaleImage.value.isLike = false
+		}
+		//超分
 		let setTask = (data:any)=>{
 			emit('setTask',data)
 		}
+		
        return {
+			upload,
            productImg,
 			productImgMask,
 			...toRefs(productImgData),
 			likeDesignCollectionList,
+			ExportModel,
 			init,
 			cancelDsign,
 			fileUploadChange,
 			beforeUpload,
 			deleteFile,
+			setGenerate,
 			likeFile,
 			setExport,
+			getPrductimg,
+			removeProductimg,
+			scaleImage,
+			setScaleImage,
 			setTask,
        };
    },
@@ -309,12 +483,7 @@ export default defineComponent({
            // moodTemplateId: "", //模板id
 			token: "",
            uploadUrl: "",
-			upload: {
-                isPin: 0,
-				gender:'',
-                level1Type: "Moodboard",
-                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            },
+			
        };
    },
    mounted() {
@@ -370,13 +539,7 @@ export default defineComponent({
 		.upload_item{

 		}
-		.upload_file_item{
-			display: flex;
-			margin-right: 1rem;
-			&.upload_file_item:last-child{
-				margin-right: 0rem;
-			}
-		}
+		
 		.productImg_content_item_title{
 			font-weight: 600;
 			font-size: 1.8rem;
@@ -398,7 +561,12 @@ export default defineComponent({
 				height: 12rem;
 				img{
 					width: 100%;
+					cursor: pointer;
 					object-fit: contain;
+					&.active{
+						opacity: .5;
+						transform: scale(.9);
+					}
 				}
 				&.content_item_imgBox_itemImg:hover{
 					.content_item_imgBox_itemImg_delete{
@@ -435,6 +603,16 @@ export default defineComponent({
 		}
 		.productImg_left{
 			width: 25%;
+			.upload_file_item{
+				display: flex;
+				margin-right: 1rem;
+				width: auto;
+				border: none;
+				margin-bottom: 0;
+				&.upload_file_item:last-child{
+					margin-right: 0rem;
+				}
+			}
 			// width: 45%;
 			.productImg_content_item_imgBox{
 				.content_item_imgBox_itemImg{
@@ -442,6 +620,9 @@ export default defineComponent({
 					flex-shrink: 0;
 				}
 			}
+			.productImg_content_item_generate{
+				--width:60%;
+			}
 		}
 		.productImg_right{
 			width: 75%;
@@ -465,7 +646,7 @@ export default defineComponent({
 						height: 100%;
 					}
 					
-					.productImg_right_item_like{
+					.productImg_right_item_like,.productImg_right_item_scale{
 						display: none;
 						position: absolute;
 						top: 1rem;
@@ -475,9 +656,12 @@ export default defineComponent({
 							color: red;
 						}
 					}
+					.productImg_right_item_scale{
+						top: 4rem;
+					}
 				}
 				.productImg_right_item:hover{
-					.productImg_right_item_like{
+					.productImg_right_item_like,.productImg_right_item_scale{
 						display: block;
 					}	
 				}