generate交互方式和图片放大后的

src/component/HomePage/scaleImage.vue

@@ -21,6 +21,10 @@
 		</div>
 		<div class="scaleImage_content">
 			<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
+			<div class="img_operate_block">
+				<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
+				<i v-else class="fi fi-sr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
+			</div>
 		</div>
 		<div class="scaleImage_nav">
 			<div class="nav_left">
@@ -70,6 +74,8 @@ export default defineComponent({
 		])
 		let scaleImageMask:any = ref(false)
 		let scaleImageIndex:any = ref(0)
+
+		let robotAssits:any = ref(0)
         return {
             scaleImage,
 			loadingShow,
@@ -78,6 +84,8 @@ export default defineComponent({
 			scaleImageList,
 			scaleImageMask,
 			scaleImageIndex,
+
+			robotAssits,
         };
     },
     data() {
@@ -104,10 +112,11 @@ export default defineComponent({
     mounted() {
     },
     methods: {
-		init(list:any,index:any){
+		init(list:any,index:any,dialogueIndex:any){
 			this.scaleImage = true
 			this.scaleImageList = list
 			this.scaleImageIndex = index
+			if(dialogueIndex)this.robotAssits = dialogueIndex
 			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
 		},
 		cancelDsign(){
@@ -134,6 +143,15 @@ export default defineComponent({
 		setScaleImageIndex(index:any){
 			this.scaleImageIndex = index
 		},
+		LikeFile(item:any,str:string){
+			let parent:any = this.$parent
+			if(this.robotAssits){
+				parent.likeFile(item,this.scaleImageIndex,this.robotAssits)
+			}else{
+				parent.likeFile(item,str)
+			}
+			
+		}
     },
 });
 </script>
@@ -197,12 +215,45 @@ export default defineComponent({
 		display: flex;
 		justify-content: center;
 		height: 75%;
+		margin: 0 auto;
 		margin-top: calc(5rem*1.2);
+		position: relative;
+		max-width: calc(50rem*1.2);
+
 		img{
 			width: auto;
-			max-width: calc(50rem*1.2);
 			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;
+			.operate_icon{
+				font-size: 1.8rem;
+				color: #fff;
+				&.fi-sr-heart{
+					color: red;
+				}
+			}
+			i{
+				font-size: 1.8rem;
+				color: #fff;
+			}
+		}
+	}
+	.scaleImage_content:hover{
+		.img_operate_block{
+			opacity: 1;
+		}
 	}
 	.scaleImage_nav{
 		flex: 1;