From b08a0f85ade6d5a90403bc7ef76a753bab7e51b4 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Wed, 3 Jul 2024 11:39:01 +0800 Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E9=A1=B5=E9=9D=A2=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Detail/DesignPrintOperation.vue | 2 +- src/component/Detail/addDetails.vue | 2 +- src/component/HomePage/ExportModel.vue | 197 +++---- src/component/HomePage/Material.vue | 19 +- src/component/HomePage/PrintboardUpload.vue | 8 +- src/component/HomePage/productImg.vue | 498 ++++++++++-------- src/component/HomePage/scaleImage.vue | 279 ++++++++-- src/component/WorksPage/newScaleImage.vue | 2 +- src/lang/cn.ts | 7 +- src/lang/en.ts | 9 +- src/store/uploadFile/uploadFile.ts | 10 +- src/views/HomeView/HomeView.vue | 1 + 12 files changed, 657 insertions(+), 377 deletions(-) diff --git a/src/component/Detail/DesignPrintOperation.vue b/src/component/Detail/DesignPrintOperation.vue index 7f125d23..be3a3bf0 100644 --- a/src/component/Detail/DesignPrintOperation.vue +++ b/src/component/Detail/DesignPrintOperation.vue @@ -304,7 +304,7 @@ export default defineComponent({ if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList)) if(this.overallSingle == false && this.designOpenrtionList.length > 0){ this.designOpenrtionList[0].checked = true - }else{ + }else if(this.overallSingle == false && this.designOpenrtionList.length == 0){ this.setpitch(this.designList[0],0) } // this.overallSingle = this.current.ifSingle?false:this.current.ifSingle diff --git a/src/component/Detail/addDetails.vue b/src/component/Detail/addDetails.vue index 22029df9..a32d9af1 100644 --- a/src/component/Detail/addDetails.vue +++ b/src/component/Detail/addDetails.vue @@ -258,7 +258,7 @@ export default defineComponent({ canvas.loadFromJSON(canvasState.value, () => {}); } let setSubmit = ()=>{ - var allObjects = canvas.getObjects(); + var allObjects = canvas.getObjects('path'); if(allObjects.length == 0){ return message.info(t('addDetails.jsContent1')) } diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue index b47b022a..e9fbc819 100644 --- a/src/component/HomePage/ExportModel.vue +++ b/src/component/HomePage/ExportModel.vue @@ -467,109 +467,113 @@ export default defineComponent({ canvas.loadFromJSON(oldExportCanvas, () => {}); isShowMark.value = false }else{ - for (const item of arr) { - for (const key in allBoardData.value) { - if (item == key) { - //循环渲染顺序 - let imgWidth = setImageWidth(key); //这是设置画布等宽 - let sketchGroupingItem = []; - if ( - item == "moodboardFiles" && - !disposeMoodboardShow - ) { - continue; - } - for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) { - await new Promise((resolve, reject) => { - if(!allItem){ - resolve() - } - maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight - if (key == "colorBoards") { - let rect = setGroup(allItem) - if (position.x + rect.width > canvasWH.value.width || oldKey != key) { - position.x = 0; - position.y = maxHeight; + nextTick(async ()=>{ + for (const item of arr) { + for (const key in allBoardData.value) { + if (item == key) { + //循环渲染顺序 + + let imgWidth = setImageWidth(key); //这是设置画布等宽 + let sketchGroupingItem = []; + if ( + item == "moodboardFiles" && + !disposeMoodboardShow + ) { + continue; + } + for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) { + await new Promise((resolve, reject) => { + if(!allItem){ + resolve() } - let group = setCanvasColor(position.y,position.x,rect) - oldKey = key; - position.x += rect.width + margin; - position.height = group.height + margin; - resolve(); - } else { - let itemCanvasImg = allItem.imgUrl; - if (key == "likeDesignCollectionList") { - itemCanvasImg = - allItem.designOutfitUrl; - } - fabric.Image.fromURL(itemCanvasImg,(img) => { - let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率 - if(key == "sketchboardFiles"){ - if(allItemIndex == 0){ - position.x = 0; - position.y = maxHeight; - } - }else{ - if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) { - position.x = 0; - position.y = maxHeight; - } + maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight + if (key == "colorBoards") { + let rect = setGroup(allItem) + if (position.x + rect.width > canvasWH.value.width || oldKey != key) { + position.x = 0; + position.y = maxHeight; } - setCanvasImage(img,key,position.x,position.y,allItem)//设置图片 - position.height = img.height * scaleWH + margin; - if (key == "sketchboardFiles") { - if (sketchGroupingItem.length <3) { - sketchGroupingItem.push(JSON.parse(JSON.stringify(position))); - } - if (sketchGroupingItem.length >2) { - let sketchXyIndex = { - maxIndex: 0, - maxNum: 0, - minNum: 999999, - minIndex: 0, - }; - sketchGroupingItem.forEach( - (sketchItem,sketchIndex) => { - if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) { - sketchXyIndex.minNum = sketchItem.y + sketchItem.height - sketchXyIndex.minIndex = sketchIndex; - } - if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) { - sketchXyIndex.maxNum = sketchItem.y + sketchItem.height - sketchXyIndex.maxIndex = sketchIndex; - } - } - ); - sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum - // sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum - if (allBoardData.value[key].length == allItemIndex + 1) { - maxHeight = sketchXyIndex.maxNum - } else { - position = sketchGroupingItem[sketchXyIndex.minIndex]; + let group = setCanvasColor(position.y,position.x,rect) + oldKey = key; + position.x += rect.width + margin; + position.height = group.height + margin; + resolve(); + } else { + let itemCanvasImg = allItem.imgUrl; + if (key == "likeDesignCollectionList") { + itemCanvasImg = + allItem.designOutfitUrl; + } + fabric.Image.fromURL(itemCanvasImg,(img) => { + let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率 + if(key == "sketchboardFiles"){ + if(allItemIndex == 0){ + position.x = 0; + position.y = maxHeight; + } + }else{ + if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) { + position.x = 0; + position.y = maxHeight; } } - } - if(key == "sketchboardFiles" && sketchGroupingItem.length >2){ - }else{ - position.x += img.width * scaleWH + margin; - } - img.lock_rotation = true; - canvas.add(img); - oldKey = key; - // setTimeout(() => { - resolve() - // }, 1000); - },{ crossOrigin: "Anonymous" }); - } - }); + setCanvasImage(img,key,position.x,position.y,allItem)//设置图片 + position.height = img.height * scaleWH + margin; + if (key == "sketchboardFiles") { + if (sketchGroupingItem.length <3) { + sketchGroupingItem.push(JSON.parse(JSON.stringify(position))); + } + if (sketchGroupingItem.length >2) { + let sketchXyIndex = { + maxIndex: 0, + maxNum: 0, + minNum: 999999, + minIndex: 0, + }; + sketchGroupingItem.forEach( + (sketchItem,sketchIndex) => { + if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) { + sketchXyIndex.minNum = sketchItem.y + sketchItem.height + sketchXyIndex.minIndex = sketchIndex; + } + if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) { + sketchXyIndex.maxNum = sketchItem.y + sketchItem.height + sketchXyIndex.maxIndex = sketchIndex; + } + } + ); + sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum + // sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum + if (allBoardData.value[key].length == allItemIndex + 1) { + maxHeight = sketchXyIndex.maxNum + } else { + position = sketchGroupingItem[sketchXyIndex.minIndex]; + } + } + } + if(key == "sketchboardFiles" && sketchGroupingItem.length >2){ + }else{ + position.x += img.width * scaleWH + margin; + } + img.lock_rotation = true; + canvas.add(img); + oldKey = key; + // setTimeout(() => { + resolve() + // }, 1000); + },{ crossOrigin: "Anonymous" }); + } + }); + } } } + if(position.y+position.height>canvasWH.value.height){ + canvasWH.value.height = Math.floor(position.y+position.height) + canvas.setHeight(canvasWH.value.height); + } } - if(position.y+position.height>canvasWH.value.height){ - canvasWH.value.height = Math.floor(position.y+position.height) - canvas.setHeight(canvasWH.value.height); - } - } + }) + isShowMark.value = false } updateCanvasState('')//加载完成后记录一下 @@ -689,7 +693,6 @@ export default defineComponent({ objects.forEach(function(obj) { var objBottom = obj.top + obj.height*obj.scaleY; if (objBottom > maxHeight) { - console.log(obj); maxHeight = objBottom; } }); diff --git a/src/component/HomePage/Material.vue b/src/component/HomePage/Material.vue index a966f40c..e6221a41 100644 --- a/src/component/HomePage/Material.vue +++ b/src/component/HomePage/Material.vue @@ -38,12 +38,12 @@
-
+
@@ -205,7 +205,7 @@ export default defineComponent({ if(newVal.findIndex((newValItem:any) =>newValItem.id == item.id) == -1){ this.imgList.forEach((i:any)=>{ if(i.id == item.id){ - i.libraryChecked = false + i.collectionChecked = false } }) } @@ -219,7 +219,7 @@ export default defineComponent({ if(newVal.findIndex((newValItem:any) =>newValItem.id == item.id) == -1){ this.imgList.forEach((i:any)=>{ if(i.id == item.id){ - i.libraryChecked = false + i.collectionChecked = false } }) } @@ -234,7 +234,7 @@ export default defineComponent({ if(newVal.findIndex((newValItem:any) =>newValItem.id == item.id) == -1){ this.imgList.forEach((i:any)=>{ if(i.id == item.id){ - i.libraryChecked = false + i.collectionChecked = false } }) } @@ -261,14 +261,14 @@ export default defineComponent({ setUseGenerate(arr:any){ let parent:any = this.$parent this.imgList.forEach((item:any) => { - item.libraryChecked = false + item.collectionChecked = false }); if(parent.isUseGenerate){ }else{ arr.forEach((item:any) => { this.imgList.forEach((imgListItem:any) => { if(item.id == imgListItem.id){ - imgListItem.libraryChecked = true + imgListItem.collectionChecked = true } }); }); @@ -281,7 +281,6 @@ export default defineComponent({ imgData.categoryValue = imgData.level2TypeEnum.name imgData.category = imgData.level2TypeEnum.value } - imgData.libraryChecked = true imgData.like = true if(parent.isUseGenerate){ this.setUseGenerate([]) @@ -304,6 +303,8 @@ export default defineComponent({ let maxImg = 8 if(this.selectCode == 'Sketchboard'){ maxImg = 20 + }else if(this.selectCode == 'Printboard'){ + maxImg = 16 } imgData.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg}) this.store.commit("addGenerateMaterialFils", imgData); @@ -371,7 +372,7 @@ export default defineComponent({ arr.forEach((v:any)=>{ if(item.id == v.id){ item.id_ = v.id_?v.id_:GO.id++ - item.libraryChecked = true + item.collectionChecked = true item.pin = v.pin } }) diff --git a/src/component/HomePage/PrintboardUpload.vue b/src/component/HomePage/PrintboardUpload.vue index 1d52999c..5ec605df 100644 --- a/src/component/HomePage/PrintboardUpload.vue +++ b/src/component/HomePage/PrintboardUpload.vue @@ -60,7 +60,7 @@
-->
-
+
@@ -378,7 +378,7 @@ export default defineComponent({ // this.fileList.splice(item, 1) // this.store.commit('setPrintboardFile',this.fileList) if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){ - item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8}) + item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16}) this.store.commit("addGenerateMaterialFils", item); }else{ this.fileList = this.store.state.UploadFilesModule.printboardFiles diff --git a/src/component/HomePage/productImg.vue b/src/component/HomePage/productImg.vue index f98c5f98..dfe080f5 100644 --- a/src/component/HomePage/productImg.vue +++ b/src/component/HomePage/productImg.vue @@ -48,10 +48,10 @@
-
+
{{$t('ProductImg.Similarity')}}
-
+
+
+ {{$t('ProductImg.RelightDirection')}} +
+
+ + +
+
{{$t('ProductImg.SelectCollection')}}
@@ -131,7 +145,7 @@
{{$t('ProductImg.GenerateProduct')}}
-
+
@@ -139,7 +153,7 @@
-
+
@@ -164,7 +178,7 @@
-
+
@@ -180,7 +194,12 @@
- + @@ -228,7 +247,7 @@ export default defineComponent({ }) let productimgMenuList = ref([ { - value:'ProductImage', + value:'ToProductImage', label:useI18n().t('ProductImg.ProductImage') },{ value:'Relight', @@ -236,6 +255,22 @@ export default defineComponent({ } ]) 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 ExportModel = ref() let selectList:any = ref({}) let likeDesignCollectionList: any = computed(() => { @@ -245,7 +280,7 @@ export default defineComponent({ let init = (userGroupId:any,beenPublished:any)=>{ productImg.value = true productImgData.beenPublished = beenPublished - selectList.value['ProductImage'] = JSON.parse(JSON.stringify(likeDesignCollectionList.value)) + selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(likeDesignCollectionList.value)) upload.value = { userlikeGroupId:userGroupId } @@ -286,6 +321,7 @@ export default defineComponent({ productImg.value = false productImgData.likeList = [] productImgData.generateList = [] + selectList.value = {} productimgMenu.value = productimgMenuList.value[0] } @@ -350,6 +386,8 @@ export default defineComponent({ productImgData.generateList.splice(index,1) }else{ productImgData.generateList.push(item) + console.log(item,productImgData.generateList); + productImgData.likeList.splice(index,1) } @@ -413,11 +451,13 @@ export default defineComponent({ message.info(t('ProductImg.jsContent2')) return } + let imageStrength = productImgData.similarity == 100? 95 :productImgData.similarity let data:any ={ prompt:productImgData.searchName, toProductImageVOList:selectArr, userLikeGroupId:upload.value.userlikeGroupId, - imageStrength:(100 - productImgData.similarity)/100, + direction:RelightDirection.value, + imageStrength:(100 - imageStrength)/100, } productImgData.isProductimg = true remPrductimgTime = setTimeout(()=>{ @@ -492,6 +532,7 @@ export default defineComponent({ } } ).catch(res=>{ + productImgData.generateList.filter((item:any)=>item.status == 'Success') clearInterval(prductimgTime) clearInterval(remPrductimgTime) productImgData.isProductimg = false @@ -517,10 +558,11 @@ export default defineComponent({ } } let scaleImage = ref() - let setScaleImage = (arr:any,index:any)=>{ + let setScaleImage = (arr:any,index:any,isLike:any)=>{ arr.forEach((item:any)=>{ item.imgUrl = item.url }) + scaleImage.value.isProductimg = isLike scaleImage.value.init(arr,index) scaleImage.value.isLike = false scaleImage.value.isComparison = true @@ -536,6 +578,9 @@ export default defineComponent({ if(!selectList.value[productimgMenu.value.value]){ selectList.value[productimgMenu.value.value] = [] } + selectList.value[productimgMenu.value.value].forEach((item:any) => { + item.isChecked = false + }); if(selectList.value[menuItem.value].indexOf(item) == -1){ item.isChecked = true selectList.value[menuItem.value].push(item) @@ -563,6 +608,10 @@ export default defineComponent({ ...toRefs(productImgData), productimgMenuList, productimgMenu, + + RelightDirectionList, + RelightDirection, + selectList, likeDesignCollectionList, ExportModel, @@ -665,233 +714,248 @@ export default defineComponent({ justify-content: space-between; flex: 1; .upload_item{ - } - - .productImg_content_item_title{ - font-weight: 600; - font-size: 1.8rem; - margin-bottom: 1rem; - &.productImg_content_item_title_menu{ - display: flex; - align-items: center; - justify-content: space-between; - .productImg_content_item_title_menubtn{ - font-size: 1.6rem; - font-weight: 500; + } + .productImg_content_item_title{ + font-weight: 600; + font-size: 1.8rem; + margin-bottom: 1rem; + &.productImg_content_item_title_menu{ + display: flex; + align-items: center; + justify-content: space-between; + .productImg_content_item_title_menubtn{ + font-size: 1.6rem; + font-weight: 500; + } + } + &.productImg_content_item_title_similarity{ + // margin-bottom: 8rem; + } + } + .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; + .content_item_imgBox_itemImg{ + display: flex; + margin-right: 1rem; + position: relative; + height: 12rem; + img{ + width: 100%; + cursor: pointer; + object-fit: contain; + &.active{ + opacity: .5; + transform: scale(.9); } } - &.productImg_content_item_title_similarity{ - // margin-bottom: 8rem; + &.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; + } + } + .productImg_left,.productImg_right{ + display: flex; + flex-direction: column; + } + .productImg_content_item:last-child{ + margin-bottom: 0; + } + .productImg_left{ + width: 25%; + position: relative; + .upload_file_item{ + display: flex; + margin-right: 1rem; + width: auto; + border: none; + margin-bottom: 0; + &.upload_file_item:last-child{ + margin-right: 0rem; } } - .productImg_content_item_intro{ - font-size: 1.4rem; - } + // width: 45%; .productImg_content_item_imgBox{ + .content_item_imgBox_itemImg{ + width: 5rem; + flex-shrink: 0; + } + } + .productImg_content_item_generate{ + --width:100%; + } + .productImg_content_item_similarity{ + display: flex; + align-items: center; + .system_silder{ + flex: 1; + } + input{ + width: 30%; + width: 5rem; + height: 5rem; + text-align: center; + font-size: 1.8rem; + } + } + .productImg_content_item_Direction{ + padding-bottom: calc(2rem* 1.2); + .ant-select{ + font-size: 1.6rem; + .ant-select-selector::after{ + line-height: 1; + } + .ant-select-selector .ant-select-selection-item{ + line-height: 1; + } + .ant-select-selector{ + height: auto; + padding: 1rem 1rem; + box-shadow: none !important; + border: calc(0.1rem* 1.2) solid #F1F1F1; + } + } + } + .productImg_content_item_generate_btn{ + position: absolute; + bottom: 0; + top: auto; + width: 100%; + justify-content: space-around; + .input_box{ + flex: 0; + margin-left: auto; + } + .started_btn{ + // width: 13rem; + // text-align: center; + margin: 0; + } + } + } + .productImg_right{ + width: 75%; + padding-left: 2rem; + height: 100%; + justify-content: space-between; + .productImg_right_item_box{ + height: 40%; display: flex; overflow-x: auto; - width: auto; - margin-bottom: 2rem; - align-items: center; - .content_item_imgBox_itemImg{ - display: flex; + background: #f6f6fa; + border-radius: 2rem; + margin-bottom: 2%; + padding: 1rem 1.5rem; + position: relative; + .mark_loading{ + position: absolute + } + .productImg_right_item{ + height: 100%; + padding: 1rem 0; margin-right: 1rem; position: relative; - 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{ - display: block; - cursor: pointer; - } - } - .content_item_imgBox_itemImg_delete{ - display: none; - width: 100%; + background: #fff; + .productImg_right_item_imgBox{ height: 100%; - background: rgba(0,0,0,.2); - position: absolute; - i{ - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%,-50%); - color: #fff; + .loadingImg{ + width: 14rem; + object-fit: contain; } } - + img{ + height: 100%; + } + + .productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{ + display: none; + position: absolute; + top: 2rem; + right: 2rem; + cursor: pointer; + width: 3rem; + height: 3rem; + background: #fff; + align-items: center; + justify-content: center; + border-radius: .5rem; + border: .1rem solid #ccc; + .fi-sr-heart{ + color: red; + } + } + .productImg_right_item_menu{ + ul{ + top: 100%; + position: absolute; + width: 13rem; + left: 0; + text-align: center; + border-radius: calc(1rem*1.2); + overflow: hidden; + z-index: 3; + li{ + background: #cccccc; + padding: .5rem 1rem; + } + li:hover{ + // background: rgba(0,0,0,.4); + background: #999999; + color: #000; + } + } + } + .iconLeft{ + left: 2rem; + right: auto; + } + .productImg_right_item_scale{ + top: 6rem; + } } - .content_item_imgBox_itemImg:last-child{ + .productImg_right_item:hover{ + .productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{ + display: flex; + } + } + .productImg_right_item:last-child{ margin-right: 0; } } - .productImg_left,.productImg_right{ - display: flex; - flex-direction: column; - } - .productImg_content_item:last-child{ + .productImg_right_item_box:last-child{ margin-bottom: 0; } - .productImg_left{ - width: 25%; - position: relative; - .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{ - width: 5rem; - flex-shrink: 0; - } - } - .productImg_content_item_generate{ - --width:100%; - } - .productImg_content_item_similarity{ - display: flex; - align-items: center; - .system_silder{ - flex: 1; - } - input{ - width: 30%; - width: 5rem; - height: 5rem; - text-align: center; - font-size: 1.8rem; - } - } - .productImg_content_item_generate_btn{ - position: absolute; - bottom: 0; - top: auto; - width: 100%; - justify-content: space-around; - .input_box{ - flex: 0; - margin-left: auto; - } - .started_btn{ - // width: 13rem; - // text-align: center; - margin: 0; - } - } - } - .productImg_right{ - width: 75%; - padding-left: 2rem; - height: 100%; + .productImg_right_titleBtn{ + display: flex; justify-content: space-between; - .productImg_right_item_box{ - height: 40%; - display: flex; - overflow-x: auto; - background: #f6f6fa; - border-radius: 2rem; - margin-bottom: 2%; - padding: 1rem 1.5rem; - position: relative; - .mark_loading{ - position: absolute - } - .productImg_right_item{ - height: 100%; - padding: 1rem 0; - margin-right: 1rem; - position: relative; - background: #fff; - .productImg_right_item_imgBox{ - height: 100%; - .loadingImg{ - width: 14rem; - object-fit: contain; - } - } - img{ - height: 100%; - } - - .productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{ - display: none; - position: absolute; - top: 2rem; - right: 2rem; - cursor: pointer; - width: 3rem; - height: 3rem; - background: #fff; - align-items: center; - justify-content: center; - border-radius: .5rem; - border: .1rem solid #ccc; - .fi-sr-heart{ - color: red; - } - } - .productImg_right_item_menu{ - ul{ - top: 100%; - position: absolute; - width: 13rem; - left: 0; - text-align: center; - border-radius: calc(1rem*1.2); - overflow: hidden; - z-index: 3; - li{ - background: #cccccc; - padding: .5rem 1rem; - } - li:hover{ - // background: rgba(0,0,0,.4); - background: #999999; - color: #000; - } - } - } - .iconLeft{ - left: 2rem; - right: auto; - } - .productImg_right_item_scale{ - top: 6rem; - } - } - .productImg_right_item:hover{ - .productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{ - display: flex; - } - } - .productImg_right_item:last-child{ - margin-right: 0; - } - } - .productImg_right_item_box:last-child{ - margin-bottom: 0; - } - .productImg_right_titleBtn{ - display: flex; - justify-content: space-between; - } - } } diff --git a/src/component/HomePage/scaleImage.vue b/src/component/HomePage/scaleImage.vue index a7d308bb..cf3dd1cd 100644 --- a/src/component/HomePage/scaleImage.vue +++ b/src/component/HomePage/scaleImage.vue @@ -20,13 +20,70 @@
- - -
- - +
+
+
+ {{$t('ProductImg.MagicTools')}} +
+
+
+
+ + + +
+ +
+
+
+ {{$t('ProductImg.Similarity')}} +
+
+ + + +
+
+
+
+ {{ $t('Generate.Generate') }} +
+
+ +
+
+ {{$t('Generate.Close')}} +
+
+
+
+
+ + +
+ + +
+
+
+
@@ -56,15 +113,36 @@ @@ -176,45 +362,58 @@ export default defineComponent({ .scaleImage_content{ display: flex; justify-content: center; - height: 75%; - margin: 0 auto; margin-top: calc(5rem*1.2); + height: 75%; position: relative; - max-width: 70rem; - img{ - width: auto; - height: 100%; - } - .img_operate_block{ - width: 3.6rem; - height: 3.6rem; - background: rgba(0,0,0,0.6); - border-radius: 50%; - text-align: center; - line-height: 3.6rem; - cursor: pointer; - margin-bottom: 0.4rem; + .productImg_modal{ position: absolute; - right: 2rem; - top: 2rem; - opacity: 0; - display: flex; - align-items: center; - justify-content: center; - .operate_icon{ - font-size: 1.8rem; - color: #fff; - &.fi-sr-heart{ - color: red; + left: 0; + .productImg_left{ + width: 100%; + .productImg_content_item_generate_btn{ + transform: translateY(100%); } } - i{ + } + .scaleImage_content_imgBox{ + position: relative; + max-width: 70rem; + img{ + width: auto; + height: 100%; + } + .img_operate_block{ + width: 3.6rem; + height: 3.6rem; + background: rgba(0,0,0,0.6); + border-radius: 50%; + text-align: center; + line-height: 3.6rem; + cursor: pointer; + margin-bottom: 0.4rem; + position: absolute; + right: 2rem; + top: 2rem; + opacity: 0; display: flex; - font-size: 1.8rem; - color: #fff; + align-items: center; + justify-content: center; + .operate_icon{ + font-size: 1.8rem; + color: #fff; + &.fi-sr-heart{ + color: red; + } + } + i{ + display: flex; + font-size: 1.8rem; + color: #fff; + } } } + } .scaleImage_content:hover{ .img_operate_block{ diff --git a/src/component/WorksPage/newScaleImage.vue b/src/component/WorksPage/newScaleImage.vue index 602783d8..2c4acf7d 100644 --- a/src/component/WorksPage/newScaleImage.vue +++ b/src/component/WorksPage/newScaleImage.vue @@ -67,7 +67,7 @@
{{$t('newScaleImage.Describe')}}: {{scaleImageData.portfolioDes}}
-
{{scaleImageData.createDate}}
+
{{scaleImageData.createDate?.split('T')[0]}} {{scaleImageData.createDate?.split('T')[1]}}