fix

2024-12-11 16:26:36 +08:00
parent 5d9dc7b77d
commit a6ae63e7cd
96 changed files with 6163 additions and 9414 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -6,7 +6,8 @@ NODE_ENV = 'development'
 VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 # VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
 # 佩佩
-# VUE_APP_BASE_URL = 'http://192.168.1.4:5567'
+VUE_APP_BASE_URL = 'http://192.168.1.4:5567'
 # 海波
-# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
+# VUE_APP_BASE_URL = 'http://18.167.251.121:15567'
+# VUE_APP_BASE_URL = 'http://192.168.1.6:5567'

--- a/public/image/homeIntroduct/introduct1.png
+++ b/public/image/homeIntroduct/introduct1.png
--- a/public/image/homeIntroduct/introduct2.png
+++ b/public/image/homeIntroduct/introduct2.png
--- a/public/image/homeIntroduct/introduct3.png
+++ b/public/image/homeIntroduct/introduct3.png
--- a/public/image/homeIntroduct/introduct4.png
+++ b/public/image/homeIntroduct/introduct4.png
--- a/public/image/homeIntroduct/introduct5.png
+++ b/public/image/homeIntroduct/introduct5.png
--- a/public/image/homeIntroduct/introduct6.png
+++ b/public/image/homeIntroduct/introduct6.png
--- a/src/assets/images/homePage/home-bg.png
+++ b/src/assets/images/homePage/home-bg.png
--- a/src/assets/images/loginPage/aida_logo_centent.jpg
+++ b/src/assets/images/loginPage/aida_logo_centent.jpg
--- a/src/assets/images/loginPage/aida_logo_centent.png
+++ b/src/assets/images/loginPage/aida_logo_centent.png
--- a/src/assets/images/loginPage/phone.svg
+++ b/src/assets/images/loginPage/phone.svg
@@ -0,0 +1,16 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_262_1244)">
+<circle cx="19" cy="19" r="19" fill="black"/>
+<g clip-path="url(#clip1_262_1244)">
+<path d="M22.3777 20.5705C21.6009 20.5705 21.0096 21.2797 20.3004 21.2797C18.7142 20.3709 17.4199 19.0292 16.568 17.412C16.568 16.6352 17.311 16.3482 17.311 15.47C17.311 14.5917 15.1999 11.3999 14.3386 11.3999C13.4772 11.3999 11.3999 12.9705 11.3999 14.4062C11.3999 18.5946 18.9323 26.5999 23.6613 26.5999C25.2425 26.4478 26.4836 25.1782 26.5999 23.5936C25.5015 22.2123 24.0389 21.1654 22.3777 20.5705Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_262_1244">
+<rect width="38" height="38" fill="white"/>
+</clipPath>
+<clipPath id="clip1_262_1244">
+<rect width="15.2" height="15.2" fill="white" transform="translate(11.3999 11.3999)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/images/loginPage/weiXinIcon.svg
+++ b/src/assets/images/loginPage/weiXinIcon.svg
@@ -0,0 +1,11 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_262_1241)">
+<path d="M12.5565 12.6113C11.8955 12.6113 11.2349 13.0519 11.2349 13.713C11.2349 14.374 11.8955 14.8146 12.5565 14.8146C13.2176 14.8146 13.6582 14.374 13.6582 13.713C13.6582 13.0519 13.2176 12.6113 12.5565 12.6113ZM21.5058 19.0001C21.0653 19.0001 20.6522 19.4681 20.6522 19.8812C20.6522 20.3492 21.0927 20.7623 21.5058 20.7623C22.1664 20.7623 22.6075 20.3218 22.6075 19.8812C22.6075 19.4407 22.1669 19.0001 21.5058 19.0001ZM18.6694 14.8146C19.3305 14.8146 19.7711 14.3466 19.7711 13.713C19.7711 13.0793 19.3305 12.6113 18.6694 12.6113C18.0084 12.6113 17.3478 13.0519 17.3478 13.713C17.3478 14.374 18.0088 14.8146 18.6694 14.8146ZM26.2971 19.0001C25.8565 19.0001 25.4434 19.4681 25.4434 19.8812C25.4434 20.3492 25.884 20.7623 26.2971 20.7623C26.9577 20.7623 27.3987 20.3218 27.3987 19.8812C27.3987 19.4407 26.9581 19.0001 26.2971 19.0001Z" fill="#28C445"/>
+<path d="M19.0002 0C8.50875 0 0 8.50875 0 19.0002C0 29.4917 8.50875 38 19.0002 38C29.4917 38 38 29.4913 38 19.0002C38 8.50921 29.4913 0 19.0002 0ZM15.393 23.8738C14.2913 23.8738 13.4102 23.6538 12.364 23.4058L9.33497 24.948L10.1886 22.2767C8.0133 20.735 6.69162 18.7244 6.69162 16.329C6.69162 12.116 10.6297 8.8116 15.393 8.8116C19.6613 8.8116 23.4337 11.4549 24.1771 15.0073C23.9017 14.9799 23.6263 14.9524 23.3509 14.9524C19.2203 15.0073 15.9712 18.1191 15.9712 21.9743C15.9712 22.6075 16.0815 23.2132 16.2466 23.8194C15.9712 23.8468 15.6684 23.8743 15.393 23.8743V23.8738ZM28.2803 26.9577L28.9409 29.1605L26.573 27.8388C25.7193 28.0589 24.8382 28.2794 23.9571 28.2794C19.799 28.2794 16.522 25.4155 16.522 21.8632C16.4946 18.3387 19.7711 15.4748 23.9017 15.4748C28.0323 15.4748 31.3088 18.3661 31.3088 21.8906C31.3088 23.8733 30.0146 25.6356 28.2798 26.9572L28.2803 26.9577Z" fill="#28C445"/>
+</g>
+<defs>
+<clipPath id="clip0_262_1241">
+<rect width="38" height="38" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
--- a/src/component/Account/account.vue
+++ b/src/component/Account/account.vue
@@ -4,11 +4,29 @@
 			<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
 		</div> -->
 		<div class="account_page_content_box">
