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

src/component/HomePage/Generate.vue

@@ -53,7 +53,13 @@
 					v-model="searchPictureName"
 					@keydown.enter="getgenerate()"
 				/>
-				<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div>
+				<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div> -->
+				<div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
+					{{ $t('Generate.Generate') }}
+				</div>
+				<div v-show="isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
+					<i class="fi fi-br-loading"></i>
+				</div>
 				<span ref="inputShowText"></span>
 			</div>
             
@@ -122,7 +128,7 @@
                 v-for="(item, index) in fileList"
                 :key="item.imgUrl"
                 @click="generageAdd(item)"
-                :class="[item?.checked?'active':'']"
+                :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
             >
 				<img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt="">
 				<img v-show="item.status == 'Success'" :src="item.imgUrl" @click.stop="generageAdd(item)">
@@ -213,6 +219,7 @@ export default defineComponent({
 		let workspace:any = ref({})
 
 		let loadingShow = ref(false)
+		let isGenerate = ref(false)//判断是否正在进行generate
 		let inputShow = ref(false)//表示是否出现红框
 		let inputTime = ref()
 		let driver__:any = inject('driver__')
@@ -246,6 +253,7 @@ export default defineComponent({
 			checkboxImage,
 			printModel,
 			loadingShow,
+			isGenerate,
 			// printBoards,
 			moodboarList,
 			// sketchCatecoryList,
@@ -476,7 +484,7 @@ export default defineComponent({
 			// 		);
 			// 	return
 			// }
-			if(this.loadingShow){
+			if(this.isGenerate){
 				return
 			}
 			// if(!this.searchPictureName){
@@ -512,7 +520,7 @@ export default defineComponent({
 				isTestUser:this.driver__.driver?false:this.isTest,
 				gender:'',
 			}
-			this.loadingShow = true
+			this.isGenerate = true
 			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
                 (rv) => {
 					if(data.isTestUser){
@@ -520,7 +528,7 @@ export default defineComponent({
 							message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Moodboard')}));
 						}else if(rv.leftUsageCount == 0){
 							message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Moodboard')}));
-							this.loadingShow = false
+							this.isGenerate = false
 							return
 						}
 					}
@@ -536,7 +544,7 @@ export default defineComponent({
 					},10000)
                 }
             ).catch(res=>{
-				this.loadingShow = false
+				this.isGenerate = false
             });
 			// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
             //     (rv) => {
@@ -570,7 +578,7 @@ export default defineComponent({
 
 				Https.axiosPost(Https.httpUrls.generateResult, data).then(
 					(rv) => {
-						if(this.loadingShow){//防止取消后有正在执行的获取状态
+						if(this.isGenerate){//防止取消后有正在执行的获取状态
 							let arr:any = []
 							arr = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
 							rv.forEach((element:any) => {
@@ -595,7 +603,7 @@ export default defineComponent({
 								this.fileList = this.fileList.filter((item:any)=>item.status == 'Success')
 								clearInterval(this.generateTime)
 								clearInterval(this.remGenerateTime)
-								this.loadingShow = false
+								this.isGenerate = false
 								this.remGenerate = false
 							}
 						}
@@ -604,7 +612,7 @@ export default defineComponent({
 					this.fileList = this.fileList.filter((item:any)=>item.status == 'Success')
 					clearInterval(this.generateTime)
 					clearInterval(this.remGenerateTime)
-					this.loadingShow = false
+					this.isGenerate = false
 				});
 			},1000)
 		},
@@ -612,7 +620,7 @@ export default defineComponent({
 			let arr = this.fileList.filter((item:any)=>item.status != 'Success')
 			//取消操作
 			this.fileList = this.fileList.filter((item:any)=>item.status == 'Success')
-			this.loadingShow = false
+			this.isGenerate = false
 			clearInterval(this.generateTime)
 			if(arr){
 				let str = arr.map((obj:any) => obj.taskId).join(',');
@@ -921,10 +929,12 @@ export default defineComponent({
 						color: red;
 					}
 				}
+				
 			}
 			&:hover .delete_like_file_block{
 				display: block;
 			}
+			
         }
         .upload_item {
             .upload_file_item {
@@ -948,6 +958,7 @@ export default defineComponent({
 						cursor:not-allowed;
 					}
 				}
+				
                 .upload_file_item_content {
                     display: flex;
                     align-items: center;