2023-10-27

上传模特截取模特图片大小功能

src/views/HomeView.vue

@@ -1192,10 +1192,11 @@ export default defineComponent({
 									align-items: center;
 								}
 								.content_img_block {
-									width: 20.1rem;
+									// width: 20.1rem;
+									width: auto;
 									height: 37rem;
 									// height: 29.5rem;
-									margin-right: 3rem;
+									margin-right: 2rem;
 									// margin-bottom: 1rem;
 									display: inline-block;
 									position: relative;

src/views/LibraryPage.vue

@@ -173,10 +173,17 @@
 									</div>
 									
 									<div class="input_box" :class="{active:inputShow}">
-										<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" placeholder="Promopt input" v-model="captionGeneration">
+										<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" placeholder="Prompt input" v-model="captionGeneration">
 										<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
 										<span>The entered content exceeds the maximum length.</span>
 									</div>
+									<div v-show="selectCode == 'Printboard'" class="printModel">
+										<div @click.stop="PrintModel">{{ printModel.name }}</div>
+										<ul v-show="printModel.optype">
+											<li class="printModel_item" @click="setprintModel(1)">Model1</li>
+											<li class="printModel_item" @click="setprintModel(2)">Model2</li>
+										</ul>
+									</div>
 									<div class="upload_item">
 										<div
 											class="upload_file_item"
@@ -197,6 +204,7 @@
 												</div>
 											</div>
 										</div>
+										
 										<div
 											class="upload_component upload_file_item"
 											v-show="selectGenerateList.length <= 3"
@@ -374,6 +382,11 @@ export default defineComponent({
 		let inputTime = ref()
 		let generateList:any = ref([])
 		let selectGenerateList:any = ref([])
+		let printModel = ref({
+			num:1,
+			optype:false,
+			name:'model1'
+		})
         return {
             menuList,
             selectImgList,
@@ -403,6 +416,7 @@ export default defineComponent({
 			inputTime,
 			generateList,
 			selectGenerateList,
+			printModel
         }
     },
 	data(this_) {
@@ -833,6 +847,23 @@ export default defineComponent({
 				item.checked = true
 			}
 		},
+		PrintModel(){
+			if(!this.printModel.optype){
+				document.addEventListener('click',this.removePrintModel)
+			}
+			this.printModel.optype = !this.printModel.optype
+		},
+		removePrintModel(){
+			this.printModel.optype = false
+			document.removeEventListener('click',this.removePrintModel)
+		},
+		setprintModel(num:any){
+			this.printModel = {
+				num : num,
+				optype:false,
+				name:'model'+num
+			}
+		},
 		getgenerate(){
 			let generateType = this.checkbox.filter((v:any)=>v.type)[0].name
 			let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
@@ -844,7 +875,7 @@ export default defineComponent({
 				level2Type:this.selectCode == 'Sketchboard'?this.designType:'',
 				text:this.captionGeneration,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				version:2,//为1就是Print
+				version:this.selectCode == 'Printboard'?this.printModel.num:0,//为1就是Print
 				gender:this.selectCode == 'Sketchboard'?this.sex:'',
 			}
 			if(generateType == 'image'||generateType == 'text-image'){
@@ -1142,7 +1173,7 @@ export default defineComponent({
 								}
 								.content_body_header_right{
 									display: flex;
-									width: 40rem;
+									width: 43rem;
 								}
                                 .check_all_block{
                                     display: flex;
@@ -1198,9 +1229,40 @@ export default defineComponent({
 											}
 										}
 										.generage_btn{
-											margin-left: 3rem;
+											margin: 0 3rem;
 										}
 									}
+									.printModel{
+											font-size: 1.4rem;
+											font-weight: 500;
+											>div{
+												width: 7rem;
+												display: flex;
+												justify-content: center;
+												border-radius: 1rem;
+												margin: 0;
+												border: 2px solid;
+												cursor: pointer;
+											
+											}
+											ul{
+												position: absolute;
+												width: 7rem;
+												text-align: center;
+												margin-top: .3rem;
+												border-radius: 1rem;
+												overflow: hidden;
+												z-index: 3;
+												li{
+													background: #c5c4c8;
+													line-height: 2;
+													cursor: pointer;
+													&.printModel_item:hover{
+														background: rgba(0,0,0,.4);
+													}
+												}
+											}
+										}
 									.upload_item{
 										margin-left: 4rem;
 										.upload_file_item{
@@ -1212,6 +1274,7 @@ export default defineComponent({
 										.upload_component{
 											margin: 0;
 										}
+										
 									}
 									
 								}