+			<div class="content_item_user">
+				<div class="content_item_user_left">
+					<div class="content_item_user_left_detail">
+						<img :src="userInfo?.avatar" alt="">
+					</div>
+					<div class="content_item_user_left_detail">
+						<div class="modal_title_text">
+							<div>{{ cookieUserInfo.userName }}</div>
+							<div class="modal_title_text_assistant"><span>{{$t('account.email')}}: </span>{{ cookieUserInfo?.email }}</div>
+						</div>
+						<div class="content_item_user_left_detail_bottom">
+							<div>
+								<span>{{$t('account.Follow')}}：</span>{{ userInfo?.followeeCount }}
+							</div>
+							<div>
+								<span>{{$t('account.Fans')}}：</span>{{ userInfo?.followerCount }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
 			<div class="account_page_content">
 				<div class="account_page_content_left">
-					<div class="content_left_item">
-						<!-- <div>{{$t('account.personCentered')}}</div> -->
-					</div>
 					<!-- {{ router.path }} -->
 					<router-link class="content_left_item" v-for="item in rootSubmenuKeys" :class="{active: $route.path == item.route}" :to="item.route">
 						<i class="fi" :class="item.icon"></i>
@@ -45,15 +63,19 @@ export default defineComponent({

 		const {t} = useI18n()
        const store = useStore();
+		let userInfo:any= computed(()=>{
+			return store.state.UserHabit.userInfo
+		})
+		let cookieUserInfo = ref(null)
+		if(getCookie('userInfo')){
+			let userInfo:any = getCookie('userInfo')
+			cookieUserInfo.value = JSON.parse(userInfo)
+		}
 		let accountHomeData = reactive({
 			rootSubmenuKeys:[
 				{
-					name:t('account.Home'),
-					route:'/home/account/accountHome',
-					icon:'fi-rr-house-chimney'
-				},{
-					name:t('account.myInformation'),
-					route:'/home/account/accountEdit',
+					name:t('account.frontPage'),
+					route:'/home/account/frontPage',
 					icon:'fi-rr-user'
 				},{
 					name:t('account.Messages'),
@@ -74,6 +96,8 @@ export default defineComponent({
            router.push({path:event.item.route})
        }
        return{
+			userInfo,
+			cookieUserInfo,
           ...toRefs(accountHomeData),
 		   router,
 		   handleClick,
@@ -89,8 +113,11 @@ export default defineComponent({
 <style lang="less" scoped>
 .account_page{
 	height: 100%;
-	overflow-y: auto;
-	padding: 0 9rem;
+	// overflow-y: auto;
+	padding: 0 30rem;
+	padding-top: 10rem;
+	display: flex;
+	overflow: hidden;
 	.account_page_titleImg{
 		img{
 			width: 100%;
@@ -99,43 +126,96 @@ export default defineComponent({
 		}
 	}
 	.account_page_content_box{
-		padding: 5rem 0;
-		.account_page_content{
-			box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-			border: 1px solid #e9eaec;
-			border-radius: 5px;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		.content_item_user{
 			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 7rem;
+			.content_item_user_left{
+				display: flex;
+				.content_item_user_left_detail{
+					> .modal_title_text{
+						margin: 0;
+						> div{
+							margin-bottom: 1rem;
+						}
+					}
+					img{
+						border-radius: 50%;
+						width: 10rem;
+						height: 10rem
+					}
+					.content_item_user_left_detail_bottom{
+						display: flex;
+						font-size: 1.8rem;
+						>div{
+							font-weight: 900;
+							width: 10rem;
+							span{
+								font-weight: 600;
+								color: rgba(0,0,0,.45);
+							}
+						}
+					}
+				}
+				.content_item_user_left_detail:last-child{
+					margin-left: 3rem;
+				}
+			}
+		}
+		.account_page_content{
+			display: flex;
+			flex: 1;
+			overflow: hidden;
 			.account_page_content_left{
-				width: 20%;
+				width: 24rem;
 				text-align: center;
-				background: #fafafa;
-				border-right: 1px solid #e9eaec;
+				margin-right: 10rem;
 			}
 			.account_page_content_right{
-				width: 80%;
+				flex: 1;
+				overflow: hidden;
+				.account_message{
+					height: 100%;
+					:deep(.account_message_body){
+						height: 100%;
+						.ant-tabs-content-holder{
+							flex: 1;
+							
+						}
+						.ant-tabs-content{
+							height: 100%;
+							overflow-y: auto;
+						}
+					}
+				}
 			}
 			.content_left_item{
 				display: flex;
 				align-items: center;
-				justify-content: center;
-				height: 10rem;
+				height: 6rem;
 				color: #232323;
 				div{
 					white-space: nowrap;
 					width: 15rem;
-					color: #232323;
-					text-align-last: justify;
-					font-size: 3rem;
+					color: #999999;
+					// text-align-last: justify;
+					text-align: left;
+					font-size: 2rem;
 				}
 				i{
 					color: #cfcfcf;
-					font-size: 2.5rem;
+					font-size: 2rem;
 					display: flex;
-					margin-right: 2rem;
+					margin: 0 2rem;
 				}
 				&.active{
 					color: #fff;
-					background: #39215b;
+					background: #000;
 					div{
 						color: #fff;
 						font-weight: 900;
@@ -155,10 +235,6 @@ export default defineComponent({
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 2rem 5rem;
-	border-bottom: 1px solid #e9eaec;
-	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-	border: 1px solid #e9eaec;
 	border-radius: 5px;
 	position: sticky;
 	top: 0;
@@ -188,12 +264,9 @@ export default defineComponent({
 	}
 }
 .account_generalMessage_center{
-	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-    border: 1px solid #e9eaec;
+	// box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+    // border: 1px solid #e9eaec;
    border-radius: 5px;
-    padding: 2rem 0;
-	margin-right: 5rem;
-	margin-left: 5rem;
 	.account_generalMessage_item{
 		margin-right: 0;
 		margin-left: 0;
@@ -208,8 +281,6 @@ export default defineComponent({
 	}
 }
 .account_generalMessage_item{
-	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-	border: 1px solid #e9eaec;
 	border-radius: 5px;
 	padding: 5rem 5rem;
 	margin-right: 5rem;
--- a/src/component/Account/accountFollowFans.vue
+++ b/src/component/Account/accountFollowFans.vue
@@ -1,11 +1,11 @@
 <template>
    <div class="account_followFans">
-		<div class="account_followFans_title modal_title_text">
+		<!-- <div class="account_followFans_title modal_title_text">
 			<div class="">
 				{{$t('account.Interact')}}
 			</div>
-			<!-- <div class="account_followFans_title_setting">设置</div> -->
-		</div>
+			<div class="account_followFans_title_setting">设置</div>
+		</div> -->
 		<a-tabs class="account_followFans_body" v-model:activeKey="activeKey" @change="changeTabs">
 			<a-tab-pane v-for="item in messageList" :key="item.key">
 				<follow v-if="item.key == 'follow'" :ref="item.key"></follow>
@@ -141,32 +141,24 @@ export default defineComponent({
 		}
 		:deep(.ant-tabs-nav){
 			padding: 0rem 5rem;
+			&::before{
+			    display: none;
+			}
 			.ant-tabs-nav-wrap{
 				.ant-tabs-tab-btn{
+					color: #000;
 					font-size: 2.4rem;
 				}
-				.ant-tabs-tab-btn:active{
-					color: #39215b;
-				}
 				.ant-tabs-tab-active{
 					.ant-tabs-tab-btn{
-						color: #39215b;
 						font-weight: 900;
 					}
 				}
 			}
-			.ant-tabs-tab:hover{
-				color: #39215b;
-			}
 			.ant-tabs-ink-bar{
-				background: #39215b;
+				background: #000;
 			}
 		}
-		:deep(.ant-tabs-content){
-			height: 80rem;
-			// min-height: 80rem;
-			overflow-y: auto;
-		}
 	}
 }
 </style>
--- a/src/component/Account/accountHome.vue
+++ b/src/component/Account/accountHome.vue
@@ -1,222 +0,0 @@
-<template>
-    <div class="account_home">
-		<div class="account_home_content">
-			<div class="content_item content_item_user">
-				<div class="content_item_user_left">
-					<div class="content_item_user_left_detail">
-						<img :src="userInfo?.avatar" alt="">
-					</div>
-					<div class="content_item_user_left_detail">
-						<div class="modal_title_text">
-							<div>{{ cookieUserInfo.userName }}</div>
-							<div class="modal_title_text_assistant"><span>{{$t('account.email')}}: </span>{{ cookieUserInfo?.email }}</div>
-						</div>
-						<div class="content_item_user_left_detail_bottom">
-							<div>
-								<span>{{$t('account.Follow')}}：</span>{{ userInfo?.followeeCount }}
-							</div>
-							<div>
-								<span>{{$t('account.Fans')}}：</span>{{ userInfo?.followerCount }}
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="content_item_user_right">
-					<div @click="setUserData">{{$t('account.editUser')}}</div>
-				</div>
-			</div>
-			<div class="content_item content_item_task">
-				<!-- <div class="content_item_title">
-					<i>icon</i>
-					<div>每日奖励</div>
-				</div>
-				<div class="content_item_task_max">
-					<div class="content_item_task_item">
-						<div class="content_item_task_item_state">
-							<div class="state_credits">20 Credits</div>
-							<i class="fi fi-br-check"></i>
-						</div>
-						<div class="content_item_task_item_title">
-							每日点赞
-						</div>
-						<div class="content_item_task_item_award">
-							已完成 0 / 10
-						</div>
-					</div>
-					<div class="content_item_task_item active">
-						<div class="content_item_task_item_state">
-							<div class="state_credits">20 Credits</div>
-							<i class="fi fi-br-check"></i>
-						</div>
-						<div class="content_item_task_item_title">
-							每日发布作品
-						</div>
-						<div class="content_item_task_item_award">
-							20 Credits 到手
-						</div>
-					</div>
-				</div> -->
-			</div>
-		</div>
-    </div>
-</template>
-<script lang="ts">
-import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
-import { Https } from "@/tool/https";
-import { useRouter,useRoute } from 'vue-router'
-import { Modal,message } from 'ant-design-vue';
-import { useStore } from "vuex";
-import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
-import { useI18n } from 'vue-i18n'
-export default defineComponent({
-    components:{
-    },
-    setup() {
-		const router = useRouter()
-        const store = useStore();
-		let userInfo:any= computed(()=>{
-			return store.state.UserHabit.userInfo
-		})
-		let cookieUserInfo = ref(null)
-		if(getCookie('userInfo')){
-			let userInfo:any = getCookie('userInfo')
-			cookieUserInfo.value = JSON.parse(userInfo)
-		}
-		let accountHomeData = reactive({
-		})
-		// provide('exhibitionList',exhibitionList)
-		let setUserData = ()=>{
-			router.push({path:'/home/account/accountEdit'})
-		}
-        return{
-			userInfo,
-			cookieUserInfo,
-           ...toRefs(accountHomeData),
-		   setUserData,
-        }
-    },
-    data(){
-        return{
-            
-        }
-    },
-})
-</script>
-<style lang="less" scoped>
-.account_home{
-	width: 100%;
-	.account_home_content{
-		.content_item{
-			padding: 8rem 5rem;	
-			border-bottom: 1px solid #e9eaec;
-			.content_item_title{
-				display: flex;
-				align-items: center;
-				i{
-					margin-right: 1rem;
-				}
-			}
-		}
-		.content_item:last-child{
-			border-bottom: none;
-		}
-		.content_item_user{
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			.content_item_user_left{
-				display: flex;
-				.content_item_user_left_detail{
-					img{
-						border-radius: 50%;
-						width: 10rem;
-						height: 10rem
-					}
-					.content_item_user_left_detail_bottom{
-						display: flex;
-						font-size: 1.8rem;
-						>div{
-							font-weight: 900;
-							width: 10rem;
-							span{
-								font-weight: 600;
-								color: rgba(0,0,0,.45);
-							}
-						}
-					}
-				}
-				.content_item_user_left_detail:last-child{
-					margin-left: 4rem;
-				}
-			}
-			.content_item_user_right{
-				border: 1px solid #e9eaec;
-				color: #6f767f;
-				font-size: 1.8rem;
-				cursor: pointer;
-				display: flex;
-				padding: 0 1rem;
-				border-radius: 4px;
-			}
-		}
-		.content_item_task{
-			.content_item_task_max{
-				display: flex;
-				margin-top: 4rem;
-			}
-			.content_item_task_item{
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				width: 25%;
-				.content_item_task_item_state{
-					width: 10rem;
-					height: 10rem;
-					background: linear-gradient(135deg, #cdacfc 50%, #a46ef0 50%) 00px 0;
-					border-radius: 50%;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					.state_credits{
-						font-size: 1.6rem;
-						font-weight: 900;
-						color: #fff;
-					}
-					i{
-						font-size: 3rem;
-						font-weight: 900;
-						display: none;
-						color: #fff;
-					}
-				}
-				.content_item_task_item_title{
-					margin: 2rem 0 ;
-				}
-				.content_item_task_item_award{
-					font-size: 1.8rem;
-					background: #fff;
-					border-radius: 4px;
-					padding: 0 1rem;
-					color: #99a2aa;
-				}
-				&.active{
-					.content_item_task_item_state{
-						background: linear-gradient(135deg, #4ddda8 50%, #3bcd98 50%) 00px 0;
-						.state_credits{
-							display: none;
-						}
-						i{
-							display: flex;
-						}
-					}
-					.content_item_task_item_award{
-						background: #8a95a8;
-						color: #fff;
-					}
-						
-				}
-			}
-		}
-	}
-}
-</style>
--- a/src/component/Account/accountMessage.vue
+++ b/src/component/Account/accountMessage.vue
@@ -1,11 +1,5 @@
 <template>
    <div class="account_message">
-		<div class="account_message_title modal_title_text">
-			<div class="">
-				{{$t('account.Messages')}}
-			</div>
-			<!-- <div class="account_message_title_setting">设置</div> -->
-		</div>
 		<a-tabs class="account_message_body" v-model:activeKey="activeKey" @change="changeTabs">
 			<a-tab-pane v-for="item in messageList" :key="item.key">
 				<system v-if="item.key == 'system'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></system>
@@ -181,16 +175,6 @@ export default defineComponent({
 <style lang="less" scoped>
 .account_message{
 	width: 100%;
-	.account_message_title{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 2rem 5rem;
-		border-bottom: 1px solid #e9eaec;
-		.account_message_title_setting{
-			cursor: pointer;
-		}
-	}
 	.account_message_body{
 		padding-bottom: 3rem;
 		:deep(.ant-badge){
@@ -198,32 +182,24 @@ export default defineComponent({
 		}
 		:deep(.ant-tabs-nav){
 			padding: 0rem 5rem;
+			&::before{
+			    display: none;
+			}
 			.ant-tabs-nav-wrap{
 				.ant-tabs-tab-btn{
 					font-size: 2.4rem;
 				}
-				.ant-tabs-tab-btn:active{
-					color: #39215b;
-				}
 				.ant-tabs-tab-active{
 					.ant-tabs-tab-btn{
-						color: #39215b;
 						font-weight: 900;
 					}
 				}
 			}
-			.ant-tabs-tab:hover{
-				color: #39215b;
-			}
 			.ant-tabs-ink-bar{
-				background: #39215b;
+				background: #000;
 			}
 		}
-		:deep(.ant-tabs-content){
-			height: 80rem;
-			// min-height: 80rem;
-			overflow-y: auto;
-		}
+		
 	}
 }
 </style>
--- a/src/component/Account/followFans/fans.vue
+++ b/src/component/Account/followFans/fans.vue
@@ -2,10 +2,8 @@
    <div class="account_fans">
 		<div class="account_generalMessage_title modal_title_text">
 			<span class="account_generalMessage_title_seach">
-				<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
-				<div class="search_icon_block" @click="searchFollowFansList">
-					<i class="icon iconfont icon-sousuo"></i>
-				</div>
+				<input class="gallery_input" type="text" :placeholder="$t('LibraryPage.jsContent7')" @keydown.enter="searchFollowFansList" v-model="getListData.seachContent">
+				<div class="gallery_btn" style="margin-left: 2rem;" @click="searchFollowFansList">Search</div>
 			</span>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">
--- a/src/component/Account/followFans/follow.vue
+++ b/src/component/Account/followFans/follow.vue
@@ -1,11 +1,15 @@
 <template>
    <div class="account_follow">
 		<div class="account_generalMessage_title modal_title_text">
-			<span class="account_generalMessage_title_seach">
+			<!-- <span class="account_generalMessage_title_seach">
 				<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
 				<div class="search_icon_block" @click="searchFollowFansList">
 					<i class="icon iconfont icon-sousuo"></i>
 				</div>
+			</span> -->
+			<span class="account_generalMessage_title_seach">
+				<input class="gallery_input" type="text" :placeholder="$t('LibraryPage.jsContent7')" @keydown.enter="searchFollowFansList" v-model="getListData.seachContent">
+				<div class="gallery_btn" style="margin-left: 2rem;" @click="searchFollowFansList">Search</div>
 			</span>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">
--- a/src/component/Account/frontPage.vue
+++ b/src/component/Account/frontPage.vue
@@ -0,0 +1,166 @@
+<template>
+    <div class="account_frontPage">
+		<a-tabs class="account_frontPage_body" v-model:activeKey="activeKey" @change="changeTabs">
+			<a-tab-pane v-for="item in frontPageList" :key="item.key">
+				<myInformation v-if="item.key == 'myInformation'" :ref="item.key"></myInformation>
+				<bind v-if="item.key == 'bind'" :ref="item.key"></bind>
+				<cancelRenewal v-if="item.key == 'cancelRenewal'" :ref="item.key"></cancelRenewal>
+				<template #tab>
+					<a-badge :count="0" >
+						<span>{{item.title}}</span>
+					</a-badge>
+				</template>
+			</a-tab-pane>
+		</a-tabs>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useRouter,useRoute } from 'vue-router'
+import { Modal,message } from 'ant-design-vue';
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import myInformation from '@/component/Account/frontPage/mylnformation.vue';
+import bind from '@/component/Account/frontPage/bindPage.vue';
+import cancelRenewal from '@/component/Account/frontPage/cancelRenewal.vue';
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+		myInformation,
+		bind,
+		cancelRenewal,
+    },
+    setup() {
+		const {t} = useI18n()
+		const router = useRouter()
+        const store = useStore();
+		let accountfrontPage = reactive({
+			frontPageList:[
+				{
+					title:t('account.myInfor'),
+					key:'myInformation',
+				},{
+					title:t('account.bindWeChat'),
+					key:'bind',
+				},{
+					title:t('account.cancel'),
+					key:'cancelRenewal',
+				}
+				
+			],
+			activeKey: '',
+		})
+		let domRefs:any = reactive({
+			myInformation:ref(null),
+			bind:ref(null),
+			cancelRenewal:ref(null),
+		})
+		let changeTabs = (key:any)=>{
+			console.log(key);
+			
+			// if(accountfrontPage.activeKey == 'service')return
+		}
+		let setReadStatus = (value:any)=>{
+			return new Promise((resolve,reject)=>{
+				if(value.isRead == 1)return reject('')
+				let data = {
+					type:accountfrontPage.activeKey,
+					notificationIdList:value.id
+				}
+				Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
+					if(rv){
+						resolve(rv)
+						// store.commit('setfrontPageSystem',rv)
+					}
+				}).catch((err)=>{
+					reject(err)
+				})
+			})
+			
+		}
+		let setAllfrontPage = ()=>{
+			return new Promise((resolve,reject)=>{
+				let data = {
+					type:accountfrontPage.activeKey
+				}
+				Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
+					resolve(rv)
+				}).catch((err)=>{
+					reject(err
+					)
+				})
+			})
+		}
+		let getHistory = (data:any)=>{
+			return new Promise((resolve,reject)=>{
+				data.type = accountfrontPage.activeKey
+				let url = Https.httpUrls.getHistoryNotification
+				// if(data.type == 'follow'){
+				// 	url = Https.httpUrls.porfolioGetFollowerList
+				// }
+				Https.axiosPost(url,data).then((rv)=>{
+					if(rv){
+						// domRefs[data.type][0].setfrontPageList(rv,data)
+						resolve(rv)
+					}
+				}).catch((err)=>{
+					reject(err)
+				})
+			})
+		}
+		onMounted(()=>{
+			let key = accountfrontPage.frontPageList[0].key
+			accountfrontPage.activeKey = key
+		})
+        return{
+           ...toRefs(accountfrontPage),
+           ...toRefs(domRefs),
+		   setReadStatus,
+		   changeTabs,
+		   setAllfrontPage,
+		   getHistory,
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.account_frontPage{
+	width: 100%;
+	.account_frontPage_body{
+		padding-bottom: 3rem;
+		:deep(.ant-badge){
+			font-size: var(--aida-fsize2);
+		}
+		:deep(.ant-tabs-tabpane){
+			padding: 0 5rem;
+		}
+		:deep(.ant-tabs-nav){
+			padding: 0rem 5rem;
+			&::before{
+			    display: none;
+			}
+			.ant-tabs-nav-wrap{
+				.ant-tabs-tab-btn{
+					font-size: 2.4rem;
+				}
+				.ant-tabs-tab-active{
+					.ant-tabs-tab-btn{
+						font-weight: 900;
+					}
+				}
+			}
+			.ant-tabs-ink-bar{
+				background: #000;
+			}
+		}
+		
+	}
+}
+</style>
+
--- a/src/component/Account/frontPage/bindPage.vue
+++ b/src/component/Account/frontPage/bindPage.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="bindPage_page">
+		<div class="bindPage_page_body">
+			<div class="bind_item">
+				<div class="title">Bind Wechat</div>
+				<div class="box">
+					<div class="type">
+						<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
+						<div class="text">Unbound</div>
+					</div>
+					<div class="gallery_btn">Bind Now</div>
+				</div>
+			</div>
+			
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+    },
+    setup() {
+        const store = useStore();
+		let userInfo:any= computed(()=>{
+			return store.state.UserHabit.userInfo
+		})
+		let cookieUserInfo = JSON.parse(getCookie('userInfo') as any)
+		let accountHomeData:any = reactive({
+            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
+            uploadUrl:userInfo.value?.avatar,
+			uploadFile:undefined,
+			token:'',
+			fileList:[]
+		})
+        return{
+           ...toRefs(accountHomeData),
+		   userInfo,
+		   cookieUserInfo,
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.bindPage_page{
+	.bindPage_page_body{
+		.bind_item{
+			margin-bottom: 4rem;
+			>.title{
+				font-size: 2rem;
+				margin-bottom: 2rem;
+				font-weight: 600;
+			}
+			>.box{
+				width: 100%;
+				border: 2px solid #000;
+				border-radius: 2rem;
+				padding: 3rem;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				>.type{
+					display: flex;
+					>img{
+						margin-right: 3rem;
+						width: 5rem;
+						height: 5rem;
+					}
+					>.text{
+						display: flex;
+						align-items: center;
+					}
+				}
+				
+			}
+		}
+		.bind_item:last-child{
+		    margin-bottom: 0;
+		}
+	}
+}
+</style>
--- a/src/component/Account/frontPage/cancelRenewal.vue
+++ b/src/component/Account/frontPage/cancelRenewal.vue
@@ -0,0 +1,181 @@
+<template>
+    <div class="cancelRenewal_page">
+		<div class="cancel_box_item">
+			<div class="modal_title_text">
+				<div>Sorry to see you go</div>
+				<div class="modal_title_text_assistant">What is your reason for cancelling AiDA?</div>
+			</div>
+			<a-select class="gallerySelect" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Select a reason" allowClear show-search></a-select>
+			<textarea v-model="searchPictureName" placeholder="Share your feedback here..."></textarea>
+			<div class="button_box">
+				<div class="gallery_btn white gallery_btn_radius" @click="subscribe">Styt subscribed</div>
+				<div class="gallery_btn gallery_btn_radius">Yes, cancel it</div>
+			</div>
+		</div>
+		<div class="cancel_box_item cancel_box_item2">
+			<div class="modal_title_text">
+				<div>You’re about to cancel your subscription</div>
+				<div>
+					<i class="fi fi-sr-circle-xmark"></i>
+					<div class="modal_title_text_assistant">What is your reason for cancelling AiDA?</div>
+				</div>
+				<div>
+					<i class="fi fi-sr-circle-xmark"></i>
+					<div class="modal_title_text_assistant">What is your reason for cancelling AiDA?</div>
+				</div>
+			</div>
+			<div class="tips">
+				<i class="fi fi-sr-triangle-warning"></i>
+				<div>Don’t worry!The data you have in Notion will be 
+					safe.</div>
+			</div>
+			<div class="button_box">
+				<div class="gallery_btn white gallery_btn_radius" @click="subscribe">Styt subscribed</div>
+				<div class="gallery_btn gallery_btn_radius">Yes, cancel it</div>
+			</div>
+		</div>
+		<renew ref="renew"></renew>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useI18n } from 'vue-i18n'
+import renew from "@/component/HomePage/renew.vue";
+export default defineComponent({
+    components:{
+		renew,
+    },
+    setup() {
+        const store = useStore();
+		let userInfo:any= computed(()=>{
+			return store.state.UserHabit.userInfo
+		})
+		let cookieUserInfo = JSON.parse(getCookie('userInfo') as any)
+		let accountHomeData:any = reactive({
+            currentState:{value:'income'}, //裁剪的原始文件数据
+		})
+		let state:any = ref([
+			{
+				label:useI18n().t('allOrder.Income'),
+				value:'income',
+			},
+			{
+				label:useI18n().t('allOrder.Expend'),
+				value:'expend',
+			},
+		])
+		let renew = ref()
+		const subscribe = ()=>{
+			renew.value.init()
+		}
+        return{
+           ...toRefs(accountHomeData),
+		   userInfo,
+		   cookieUserInfo,
+		   state,
+		   renew,
+		   subscribe,
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.cancelRenewal_page{
+	display: flex;
+    justify-content: center;
+	align-items: flex-start;
+	.cancel_box_item{
+		border: 2px solid #000;
+		border-radius: 2rem;
+		padding: 3rem;
+		margin-right: 3rem;
+		width: 48rem;
+		height: 45rem;
+		>.modal_title_text{
+			>div{
+				font-weight: 600;
+			}
+			.modal_title_text_assistant{
+				margin-top: 1rem;
+			}
+		}
+		>.gallerySelect{
+			width: 100%;
+			:deep(.ant-select-selector){
+				border-radius: 1.4rem;
+			}
+		}	
+		>textarea{
+			margin-top: 1.5rem;
+			width: 100%;
+			border-radius: 1.4rem;
+			border: 1px solid #D0D0D0;
+			height: 11rem !important;
+			font-size: 1.6rem;
+			transition: border .3s;
+			padding: 1.5rem;
+		}
+		>textarea:hover{
+			border: 1px solid #000;
+		}
+		>.button_box{
+			display: flex;
+		    justify-content: space-between;
+			margin-top: 2.5rem;
+			>div{
+				width: calc((100% - 1rem) / 2);
+			}
+		}
+	}
+	.cancel_box_item:last-child{
+		margin: 0;
+	}
+	.cancel_box_item2{
+		.modal_title_text{
+			>div:nth-child(1){
+			margin-bottom: 3.4rem;
+			}
+			>div:nth-child(2){
+				margin-bottom: 1.5rem;
+			}
+			>div:nth-child(2),>div:nth-child(3){
+				display: flex;
+				align-items: center;
+				>.modal_title_text_assistant{
+					margin: 0;
+				}
+				>i{
+					margin-right: 1.5rem;
+					display: flex;
+				}
+			}
+		}
+		.tips{
+			padding: 1.5rem 1rem;
+			display: flex;
+			align-items: center;
+			margin-bottom: 3rem;
+			background: #f3f3f6;
+			border-radius: 1.4rem;
+			border: 1px solid #D0D0D0;
+			>i{
+				margin-right: 1.3rem;
+			}
+			>div{
+				font-size: 1.6rem;
+				font-weight: 400;
+			}
+		}
+	
+	}
+}
+</style>
--- a/src/component/Account/frontPage/mylnformation.vue
+++ b/src/component/Account/frontPage/mylnformation.vue
@@ -37,7 +37,7 @@
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
-				<div class="started_btn" @click="setSubmit">
+				<div class="gallery_btn" @click="setSubmit">
 					{{$t('account.Submit')}}
 				</div>
 			</div>
@@ -164,18 +164,14 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .accountEdit_page{
-	padding: 8rem 5rem;	
 	.accountEdit_page_head{
 		display: flex;
 		align-items: center;
-		justify-content: center;
-		width: 20rem;
-		margin: 0 auto;
 		position: relative;
 		img{
-			width: 15rem;
+			width: 10rem;
 			object-fit: contain;
-			height: 15rem;
+			height: 10rem;
 			border-radius: 50%;
 			background: #fff;
 		}
@@ -191,26 +187,31 @@ export default defineComponent({
 		margin-bottom: 5rem;
 	}
 	.accountEdit_page_body{
+		width: 85rem;
 		.accountEdit_page_body_item{
 			display: flex;
 			margin-bottom: 5rem;
+			flex-direction: column;
 			width: 100%;
-			.started_btn{
-				text-align: center;
+			.gallery_btn{
+				margin-left: auto;
 			}
 			input,textarea{
-				padding-left: 2rem;
-				border-radius: 4px;
-				border: 1px solid #dcdfe6;
+				padding-left: 2.7rem;
+				border-radius: 1.6rem;
+				border: 2px solid #D0D0D0;
 				width: 100%;
 			}
+			input{
+				height: 7rem;
+			}
 			.accountEdit_page_body_item_name{
-				color: #606266;
-				width: 14rem;
-				text-align: right;
+				color: #000;
+				text-align: left;
+				font-size: 2rem;
 			}
 			.accountEdit_page_body_item_inut{
-				margin-left: 2rem;
+				margin-top: 1.5rem;
 				flex: 1;
 			}
 		}
--- a/src/component/Account/otherUsers.vue
+++ b/src/component/Account/otherUsers.vue
@@ -114,7 +114,7 @@ export default defineComponent({
 .otherUsers{
 	width: 100%;
 	height: 100%;
-	padding: 0 9rem;
+	padding: 0 6rem;
 	display: flex;
    flex-direction: column;
 	overflow-y: auto;
--- a/src/component/Administrator/allUserPoerations.vue
+++ b/src/component/Administrator/allUserPoerations.vue
@@ -1,19 +1,25 @@
 <template>
+	<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
    <a-modal
        class="allUserPoeration_modal generalModel"
        v-model:visible="operationsModal"
        :footer="null"
+		:get-container="() => $refs.allUserPoerationModal"
        width="50%"
        :maskClosable="false"
        :centered="true"
        :closable="false"
-		:mask="false"
+		:mask="true"
        wrapClassName="#app"
        :keyboard="false"
    >
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<i class="fi fi-rr-cross-small"></i>
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 			</div>
 		</div>
 		<div class="modal_title_text">
@@ -114,18 +120,11 @@
 <script>
 import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
 import { Https } from "@/tool/https";
-import { setCookie, getCookie } from "@/tool/cookie";
 import { Modal, message } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import { formatTime } from "@/tool/util";
-import allOrder from "@/component/Pay/allOrder.vue";
-import creditsDetail from "@/component/Pay/creditsDetail.vue";
-import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
-import { useI18n } from "vue-i18n";
 export default defineComponent({
    components: {
-		creditsDetail,
-		allOrder,
    },
 	emits: ['searchHistoryList'],
    setup(props,{emit}) {
@@ -277,7 +276,7 @@ export default defineComponent({
    },
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .allUserPoeration_modal{
 	.ant-modal-body{
 		height: auto;
--- a/src/component/Administrator/questionnaire.vue
+++ b/src/component/Administrator/questionnaire.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="admin_page">
+    <div class="admin_page" ref="adminPage">
        <div class="admin_table_search">
 			<div class="admin_state">
 				<div class="admin_state_item">
@@ -34,18 +34,25 @@
 			</a-table>
        </div>
 		<a-modal 
-			class="generalModelOperate"
+			class="generalModel"
            v-model:visible="isFeedbackShow" 
            :footer="null" 
+			:get-container="() => $refs.adminPage"
            width="55%"
            :maskClosable="false"
            :centered="true"
 			:keyboard="false"
 			:closable="false"
-			:mask="false"
+			:mask="true"
        >
-			<div class="generalModelOperate_closeIcon" @click.stop="closeModal()">
-				<i class="fi fi-rr-cross-small"></i>
+			<div class="generalModel_btn">
+				<div class="generalModel_closeIcon" @click.stop="closeModal()">
+					<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+				</div>
 			</div>
 			<feedbackSurveyVue ref="feedbackSurveyVue"></feedbackSurveyVue>
 		</a-modal>
@@ -184,7 +191,7 @@ export default defineComponent({
    methods: {},
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .generalModelOperate{
 	// .ant-modal-body{
 	// 	height: calc(65rem*1.2);
--- a/src/component/Canvas/index.vue
+++ b/src/component/Canvas/index.vue
@@ -25,7 +25,7 @@ import {message} from 'ant-design-vue'
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
-import canvasGeneral from "@/tool/canvasGeneral";
+import canvasGeneral from "@/tool/canvasGeneralCopy";
 import tool from "./tool.vue"
 import argument from "./argument.vue"
 import detail from "./detail.vue"
--- a/src/component/Canvas/test.vue
+++ b/src/component/Canvas/test.vue
@@ -1,7 +1,9 @@
 <template>
-    <a-modal class="modal_component collection_modal Guide_1_2" 
+	<div ref="modalTest"></div>
+    <a-modal class="modal_test generalModel" 
 		v-model:visible="testModal" 
 		:footer="null" 
+		:get-container="() => $refs.modalTest"
 		width="78%"
 		:maskClosable="false"
 		:centered="true"
@@ -9,12 +11,15 @@
 		wrapClassName="#app"
 		:keyboard="false"
 	>
-	<div class="collection_closeIcon closeIcon" >
-		<!-- <div class="header_right_block" @click.stop="">
-			<div class="header_cancel_button" >Cancel</div>
-		</div> -->
-		<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
-	</div>
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+			</div>
+		</div>
 		<canvasIndex></canvasIndex>
    </a-modal>
 </template>
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -1,10 +1,11 @@
 <template>
-    <div>
+    <div ref="designDetailModal">
 		<!-- designDetailShow -->
-        <a-modal class="design_detail_modal_component Guide_1_18" 
-		:class="[driver__.driver?'hideEvents':'']"
+		<!-- :class="[driver__.driver?'hideEvents':'']" -->
+        <a-modal class="design_detail_modal_component Guide_1_18 generalModel" 
            v-model:visible="designDetailShow" 
            :footer="null" 
+			:get-container="() => $refs.designDetailModal"
            width="78%"
            :maskClosable="false"
            :centered="true"
@@ -15,8 +16,15 @@
 				<div>{{ $t('DesignDetail.Details') }}</div>
 				<div class="modal_title_text_intro">{{ $t('DesignDetail.EditDetails') }}</div>
 			</div>
-			<div class="design_closeIcon" @click.stop="closeModal('')">
-				<i class="fi fi-rr-cross-small"></i>
+			<div class="generalModel_btn">
+				<div class="generalModel_closeIcon" @click.stop="closeModal('')">
+					<!-- <i class="fi fi-rr-cross-small"></i> -->
+					<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+				</div>
 			</div>
            <div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
            <div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
@@ -153,7 +161,6 @@
                <div class="design_detail_perview_content" >
                    <!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
 					<setDesignItem ref="setDesignItem" :isBody="body" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
-					<!-- <setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> -->
                </div>

            </div>
@@ -171,7 +178,6 @@ import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
 import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
 import setDesignItem from '@/component/Detail/setDesignItem.vue'
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
-import setDesignItemMobile from '@/component/Detail/setDesignItemMobile.vue'
 import Draggable from 'vuedraggable'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
@@ -188,7 +194,6 @@ export default defineComponent({
 		DesignDetailAlter,
 		setDesignItem,
 		magnifyingGlass,
-		setDesignItemMobile,
 		addDetails,
    },
    setup() {
@@ -463,7 +468,6 @@ export default defineComponent({
 					// this.designItemDetail = {}
 					this.frontBack = {}
 					let setDesignItem:any = this.$refs.setDesignItem
-					// let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
 					setDesignItem.clear()
 				}
                
@@ -1165,26 +1169,25 @@ export default defineComponent({
    }
 })
 </script>
-<style lang="less">
-.design_detail_modal_component{
+<style lang="less" scoped>
+:deep(.design_detail_modal_component){
    color: #000;
 	// max-width: 1440px ;
 	.mark_loading{
 		position: absolute;
 	}
-	.ant-modal-content{
-		border-radius: calc(1rem*1.2);
+	>.ant-modal-content{
 		// overflow: hidden; 
 		.ant-modal-header{
 			background-color: #fff;
 			border-bottom: none;
 		}
-		.ant-modal-body{
+		>.ant-modal-body{
 			padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
 			// height: calc(65vh - 6.4rem*1.2));
 			height: calc(65rem*1.2);
 			display: flex;
-			overflow-y: hidden;
+			// overflow-y: hidden;
 			flex-direction: column;
 		}
 	}
@@ -1725,10 +1728,5 @@ export default defineComponent({

   
    
-}
-</style>
-<style lang="less">
-.design_detail_modal_component{
-	
 }
 </style>
--- a/src/component/Detail/DesignDetailEnd.vue
+++ b/src/component/Detail/DesignDetailEnd.vue
@@ -110,7 +110,6 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { Sketch} from '@ans1998/vue3-color'
 import DesignPrintOperation from './DesignPrintOperation.vue';
-import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
 import DesignElementsOperation from './DesignElements.vue';
 import { message,Upload} from 'ant-design-vue';
 import { openGuide,driverObj__ } from "@/tool/guide";
@@ -121,7 +120,7 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 export default defineComponent({
    props: ["msg"],
    components:{
-        Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
+        Draggable,Sketch,DesignPrintOperation,
 		DesignElementsOperation,sketchCategory
    },
    setup(prop) {
@@ -262,7 +261,6 @@ export default defineComponent({
 		setPrint(){
 			// if(this.current?.printObject?.prints?.[0]?.path){
 				let DesignPrintOperation = this.$refs.DesignPrintOperation
-				// let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
 				DesignPrintOperation.init()
 				if(this.driver__.driver){
 					nextTick().then(()=>{
--- a/src/component/Detail/DesignElements.vue
+++ b/src/component/Detail/DesignElements.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div ref="designElementsModal">
 	<a-modal
-            class="designElements_modal"
+            class="designElements_modal generalModel"
            v-model:visible="designElements"
            :footer="null"
+			:get-container="() => $refs.designElementsModal"
            width="78%"
            :maskClosable="false"
            :centered="true"
@@ -15,8 +16,15 @@
 				<div class="design_title_text">
 					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
 				</div>
-				<div class="design_closeIcon" @click.stop="closeModal()">
-					<i class="fi fi-rr-cross-small"></i>
+				<div class="generalModel_btn">
+					<div class="generalModel_closeIcon" @click.stop="closeModal()">
+						<!-- <i class="fi fi-rr-cross-small"></i> -->
+						<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+							<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+							<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+						</svg>
+					</div>
 				</div>
 				<div class="designElements_open">
 					<!--  -->
@@ -678,7 +686,7 @@ export default defineComponent({
 });
 </script>

-<style lang="less">
+<style lang="less" scoped>
 .designElements_modal {
 	// max-width: 1440px;
 	user-select: none; /* 对现代浏览器有效 */
--- a/src/component/Detail/DesignElementsMobile.vue
+++ b/src/component/Detail/DesignElementsMobile.vue
@@ -1,925 +0,0 @@
-<template>
-  <div>
-	<a-modal
-            class="designElementsMobile_modal"
-            v-model:visible="designElements"
-            :footer="null"
-            width="78%"
-            :maskClosable="false"
-            :centered="true"
-            :closable="false"
-			:keyboard="false"
-            :mask="true"
-        >
-            <div class="designElementsMobile_content">
-				<div class="design_title_text">
-					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
-				</div>
-				<div class="design_closeIcon" @click.stop="closeModal()">
-					<i class="fi fi-rr-cross-small"></i>
-				</div>
-				<div class="designElementsMobile_open">
-					<!--  -->
-					<div class="print_right">
-						<div class="print_right show_print_right ">
-							<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
-							<div class="designElementsMobile_nav">
-								<div class="designElementsMobile_single" v-for="item,index in designElementsList" :key="item">
-									<img :src="item.path" @click="setpitch(item,index)">
-								</div>
-								<div class="designElementsMobile_single" v-for="item,index in designSelectElementsList" :key="item">
-									<img :src="item.path" @click="setpitch(item,index)">
-								</div>
-							</div>
-							<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
-							<div class="subitOkPreviewBtn  _1"  @click.stop="setOK">OK</div>
-						</div>
-					</div>
-				</div>
-				<div class="designElementsMobile_centent" id="designElementsCentent">
-					<div class="designElementsMobile_imgMask">
-						<div class="designElementsMobile_print">
-							<div 
-								v-for="item,index in exhibitionElementsList" 
-								:key="item"
-								:style="[printStyleList?.[index]?.style]" 
-								@touchstart.passive="itemMoveMousedown(index,$event)"
-								class="modal_imgItem" 
-								ref="content" >
-								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false"> 
-							</div>
-						</div>
-						<!-- <img :src="current?.path" alt="" class="designElementsMobile_sketch"> -->
-						<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElementsMobile_sketch">
-						<div class="designElementsMobile_btn">
-							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
-								<li class="designElementsMobile_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
-								<li class="designElementsMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
-								<li class="designElementsMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
-								<li class="designElementsMobile_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
-								<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
-								<li class="designElementsMobile_delete" @click="deletePrint">
-									<img src="../../assets/images/homePage/cuowu.svg" alt="">
-								</li>
-							</ul>
-							<div></div>
-						</div>
-					</div>
-				</div>
-				<div class="designElementsMobile_right">
-					<div class="designElementsMobile_entirety_img">
-						<img :src="currentFullBodyView" alt="">
-					</div>
-				</div>
-            </div>
-			<div class="mark_loading" v-show="loadingShow">
-				<a-spin size="large" />
-        </div>
-        </a-modal>
-  </div>
-</template>
-
-<script >
-import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
-// import { LoadingOutlined } from "@ant-design/icons-vue";
-import { useStore } from "vuex";
-import { openGuide,driverObj__ } from "@/tool/guide";
-import { Https } from "@/tool/https";
-import { Modal,message } from 'ant-design-vue';
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { useI18n } from "vue-i18n";
-export default defineComponent({
-	
-    setup(prop) {
-        let designElements = ref(false);
-		let designSelectElementsList = ref([])//新增的元素
-		let designElementsList = ref([])//已经存在的元素
-		let exhibitionElementsList = ref([])//展示的元素
-		let setOkData = ref([])
-		let current = inject('current')//父组件传过来的数据
-		let driver__ = inject('driver__')
-        let setRevocation = inject('setRevocation')//父组件传过来的数据
-		let printZIndex = ref(2)//印花优先级
-        let printStyleList = ref([]);
-		let currentPrintStyleList = {
-			centers:{
-				left:0,
-				top:0,
-			},
-			style:{
-				left:0+"px",
-				top:0+"px",
-				right:"auto",
-				bottom:"auto",
-				width:'auto',
-				height:'auto',
-				zIndex:1,
-			},
-			transform:{
-				scale:1,
-				rotateZ:0,
-			},
-			designElementsBtn:false
-		}
-		let direction = ref('')
-		let imgDom = ref()
-		let imgDomIndex = ref(0)
-		let print = ref({
-			width:'',
-			height:''
-		})
-		let sketch = ref({
-			width:'',
-			height:''
-		})
-		let loadingShow = ref(false)
-		let currentFullBodyView = ref('')
-		let designItemDetailTS = ref({})
-		let body = ref(false)
-		let {t} = useI18n()
-        return {
-            designElements,
-			designSelectElementsList,
-			designElementsList,
-			exhibitionElementsList,
-			setOkData,
-			current,
-			driver__,
-			printZIndex,
-            printStyleList,
-			currentPrintStyleList,
-			direction,//判断点击的是li那个边
-			imgDom,
-			imgDomIndex,
-			print,
-			sketch,
-			loadingShow,
-			setRevocation,
-			t,
-			currentFullBodyView,
-			designItemDetailTS,
-			body,
-        };
-    },
-    data() {
-        return {
-            store: useStore(),
-        };
-    },
-
-	directives:{
-		//操作旋转
-		rotote:{
-			mounted(el,value){
-				
-				el.addEventListener('touchstart', (e) => {
-				let elParent = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
-				let mouse = true;
-				let angle  = 0
-				let num = 1
-				let x = 0
-				let y = 0
-				num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
-				angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
-				// 添加鼠标按下事件监听器
-				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
-				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
-				// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-					e.stopPropagation()
-					mouse = true;
-					var info = el.getBoundingClientRect();
-					let eX = info.x + info.width / 2;
-					let eY = info.y + info.height / 2;
-					let touchmove = (e) => {
-						if (mouse) {
-							let X = eX 
-							let Y = eY
-							let x = e.targetTouches[0].clientX - X
-							let y = Y - e.targetTouches[0].clientY
-							angle = Math.atan2(x,y)*(180 / Math.PI)
-							elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
-							el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
-						}
-					}
-					document.addEventListener('touchmove', touchmove,{passive:true});
-					// 添加鼠标松开事件监听器
-					let touchend = () => {
-						value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
-						mouse = false;
-						document.removeEventListener('touchend',touchend)
-						document.removeEventListener('touchmove',touchmove)
-					}
-					document.addEventListener('touchend', touchend);
-				});
-			}
-
-			},
-	},
-    methods: {
-		init(){
-			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
-			if(designItemDetail.others.length == 0){
-				this.body = true
-			}
-			this.designElements = true
-			this.clearModal()
-			if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
-			if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
-			if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
-			let skecth = new Image
-			skecth.src = this.current.path
-			skecth.onload=()=>{
-				this.sketch.width = skecth.width/10+'rem'
-				this.sketch.height = skecth.height/10+'rem'
-				skecth.remove()
-			}
-			if(this.exhibitionElementsList.length > 0){
-				this.exhibitionElementsList.forEach((item,index)=>{
-					this.setTemplate(item,index)
-				})
-			}else{
-			}
-		},
-		random(){
-			if(this.printStyleList.length == 0)return
-			this.printStyleList.forEach((v,index)=>{
-				this.refetchTemplate(index)
-			})
-		},
-		setPrintWH(url){
-			let print = new Image
-			return new Promise((resolve, reject) => {
-				print.onload=()=>{
-					this.print.width = print.width+'px'
-					this.print.height = print.height+'px'
-					resolve()
-					print.remove()
-				}
-				print.src = url
-			})
-		},
-		async setpitch(item,index){
-			await this.setPrintWH(item.path)
-			this.printStyleList.forEach((v)=>{
-				v.designElementsBtn = false
-			})
-			this.currentPrintStyleList.url = item.url
-			this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
-			let currentIndex = this.printStyleList.length-1
-			this.exhibitionElementsList.push({
-				angle:0,
-				designType:item.designType,
-				minIOPath:item.minIOPath,
-				path:item.path,
-				priority:1,
-				scale:1,
-				location:[0,0]
-			})
-			this.refetchTemplate(currentIndex)
-		},
-		//设置移动
-		itemMoveMousedown(index,event){
-			this.imgDomIndex = index
-			this.printStyleList.forEach((v)=>{
-				v.designElementsBtn = false
-			})
-			this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
-			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
-			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-			this.printStyleList[index].designElementsBtn = true
-			this.printStyleList[index].style.zIndex = this.printZIndex++
-			this.printStyleList[index].transform = {
-				scale:scale,
-				rotateZ:rotateZ?rotateZ:0,
-			}
-			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
-			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
-			this.printStyleList[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
-			this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
-			document.addEventListener("touchend", this.touchend);
-			document.addEventListener("touchmove", this.moveMousemove);
-		},
-		//设置尺寸
-		itemSizeMousedown(direction,event){
-			this.direction = direction
-			this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
-			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
-			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-			this.printStyleList[this.imgDomIndex].designElementsBtn = true
-			this.printStyleList[this.imgDomIndex].transform = {
-				scale:scale,
-				rotateZ:rotateZ?rotateZ:0,
-			}
-			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let li = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_btn_top")[0].offsetWidth/2
-			if(this.direction == 'right' || this.direction == 'bottom'){
-				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
-				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
-			}else{
-				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
-				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
-				this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
-				this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
-			}
-			document.addEventListener("touchend", this.sizeMouseup);
-			document.addEventListener("touchmove", this.sizeMousemove);
-		},
-		//鼠标移动
-		moveMousemove(e) {
-			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let parentNode = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_imgMask")[0]
-			parentNode = parentNode.getBoundingClientRect()
-			let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
-			let y = (  e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
-			this.printStyleList[this.imgDomIndex].style.left = x
-			this.printStyleList[this.imgDomIndex].style.top = y
-			
-		
-		},
-
-		sizeMousemove(e) {
-			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let parentNode =this.imgDom.parentNode
-			let width = imgDomWH.width
-			let height = imgDomWH.height
-			let num = width/height
-			let num1 = height/width
-			let w,h
-			//判断移动四个边
-			if(this.direction == 'right'){
-				w = ( e.changedTouches[0].pageX -imgDomWH.left)
-				h = ( e.changedTouches[0].pageX - imgDomWH.left)*num
-				width = w+'px'
-				height = w*num1+'px'
-			}else if(this.direction == 'top'){
-				this.printStyleList[this.imgDomIndex].style.top = 'auto'
-				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
-				// this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
-				this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
-				w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
-				h = (this.printStyleList[this.imgDomIndex].centers.top -  e.changedTouches[0].pageY)
-				
-				height = h+'px'
-				width = h*num+'px'
-			}else if(this.direction == 'bottom'){
-				h = ( e.changedTouches[0].pageY - imgDomWH.top)
-				height = h+'px'
-				width = h*num+'px'
-			}else if(this.direction == 'left'){
-				this.printStyleList[this.imgDomIndex].style.left = 'auto'
-				this.printStyleList[this.imgDomIndex].style.right = this.printStyleList[this.imgDomIndex].centers.right+'px'
-				w = (this.printStyleList[this.imgDomIndex].centers.left -  e.changedTouches[0].pageX)
-				width = w+'px'
-				height = w*num1+'px'
-			}
-			//判断尺寸是否到边
-			this.printStyleList[this.imgDomIndex].style.width = width
-			this.printStyleList[this.imgDomIndex].style.height = height
-		},
-		//鼠标抬起
-		sizeMouseup(e){
-			this.printStyleList[this.imgDomIndex].style={
-				right:'auto',
-				left:this.imgDom.offsetLeft+'px',
-				bottom:'auto',
-				top:this.imgDom.offsetTop+'px',
-				height:this.imgDom.offsetHeight+'px',
-				width:this.imgDom.offsetWidth+'px',
-				zIndex:this.printZIndex
-			}
-			document.removeEventListener("touchend", this.sizeMouseup);
-			document.removeEventListener("touchmove", this.sizeMousemove);
-		},
-		touchend(e) {
-			document.removeEventListener("touchend", this.touchend);
-			document.removeEventListener("touchmove", this.moveMousemove);
-		},
-		deletePrint(){
-			this.exhibitionElementsList.splice(this.imgDomIndex,1)
-			this.printStyleList.splice(this.imgDomIndex,1)
-		},
-		
-        //随机重置图片顺序
-        refetchTemplate(index) {
-			// let scale = (Math.trunc(Math.random()*15)+1)*.1
-			let rotateZ1 = Math.trunc(Math.random()*360)+1
-			let rotateZ2 = Math.trunc(Math.random()*360)+1
-			let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
-			let width
-			let scale
-			if(sketch.width<sketch.height){
-				width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
-				scale = width / this.print.width.replace(/px/g,'')
-			}else{
-				width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
-				scale = width / this.print.height.replace(/px/g,'')
-			}
-			// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
-			// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
-			let x = sketch?.width - this.print.width.replace(/px/g,'')*scale 
-			let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
-			this.printStyleList[index].style = {
-				left:Math.trunc(Math.random()*x)+1+"px",
-				top:Math.trunc(Math.random()*y)+1+"px",
-				right:"auto",
-				bottom:"auto",
-				width:this.print.width.replace(/px/g,'')*scale+'px',
-				height:this.print.height.replace(/px/g,'')*scale+'px',
-				zIndex:this.printZIndex++
-			}
-			this.printStyleList[index].transform = {
-				rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
-			}
-        },
-		//设置图片
-		async setTemplate(item,index) {
-			await this.setPrintWH(item.path)
-			this.designElementsList
-			let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
-			let sketchImg = new Image()
-			sketchImg.onload = ()=>{
-				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
-				let scale
-				scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
-				let zIndex = 1
-				let left = item.location[0]/sketchNum+'px'
-				let top = item.location[1]/sketchNum+'px'
-				if(sketch.offsetWidth < item.location[0]/sketchNum){
-					left = sketch.offsetWidth +'px'
-				}
-				if(sketch.offsetHeight < item.location[1]/sketchNum){
-					top = sketch.offsetHeight +'px'
-				}
-				this.printStyleList[index]={
-					centers:{
-						left:0,
-						top:0,
-					},
-					style:{
-						left:left,
-						top:top,
-						right:"auto",
-						bottom:"auto",
-						width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
-						height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
-						zIndex:zIndex++
-					},
-					transform:{
-						// scale:scale<.2?.2:scale,//0.2-3
-						rotateZ:item.angle,
-					},
-					designElementsBtn:false
-				}
-				sketchImg.remove()
-			}
-			sketchImg.src = sketch.src
-			
-        },
-		computeZindex(resolve,prints){
-			prints.sort((a, b) => {
-				var a_num = a.priority;
-				var b_num = b.priority;
-				return a_num - b_num;
-			});
-			let num = 1
-			prints.forEach((v)=>{
-				v.priority = num++
-			})
-			resolve(prints)
-			// return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
-		},
-		async computeSize(arr){
-			// let num = this.sketch/
-			return new Promise(async (resolve, reject) => {
-				let arr = JSON.parse(JSON.stringify(this.printStyleList))
-				let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
-				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
-				let prints = []
-				let scale
-				let location
-				for (let index = 0; index < arr.length; index++) {
-					await this.setPrintWH(this.exhibitionElementsList[index].path)
-					scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
-					location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
-					let obj = {
-						angle : arr[index].transform.rotateZ,
-						location : location,
-						priority:arr[index].style.zIndex,
-						scale: scale,
-						designType:this.exhibitionElementsList[index].designType,
-						path:this.exhibitionElementsList[index].path,
-						minIOPath:this.exhibitionElementsList[index].minIOPath,
-					}
-					prints.push(obj)
-				}
-				this.computeZindex(resolve,prints)
-			})
-		},
-		async setPreview(){
-			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			let index 
-			designItemDetail.clothes.forEach((v,ind)=>{
-				if(v.id == this.current.id){
-					index = ind
-				}
-			})
-			// let data = {
-            //     ...designItemDetail,
-            //     priority:priority,
-            //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            // }
-			let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
-			await this.computeSize().then((rv)=>{
-				this.setOkData = rv
-			})
-			data.designSingleItemDTOList[index].trims.prints = this.setOkData
-			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
-			this.loadingShow = true
-			Https.axiosPost(Https.httpUrls.designSingle, data).then(
-				(rv) => {
-					// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
-					this.currentFullBodyView = rv.currentFullBodyView
-					this.designItemDetailTS.rv = rv
-					this.designItemDetailTS.data = data
-					this.loadingShow = false
-					// this.designElements = false
-					if(this.driver__.driver){
-						nextTick().then(()=>{
-							driverObj__.moveNext();
-						})
-					}
-				}
-			).catch(res=>{
-				this.loadingShow = false
-			});
-		},
-		setOK(){
-			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			let index 
-			designItemDetail.clothes.forEach((v,ind)=>{
-				if(v.id == this.current.id){
-					index = ind
-				}
-			})
-			if(this.designItemDetailTS.rv){
-				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
-				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
-				designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
-				designItemDetail.clothes[index].trims.prints = this.setOkData
-				designItemDetail.ifSubmit = true
-				designItemDetail.clothes.forEach((item,i)=>{
-					let a
-					if(item.layersObject[0].imageCategory.indexOf("back") == -1){
-						a = item.layersObject[0]
-						item.layersObject[0] = item.layersObject[1]
-						item.layersObject[1] = a
-					}
-					item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
-					item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
-				})
-				this.store.commit("setDesignItemDetail", designItemDetail);
-				this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
-				this.setRevocation(designItemDetail,this.designItemDetailTS.data)
-				this.designItemDetailTS = {}
-			}
-			this.designElements = false
-			if(this.driver__.driver){
-				driverObj__.moveNext();
-			}
-		},
-		clearModal(){
-			this.designElements = true//modal页面关闭
-			this.printZIndex = 2//点击图片z-index
-			this.imgDomIndex = 0//点击图片下标
-			this.designSelectElementsList = []
-			this.printStyleList = []
-			this.designElementsList = []
-			this.exhibitionElementsList = []
-		},
-		closeModal(){
-            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			let _this = this
-            Modal.confirm({
-                title: this.t('DesignPrintOperation.jsContent1'),
-                icon: createVNode(ExclamationCircleOutlined),
-                okText: 'Yes',
-                cancelText: 'No',
-				mask:false,
-                centered:true,
-                onOk() {
-					_this.designElements=false
-                }
-            });
-		},
-    },
-});
-</script>
-
-<style lang="less">
-.designElementsMobile_modal {
-	// max-width: 1440px;
-	.mark_loading{
-		position: absolute;
-	}
-	.ant-modal-body{
-		padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
-		// height: calc(65vh - 6.4rem*1.2));
-		height: calc(65rem*1.2);
-		display: flex;
-		overflow-y: hidden;
-		flex-direction: column;
-	}
-	.ant-modal-content{
-		border-radius: calc(1rem*1.2);
-		overflow: hidden;
-	}
-
-    .designElementsMobile_content {
-        // background: #f2f3fb;
-        // padding-bottom: 2.9rem*1.2);
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-        .designElementsMobile_header {
-            position: relative;
-            height: calc(6.6rem*1.2);
-            width: 100%;
-            background: #F7F7F7;
-
-            .placement_modal_title{
-                position: absolute;
-                height: 100%;
-                line-height: calc(6.6rem*1.2);
-                left: calc(3.7rem*1.2);
-                top: 0;
-                font-size: calc(1.8rem*1.2);
-                color: #030303;
-            }
-        }
-
-		.designElementsMobile_right{
-			height: calc(50rem*1.2);
-			position: absolute;
-			right: calc(2rem*1.2);
-			left: auto;
-			top: 50%;
-			transform: translateY(-50%);
-			max-height: calc(50rem*1.2);
-			max-width: calc(30rem*1.2);
-			.designElementsMobile_entirety_img{
-				height: 100%;
-				img{
-					max-width: 100%;
-					max-height: 100%;
-					object-fit: contain;
-					position: relative;
-					top: 50%;
-					left: 50%;
-					transform: translate(-50%,-50%);
-				}
-			}
-		}
-		.designElementsMobile_open{
-			position: absolute;
-			top: 50%;
-			transform: translateY(-50%);
-			.print_right{
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				border: 2px solid;
-				padding: calc(2rem*1.2) 0;
-				width: calc(16rem*1.2);
-				border-radius: calc(1rem*1.2);
-				height: calc(40rem*1.2);
-				.button_second{
-					margin: calc(1rem*1.2) 0;
-					width: calc(10rem*1.2);
-					text-align: center;
-					position: initial;
-					transform: none;
-					height: calc(3rem*1.2);
-					line-height: calc(3rem*1.2);
-				}
-				.designElementsMobile_nav{
-					display: flex;
-					margin-top: calc(2rem*1.2);
-					flex-wrap: wrap;
-					width: 100%;
-					height: calc(22rem*1.2);
-					overflow-x: hidden;
-					justify-content: space-evenly;
-					align-content: flex-start;
-					&.designElementsMobile_nav::-webkit-scrollbar {
-						display: none;
-					}
-					.active{
-						img{
-							border: 2px solid;
-							border-radius: 2px;
-							box-sizing: border-box;
-						}
-					}
-					.designElementsMobile_single{
-						width: 40%;
-						margin-bottom: calc(2rem*1.2);
-					}
-					img{
-						width: 100%;
-						cursor: pointer;
-					}
-				}
-				&.show_print_right{
-					border: none;
-					padding: 0;
-					height: 100%;
-				}
-			}
-		}
-		.designElementsMobile_centent{
-			margin: 0 auto;
-			overflow: hidden;
-			justify-content: space-between;
-			position: relative;
-			user-select:none;
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%,-50%);
-			display: flex;
-			&.active{
-				flex-direction: row;
-			}
-			.designElementsMobile_imgMask{
-				width: auto;
-				height: auto;
-				position: relative;
-				>img{
-					z-index: 2;
-					position: relative;
-					// max-width: 100%;
-					// max-height: 100%;
-					// width: 100%;
-					// height: 50rem*1.2);
-					max-height: calc(50rem*1.2);
-					min-height: calc(30rem*1.2);
-					width: auto;
-					max-width: calc(60rem*1.2);
-				}
-				.designElementsMobile_sketch_mask{
-					z-index: 3;
-					position: absolute;
-					inset: 0;
-					width: 100%;
-				}
-				>div{
-					position: absolute;
-					width: 100%;
-					height: 100%;
-					top: 0;
-				}
-			}
-			.designElementsMobile_print{
-				z-index: 3;
-				.modal_imgItem{
-					position: absolute;
-					overflow: hidden;
-					top: 0;
-					img{
-						width: 100%;
-						height: 100%;
-						float: left;
-						user-select:none;
-						-webkit-user-drag: none;
-					}
-				}
-			}
-			.designElementsMobile_btn{
-				z-index: 3;
-				>div{
-					width: 100%;
-					height: 100%;
-					border: 2px solid rgb(20, 188, 255);
-					position: absolute;
-				}
-				ul{
-					list-style: none;
-					// width: 100%;
-					// height: 100%;
-					position: absolute;
-					top: 0;
-					left: 0;
-					box-sizing: border-box;
-					border: 2px solid rgb(20, 188, 255);
-					padding: 0;
-					-webkit-user-drag: none;
-					user-select:none;
-					opacity: 0;
-					margin: 0;
-				
-					&.designElementsMobile_Mouoverall{
-						opacity: 1;
-						border: none;
-						width: calc(1.4rem*1.2);
-						height: calc(1.4rem*1.2);
-						i{
-							display: flex;
-							color: #14bcff;
-						}
-
-					}
-					li{
-						cursor: pointer;
-						// border-radius: 50%;
-						width: calc(2.5rem*1.2);
-						height: calc(2.5rem*1.2);
-						background-color: rgb(20, 188, 255);
-						position: absolute;
-						pointer-events: none;
-					}
-					&.active{
-						opacity: 1;
-						li{
-							pointer-events: auto;
-						}
-					}
-					.designElementsMobile_btn_top,.designElementsMobile_btn_bottom{
-						left: 50%;
-						transform: translate(-50%,-50%) ;
-						cursor: n-resize;
-					}
-					.designElementsMobile_btn_top{
-						top: 0;
-					}
-					.designElementsMobile_btn_bottom{
-						top: 100%;
-					}
-					.designElementsMobile_btn_left,.designElementsMobile_btn_right{
-						top: 50%;
-						transform: translate(-50%,-50%) ;
-						cursor: e-resize;
-					}
-					.designElementsMobile_btn_left{
-						left: 0;
-					}
-					.designElementsMobile_btn_right{
-						left: 100%;
-					}
-					.designElementsMobile_rotote{
-						top: 50%;
-						left: 50%;
-						transform: translate(-50%,-50%);
-						width: 0;
-						height: 0;
-					}
-					.designElementsMobile_delete{
-						position: absolute;
-						top: 0;
-						right: 0;
-						width: 2.5rem;
-						background: none;
-						transform: translate(100%, -100%);
-						height: 2.5rem;
-						img{
-							width: 100%;
-							height: 100%;
-						}
-					}
-					.designElementsMobile_rotote::after{
-						position: absolute;
-						content: "";
-						background-color: #14bcff;
-						width: calc(.2rem*1.2);
-						height: calc(3rem*1.2);
-						left: 50%;
-						bottom: 0;
-						transform: translateX(-50%);
-					}
-					.designElementsMobile_rotote::before{
-						position: absolute;
-						content: "";
-						background-color: #14bcff;
-						top: calc(50% - 3rem*1.2);
-						left: 50%;
-						transform: translate(-50%,-50%) ;
-						width: calc(1.5rem*1.2);
-						height: calc(1.5rem*1.2);
-						border-radius: 50%;
-					}
-				}
-			}
-			
-		}
-		.subitOkPreviewBtn{
-			z-index: 2;
-			margin: calc(1rem*1.2) 0;
-			width: calc(10rem*1.2);
-			text-align: center;
-			position: initial;
-			transform: none;
-		}
-    }
-}
-</style>
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div ref="designOpenrtionModal">
 	<a-modal
-            class="designOpenrtion_modal Guide_1_24"
+            class="designOpenrtion_modal Guide_1_24 generalModel"
 			:class="[driver__.driver?'hideEvents':'']"
            v-model:visible="designOpenrtion"
            :footer="null"
+			:get-container="() => $refs.designOpenrtionModal"
            width="78%"
            :maskClosable="false"
            :centered="true"
@@ -17,8 +18,15 @@
 				<div class="design_title_text">
 					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
 				</div>
-				<div class="design_closeIcon" @click.stop="closeModal()">
-					<i class="fi fi-rr-cross-small"></i>
+				<div class="generalModel_btn">
+					<div class="generalModel_closeIcon" @click.stop="closeModal()">
+						<!-- <i class="fi fi-rr-cross-small"></i> -->
+						<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+							<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+							<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+						</svg>
+					</div>
 				</div>
 				<div class="designOpenrtion_open">
 					<!--  -->
@@ -62,6 +70,7 @@
 							<div v-show="!overallSingle" class="habit_System_Designer">
 								<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
 								<a-slider id="system_silder"
+									class="system_silder"
 									:min="20"
 									:max="1000"
 									v-model:value="systemDesignerPercentage"
@@ -941,7 +950,7 @@ export default defineComponent({
 });
 </script>

-<style lang="less">
+<style lang="less" scoped>
 .designOpenrtion_modal {
 	// max-width: 1440px;
 	user-select: none; /* 对现代浏览器有效 */
--- a/src/component/Detail/DesignPrintOperationMobile.vue
+++ b/src/component/Detail/DesignPrintOperationMobile.vue
--- a/src/component/Detail/addDetails.vue
+++ b/src/component/Detail/addDetails.vue
@@ -1,8 +1,10 @@
 <template>
+	<div class="addDetailsModal" ref="addDetailsModal"></div>
    <a-modal
        class="addDetails_modal generalModel"
        v-model:visible="addDetails"
        :footer="null"
+		:get-container="() => $refs.addDetailsModal"
 		width="78%"
        :maskClosable="false"
        :centered="true"
@@ -13,7 +15,11 @@
    >
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<i class="fi fi-rr-cross-small"></i>
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 			</div>
 		</div>
 		
@@ -69,7 +75,7 @@ export default defineComponent({
    },
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .addDetails_modal {
    .closeIcon {
        z-index: 2;
--- a/src/component/Detail/editFrontBack.vue
+++ b/src/component/Detail/editFrontBack.vue
@@ -27,21 +27,13 @@
 </template>
 <script>
 import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
-import { Https } from "@/tool/https";
 import { formatTime,segmentImage } from "@/tool/util";
-import { setCookie, getCookie } from "@/tool/cookie";
-import { Modal, message } from "ant-design-vue";
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import allOrder from "@/component/Pay/allOrder.vue";
-import creditsDetail from "@/component/Pay/creditsDetail.vue";
 import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
 import { getMousePosition } from "@/tool/mdEvent";
 import { useI18n } from "vue-i18n";
 import canvasGeneral from "@/tool/canvasGeneral";
 export default defineComponent({
    components: {
-		creditsDetail,
-		allOrder,
    },
 	// emits: ['setSloganData'],
 	props:['patchData','imgDomIndex'],
--- a/src/component/Detail/habit.vue
+++ b/src/component/Detail/habit.vue
@@ -95,7 +95,7 @@
 				</div>
            </div>
 			<div class="habit_System_Designer">
-                <a-slider id="system_silder"
+				<a-slider class="system_silder"
                    v-model:value="workspaceItem.systemDesignerPercentage"
                    @afterChange="setSystemDesigner"
 					:tip-formatter="formatter"
@@ -848,15 +848,13 @@ export default defineComponent({
    .habit_button {
 		background-color: #fff;
        border: solid 2px #000;
-        padding: 0px calc(2rem*1.2);
-        box-sizing: initial;
+		border-radius: 4rem;
        font-weight: 600;
-        height: calc(3.2rem*1.2);
-        line-height: calc(3.2rem*1.2);
-        padding: calc(.4rem*1.2) calc(1.5rem*1.2);
-        font-size: calc(1.2rem*1.2);
+        font-size: 1.8rem;
+		padding: 0 1.8rem;
 		cursor: pointer;
 		position: relative;
+		line-height: 6rem;
        .fi-bs-angle-down {
            margin-left: calc(1rem*1.2);
            display: inline-block;
--- a/src/component/Detail/habitSetStyle.vue
+++ b/src/component/Detail/habitSetStyle.vue
@@ -7,14 +7,18 @@
 		:maskClosable="false"
 		:centered="true"
 		:closable="false"
-		:mask="habitSetStyleMask"
+		:mask="true"
 		:keyboard="false"
 		:destroyOnClose="true"
-		:zIndex="1050"
+		:zIndex="1000"
 	>
 	<div class="generalModel_btn">
 		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-			<i class="fi fi-rr-cross-small"></i>
+			<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 		</div>
 	</div>
 	<div class="habitSetStyle_content" v-hoverAnmi>
@@ -213,7 +217,6 @@ methods: {
 .habitSetStyle_modal {
 	&.generalModel{
 		.ant-modal-body {
-			height: calc(55rem*1.2);
 		}
 	}
 	
--- a/src/component/Detail/setDesignItem2.vue
+++ b/src/component/Detail/setDesignItem2.vue
@@ -1,626 +0,0 @@
-<template>
-	<div class="design_compile_content" id="design_compile_content">
-		<div class="designOpenrtion_centent" id="designOpenrtionCentent">
-			<div class="detail_modal_body_title">
-				<div class="detail_modal_body_nav">
-				<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:designShowIndex.value == index}" @click="clothesOpen(item,index)">
-					<img :src="item?.path" alt="">
-				</div>
-			</div>
-			</div>
-			<div class="designOpenrtion_imgMask">
-				<!-- <canvas ref="canvasDom" ></canvas> -->
-			</div>
-			<div class="subitOkPreviewBtn" @click="imgClear">{{ $t('LibraryPage.Reset') }}</div>
-			<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
-		</div>
-		<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
-	</div>
-</template>
-
-<script >
-import { defineComponent, h,reactive, ref ,computed, inject,nextTick, onMounted} from "vue";
-// import { LoadingOutlined } from "@ant-design/icons-vue";
-import { useStore } from "vuex";
-// import { Modal,message } from 'ant-design-vue';
-import { Https } from "@/tool/https";
-export default defineComponent({
-	emits: ['setDesignCoverage', 'setSubmit'],
-    // props: ["frontBack"],
-    setup(prop) {
-        const store = useStore();
-		let designItemDetail = computed(()=>{
-			return store.state.DesignDetailModule.designItemDetail
-		})
-		let current = inject('current')//父组件传过来的数据
-        let setRevocation = inject('setRevocation')//父组件传过来的数据
-		let printZIndex = ref(4)//印花优先级
-        let designShowIndex = reactive({value:-1})
-		let frontBack = reactive({})
-		let frontBackOld = reactive({})
-		let canvasFontBackMove = {
-			back:[],
-			front:[],
-		}
-
-		let setPostition = async (url) =>{
-			let img = await loadImage(url)
-			let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
-			const num = modal_body?.offsetHeight / img.height;
-			function loadImage(url) {
-				return new Promise((resolve, reject) => {
-					const img = new Image();
-					img.onload = () => {
-						resolve(img)
-					};
-					img.onerror = reject;
-					img.src = url;
-				});
-			}
-			return num
-		}
-		let computeZindex = (designItemDetail)=>{
-			let arr = designItemDetail.clothes
-			arr.sort((a, b) => {
-				var a_num = a.priority;
-				var b_num = b.priority;
-				return a_num - b_num;
-			});
-			designItemDetail.clothes = arr
-			return designItemDetail
-		}
-		let setImgSize = async ()=>{
-			let designItemDetail = JSON.parse(JSON.stringify(store.state.DesignDetailModule.designItemDetail))
-			
-			let front = []
-			let back = []
-			let body
-			designItemDetail.others.forEach((item) => {
-				if(item.type == 'Body'){
-					body = item
-				}
-			});
-			let ratio = await setPostition(body.layersObject[0]?.imageUrl)
-			designItemDetail = computeZindex(designItemDetail)
-			designItemDetail.clothes.forEach((v,index)=>{
-				for (let i = v.layersObject.length-1; i >= 0; i--) {
-					v.layersObject[i].style = {
-						top:v.layersObject[i].position?.[0]*ratio+'px',
-						left:v.layersObject[i].position?.[1]*ratio+'px',
-						width:v.layersObject[i].imageSize?.[0]*ratio+'px',
-						height:v.layersObject[i].imageSize?.[1]*ratio+'px',
-					}
-					v.layersObject[i].centers={
-						left:0,
-						top:0,
-					}
-					v.scale = ratio
-					v.layersObject[i].designOpenrtionBtn = false
-					if(v.layersObject[i].imageCategory.indexOf("back") == -1){
-						front[index] = v.layersObject[i]
-						front[index].style.zIndex = v.priority
-						front[index].id = v.id
-					}else{
-						back[index] = v.layersObject[i]
-						back[index].style.zIndex = v.priority
-						back[index].id = v.id
-					}
-					if(printZIndex < v.priority){
-						printZIndex = v.priority
-					}
-				}
-				printZIndex++
-			})
-			let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
-
-			body.style = {
-				width:body.layersObject[0].imageSize?.[0]*ratio+'px',
-				height:body.layersObject[0].imageSize?.[1]*ratio+'px',
-			}
-			frontBack = {
-				front:front,
-				back:back,
-				body:body,
-			}
-			frontBackOld = JSON.parse(JSON.stringify({
-				front:front,
-				back:back,
-				body:body,
-			}))
-			setCanvas(frontBack)
-		}
-		let canvas = reactive({})
-		let setCanvas = (frontBack)=>{
-			let canvasBox = document.querySelector('.design_compile_content .designOpenrtion_imgMask')
-			var canvasDom = document.createElement('canvas')
-			// console.log(canvasBox);
-			canvasBox.innerHTML = ''; // 清空原有内容
-			canvasBox.appendChild(canvasDom);
-			canvas = new fabric.Canvas(canvasDom, {
-				backgroundColor: "rgba(255,255,255,1)",
-				// fill: '#ffde7d',
-				selection: false, //设置多选
-				width: Number(frontBack?.body?.style.width.match(/\d+(\.\d+)?/)[0]),
-				height: Number(frontBack?.body?.style.height.match(/\d+(\.\d+)?/)[0]),
-				isDrawingMode: false, // 开启绘图模式
-			});
-			canvas.clear();
-			canvasFontBackMove = {
-				back:[],
-				front:[],
-			}
-			let fontBackMove = []
-			canvas.on('selection:created', (e)=> {
-				// console.log(canvas.getActiveObject());
-				// // if()
-				// console.log(frontBack.front.find(person => person.id === canvas.getActiveObject().id));
-				// designShowIndex.value = 
-
-			});
-			// selection:updated
-			canvas.on('selection:cleared', ()=>{
-				designShowIndex.value = -1
-			})
-			frontBack.back.forEach((item) => {
-				if(!item.imageUrl){
-					return
-				}
-				fabric.Image.fromURL(item.imageUrl, (img) => {
-					img.set({
-						left: Number(item.style.left.match(/\d+(\.\d+)?/)[0]),
-						top: Number(item.style.top.match(/\d+(\.\d+)?/)[0]),
-						scaleX: Number(item.style.width.match(/\d+(\.\d+)?/)[0])/img.width,
-						scaleY: Number(item.style.height.match(/\d+(\.\d+)?/)[0])/img.height,
-						evented : false,
-						// selectable: false
-					});
-					canvas.add(img);
-					canvasFontBackMove.back.push({id:item.id,img:img})
-				});
-			});
-			fabric.Image.fromURL(frontBack?.body?.layersObject?.[0].imageUrl || '', (img) => {
-                img.set({
-                    left: 0,
-                    top: 0,
-                    // width: Number(frontBack?.body?.style.width.match(/\d+(\.\d+)?/)[0]) * scale,
-                    // height: Number(frontBack?.body?.style.height.match(/\d+(\.\d+)?/)[0]) * scale,
-                    scaleX: Number(frontBack?.body?.style.width.match(/\d+(\.\d+)?/)[0])/img.width,
-                    scaleY: Number(frontBack?.body?.style.height.match(/\d+(\.\d+)?/)[0])/img.height,
-					evented : false,
-					// selectable: false
-                });
-				canvas.add(img);
-            });
-			frontBack.front.forEach((item) => {
-				if(!item.imageUrl){
-					return
-				}
-				fabric.Image.fromURL(item.imageUrl, (img) => {
-					img.set({
-						left: Number(item.style.left.match(/\d+(\.\d+)?/)[0]),
-						top: Number(item.style.top.match(/\d+(\.\d+)?/)[0]),
-						scaleX: Number(item.style.width.match(/\d+(\.\d+)?/)[0])/img.width,
-						scaleY: Number(item.style.height.match(/\d+(\.\d+)?/)[0])/img.height,
-						// selectable: false
-					});
-					img.id = item.id
-					canvas.add(img);
-					canvasFontBackMove.back.forEach((backItem) => {
-						if(backItem && backItem.id == item.id){
-							img.on('moving', function() {
-								// 计算第二个矩形应该移动的距离
-								// 更新第二个矩形的位置
-								backItem.img.set({
-									left: img.left,
-									top: img.top,
-									width: img.width,
-									height: img.height,
-									scaleX: img.scaleX,
-									scaleY: img.scaleY,
-								});
-
-							});
-							img.on('scaling', function(e) {
-								backItem.img.set({
-									left: img.left,
-									top: img.top,
-									width: img.width,
-									height: img.height,
-									scaleX: img.scaleX,
-									scaleY: img.scaleY,
-								});
-							});
-							canvas.renderAll();
-						}
-					})
-					canvasFontBackMove.front.push({id:item.id,img:img})
-				});
-			});
-			var objects = canvas.getObjects();
-
-		}
-		let clothesOpen = (item,index)=>{
-			setpitch(item,index)
-			designShowIndex.value = index
-		}
-		let setpitch = (item,index)=>{
-			canvas.discardActiveObject();
-			// this.designItemDetail.clothes.forEach((item)=>{
-			// 	item.clothesOpen = false
-			// })
-			// this.designItemDetail.clothes[index].clothesOpen = true
-			for (const iterator in canvasFontBackMove) {
-				canvasFontBackMove[iterator].forEach((canvasItem,canvasIndex) => {
-					if(canvasItem.id == item.id){
-						// var rect1Index = canvas.getObjects().indexOf(canvasItem.img);
-						if(iterator == 'front'){
-							canvas.moveTo(canvasItem.img,canvas.getObjects().length)
-							canvas.setActiveObject(canvasItem.img);
-						}else{
-							canvas.moveTo(0)
-							// canvas.moveTo(canvasItem.img,canvasFontBackMove[iterator].length-1)
-						}
-					}
-				});
-			}
-			// canvas.setDepth(object1, canvas.getObjects().indexOf(object2) + 1);
-		}
-		let imgClear = ()=>{
-			frontBack = JSON.parse(JSON.stringify(frontBackOld))
-			setCanvas(frontBack)
-		}
-        return {
-			designItemDetail,
-			current,
-			printZIndex,
-			designShowIndex,
-			frontBack,
-			setRevocation,
-			frontBackOld,
-			canvasFontBackMove,
-			setImgSize,
-			clothesOpen,
-			imgClear,
-        };
-    },
-    data() {
-        return {
-            loadingShow:false,//加载中
-            store: useStore(),
-        };
-    },
-	mounted () {
-		
-	},
-    methods: {
-		init(){
-			this.setImgSize()
-		},
-		
-		//按比设置单件衣服宽高位置
-		async setPostition(url){
-			let img = await loadImage(url)
-			let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
-			const num = modal_body?.offsetHeight / img.height;
-			function loadImage(url) {
-				return new Promise((resolve, reject) => {
-					const img = new Image();
-					img.onload = () => {
-						resolve(img)
-					};
-					img.onerror = reject;
-					img.src = url;
-				});
-			}
-			return num
-		},
-		
-	
-		capitalizeFirstLetter(str) {
-			return str.charAt(0).toUpperCase() + str.slice(1);
-		},
-		setPreviewData(){
-			this.$emit('setSubmit','preview');
-		},
-		deleteBorder(){
-			this.frontBack?.front?.forEach((item)=>{
-				item.designOpenrtionBtn = false
-			})
-		},
-		
-		clothesOpenActive(index){
-			
-		},
-
-
-
-		sort(arr){
-			arr.sort((a, b) => {
-				var a_num = a.style.zIndex;
-				var b_num = b.style.zIndex;
-				return a_num - b_num;
-			});
-			return arr
-		},
-		async setPreview(data){
-			let ratio = this.frontBack.body.layersObject[0].imageSize[0]/this.frontBack.body.style.width.replace(/px/g,'')
-			let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
-			// this.frontBack.back.sort((a, b) => {
-			// 	var a_num = a.style.zIndex;
-			// 	var b_num = b.style.zIndex;
-			// 	return a_num - b_num;
-			// });
-			let arr = this.sort(JSON.parse(JSON.stringify(this.frontBack.front)))
-			
-			let num = 10
-			arr.forEach((item)=>{
-				item.priority = num++
-				item.similarity = false//新增衣服传的是衣服id会存在两件衣服id相同所以设置为false让每次赋值都是不一样的
-			})
-			data.designSingleItemDTOList.forEach((item)=>{
-				let front = arr
-				let imageCategory1
-				if(arr.length > 1){
-					imageCategory1 = arr[1].imageCategory
-				}
-				for (let index = 0; index < arr.length; index++) {
-					if(item.id == arr[index].id && !arr[index].similarity){
-						let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - arr[index]?.position[0])
-						let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - arr[index]?.position[1])
-						let scale = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale)).toFixed(2)):1
-						item.scale = scale
-						let top = y == 0 ? item.offset[1]:y+item.offset[1]
-						let left = x == 0 ? item.offset[0]:x+item.offset[0]
-						item.offset = [left,top]
-						item.priority = arr[index].priority
-						arr[index].similarity = true
-						// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
-						break
-					}
-				}
-				if(arr.length > 1 && item.type == this.capitalizeFirstLetter(imageCategory1)){
-					item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
-				}
-			})
-			// return
-			Https.axiosPost(Https.httpUrls.designSingle, data).then(
-                (rv) => {
-					this.$parent.loadingShow = false
-					let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-					rv.clothes.forEach((i)=>{
-						i.similarity = false//新增衣服传的是衣服id会存在两件衣服id相同所以设置为false让每次赋值都是不一样的
-					})
-					designItemDetail.designItemUrl = rv.designItemUrl
-					designItemDetail.ifSubmit = true
-					designItemDetail.currentFullBodyView = rv.currentFullBodyView
-					designItemDetail.clothes.forEach((item)=>{
-						for (let index = 0; index < rv.clothes.length; index++) {
-							if(rv.clothes[index].id === item.id && !rv.clothes[index].similarity){
-								item.layersObject = rv.clothes[index].layersObject
-								item.priority = rv.clothes[index].layersObject[0].priority
-								rv.clothes[index].similarity = true
-								break
-							}
-						}
-					})
-					this.$emit('setDesignCoverage');
-					this.store.commit("setDesignItemDetail", designItemDetail);
-					this.setRevocation(designItemDetail,data)
-                }
-            ).catch(res=>{ 
-            });
-		},
-    },
-});
-</script>
-
-<style lang="less" scoped>
-.designOpenrtion_modal {
-	// max-width: 1440px;
-	.ant-modal-body{
-		padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
-		// height: calc(65vh - 6.4rem*1.2));
-		height: calc(65rem*1.2);
-		display: flex;
-		overflow-y: hidden;
-		flex-direction: column;
-	}
-	.ant-modal-content{
-		border-radius: calc(1rem*1.2);
-		overflow: hidden;
-	}
-}
-.design_compile_content {
-	// background: #f2f3fb;
-	// padding-bottom: 2.9rem*1.2);
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;	
-	.designOpenrtion_centent{
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		align-content: space-around;
-		flex-wrap: nowrap;
-		margin: 0 auto;
-		overflow: hidden;
-		justify-content: space-between;
-		position: relative;
-		user-select:none;
-		z-index: 2;
-		position: relative;
-		&.active{
-			flex-direction: row;
-		}
-		.designOpenrtion_imgMask{
-			width: auto;
-			height: auto;
-			position: relative;
-			height: 100%;
-			overflow: hidden;
-			margin: 0 auto;
-			>img{
-				z-index: 2;
-				position: relative;
-			}
-			>div{
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				top: 0;
-			}
-		}
-		.detail_modal_body_nav{
-			display: flex;
-			position: relative;
-			top: 0;
-			left: 50%;
-			z-index: 999;
-			transform: translate(-50%,-0%);
-			transition: all .3s;
-			justify-content: center;
-			margin-bottom: calc(1rem*1.2);
-			>div{
-				width: calc(4rem*1.2);
-				height: calc(4rem*1.2);
-				cursor: pointer;
-				text-align: center;
-				margin-left: calc(.3rem*1.2);
-				img{
-					// width: 100%;
-					height: 100%;
-					max-width: 100%;
-					object-fit: cover;
-				}
-				&.active{
-					border: 2px solid rgba(0,0,0,0.4);
-					img{
-						transform: scale(.8);
-						opacity: .8;
-					}
-				}
-			}
-			>div:nth-child(1){
-				margin-left: calc(0rem*1.2);
-			}
-		}
-		.designOpenrtion_print,.detail_modal_item_front{
-			z-index: 1;
-			img{
-				width: 100%;
-				height: 100%;
-				float: left;
-				user-select:none;
-				-webkit-user-drag: none;
-			}
-			.modal_imgItem{
-				position: absolute;
-				overflow: hidden;
-				top: 0;
-				
-			}
-		}
-		.designOpenrtion_print{
-			z-index: 1 !important;
-		}
-		.designOpenrtion_btn{
-			z-index: 9999;
-			ul{
-				list-style: none;
-				// width: 100%;
-				// height: 100%;
-				position: absolute;
-				top: 0;
-				left: 0;
-				box-sizing: border-box;
-				border: 2px solid rgb(20, 188, 255);
-				padding: 0;
-				-webkit-user-drag: none;
-				user-select:none;
-				opacity: 0;
-				margin: 0;
-				
-				li{
-					cursor: pointer;
-					// border-radius: 50%;
-					width: calc(1rem*1.2);
-					height: calc(1rem*1.2);
-					background-color: rgb(20, 188, 255);
-					position: absolute;
-					pointer-events: none;
-				}
-				&.active{
-					opacity: 1;
-					li{
-						pointer-events: auto;
-					}
-				}
-				.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
-					left: 50%;
-					transform: translate(-50%,-50%) ;
-					cursor: n-resize;
-				}
-				.designOpenrtion_btn_top{
-					top: 0;
-				}
-				.designOpenrtion_btn_bottom{
-					top: 100%;
-				}
-				.designOpenrtion_btn_left,.designOpenrtion_btn_right{
-					top: 50%;
-					transform: translate(-50%,-50%) ;
-					cursor: e-resize;
-				}
-				.designOpenrtion_btn_left{
-					left: 0;
-				}
-				.designOpenrtion_btn_right{
-					left: 100%;
-				}
-				.designOpenrtion_rotote{
-					top: 50%;
-					left: 50%;
-					transform: translate(-50%,-50%);
-					width: 0;
-					height: 0;
-				}
-				.designOpenrtion_rotote::after{
-					position: absolute;
-					content: "";
-					background-color: #14bcff;
-					width: 2px;
-					height: 30px;
-					left: 50%;
-					bottom: 0;
-					transform: translateX(-50%);
-				}
-				.designOpenrtion_rotote::before{
-					position: absolute;
-					content: "";
-					background-color: #14bcff;
-					top: calc(50% - 30px);
-					left: 50%;
-					transform: translate(-50%,-50%) ;
-					width: calc(1.5rem*1.2);
-					height: calc(1.5rem*1.2);
-					border-radius: 50%;
-				}
-			}
-		}
-		.subitOkPreviewBtn{
-			z-index: 2;
-			margin-bottom: calc(1rem*1.2);
-			width: calc(10rem*1.2);
-			text-align: center;
-			bottom: 0;
-			position: relative;
-		}
-	}
-	.designOpenrtion_imgMask_open{
-			position: absolute;
-			width: 100%;
-			height: 100%;
-		}
-}
-</style>
--- a/src/component/Detail/setDesignItemMobile.vue
+++ b/src/component/Detail/setDesignItemMobile.vue
@@ -1,685 +0,0 @@
-<template>
-	<div class="design_compile_content" id="design_compile_content">
-		<div class="designOpenrtion_centent" id="designOpenrtionCentent">
-			<div class="detail_modal_body_nav">
-				<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
-					<img :src="item?.path" alt="">
-				</div>
-			</div>
-			<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
-				<!-- <div 
-					v-for="item,index in frontBack.back" 
-					:key="item"
-					:style="item.style" 
-					@touchstart.passive="itemMoveMousedown(index,$event)"
-					class="modal_imgItem" 
-					@click="setpitch(item,index)" ref="content" >
-					<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false"> 
-				</div> -->
-				<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @touchstart.passive="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].style">
-					<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
-				</div>
-				<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'"  v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl">
-				<div class="detail_modal_item_front" v-for="item,index in frontBack.front"  @touchstart.passive="itemMoveMousedown(index,$event)" @click="setpitch(item,index)"  :style="item.style">
-					<img :src="item.imageUrl" alt="">
-				</div>
-				<div class="designOpenrtion_btn">
-					<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
-						<li class="designOpenrtion_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
-						<li class="designOpenrtion_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
-						<li class="designOpenrtion_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
-						<li class="designOpenrtion_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
-						<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
-					</ul>
-				</div>
-			</div>
-			<div class="subitOkPreviewBtn" @click="imgClear">{{ $t('LibraryPage.Reset') }}</div>
-			<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
-		</div>
-		<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
-	</div>
-	
-</template>
-
-<script >
-import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
-import { useStore } from "vuex";
-import { Https } from "@/tool/https";
-export default defineComponent({
-    // props: ["frontBack"],
-	emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
-    setup(prop) {
-        const store = useStore();
-
-		let designItemDetail = computed(()=>{
-			return store.state.DesignDetailModule.designItemDetail
-		})
-		let current = inject('current')//父组件传过来的数据
-        let setRevocation = inject('setRevocation')//父组件传过来的数据
-		let printZIndex = ref(4)//印花优先级
-        let printStyleList = ref([
-			{
-				centers:{
-					left:0,
-					top:0,
-				},
-				style:{
-					left:0+"px",
-					top:0+"px",
-					right:"auto",
-					bottom:"auto",
-					width:100+'px',
-					height:100+'px',
-					// zIndex:1,
-				},
-				transform:{
-					scale:1,
-					rotateZ:0,
-				},
-				designOpenrtionBtn:false
-			}
-		]);
-		let direction = ref('')
-		let imgDom = ref()
-		let imgDomIndex = ref(0)
-		let frontBack = ref({})
-		let frontBackOld = ref({})
-        return {
-			designItemDetail,
-			current,
-			printZIndex,
-            printStyleList,
-			direction,//判断点击的是li那个边
-			imgDom,
-			imgDomIndex,
-			frontBack,
-			setRevocation,
-			frontBackOld
-        };
-    },
-    data() {
-        return {
-            loadingShow:false,//加载中
-            store: useStore(),
-			setImgSizeTimeout:null
-        };
-    },
-	mounted () {
-		window.addEventListener('resize', this.setImgSizeTime);
-	},
-    methods: {
-		init(){
-			let DesignParent = this.$parent
-			// this.clearModal()
-			// console.log(this.current,DesignParent.frontBack);
-			this.printStyleList.push({
-				centers:{
-					left:0,
-					top:0,
-				},
-				style:{
-					left:0+"px",
-					top:0+"px",
-					right:"auto",
-					bottom:"auto",
-					width:100+'px',
-					height:100+'px',
-					// zIndex:1,
-				},
-				transform:{
-					scale:1,
-					rotateZ:0,
-				},
-				designOpenrtionBtn:false
-			})
-			this.setImgSize()
-		},
-		setImgSizeTime(){
-			clearTimeout(this.setImgSizeTimeout)
-			this.setImgSizeTimeout = setTimeout(()=>{
-				this.setImgSize()
-			},300)
-		},
-		async setImgSize(){
-			this.frontBack.body = null
-			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			let front = []
-			let back = []
-			let body
-			
-			designItemDetail.others.forEach((item) => {
-				if(item.type == 'Body'){
-					body = item
-				}
-			});
-			let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
-			let frontIndex = 6
-			let backIndex = 3
-			// let front = 3
-			// let back = 3
-			designItemDetail.clothes.forEach((v,index)=>{
-				for (let i = v.layersObject.length-1; i >= 0; i--) {
-					v.layersObject[i].style = {
-						top:v.layersObject[i].position?.[0]*ratio+'px',
-						left:v.layersObject[i].position?.[1]*ratio+'px',
-						width:v.layersObject[i].imageSize?.[0]*ratio+'px',
-						height:v.layersObject[i].imageSize?.[1]*ratio+'px',
-						// zIndex:zIndex-=1
-					}
-					v.layersObject[i].centers={
-						left:0,
-						top:0,
-					}
-					v.layersObject[i].designOpenrtionBtn = false
-					if(v.layersObject[i].imageCategory.indexOf("back") == -1){
-						front[index] = v.layersObject[i]
-						front[index].style.zIndex = v.priority
-						front[index].id = v.id
-					}else{
-						back[index] = v.layersObject[i]
-						back[index].style.zIndex = v.priority
-						back[index].id = v.id
-
-						// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
-					}
-					if(this.printZIndex < v.priority){
-						this.printZIndex = v.priority
-					}
-				}
-				this.printZIndex++
-			})
-			let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
-
-			body.style = {
-				width:body.layersObject[0].imageSize?.[0]*ratio+'px',
-				height:body.layersObject[0].imageSize?.[1]*ratio+'px',
-			}
-			this.frontBack = {
-				front:front,
-				back:back,
-				body:body,
-			}
-			this.frontBackOld = JSON.parse(JSON.stringify({
-				front:front,
-				back:back,
-				body:body,
-			}))
-		},
-		imgClear(){
-			this.frontBack = JSON.parse(JSON.stringify(this.frontBackOld))
-		},
-		//按比设置单件衣服宽高位置
-		async setPostition(url){
-			let img = await loadImage(url)
-			let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
-			const num = modal_body?.offsetHeight / img.height;
-			function loadImage(url) {
-				return new Promise((resolve, reject) => {
-					const img = new Image();
-					img.onload = () => {
-						resolve(img)
-						img.remove()
-					};
-					img.onerror = reject;
-					img.src = url;
-				});
-			}
-			return num
-		},
-		clear(){
-			window.removeEventListener('resize', this.setImgSizeTime);
-		},
-		setpitch(item,index){
-			this.frontBack.front.forEach((v)=>{
-				v.designOpenrtionBtn = false
-			})
-			this.frontBack.front[index].designOpenrtionBtn = true
-			this.frontBack.front[index].style.zIndex = this.printZIndex++
-			this.frontBack.back[index].style.zIndex = this.printZIndex
-			this.clothesOpenActive(index)
-		},
-		// 设置移动
-		itemMoveMousedown(index,e){
-			this.imgDomIndex = index
-			this.frontBack.front.forEach((v)=>{
-				v.designOpenrtionBtn = false
-			})
-			this.clothesOpenActive(index)
-			let event = e||window.event
-			this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
-			this.frontBack.front[index].designOpenrtionBtn = true
-			this.frontBack.front[index].style.zIndex = this.printZIndex++
-			this.frontBack.back[index].style.zIndex = this.printZIndex
-			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
-			let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
-			this.frontBack.front[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
-			this.frontBack.front[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
-			document.addEventListener("touchend", this.touchend);
-			document.addEventListener("touchmove", this.moveMousemove);
-		},
-		//设置尺寸
-		itemSizeMousedown(direction,event){
-			this.direction = direction
-			this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
-			this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
-			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
-			if(this.direction == 'right' || this.direction == 'bottom'){
-				this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
-				this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
-			}else{
-				this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
-				this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
-				this.frontBack.front[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
-				this.frontBack.front[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
-			}
-			
-			document.addEventListener("touchend", this.sizeMouseup);
-			document.addEventListener("touchmove", this.sizeMousemove);
-		},
-		//鼠标移动
-		moveMousemove(e) {
-			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
-			let x = (e.changedTouches[0].pageX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
-			let y = ( e.changedTouches[0].pageY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
-			this.frontBack.front[this.imgDomIndex].style.left = x
-			this.frontBack.front[this.imgDomIndex].style.top = y
-			// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
-			// 	this.frontBack.front[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
-			// }
-			// if(x.replace(/px/g,'') <= 0){
-			// 	this.frontBack.front[this.imgDomIndex].style.left = 0+'px'
-			// }
-			// if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
-			// 	this.frontBack.front[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
-			// }
-			// if(y.replace(/px/g,'') <= 0){
-			// 	this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
-			// }
-		},
-
-		sizeMousemove(e) {
-			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let parentNode =this.imgDom.parentNode
-			let width = imgDomWH.width
-			let height = imgDomWH.height
-			let w,h
-			let num = height/width
-			//判断移动四个边
-			if(this.direction == 'right'){
-				w = (e.changedTouches[0].pageX -imgDomWH.left)
-				h = (e.changedTouches[0].pageX -imgDomWH.left)*num
-				width = w+'px'
-				// height = w*num+'px'
-			}else if(this.direction == 'top'){
-				num = width/height
-				this.frontBack.front[this.imgDomIndex].style.top = 'auto'
-				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
-				// this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -this.imgDom.offsetHeight - this.imgDom.offsetTop+'px'
-				this.frontBack.front[this.imgDomIndex].style.bottom = this.frontBack.front[this.imgDomIndex].centers.bottom+'px'
-				w = (e.changedTouches[0].pageX -imgDomWH.left)*num
-				h = (this.frontBack.front[this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
-				
-				height = h+'px'
-				// width = h*num+'px'
-			}else if(this.direction == 'bottom'){
-				num = width/height
-				h = (e.changedTouches[0].pageY -imgDomWH.top)
-				height = h+'px'
-				// width = h*num+'px'
-			}else if(this.direction == 'left'){
-				w = (this.frontBack.front[this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
-				this.frontBack.front[this.imgDomIndex].style.left = 'auto'
-				this.frontBack.front[this.imgDomIndex].style.right = this.frontBack.front[this.imgDomIndex].centers.right+'px'
-				width = w+'px'
-				// height = w*num+'px'
-			}
-			//判断尺寸是否到边
-			this.frontBack.front[this.imgDomIndex].style.width = width
-			this.frontBack.front[this.imgDomIndex].style.height = height
-
-		},
-		//鼠标抬起
-		sizeMouseup(e){
-			this.frontBack.front[this.imgDomIndex].style={
-				right:'auto',
-				left:this.imgDom.offsetLeft+'px',
-				bottom:'auto',
-				top:this.imgDom.offsetTop+'px',
-				height:this.imgDom.offsetHeight+'px',
-				width:this.imgDom.offsetWidth+'px',
-				zIndex:this.printZIndex
-			}
-			this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
-			document.removeEventListener("touchend", this.sizeMouseup);
-			document.removeEventListener("touchmove", this.sizeMousemove);
-		},
-		touchend(e) {
-
-			document.removeEventListener("touchend", this.touchend);
-			document.removeEventListener("touchmove", this.moveMousemove);
-		},
-		clearModal(){
-			this.printZIndex = 2//点击图片z-index
-			this.imgDomIndex = 0//点击图片下标
-			this.clothes = []
-			this.printStyleList.splice(1,this.printStyleList.length-1)
-		},
-		capitalizeFirstLetter(str) {
-			return str.charAt(0).toUpperCase() + str.slice(1);
-		},
-		setPreviewData(){
-			this.$emit('setSubmit','preview');
-		},
-		deleteBorder(){
-			this.frontBack?.front?.forEach((item)=>{
-				item.designOpenrtionBtn = false
-			})
-		},
-		clothesOpen(index){
-			this.imgDomIndex = index
-			this.clothesOpenActive(index)
-			this.setpitch('',index)
-		},
-		clothesOpenActive(index){
-			this.designItemDetail.clothes.forEach((item)=>{
-				item.clothesOpen = false
-			})
-			this.designItemDetail.clothes[index].clothesOpen = true
-		},
-		sort(arr){
-			arr.sort((a, b) => {
-				var a_num = a.style.zIndex;
-				var b_num = b.style.zIndex;
-				return a_num - b_num;
-			});
-			return arr
-		},
-		async setPreview(data){
-			let ratio = this.frontBack.body.layersObject[0].imageSize[0]/this.frontBack.body.style.width.replace(/px/g,'')
-			let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
-			// this.frontBack.back.sort((a, b) => {
-			// 	var a_num = a.style.zIndex;
-			// 	var b_num = b.style.zIndex;
-			// 	return a_num - b_num;
-			// });
-			
-			let arr = this.sort(JSON.parse(JSON.stringify(this.frontBack.front)))
-			
-			let num = 10
-			arr.forEach((item)=>{
-				item.priority = num++
-			})
-			data.designSingleItemDTOList.forEach((item)=>{
-				let front = arr
-				let imageCategory1
-				if(arr.length > 1){
-					imageCategory1 = arr[1].imageCategory
-				}
-				arr.forEach((i)=>{
-					if(item.id == i.id){
-						let y = ((i?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - i?.position[0])
-						let x = ((i?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - i?.position[1])
-						// let scale = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale)).toFixed(2)):1
-						let scaleWidth = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale[0])).toFixed(2)):1
-						let scaleHeight = i?.imageSize?Number(((i?.style?.height.replace(/px/g,'')*ratio)/(i?.imageSize[1]/i.scale[1])).toFixed(2)):1
-						item.scale = [scaleWidth,scaleHeight]
-						let top = y == 0 ? item.offset[1]:y+item.offset[1]
-						let left = x == 0 ? item.offset[0]:x+item.offset[0]
-						item.offset = [left,top]
-						item.priority = i.priority
-						// item.offset = [(i?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
-					}
-				})
-				if(arr.length > 1 && item.type == this.capitalizeFirstLetter(imageCategory1)){
-					item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
-				}
-			})
-			Https.axiosPost(Https.httpUrls.designSingle, data).then(
-                (rv) => {
-					let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-					designItemDetail.designItemUrl = rv.designItemUrl
-					designItemDetail.ifSubmit = true
-					designItemDetail.currentFullBodyView = rv.currentFullBodyView
-					rv.clothes.forEach((item)=>{
-						designItemDetail.clothes.forEach((i)=>{
-							if(item.id === i.id){
-								i.layersObject = item.layersObject
-								i.priority = item.layersObject[0].priority
-							}
-						})
-					})
-					this.$emit('setDesignCoverage');
-					this.store.commit("setDesignItemDetail", designItemDetail);
-					this.setRevocation(designItemDetail,data)
-					this.clear()
-                }
-            ).catch(res=>{ 
-				this.$emit('setParentLoadingShow');
-            });
-		},
-    },
-});
-</script>
-
-<style lang="less" scoped>
-.designOpenrtion_modal {
-	// max-width: 1440px;
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	-khtml-user-select: none;
-	user-select: none;
-	.ant-modal-body{
-		padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
-		// height: calc(65vh - 6.calc(4rem*1.2));
-		height: calc(65rem*1.2);
-		display: flex;
-		overflow-y: hidden;
-		flex-direction: column;
-	}
-	.ant-modal-content{
-		border-radius: calc(1rem*1.2);
-		overflow: hidden;
-	}
-}
-.design_compile_content {
-	// background: #f2f3fb;
-	// padding-bottom: 2.calc(9rem*1.2);
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;	
-	.designOpenrtion_centent{
-		// flex: 1;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		align-content: space-around;
-		flex-wrap: nowrap;
-		margin: 0 auto;
-		// overflow: hidden;
-		justify-content: space-between;
-		position: relative;
-		user-select:none;
-		z-index: 2;
-		position: relative;
-		&.active{
-			flex-direction: row;
-		}
-		.designOpenrtion_imgMask{
-			width: auto;
-			height: auto;
-			position: relative;
-			// height: 100%;
-			// overflow: hidden;
-			height: calc(100% - 1.2rem - 4.8rem - 20%);
-			margin: 0 auto;
-			>img{
-				z-index: 2;
-				position: relative;
-			}
-			>div{
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				top: 0;
-			}
-		}
-		.detail_modal_body_nav{
-			display: flex;
-			position: relative;
-			top: 0;
-			left: 50%;
-			z-index: 999;
-			transform: translate(-50%,-0%);
-			transition: all .3s;
-			justify-content: center;
-			margin-bottom: calc(1rem*1.2);
-			>div{
-				width: calc(4rem*1.2);
-				height: calc(4rem*1.2);
-				cursor: pointer;
-				text-align: center;
-				margin-left: calc(.3rem*1.2);
-				img{
-					// width: 100%;
-					height: 100%;
-					max-width: 100%;
-					object-fit: cover;
-				}
-				&.active{
-					border: 2px solid rgba(0,0,0,0.4);
-					img{
-						transform: scale(.8);
-						opacity: .8;
-					}
-				}
-			}
-			>div:nth-child(1){
-				margin-left: calc(0rem*1.2);
-			}
-		}
-		.designOpenrtion_print,.detail_modal_item_front{
-			z-index: 1;
-			img{
-				width: 100%;
-				height: 100%;
-				float: left;
-				user-select:none;
-				-webkit-user-drag: none;
-			}
-			.modal_imgItem{
-				position: absolute;
-				overflow: hidden;
-				top: 0;
-				
-			}
-		}
-		.designOpenrtion_print{
-			z-index: 1 !important;
-		}
-		.designOpenrtion_btn{
-			z-index: 9999;
-			ul{
-				list-style: none;
-				// width: 100%;
-				// height: 100%;
-				position: absolute;
-				top: 0;
-				left: 0;
-				box-sizing: border-box;
-				border: 2px solid rgb(20, 188, 255);
-				padding: 0;
-				-webkit-user-drag: none;
-				user-select:none;
-				opacity: 0;
-				margin: 0;
-				
-				li{
-					cursor: pointer;
-					// border-radius: 50%;
-					width: calc(1.5rem*1.2);
-					height: calc(1.5rem*1.2);
-					padding: calc(1rem*1.2);
-					background-color: rgb(20, 188, 255);
-					position: absolute;
-					pointer-events: none;
-					z-index: 2;
-				}
-				&.active{
-					opacity: 1;
-					li{
-						pointer-events: auto;
-					}
-				}
-				.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
-					left: 50%;
-					transform: translate(-50%,-50%) ;
-					cursor: n-resize;
-				}
-				.designOpenrtion_btn_top{
-					top: 0;
-				}
-				.designOpenrtion_btn_bottom{
-					top: 100%;
-				}
-				.designOpenrtion_btn_left,.designOpenrtion_btn_right{
-					top: 50%;
-					transform: translate(-50%,-50%) ;
-					cursor: e-resize;
-				}
-				.designOpenrtion_btn_left{
-					left: 0;
-				}
-				.designOpenrtion_btn_right{
-					left: 100%;
-				}
-				.designOpenrtion_rotote{
-					top: 50%;
-					left: 50%;
-					transform: translate(-50%,-50%);
-					width: 0;
-					height: 0;
-				}
-				.designOpenrtion_rotote::after{
-					position: absolute;
-					content: "";
-					background-color: #14bcff;
-					width: 2px;
-					height: 30px;
-					left: 50%;
-					bottom: 0;
-					transform: translateX(-50%);
-				}
-				.designOpenrtion_rotote::before{
-					position: absolute;
-					content: "";
-					background-color: #14bcff;
-					top: calc(50% - 30px);
-					left: 50%;
-					transform: translate(-50%,-50%) ;
-					width: calc(1.5rem*1.2);
-					height: calc(1.5rem*1.2);
-					border-radius: 50%;
-				}
-			}
-		}
-		.subitOkPreviewBtn{
-			z-index: 2;
-			margin-bottom: calc(1rem*1.2);
-			width: calc(10rem*1.2);
-			text-align: center;
-			bottom: 0;
-			position: relative;
-		}
-	}
-	.designOpenrtion_imgMask_open{
-			position: absolute;
-			width: 100%;
-			height: 100%;
-		}
-}
-</style>
--- a/src/component/Events/eventsDetail.vue
+++ b/src/component/Events/eventsDetail.vue
@@ -134,7 +134,7 @@ export default defineComponent({
 .eventsDetail_page {
 	min-height: 100%;
    width: 100%;
-	padding: 0 9rem;
+	padding: 0 6rem;
 	padding-top: 5rem;

 	&.active{
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -181,6 +181,11 @@ export default defineComponent({
 		Sketch,
 		selectImgList,
    },
+	props: {
+		collectionStep: {
+			type: Number,
+		}
+	},
    setup(){
 		// console.log(isMoible());
        let fileList = ref([])
@@ -236,6 +241,33 @@ export default defineComponent({
        //     this.setColorboardList(colorList)
 		// 	// this.clearSelectColor()
        // },
+		collectionStep:{
+			handler(newVal,oldVal){
+				if(newVal != 3)return
+				const backIcon = document.createElement('div');
+				if(backIcon.classList.contains('vc-sketch-color-wrap'))return
+				backIcon.classList.add('vc-sketch-color-wrap')
+				let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
+				dropperDom.appendChild(backIcon);
+				backIcon.addEventListener('click', async ()=>{
+					try {
+						const dropper = new EyeDropper();
+						const result = await dropper.open();
+						let hex = result.sRGBHex.replace("#", "");
+						// 将十六进制颜色码拆分成红、绿、蓝三个部分
+						const r = parseInt(hex.substring(0, 2), 16);
+						const g = parseInt(hex.substring(2, 4), 16);
+						const b = parseInt(hex.substring(4, 6), 16);
+						this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
+						// 返回RGB格式的字符串
+						// return `rgb(${r}, ${g}, ${b})`;
+						// box.style.backgroundColor = label.textContent = result.sRGBHex;
+					} catch (e) {
+						message.info(this.t('ColorboardUpload.jsContent1'))
+					}
+				})
+			}
+		},
 		selectColor:{
 			handler(newVal,oldVal){
 				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
@@ -328,31 +360,12 @@ export default defineComponent({
        }
    },
    mounted(){
-        this.token = getCookie('token') || ''
-        this.uploadUrl = getUploadUrl()
-		const backIcon = document.createElement('div');
-		backIcon.classList.add('vc-sketch-color-wrap')
-		let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
-		dropperDom.appendChild(backIcon);
-		
-		
-		backIcon.addEventListener('click', async ()=>{
-			try {
-				const dropper = new EyeDropper();
-				const result = await dropper.open();
-				let hex = result.sRGBHex.replace("#", "");
-				// 将十六进制颜色码拆分成红、绿、蓝三个部分
-				const r = parseInt(hex.substring(0, 2), 16);
-				const g = parseInt(hex.substring(2, 4), 16);
-				const b = parseInt(hex.substring(4, 6), 16);
-				this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
-				// 返回RGB格式的字符串
-				// return `rgb(${r}, ${g}, ${b})`;
-				// box.style.backgroundColor = label.textContent = result.sRGBHex;
-			} catch (e) {
-				message.info(this.t('ColorboardUpload.jsContent1'))
-			}
+		nextTick(()=>{
+			this.token = getCookie('token') || ''
+			this.uploadUrl = getUploadUrl()
+			
 		})
+       
 		// this.clearSelectColor()
 		// if ("EyeDropper" in window) {
 		// 	console.log(true);
@@ -932,6 +945,9 @@ export default defineComponent({
 					box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
 					overflow: hidden;
 					background: #fff;
+					>div,>span{
+						width: 50%;
+					}
 				}
 				.upload_file_item_show:hover{
 					border-bottom: none;
--- a/src/component/HomePage/Cropper.vue
+++ b/src/component/HomePage/Cropper.vue
@@ -1,7 +1,9 @@
 <template>
-      <a-modal class="modal_component cut_pricture_modal"
+		<div ref="cutPrictureModal">
+      <a-modal class="generalModel cut_pricture_modal"
        v-model:visible="cutPicuterModal" 
        :footer="null" 
+		:get-container="() => $refs.cutPrictureModal"
        width="78%"
        :maskClosable="false"
        :centered="true"
@@ -30,6 +32,7 @@
                        :outputType="option.outputType"
                        :auto-crop="option.autoCrop"
 						:fixedBox="!isRound"
+						:movable="true"
                        :fixed="isRound"
                        :auto-crop-width="option.autoCropWidth"
                        :auto-crop-height="option.autoCropWidth"
@@ -70,6 +73,7 @@
            </div>
        </div>
    </a-modal>
+</div>
 </template>
 <script lang="ts">
 import { defineComponent,inject } from 'vue'
@@ -168,20 +172,6 @@ export default defineComponent({
    }
 })
 </script>
-<style lang="less">
-.component_modal{
-	
-}
-.cut_pricture_modal{
-	.ant-modal-content{
-		// transform: scale(1.2);
-		// transform-origin: center !important;
-	}
-	*{
-		pointer-events: auto;
-	}
-}
-</style>
 <style lang="less" scoped>
 .cut_pricture_modal{
 	
@@ -190,7 +180,7 @@ export default defineComponent({
 	.collection_title{
 		position: absolute;
 		width: calc(100% - 10rem*1.2);
-		top: calc(4rem*1.2);
+		top: calc(3rem*1.2);
 		display: flex;
 		font-size: var(--aida-fsize2);
 		font-weight: 900;
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -1,8 +1,10 @@
 <template>
+	<div ref="ExportModal">
    <a-modal
-        class="modal_component Export generalModelOperate"
+        class="modal_component Export generalModel"
        v-model:visible="showUpgradePlan"
        :footer="null"
+		:get-container="() => $refs.ExportModal"
        width="78%"
        :maskClosable="false"
        :centered="true"
@@ -10,10 +12,16 @@
        :keyboard="false"
 		:destroyOnClose="true"
    >
-        <div class="UpgradePlan_closeIcon generalModelOperate_closeIcon ">
-            <i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
-        </div>
-        <div class="UpgradePlan_content generalModelOperate">
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+			</div>
+		</div>
+        <div class="UpgradePlan_content">
            <div>{{ $t('exportModel.EditExport') }}</div>
        </div>
        <!-- <div>
@@ -239,7 +247,7 @@
        </div>
 		<a-modal 
 			v-model:visible="showSRExport"
-			class="modal_component SRExport generalModelOperate"
+			class="modal_component SRExport generalModel"
 			width="48%"
 			:maskClosable="false"
 			:centered="true"
@@ -248,9 +256,11 @@
        	:footer="null"
 			:mask="false"
 		>
-			<div class="generalModelOperate_closeIcon">
-				<i class="fi fi-rr-cross-small" @click.stop="cancelSRExport()"></i>
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<i class="fi fi-rr-cross-small"></i>
 			</div>
+		</div>
 			<div class="modal_title_text">
 				<div class="modal_title_text_max">{{ $t('exportModel.SR') }}</div>
 				<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits',{data:(allExportSR.filter(item=> item.checked ).length*5)}) }}</div>
@@ -286,9 +296,10 @@
 				<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
 			</div>
 		</a-modal>
-		<publish ref="publish" @setPublish="setSubmit"></publish>
+		<publish ref="publish" ></publish>
 		<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
    </a-modal>
+</div>
 </template>
 <script>
 import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
@@ -318,7 +329,7 @@ export default defineComponent({
 		publish,
 		liquefaction,
    },
-    props: ["msg", "sketchCatecoryList"],
+    props: ["msg", "sketchCatecoryList",'setTask'],
    setup(props,{emit}) {
 		const {t} = useI18n()
        const store = useStore();
@@ -2227,10 +2238,18 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>

-.Export {
+:deep(.Export) {
    flex: 1;
    // height: 30rem;
    // overflow-x: hidden;
+	>.ant-modal-content {
+		.ant-modal-body{
+			display: flex;
+			flex-direction: column;
+			background: #f9fafb;
+			border-radius: 3rem;
+		}
+	}
    .icon{
 		transition: all .3s;
 	}
@@ -2256,7 +2275,6 @@ export default defineComponent({
 			justify-content: space-between;
 			cursor: pointer;
 			position: sticky;
-			background: #f9fafb;
 			z-index: 2;
 			align-items: flex-start;
 			margin: 0 2rem;
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -47,6 +47,7 @@
 						v-model="searchPictureName"
 						@keydown.enter="getgenerate()"
 						@click="inputFocus()"
+						@paste="onPaste"
 					/>
 					<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
 						<a-upload
@@ -737,10 +738,10 @@ export default defineComponent({
 					file.id_ = GO.id++;
 					file.categoryValue = category?.value;
 					file.category = category?.name;
-					let fileList = this.sketchboardList.filter(
-						(v: any) => v.status === "done"
-					);
-					this.sketchboardList = fileList
+					//判断是否粘贴来的图片
+					let paste = this.sketchboardList.filter((v: any) => v.id === file.id);
+					if(paste.length == 0)this.sketchboardList.push(file);
+					this.sketchboardList = this.sketchboardList.filter((v: any) => v.status === "done");
 					nextTick().then(()=>{
 						if(this.driver__.driver){
 							driverObj__.moveNext()
@@ -851,6 +852,32 @@ export default defineComponent({
            // this.myMaterialModalShow = false
            this.searchPictureName = "";
        },
+		onPaste(e:any){
+			if(e.clipboardData.items[0] && !this.isTextarea && this.upload.level1Type !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
+				let param = new FormData(); 
+				param.append('inPin','0')
+				param.append('gender',this.upload.gender)
+				param.append('level1Type',this.upload.level1Type)
+				param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
+				param.append('file',e.clipboardData.files[0]);
+				let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+				Https.axiosPost(Https.httpUrls.elementUpload, param, config).then((v)=>{
+					let value = {data:v,errCode : 0}
+					v.status = 'done'
+					let data = {
+						file:{
+							status: 'done',
+							xhr:{
+								response:JSON.stringify(value)
+							}
+						}
+					}
+					this.fileUploadChange(data)
+					
+				})
+			}
+			
+		}
    },
 });
 </script>
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -149,7 +149,6 @@
 			
 		</div>
 		<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
-		<layoutMobile ref="layoutMobile" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layoutMobile>
       
    </div>
 </template>
@@ -165,14 +164,13 @@ import Material from "@/component/HomePage/Material.vue";
 import Generate from "@/component/HomePage/Generate.vue";
 import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
 import layout from "@/component/HomePage/layout.vue";
-import layoutMobile from "@/component/HomePage/layoutMobile.vue";
 import domTurnImg from '@/tool/domTurnImg'
 import GO from "@/tool/GO";
 import moodb from "@/tool/moodb";
 import { useI18n } from "vue-i18n";
 import { openGuide,driverObj__ } from "@/tool/guide";
 export default defineComponent({
-    components: { Material, MoodTemplate, Generate,layout,layoutMobile },
+    components: { Material, MoodTemplate, Generate,layout },
    setup() {
 		const store = useStore()
        let lessenList: any = ref([]);
@@ -437,7 +435,6 @@ export default defineComponent({

        async changeTemplateModal() {
 			if(this.modalImg[0]?.id){
-				// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
 				let layout:any = this.$refs.layout
 				if(this.layoutList.length <= 0){
 					let styleObj = this.store.state.UploadFilesModule.moodboardPosition
--- a/src/component/HomePage/NewCollectionReview.vue
+++ b/src/component/HomePage/NewCollectionReview.vue
@@ -210,8 +210,7 @@ export default defineComponent({
        left: 0;
        width: 100%;
        height: 100%;
-        z-index: 2;
-		
+        z-index: 1;
    }

    .img_block_item{
--- a/src/component/HomePage/UpgradePlan.vue
+++ b/src/component/HomePage/UpgradePlan.vue
@@ -1,60 +1,32 @@
 <template>
+	<div class="upgradePlan" ref="upgradePlan">
 	<!-- 如果需要套餐就78 -->
-   <a-modal class="modal_component UpgradePlan_modal" 
+   <a-modal class="generalModel UpgradePlan_modal" 
            v-model:visible="showUpgradePlan" 
            :footer="null" 
+			:get-container="() => $refs.upgradePlan"
            width="35%"
+			height="auto"
            :maskClosable="false"
            :centered="true"
 			:closable="false"
 			:keyboard="false"
 			:destroyOnClose ='true'
        >
-        <div class="UpgradePlan_closeIcon">
-				
-			<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<!-- <i class="fi fi-rr-cross-small"></i> -->
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+			</div>
 		</div>
 		<div class="UpgradePlan_content">
 			<div>{{ $t('upgradePlan.BuyCredlts') }}</div>
 		</div>
-		<!-- <div v-show="stepNum == 0" class="UpgradePlan_nav">
-			<div class="UpgradePlan_nav_content">
-				<div :class="[planNum == 0 ? 'active':'']" @click="setPlan(0)">Monthly</div>
-				<div :class="[planNum == 1 ? 'active':'']" @click="setPlan(1)">Annual(save 20%)</div>
-				<div :class="[planNum == 2 ? 'active':'']" @click="setPlan(2)">Buy Credits</div>
-			</div>
-		</div> -->
 		<div v-show="stepNum == 0" class="UpgradePlan_payList">
-			<!-- <div v-show="planNum == 0" class="UpgradePlan_payList0">
-				<div class="UpgradePlan_payList-item" v-for="item in productList">
-					<div class="UpgradePlan_payList-item-price">$99/month</div>
-					<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
-					<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
-					<ul class="UpgradePlan_payList-item-content">
-						<li>
-							<i class="fi fi-rr-cross-small"></i>
-							<span>22500 Images per month</span>
-						</li>
-					</ul>
-					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
-				</div>
-			</div>
-			<div v-show="planNum == 1" class="UpgradePlan_payList1">
-				<div class="UpgradePlan_payList-item" v-for="item in productList">
-					<div class="UpgradePlan_payList-item-price">$99/month</div>
-					<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
-					<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
-					<ul class="UpgradePlan_payList-item-content">
-						<li>
-							<i class="fi fi-rr-cross-small"></i>
-							<span>22500 Images per month</span>
-						</li>
-					</ul>
-					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
-					
-				</div>
-			</div> -->
-			
 			<div v-show="planNum == 2" class="UpgradePlan_payList2">
 				<div class="UpgradePlan_payList-item" v-for="item in productList">
 					<div class="UpgradePlan_payList2_img">
@@ -72,7 +44,9 @@
 				</div>
 			</div>
 		</div>
-		<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
+		<payMethod ref="payMethod" @completePayment="cancelDsign"></payMethod>
+
+		<!-- <div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
 			<div class="UpgradePlan_payAffirm_title">{{ $t('upgradePlan.payment') }}</div>
 			<div class="UpgradePlan_payAffirm_content">
 				<label>
@@ -130,21 +104,21 @@
 				<div class="mark_loading_btn" @click="getTradeQuery">OK</div>
 			</div>
 			
-			</div>
+			</div> -->
 	</a-modal>
+</div>
 </template>
 <script lang="ts">
 import { message, Upload } from "ant-design-vue";
 import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
-import GO from "@/tool/GO";
 import { useI18n } from "vue-i18n";
+import payMethod from "@/component/Pay/payMethod.vue";
 // import { forEach } from "jszip";
-import scaleImage from "@/component/HomePage/scaleImage.vue";
 export default defineComponent({
 	components: {
-		scaleImage,	
+		payMethod,
 	},
    props: ["msg",'sketchCatecoryList'],
    setup() {
@@ -159,11 +133,11 @@ export default defineComponent({
 			price:2,
 			credits:45,
 		})
+		let payMethod:any = ref(null)
 		let modeOfPayment = ref('paypal')
 		let modeOfPaymentDetail = ref('ALIPAYHK')
 		let clause = ref(false)//同意条款
 		let productList:any = ref([])
-		let payIndex = ref(0)
 		let isShowMark = ref(false)
 		let newWindow:any = ref()
        return {
@@ -172,12 +146,12 @@ export default defineComponent({
 			showUpgradePlan,
 			planNum,
 			stepNum,
+			payMethod,
 			price,
 			modeOfPayment,
 			modeOfPaymentDetail,
 			clause,
 			productList,
-			payIndex,
 			isShowMark,
 			newWindow,
        };
@@ -209,8 +183,12 @@ export default defineComponent({
 			this.planNum = num
 		},
 		upgrade(index:any){
-			this.stepNum = 1
-			this.payIndex = index
+			let data = {
+				autoRenewal:true,//one_time为不自动续费
+				productName:'CreditsPurchase',
+				quantity:this.price.num,
+			}
+			this.payMethod.init(data)
 		},
 		getProductList(){
 			Https.axiosGet(Https.httpUrls.productList).then((rv) => {
@@ -315,7 +293,7 @@ export default defineComponent({
 <style lang="less" scoped>
 .UpgradePlan_modal {
 	flex: 1;
-    height: 30rem;
+    // height: 30rem;
    // overflow-x: hidden;
 	display: flex;
    flex-direction: column;
@@ -357,51 +335,7 @@ export default defineComponent({
 	}
 	.UpgradePlan_payList{
 		flex: 1;
-		.UpgradePlan_payList0,.UpgradePlan_payList1,.UpgradePlan_payList2{
-			overflow-y: hidden;
-			height: 100%;
-			display: flex;
-			.UpgradePlan_payList-item{
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-			}
-		}
-		.UpgradePlan_payList0,.UpgradePlan_payList1{
-			.UpgradePlan_payList-item{
-				width: 35rem;
-				padding: 3rem;
-				border: .5rem solid #edeff2;
-				border-radius: 2rem;
-				margin-right: 2rem;
-				&.UpgradePlan_payList-item:last-child{
-					margin-right: 0;
-				}
-				.UpgradePlan_payList-item-price{
-					font-weight: 600;
-					font-size: var(--aida-fsize2);
-					margin-bottom: 1rem;
-					line-height: 1;
-				}
-				
-				.UpgradePlan_payList-item-plan{
-					font-size: 1.8rem;
-					font-weight: 600;
-				}
-				.UpgradePlan_payList-item-content{
-					margin-top: 1.2rem;
-					flex: 1;
-					overflow-x: hidden;
-				}
-				.UpgradePlan_payList-item-upgrade{
-					position: relative;
-					text-align: center;
-					padding: 1rem 2rem;
-				}
-				
-			}
-			
-		}
+		
 		.UpgradePlan_payList2{
 			text-align: center;
 			flex-direction: column;
@@ -465,168 +399,5 @@ export default defineComponent({
 			
 		}
 	}
-	.UpgradePlan_payAffirm{
-		width: 50rem;
-		margin: 0 auto;
-		margin-top: 5rem;
-		.UpgradePlan_payAffirm_title{
-			font-size: 2rem;
-			font-weight: 600;
-		}
-	}
-	.UpgradePlan_payAffirm_content{
-		display: flex;
-		flex-direction: column;
-		margin: 3rem 0;
-		// height: 20rem;
-		// overflow-y: auto;
-		>label{
-			display: flex;
-			align-items: center;
-			padding: 1rem;
-			margin: 1rem 0;
-			cursor: pointer;
-			border: .5rem solid #efefef;
-			border-radius: 2rem;
-			img{
-				margin: 0rem 2rem;
-				// max-width: 4rem;
-				width: 4rem;
-			}
-			.UpgradePlan_payAffirm_content_detail{
-				margin-left: auto;
-				display: flex;
-				>label{
-					cursor: pointer;
-					display: flex;
-					align-items: center;
-					margin-right: 1rem;
-					span{
-						margin-left: .5rem;
-					}
-				}
-				>label:last-child{
-				    margin: 0;
-				}
-			}
-		}
-	}
-	.UpgradePlan_payAffirm_clause{
-		margin-bottom: 1.5rem;
-		label{
-			cursor: pointer;
-			input{
-				margin-right: 1rem;
-				cursor: pointer;
-				vertical-align: middle;
-			}
-			span{
-				vertical-align: top;
-				a{
-					color: #000;
-					text-decoration: underline;
-				}
-			}
-		}
-		&.animation{
-			animation: shake .3s linear;
-			@keyframes shake {
-				0%{
-					transform: translateX(0px);
-				}
-				25%{
-					transform: translateX(-10px);
-				}
-				50%{
-					transform: translateX(10px);
-				}
-				75%{
-					transform: translateX(-10px);
-				}
-				100%{
-					transform: translateX(0px);
-				}
-			}
-		}
-	}
-	.UpgradePlan_payList_item_upgrade_btn{
-		display: flex;
-		display: flex;
-		justify-content: space-around;
-		>div{
-			position: relative;
-			left: 0;
-			transform: none;
-			line-height: 1;
-			display: flex;
-			align-items: center;
-		}
-		.UpgradePlan_payList_item_upgrade1{
-			background: rgba(0, 0, 0, 0);
-			border: 2px solid;
-			color: #000;
-		}
-	}
-    .UpgradePlan_closeIcon{
-		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;
-		position: absolute;
-		.fi-rr-cross-small::before{
-			padding: calc(.2rem*1.2);
-			border-radius: 5px;
-			border: solid 2px rgba(0, 0, 0, 0.25);
-			transition: 1s all;
-			color: rgba(0, 0, 0, 0.55);
-		}
-		&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before{
-			border: solid 2px rgba(0, 0, 0, 0.55);
-			color: rgba(0, 0, 0, 1);
-		}
-	}
 }
-	
-
 </style>
-<style lang="less">
-.UpgradePlan_modal,.layout_modal{
-	.ant-modal-content{
-		border-radius: calc(1rem*1.2);
-		overflow: hidden;
-		.ant-modal-header{
-			background-color: #fff;
-			border-bottom: none;
-		}
-		.ant-modal-body{ 
-			display: flex;
-			flex-direction: column;
-			padding: calc(5rem*1.2) calc(5rem*1.2) !important;
-			height: calc(55rem*1.2);
-			// height: calc(65rem*1.2);
-		}
-		//进度完成字体颜色
-		.ant-progress-circle.ant-progress-status-success .ant-progress-text{
-			color: #000;
-		}
-		.ant-progress-circle .ant-progress-text{
-			color:rgba(0, 0, 0, 0.55);
-			font-size: calc(1.6rem*1.2);
-		}
-	}
-}
-.UpgradePlan_modal{
-	.ant-modal-content{
-		
-		.ant-modal-body{
-			padding: calc(5rem*1.2) calc(5rem*1.2) !important;
-			height: calc(55rem*1.2);
-			// height: calc(65rem*1.2);
-		}
-	}
-}
-</style>
--- a/src/component/HomePage/collectionModal.vue
+++ b/src/component/HomePage/collectionModal.vue
@@ -1,12 +1,14 @@
 <template>
    <div v-if="showCollectionModal">
-         <a-modal class="modal_component collection_modal Guide_1_2" 
+		<div ref="collection_modal"></div>
+         <a-modal class="modal_component collection_modal generalModel Guide_1_2" 
            v-model:visible="showCollectionModal" 
            :footer="null" 
            width="78%"
            :maskClosable="false"
            :centered="true"
 			:closable="false"
+			:get-container="() => $refs.collection_modal"
 			wrapClassName="#app"
 			:keyboard="false"
        >
@@ -27,11 +29,15 @@
 				</div>
         
            </div>
-			<div class="collection_closeIcon closeIcon" :class="[driver__.driver?'hideEvents':'']">
-				<!-- <div class="header_right_block" @click.stop="">
-					<div class="header_cancel_button" >Cancel</div>
-				</div> -->
-				<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
+			<div class="generalModel_btn" :class="[driver__.driver?'hideEvents':'']">
+				<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+					<!-- <i class="fi fi-rr-cross-small"></i> -->
+					<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+				</div>
 			</div>
 			<div class="collection_page" :class="[driver__.driver?'hideEvents':'']">
 				<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
@@ -46,7 +52,7 @@
            <div class="collection_modal_body">
                <MoodboardUpload ref="MoodboardUpload" v-show="collectionStep === 1"></MoodboardUpload>
                <PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
-                <ColorboardUpload ref="ColorboardUpload" v-show="collectionStep === 3"></ColorboardUpload>
+                <ColorboardUpload ref="ColorboardUpload" :collectionStep="collectionStep" v-show="collectionStep === 3"></ColorboardUpload>
                <SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
                <!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> -->
            </div>
@@ -373,8 +379,44 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
+:deep(.ant-modal-body){
+	padding: calc(8rem*1.2) calc(5rem*1.2) !important;
+	// height: calc(65vh - 6.4rem);
+	height: calc(65rem*1.2);
+	.ant-progress-circle .ant-progress-text{
+		color:rgba(0, 0, 0, 0.55);
+		font-size: calc(1.6rem*1.2);
+	}
+}
 .collection_modal{
 	// max-width: 120rem;
+	
+	.ant-upload-select-picture-card{
+        background: #FFFFFF;
+		width: calc(6rem*1.2);
+		height: calc(6rem*1.2);
+		border: calc(0.3rem*1.2) solid #ededed;
+		border-radius: calc(1rem*1.2);
+		margin: 0;
+        .upload_tip_block{
+            .icon-jiahao{
+                font-size: calc(3.2rem*1.2);
+                color: #B7B7B7;
+            }
+        }
+
+        .ant-upload-text{
+            font-size: calc(1.6rem*1.2);
+            color: #B7B7B7;
+        }
+    }
+    .ant-upload-list-picture-card-container{
+        display: none !important;
+    }
+    .ant-upload-picture-card-wrapper{
+        width: auto;
+        vertical-align: top;
+    }
 	.collection_title,.collection_closeIcon,.collection_page{
 		position: absolute;
 	}
@@ -480,31 +522,3 @@ export default defineComponent({
    }
 }
 </style>
-<style lang="less">
-.collection_modal,.layout_modal,.layoutMobile_modal{
-	// max-width: 1200px ;
-	// max-width: 1150px ;
-	.ant-modal-content{
-		border-radius: calc(1rem*1.2);
-		overflow: hidden;
-		.ant-modal-header{
-			background-color: #fff;
-			border-bottom: none;
-		}
-		.ant-modal-body{
-			padding: calc(8rem*1.2) calc(5rem*1.2) !important;
-			// height: calc(65vh - 6.4rem);
-			height: calc(65rem*1.2);
-		}
-		//进度完成字体颜色
-		
-		.ant-progress-circle.ant-progress-status-success .ant-progress-text{
-			color: #000;
-		}
-		.ant-progress-circle .ant-progress-text{
-			color:rgba(0, 0, 0, 0.55);
-			font-size: calc(1.6rem*1.2);
-		}
-	}
-}
-</style>
--- a/src/component/HomePage/createSlogan.vue
+++ b/src/component/HomePage/createSlogan.vue
@@ -1,8 +1,10 @@
 <template>
+	<div ref="clearSloganModal"></div>
    <a-modal
        class="clearSlogan_modal generalModel"
        v-model:visible="showPayOrder"
        :footer="null"
+		:get-container="() => $refs.clearSloganModal"
        width="50%"
        :maskClosable="false"
        :centered="true"
@@ -13,7 +15,11 @@
    >
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<i class="fi fi-rr-cross-small"></i>
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 			</div>
 		</div>
 		
@@ -400,11 +406,8 @@ export default defineComponent({
    },
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .clearSlogan_modal {
-    .closeIcon {
-        z-index: 2;
-    }
 	.clearSlogan_center{
 		position: relative;
 		// width: calc(512px / 2);
--- a/src/component/HomePage/generalModel.vue
+++ b/src/component/HomePage/generalModel.vue
@@ -1,6 +1,6 @@
 <template>
    <a-modal
-        class="modal_component generalModel_modal"
+        class="modal_component generalModel"
        v-model:visible="showPayOrder"
        :footer="null"
        width="78%"
@@ -11,8 +11,10 @@
        :keyboard="false"
    >
 		<div class="generalModel_page ">
-			<div class="closeIcon">
-				<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
+			<div class="generalModel_btn">
+				<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+					<i class="fi fi-rr-cross-small"></i>
+				</div>
 			</div>
 			<div class="creditsDetail_table_search generalModel_table_search">
 				<div class="creditsDetail_state generalModel_state">
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div ref="layoutModal">
 	<a-modal
            class="layout_modal generalModel"
            v-model:visible="layout"
            :footer="null"
+			:get-container="() => $refs.layoutModal"
            width="78%"
            :maskClosable="false"
            :centered="true"
@@ -20,7 +21,11 @@
 				</div>
 				<div class="generalModel_btn">
 					<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-						<i class="fi fi-rr-cross-small"></i>
+						<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+							<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+							<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+						</svg>
 					</div>
 				</div>
 				<div class="layout_nav">
@@ -858,7 +863,7 @@ export default defineComponent({
 });
 </script>

-<style lang="less">
+<style lang="less" scoped>
 .layout_modal {
 	user-select: none; /* 对现代浏览器有效 */
    -webkit-user-select: none; /* Safari */
--- a/src/component/HomePage/layoutMobile.vue
+++ b/src/component/HomePage/layoutMobile.vue
--- a/src/component/HomePage/productImg.vue
+++ b/src/component/HomePage/productImg.vue
@@ -1,8 +1,10 @@
 <template>
+	<div ref="productImgModal">
 		<a-modal
            class="productImg_modal generalModel"
            v-model:visible="productImg"
            :footer="null"
+			:get-container="() => $refs.productImgModal"
            width="78%"
            :maskClosable="false"
            :centered="true"
@@ -13,7 +15,11 @@
        >
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<i class="fi fi-rr-cross-small"></i>
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 			</div>
 		</div>
 		<div class="productImg_content">
@@ -232,6 +238,7 @@
 			}" 
 			:isProductimg="true"></scaleImage>
 	</a-modal>
+</div>
 </template>

 <script lang="ts">
@@ -258,6 +265,7 @@ export default defineComponent({
 		scaleImage,
 		generalMenu,
 	},
+    props: ['setTask'],
    setup(props,{emit}) {
 		const store = useStore();
 		const {t} = useI18n()
@@ -883,12 +891,12 @@ methods: {
 	.Guide_1_32{
 		height: 100%;
 		overflow-y: auto;
+		padding: 0 1rem;
 		&.Guide_1_32::-webkit-scrollbar{display: none;}
 	}
 	.upload_file_item{
 		display: flex;
 		margin-right: 1rem;
-		width: auto !important;
 		height: 14rem !important;
 		border: none !important;
 		&.upload_file_item:last-child{
@@ -925,7 +933,7 @@ methods: {
 	}
 	.productImg_content_item_Direction{
 		padding-bottom: calc(2rem* 1.2);
-		.ant-select{
+		:deep(.ant-select){
 			font-size: 1.6rem;
 			.ant-select-selector::after{
 				line-height: 1;
--- a/src/component/HomePage/renew.vue
+++ b/src/component/HomePage/renew.vue
@@ -0,0 +1,240 @@
+<template>
+	<div class="renew" ref="renew"></div>
+	<a-modal
+		class="generalModel"
+		:get-container="() => $refs.renew"
+		v-model:visible="renewModel"
+		:footer="null"
+		:width="pageWidth"
+		height="auto"
+		:maskClosable="false"
+		:centered="true"
+		:closable="false"
+		:mask="renewModelMask"
+		:keyboard="false"
+		:destroyOnClose="true"
+		:zIndex="1000"
+	>
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<!-- <i class="fi fi-rr-cross-small"></i> -->
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+			</div>
+		</div>
+		<div class="renewContent">
+			<div class="generalModelTitle">
+				Select The Best Plan For Your Needs
+			</div>
+			<div class="renew_detail">
+				<div class="name generalModelTitle">{{ current.title }}</div>
+				<div class="price_box">
+					<div class="price">
+						<sub>$</sub>
+						{{ current.price[current.type] }} <span>{{ current.unit[current.type] }}</span>
+					</div>
+					<div class="type" v-if="current.typeList.length > 1">
+						<label>
+							<input name="pric" type="radio" value="monthly" v-model="current.type" @change="setPricType('monthly')">
+							Monthly
+						</label>
+						<label>
+							<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
+							Yearly
+						</label>
+					</div>
+					<div class="info">{{ current.info }}</div>
+				</div>
+				<div class="gallery_btn gallery_btn_radius" @click="payment">Subscribe Now</div>
+			</div>
+			<div
+				class="login_footer_item_text"
+				@click="turnToWindow(
+					'https://code-create.com.hk/aida-terms-and-conditions/'
+				)"
+			>
+				Terms&Conditions
+			</div>
+			<div
+				class="login_footer_item_text"
+				@click="turnToWindow(
+					'https://code-create.com.hk/aida-subscription-agreement/'
+				)"
+			>
+				Privacy Policy
+			</div>
+		</div>
+	</a-modal>
+	<payMethod ref="payMethod" @completePayment="cancelDsign"></payMethod>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
+import { message } from "ant-design-vue";
+import payMethod from "@/component/Pay/payMethod.vue";
+import { useStore } from "vuex";
+const md5 = require("md5");
+export default defineComponent({
+    components: {
+		payMethod,
+    },
+    setup(){
+		const store = useStore();
+		let renew = reactive({
+			renewModel:false,
+			renewModelMask:true,
+			pageWidth:'50%'
+		})
+		let renewData = reactive({
+			personage:{
+				title:'Personal version',
+				price:{
+					monthly:'500',
+					year:'5,000',
+				},
+				unit:{
+					monthly:'HKD / Month',
+					year:'HKD / Year',
+				},
+				type:'monthly',
+				typeList:['monthly','year'],
+				info:'Tax, VAT not included.',
+			},
+			firm:{
+				title:'Education Edition',
+				price:{
+					year:'500',
+				},
+				unit:{
+					year:'HKD / Year',
+				},
+				type:'year',
+				typeList:['year'],
+				info:'Customised plan',
+			},
+			education:{
+				title:'Enterprise Edition',
+				price:{
+					year:'500',
+				},
+				unit:{
+					year:'HKD / Year',
+				},
+				type:'year',
+				typeList:['year'],
+				info:'Customised plan',
+			},
+			current:{
+
+			} as any,	
+			payMethod:null as any,
+		})
+		const init = ()=>{
+			renew.renewModel = true
+			renewData.current = renewData.personage
+		}
+		const cancelDsign = () => {
+			renew.renewModel = false
+		}
+		const setPricType=(str:any)=>{
+			renewData.current.type = str
+		}
+		const payment = ()=>{
+			let subscribeType = 'Year'
+			if(renewData.current.type == 'monthly')subscribeType= 'Month'
+			let data = {
+				autoRenewal:true,//one_time为不自动续费
+				productName:'Subscription',
+				subscribeType,//yearly为年费，monthly为月费
+			}
+			renewData.payMethod.init(data)
+		}
+        return{
+			store,
+			...toRefs(renew),
+			...toRefs(renewData),
+			init,
+			cancelDsign,
+			setPricType,
+			payment,
+        }
+    },
+    data() {
+        return {
+			
+        };
+    },
+    methods: {
+		turnToWindow(url:any) {
+            window.open(url);
+        },
+    },
+});
+</script>
+<style lang="less" scoped>
+.renew {
+   .renewContent{
+	display: flex;
+    flex-direction: column;
+    align-items: center;
+		.generalModelTitle{
+			text-align: center;
+		}
+		.renew_detail{
+			width: 58rem;
+			height: 53rem;
+			border-radius: 3rem;
+			margin-bottom: 5rem;
+			border: 2px solid #000;
+			padding: 6rem 3rem 5rem;
+			display: flex;
+			flex-direction: column;
+			.price_box{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				flex: 1;
+				justify-content: space-between;
+				margin-bottom: 3rem;
+			}
+			.price{
+				font-size: 6rem;
+				sub{
+					font-size: 2rem;
+					top: -3rem;
+				}
+				span{
+					font-size: 2rem;
+				}
+			}
+			.type{
+				display: flex;
+				label{
+					display: flex;
+					align-items: center;
+					margin-right: 3rem;
+					input{
+						margin-right: 1rem;
+					}
+				}
+				label:last-child{
+				    margin-right: 0rem;
+				}
+			}
+		}
+		.login_footer_item_text{
+			text-align: center;
+			margin-bottom: 1.5rem;
+			text-decoration: underline;
+		}
+		.login_footer_item_text:last-child{
+			margin-bottom: 0rem;
+		}
+   }
+       
+}
+
+</style>
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -1,8 +1,10 @@
 <template>
+		<div ref="scaleImageModal">
 		<a-modal
            class="scaleImage_modal generalModel"
            v-model:visible="scaleImage"
            :footer="null"
+			:get-container="() => $refs.scaleImageModal"
            width="78%"
            :maskClosable="false"
            :centered="true"
@@ -12,10 +14,14 @@
 			:destroyOnClose="true"
        >
 		<div class="generalModel_btn">
-			<div class="generalModel_closeIcon left" @click.stop="cancelDsign()">
-				<i class="fi fi-rr-cross-small"></i>
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 			</div>
-			<div class="generalModel_closeIcon" @click.stop="download()">
+			<div class="generalModel_closeIcon download" @click.stop="download()">
 				<i class="fi fi-rr-down-to-line"></i>
 			</div>
 		</div>
@@ -128,6 +134,7 @@
 				<a-spin size="large" />
 			</div>
 	</a-modal>
+</div>
 </template>

 <script lang="ts">
@@ -476,7 +483,7 @@ export default defineComponent({
    },
 });
 </script>
-<style>
+<style scoped>
 .scaleImage_modal{
 	overflow: visible !important;
 }
@@ -487,6 +494,10 @@ export default defineComponent({
 		display: flex;
 		flex-direction: column;
    }
+	.productImg_content_item_title{
+		font-weight: 600;
+		font-size: 1.6rem;
+	}
 	.scaleImage_content{
 		display: flex;
 		justify-content: center;
@@ -495,16 +506,34 @@ export default defineComponent({
 		height: 100%;
 		position: relative;
 		.productImg_modal{
-			position: absolute;
+			position: relative;
 			left: 0;
 			z-index: 9;
 			.productImg_left{
 				width: 100%;
+				.input_box_btnBox{
+					width: 100%;
+				}
+				.input_box{
+					justify-content: flex-end;
+				}
 				.productImg_content_item_generate_btn{
 					transform: translateY(100%);
+					position: absolute;
+					bottom: 0;
+					top: auto;
+					width: 100%;
+					justify-content: space-around;
 				}
 				.productImg_content_item_similarity{
 					padding-bottom: 2.4rem;
+					display: flex;
+					input{
+						width: 5rem;
+						height: 5rem;
+						text-align: center;
+						font-size: 1.8rem;
+					}
 				}
 			}
 		}
@@ -525,7 +554,7 @@ export default defineComponent({
 				img{
 					// width: 50%;
 					height: 100%;
-					object-fit: contain;
+					object-fit: cover;
 				}
 			}
 			.img_operate_block{
--- a/src/component/HomePage/selectImgList.vue
+++ b/src/component/HomePage/selectImgList.vue
@@ -1,20 +1,27 @@
 <template>
+	<div class="selectImgListModal" ref="selectImgListModal">
 	<a-modal
 		class="selectImgList_modal generalModel"
 		v-model:visible="selectImgList"
 		:footer="null"
 		width="50%"
+		height="78rem"
+		:get-container="() => $refs.selectImgListModal"
 		:maskClosable="false"
 		:centered="true"
 		:closable="false"
 		:mask="selectImgListMask"
 		:keyboard="false"
 		:destroyOnClose="true"
-		:zIndex="1050"
+		:zIndex="1000"
 	>
 	<div class="generalModel_btn">
 		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-			<i class="fi fi-rr-cross-small"></i>
+			<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+				<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+				<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+			</svg>
 		</div>
 	</div>
 	<div class="selectImgList_content">
@@ -41,6 +48,7 @@
 		<a-spin size="large" />
 	</div>
 </a-modal>
+</div>
 </template>

 <script lang="ts">
@@ -115,11 +123,11 @@ methods: {
 });
 </script>

-<style lang="less">
+<style lang="less" scoped>
 .selectImgList_modal {
 	&.generalModel{
 		.ant-modal-body {
-			height: calc(55rem*1.2);
+			// height: calc(55rem*1.2);
 		}
 	}
 	
--- a/src/component/LoginPage/googleLogin.vue
+++ b/src/component/LoginPage/googleLogin.vue
@@ -9,53 +9,58 @@

    export default defineComponent({
        name: "login",
-		setup() {
+		emits: ['googelLogin'],
+		setup(props, { emit }) {
 			const  handleCredentialResponse = async (response) => {
                // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
-				console.log(response);
                let code = response.credential
-				console.log(code);
-                // await api.googleLogin(code);
+				emit('googelLogin',code)
            }
-			onMounted(()=>{
-				let  GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
-				// let  GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
-				
-				// 使用谷歌登录的api
+			let data = reactive({
+				scriptSrc:'https://accounts.google.com/gsi/client',
+			})
+			let  GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
+			// let  GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
+			// 使用谷歌登录的api
+			var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
+			if(!existingScript){
 				const script = document.createElement("script");
-				script.src = "https://accounts.google.com/gsi/client"
-				document.body.appendChild(script);
-
-				window.addEventListener('load', () => {
+				script.src = data.scriptSrc
+				script.onload=()=>{
+					document.body.appendChild(script);
 					window.google.accounts.id.initialize({
 					// 主要就是填写client_id
 						client_id: GOOGLE_CLIENT_ID,
 						auto_select: false,
 						callback: handleCredentialResponse,
-						context:"signin",
+						// context:"signin",
 						ux_mode:"popup",
 						itp_support:true,
 					});
 					window.google.accounts.id.renderButton(
 						document.getElementById("g_id_signin"),
 						{
-							type:"standard",
-							shape:"pill",
+							type:"icon",//icon为只有一个icon
+							shape:"circle",
 							theme:"outline",
-							text:"signin_with",
-							size:"medium",
-							logo_alignment:"left",
+							size:"large",
+							logo_alignment:"center",
 						}
 					);
-				})
-			})
+				}
+			}
 			return {
            }
 		},
    })
 </script>
-<style scoped>
+<style scoped lang="less">
 .Container{
-	width: 45%;
+	:deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb ){
+		justify-content: center;
+		.nsm7Bb-HzV7m-LgbsSe-Bz112c{
+			padding: 0;
+		}
+	}
 }
 </style>
--- a/src/component/LoginPage/phoneLogin.vue
+++ b/src/component/LoginPage/phoneLogin.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="Container">
+        <div class="icon" @click="openphoneModel">
+			<img src="@/assets/images/loginPage/phone.svg" alt="">
+		</div>
+		<phoneModel ref="phoneModel"></phoneModel>
+    </div>
+</template>
+<script>
+	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
+	import phoneModel from "./phoneModel.vue";
+    export default defineComponent({
+        name: "login",
+		components: {
+		    phoneModel
+		},
+		setup() {
+			let phoneDom = reactive({
+				phoneModel:null
+			})
+			const openphoneModel = ()=>{
+				phoneDom.phoneModel.init()
+			}
+			onMounted(()=>{
+				
+			})
+			return {
+				...toRefs(phoneDom),
+				openphoneModel,
+            }
+		},
+    })
+</script>
+<style scoped lang="less">
+.Container{
+	position: relative;
+	.icon{
+		width: 40px;
+		height: 40px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid #dadce0;
+		border-radius: 50%;
+		cursor: pointer;
+		&:hover{
+			background: #f8faff;
+		}
+		img{
+			width: 18px;
+			height: 18px;
+		}
+	}
+	&.Container:hover{
+	}
+}
+</style>
--- a/src/component/LoginPage/phoneModel.vue
+++ b/src/component/LoginPage/phoneModel.vue
@@ -0,0 +1,80 @@
+<template>
+	<div ref="phoneModelDom"></div>
+	<a-modal
+		class="phoneModel generalModel"
+		:get-container="() => $refs.phoneModelDom"
+		v-model:visible="phoneModel"
+		:footer="null"
+		:width="pageWidth"
+		:maskClosable="false"
+		:centered="true"
+		:closable="false"
+		:mask="phoneModelMask"
+		:keyboard="false"
+		:destroyOnClose="true"
+		:zIndex="1000"
+	>
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<!-- <i class="fi fi-rr-cross-small"></i> -->
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+			</div>
+		</div>
+		<div class="phoneLogin">
+			<!-- <div id="wx_id_signin"></div> -->
+		</div>
+	<div class="mark_loading" v-show="loadingShow">
+		<a-spin size="large" />
+	</div>
+	</a-modal>
+
+</template>
+
+<script>
+import { defineComponent,ref,reactive,toRefs, onMounted} from "vue";
+import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
+const md5 = require("md5");
+export default defineComponent({
+    components: {
+        VerificationCodeInput,
+    },
+    setup(){
+		let phoneModel = reactive({
+			phoneModel:false,
+			phoneModelMask:true,
+			pageWidth:'50%',
+		})
+		let data = reactive({
+			loadingShow:false,
+		})
+		const init = async ()=>{
+			phoneModel.phoneModel = true
+		}
+		const cancelDsign = ()=>{
+			phoneModel.phoneModel = false
+		}
+        return{
+			...toRefs(phoneModel),
+			...toRefs(data),
+			init,
+			cancelDsign,
+        }
+    },
+    data() {
+        return {
+        };
+    },
+    methods: {
+    },
+});
+</script>
+<style lang="less" scoped>
+.phoneLogin {
+    width: 100%;
+    height: 100%;
+}
+</style>
--- a/src/component/LoginPage/weiXinLogin.vue
+++ b/src/component/LoginPage/weiXinLogin.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="Container">
+        <div class="icon" @click="openWeiXinModel">
+			<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
+		</div>
+		<weiXinModel ref="weiXinModel"></weiXinModel>
+    </div>
+</template>
+<script>
+	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
+	import weiXinModel from "./weiXinModel.vue";
+    export default defineComponent({
+        name: "login",
+		components: {
+		    weiXinModel
+		},
+		setup() {
+			let weiXinDom = reactive({
+				weiXinModel:null
+			})
+			const openWeiXinModel = ()=>{
+				weiXinDom.weiXinModel.init()
+			}
+			onMounted(()=>{
+				
+			})
+			return {
+				...toRefs(weiXinDom),
+				openWeiXinModel,
+            }
+		},
+    })
+</script>
+<style scoped lang="less">
+.Container{
+	position: relative;
+	.icon{
+		width: 40px;
+		height: 40px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid #dadce0;
+		border-radius: 50%;
+		cursor: pointer;
+		&:hover{
+			background: #f8faff;
+		}
+		img{
+			width: 18px;
+			height: 18px;
+		}
+	}
+	&.Container:hover{
+	}
+}
+</style>
--- a/src/component/LoginPage/weiXinModel.vue
+++ b/src/component/LoginPage/weiXinModel.vue
@@ -0,0 +1,120 @@
+<template>
+	<a-modal
+		class="weiXinModel generalModel"
+		v-model:visible="weiXinModel"
+		:footer="null"
+		:width="pageWidth"
+		:maskClosable="false"
+		:centered="true"
+		:closable="false"
+		:mask="weiXinModelMask"
+		:keyboard="false"
+		:destroyOnClose="true"
+		:zIndex="1000"
+	>
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<!-- <i class="fi fi-rr-cross-small"></i> -->
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+			</div>
+		</div>
+		<div class="weiXinLogin">
+			<div id="wx_id_signin"></div>
+		</div>
+	<div class="mark_loading" v-show="loadingShow">
+		<a-spin size="large" />
+	</div>
+	</a-modal>
+
+</template>
+
+<script>
+import { defineComponent,ref,reactive,toRefs, onMounted} from "vue";
+export default defineComponent({
+    components: {
+    },
+    setup(){
+		let weiXinModel = reactive({
+			weiXinModel:false,
+			weiXinModelMask:true,
+			pageWidth:'50%',
+		})
+		let data = reactive({
+			loadingShow:false,
+			scriptSrc:'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js',
+		})
+		const init = async ()=>{
+			weiXinModel.weiXinModel = true
+			var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
+			await new Promise((resolve, reject) => {
+				if(!existingScript){
+					const script = document.createElement('script')
+					script.type = 'text/javascript'
+					script.src = data.scriptSrc
+					document.body.appendChild(script)
+					script.onload = ()=>{
+						resolve()
+					}
+				}else{resolve()}
+			})
+			setWeiXin()
+		}
+		const setWeiXin = ()=>{
+			let http = window.location.href.replace(/^https?:\/\//, '')
+			http = 'http://localhost:10086'
+			new WxLogin({
+				self_redirect: false,    //默认为false(保留当前二维码)  true(当前二维码所在的地方通过iframe 内跳转到 redirect_uri)
+				id: "wx_id_signin",  //容器的id
+				appid: "wxcfb92eb28d6385f5",  //应用唯一标识，在微信开放平台提交应用审核通过后获得
+				scope: "snsapi_login",   //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
+				redirect_uri: `${http}/login`,    //扫完码授权成功跳转到的路径
+				state: 'weiXin',    //用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止 csrf 攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加 session 进行校验
+				style: "black",   //提供"black"、"white"可选，默认为黑色文字描述
+				href: "data:text/css;base64,DQoud2ViX3FyY29kZV90eXBlX2lmcmFtZXsNCglkaXNwbGF5OiBmbGV4Ow0KCWFsaWduLWl0ZW1zOiBjZW50ZXI7DQoJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQp9DQoud2ViX3FyY29kZV9wYW5lbF9hcmVhew0KCWhlaWdodDogMTAwJTsNCglkaXNwbGF5OiBmbGV4Ow0KCWFsaWduLWl0ZW1zOiBjZW50ZXI7DQoJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQp9"  //自定义样式链接，第三方可根据实际需求覆盖默认样式
+			});
+		}
+		const cancelDsign = ()=>{
+			weiXinModel.weiXinModel = false
+		}
+        return{
+			...toRefs(weiXinModel),
+			...toRefs(data),
+			init,
+			cancelDsign,
+        }
+    },
+    data() {
+        return {
+        };
+    },
+    methods: {
+    },
+});
+</script>
+<style lang="less" scoped>
+.weiXinLogin {
+    width: 100%;
+    height: 100%;
+	#wx_id_signin{
+		display: flex;
+		justify-content: center;
+		height: 100%;
+		align-items: center;
+	}
+	.web_qrcode_type_iframe{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.tpl_for_iframe{
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>
--- a/src/component/Pay/allOrder.vue
+++ b/src/component/Pay/allOrder.vue
@@ -3,7 +3,7 @@
 		<div class="generalModel_table_search">
 			<div class="generalModel_state">
 				<div class="generalModel_state_item">
-					<span>{{$t('allOrder.Time')}}:</span>
+					<!-- <span>{{$t('allOrder.Time')}}:</span> -->
 						<a-range-picker
 						class="range_picker"
 						v-model:value="rangePickerValue"
@@ -24,29 +24,34 @@
 				</div>
 			</div>
 			<div class="generalModel_search">
-				<div
+				<div class="gallery_btn" @click="searchAllOrderList()">Search</div>
+				<div class="gallery_btn" style="margin-left: 2rem;" @click="searchAllOrderList()">Export</div>
+				<!-- <div
 					class="generalModel_search_item"
 					@click="searchAllOrderList()"
 				>
 					<span
 						class="icon iconfont icon-sousuo"
 					></span>
-				</div>
+				</div> -->
 			</div>
 		</div>
 		<div class="generalModel_table_content" ref="historyTable">
 			<a-table
 				:columns="columns"
+				:row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }"
 				:data-source="collectionList"
 				:scroll="{ y: historyTableHeight }"
 				@change="changePage"
 				:pagination="{
-					showSizeChanger: true,
+					showSizeChanger: false,
 					current: currentPage,
 					pageSize: pageSize,
 					total: total,
 					showQuickJumper: true,
 					bordered: false,
+					size:'small',
+					position:['bottomCenter']
 				}"
 			>
 				<template
@@ -56,17 +61,14 @@
 						class="operate_list"
 						v-if="column?.Operations"
 					>
-						<!-- <div
-							v-if="record.orderStatus == '支付成功'"
-							class="operate_item"
-							@click="refund(record)"
-						>
-							refund
-						</div> -->
 						<div class="operate_item">{{ $t('HistoryPage.Delete') }}</div>
 					</div>
 				</template>
+				<template #itemRender="{ type, originalElement }">
+					{{ type }}
+				</template>
 			</a-table>
+			<!-- <a-table :row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }" :columns="columns" :data-source="collectionList" /> -->
 		</div>
    </div>
 </template>
@@ -82,19 +84,20 @@ export default defineComponent({
 		const {t} = useI18n()
        const columns: any = computed(() => {
            return [
-                {
+               
+				{
                    title: useI18n().t('allOrder.Serial'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "orderNo",
                    key: "orderNo",
                },
-                {
-                    title: useI18n().t('allOrder.Title'),
+				{
+                    title: useI18n().t('allOrder.Time'),
                    align: "center",
                    ellipsis: true,
-                    dataIndex: "title",
-                    key: "title",
+                    dataIndex: "createTime",
+                    key: "createTime",
                },
                {
                    title: useI18n().t('allOrder.Money'),
@@ -104,7 +107,7 @@ export default defineComponent({
                    key: "totalFee",
                },
                {
-                    title: useI18n().t('allOrder.Payment'),
+                    title: useI18n().t('allOrder.PaymentMethods'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "paymentType",
@@ -117,6 +120,13 @@ export default defineComponent({
                    dataIndex: "orderStatus",
                    key: "orderStatus",
                },
+                {
+                    title: useI18n().t('allOrder.OrderType'),
+                    align: "center",
+                    ellipsis: true,
+                    dataIndex: "title",
+                    key: "title",
+                },

                // {
                //     title: useI18n().t("HistoryPage.Operations"),
@@ -130,6 +140,7 @@ export default defineComponent({
        let dataList: any = ref([]);
        let rangePickerValue: any = ref([]);
        let collectionList: any = ref([]);
+		
        let userInfo: any = {};
 		let currentState = ref({
 			value:'income',
@@ -144,6 +155,10 @@ export default defineComponent({
 				value:'expend',
 			},
 		])
+		let selectedRowKey = ref([])
+		const onSelectChange= (selectedRowKeys:any,)=>{
+			selectedRowKey.value = selectedRowKeys
+		}
        return {
            columns,
            dataList,
@@ -154,6 +169,8 @@ export default defineComponent({
 			currentState,
 			state,
 			t,
+			selectedRowKey,
+			onSelectChange,
        };
    },
    data() {
@@ -166,19 +183,17 @@ export default defineComponent({
        };
    },
    mounted() {
-        // let historyTable: any = this.$refs.historyTable;
-        // this.historyTableHeight = historyTable.clientHeight - 130;
-		this.getAllOrderList()
-		nextTick(()=>{
-			let historyTable: any = this.$refs.historyTable;
-			this.historyTableHeight = historyTable.clientHeight - 130;
-		})
    },
    methods: {
 		init(){
 			this.currentPage = 1
 			this.pageSize = 10
+			nextTick(()=>{
+				let historyTable: any = this.$refs.historyTable;
+				this.historyTableHeight = historyTable.clientHeight - 100;
+			})
 			this.getAllOrderList()
+			
 		},
        //改变页码
        changePage(e: any) {
@@ -193,8 +208,8 @@ export default defineComponent({
        },
 		//获取列表
        getAllOrderList() {
-			let startDate: any = this.rangePickerValue[0]?this.rangePickerValue[0] : "";
-            let endDate: any = this.rangePickerValue[1]?this.rangePickerValue[1] : "";
+			let startDate: any = this.rangePickerValue?.[0]?this.rangePickerValue[0] : "";
+            let endDate: any = this.rangePickerValue?.[1]?this.rangePickerValue[1] : "";
 			let data = {
 				endTime: endDate,
 				isIncome: this.currentState.value == 'income'?true:false,
@@ -209,6 +224,7 @@ export default defineComponent({
 					this.currentPage = 1
 					this.getAllOrderList()
 				}else{
+					rv.content.forEach((item:any) => item.key = item.id);
 					this.collectionList = rv.content
 					this.total = rv.total
 				}
@@ -218,7 +234,7 @@ export default defineComponent({
    },
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .allOrder_page{
 	padding: 0 !important;
 	flex: 1;
--- a/src/component/Pay/creditsDetail.vue
+++ b/src/component/Pay/creditsDetail.vue
@@ -3,7 +3,7 @@
 		<div class="generalModel_table_search">
 			<div class="generalModel_state">
 				<div class="generalModel_state_item">
-					<span>Time:</span>
+					<!-- <span>Time:</span> -->
 						<a-range-picker
 						class="range_picker"
 						v-model:value="rangePickerValue"
@@ -21,21 +21,22 @@
 					</a-range-picker>
 				</div>
 				<div class="generalModel_state_item">
-					<span>State:</span>
+					<!-- <span>State:</span> -->
 					<a-select v-model:value="currentState.value" style="width:25rem" size="large" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
 				</div>
 			</div>

 			
 			<div class="generalModel_search">
-				<div
+				<div class="gallery_btn" @click="searchcreditsDetailList()">Search</div>
+				<!-- <div
 					class="generalModel_search_item"
 					@click="searchcreditsDetailList()"
 				>
 					<span
 						class="icon iconfont icon-sousuo"
 					></span>
-				</div>
+				</div> -->
 			</div>
 		</div>
 		<div class="generalModel_table_content" ref="historyTable">
--- a/src/component/Pay/payMethod.vue
+++ b/src/component/Pay/payMethod.vue
@@ -0,0 +1,364 @@
+<template>
+	<div class="payMethod" ref="payMethod"></div>
+	<a-modal
+		class="generalModel"
+		:get-container="() => $refs.payMethod"
+		v-model:visible="payMethodModel"
+		:footer="null"
+		:width="pageWidth"
+		height="auto"
+		:maskClosable="false"
+		:centered="true"
+		:closable="false"
+		:mask="payMethodModelMask"
+		:keyboard="false"
+		:destroyOnClose="true"
+		:zIndex="1000"
+	>
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<!-- <i class="fi fi-rr-cross-small"></i> -->
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+			</div>
+		</div>
+		<div class="payMethodContent">
+			<div class="generalModelTitle">
+				Purchase points
+			</div>
+			<div class="generalModelInfo">
+				select a payment method
+			</div>
+			<div class="payMethod_list">
+				<label class="payMethod_item">
+					<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
+					<img src="../../assets/images/homePage/paypal.svg" alt="">
+					<span>PayPal</span>
+				</label>
+				<label class="payMethod_item">
+					<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
+					<img src="../../assets/images/homePage/bankCard.svg" alt="">
+					<span>{{ $t('upgradePlan.CreditCard') }}</span>
+				</label>
+				<label class="payMethod_item">
+					<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
+					<img src="../../assets/images/homePage/alipay.svg" alt="">
+					<span>{{ $t('upgradePlan.Alipay') }}</span>
+					<div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
+						<label>
+							<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
+							<span>{{ $t('upgradePlan.HongKong') }}</span>
+						</label>
+						<label>
+							<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
+							<span>{{ $t('upgradePlan.MainlandChina') }}</span>
+						</label>
+					</div>
+				</label>
+			</div>
+			<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
+				<label>
+					<input type="checkbox" v-model="clause">
+					<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
+				</label>
+			</div>
+			<div class="payMethod_payAffirm_btn">
+				<div class="gallery_btn white" @click="cancelDsign">Cancel</div>
+				<div class="gallery_btn" @click="payAffirm">Payment</div>
+			</div>
+			
+		</div>
+		<div class="mark_loading" v-show="isShowMark" state="true">
+			<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
+			<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
+			<div class="mark_loading_title_box">
+				<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('upgradePlan.Back') }}</div>
+				<div class="mark_loading_btn" @click="completePayment">OK</div>
+			</div>
+			
+		</div>
+	</a-modal>
+
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
+import { Https } from "@/tool/https";
+import { isEmail } from "@/tool/util";
+import { setCookie ,WriteCookie } from "@/tool/cookie";
+import { message } from "ant-design-vue";
+import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
+import { useStore } from "vuex";
+import { useI18n } from "vue-i18n";
+import { setLang } from "@/tool/guide";
+const md5 = require("md5");
+export default defineComponent({
+    components: {
+        VerificationCodeInput,
+    },
+	emits: ['completePayment'],
+    setup(prop,{emit}){
+		const store = useStore();
+		let payMethod = reactive({
+			payMethodModel:false,
+			payMethodModelMask:true,
+			pageWidth:'50%'
+		})
+		let payMethodData = reactive({
+			modeOfPayment:'paypal',
+			modeOfPaymentDetail:'ALIPAYHK',
+			labelDisclaimer:null,//dom
+			payAffirmData:{} as any,
+			clause:false,
+			newWindow:null as any,
+			isShowMark:false,
+		})
+		const init = (data:any)=>{
+			payMethod.payMethodModel = true
+			payMethodData.payAffirmData = data
+		}
+		const cancelDsign = () => {
+			payMethod.payMethodModel = false
+		}
+		const payAffirm = () => {
+		    if(!payMethodData.clause){
+				let labelDisclaimer:any = payMethodData.labelDisclaimer
+				if(!labelDisclaimer.classList.contains('animation')){
+					labelDisclaimer.classList.add('animation')
+					setTimeout(() => {
+						labelDisclaimer.classList.remove('animation')
+					}, 1000);
+				}
+				return
+			}
+			let httpsUrl
+			let url = window.location.href 
+			let payAffirmData = payMethodData.payAffirmData
+			let data = {
+				autoRenewal:true,//false为不自动续费
+				productName:payAffirmData.productName,
+				quantity:payAffirmData.quantity?payAffirmData.quantity:1,
+				returnUrl:url,
+				subscribeType:payAffirmData.subscribeType?payAffirmData.subscribeType:'',//yearly为年费，monthly为月费
+			}
+			if(payMethodData.modeOfPayment == 'paypal'){
+				httpsUrl = Https.httpUrls.payPaypal
+			}else if (payMethodData.modeOfPayment == 'stripe') {
+				httpsUrl = Https.httpUrls.payStripe
+			}else{
+				httpsUrl = Https.httpUrls.payAlipayHK
+			}
+			Https.axiosPost(httpsUrl,data).then(
+				(rv: any) => {
+					var width = 800;
+					var height = 600;
+					var left = (screen.width - width) / 2;
+					var top = (screen.height - height) / 2;
+					payMethodData.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
+					let herf
+					if(payMethodData.modeOfPayment == 'paypal'){
+						// 在新窗口中写入内容
+						herf = rv.approve;
+						// payMethodData.newWindow.location.href = rv.approve;
+					}else if(payMethodData.modeOfPayment == 'stripe'){
+						herf = rv
+						// payMethodData.newWindow.location.href = rv
+					}else{
+						let data = JSON.parse(rv)
+						herf = `${data.url}?${data.alipay_order_string}`
+						// payMethodData.newWindow.location.href = herf;
+					}
+					if(payMethodData.newWindow){
+						payMethodData.newWindow.location.href = herf
+					}else{
+						// window.open(herf, '_blank');
+						window.location.href=herf;  
+					}
+					payMethodData.isShowMark = true
+				}
+			).catch(res=>{
+			});
+		}
+		const setPaidBack = ()=>{
+			payMethod.payMethodModel = false
+			payMethodData.isShowMark = false
+			payMethodData.clause = false
+			payMethodData.modeOfPayment = 'paypal'
+			payMethodData.modeOfPaymentDetail = 'ALIPAYHK'
+		}
+		const completePayment = ()=>{
+			setPaidBack()
+			emit('completePayment')
+		}
+        return{
+			store,
+			...toRefs(payMethod),
+			...toRefs(payMethodData),
+			init,
+			cancelDsign,
+			payAffirm,
+			setPaidBack,
+			completePayment,
+        }
+    },
+    data() {
+        return {
+        };
+    },
+    methods: {
+		turnToWindow(url:any) {
+            window.open(url);
+        },
+    },
+});
+</script>
+<style lang="less" scoped>
+.payMethod {
+   .payMethodContent{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 60rem;
+		margin: 0 auto;
+		position: relative;
+		.generalModelTitle,.generalModelInfo{
+			width: 100%;
+		}
+		.payMethod_list{
+			margin-bottom: 4rem;
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			>label{
+					display: flex;
+					align-items: center;
+					padding: 0 2rem;
+					margin-bottom: 3rem;
+					cursor: pointer;
+					border: 2px solid #EFEFEF;
+					border-radius: 2rem;
+					height: 8rem;
+					width: 100%;
+				img{
+					margin: 0rem 2rem;
+					// max-width: 4rem;
+					width: 4rem;
+				}
+				.payAffirm_detail{
+					margin-left: auto;
+					display: flex;
+					>label{
+						cursor: pointer;
+						display: flex;
+						align-items: center;
+						margin-right: 1rem;
+						span{
+							margin-left: .5rem;
+						}
+					}
+					
+				}
+			}
+			>label:last-child{
+				margin: 0;
+			}
+		}
+		.payMethod_payAffirm_clause{
+			margin-bottom: 4rem;
+			label{
+				cursor: pointer;
+				input{
+					margin-right: 1rem;
+					cursor: pointer;
+					vertical-align: middle;
+				}
+				span{
+					vertical-align: top;
+					a{
+						color: #000;
+						text-decoration: underline;
+					}
+				}
+			}
+			&.animation{
+				animation: shake .3s linear;
+				@keyframes shake {
+					0%{
+						transform: translateX(0px);
+					}
+					25%{
+						transform: translateX(-10px);
+					}
+					50%{
+						transform: translateX(10px);
+					}
+					75%{
+						transform: translateX(-10px);
+					}
+					100%{
+						transform: translateX(0px);
+					}
+				}
+			}
+		}
+		.payMethod_payAffirm_btn{
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			>div{
+				width: 29rem;
+			}
+		}
+		
+   }
+   .mark_loading{
+		position: absolute;
+		z-index: 2;
+		background: #fff;
+		.mark_loading_title{
+		font-size: 3rem;
+		// text-decoration: underline;
+		font-weight: 600;
+		margin-bottom: 2rem;
+		// color: #fff;
+	}
+	.mark_loading_intro{
+		color: rgba(0, 0, 0, 0.6);
+		font-size: 1.4rem;
+		margin-bottom: 2rem;
+		text-align: center;
+		width: 80%;
+	}
+	.mark_loading_title_box{
+		display: flex;
+	}
+
+	.mark_loading_btn,.mark_loading_btn2{
+		// border: #000;
+		// color: #fff;
+		display: flex;
+		margin-top: 10px;
+		text-align: center;
+		border: 2px solid;
+		padding: 0 20px;
+		border-radius: 10px;
+		cursor: pointer;
+		padding: .3rem 4rem;
+		background: #39215b;
+		color: #fff;
+		border: none;
+		margin: 0 2rem;
+		align-items: center;
+	}
+	.mark_loading_btn2{
+		border: 2px solid #000;
+		color: #000;
+		background: rgba(0,0,0,0);
+	}
+	}
+}
+
+</style>
--- a/src/component/Pay/payOrder.vue
+++ b/src/component/Pay/payOrder.vue
@@ -1,6 +1,7 @@
 <template>
+	<div ref="payOrder_modal"></div>
    <a-modal
-        class="modal_component payOrder_modal generalModel_modal"
+        class="modal_component payOrder_modal generalModel"
        v-model:visible="showPayOrder"
        :footer="null"
        width="78%"
@@ -8,12 +9,19 @@
        :centered="true"
        :closable="false"
        wrapClassName="#app"
+		:get-container="() => $refs.payOrder_modal"
        :keyboard="false"
    >
 		
-        <div class="closeIcon">
-            <i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
-        </div>
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+			</div>
+		</div>
        <div class="payOrder_page">
 			<div class="payOrder_page_title">
 				<div class="payOrder_page_title_item" @click="setState('paypal')" :class="{active:presentState == 'paypal'}">{{ $t('payOrder.OrderInformation') }}</div>
@@ -65,16 +73,19 @@ export default defineComponent({
    methods: {
        init() {
            this.showPayOrder = true;
+			this.setState('paypal')
        },
 		setState(str:any){
-			this.presentState = str
-			let setInit:any
-			if(str == 'paypal'){
-				setInit = this.$refs.allOrder
-			}else{
-				setInit = this.$refs.creditsDetail
-			}
-			setInit.init()
+			nextTick(()=>{
+				this.presentState = str
+				let setInit:any
+				if(str == 'paypal'){
+					setInit = this.$refs.allOrder
+				}else{
+					setInit = this.$refs.creditsDetail
+				}
+				setInit.init()
+			})
 		},
 		cancelDsign(){
 			this.showPayOrder = false
@@ -82,16 +93,19 @@ export default defineComponent({
    },
 });
 </script>
-<style lang="less">
-.payOrder_modal {
-    .closeIcon {
-        z-index: 2;
-    }
+<style lang="less" scoped>
+:deep(.payOrder_modal) {
+	>.ant-modal-content{
+		>.ant-modal-body{
+			padding: 6rem;
+		}
+	}
    .payOrder_page {
        width: 100%;
        height: 100%;
-        padding: 9rem;
        overflow: hidden;
+		display: flex;
+    	flex-direction: column;
        // min-width: 1440px;
        position: relative;
 		.payOrder_page_title{
@@ -126,9 +140,10 @@ export default defineComponent({
 			}
 		}
 		.payOrder_table_content{
-			height: 100%;
+			flex: 1;
+			overflow: hidden;
 			display: flex;
-		flex-direction: column;
+			flex-direction: column;
 		}
 	}
 }
--- a/src/component/Pay/refund.vue
+++ b/src/component/Pay/refund.vue
@@ -1,216 +0,0 @@
-<template>
-   <a-modal
-		class="modal_component refund_reason"
-		v-model:visible="showRefundReason"
-		:footer="null"
-		width="50%"
-		:maskClosable="false"
-		:mask="false"
-		:centered="true"
-		:closable="false"
-		wrapClassName="#app"
-		:keyboard="false"
-	>
-		<div class="closeIcon">
-	
-			<i class="fi fi-rr-cross-small" @click.stop="cancelRefundreason()"></i>
-		</div>
-		<div class="modal_title_text">
-			Refund Reason
-		</div>
-		<div class="reason">
-			<label>
-				<div>
-					<input name="reason" type="radio" @click="getReasonCategory" value="noLike" v-model="reason">
-					<span>Dislike</span>
-				</div>
-			</label>
-			<label>
-				<div>
-					<input name="reason" type="radio" @click="getReasonCategory" value="Rests" v-model="reason">
-					<span>Rests</span>
-				</div>
-				
-				<textarea v-show="reason == 'Rests'" name="" id="" cols="40" rows="10" v-model="reasonTextarea"></textarea>
-			</label>
-		</div>
-		<div class="subitOkPreviewBtn" @click="setReason">OK</div>
-	</a-modal>
-</template>
-<script lang="ts">
-import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
-import { Https } from "@/tool/https";
-import { formatTime } from "@/tool/util";
-import { Modal, message } from "ant-design-vue";
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import { useI18n } from "vue-i18n";
-export default defineComponent({
-    components: {
-    },
-    setup() {
-        let showRefundReason: any = ref(false);
-        let record: any = ref();//订单编号
-        let reason: any = ref('noLike');//原因
-        let reasonTextarea: any = ref();//原因
-        let loadingShow: any = ref(false);
-        let { t } = useI18n();
-        return {
-			showRefundReason,
-			record,
-			reason,
-			reasonTextarea,
-			loadingShow,
-            t,
-        };
-    },
-    data() {
-        return {
-          
-        };
-    },
-    mounted() {},
-    methods: {
-		cancelRefundreason(){//关闭退款页面
-			this.record = ''
-            this.showRefundReason = false;
-		},
-        //删除分组
-        // deleteGroup(record:any,index:number){
-        //     let deleteGroupFun = (id:any,index:number) =>{
-        //         let data = {
-        //             userGroupId:id
-        //         }
-        //         Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
-        //             (rv: any) => {
-        //                 message.success(this.t('HistoryPage.jsContent1'))
-        //                 this.collectionList.splice(index,1)
-        //             }
-        //         );
-        //     }
-        //     Modal.confirm({
-        //         title: this.t('HistoryPage.jsContent2'),
-        //         icon: createVNode(ExclamationCircleOutlined),
-        //         okText: 'Yes',
-        //         cancelText: 'No',
-        //         centered:true,
-        // 		mask:false,
-        //         onOk() {
-        //             deleteGroupFun(record.id,index)
-        //         }
-        //     });
-        // },
-
-        refund(record: any) {
-            // this.$router.push({name:'home',params: {id:record.id}})
-			this.record = record
-			this.showRefundReason = true
-        },
-		getReasonCategory(){
-			if(this.reason == 'Rests'){
-			}else{
-				this.reasonTextarea = ''
-			}
-		},
-		setReason(){
-			let reason = this.reason
-			this.loadingShow = true
-			if(this.reason == 'Rests'){
-				reason = this.reasonTextarea?this.reasonTextarea:this.reason
-			}
-
-			// return
-			
-			let httpsUrl = Https.httpUrls.tradeRefundAlipay
-			if(this.record.paymentType == "PayPal"){
-				httpsUrl = Https.httpUrls.tradeRefundPaypal
-			}
-			Https.axiosPost(
-                httpsUrl + `/${this.record.orderNo}/${reason}`,
-                {}
-            ).then((rv: any) => {
-				this.loadingShow = false
-				this.showRefundReason = false
-			})
-			.catch((res) => {});
-		},
-    },
-});
-</script>
-<style lang="less">
-.refund_reason{
-    // max-width: 1200px ;
-    // max-width: 1150px ;
-    .ant-modal-content {
-        border-radius: calc(1rem * 1.2);
-        overflow: hidden;
-        .ant-modal-header {
-            background-color: #fff;
-            border-bottom: none;
-        }
-        .ant-modal-body {
-            // height: calc(65vh - 6.4rem);
-            height: calc(65rem * 1.2);
-        }
-        //进度完成字体颜色
-
-        .ant-progress-circle.ant-progress-status-success .ant-progress-text {
-            color: #000;
-        }
-        .ant-progress-circle .ant-progress-text {
-            color: rgba(0, 0, 0, 0.55);
-            font-size: calc(1.6rem * 1.2);
-        }
-    }
-}
-
-.modal_component.refund_reason{
-    .ant-modal-content {
-		.ant-modal-body {
-			// height: calc(65vh - 6.4rem);
-			padding: 3rem;
-			height: calc(40rem * 1.2);
-		}
-	}
-	
-}
-</style>
-<style lang="less">
-.refund_reason{
-	.reason{
-		height: calc(27rem * 1.2);
-		display: flex;
-		flex-direction: column;
-		padding: 0 3rem;
-		font-size: 1.6rem;
-		label{
-			display: flex;
-			align-items: flex-start;
-			flex-direction: column;
-			overflow: hidden;
-			div{
-				display: flex;
-				justify-content: center;
-				margin-bottom: 1rem;
-			}
-			input,span{
-				cursor: pointer;
-			}
-			span{
-				margin: 0 1rem;
-			}
-			textarea{
-				flex: 1;
-				width: 100%;
-				outline-color:#767676;
-				resize: none;
-			}
-			textarea:focus-visible {
-				border-color: #767676;
-			}
-		}
-	}
-	.subitOkPreviewBtn{
-		margin-top: 1rem;
-	}
-}
-</style>
--- a/src/component/WorksPage/newScaleImage.vue
+++ b/src/component/WorksPage/newScaleImage.vue
@@ -1,8 +1,10 @@
 <template>
+	<div ref="newScaleImageModal"></div>
 		<a-modal
            class="newScaleImage_modal generalModel"
            v-model:visible="scaleImage"
            :footer="null"
+			:get-container="() => $refs.newScaleImageModal"
            width="78%"
            :maskClosable="false"
            :centered="true"
@@ -13,7 +15,11 @@
        >
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign('')">
-				<i class="fi fi-rr-cross-small"></i>
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 			</div>
 			<!-- <div class="collection_closeIcon" @click.stop="download()">
 				<i class="fi fi-rr-down-to-line"></i>
@@ -692,8 +698,20 @@ export default defineComponent({
    },
 });
 </script>
-
 <style lang="less">
+.newScaleImage_modal {
+	--margin: 3rem;
+	--padding: 2rem;
+	--border-color: #c4c4c4;
+	--background-color:#f5f5f5;
+	--count: 50;
+	--snap-size: 10rem;
+	--offset: 2;
+	--auther_wh: 8rem;
+	--content-height: 60rem;
+}
+</style>
+<style lang="less" scoped>
 .newScaleImage_modal {
 	.ant-modal-body{
 		padding: 9rem;
@@ -704,11 +722,6 @@ export default defineComponent({
 		display: flex;
 		&.newScaleImage_page::-webkit-scrollbar{display: none;}
 	}
-    
-	--margin: 3rem;
-	--padding: 2rem;
-	--border-color: #c4c4c4;
-	--background-color:#f5f5f5;
 	.scaleImage_chunk_item{
 		background: var(--background-color);
 		padding: var(--padding);
@@ -833,7 +846,6 @@ export default defineComponent({
 		position: sticky;
 		top: 0;
 		.newScaleImage_content_right{
-			--content-height: 60rem;
 			display: flex;
 			width: 100%;
 			flex-wrap: wrap;
@@ -876,9 +888,7 @@ export default defineComponent({
 				}
 				
 			}
-			--count: 50;
-			--snap-size: 10rem;
-			--offset: 2;
+			
 			.nav_centent{
 				// width: auto;
 				display: flex;
@@ -934,7 +944,7 @@ export default defineComponent({
 		.newScaleImage_right_content{
 			display: flex;
 			flex-direction: column;
-			height: var(--content-height);
+			// height: var(--content-height);
 			.detail_left_right_item_click{
 				cursor: pointer;
 				i{
@@ -1247,7 +1257,8 @@ export default defineComponent({
 					width: 100%;
 					display: flex;
 					margin-top: var(--padding);
-					--auther_wh: 8rem;
+					
+
 					.detail_right_auther_img_item{
 						text-align: center;
 						width: var(--auther_wh);
--- a/src/component/WorksPage/newScaleImageMobile.vue
+++ b/src/component/WorksPage/newScaleImageMobile.vue
@@ -1,9 +1,11 @@
 <template>
            <!-- width="78%" -->
+		<div ref="newScaleImageMobileModal"></div>
 		<a-modal
            class="newScaleImageMobile_modal generalModel"
            v-model:visible="scaleImage"
            :footer="null"
+			:get-container="() => $refs.newScaleImageMobileModal"
            width="100%"
            :maskClosable="false"
            :centered="true"
@@ -14,7 +16,11 @@
        >
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign('')">
-				<i class="fi fi-rr-cross-small"></i>
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 			</div>
 			<!-- <div class="collection_closeIcon" @click.stop="download()">
 				<i class="fi fi-rr-down-to-line"></i>
@@ -608,8 +614,20 @@ export default defineComponent({
    },
 });
 </script>
-
 <style lang="less">
+.newScaleImageMobile_modal {
+	--margin: 3rem;
+	--padding: 2rem;
+	--border-color: #c4c4c4;
+	--background-color:#f5f5f5;
+	--content-height: 60rem;
+	--auther_wh: 8rem;
+	--count: 50;
+	--snap-size: 10rem;
+	--offset: 2;
+}
+</style>
+<style lang="less" scoped>
 .swiper{
 	padding-bottom: 2rem;
 }
@@ -640,10 +658,7 @@ export default defineComponent({
 		&.newScaleImageMobile_page::-webkit-scrollbar{display: none;}
 	}
    
-	--margin: 3rem;
-	--padding: 2rem;
-	--border-color: #c4c4c4;
-	--background-color:#f5f5f5;
+	
 	.scaleImage_chunk_item{
 		// background: var(--background-color);
 		padding: var(--padding) 0;
@@ -763,7 +778,6 @@ export default defineComponent({
 		top: 0;
 		height: 55vh;
 		.newScaleImageMobile_content_right{
-			--content-height: 60rem;
 			display: flex;
 			width: 100%;
 			flex-wrap: wrap;
@@ -791,9 +805,7 @@ export default defineComponent({
 				}
 				
 			}
-			--count: 50;
-			--snap-size: 10rem;
-			--offset: 2;
+			
 			.nav_centent{
 				// width: auto;
 				display: flex;
@@ -849,7 +861,7 @@ export default defineComponent({
 		.newScaleImageMobile_right_content{
 			display: flex;
 			flex-direction: column;
-			height: var(--content-height);
+			// height: var(--content-height);
 			.detail_left_right_item_click{
 				cursor: pointer;
 				i{
@@ -1163,7 +1175,7 @@ export default defineComponent({
 					width: 100%;
 					display: flex;
 					margin-top: var(--padding);
-					--auther_wh: 8rem;
+					
 					.detail_right_auther_img_item{
 						text-align: center;
 						width: var(--auther_wh);
--- a/src/component/WorksPage/publish.vue
+++ b/src/component/WorksPage/publish.vue
@@ -1,8 +1,10 @@
 <template>
+	<div ref="publishModal"></div>
 		<a-modal
            class="publish_modal generalModel"
            v-model:visible="publish"
            :footer="null"
+			:get-container="() => $refs.publishModal"
            width="50%"
            :maskClosable="false"
            :centered="true"
@@ -12,7 +14,11 @@
        >
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<i class="fi fi-rr-cross-small"></i>
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 			</div>
 		</div>
 		<div class="publish_content">
--- a/src/component/mainPage/signUp/index.vue
+++ b/src/component/mainPage/signUp/index.vue
@@ -0,0 +1,275 @@
+<template>
+	<div class="signUp" v-if="signUp">
+		<div class="selectSignUp" v-show="!isSelectSignUp">
+			<div class="back" @click="close">
+				&lt; BACK
+			</div>
+			<div class="title">Choose your subscription plan</div>
+			<div class="introduce" @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</div>
+			<div class="gallery_list product_list">
+				<div class="gallery_item" v-for="item in productList" :key="item">
+					<div class="product_signUp_box">
+						<div class="title">{{ item.title }}</div>
+						<div class="info">{{ item.info }}</div>
+						<div class="detail">{{ item.detail }}</div>
+						<div class="highlight">{{ item.highlight }}</div>
+						<div class="gallery_btn gallery_btn_radius" @click="createAccount">Create account</div>
+					</div>
+					<ul class="product_detail">
+						<li v-for="detailItem in item.detailList">{{ detailItem }}</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+		<div class="introductDetail" v-show="isSelectSignUp">
+			<div class="title">Choose your subscription plan</div>
+			<div class="gallery_list introductList">
+				<div class="gallery_item" v-for="item in introductList" :key="item">
+					<div class="itemIcon">
+						<img :src="item.img" alt="">
+					</div>
+					<div class="title">{{ item.title }}</div>
+					<div class="info">{{ item.info }}</div>
+				</div>
+			</div>
+			<div class="gallery_btn" style="width: 20rem;" @click="()=>isSelectSignUp=false">Create account</div>
+		</div>
+		<registerModel ref="registerModel"></registerModel>
+	</div>
+</template>
+<script>
+	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+	import registerModel from './registerModel.vue'
+
+    export default defineComponent({
+		components: {
+		    registerModel,
+		},
+        name: "login",
+		emits: ['close'],
+		setup(props, { emit }) {
+			let dom = reactive({
+				registerModel:null
+			})
+			let data = reactive({
+				signUp:false,
+				isSelectSignUp:false,
+				productList:[
+					{
+						title:"Personal version",
+						info:"Try for 5 days",
+						detail:"AI Fashion Design Assistant",
+						highlight:"Free 5-day trial",
+						detailList:[
+							'AI Fashion Design Assistant',
+							'Basic 3D service functions',
+							'Individual Credit Limit for Independent Use',
+							'Works can be shared in public galleries',
+							'Support monthly/annual payment options',
+							'Suitable for individual creators and freelance designers to use'
+						]
+					},{
+						title:"Education Edition",
+						info:"XXX / Year",
+						detail:"Multi user management system for universities",
+						highlight:"Free 5-day trial",
+						detailList:[
+							'Multi user management system for universities',
+							'Credit limits are shared across the entire school',
+							'AI assisted design teaching function',
+							'Support sketch creativity and design inspiration teaching',
+							'Basic 3D design functions',
+						]
+					},{
+						title:"Enterprise Edition",
+						info:"XXX / Year",
+						detail:"Enterprise level multi person collaboration system",
+						highlight:"Free 5-day trial",
+						detailList:[
+							'Enterprise level multi person collaboration system',
+							'Internal Credit Sharing within Enterprises',
+							'Brand DNA management system, customizable brand Exclusive design preferences',
+							'Cloud based design generation and management',
+							'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
+							'Enterprise level data security assurance',
+							'Suitable for fashion design teams and brands to use',
+						]
+					},
+				],
+				introductList:[
+					{
+						img:'/image/homeIntroduct/introduct1.png',
+						title:'Quickly generate images',
+						info:'Based on your creative inspiration and brand DNA, it only takes 10 seconds to design a fashion collection',
+					},{
+						img:'/image/homeIntroduct/introduct2.png',
+						title:'Generate plan',
+						info:'Upload inspiration boards, colors, fabric printing patterns, and sketches to generate unlimited design suggestions',
+					},{
+						img:'/image/homeIntroduct/introduct3.png',
+						title:'Simple operation',
+						info:'Just a few clicks to save and retrieve your design',
+					},{
+						img:'/image/homeIntroduct/introduct4.png',
+						title:'Cloud',
+						info:'After subscribing, you can access it anytime and anywhere through the cloud system',
+					},{
+						img:'/image/homeIntroduct/introduct5.png',
+						title:'Usage',
+						info:'Simplified operation, it only takes about ten minutes to learn how to use it',
+					},{
+						img:'/image/homeIntroduct/introduct6.png',
+						title:'Email',
+						info:'By info@code-create.com.hk Contact us to learn more',
+					},
+				]
+			})
+			const init = ()=>{
+				data.signUp = true
+			}
+			const close = ()=>{
+				data.signUp = false
+				emit('close')
+			}
+			const createAccount = ()=>{
+				if(window.innerWidth < 768){
+					dom.registerModel.pageWidth = '100%'
+				}
+				dom.registerModel.init()
+			}
+			onMounted(()=>{
+				
+			})
+			return {
+				...toRefs(dom),
+				...toRefs(data),
+				init,
+				close,
+				createAccount,
+            }
+		},
+    })
+</script>
+<style scoped lang="less">
+.signUp{
+	flex: 1;
+	padding: 0rem 4rem;
+	.back{
+		font-size: 1.6rem;
+		margin-bottom: 3rem;
+	}
+	.back,.introduce{
+		cursor: pointer;
+	}
+	.title,.introduce{
+		font-weight: 600;
+		margin-bottom: 4rem;
+	}
+	.title{
+		font-size: 3rem;
+	}
+	.introduce{
+		font-size: 2.4rem;
+		text-decoration: underline;
+	}
+	.gallery_list{
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		.gallery_item{
+			width: calc(33.333% - 3rem);
+			.title,.info,.highlight{
+				font-weight: 600;
+			}
+			.title{
+				font-size: 2rem;
+				margin-bottom: 10px;
+			}
+			.info,.detail,.gallery_btn{
+				font-size: 1.6rem;
+			}
+			.detail{
+				margin-top: 6rem;
+				margin-bottom: 7.6rem;
+			}
+			.highlight{
+				font-size: 2.4rem;
+				position: absolute;
+				top: 0;
+				right: 0;
+				background: linear-gradient(88.13deg, #FBD2FF 0.91%, #E6D3FF 52.5%, #B694FF 101.09%);
+				border-radius: 0px 2.8rem 0px 1rem;
+				padding: 1rem 2rem;
+			}
+			.gallery_btn{
+				line-height: 6rem;
+				width: 100%;
+				padding: 0;
+			}
+		}
+	}
+	.product_list{
+		.gallery_item{
+			.product_signUp_box{
+				border-radius: 3rem;
+				border: 2px solid #000;
+				padding: 3rem;
+				position: relative;
+			}
+			.product_detail{
+				margin-top: 4rem;
+				padding-left: 20px;
+				li{
+					list-style: disc;
+					margin-bottom: 10px;
+				}
+				li:last-child{
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
+	.introductDetail{
+		>.title{
+			margin-top: 6rem;
+			text-align: center;
+		}
+		.introductList{
+			width: 130rem;
+			margin: 8rem auto 0rem auto;
+		}
+		.gallery_item{
+			margin-bottom: 6rem;
+			.itemIcon{
+				width: 8rem;
+				height: 8rem;
+				border-radius: 2rem;
+				background: #000;
+				margin-right: auto;
+				margin-left: auto;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.title{
+				text-align: center;
+			}
+			.info{
+				font-weight: 500;
+				height: 9rem;
+			}
+			>div{
+				margin-bottom: 2rem;
+			}
+			>div:last-child{
+				margin-bottom: 0;
+			}
+		}
+		.gallery_btn{
+			position: relative;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+	}
+}
+</style>
--- a/src/component/mainPage/signUp/registerModel.vue
+++ b/src/component/mainPage/signUp/registerModel.vue
@@ -1,6 +1,8 @@
 <template>
+	<div ref="register"></div>
 	<a-modal
-		class="registerModel_modal generalModel"
+		class="register generalModel"
+		:get-container="() => $refs.register"
 		v-model:visible="registerModel"
 		:footer="null"
 		:width="pageWidth"
@@ -10,11 +12,16 @@
 		:mask="registerModelMask"
 		:keyboard="false"
 		:destroyOnClose="true"
-		:zIndex="1050"
+		:zIndex="1000"
 	>
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<i class="fi fi-rr-cross-small"></i>
+				<!-- <i class="fi fi-rr-cross-small"></i> -->
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 			</div>
 		</div>
 		<div class="login_page">
@@ -29,7 +36,7 @@
 									'login_active',
 								]"
 							>
-								Visitor Register  AiDA 3.0
+								Register for AiDA 3.0
 							</div>
 						</div>
 						<!-- 账号密码登录 start -->
@@ -135,9 +142,15 @@
 									<span>I agree to all Term, Privacy Policy and Fees</span>
 								</label>
 							</div>
-							
+							<div class="thirdPartyLogin marign_top30">
+								<googleLogin @googelLogin="googelLogin"></googleLogin>
+								<weiXinLogin></weiXinLogin>
+								<phoneLogin></phoneLogin>
+							</div>
 							<div
-								class="login_submit_button marign_top40" :state="emailStap"
+								class="login_submit_button marign_top40" 
+								style="width: 100%;"
+								:state="emailStap"
 								@click="submitPerLogin()"
 							>
 							Register
@@ -233,13 +246,16 @@ import { isEmail } from "@/tool/util";
 import { setCookie ,WriteCookie } from "@/tool/cookie";
 import { message } from "ant-design-vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
+import googleLogin from "@/component/LoginPage/googleLogin.vue";
+import weiXinLogin from "@/component/LoginPage/weiXinLogin.vue";
+import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
 const md5 = require("md5");
 export default defineComponent({
    components: {
-        VerificationCodeInput,
+        VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
    },
    setup(){
        let timer:any =  0;
@@ -247,7 +263,7 @@ export default defineComponent({
 		const store = useStore();
 		let register = reactive({
 			registerModel:false,
-			registerModelMask:false,
+			registerModelMask:true,
 			pageWidth:'50%'
 		})
        return{
@@ -283,6 +299,8 @@ export default defineComponent({
    methods: {
 		init(){
 			this.registerModel = true
+			this.emailLastStepFun()
+			
 		},
        changeLoginType(type: string) {
            this.loginType = type;
@@ -451,7 +469,72 @@ export default defineComponent({
        changePasswordType(){
            this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
        },
+		//微信登录
+		wechatLogin(value:any) {
+			let data = {
+				code : value.code
+			}
+		    Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
+                .then((rv: any) => {
+					this.setSuccessLogin(rv)
+                })
+                .catch((res) => {});
+		},
+		//谷歌登录
+		googelLogin(value:any) {
+			let data = {credential : value}
+		    Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
+                .then((rv: any) => {
+					this.setSuccessLogin(rv)
+                })
+                .catch((res) => {});
+		},
+		setSuccessLogin(rv:any){
+			if (rv) {
+				if (rv.systemUser == 4) {
+					rv.systemUser = 1;
+				}
+				this.createTimer();
+				let isTest = rv.systemUser == 3 ? true : false;
+				let isBeginner = rv.isBeginner == 1 ? true : false;
+				let token = rv.token;
+				setCookie("isMurmur", false);
+				setCookie("token", token);
+				setCookie("isTest", isTest);
+				setCookie("isBeginner", isBeginner);
+				setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
+				setCookie("userInfo", JSON.stringify(rv));
+				this.store.commit("setSystemUser", rv.systemUser);
+				let obj: any = {
+					avatar: rv.avatar,
+					followeeCount: rv.followeeCount,
+					followerCount: rv.followerCount,
+				};

+				this.store.commit("setUserInfo", obj);
+				if (rv.systemUser == 0) {
+					this.turnToHomePage("/Square");
+				} else {
+					if (window.innerWidth < 768) {
+						message.info(
+							"If you need to design, please log in using an iPad or computer."
+						);
+						this.turnToHomePage("/Square");
+					} else {
+						this.turnToHomePage("/home");
+					}
+				}
+				sessionStorage.setItem(
+					"isTimeOne",
+					JSON.stringify(false)
+				); //是否需要公告 提示 弹窗
+				let randomNum: any =
+					Math.floor(Math.random() * 9000000000000000) +
+					1000000000000000;
+				sessionStorage.setItem("sessionId", randomNum);
+				sessionStorage.setItem("record", JSON.stringify([]));
+			}
+		},
        //邮箱登录提交
        submitEmailLogin(emailVerifyCode: any) {
            let data = {
@@ -465,27 +548,7 @@ export default defineComponent({
            };
            Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data).then(
                (rv: any) => {
-                    if (rv) {
-						if(rv.systemUser == 4){
-							rv.systemUser = 1
-						}
-                        this.createTimer();
-						let isTest = rv.systemUser == 3?true:false
-						let isBeginner = rv.isBeginner == 1?true:false
-                        let token = rv.token;
-                        setCookie("isMurmur", false);
-                        setCookie("token", token);
-                        setCookie("isTest", isTest);
-                        setCookie("isBeginner", isBeginner);
-                        setCookie("isBeginnerNum", 0);//从第一步开始，机器人开始的话就是从第二部开始
-                        setCookie("userInfo", JSON.stringify(rv));
-						this.store.commit("setSystemUser",rv.systemUser)
-						sessionStorage.setItem('isTimeOne', JSON.stringify(false));//是否需要公告 提示 弹窗
-						let randomNum:any = Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
-						sessionStorage.setItem('sessionId', randomNum);  
-						sessionStorage.setItem('record', JSON.stringify([]))
-						this.$router.go(0);
-                    }
+					this.setSuccessLogin(rv)
                }
 			).catch(res=>{
 			});
@@ -559,8 +622,8 @@ export default defineComponent({
    },
 });
 </script>
-<style lang="less">
-.registerModel_modal{
+<style lang="less" scoped>
+:deep(.register){
 	@media (max-width: 768px) {
 		// box-shadow: none;
 		// height: 100%;
@@ -576,9 +639,7 @@ export default defineComponent({
 			}
 		}
 	}
-	
 }
-	
 </style>
 <style lang="less" scoped>
 .login_page {
@@ -699,15 +760,17 @@ export default defineComponent({
                    width: 100%;
                    height: 5rem;
                    margin-top: 1rem;
-                    border: 0.1rem solid #DFDFDF;
+                    border: 0.1rem solid #dfdfdf;
                    border-radius: 2.5rem;
                    padding-left: 2.1rem;
                    line-height: 5rem;
                    font-size: 1.4rem;
                    box-sizing: border-box;
                    outline: none;
-                    
-
+					transition: all .3s;
+					&:hover{
+						border: 0.1rem solid #000;
+					}
                    &::placeholder {
                        color: #a5b0c2;
                    }
@@ -760,9 +823,13 @@ export default defineComponent({
                font-weight: 500;
                color: #ffffff;
                cursor: pointer;
-				&[state="2"]{
-					cursor: not-allowed;
+				transition: all .3s;
+				&:hover{
+					background: #3C3C3C;
 				}
+                &[state="2"] {
+                    cursor: not-allowed;
+                }
            }
            .login_text {
                font-size: 1.6rem;
@@ -873,7 +940,13 @@ export default defineComponent({
    .marign_top40 {
        margin-top: 4rem;
    }
-
+	.thirdPartyLogin{
+		display: flex;
+		justify-content: flex-start;
+		>div{
+			margin-right: 1rem;
+		}
+	}
    .tip_content {
        font-size: 1.3rem;
        font-weight: bold;
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -70,12 +70,6 @@
 </template>
 <script>
 import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue";
-import { Https } from "@/tool/https";
-import { formatTime } from "@/tool/util";
-import { setCookie, getCookie } from "@/tool/cookie";
-import { Modal, message } from "ant-design-vue";
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import allOrder from "@/component/Pay/allOrder.vue";
 import creditsDetail from "@/component/Pay/creditsDetail.vue";
 import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
 import { useI18n } from "vue-i18n";
@@ -85,7 +79,7 @@ import liquefaction from "@/component/modules/liquefaction.vue";
 export default defineComponent({
    components: {
 		creditsDetail,
-		allOrder,liquefaction
+		liquefaction
    },
 	emits: ['submitBase64Data'],
 	props: {
--- a/src/component/modules/liquefaction.vue
+++ b/src/component/modules/liquefaction.vue
@@ -1,8 +1,10 @@
 <template>
+	<div ref="liquefactionModal"></div>
    <a-modal
        class="liquefaction generalModel"
        v-model:visible="liqufeaction"
        :footer="null"
+		:get-container="() => $refs.liquefactionModal"
        width="78%"
        :maskClosable="false"
        :centered="true"
@@ -12,7 +14,11 @@
    >
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<i class="fi fi-rr-cross-small"></i>
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
 			</div>
 		</div>
 		
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -27,11 +27,13 @@ export default {
 	},
 	allOrder:{
 		Time:'时间',
-		Serial:'序号',
-		Title:'名字',
+		Serial:'ID',
 		Money:'金额',
+		Title:'名字',
+		PaymentMethods:'支付方式',
 		Payment:'支付方式',
 		State:'状态',
+		OrderType:'类型',
 		Income:'支出',
 		Expend:'收入',
 		credits:'积分',
@@ -137,7 +139,7 @@ export default {
 		Reset:'重置',
 		Design:'设计',
 		Redesign:'重新设计',
-		GeneratedDesign:'生成的设计',
+		GeneratedDesign:'生成设计，请选择您最喜欢的设计',
 		SelectedDesign:'喜欢的设计',
 		Export:'导出',
 		moodboard:"情绪板",
@@ -575,12 +577,17 @@ export default {
 	},
 	account:{
 		personCentered:'个人中心',
-		myInformation:'我的信息',
+		frontPage:'我的信息',
 		Home:'首页',
 		Messages:'消息中心',
 		Follow:'关注',
 		Fans:'粉丝',
 		editUser:'修改个人信息',
+		//account首页
+		myInfor:'我的信息',
+		bindWeChat:'绑定',
+		cancel:'订阅',
+
 		//编辑个人信息页
 		userName:'用户名',
 		email:'邮箱',
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -26,12 +26,14 @@ export default {
 		jsContent3:`You have not performed any operation for a long time. You must be active;otherwise, you will log out in {numTime} S`,
 	},
 	allOrder:{
-		Time:'Time',
-		Serial:'Serial',
+		Time:'Date',
+		Serial:'ID',
 		Title:'Title',
-		Money:'Money',
+		PaymentMethods:'Payment Methods',
+		Money:'Amount',
 		Payment:'Payment',
 		State:'State',
+		OrderType:'Order Type',
 		Income:'Income',
 		Expend:'Expend',
 		credits:'Credits',
@@ -40,8 +42,8 @@ export default {
 		createTime:'Create Time',
 	},
 	payOrder:{
-		OrderInformation:'Order Information',
-		CreditsInformation:'Credits Information',
+		OrderInformation:'Order Details',
+		CreditsInformation:'Points Details',
 	},
 	exportModel:{
 		EditExport:'Edit & Export',
@@ -137,7 +139,7 @@ export default {
 		Reset:'Reset',
 		Design:'Design',
 		Redesign:'Redesign',
-		GeneratedDesign:'Generated Design',
+		GeneratedDesign:'Generated Design，please choose your favorite design',
 		SelectedDesign:'Selected Design',
 		Export:'Export',
 		moodboard:"moodboard",
@@ -146,7 +148,7 @@ export default {
 		sketchboard:"sketchboard",
 		mannequins:"mannequins",
 		masnnequinHint:"The mannequin you use is not matched with the current clothes, which will cause the generated model to not use the selected clothes",
-		FinalizeCollection:"Finalize Collection",
+		FinalizeCollection:"complete series",
 		jsContent1:'You must choose one or more colors for further process.',
 		jsContent2:'You must choose one or more colors for further process.',
 		jsContent3:'Failed to export the file',
@@ -575,12 +577,16 @@ export default {
 	},
 	account:{
 		personCentered:'Account',
-		myInformation:'My Details',
+		frontPage:'Front Page',
 		Home:'Home',
 		Messages:'Messages',
 		Follow:'Follow',
 		Fans:'Fans',
 		editUser:'Change Information',
+		//account首页
+		myInfor:'My lnformation',
+		bindWeChat:'Bind WeChat/gmail',
+		cancel:'Cancel Renewal',
 		//编辑个人信息页
 		userName:'User Name',
 		email:'Email',
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,7 +8,7 @@ import './assets/iconfont2/iconfont.css'
 import flexible from './tool/flexible.js'
 import 'ant-design-vue/dist/antd.css';
 import Antd from 'ant-design-vue';
-import './assets/style/style.less'
+// import (reference) './assets/style/style.less';
 import VueLazyload from "vue-lazyload";
 import i18n from './lang/index'
 import { getBrowserInfo, murmur } from './tool/util'
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -77,17 +77,12 @@ const routes: Array<RouteRecordRaw> = [
 					{
 						path: "",
 						name:'accountChil',
-						redirect: "/home/account/accountHome"
+						redirect: "/home/account/frontPage"
 					},
 					{
-						path:'accountHome',
-						name:'accountHome',
-						component: _import_component('Account/accountHome.vue'),
-					},
-					{
-						path:'accountEdit',
-						name:'accountEdit',
-						component: _import_component('Account/accountEdit.vue'),
+						path:'frontPage',
+						name:'frontPage',
+						component: _import_component('Account/frontPage.vue'),
 					},
 					{
 						path:'accountMessage',
--- a/src/store/homeStore/homeStore.ts
+++ b/src/store/homeStore/homeStore.ts
@@ -43,7 +43,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
            state.designCollectionList.push(data)
        },
        addLikeDesignCollectionList(state,data){
-            state.likeDesignCollectionList.push(data)
+            state.likeDesignCollectionList.unshift(data)
        },
        deleteDesignCollectionList(state,index){
            state.designCollectionList.splice(index,1)
--- a/src/store/userHabit/userHabit.ts
+++ b/src/store/userHabit/userHabit.ts
@@ -20,6 +20,7 @@ interface UserHabit{
 	userInfo:any,
    messageSystem:any,
    sex:any,
+	userDetail:any,
 }

 const userHabit : Module<UserHabit,RootState> = {
@@ -56,6 +57,17 @@ const userHabit : Module<UserHabit,RootState> = {
 		},
 		sex:{
 		},
+		userDetail:{
+			email: "X1627315083@163.com",
+			userName: "wxd",
+			userId: 83,
+			isTrial: 0,
+			isBeginner: 0,
+			systemUser: 1,
+			avatar: "https://www.minio.aida.com.hk:12024/aida-users/87/avatar/default.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20241209%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241209T055108Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=04bb98c0a264b91f3c30173f7ab9e91de7bf31bd48440f4595fdd91f05629b80",
+			followeeCount: 3,
+			followerCount: 3
+		}
    },
    mutations:{
        res_clothingType(state,data){
@@ -139,7 +151,16 @@ const userHabit : Module<UserHabit,RootState> = {
 		setSex(state,data){
 			state.sex.value = data
 		},
-       
+		setUserDetail(state,data){
+			// state.userDetail = data
+			console.log(data);
+			data.email = data.email?data.email:'------'
+			data.userName = data.userName
+			data.userId = data.userId
+			data.avatar = data.avatar
+			data.followeeCount = data.followeeCount
+			data.followerCount = data.followerCount
+		}
    },

    actions:{
@@ -204,48 +225,15 @@ const userHabit : Module<UserHabit,RootState> = {
 					})
 			    })
 			}
-			return await Promise.all(getList.map(item => axiosGet(item)))
-			// Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'DesignElementsEnum'}}).then((rv: any) => {
-			// 	if (rv) {
-			// 		rv.forEach((item:any) => {
-			// 			let name = item.name
-			// 			item.name = item.value
-			// 			item.value = name
-			// 		});
-			// 		context.commit('setDesignElementsType',rv)
-			// 	}
-			// })
-			// Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'PrintboardLevel2TypeEnum'}}).then((rv: any) => {
-			// 	if (rv) {
-			// 		rv.forEach((item:any) => {
-			// 			let name = item.name
-			// 			item.name = item.value
-			// 			item.value = name
-			// 		});
-			// 		context.commit('setPrintType',rv)
-			// 	}
-			// })
-			// Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'FemalePosition'}}).then((rv: any) => {
-			// 	if (rv) {
-			// 		rv.forEach((item:any) => {
-			// 			let name = item.name
-			// 			item.name = item.value
-			// 			item.value = name
-			// 		});
-			// 		context.commit('setFemalePosition',rv)
-			// 	}
-			// })
-			// Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'MalePosition'}}).then((rv: any) => {
-			// 	if (rv) {
-			// 		rv.forEach((item:any) => {
-			// 			let name = item.name
-			// 			item.name = item.value
-			// 			item.value = name
-			// 		});
-			// 		context.commit('setMalePosition',rv)
-			// 		context.commit('setPosition','MalePosition')
-			// 	}
-			// })
+			let getUserDetail = ()=>{
+				return new Promise((resolve) => {
+			        Https.axiosPost(Https.httpUrls.accountDetail).then((rv: any) => {
+						context.commit('setUserDetail',rv)
+						resolve('')
+					})
+				})
+			}
+			return await Promise.all([...getList.map(item => axiosGet(item)),getUserDetail()])
 		}
    }
 }
--- a/src/tool/canvasGeneral.js
+++ b/src/tool/canvasGeneral.js
--- a/src/tool/canvasGeneralCopy.js
+++ b/src/tool/canvasGeneralCopy.js
--- a/src/tool/https.js
+++ b/src/tool/https.js
@@ -118,11 +118,14 @@ axios.interceptors.response.use((res) =>{
 export const Https = {
    httpUrls: {
        interfaceUrl: '',
+		parseGoogleCredential:'/api/third/party/parseGoogleCredential',//谷歌登录注册
+		parseWeChatCode:'/api/third/party/parseWeChatCode',//微信登录
        accountIsLogin:'/api/account/isLogin', //判断用户是否登录
        accountLogin:`/api/account/login`, //账号密码登录接口
        getUserLanguage:`/api/account/getUserLanguage`, //获取当前用户语言
        changeUserLanguage:`/api/account/changeUserLanguage`, //切换用户当前语言
        uploadAvatar:`/api/account/uploadAvatar`, //修改头像
+        accountDetail:`/api/account/getAccountDetail`, //用户详细信息

        trialUserLogout:`/account/trialUserLogout`, //试用用户退出登录接口
        completeGuidancet:`/api/account/completeGuidance`, //用户指引结束
@@ -157,6 +160,8 @@ export const Https = {
        designCollection:`/api/design/designCollection`, //设计 Conllection
        reDesignCollection:`/api/design/reDesignCollection`,//重新设计 Conllection
        countDesignProcess:'/api/design/countDesignProcess', //统计design进度
+        getDesignResult:'/api/design/getDesignResult', //查询design结果
+
        designProcess:`/api/design/designProcess`, //统计design进度
        designGetModel:`/api/design/getModel`, //导出获取模特链接

--- a/src/tool/webSocket.js
+++ b/src/tool/webSocket.js
@@ -8,6 +8,7 @@ class MyWs {
 		this.messageUrl = http+'/notification'
 		this.wsUrl = ''
 		this.reconnectionTime = null
+		this.times = 0
 	}
 	linkWs(url) {
 		if(!(JSON.parse(getCookie("userInfo"))))return
@@ -17,6 +18,7 @@ class MyWs {
 		this.ws.onmessage = (e)=>{
 			try {
 				MyWs.receiveText(JSON.parse(e.data))
+				this.times = 0
 			} catch (error) {
 				console.error('websocket',error)
 			}
@@ -32,7 +34,9 @@ class MyWs {
 		}
 	}
 	reconnection(){
+		this.times++
 		clearTimeout(this.reconnectionTime)
+		if(this.times>=10)return
 		this.reconnectionTime = setTimeout(()=>{
 		    this.linkWs(this.wsUrl)
 		},1000)
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -7,9 +7,12 @@
 						<img :src="userInfo?.avatar" alt="">
 					</div>
 					<div class="homeMain_user_detail">
+						<div class="homeMain_user_icon" @click="openAccount">
+							<img :src="userInfo?.avatar" alt="">
+						</div>
 						<div v-if="isTest" class="username">{{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
 						<div v-else class="username">{{$t('Header.hello')}}@{{ cookieUserInfo?.userName }}</div>
-						<div class="homeMain_user_detail_item homeMain_user_detail_attention">
+						<div class="homeMain_user_detail_attention">
 							<div class="attention_item">
 							<!-- 点击事件就用下面的div -->
 							<!-- <div class="attention_item attention_item_active"> -->
@@ -25,30 +28,52 @@
 								<span>作品数</span>
 							</div> -->
 						</div>
-						<div class="homeMain_user_detail_item homeMain_user_detail_setUser" @click="openAccount">
-							<i class="fi fi-rr-user"></i>
-							<div>{{$t('Header.personal')}}</div>
-							<i class="icon iconfont icon-xiala"></i>
+						<div class="homeMain_subscribe">
+							<div>
+								<span class="font">Status</span>
+								<span class="state font">Paid <i class="fi fi-ss-check-circle"></i></span>
+								<span class="time">31 Dec 2024</span>
+							</div>
+							<!-- <div>
+								<span class="font">Cancel Renewal <i class="fi fi-rr-arrow-small-right"></i></span>
+							</div> -->
 						</div>
+						<div class="homeMain_select">
+							<div class="select_item_box" @click.stop="isLanguage = !isLanguage">
+								<div class="select_item">
+									<span class="icon iconfont icon-yuyan"></span>
+									<span class="select_item_des">{{$t('Header.language')}}</span>
+									<span class="icon iconfont icon-xiala" :class="{'active': isLanguage}"></span>
+								</div>
+								<ul class="select_list" :class="{'active': isLanguage}" @click.stop="">
+									<li class="select_item" v-for="item in language"  @click="setLocale(item.value)">
+										<span class="select_item_des">{{ item.name }}</span>
+									</li>
+								</ul>
+							</div>
+							<div class="select_item" @click="orderForm()">
+								
+								<i class="fi fi-rs-notebook"></i>
+								<span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
+							</div>
+							<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(cookieUserInfo?.userId) >= 0"  :to="`/administrator`">
+								<span class="icon iconfont icon-yonghu"></span>
+								<span class="select_item_des">Administrator</span>
+							</router-link>
+
+							<div class="select_item" @click="getTutorial()">
+								<span class="fi fi-rr-book-user"></span>
+								<span class="select_item_des">{{$t('Header.Tutorial')}}</span>
+							</div>
+							<div class="select_item_long"></div>
+							<div class="select_item" @click="logout()">
+								<span class="icon iconfont icon-tuichu"></span>
+								<span class="select_item_des">{{$t('Header.logOff')}}</span>
+							</div>
+						</div>
+						
 					</div>
 				</div>
-                <div class="homeMain_user_content">
-                    <div v-if="isTest" class="username"><span>/</span> {{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
-                    <div v-else class="username"><span>/</span> {{$t('Header.hello')}}@{{ cookieUserInfo?.userName }}</div>
-                    <div
-						v-if="!isMurmur"
-
-                        :class="[
-                            'icon',
-                            'iconfont',
-                            'icon-xiala',
-                            isShowOperate ? 'icon_rotate' : '',
-                        ]"
-                        @click.stop="changeShowOperateContent()"
-                    ></div>
-                   
-                </div>
-				
 				<div
 					class="trialApproval button_second credits hideChecked"
                >
@@ -63,36 +88,16 @@
 					<!-- <i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i> -->
 					<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
                </div>
-				
+				<div class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">Subscribe now</div>
            </div>
-            <!-- <nav class="homeMain_nav_content">
-				<router-link  :class="['nav_item',$route.name === 'homePage' ? 'select_nav' : '', ]" :to="`/home/homePage`">
-					{{$t('Header.HOME')}}
-				</router-link>
-				<router-link  :class="['nav_item',$route.name === 'library' ? 'select_nav' : '', ]" :to="`/home/library`">
-					{{$t('Header.LIBRARY')}}
-				</router-link>
-				<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> -->
 			<navRouter :routerList="navRouterList"></navRouter>
 			<div class="homeMain_right">
-				<!-- <img
-                class="homeMain_logo"
-                @click="turnToNewPage('https://www.aidlab.hk/en/')"
-                src="@/assets/images/loginPage/aida_logo.png"
-            /> -->
 				<div class="trialApproval credits message">
 					<div class="message_iconItem">
 						<a-badge :count="messageNum">
 							<i class="fi fi-rr-envelope" @click="openMessage"></i>
 						</a-badge>
 					</div>
-					
 					<div class="message_iconItem">
 						<a-badge :count="messageType?.newPosted">
 							<!-- <i class="fi fi-rr-envelope" @click="openMessage"></i> -->
@@ -106,44 +111,7 @@

 				<Habit></Habit>
 			</div>
-			<nav class="select_block" v-show="isShowOperate">
-				<!-- <div class="select_item" @click="showBindEmailModal()">
-					<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">{{$t('Header.bindEmail')}}</span>
-				</div> -->
-				<div class="select_item" @click.stop="isLanguage = !isLanguage">
-					<span class="icon iconfont icon-yuyan"></span>
-					<span class="select_item_des">{{$t('Header.language')}}</span>
-				</div>
-				<!-- <div class="select_item" @click="openTask()">
-					
-					<i class="icon iconfont icon-renwu"></i>
-					<span class="select_item_des">{{$t('Header.TaskList')}}</span>
-				</div> -->
-				<div class="select_item" @click="orderForm()">
-					
-					<i class="fi fi-rs-notebook"></i>
-					<span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
-				</div>
-				<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(cookieUserInfo?.userId) >= 0"  :to="`/administrator`">
-					<span class="icon iconfont icon-yonghu"></span>
-					<span class="select_item_des">Administrator</span>
-				</router-link>
-
-				<div class="select_item" @click="getTutorial()">
-					<span class="fi fi-rr-book-user"></span>
-					<span class="select_item_des">{{$t('Header.Tutorial')}}</span>
-				</div>
-				<div class="select_item" @click="logout()">
-					<span class="icon iconfont icon-tuichu"></span>
-					<span class="select_item_des">{{$t('Header.logOff')}}</span>
-				</div>
-				
-			</nav>
-			<ul class="select_block select_list" v-show="isLanguage">
-				<li class="select_item" v-for="item in language"  @click="setLocale(item.value)">
-					<span class="select_item_des">{{ item.name }}</span>
-				</li>
-			</ul>
+			
 			<payOrder ref="payOrder"></payOrder>
 			<UpgradePlan ref="UpgradePlan"></UpgradePlan>
 			<TaskPage ref="TaskPage"></TaskPage>
@@ -160,6 +128,8 @@
 		</div>
 		<RobotAssist></RobotAssist>
 		<scaleVideo ref="scaleVideo"></scaleVideo>
+		<!-- 进行续订 -->
+		<renew ref="renew"></renew>
    </div>
 </template>
 <script >
@@ -168,6 +138,7 @@ import { isEmail } from "@/tool/util";
 import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
 import payOrder from "@/component/Pay/payOrder.vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
+import renew from "@/component/HomePage/renew.vue";
 import Habit from "@/component/Detail/habit.vue";
 import TaskPage from "@/component/HomePage/TaskPage.vue";
 import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
@@ -189,6 +160,7 @@ import MyEvent from "@/tool/myEvents";
 export default defineComponent({
    components: {
        VerificationCodeInput,
+		renew,
 		Habit,
 		RobotAssist,
 		scaleVideo,
@@ -223,11 +195,9 @@ export default defineComponent({
 		})
 		let stateList = reactive({
 			isNewPosted:false,
-			isShowOperate:false,
 			isLanguage:false,
 		})
 		let isNewPosted = ref(false)
-		let isShowOperate = ref(false)
 		let isLanguage = ref(false)

 		let newPosted = ref(null)
@@ -273,14 +243,6 @@ export default defineComponent({
            );
 		}
 		 //点击下拉图标出现操作
-		let changeShowOperateContent=() =>{
-            stateList.isShowOperate = !stateList.isShowOperate;
-            document.addEventListener(
-                "click",
-                closeShowOperateContent,
-                false
-            );
-        }
 		let changeLanguage=() =>{
 			stateList.isLanguage = !stateList.isLanguage;
            document.addEventListener(
@@ -292,12 +254,14 @@ export default defineComponent({

        //关闭下拉图标
        let closeShowOperateContent=() =>{
-            stateList.isShowOperate = false;
 			stateList.isLanguage = false
 			stateList.isNewPosted = false
            document.removeEventListener("click", closeShowOperateContent);
        }
-
+		let renew = ref(null)
+		const subscribe = ()=>{
+			renew.value.init()
+		}
 		onMounted(()=>{
 			getUnreadCount()
 			navRouterList.value = [
@@ -341,9 +305,10 @@ export default defineComponent({
 			...toRefs(stateList),
 			newPosted,
 			openNewPosted,
-			changeShowOperateContent,
 			changeLanguage,
 			closeShowOperateContent,
+			renew,
+			subscribe,
 		}
 	},
    data() {
@@ -415,15 +380,13 @@ export default defineComponent({
 		let heradeRight = document.querySelector('.homeMain_max .homeMain_right_content')
 		let userDetailMax = document.querySelector('.homeMain_max .homeMain_user')
 		let userDetailIcon = document.querySelector('.homeMain_max .homeMain_user_icon')
-		let userName = document.querySelector('.homeMain_max .homeMain_user_content')
 		let userDetail = document.querySelector('.homeMain_max .homeMain_user_detail')
 		// let anmiation = TweenMax.to(userDetailMax,1, {'margin-top':'30px',opacity:1})
 		// anmiation.stop()
 		let state
 		tl1
 		.to(userDetail,.3, {opacity:1,display:'flex'})
-		.to(userDetailIcon,.3, {'left':'15rem',y:'25%',x:'-50%',scale:1.5,opacity:1},'-=.3')
-		.to(userName,.3, {opacity:0},'-=.3')
+		// .to(userDetailIcon,.3, {'left':'16rem',y:'25%',x:'-50%',scale:1.5,opacity:1},'-=.3')
 		let overTime
 		let outTime
 		userDetailMax.addEventListener('mouseenter',(event)=>{
@@ -432,7 +395,6 @@ export default defineComponent({
 			clearTimeout(outTime)
 			overTime = setTimeout(() => {
 				state = true
-				this.isShowOperate = false
 				this.isLanguage = false
 				tl1.play()
 			}, 500);
@@ -453,9 +415,7 @@ export default defineComponent({
 		setTask(data){
 			this.openTask(data)
 		},
-        turnToNewPage(url) {
-            window.open(url);
-        },
+       

        turnToPage(name) {
            let noRefresh = name === "home" ? true : false;
@@ -647,23 +607,23 @@ export default defineComponent({
 .homeMain_heade {
 	flex-shrink: 0;
    display: flex;
-	justify-content: space-between;
 	// padding: 0 30px;
-	padding: 0 9rem;
+	padding: 0 6rem;
    width: 100%;
-    height: 7rem;
+    height: auto;
    background: rgba(255, 255, 255, 0.2);
    // border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
    position: relative;
    align-items: center;
-
-	z-index: 1049;
+	z-index: 9;
 	background-color: #fff;
 	.homeMain_right{
-		width: 33%;
+		// width: 33%;
+		width: auto;
 		display: flex;
 		justify-content: flex-end;
 		align-items: center;
+		margin-left: auto;
 		.message{
 			display: flex;
 			width: 6rem;
@@ -715,7 +675,9 @@ export default defineComponent({
        // right: 3.2rem;
 		left: 0;
        display: flex;
-		width: 33%;
+		// width: 36%;
+		margin-right: 7rem;
+		width: auto;
 		height: 100%;
 		align-items: center;
        .homeMain_icon {
@@ -734,6 +696,7 @@ export default defineComponent({
 				left: 0;
 				border-radius: 50%;
 				cursor: pointer;
+				background: #fff;
 				img{
 					width: 100%;
 					height: 100%;
@@ -745,24 +708,107 @@ export default defineComponent({
 				position: absolute;
 				top: calc(100% + .5rem);
 				background: #fff;
-				border-radius: 4px;
-				width: 30rem;
-				height: 30rem;
+				width: 32rem;
+				height: auto;
 				opacity: 0;
 				display: none;
-				box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-				padding-top: 4rem;
+				// box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
 				text-align: center;
 				flex-direction: column;
 				align-items: center;
-				padding: 4rem 3rem;
-				
+				padding: 1.2rem 2rem;
+				border: 2px solid #000;
+				border-radius: 2rem;
+				.username,.homeMain_user_detail_attention,.homeMain_subscribe{
+					margin-bottom: 2rem;
+				}
+				.homeMain_user_icon{
+					position: relative;
+				}
+				.homeMain_subscribe{
+					padding: 2rem;
+					background: #f3f3f6;
+					border-radius: 1.4rem;
+					cursor: pointer;
+					width: 100%;
+					> div{
+						display: flex;
+						margin-bottom: 2rem;
+					}
+					> div:last-child{
+					    margin-bottom: 0;
+					}
+					.font{
+						font-size: 1.6rem;
+						font-weight: 600;
+						margin-right: 1rem;
+					}
+					.state{
+						color: #3ab45c;
+					}
+					.time{
+						font-size: 1.4rem;
+						font-weight: 400;
+						margin-left: auto;
+					}
+				}
+				.homeMain_select{
+					width: 100%;
+					.select_item {
+						padding: 0 1rem;
+						border-radius: .8rem;
+						line-height: 4rem;
+						color: #4d4d4d;
+						display: flex;
+						align-items: center;
+						cursor: pointer;
+						user-select: none;
+						width: 100%;
+						flex-wrap: wrap;
+						&:hover {
+							background: #f3f3f6;
+						}
+
+						.iconfont ,.fi-rr-book-user {
+							// font-size: 1.4rem;
+						}
+
+						.select_item_des {
+							font-size: 1.6rem;
+							margin-left: 1rem;
+							font-weight: 500;
+						}
+					}
+					.select_item_long{
+						border-bottom: 1px solid #eceaea;
+						margin: 2rem 0;
+					}
+					.icon-xiala{
+						margin-left: auto;
+						&.active{
+							transform: rotate(180deg);
+						}
+					}
+					.select_list{
+						height: 0;
+						overflow: hidden;
+						transition: all .3s;
+						width: 100%;
+						margin: 0;
+						> li{
+							padding-left: 2.5rem;
+						}
+						&.active{
+							height: auto;
+						}
+					}
+				}
 				.homeMain_user_detail_attention{
 					width: 100%;
 					display: flex;
 					justify-content: space-between;
-					padding: 0 2rem;
-					border-bottom: 1px solid #e3e5e7;
+					padding-left: 3.5rem;
+					padding-right: 3.5rem;
 					.attention_item{
 						display: flex;
 						flex-direction: column;
@@ -777,32 +823,15 @@ export default defineComponent({
 							color: #39215b;
 						}
 					}
+					div{
+						font-size: 1.6rem;
+						font-weight: 600;
+					}
 					span{
 						font-size: 1.4rem;
 						color: #949eae;
 					}
 				}
-				.homeMain_user_detail_setUser{
-					display: flex;
-					align-items: center;
-					justify-content: flex-start;
-					cursor: pointer;
-					width: 100%;
-					i{
-						font-size: 2rem;
-						display: flex;
-					}
-					.fi-rr-user{
-						margin-right: 1rem;
-					}
-					.icon-xiala{
-						margin-left: auto
-					}
-				}
-				.homeMain_user_detail_item{
-					margin-top: 1rem;
-					padding-bottom: 1rem;
-				}
 			}
 			
 		}
@@ -815,29 +844,6 @@ export default defineComponent({
 				margin: .7rem;
 			}
 		}
-        .homeMain_user_content {
-			// transition: all .3s;
-            display: flex;
-            align-items: center;
-            position: relative;
-            height: 3.7rem;
-			
-			&.marLeft2{
-				margin-left: 2rem;
-			}
-            .icon-xiala {
-                font-size: 1.4rem;
-                cursor: pointer;
-				transition: .3s all;
-            }
-
-            .icon_rotate {
-                -moz-transform: rotate(180deg);
-                -webkit-transform: rotate(180deg);
-                transform: rotate(180deg);
-                animation-direction: 0.5s;
-            }
-        }
 		.credits{
 			font-size: 1.8rem;
 			color: #1a1a1a;
@@ -846,6 +852,10 @@ export default defineComponent({
 			padding: 0 1rem;
 			cursor: auto;
 			display: flex;
+			line-height: 6rem;
+			height: 6rem;
+			box-sizing: content-box;
+			border-radius: 4rem;
 			span{
 				width: 5rem;
 				display: inline-block;
@@ -855,7 +865,7 @@ export default defineComponent({
 				.credits_item{
 					transition: .3s all;
 					// height: 4rem;
-					height: 35px;
+					height: 100%;
 					// height: 3.2rem;
 					div{
 						height: 100%;
@@ -899,33 +909,37 @@ export default defineComponent({
 	overflow: hidden;
 	border: 1px solid #000000;
 	height: auto;
-	&.select_list{
-		// display: none;
-		transform: translateX(105%);
-		// transform: translateX(120%);
-	}
-	.select_item {
-		padding-left: 1.5rem;
-		height: 4.1rem;
-		color: #4d4d4d;
-		display: flex;
-		align-items: center;
-		cursor: pointer;
-		user-select: none;
+	// &.select_list{
+	// 	top: 56%;
+	// 	left: 100%;
+	// 	// transform: translateX(5%);
+	// }
+	.homeMain_select{
+		width: 100%;
+		.select_item {
+			height: 4.1rem;
+			color: #4d4d4d;
+			display: flex;
+			align-items: center;
+			cursor: pointer;
+			user-select: none;
+			width: 100%;
+			&:hover {
+				background: #f7f7f7;
+			}

-		&:hover {
-			background: #f7f7f7;
-		}
+			.iconfont ,.fi-rr-book-user {
+				// font-size: 1.4rem;
+			}

-		.iconfont ,.fi-rr-book-user {
-			font-size: 1.4rem;
-		}
-
-		.select_item_des {
-			font-size: 1.3rem;
-			margin-left: 0.8rem;
+			.select_item_des {
+				font-size: 1.6rem;
+				margin-left: 1rem;
+				font-weight: 500;
+			}
 		}
 	}
+	
 }
 .modal_component {
    .skip_content {
--- a/src/views/HomeRecommend.vue
+++ b/src/views/HomeRecommend.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="homeRecommend_max Guide_1_16_1">
+    <div class="homeRecommend_max" ref="homeRecommendMax">
        <header class="homeRecommend_heade">
            <div class="homeRecommend_right_content">
                <div class="homeRecommend_user_content">
@@ -8,56 +8,59 @@
 						@click="turnToNewPage('https://www.aidlab.hk/en/')"
 						src="@/assets/images/loginPage/aida_logo.png"
 					/>
+					<div
+						class="login_footer_item_text"
+						@click="turnToWindow(
+							'https://code-create.com.hk/aida-terms-and-conditions/'
+						)"
+					>
+						Terms&Conditions
+					</div>
+					<div
+						class="login_footer_item_text"
+						@click="turnToWindow(
+							'https://code-create.com.hk/aida-subscription-agreement/'
+						)"
+					>
+						Privacy Policy
+					</div>
                </div>
            </div>
 			<div class="homeRecommend_right">
-				<a class="started_btn" v-if="systemUser.value == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
-				<div class="started_btn" v-if="systemUser.value == 1 && !isMoblie" @click="goHome">Home</div>
-				<div class="started_btn started_btn2" v-if="systemUser.value != -1" @click="logout">log off</div>
+				<a class="gallery_btn" v-if="systemUser.value == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
+				<div class="gallery_btn" v-if="systemUser.value == 1 && !isMoblie" @click="goHome">Home</div>
+				<div class="gallery_btn white" v-if="systemUser.value != -1" @click="logout">log off</div>
 			</div>
 			<div class="homeRecommend_right" v-if="systemUser.value == -1">
-				<div class="started_btn" @click="setLogin">Login</div>
-				<div class="started_btn started_btn2" @click="setRegister">Visitor registration</div>
+				<div class="gallery_btn" @click="setLogin">Login</div>
+				<div class="gallery_btn white" @click="setRegister">Sign up</div>
 			</div>
        </header>
+		<signUp ref="signUp" @close="signUpClose"></signUp>
 		<div class="homeRecommend_content_body">
-			<div class="homeRecommend_content_body_recommend" id="aaaa">
-				<div class="content_body_recommend_left mdhidden">
-					<img class="content_body_img1 content_body_img" src="/image/mainImg/img1.png" alt="">
-					<img class="content_body_img2 content_body_img" src="/image/mainImg/img2.png" alt="">
-					<img class="content_body_img3 content_body_img" src="/image/mainImg/img3.png" alt="">
-					<img class="content_body_img4 content_body_img" src="/image/mainImg/img4.png" alt="">
-					<img class="content_body_img5 content_body_img" src="/image/mainImg/img5.png" alt="">
-				</div>
+			<div class="homeRecommend_content_body_recommend">
+				<img src="@/assets/images/homePage/home-bg.png">
 				<div class="content_body_recommend_center content_body_text">
 					<div class="content_body_recommend_center_title">
 						<h1>AiDA</h1>
 						<h3>bloom your creativity</h3>
 					</div>
 					<div class="content_body_recommend_center_btn">
-						<a class="started_btn" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
-						<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
+						<a class="gallery_btn white" style="border: none;" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
+						<a class="gallery_btn white" style="border: none;" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
 					</div>
 				</div>
-				<div class="content_body_recommend_right mdhidden">
-					<img class="content_body_img1 content_body_img" src="/image/mainImg/img6.png" alt="">
-					<img class="content_body_img2 content_body_img" src="/image/mainImg/img7.png" alt="">
-					<img class="content_body_img3 content_body_img" src="/image/mainImg/img8.png" alt="">
-					<img class="content_body_img4 content_body_img" src="/image/mainImg/img9.png" alt="">
-					<img class="content_body_img5 content_body_img" src="/image/mainImg/img10.png" alt="">
-				</div>
 			</div>
 			<Works :isScroll="false"></Works>
 		</div>
 		<div class="homeRecommend_content_adminTop" @click="setAdminUp">
 			<i class="fi fi-rr-arrow-small-up"></i>
 		</div>
-		<registerModel ref="registerModel"></registerModel>
    </div>
 	
 </template>
 <script >
-import { defineComponent, createVNode, ref , nextTick,computed, onMounted } from "vue";
+import { defineComponent, reactive, ref , nextTick,computed, onMounted, toRefs } from "vue";
 import { isEmail } from "@/tool/util";
 import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
@@ -72,18 +75,22 @@ import { useI18n } from "vue-i18n";
 import { useRouter } from 'vue-router';
 import { gsap, TweenMax } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
-import registerModel from '@/component/Login/registerModel.vue'
+import signUp from '@/component/mainPage/signUp/index.vue'
 export default defineComponent({
    components: {
        VerificationCodeInput,
 		Habit,
 		Works,
-		registerModel,
+		signUp,
    },
 	setup(){
        const store = useStore();
 		const router = useRouter();
 		let registerModel = ref()
+		let data = reactive({
+			homeRecommendMax:null,
+			signUp:null
+		})
 		let isMoblie = ref(false)
 		let systemUser = computed(()=>{
 			return store.state.UserHabit.systemUser
@@ -92,12 +99,11 @@ export default defineComponent({
 			router.push("/login");
 		}
 		let setRegister = () =>{
-			// ler
-			if(window.innerWidth < 768){
-				registerModel.value.pageWidth = '100%'
-			}
-			registerModel.value.init()
-			// router.push("/register");
+			data.signUp.init()
+			data.homeRecommendMax.classList.add('openSignUp')
+		}
+		let signUpClose = ()=>{
+			data.homeRecommendMax.classList.remove('openSignUp')
 		}
 		let setAdminUp = ()=>{
 			let scrollDom = document.querySelector('.homeRecommend_content_body')
@@ -127,10 +133,12 @@ export default defineComponent({
 			}
 		})
 		return {
+			...toRefs(data),
 			systemUser,
 			setLogin,
 			registerModel,
 			setRegister,
+			signUpClose,
 			setAdminUp,
 			logout,
 			goHome,
@@ -148,33 +156,9 @@ export default defineComponent({
 	},
    mounted() {
 		nextTick().then(()=>{
+
 			let dom = document.querySelector('.homeRecommend_content_body')
-			let codeTween = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_img')
 			let codeTweenText = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_text')
-			for (let index = 0; index < codeTween.length; index++) {
-				gsap.from(codeTween[index],.5, {scale:.6 },);
-				gsap.registerPlugin(ScrollTrigger);
-				let tl1 = gsap.timeline();
-				tl1.to(codeTween[index],1, {y:'-30px',opacity:0},)
-				ScrollTrigger.create({
-					trigger: codeTween[index], // 触发器元素
-					start: "top 0%", // 滚动触发器的起始滚动位置
-					end: '200% 20%',   // 滚动触发器的结束滚动位置
-					// markers: true, // 开启标注功能
-					scrub: true,
-					animation:tl1,
-					scroller:dom,//设置指定元素为滚动依据
-					scrub:2,
-					// onUpdate:(v)=>{
-					// 	if(v.progress < 0.1){
-					// 		v.trigger?.classList.remove('active')
-					// 	}else{
-					// 		v.trigger?.classList.add('active')
-					// 		// v.trigger?.classList.add('active')
-					// 	}
-					// }
-				});
-			}
 			gsap.registerPlugin(ScrollTrigger);
 			let tl1 = gsap.timeline();
 			tl1.from(codeTweenText,1, {'margin-top':'30px',opacity:1},)
@@ -187,12 +171,29 @@ export default defineComponent({
 				animation:tl1,
 				scroller:dom,//设置指定元素为滚动依据
 				scrub:2,
-				
+			});
+			//标题滚动背景就变为背景
+			let header = document.querySelectorAll('.homeRecommend_max .homeRecommend_heade')
+			let tl2 = gsap.timeline();
+			tl2.to(header,0.5, {'background-color':'#fff'},)
+			ScrollTrigger.create({
+				trigger: header, // 触发器元素
+				start: "0% 0%", // 滚动触发器的起始滚动位置
+				// markers: true, // 开启标注功能
+				// scrub: true,
+				animation:tl2,
+				scroller:dom,//设置指定元素为滚动依据
+				scrub:.5,
 			});
 		})
    },
    methods: {
-		
+		turnToNewPage(url) {
+            window.open(url);
+        },
+		turnToWindow(url) {
+            window.open(url);
+        },
    },
 });
 </script>
@@ -207,34 +208,54 @@ export default defineComponent({
 	.homeRecommend_content_body{
 		flex: 1;
 	}
+	&.openSignUp{
+		.homeRecommend_heade{
+			position: relative;
+			background: #fff !important;
+			.login_footer_item_text{
+				display: block;
+			}
+		}
+		.homeRecommend_content_body{
+			display: none;
+		}
+		.homeRecommend_content_adminTop{
+			display: none;
+		}
+	}
 }
 .homeRecommend_heade {
    display: flex;
 	justify-content: space-between;
 	// padding: 0 30px;
-	padding: 0 9rem;
+	padding: 1rem 4rem;
    width: 100%;
-    height: 7rem;
+    // height: 7rem;
 	flex-shrink: 0;
-    background: rgba(255, 255, 255, 0.2);
+    // background: rgba(255, 255, 255, 0.2);
    // border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
-    position: relative;
+    position: absolute;
    align-items: center;
-	z-index: 1049;
+	z-index: 2;
 	@media (max-width: 768px) {
 		z-index: 1000;
 	}
-	background-color: #fff;
+	// background-color: #fff;
 	.homeRecommend_right{
 		width: 33%;
 		display: flex;
 		justify-content: flex-end;
 		align-items: center;
-		.started_btn2{
-			color: #000;
-			background: #fff;
-			border: 2px solid #39215b;
-			margin-left: 2rem;
+		.gallery_btn{
+			// color: #000;
+			// background: #fff;
+			// border: 2px solid #39215b;
+			// margin-left: 2rem;
+			width: 13rem;
+			text-align: center;
+			&.gallery_btn:nth-child(1){
+			    margin-right: 3rem;
+			}
 		}
 	}
    .homeRecommend_logo {
@@ -242,11 +263,15 @@ export default defineComponent({
        height: 3.2rem;
 		margin-top: 0;
    }
+	.login_footer_item_text{
+		margin-left: 5rem;
+		display: none;
+	}
    .homeRecommend_right_content {
        top: 0;
 		left: 0;
        display: flex;
-		width: 33%;
+		width: 40%;
 		height: 100%;
 		align-items: center;
 		overflow: hidden;
@@ -293,138 +318,31 @@ export default defineComponent({
 		// justify-content: center;
 		position: relative;
 		border-bottom: 1px solid #ececec;
-		
-		.content_body_recommend_left,
-		.content_body_recommend_right{
-			position: absolute;
-			top: 0;
-			img{
-				border-radius: 2rem;
-				position: absolute;
-				width: 20px;
-				object-fit: cover;
-			}
-			
-		}
-		--margin:3rem;
-		.content_body_recommend_right{
-			right: 0;
-			.content_body_img1{
-				width: 20rem;
-				height: 20rem;
-				object-fit: cover;
-				top: 10rem;
-				right: calc(20rem + var(--margin));
-			}
-			.content_body_img2{
-				width: 15rem;
-				height: 15rem;
-				object-fit: cover;
-				top: calc(30rem + var(--margin));
-				right: calc(20rem + var(--margin));
-			}
-			.content_body_img3{
-				top: 38rem;
-				width: 30rem;
-				height: 30rem;
-				object-fit: cover;
-				right: calc(-13rem + var(--margin));
-			}
-			.content_body_img4{
-				width: 20rem;
-				height: 20rem;
-				object-fit: cover;
-				top: 51rem;
-				right: calc(20rem + var(--margin));
-			}
-			.content_body_img5{
-				width: 20rem;
-				height: 20rem;
-				object-fit: cover;
-				top: 15rem;
-				right: 0;
-			}
-		}
-		.content_body_recommend_left{
-			left: 0;
-			.content_body_img1{
-				width: 15rem;
-				height: 15rem;
-				object-fit: cover;
-				top: 5rem;
-				left: calc(20rem + var(--margin));
-			}
-			.content_body_img2{
-				width: 25rem;
-				height: 25rem;
-				object-fit: cover;
-				top: calc(20rem + var(--margin));
-				left: calc(20rem + var(--margin));
-			}
-			.content_body_img3{
-				width: 20rem;
-				height: 20rem;
-				object-fit: cover;
-				top: calc(10rem + var(--margin));
-				// left: calc(0 + var(--margin));
-			}
-			.content_body_img4{
-				width: 30rem;
-				height: 30rem;
-				object-fit: cover;
-				top: 36rem;
-				left: calc(-13rem + var(--margin));
-			}
-			.content_body_img5{
-				width: 20rem;
-				height: 20rem;
-				object-fit: cover;
-				top: 51rem;
-				left: calc(20rem + var(--margin));
-			}
-			.content_body_img6{
-				width: 20rem;
-				height: 20rem;
-				object-fit: cover;
-				top: 20rem;
-				left: calc(0 + var(--margin));
-			}
+		width: 100%;
+		img{
+			width: 100%;
 		}
 		.content_body_recommend_center{
-			padding: 20rem 0;
-			text-align: center;
-			width: 50%;
-			position: relative;
-			left: 50%;
-			transform: translateX(-50%);
-			z-index: 2;
-			opacity: 0;
-			@media (max-width: 768px) {
-				width: 80%;
-			}
+			position: absolute;
+			top: 40%;
+			left: 36rem;
+			transform: translateY(-50%);
 			.content_body_recommend_center_title{
+				h1,h3{
+					color: #fff;
+				}
 				h1{
+					font-size: 15rem;
+					margin-bottom: 0;
 					line-height: 1;
-					font-size: 13rem;
-					font-weight: 900;
-					margin: 7rem;
-					div{
-						color: #341e57;
-					}
 				}
 				h3{
-					line-height: 1;
-					margin: 7rem;
-					font-size: 5rem;
-					font-weight: 900;
+					font-size: 6rem;
 				}
 			}
 			.content_body_recommend_center_btn{
-				display: flex;
-				justify-content: center;
-				cursor: pointer;
-				a{
-					margin: 0 2rem;
+				a:nth-child(1){
+					margin-right: 3rem;
 				}
 			}
 		}
--- a/src/views/HomeView/Events.vue
+++ b/src/views/HomeView/Events.vue
@@ -208,7 +208,7 @@ export default defineComponent({
    // height: 100%;
 	height: auto;
 	min-height: 100%;
-	padding: 0 9rem;
+	padding: 0 6rem;
 	// min-width: 1440px;
 	position: relative;
 	padding-top: 5rem;
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -7,8 +7,8 @@
 			<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
 			<div class="page_content_body">
 				<div class="home_page_body">
-					<div class="home_page_left">
-						<div class="home_page_left_content">
+					<div class="home_page_left" ref="hidden">
+						<div class="home_page_left_content" :class="{'active':domHidden}">
 							<!-- 空状态 start-->
 							<div class="home_left_null" v-show="!isHaveReviewCollection">
 								<div>
@@ -32,10 +32,10 @@
 									<!-- <div class="button_second" @click="startNewCollection()">
 										{{ $t('HomeView.Start') }}
 									</div> -->
-									<div class="button_first button_margin" @click="recollection()">
+									<div class="gallery_btn white button_margin" @click="recollection()">
 										{{ $t('HomeView.Edit') }}
 									</div>
-									<div class="button_first button_margin" @click="resetCollection()">
+									<div class="gallery_btn white button_margin" @click="resetCollection()">
 										{{ $t('HomeView.Reset') }}
 									</div>
 								</div>
@@ -52,20 +52,37 @@
 								</div>
 							</div>
 							<!-- 有图状态 end-->
-							
+						</div>
+						<div class="home_page_left_bottom" @click="()=>domHidden = !domHidden" v-show="designCollectionId">
+							<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
 						</div>
 					</div>
 					<div class="home_page_right">
-					
 						<div class="right_top">
+						<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
 							<div class="right_top_left">
-								<div class="button_second Guide_1_15" @click="designNewCollection()">
+								<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
 									{{ $t('HomeView.Design') }}
 								</div>
-								<div class="button_first button_margin_14 Guide_1_30" v-show="designCollectionId"
+								<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
 									@click="resDesignCollection()">
 									{{ $t('HomeView.Redesign') }}
 								</div>
+								<div class="silder button_margin_14" v-show="designCollectionId">
+									<div class="text">Small</div>
+										<a-slider id="system_silder"
+											class="system_silder"
+											v-model:value="collValue"
+											@afterChange="setSystemDesigner"
+											:tooltipVisible="false"
+										>
+										</a-slider>
+									<div class="text">Big</div>
+								</div>
+								<div class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
+									<!-- {{ $t('HomeView.Export') }} -->
+									{{$t('HomeView.FinalizeCollection')}}
+								</div>
 							</div>
 						</div>

@@ -79,11 +96,35 @@
 							</div>

 							<div class="right_content_body">
-								<div class="right_content_img_block scroll_style Guide_1_17 active" v-mousewheel :class="[driver__.driver?'showEvents':'']">
+								<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
 									<div class="right_content_img_item">
 										<!-- <draggable 
 											group="people" > -->
-											<div class="content_img_block" v-for="(
+										
+										<div class="content_img_block active" :style="collStyle" draggable
+											v-for="(design, index) in likeDesignCollectionList" :key="design.id"
+											@click="designDetail(
+													design,
+													index,
+													likeDesignCollectionList,
+													'like'
+												)"
+											@dragstart="dragstart($event, index)"
+											@dragover.prevent 
+											@drop="dragDrop($event, index)">
+											<div class="content_img_flex">
+												<img class="content_img" :src="design.designOutfitUrl"
+													:key="design.designOutfitUrl" />
+											</div>
+											<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
+												dislikeDesignCollection(
+													design,
+													index
+												)">
+											</div>
+										</div>
+										<!-- </draggable> -->
+										<div class="content_img_block" :style="collStyle" v-for="(
 												design, index
 											) in designCollectionList" :key="design?.designItemId">
 												<div class="content_img_flex" 
@@ -106,64 +147,28 @@
 													">
 												</div>
 										</div>
-										<!-- </draggable> -->
-										
+										<div class="content_img_block" v-show="showDesignMark">
+											<div class="content_img_flex" >
+												<!-- <img class="content_img" v-lazy="''" /> -->
+												<img class="content_img" src="@/assets/images/homePage/loading.gif" />
+											</div> 
+										</div>
 									</div>
 								</div>
 							</div>

-							<div class="right_content_header">
+							<!-- <div class="right_content_header">
 								<div class="content_header_left">
 									<i class="fi fi-rs-comments"></i><span class="content_header_des">{{ $t('HomeView.SelectedDesign') }}</span>
 								</div>
 								<div class="right_content_export" v-show="likeDesignCollectionList.length">
-									<!-- <div class="button_second Guide_1_31" @click="exportCanvas()"> -->
-									<div class="button_second Guide_1_31" @click="exportModel()">
-										<!-- {{ $t('HomeView.Export') }} -->
-										{{$t('HomeView.FinalizeCollection')}}
-									</div>
-									<!-- <div
-										:class="[
-											'icon',
-											'iconfont',
-											'icon-xiala',
-											isShowOperate ? 'icon_rotate' : '',
-										]"
-										@click.stop="changeShowOperateContent()"
-									></div> -->
-									<!-- <div class="export_nav" v-show="isShowOperate" @click.stop="">
-										<a-checkbox v-for="item in exportNav" v-model:checked="item.change" :disabled='item.noChange'>
-											{{ item.name }}
-										</a-checkbox>
-									</div> -->
 								</div>
 								
 							</div>

 							<div class="right_content_body">
-								<div class="right_content_img_block scroll_style" v-mousewheel :class="{active:likeDesignCollectionList.length != 0}">
+								<div class="right_content_img_block scroll_style" :class="{active:likeDesignCollectionList.length != 0}">
 									<div class="right_content_img_item" id="right_content_img_block">
-										<!-- <div class="content_img_block" v-for="(
-												design, index
-											) in likeDesignCollectionList" :key="design?.id" @click="
-												designDetail(
-													design,
-													index,
-													likeDesignCollectionList,
-													'like'
-												)
-												">
-											<div class="content_img_flex">
-												<img class="content_img" v-lazy="design.designOutfitUrl"
-													:key="design.designOutfitUrl" />
-											</div>
-											<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
-												dislikeDesignCollection(
-													design,
-													index
-												)
-												"></div>
-										</div> -->
 										<div class="content_img_block" draggable
 											v-for="(design, index) in likeDesignCollectionList" :key="design.id"
 											@click="designDetail(
@@ -188,7 +193,7 @@
 										</div>
 									</div>
 								</div>
-							</div>
+							</div> -->
 						</div>
 					</div>
 				</div>
@@ -200,6 +205,7 @@
 		<productImg ref="productImg" @setTask="setTask"></productImg>
 		<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
 		<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
+
 		<!-- 导出缩略图的蒙层 start-->
 		<div class="mark_loading" v-show="isShowMark || getLangIsShowMark">
 			<a-spin size="large" />
@@ -207,14 +213,15 @@
 		<!-- 导出缩略图的蒙层 end-->

 		<!-- design collection的进度蒙层  start-->
-		<div class="progress_mark" v-show="showDesignMark">
+
+		<!-- <div class="progress_mark" v-show="showDesignMark">
 			<div class="mark_content Guide_1_16">
 				<a-progress type="circle" :percent="designProgress" strokeColor="#341e57" :width="200" />
 				<div>
 					<a-spin :indicator="indicator" />
 				</div>
 			</div>
-		</div>
+		</div> -->
 		<!-- design collection的进度蒙层  end-->
 		<affiche ref="affiche"></affiche>
 		<!-- <RobotAssist></RobotAssist> -->
@@ -224,7 +231,7 @@
 </template>

 <script lang="ts">
-import { defineComponent, h, ref, computed ,inject,provide,nextTick,createVNode} from "vue";
+import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode} from "vue";
 // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 // import HeaderComponent from "@/component/HomePage/Header.vue";
 import CollectionModal from "@/component/HomePage/collectionModal.vue";
@@ -240,7 +247,6 @@ import html2canvas from "html2canvas";
 import { message,Modal } from "ant-design-vue";
 import { useStore } from "vuex";
 import { Https } from "@/tool/https";
-import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
 import draggable from 'vuedraggable'
@@ -344,6 +350,25 @@ export default defineComponent({
 			return store.state.UploadFilesModule.chooseIsDesign})
 		let portfolio:any = ref({})
 		provide('portfolio',portfolio)
+
+		const collItemSize = reactive({
+			collValue:40,
+			collStyle:{
+				width:'24rem',
+				height:'37rem'
+			},
+			collTime:null as any,
+		})
+		const setSystemDesigner = ()=>{
+			clearTimeout(collItemSize.collTime)
+			collItemSize.collTime = setTimeout(()=>{
+				let wScale = 60,hScale = 92.5
+				let num = collItemSize.collValue
+				let {width,height} = collItemSize.collStyle
+				collItemSize.collStyle.width = wScale * ((num<20?20:num) / 100) + 'rem'
+				collItemSize.collStyle.height = hScale * ((num<20?20:num) / 100) + 'rem'
+			},500)
+		}
 		return {
 			store,
 			likeDesignCollectionList,
@@ -365,6 +390,8 @@ export default defineComponent({
 			isMannequinShow,
 			chooseIsDesign,
 			portfolio,
+			setSystemDesigner,
+			...toRefs(collItemSize),
 		};
 	},
 	data() {
@@ -387,6 +414,9 @@ export default defineComponent({
 			likeLoading: false, //喜欢防抖
 			dragIdx:0,
 			designRandom:'',
+			domHidden:false,
+
+			getDesignTime:null as any,
 		};
 	},
 	watch: {
@@ -401,6 +431,9 @@ export default defineComponent({
 			},
 		},
 	},
+	beforeUnmount(){
+		clearTimeout(this.getDesignTime);
+	},
 	async mounted() {
 		// if(JSON.parse( getCookie('isFirst') as any)){
 		// }
@@ -645,38 +678,63 @@ export default defineComponent({
 				);
 				return;
 			}
+			clearTimeout(this.getDesignTime);
 			let data = this.getDesignData("");
 			if(this.driver__.driver){
 				nextTick().then(()=>{
 					driverObj__.moveNext();
 				})
 			}
+			this.isShowMark = true
 			Https.axiosPost(Https.httpUrls.designCollection, data)
 			
 				.then((rv: any) => {
 					if (rv) {
-						this.store.commit(
-							"setDesignCollectionList",
-							rv.designCollectionItems
-						);
-						
+						let value = {
+							objectSignList:data.requestIdList.join(),
+							requestId:rv
+						}
 						this.store.commit("setLikeDesignCollectionList", []);
-						this.store.commit("deleteUserGroupId");
-						this.store.commit(
-							"setDesignCollectionId",
-							rv.collectionId
-						);
-						this.store.commit("setDesignId", rv.designId);
-						// this.designProgress = 0;
+						this.getDesignResult(value,'newDesign')
 						this.startDesignType = "design";
 					}
+					this.isShowMark = false;
 				})
 				.catch((res) => {
-					this.showDesignMark = false;
+					this.isShowMark = false;
 				})
-				// setTimeout(() => {
-					this.getDesignProcess(this.designRandom);
-				// }, 1000);
+				// this.getDesignProcess(this.designRandom);
+		},
+		getDesignResult(data:any,str:any){
+			this.showDesignMark = true
+			Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
+			.then((rv)=>{
+				if(rv.designCollectionItems){
+					this.store.commit("setDesignCollectionList",rv.designCollectionItems);
+				}
+
+				if(rv.unfinishedList.length == 0){
+					this.showDesignMark = false
+					if(str == 'newDesign'){
+						if(rv.designCollectionItems){
+							this.store.commit("deleteUserGroupId");
+							this.store.commit(
+								"setDesignCollectionId",
+								rv.collectionId
+							);
+							this.store.commit("setDesignId", rv.designId);
+						}
+					}else{
+						// this.designProgress = 0,
+						this.store.commit("setDesignId", rv.designId);
+					}
+				}else{
+					this.getDesignTime = setTimeout(()=>{
+						data.objectSignList = rv.unfinishedList.join()
+						this.getDesignResult(data,str)
+					},1000)
+				}
+			}).catch(()=>this.showDesignMark = false)
 		},
 		//重新设计collection
 		resDesignCollection() {
@@ -693,25 +751,25 @@ export default defineComponent({
 					driverObj__.moveNext();
 				})
 			}
+			clearTimeout(this.getDesignTime);
+			this.isShowMark = true
 			let data = this.getDesignData(this.designCollectionId);
 			Https.axiosPost(Https.httpUrls.reDesignCollection, data)
 				.then((rv: any) => {
 					if (rv) {
-						this.store.commit(
-							"setDesignCollectionList",
-							rv.designCollectionItems
-						);
-						// this.designProgress = 0,
+						let value = {
+							objectSignList:data.requestIdList.join(),
+							requestId:rv
+						}
+						this.getDesignResult(value,'resDesign')
 						this.startDesignType = "resDesign";
-						this.store.commit("setDesignId", rv.designId);
+						this.isShowMark = false
 					}
 				})
 				.catch((res) => {
-					this.showDesignMark = false;
+					this.isShowMark = false;
 				});
-				// setTimeout(() => {
-					this.getDesignProcess(this.designRandom);
-				// }, 1000);
+				// this.getDesignProcess(this.designRandom);

 		},
 
@@ -754,9 +812,15 @@ export default defineComponent({
 				data.collectionId = designCollectionId;
 			}
 			if(!isLoad){
-				this.designProgress = 0;
-				this.showDesignMark = true;
+				// this.designProgress = 0;
+				// this.isShowMark = true;
 			}
+			let arr = []
+			for (let index = 0; index < 8; index++) {
+				let floor = Math.floor(Math.random() * 90000000) + 10000000
+				arr.push(floor)
+			}
+			data.requestIdList = arr
 			return data;
 		},

@@ -1142,8 +1206,8 @@ export default defineComponent({
 .home_page {
 	width: 100%;
 	height: 100%;
-	padding: 0 9rem;
-	overflow: hidden;
+	padding: 0 6rem;
+	// overflow: hidden;
 	// min-width: 1440px;
 	position: relative;
 	// left: 50%;
@@ -1164,18 +1228,51 @@ export default defineComponent({
 				display: flex;
 				// padding-left: 0.7rem;
 				box-sizing: border-box;
-				overflow: hidden;
+				// overflow: hidden;

 				.home_page_left {
 					// width: 44.4rem;
-					width: 55rem;
 					height: 100%;
 					padding: 2rem 0 0 0;
 					background: rgba(255, 255, 255, 0.2);
-
+					position: relative;
+					// overflow: hidden;
+					
+					.home_page_left_bottom{
+						position: absolute;
+						width: 4rem;
+						height: 7rem;
+						background: #fff;
+						border: 2px solid;
+						border-right: none;
+						border-radius: 2rem 0 0 2rem;
+						top: 50%;
+						transform: translate(-100%,-50%);
+						left: 100%;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						z-index: 2;
+						cursor: pointer;
+						>span{
+							transition: all .3s;
+							transform: rotate(90deg);
+							&.active{
+								transform: rotate(270deg);
+							}
+						}
+						
+					}
 					.home_page_left_content {
 						height: 100%;
-
+						width: 55rem;
+						overflow: hidden;
+						transition: all .3s;
+						padding-right: 1.2rem;
+						&.active{
+							padding-right: 0;
+							width: 0;
+						}
 						.home_left_null {
 							display: flex;
 							align-items: center;
@@ -1185,7 +1282,6 @@ export default defineComponent({
 							height: 100%;
 							position: relative;
 							background: #f7f8fa;
-							border: 1px solid #f2f2f9;
 							border-radius: 2rem;
 							overflow: hidden;

@@ -1275,21 +1371,40 @@ export default defineComponent({
 						justify-content: space-between;
 						box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
 						background: rgba(255, 255, 255, 0.4);
-
+						transition: all .3s;
+						&.active{
+							overflow: hidden;
+							padding-top: 0;
+							padding-bottom: 0;
+							height: 0;
+						}
 						.right_top_left {
 							display: flex;
 							align-items: center;
-
+							width: 100%;
 							.button_margin_14 {
 								margin-left: 1.4rem;
 							}
+							.silder{
+								display: flex;
+								align-items: center;
+								.text{
+									font-weight: 600;
+									font-size: 1.8rem;
+								}
+								.system_silder{
+									margin: 0 3rem;
+									width: 12rem;
+								}
+							}
 						}
 					}

 					.right_content_block {
-						height: calc(100% - 8.584rem);
-							overflow-y: auto;
-
+						overflow-y: auto;
+						flex: 1;
+						display: flex;
+						flex-direction: column;
 						&.right_content_block::-webkit-scrollbar{display: none;}
 						&.active{
 							overflow: hidden;
@@ -1351,11 +1466,11 @@ export default defineComponent({
 							}
 						}
 						.right_content_body {
-							padding: 0 1.8rem 0 1.2rem;
+							// padding: 0 1.8rem 0 1.2rem;
 							background: rgba(255, 255, 255, 0.2);
-							height: calc(50% - 4.5rem);
-							// min-height: 280px;
-
+							// height: calc(50% - 4.5rem);
+							flex: 1;
+							overflow: auto;
 							.right_content_img_block {
 								// overflow-y: auto;
 								background: #f6f6fa;
@@ -1399,18 +1514,18 @@ export default defineComponent({
 								}
 								>div{
 									display: flex;
-									padding: 0 2.8rem 0 0.9rem;
+									flex-wrap: wrap;
+									// padding: 0 2.8rem 0 0.9rem;
 									height: 100%;
-									align-items: center;
+									align-content: flex-start;
 								}
 								.content_img_block {
 									// width: 20.1rem;
-									width: auto;
+									width: 24rem;
 									height: 37rem;
 									// height: 29.5rem;
 									margin-right: 1rem;
-									// margin-bottom: 1rem;
-									min-width: 127px;
+									margin-bottom: 1rem;
 									// min-height: 271px;
 									max-height: 100%;

@@ -1423,9 +1538,9 @@ export default defineComponent({
 										display: block;
 									}

-									&:nth-child(4n) {
-										margin-right: 0;
-									}
+									// &:nth-child(4n) {
+									// 	margin-right: 0;
+									// }

 									.content_img_flex {
 										display: flex;
@@ -1433,8 +1548,17 @@ export default defineComponent({
 										align-items: center;
 										width: 100%;
 										height: 100%;
+										border-radius: 2rem;
+										
+									}
+									&.active{
+										.icon_like{
+											display: block;
+										}
+										.content_img_flex {
+											border: 2px solid #000;
+										}
 									}
-
 									.content_img {
 										max-width: 100%;
 										max-height: 100%;
@@ -1454,7 +1578,8 @@ export default defineComponent({
 										color: #000;
 									}
 									.icon-jushoucanggift {
-										color: rgba(52, 53, 121, 1);
+										// color: rgba(52, 53, 121, 1);
+										color: #000;
 									}
 								}
 							}
--- a/src/views/HomeView/Works.vue
+++ b/src/views/HomeView/Works.vue
@@ -282,7 +282,7 @@ export default defineComponent({
    // height: 100%;
 	height: auto;
 		min-height: 100%;
-	padding: 0 9rem;
+	padding: 0 6rem;
 	// min-width: 1440px;
 	position: relative;
 	padding-top: 5rem;
--- a/src/views/HomeView/history.vue
+++ b/src/views/HomeView/history.vue
@@ -398,7 +398,7 @@ export default defineComponent({
 .history_page {
    width: 100%;
    height: 100%;
-	padding: 0 9rem;
+	padding: 0 6rem;
 	overflow: hidden;
 	// min-width: 1440px;
 	position: relative;
@@ -420,7 +420,7 @@ export default defineComponent({
            .history_page_body{
                width: 100%;
                height: 100%;
-                padding: 0 2.5rem 4rem;
+                padding: 4rem 2.5rem 4rem;
                box-sizing: border-box;

                .history_header{
--- a/src/views/HomeView/library.vue
+++ b/src/views/HomeView/library.vue
@@ -259,6 +259,7 @@
 													@keydown.enter="getgenerate"  
 													@click="inputFocus()"
 													:placeholder="(scene?.value == 'Slogan' && selectCode == 'Printboard')?isSloganHint:$t('LibraryPage.inputContent2')"
+													@paste="onPaste"
 													v-model="captionGeneration">
 												<i class="fi fi-br-upload" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
 													<a-upload
@@ -1317,10 +1318,9 @@ export default defineComponent({
 					}
 					file.categoryValue = category?.value;
 					file.category = category?.name;
-					let fileList = this.selectGenerateList.filter(
-						(v: any) => v.status === "done"
-					);
-					this.selectGenerateList = fileList
+					let paste = this.selectGenerateList.filter((v: any) => v.id === file.id);
+					if(paste.length == 0)this.selectGenerateList.push(file);
+					this.selectGenerateList = this.selectGenerateList.filter((v: any) => v.status === "done");
 				}else{
 					bor = false
 				}
@@ -1630,6 +1630,32 @@ export default defineComponent({
 			scaleImage.scaleImageMask = true
 			scaleImage.init(this.generateList[this.selectCode],index)
 		},
+		onPaste(e:any){
+			if(e.clipboardData.items[0] && !this.isTextarea && this.selectCode !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
+				let param = new FormData(); 
+				param.append('inPin','0')
+				param.append('gender',this.sex)
+				param.append('level1Type',this.selectCode)
+				param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
+				param.append('file',e.clipboardData.files[0]);
+				let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+				Https.axiosPost(Https.httpUrls.elementUpload, param, config).then((v)=>{
+					let value = {data:v,errCode : 0}
+					v.status = 'done'
+					let data = {
+						file:{
+							status: 'done',
+							xhr:{
+								response:JSON.stringify(value)
+							}
+						}
+					}
+					this.generateFileUploadChange(data)
+					
+				})
+			}
+			
+		}
    }
 })
 </script>
@@ -1641,7 +1667,7 @@ export default defineComponent({
    width: 100%;
 	overflow: hidden;
    height: 100%;
-	padding: 0 9rem;
+	padding: 0 6rem;
 	// min-width: 1440px;
 	position: relative;
    .page_content {
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -23,44 +23,44 @@
                    <!-- v-show="loginType == 'username'" -->
                    <div>
                        <div class="login_form_content" :state="emailStap">
-                            <div class="login_form_title">Name</div>
+                            <!-- <div class="login_form_title">Name</div>
                            <input
                                class="login_form_input"
                                placeholder="Enter your username"
                                v-model="username"
-                            />
-
-                            <div class="login_form_title marign_top30">
-                                <div>Password</div>
-                                <!-- <div class="tip_content" @click="changeIsLogin(2)">
-									Forgot password？
-								</div> -->
-                            </div>
-                            <div class="password_input_block">
-                                <input
-                                    class="login_form_input"
-                                    :type="passwordType"
-                                    placeholder="Enter your password"
-                                    v-model="password"
-                                    @keydown.enter="submitPerLogin()"
-                                />
-                                <div
-                                    class="icon iconfont icon-yanjing_yincang_o password_show_icon"
-                                    @click="changePasswordType()"
-                                ></div>
-                            </div>
-                            <div class="login_form_title marign_top30">
-                                Email
-                            </div>
-                            <input
-                                class="login_form_input"
-                                placeholder="Enter your email address"
-                                v-model="email"
-                                @keydown.enter="submitPerLogin()"
-                            />
+                            /> -->
+							<div v-show="emailStap === 1">
+								<div class="login_form_title marign_top30">
+									Email
+								</div>
+								<input
+									class="login_form_input"
+									placeholder="Enter your email address"
+									v-model="email"
+									@keydown.enter="submitPerLogin()"
+								/>
+								<div class="login_form_title marign_top30">
+									<div>Password</div>
+								</div>
+								<div class="password_input_block">
+									<input
+										class="login_form_input"
+										:type="passwordType"
+										placeholder="Enter your password"
+										v-model="password"
+										@keydown.enter="submitPerLogin()"
+									/>
+									<div
+										class="icon iconfont icon-yanjing_yincang_o password_show_icon"
+										@click="changePasswordType()"
+									></div>
+								</div>
+							</div>
+							

                            <!-- 邮箱登录 start -->
                            <div
+								v-show="emailStap === 2"
                                class="login_form_email"
                                :class="{ active: emailStap === 2 }"
                            >
@@ -129,7 +129,9 @@
                            </label>
                        </div>
 						<div class="thirdPartyLogin marign_top30">
-							<googleLogin></googleLogin>
+							<googleLogin @googelLogin="googelLogin"></googleLogin>
+							<weiXinLogin></weiXinLogin>
+							<phoneLogin></phoneLogin>
 						</div>
                        <div
                            class="login_submit_button marign_top40"
@@ -233,7 +235,9 @@
            <!-- 忘记密码 end -->
        </div>

-        <div class="login_footer">
+
+
+        <!-- <div class="login_footer">
            <div class="login_footer_item">
                <div class="login_footer_item_text">
                    ©2024 Code-Create Limited
@@ -262,7 +266,10 @@
                    Privacy Policy
                </div>
            </div>
-        </div>
+        </div> -->
+		<div class="mark_loading" v-show="loadingShow">
+			<a-spin size="large" />
+		</div>
    </div>
 </template>

@@ -274,22 +281,26 @@ import { setCookie, WriteCookie } from "@/tool/cookie";
 import { message } from "ant-design-vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
 import googleLogin from "@/component/LoginPage/googleLogin.vue";
+import weiXinLogin from "@/component/LoginPage/weiXinLogin.vue";
+import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
 const md5 = require("md5");
 export default defineComponent({
    components: {
-        VerificationCodeInput,googleLogin
+        VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
    },
    setup() {
        let timer: any = 0;
        const { locale } = useI18n();
        const store = useStore();
+		let loadingShow = ref(false)
        return {
            store,
            timer,
            locale,
+			loadingShow,
        };
    },
    data() {
@@ -315,6 +326,7 @@ export default defineComponent({
            loginTime: true,
        };
    },
+	
    methods: {
        changeLoginType(type: string) {
            this.loginType = type;
@@ -431,7 +443,7 @@ export default defineComponent({
            if (this.emailStap >= 2) {
                return;
            } else {
-                if (!this.username || !this.password) {
+                if (!this.password) {
                    message.info(
                        "Please enter your account number or password"
                    );
@@ -456,7 +468,8 @@ export default defineComponent({
                }
                let data = {
                    password: md5(this.password + "abc"),
-                    userName: this.username,
+                    userName: 'a',
+                    // userName: this.username,
                    email: this.email,
                    operationType: "LOGIN",
                    ip: "",
@@ -503,54 +516,79 @@ export default defineComponent({
            };
            Https.axiosPost(Https.httpUrls.accountLogin, data)
                .then((rv: any) => {
-                    if (rv) {
-                        if (rv.systemUser == 4) {
-                            rv.systemUser = 1;
-                        }
-                        this.createTimer();
-                        let isTest = rv.systemUser == 3 ? true : false;
-                        let isBeginner = rv.isBeginner == 1 ? true : false;
-                        let token = rv.token;
-                        setCookie("isMurmur", false);
-                        setCookie("token", token);
-                        setCookie("isTest", isTest);
-                        setCookie("isBeginner", isBeginner);
-                        setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
-                        setCookie("userInfo", JSON.stringify(rv));
-                        this.store.commit("setSystemUser", rv.systemUser);
-                        let obj: any = {
-                            avatar: rv.avatar,
-                            followeeCount: rv.followeeCount,
-                            followerCount: rv.followerCount,
-                        };
-
-                        this.store.commit("setUserInfo", obj);
-                        if (rv.systemUser == 0) {
-                            this.turnToHomePage("/Square");
-                        } else {
-                            if (window.innerWidth < 768) {
-                                message.info(
-                                    "If you need to design, please log in using an iPad or computer."
-                                );
-                                this.turnToHomePage("/Square");
-                            } else {
-                                this.turnToHomePage("/home");
-                            }
-                        }
-                        sessionStorage.setItem(
-                            "isTimeOne",
-                            JSON.stringify(false)
-                        ); //是否需要公告 提示 弹窗
-                        let randomNum: any =
-                            Math.floor(Math.random() * 9000000000000000) +
-                            1000000000000000;
-                        sessionStorage.setItem("sessionId", randomNum);
-                        sessionStorage.setItem("record", JSON.stringify([]));
-                    }
+					this.setSuccessLogin(rv)
                })
                .catch((res) => {});
        },
+		//微信登录
+		wechatLogin(value:any) {
+			let data = {
+				code : value.code
+			}
+			this.loadingShow = true
+		    Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
+                .then((rv: any) => {
+					this.loadingShow = false
+					this.setSuccessLogin(rv)
+                })
+                .catch((res) => {this.loadingShow = false});
+		},
+		//谷歌登录
+		googelLogin(value:any) {
+			let data = {credential : value}
+		    Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
+                .then((rv: any) => {
+					this.setSuccessLogin(rv)
+                })
+                .catch((res) => {});
+		},
+		//登陆成功设置参数
+		setSuccessLogin(rv:any){
+			if (rv) {
+				if (rv.systemUser == 4) {
+					rv.systemUser = 1;
+				}
+				this.createTimer();
+				let isTest = rv.systemUser == 3 ? true : false;
+				let isBeginner = rv.isBeginner == 1 ? true : false;
+				let token = rv.token;
+				setCookie("isMurmur", false);
+				setCookie("token", token);
+				setCookie("isTest", isTest);
+				setCookie("isBeginner", isBeginner);
+				setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
+				setCookie("userInfo", JSON.stringify(rv));
+				this.store.commit("setSystemUser", rv.systemUser);
+				let obj: any = {
+					avatar: rv.avatar,
+					followeeCount: rv.followeeCount,
+					followerCount: rv.followerCount,
+				};

+				this.store.commit("setUserInfo", obj);
+				if (rv.systemUser == 0) {
+					this.turnToHomePage("/Square");
+				} else {
+					if (window.innerWidth < 768) {
+						message.info(
+							"If you need to design, please log in using an iPad or computer."
+						);
+						this.turnToHomePage("/Square");
+					} else {
+						this.turnToHomePage("/home");
+					}
+				}
+				sessionStorage.setItem(
+					"isTimeOne",
+					JSON.stringify(false)
+				); //是否需要公告 提示 弹窗
+				let randomNum: any =
+					Math.floor(Math.random() * 9000000000000000) +
+					1000000000000000;
+				sessionStorage.setItem("sessionId", randomNum);
+				sessionStorage.setItem("record", JSON.stringify([]));
+			}
+		},
        //修改密码提交
        submitResetPassword() {
            let data = {
@@ -610,10 +648,13 @@ export default defineComponent({
                }
            );
        },
-        turnToWindow(url: any) {
-            window.open(url);
-        },
    },
+	mounted() {
+		const data = this.$route.query
+		if(data?.state == 'weiXin'){
+			this.wechatLogin(data)
+		}
+	},
 });
 </script>
 <style lang="less" scoped>
@@ -631,17 +672,9 @@ export default defineComponent({
        }

        .login_content {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            // width: 60rem;
-            width: 150rem;
-            background: #ffffff;
-            // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
-            border-radius: 1rem;
-            padding: 3rem 6rem 6.5rem;
-            box-sizing: border-box;
+            position: relative;
+			width: 100%;
+			height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
@@ -649,16 +682,15 @@ export default defineComponent({
                width: 100%;
            }
            .login_content_left {
-                width: 40%;
+                width: 50%;
+                padding: 0 20rem;
                @media (max-width: 768px) {
                    width: 100%;
                }
                .login_form_email {
-                    position: absolute;
-                    left: 0;
+                    position: relative;
                    width: 100%;
                    height: 100%;
-                    top: 0;
                    background: #fff;
                    transform: scale(0);
                    transition: 0.3s all;
@@ -677,9 +709,12 @@ export default defineComponent({
                }
            }
            .login_content_right {
-                width: 40%;
+				height: 100%;
+                width: 50%;
                img {
                    width: 100%;
+					height: 100%;
+					object-fit: contain;
                }
            }
            .login_type_list {
@@ -758,7 +793,10 @@ export default defineComponent({
                    font-size: 1.4rem;
                    box-sizing: border-box;
                    outline: none;
-
+					transition: all .3s;
+					&:hover{
+						border: 0.1rem solid #000;
+					}
                    &::placeholder {
                        color: #a5b0c2;
                    }
@@ -809,6 +847,10 @@ export default defineComponent({
                font-weight: 500;
                color: #ffffff;
                cursor: pointer;
+				transition: all .3s;
+				&:hover{
+					background: #3C3C3C;
+				}
                &[state="2"] {
                    cursor: not-allowed;
                }
@@ -955,7 +997,10 @@ export default defineComponent({
    }
 	.thirdPartyLogin{
 		display: flex;
-		justify-content: space-between;
+		justify-content: flex-start;
+		>div{
+			margin-right: 1rem;
+		}
 	}
    .tip_content {
        font-size: 1.3rem;
--- a/src/views/paySucceed.vue
+++ b/src/views/paySucceed.vue
@@ -84,7 +84,7 @@ export default defineComponent({
 .paySucceed_page {
    width: 100%;
    height: 100%;
-	padding: 0 9rem;
+	padding: 0 6rem;
 	overflow: hidden;
 	// min-width: 1440px;
 	position: relative;
--- a/src/views/trialApproval.vue
+++ b/src/views/trialApproval.vue
@@ -383,7 +383,7 @@ export default defineComponent({
 .trial_page {
    width: 100%;
    height: 100%;
-    padding: 0 9rem;
+    padding: 0 6rem;
    overflow: hidden;
    // min-width: 1440px;
    position: relative;
--- a/vue.config.js
+++ b/vue.config.js
@@ -56,6 +56,7 @@ module.exports = defineConfig({
  css: {
    loaderOptions: {
      less: {
+		additionalData: `@import (reference) "~@/assets/style/style.less";`,
        lessOptions: {
          modifyVars: {
            'primary-color': '#ec6800'