fix

src/assets/style/style.css

@@ -1037,6 +1037,11 @@ li {
   font-weight: 400;
   color: rgba(0, 0, 0, 0.45);
 }
+.modal_title_text .modal_title_text_assistant {
+  font-size: var(--aida-fsize1-6);
+  font-weight: 400;
+  color: #000000;
+}
 .collection_modal .ant-modal-body,
 .generalModel_modal .ant-modal-body,
 .payOrder_modal .ant-modal-body,

src/assets/style/style.less

@@ -1175,6 +1175,11 @@ input:focus{
 		font-weight: 400;
 		color: rgba(0,0,0,.45);
 	}
+	.modal_title_text_assistant{
+		font-size: var(--aida-fsize1-6);
+		font-weight: 400;
+		color: rgba(0,0,0,1);
+	}
 }
 //collection 弹窗
 .collection_modal,.generalModel_modal,.payOrder_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page,.Export{

src/component/Detail/DesignDetail.vue

@@ -938,7 +938,6 @@ export default defineComponent({
         clothesDetail(clothes:any, index:number){
 			
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			console.log(designItemDetail);
 			
 			this.designOrder = true
 			this.current = designItemDetail.clothes[index]

src/component/HomePage/collectionModal.vue

@@ -118,14 +118,14 @@ export default defineComponent({
 		}
 		
 	},
-	activated () {
+	// activated () {
-		// let data:any = JSON.parse((sessionStorage.getItem('collectionData') as any));
+	// 	let data:any = JSON.parse((sessionStorage.getItem('collectionData') as any));
-		// if(!data){
+	// 	if(!data){
-		// 	return
+	// 		return
-		// }
+	// 	}
-		// this.showCollectionModal = data.showCollectionModal
+	// 	this.showCollectionModal = data.showCollectionModal
-		// this.collectionStep = data.collectionStep
+	// 	this.collectionStep = data.collectionStep
-	},
+	// },
     data(){
         return{
             

src/component/HomePage/scaleImage.vue

@@ -231,7 +231,7 @@ export default defineComponent({
 		margin: 0 auto;
 		margin-top: calc(5rem*1.2);
 		position: relative;
-		max-width: calc(50rem*1.2);
+		max-width: 70rem;
 		img{
 			width: auto;
 			height: 100%;
@@ -249,6 +249,9 @@ export default defineComponent({
 			right: 2rem;
 			top: 2rem;
 			opacity: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			.operate_icon{
 				font-size: 1.8rem;
 				color: #fff;
@@ -257,6 +260,7 @@ export default defineComponent({
 				}
 			}
 			i{
+				display: flex;
 				font-size: 1.8rem;
 				color: #fff;
 			}

src/component/WorksPage/newScaleImage.vue

@@ -0,0 +1,603 @@
+<template>
+		<a-modal
+            class="newScaleImage_modal"
+            v-model:visible="scaleImage"
+            :footer="null"
+            width="78%"
+            :maskClosable="false"
+            :centered="true"
+            :closable="false"
+            :mask="scaleImageMask"
+			:keyboard="false"
+			:destroyOnClose="true"
+        >
+		<div class="newScaleImage_btn">
+			<div class="collection_closeIcon left" @click.stop="cancelDsign()">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
+			<div class="collection_closeIcon" @click.stop="download()">
+				<i class="fi fi-rr-down-to-line"></i>
+			</div>
+		</div>
+		<div class="newScaleImage_page">
+			<div class="newScaleImage_content">
+				<div class="newScaleImage_content_right">
+					<div class="newScaleImage_content_right_img">
+						<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
+						<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
+						<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
+					</div>
+					<div class="nav_centent" v-mousewheel="{allLength:scaleImageList.length}" :style="{'margin-top':scaleImageMarginTop}">
+						<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :title="scaleImageIndex" :src="item?.imgUrl" :key="item.id">
+					</div>
+				</div>
+				<div class="newScaleImage_content_left">
+					<div class="newScaleImage_content_left_type">
+						<div class="generate_item_title_left scaleImage_chunk_title">类型：collection/generate</div>
+					</div>
+					<!-- <div class="newScaleImage_content_left_collection">
+
+					</div> -->
+					<div class="newScaleImage_content_left_generate">
+						<div v-show="true" class="scaleImage_chunk_item content_left_generate_item">
+							<div class="content_left_generate_item_title">
+								<div class="scaleImage_chunk_title">模型：123123</div>
+								<div class="generate_item_title_right">
+									<img class="generate_item_title_right_img" v-lazy="'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad'" alt="">
+								</div>
+							</div>
+						</div>
+						<div class="scaleImage_chunk_item content_left_generate_item content_left_generate_describe">
+							<div class="content_left_generate_item_title">
+								<div class="scaleImage_chunk_title">describe</div>
+								<div class="generate_item_title_right">
+									<span class="scaleImage_chunk_btn" @click="setCopy">copy</span>
+								</div>
+							</div>
+							<textarea ref="textarea" :value="generateValue"></textarea>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="newScaleImage_detail">
+				<div class="newScaleImage_detail_left">
+					<div>comment</div>
+					<div>
+						
+					</div>
+				</div>
+				<div class="newScaleImage_detail_right">
+					<div class="scaleImage_chunk_item">
+						<div class="detail_right_user detail_right_item">
+							<div class="detail_right_user_head">
+								<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
+							</div>
+							<div class="detail_right_user_content">
+								<div class="scaleImage_chunk_title">名字</div>
+								<div class="detail_right_user_content_intro">个性签名</div>
+								<div class="scaleImage_chunk_btn">关注</div>
+							</div>
+						</div>
+						<div class="detail_right_operation detail_right_item">
+							<div>like</div>
+							<div>收藏</div>
+						</div>
+						<div class="detail_right_look_operation detail_right_item">
+							<div>
+								<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
+									<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+								</svg>
+								<span>321</span>
+							</div>
+							<div>
+								<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
+									<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
+									<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
+								</svg>
+								<span>321</span>
+							</div>
+							<div>
+								<i class="fi fi-rr-comment-alt-dots"></i>
+								<span>321</span>
+							</div>
+						</div>
+						<div class="detail_right_auther detail_right_item">
+							<div class="scaleImage_chunk_title">Auther Other Products</div>
+							<div class="detail_right_auther_img">
+								<div class="detail_right_auther_img_item">
+									<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
+								</div>
+								<div class="detail_right_auther_img_item">
+									<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
+								</div>
+								<div class="detail_right_auther_img_item">
+									<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
+								</div>
+								<div class="detail_right_auther_img_item">
+									<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
+								</div>
+								<div class="detail_right_auther_img_item detail_right_auther_img_end">
+									<span>more +</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
+// import { Https } from "@/tool/https";
+// import { getCookie } from "@/tool/cookie";
+// import domTurnImg from '@/tool/domTurnImg'
+import { downloadIamge } from "@/tool/util";
+
+export default defineComponent({
+    setup() {
+        let scaleImage: any = ref(false);//弹窗
+		let scaleImageMask:any = ref(false)//弹窗遮罩
+		let imgData:any = reactive({
+			generateValue:'123123',
+			loadingShow:false,
+			scaleImageMarginTop:0,
+			scaleImageList:[],
+			scaleImageIndex:0,//当前图片索引
+		})
+		let textarea: any = ref(null)
+		let setCopy = ()=>{
+			textarea.value.select()
+			document.execCommand("copy");
+		}
+		let init = (list:any,index:any,dialogueIndex:any)=>{
+			console.log(213123);
+			
+			scaleImage.value = true
+			imgData.scaleImageList = list
+			imgData.scaleImageIndex = index
+			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
+		}
+		let cancelDsign = ()=>{
+			scaleImage.value = false
+			imgData.scaleImageList = []
+			imgData.scaleImageIndex = 0
+		}
+		let download = ()=>{
+			downloadIamge(imgData.scaleImageList[imgData.scaleImageIndex].imgUrl)
+		}
+		let setScaleImageIndex = (index:any)=>{
+			imgData.scaleImageIndex = index
+		}
+		let LikeFile = (item:any,str:string)=>{
+			const currentInstance = getCurrentInstance();
+			let parent:any = currentInstance?.parent
+			console.log(parent);
+			
+			parent.likeFile(item,str)
+		}
+	
+		// LikeFile(item:any,str:string){
+		// 	let parent:any = this.$parent
+		// 	parent.likeFile(item,str)
+		// },
+		watch(()=>imgData.scaleImageIndex,
+			(newVal,oldVal)=>{
+				let dom:any = document.querySelector('.newScaleImage_content .nav_centent')
+			if(!dom) return
+			let contentItemHeight = Number(getComputedStyle(dom).getPropertyValue('--snap-size').split('rem')[0]);
+			imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
+			}
+		)
+        return {
+            scaleImage,
+			scaleImageMask,
+			...toRefs(imgData),
+			textarea,
+			setCopy,
+			init,
+			cancelDsign,
+			download,
+			setScaleImageIndex,
+			LikeFile,
+        };
+    },
+	directives:{
+		mousewheel:{
+			mounted (el,binding:any) {
+				// let contentHeight = Number(getComputedStyle(el).getPropertyValue('--content-height').split('rem')[0]);
+				let contentItemHeight = Number(getComputedStyle(el).getPropertyValue('--snap-size').split('rem')[0]);
+				let marginTop = (contentItemHeight*-(binding.instance.scaleImageIndex))-contentItemHeight/2
+				binding.instance.scaleImageMarginTop = `${marginTop}rem`
+				let move = false
+				let parentNode:any = document.querySelector('.newScaleImage_modal .newScaleImage_page')
+				el.addEventListener('mouseenter',(e:WheelEvent)=>{
+					move = true
+					parentNode.style.overflow = 'hidden'
+				})
+				el.addEventListener('mouseleave',(e:WheelEvent)=>{
+					move = false
+					parentNode.style.overflow = 'auto'
+				})
+
+				el.addEventListener('wheel',(e:WheelEvent)=>{
+					if(!move) return
+					marginTop = (contentItemHeight*-(binding.instance.scaleImageIndex))-contentItemHeight/2
+					if(e.deltaY > 0 && marginTop > -(contentItemHeight*(binding.instance.scaleImageList.length) - contentItemHeight/2)){
+						marginTop -= contentItemHeight
+					}else if(e.deltaY < 0 && marginTop < -(contentItemHeight/2)){
+						marginTop += contentItemHeight
+					}
+					binding.instance.scaleImageIndex = Math.round(Math.abs(marginTop/contentItemHeight))-1
+					binding.instance.scaleImageMarginTop = `${marginTop}rem`
+					if(Math.abs(marginTop)>=contentItemHeight*binding.instance.scaleImageList.length-5){
+						// binding.instance.scaleImageList.push(...binding.instance.scaleImageList)
+					}
+				})
+				
+			}
+		},
+	},
+    data() {
+        return {
+            // moodTemplateId: "", //模板id
+			
+        };
+    },
+    mounted() {
+    },
+    methods: {
+		// init(list:any,index:any,dialogueIndex:any){
+			
+		// },
+		// cancelDsign(){
+		// 	this.scaleImage = false
+		// 	// this.scaleImageList = []
+		// 	// this.scaleImageIndex = 0
+		// },
+		// download(){
+		// 	// downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
+		// },
+		// setScaleImageIndex(index:any){
+		// 	// this.scaleImageIndex = index
+		// 	// console.log(this.scaleImageIndex);
+			
+		// },
+		// LikeFile(item:any,str:string){
+		// 	let parent:any = this.$parent
+		// 	parent.likeFile(item,str)
+		// },
+    },
+});
+</script>
+
+<style lang="less">
+.newScaleImage_modal {
+	-moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+	position: relative;
+	border-radius: 1rem;
+	overflow: hidden;
+	.ant-modal-body {
+        padding: 0;
+		// height: calc(65vh - 6.4rem);
+		height: calc(65rem*1.2);
+		// background-color: #181818;
+    }
+	.ant-modal-btn{
+		
+	}
+	.ant-modal-body{
+		padding: 9rem;
+		
+	}
+	.newScaleImage_page{
+		overflow-y: auto;
+		height: 100%;
+		&.newScaleImage_page::-webkit-scrollbar{display: none;}
+	}
+
+	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
+		font-size: 2rem;
+	}
+    .newScaleImage_btn {
+		.collection_closeIcon{
+			position: absolute;
+			top: calc(2rem*1.2);
+			right: calc(2rem*1.2);
+			cursor: pointer;
+			width: calc(4rem*1.2);
+			height: calc(4rem*1.2);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			&.left{
+				left: calc(2rem*1.2);
+			}
+			.fi-rr-cross-small::before{
+				padding: calc(.2rem*1.2);
+				border-radius: 5px;
+				border: solid 2px rgba(0, 0, 0, 0.22);
+				transition: .3s all;
+				color: rgba(0, 0, 0, 0.7);
+			}
+			&.collection_closeIcon:hover .fi-rr-cross-small::before{
+				border: solid 2px rgba(0, 0, 0, 5);
+				color: rgba(0, 0, 0, 1);
+			}
+			.fi-rr-down-to-line{
+				transition: .3s all;
+				color: rgba(0, 0, 0, .5);
+			}
+			.fi-rr-down-to-line:hover{
+				color: rgba(0, 0, 0, 1);
+			}
+		}
+	}
+	--margin: 3rem;
+	--padding: 2rem;
+	--border-color: #c4c4c4;
+	--background-color:#f5f5f5;
+	.scaleImage_chunk_item{
+		background: var(--background-color);
+		padding: var(--padding);
+		border-radius: var(--padding);
+		margin-bottom: var(--margin);
+	}
+	.scaleImage_chunk_btn{
+		padding: .5rem 1rem;
+		border-radius: 4px;
+		border: .2rem solid var(--border-color);
+		background: #fff;
+		cursor: pointer;
+	}
+	.scaleImage_chunk_title{
+		font-size: 2.2rem;
+		font-weight: 600;
+		color: #000;
+	}
+	.newScaleImage_content{
+		width: 100%;
+		display: flex;
+		
+		.newScaleImage_content_right{
+			--content-height: 50rem;
+			display: flex;
+			width: 60%;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			height: var(--content-height);
+			position: relative;
+			overflow: hidden;
+			.newScaleImage_content_right_img{
+				height: 100%;
+				width: 60%;
+				overflow-x: auto;
+				display: flex;
+				img{
+					width: auto;
+					max-width: 100%;
+					height: 100%;
+					object-fit: contain;
+					margin-right: 2rem;
+				}
+				img:last-child{
+				    margin-right: 0;
+				}
+			}
+			--count: 50;
+			--snap-size: 10rem;
+			--offset: 2;
+			.nav_centent{
+				width: auto;
+				display: flex;
+				flex-direction: column;
+				position: absolute;
+				right: 0;
+				padding-top: calc(var(--content-height) / 2);
+				padding-left: 10rem;
+				transition: all .2s;
+			}
+			.nav_centent_img{
+				max-width: calc(var(--snap-size) - 2rem);
+				height: calc(var(--snap-size) - 2rem);
+				object-fit: cover;
+				object-position: 50%,50%;
+				border-radius: calc(1rem*1.2);
+				cursor: pointer;
+				border-radius: 1rem;
+				overflow: hidden;
+				// padding: 1rem;
+				margin: 1rem;
+				flex-shrink: 0;
+				position: relative;
+				transition: all .1s;
+				&.active1{
+					// border: 4px solid rgb(148, 230, 255);
+					transform: scale(1.4) translateX(-30%);
+					z-index: 2;
+				}
+				&.active2{
+					// border: 4px solid rgb(216, 255, 172);
+					transform: scale(1.6) translateX(-60%);
+					z-index: 3;
+				}
+				&.active3{
+					// border: 4px solid rgb(148, 233, 183);
+					transform: scale(1.4) translateX(-30%);
+					z-index: 2;
+				}
+			}
+		}
+		.newScaleImage_content_left{
+			width: 40%;
+			padding: 0 var(--padding);
+			display: flex;
+			flex-direction: column;
+			.generate_item_title_left{
+				font-size: 2.4rem;
+			}
+			.newScaleImage_content_left_type{
+				padding: var(--padding) 0;
+				margin-bottom: var(--margin);
+				border-bottom: .2rem solid var(--border-color);
+			}
+			.newScaleImage_content_left_generate{
+				display: flex;
+				flex-direction: column;
+				flex: 1;
+				.content_left_generate_item{
+					
+					overflow: hidden;
+					.content_left_generate_item_title{
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						
+						.generate_item_title_right{
+						   
+							.generate_item_title_right_img{
+								height: 8rem;
+								width: auto;
+								object-fit: contain;
+							}
+						}
+					}
+				}
+				.content_left_generate_describe{
+					display: flex;
+					flex-direction: column;
+					flex: 1;
+					margin-bottom: 0;
+					textarea{
+						flex: 1;
+						margin-top: var(--padding);
+						width: 100% !important;
+						height: 10rem !important;
+						border-radius: 4px;
+						border: .2rem solid var(--border-color);
+						font-size: 1.8rem;
+						padding: 1rem;
+						color: #575757;
+    					outline: none; /* 清除默认焦点样式 */
+					}
+					textarea:focus{
+						border: .2rem solid var(--border-color);
+    					outline: none; /* 清除默认焦点样式 */
+					}
+				
+				}
+			}
+		}
+	}
+	.newScaleImage_detail{
+		display: flex;
+		margin-top: var(--margin);
+		.newScaleImage_detail_right,.newScaleImage_detail_left{
+			height: auto;
+		}
+		.newScaleImage_detail_left{
+			width: 60%;
+		}
+		.newScaleImage_detail_right{
+			width: 40%;
+			padding: 0 var(--padding);
+			.detail_right_item{
+				margin-bottom: var(--margin);
+			}
+			.detail_right_item:last-child{
+				margin-bottom: 0;
+			}
+			
+			.detail_right_user{
+				display: flex;
+				.detail_right_user_head{
+					border-radius: 50%;
+					overflow: hidden;
+					img{
+						width: 10rem;
+						height: 10rem;
+						object-fit: cover;
+					}
+				}
+				.detail_right_user_content{
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: flex-start;
+					margin-left: var(--margin);
+				
+					.detail_right_user_content_intro,.detail_right_user_content_btn{
+						font-size: 1.6rem;
+					}
+					.detail_right_user_content_intro{
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						color: #6b6b6b;
+					}
+					.detail_right_user_content_btn{
+						border: .2rem solid var(--border-color);
+					}
+				}
+			}
+			.detail_right_operation{
+				display: flex;
+				justify-content: space-evenly;
+			}
+			.detail_right_look_operation{
+				display: flex;
+				justify-content: space-between;
+				>div{
+					display: flex;
+					align-items: center;
+					font-size: 2rem;
+					i{
+						display: flex;
+						font-size: 2rem;
+					}
+					span{
+						margin-left: calc(var(--padding) / 2);
+					}
+				}
+			}
+			.detail_right_auther{
+				.detail_right_auther_img{
+					width: 100%;
+					display: flex;
+					margin-top: var(--padding);
+					--auther_wh: 8rem;
+					.detail_right_auther_img_item{
+						width: var(--auther_wh);
+						height: var(--auther_wh);
+						flex-shrink: 1;
+						margin-right: calc(var(--padding) / 2);
+						// margin-right: var(--padding);
+						border-radius: var(--padding);
+						cursor: pointer;
+						overflow: hidden;
+						img{
+							height: 100%;
+							max-width: 100%;
+							object-fit: cover;
+						}
+					}
+					.detail_right_auther_img_end{
+						margin: 0;
+						line-height: var(--auther_wh);
+						text-align: center;
+						background: #e2e2e2;
+						font-size: 1.8rem;
+						font-weight: 600;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

src/lang/cn.ts

@@ -4,6 +4,7 @@ export default {
 		HOME:'首页',
 		LIBRARY:'收藏',
 		HISTORY:'历史',
+		WORKS:'作品广场',
 		bindEmail:'绑定邮箱',
 		logOff:'退出登录',
 		language:'中文',

src/lang/en.ts

@@ -4,6 +4,7 @@ export default {
 		HOME:'HOME',
 		LIBRARY:'LIBRARY',
 		HISTORY:'HISTORY',
+		WORKS:'WORKS',
 		bindEmail:'bind email',
 		logOff:'log off',
 		language:'English',
@@ -162,8 +163,8 @@ export default {
 		Sketches:'Sketches',
 		Mannequins:'Mannequins',
 		model:'model',
-		jsContent1:'Are you sure to delete the picture?',
+		jsContent1:'Are you sure to delete this picture?',
-		jsContent2:'Are you sure to delete the picture?',
+		jsContent2:'Are you sure to delete this picture?',
 		jsContent3:'You can only upload Image file!',
 		jsContent4:'Image must smaller than 2MB!',
 		jsContent5:'This picture has been uploaded whether to continue uploading？',

src/router/index.ts

@@ -51,6 +51,10 @@ const routes: Array<RouteRecordRaw> = [
 				path:'history',
 				name:'history',
 				component: _import_custom('HomeView/history.vue'),
+			},{
+				path:'works',
+				name:'works',
+				component: _import_custom('HomeView/Works.vue'),
 			},
 		]
 	},

src/tool/flexible.js

@@ -7,12 +7,11 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
         var width = docEl.getBoundingClientRect().width;
         var height = docEl.getBoundingClientRect().height;
         maxWidth = maxWidth || 1920;
-        width > maxWidth && (width = maxWidth);
+		if(width/height>1.98) width = height * 1.98;
         width > maxWidth && (width = maxWidth);
         width < minWidth && (width = minWidth);
         var rem = width * 10 / designWidth;
 		docEl.style.fontSize = rem+'px'
-		// if(height / width > .5)return
         remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
     }
     // if (docEl.firstElementChild) {

src/views/HomeMain.vue

@@ -44,6 +44,9 @@
 				<router-link  :class="['nav_item',$route.name === 'history' ? 'select_nav' : '', ]" :to="`/home/history`">
 					{{$t('Header.HISTORY')}}
 				</router-link>
+				<router-link  :class="['nav_item',$route.name === 'works' ? 'select_nav' : '', ]" :to="`/home/works`">
+					{{$t('Header.WORKS')}}
+				</router-link>
             </nav>
            
 			<div class="homeMain_right">
@@ -442,7 +445,7 @@ export default defineComponent({
             cursor: pointer;
             font-weight: 900;
 			position: relative;
-			&.nav_item:nth-child(3){
+			&.nav_item:last-child{
 				margin: 0;
 			}
 			&.nav_item::before {

src/views/HomeView/HomeView.vue

@@ -385,9 +385,7 @@ export default defineComponent({
 		this.store.dispatch('get_clothingType')
 		//判断账号剩余时间是否太短
 		let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
-		// let text = {
+	
-		// 		str:'Because you are a trial user, some features may be limited,if you need to subscribe, please click -> <a href="https://code-create.com.hk/aida/" target="_blank"><i class="fi fi-br-link-alt"></i></a>',
-		// 	}
 		let text = {
 
 		}

src/views/HomeView/Works.vue

@@ -0,0 +1,341 @@
+<template>
+    <div class="works_page">
+		<div class="modal_title_text">
+			<div>Works</div>
+		</div>
+		<div class="modal_title_text">
+			<div v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">{{ item.name }}</div>
+		</div>
+        <div class="page_content">
+			<div class="page_content_item" v-for="item,index in worksList" :key="item" @click.stop="getImgScale(index)">
+				<div class="page_content_item_img">
+					<img v-lazy="item.imgUrl" alt="">
+					<div class="delete_like_file_block" >
+						<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
+						<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
+					</div>
+				</div>
+				<div class="page_content_item_text">
+					<div class="page_content_item_text_name">
+						{{item.name}}
+					</div>
+					<div class="page_content_item_text_bottom">
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" :style="{color:item.like?'red':'#9e9ea7',fill: 'currentColor'}">
+							<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+						</svg>
+						<span>
+							{{ item.likeNum }}
+						</span>
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
+							<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
+							<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
+						</svg>
+						<span>
+							{{ item.lookNum }}
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<newScaleImage ref="newScaleImage"></newScaleImage>
+        <!-- 蒙层 start-->
+        <div class="mark_loading" v-show="isShowMark">
+            <a-spin size="large" />
+        </div>
+        <!-- 蒙层 end-->
+		<!-- <RobotAssist></RobotAssist> -->
+
+    </div>
+</template>
+<script lang="ts">
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { defineComponent,h ,toRefs,ref,reactive,createVNode,nextTick,provide,computed} from 'vue'
+// import HeaderComponent from "@/component/HomePage/Header.vue";
+// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
+import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import {getUploadUrl,isMoible} from '@/tool/util'
+import { useStore } from "vuex";
+import { Https } from "@/tool/https";
+import { getCookie } from "@/tool/cookie";
+import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
+import { useI18n } from "vue-i18n";
+import { ElCascader } from 'element-plus'
+import { remove } from "jszip";
+export default defineComponent({
+    components: {
+        newScaleImage,
+    },
+    setup() {
+		let filter:any = reactive({
+			worksSelect: 'all',
+			worksType: [
+				{
+					name: '全部',
+					value: 'all'
+				},
+				{
+					name: 'generate',
+					value: 'generate'
+				},
+				{
+					name: 'freehand sketching',
+					value: 'freehandSketching'
+				},
+			],
+			worksList: [
+				{
+					imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
+					name:'bbb',
+					lookNum:'999',
+					likeNum:'123',
+					like: true,
+				},
+				{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
+					name:'bbb',
+					lookNum:'999',
+					likeNum:'123',
+					like: true,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14368520/file/original-253a09d85fc1d5ff83c96c046d535ff7.jpg?resize=450x338&vertical=center',
+					name:'bbb',
+					lookNum:'999',
+					likeNum:'123',
+					like: true,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				},{
+					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					name:'aaa',
+					lookNum:'213',
+					likeNum:'123',
+					like: false,
+				}
+			],
+			isShowMark:false
+		})
+		let newScaleImage:any = ref()
+		let setWorksSelect = (val:any) => {
+			filter.worksSelect = val.value
+		}
+		let likeFile = (item:any,type:string) => {
+		}
+		let getImgScale = (index:any)=>{
+			console.log(newScaleImage.value);
+			newScaleImage.value.scaleImageMask = true
+			newScaleImage.value.init(filter.worksList,index)
+		}
+		let {t} = useI18n()
+        return {
+			...toRefs(filter),
+			newScaleImage,
+			setWorksSelect,
+			likeFile,
+			getImgScale,
+			t,
+        }
+    },
+	data() {
+        return {
+            userInfo: {},
+			indicator: h(LoadingOutlined, {
+                style: {
+                    fontSize: "2.4rem",
+                },
+                spin: true,
+            }),
+            upload: {
+                isPin: 0,
+				gender:'',
+                level1Type: this.selectCode,
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            token: "",
+        };
+    },
+	watch:{
+		sex(newVal,oldVal){
+			this.upload.gender = newVal.value
+		},
+		searchPictureName(newVal,oldVal){
+			// clearTimeout(this.getLibraryListInputTime)
+			// this.getLibraryListInputTime = setTimeout(() => {
+			// 	if(newVal != oldVal){
+			// 		this.currentPage = 1
+			// 	}
+			// }, 500);
+		},
+	},
+    async mounted(){
+	
+    },
+})
+</script>
+<style lang="less">
+.el-icon{
+	font-size: 14px;
+}
+.works_page {
+    width: 100%;
+	overflow: hidden;
+    height: 100%;
+	padding: 0 9rem;
+	// min-width: 1440px;
+	position: relative;
+	.modal_title_text{
+		display: flex;
+		.modal_title_text_assistant{
+			padding: 1rem 3rem;
+			border-radius: 2rem;
+			background: #eee;
+			margin-right: 1rem;
+			cursor: pointer;
+		}
+		.modal_title_text_assistant:last-child{
+			margin-right: 0;
+		}
+		.active{
+			background: #39215b;
+			color: #fff;
+		}
+	}
+    .page_content {
+        position: relative;
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		.page_content_item{
+			display: flex;
+			flex-direction: column;
+			margin-right: 3rem;
+			margin-bottom: 3rem;
+		}
+		.page_content_item_text,.page_content_item_img{
+			display: flex;
+		}
+		.page_content_item_img{
+			width: 25rem;
+			height: 25rem;
+			overflow: hidden;
+			justify-content: center;
+			border-radius: 2rem;
+			position: relative;
+			img{
+				// width: 100%;
+				cursor: pointer;
+				max-height: 100%;
+				object-fit: cover;
+				transform: scale(1.15);
+				transition: all 0.5s;
+			}
+			.delete_like_file_block{
+				cursor: pointer;
+			}
+			&:hover{
+				.delete_like_file_block{
+					display: block;
+				}
+				img{
+					transform: scale(1);
+				}
+			}
+		}
+		.page_content_item_text{
+			justify-content: space-between;
+			align-items: center;
+			>div{
+				font-size: 2rem;
+			}
+			.page_content_item_text_name{
+				width: 30%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			.page_content_item_text_bottom{
+				width: 70%;
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+				>svg{
+					width: 2rem;
+					height: 2rem;
+					margin-right: .5rem;
+					margin-left: 1rem;
+				}
+			}
+		}
+    }
+}
+</style>