分割

2024-09-03 16:39:06 +08:00
parent eb54023940 d840d3de35
commit d7a57a39ee
54 changed files with 1298 additions and 723 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -4,8 +4,8 @@ NODE_ENV = 'development'

 # VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
 VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
-VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
+# VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
 # 佩佩
-VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
+# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
 # 海波
-# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
+VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
--- a/public/css/roboto.css
+++ b/public/css/roboto.css
@@ -222,3 +222,9 @@
  src: url(./woff/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+@font-face {
+	font-family: 'pixel';
+	font-style: normal;
+	font-weight: 500;
+	src: url('woff/pixel.ttf') format('truetype');
+  }
--- a/public/css/sloganFamily.css
+++ b/public/css/sloganFamily.css
@@ -53,4 +53,4 @@
 	font-family: 'CN_slogan_art4';
 	font-weight: normal;
 	src: url('slogan/CN_ZhiMangXing-Regular.ttf') format('truetype');
-}
+}
--- a/public/css/woff/pixel.ttf
+++ b/public/css/woff/pixel.ttf
--- a/public/image/mainImg/img1.png
+++ b/public/image/mainImg/img1.png
--- a/public/image/mainImg/img10.png
+++ b/public/image/mainImg/img10.png
--- a/public/image/mainImg/img2.png
+++ b/public/image/mainImg/img2.png
--- a/public/image/mainImg/img3.png
+++ b/public/image/mainImg/img3.png
--- a/public/image/mainImg/img4.png
+++ b/public/image/mainImg/img4.png
--- a/public/image/mainImg/img5.png
+++ b/public/image/mainImg/img5.png
--- a/public/image/mainImg/img6.png
+++ b/public/image/mainImg/img6.png
--- a/public/image/mainImg/img7.png
+++ b/public/image/mainImg/img7.png
--- a/public/image/mainImg/img8.png
+++ b/public/image/mainImg/img8.png
--- a/public/image/mainImg/img9.png
+++ b/public/image/mainImg/img9.png
--- a/public/video/homeVideo.gif
+++ b/public/video/homeVideo.gif
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -145,7 +145,7 @@ li {
  }
 }
 .ant-tooltip {
-  z-index: 2;
+  z-index: 1049 !important;
 }
 .ant-tooltip .ant-tooltip-inner {
  background: #343579;
@@ -488,9 +488,6 @@ li {
  width: 0.8rem;
  height: 0.8rem;
 }
-.trial_page .ant-tooltip {
-  z-index: 1049 !important;
-}
 .trial_page .habit :deep(.ant-tooltip .ant-tooltip-inner),
 .trial_page :deep(.ant-tooltip-arrow-content) {
  background: #000 !important;
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -155,8 +155,7 @@ input:focus{
 }
 .ant-tooltip{
    // top: 74px !important;
-    z-index: 2;
-
+	z-index: 1049 !important;
    .ant-tooltip-inner{
        background: #343579;
        border-radius: 5px;
@@ -542,9 +541,6 @@ input:focus{
 	
 }

-.ant-tooltip{
-	z-index: 1049 !important;
-}
 .habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
 	background: #000 !important;
 }
--- a/src/component/Account/account.vue
+++ b/src/component/Account/account.vue
@@ -7,7 +7,7 @@
 			<div class="account_page_content">
 				<div class="account_page_content_left">
 					<div class="content_left_item">
-						<div>个人中心</div>
+						<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">
@@ -42,25 +42,27 @@ export default defineComponent({
    components:{
    },
    setup() {
+
+		const {t} = useI18n()
        const store = useStore();
 		let accountHomeData = reactive({
 			rootSubmenuKeys:[
 				{
-					name:'首页',
+					name:t('account.Home'),
 					route:'/home/account/accountHome',
 					icon:'fi-rr-house-chimney'
 				},{
-					name:'我的信息',
+					name:t('account.myInformation'),
 					route:'/home/account/accountEdit',
 					icon:'fi-rr-user'
 				},{
-					name:'消息中心',
+					name:t('account.Messages'),
 					route:'/home/account/accountMessage',
 					icon:'fi-rr-envelope'
 				},{
-					name:'关注&粉丝',
+					name:`${t('account.Follow')} ${t('account.Fans')}`,
 					route:'/home/account/accountFollowFans',
-					icon:'fi-rr-envelope'
+					icon:'fi-rr-users-alt'
 				},
 			]
 		})
@@ -119,6 +121,7 @@ export default defineComponent({
 				height: 10rem;
 				color: #232323;
 				div{
+					white-space: nowrap;
 					width: 15rem;
 					color: #232323;
 					text-align-last: justify;
--- a/src/component/Account/accountEdit.vue
+++ b/src/component/Account/accountEdit.vue
@@ -25,20 +25,20 @@
 		</div>
 		<div class="accountEdit_page_body">
 			<div class="accountEdit_page_body_item">
-				<div class="accountEdit_page_body_item_name">用户名:</div>
+				<div class="accountEdit_page_body_item_name">{{$t('account.userName')}}:</div>
 				<div class="accountEdit_page_body_item_inut">
 					<input type="text" disabled :value="cookieUserInfo.userName">
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
-				<div class="accountEdit_page_body_item_name">邮箱:</div>
+				<div class="accountEdit_page_body_item_name">{{$t('account.email')}}:</div>
 				<div class="accountEdit_page_body_item_inut">
 					<input type="text" disabled :value="cookieUserInfo.email">
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
 				<div class="started_btn" @click="setSubmit">
-					Submit
+					{{$t('account.Submit')}}
 				</div>
 			</div>
 		</div>
--- a/src/component/Account/accountFollowFans.vue
+++ b/src/component/Account/accountFollowFans.vue
@@ -2,9 +2,9 @@
    <div class="account_followFans">
 		<div class="account_followFans_title modal_title_text">
 			<div class="">
-				互动
+				{{$t('account.Interact')}}
 			</div>
-			<div class="account_followFans_title_setting">设置</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">
@@ -53,14 +53,15 @@ export default defineComponent({
    setup() {
 		const router = useRouter()
        const store = useStore();
+		const {t} = useI18n()
 		let accountMessage = reactive({
 			messageList:[
 				{
-					title:'关注的人',
+					title:t('account.Follow'),
 					key:'follow',
 				},
 				{
-					title:'粉丝',
+					title:t('account.Fans'),
 					key:'fans',
 				},
 				
--- a/src/component/Account/accountHome.vue
+++ b/src/component/Account/accountHome.vue
@@ -9,24 +9,24 @@
 					<div class="content_item_user_left_detail">
 						<div class="modal_title_text">
 							<div>{{ cookieUserInfo.userName }}</div>
-							<div class="modal_title_text_assistant"><span>邮箱: </span>{{ cookieUserInfo?.email }}</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>关注：</span>{{ userInfo?.followeeCount }}
+								<span>{{$t('account.Follow')}}：</span>{{ userInfo?.followeeCount }}
 							</div>
 							<div>
-								<span>粉丝：</span>{{ userInfo?.followerCount }}
+								<span>{{$t('account.Fans')}}：</span>{{ userInfo?.followerCount }}
 							</div>
 						</div>
 					</div>
 				</div>
 				<div class="content_item_user_right">
-					<div @click="setUserData">修改资料</div>
+					<div @click="setUserData">{{$t('account.editUser')}}</div>
 				</div>
 			</div>
 			<div class="content_item content_item_task">
-				<div class="content_item_title">
+				<!-- <div class="content_item_title">
 					<i>icon</i>
 					<div>每日奖励</div>
 				</div>
@@ -55,7 +55,7 @@
 							20 Credits 到手
 						</div>
 					</div>
-				</div>
+				</div> -->
 			</div>
 		</div>
    </div>
--- a/src/component/Account/accountMessage.vue
+++ b/src/component/Account/accountMessage.vue
@@ -2,9 +2,9 @@
    <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 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">
@@ -61,12 +61,13 @@ export default defineComponent({
 		comment,
    },
    setup() {
+		const {t} = useI18n()
 		const router = useRouter()
        const store = useStore();
 		let accountMessage = reactive({
 			messageList:[
 				{
-					title:'系统消息',
+					title:t('account.systemMessages'),
 					key:'system',
 				},
 				// {
@@ -74,13 +75,13 @@ export default defineComponent({
 				// 	key:'privateChat',
 				// },
 				{
-					title:'评论',
+					title:t('account.comment'),
 					key:'comment',
 				},{
-					title:'点赞',
+					title:t('account.like'),
 					key:'like',
 				},{
-					title:'新增粉丝',
+					title:t('account.NewFans'),
 					key:'follow',
 				},
 				// {
@@ -148,8 +149,6 @@ export default defineComponent({
 				Https.axiosPost(url,data).then((rv)=>{
 					if(rv){
 						// domRefs[data.type][0].setmessageList(rv,data)
-						console.log(rv);
-						
 						resolve(rv)
 					}
 				}).catch((err)=>{
--- a/src/component/Account/followFans/fans.vue
+++ b/src/component/Account/followFans/fans.vue
@@ -25,7 +25,7 @@
 				</div>
 			</div>
 			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
-				没有任何信息~
+				{{$t('account.dataNull')}}
 			</div>
 			<div class="page_loading_box" v-show="!getListData.isNoData">
 				<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
--- a/src/component/Account/message/comment.vue
+++ b/src/component/Account/message/comment.vue
@@ -2,7 +2,7 @@
    <div class="account_comment">
 		<div class="account_generalMessage_title modal_title_text">
 			<!-- <span>收到的评论</span> -->
-			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
+			<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">

@@ -13,7 +13,7 @@
 						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>回复你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>{{$t('account.reply')}}</span></div>
 						<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">{{ item.content }}</div>
 						<div class="account_generalMessage_item_right_works modal_title_text_intro" @click.stop="openOtherWork(item)">{{ item.portfolioName }}</div>
 					</div>
@@ -26,7 +26,7 @@
 				</div>
 			</div>
 			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
-				没有任何信息~
+				{{$t('account.dataNull')}}
 			</div>
 			<div class="page_loading_box" v-show="!isNoData">
 				<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
--- a/src/component/Account/message/likeMessage.vue
+++ b/src/component/Account/message/likeMessage.vue
@@ -2,7 +2,7 @@
    <div class="account_like">
 		<div class="account_generalMessage_title modal_title_text">
 			<!-- <span>点赞</span> -->
-			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
+			<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">
 			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
@@ -12,7 +12,7 @@
 						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>攒了你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>{{$t('account.likedYourWork')}}</span></div>
 						<div>{{ item.portfolioName }}</div>
 					</div>
 				</div>
@@ -24,7 +24,7 @@
 				</div>
 			</div>
 			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
-				没有任何信息~
+				{{$t('account.dataNull')}}
 			</div>
 			<div class="page_loading_box" v-show="!isNoData">
 				<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
--- a/src/component/Account/message/newFollow.vue
+++ b/src/component/Account/message/newFollow.vue
@@ -2,7 +2,7 @@
    <div class="account_newFollow">
 		<div class="account_generalMessage_title modal_title_text">
 			<!-- <span>新增粉丝</span> -->
-			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
+			<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">
 			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
@@ -13,7 +13,7 @@
 					</div>
 					<div class="account_generalMessage_item_right_title">
 						<div class="">{{ item.userName }}</div>
-						<div class="modal_title_text_intro">{{ item.createTime }} 关注了你</div>
+						<div class="modal_title_text_intro">{{ item.createTime }} {{$t('account.followedYou')}}</div>
 					</div>
 				</div>
 				<div class="account_generalMessage_item_left">
@@ -22,7 +22,7 @@
 				</div>
 			</div>
 			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
-				没有任何信息~
+				{{$t('account.dataNull')}}
 			</div>
 			<div class="page_loading_box" v-show="!isNoData">
 				<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
--- a/src/component/Account/message/system.vue
+++ b/src/component/Account/message/system.vue
@@ -2,7 +2,7 @@
    <div class="account_systemMessage">
 		<div class="account_generalMessage_title modal_title_text">
 			<!-- <span>系统消息</span> -->
-			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
+			<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
 		</div>
 		<div class="account_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
 			<a-badge :dot="item.isRead == 0"></a-badge>
@@ -16,7 +16,7 @@
 			</div>
 		</div>
 		<div class="account_generalMessage_item  modal_title_text" style="display:flex;justify-content: center;" v-if="dataList.length == 0 && isNoData">
-			没有任何信息~
+			{{$t('account.dataNull')}}
 		</div>
 		<div class="page_loading_box" v-show="!isNoData">
 			<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
--- a/src/component/Administrator/allUser.vue
+++ b/src/component/Administrator/allUser.vue
@@ -155,15 +155,19 @@ import {
    onMounted,
 } from "vue";
 import { formatTime } from "@/tool/util";
+import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 import allUserPoerationsVue from "./allUserPoerations.vue";
 export default defineComponent({
    components: {allUserPoerationsVue,},
    setup() {
+        const store:any = useStore()
        let filter: any = reactive({
            dataList: [],
            tableLoading: false,
-            allUserList: [],
+            allUserList: computed(()=>{
+				return store.state.adminPage.allUserList
+			}),
 			allCountry:[]
        });
        let filterData: any = reactive({
@@ -478,10 +482,6 @@ export default defineComponent({
 			allUserPoerationsVue.value.init('Edit',data)
 		}
        onMounted(() => {
-            let allUserList: any = sessionStorage.getItem("allUserList");
-            if (allUserList) {
-                filter.allUserList = JSON.parse(allUserList);
-            }
 			let allCountry: any = sessionStorage.getItem("allCountry");
            if (allCountry) {
                filter.allCountry = JSON.parse(allCountry);
--- a/src/component/Administrator/recentActiveChart.vue
+++ b/src/component/Administrator/recentActiveChart.vue
@@ -60,13 +60,17 @@ import * as echarts from 'echarts/core';
 import { TooltipComponent, LegendComponent } from 'echarts/components';
 import { PieChart } from 'echarts/charts';
 import { LabelLayout } from 'echarts/features';
+import { useStore } from "vuex";
 import { CanvasRenderer } from 'echarts/renderers';
 export default defineComponent({
    components: {
    },
    setup() {
+        const store:any = useStore()
        let filter:any =  reactive({
-			dataList:[],
+			dataList:computed(()=>{
+				return store.state.adminPage.allUserList
+			}),
 		})
 		
 		let filterData:any = reactive({
@@ -77,19 +81,6 @@ export default defineComponent({
        let searchHistoryList = ()=> {
            gettrialList();
        }
-		let getUserIDName = ()=>{
-			let allUserList:any = sessionStorage.getItem('allUserList');
-			if(allUserList){
-				filter.dataList = JSON.parse(allUserList)
-			}
-			// Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
-			// 	if (rv) {
-			// 		let username = sessionStorage.getItem('allUserList');
-			// 		sessionStorage.setItem('allUserList',rv);
-			// 		filter.dataList = rv
-			// 	}
-			// })
-		}
 		//获取列表
        let gettrialList = async () =>{
 			filter.tableLoading = true
@@ -203,7 +194,6 @@ export default defineComponent({
 		}
 		onMounted(()=>{
 			lastGeTrialList('month')
-			getUserIDName()
 		})
        return {
 			...toRefs(filter),
--- a/src/component/Administrator/trialAllUser.vue
+++ b/src/component/Administrator/trialAllUser.vue
@@ -94,15 +94,19 @@
 <script lang="ts">
 import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue";
 import { formatTime } from "@/tool/util";
+import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 export default defineComponent({
    components: {
    },
    setup() {
+        const store:any = useStore()
        let filter:any =  reactive({
 			dataList:[],
 			tableLoading:false,
-			allUserList: [],
+			allUserList: computed(()=>{
+				return store.state.adminPage.allUserList
+			}),
 			allCountry:[]
 		})
 		let filterData:any = reactive({
@@ -261,10 +265,6 @@ export default defineComponent({
 			gettrialList();
 		}
 		onMounted(()=>{
-			let allUserList: any = sessionStorage.getItem("allUserList");
-            if (allUserList) {
-                filter.allUserList = JSON.parse(allUserList);
-            }
 			let allCountry: any = sessionStorage.getItem("allCountry");
            if (allCountry) {
                filter.allCountry = JSON.parse(allCountry);
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -59,7 +59,7 @@
 						<!-- 全屏 --> 
 						<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
 						<!-- 编辑 -->
-						<i v-show="!body" class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
+						<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
 						<i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
 						<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i>

@@ -470,6 +470,9 @@ export default defineComponent({
 				
            }else{
                this.designShowPrview = 1;
+				this.frontBack = {}
+				let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
+				setDesignItem.clear()
 				// this.designItemDetailUrl = {}
            }
        },
@@ -741,6 +744,8 @@ export default defineComponent({
 					changed:item.changed?item.changed:false,
 					designType:item.designType?item.designType:"Library",
 					offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
+					maskMinioUrl:item.layersObject[1].maskMinioUrl,
+					maskUrl:item.layersObject[1].maskUrl,
 					scale:item.layersObject?.[1]?.scale?item.layersObject[1].scale:[1,1],
 					printObject:{
 						// path:item.printObject.path?item.printObject.path :'',
@@ -937,6 +942,7 @@ export default defineComponent({
 					designItemDetail.clothes[this.currentIndex].minIOPath = rv.clothes[this.currentIndex].minIOPath
 					this.current.path = rv.clothes[this.currentIndex].minIOPath
 					designItemDetail.clothes[this.currentIndex].path = rv.clothes[this.currentIndex].path
+					designItemDetail.clothes[this.currentIndex].layersObject = rv.clothes[this.currentIndex].layersObject
 					designItemDetail.clothes[this.currentIndex].sketchString = ''
 					data.designSingleItemDTOList[this.currentIndex].sketchString =''
 					data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
@@ -1088,6 +1094,8 @@ export default defineComponent({
 				designType:this.current.designType?this.current.designType:'Library',
 				path:this.current.minIOPath?this.current.minIOPath:'',
 				offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
+				maskMinioUrl:this.current.layersObject[1].maskMinioUrl,
+				maskUrl:this.current.layersObject[1].maskUrl,
 				priority:this.current.priority,
 				trims:this.current.trims,
 				scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],
--- a/src/component/Detail/DesignElements.vue
+++ b/src/component/Detail/DesignElements.vue
@@ -49,7 +49,8 @@
 								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false"> 
 							</div>
 						</div>
-						<img :src="current?.path" alt="" class="designElements_sketch">
+						<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElements_sketch">
+						<!-- <img :src="current?.path" alt="" class="designElements_sketch"> -->
 						<div class="designElements_btn">
 							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
 								<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
--- a/src/component/Detail/DesignElementsMobile.vue
+++ b/src/component/Detail/DesignElementsMobile.vue
@@ -49,7 +49,8 @@
 								<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?.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.stop="itemMoveMousedown(index,$event)">
 								<li class="designElementsMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
@@ -491,7 +492,7 @@ export default defineComponent({
 			// let num = this.sketch/
 			return new Promise(async (resolve, reject) => {
 				let arr = JSON.parse(JSON.stringify(this.printStyleList))
-				let sketch = document.getElementsByClassName("designElements_sketch")[0]
+				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
@@ -833,8 +834,8 @@ export default defineComponent({
 					li{
 						cursor: pointer;
 						// border-radius: 50%;
-						width: calc(1rem*1.2);
-						height: calc(1rem*1.2);
+						width: calc(2.5rem*1.2);
+						height: calc(2.5rem*1.2);
 						background-color: rgb(20, 188, 255);
 						position: absolute;
 						pointer-events: none;
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -63,6 +63,7 @@
 								<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
 								<a-slider id="system_silder"
 									:min="20"
+									:max="1000"
 									v-model:value="systemDesignerPercentage"
 									@afterChange="systemDesigner"
 									:tip-formatter="formatter"
@@ -366,10 +367,9 @@ export default defineComponent({
 			})
 		},
 		systemDesigner(num) {
-			
        },
 		formatter(value) {
-			return `${value*3}%`;
+			return `${value}%`;
 		},
 		
 		setOveralSingle(){
--- a/src/component/Detail/DesignPrintOperationMobile.vue
+++ b/src/component/Detail/DesignPrintOperationMobile.vue
@@ -65,7 +65,8 @@
 							<div v-show="!overallSingle" class="habit_System_Designer">
 								<div class="habit_System_Designer_text">Scale</div>
 								<a-slider id="system_silder"
-									:min="1"
+									:min="20"
+									:max="1000"
 									v-model:value="systemDesignerPercentage"
 									@afterChange="systemDesigner"
 									:tip-formatter="formatter"
@@ -366,11 +367,9 @@ export default defineComponent({
 			})
 		},
 		systemDesigner(num) {
-			let DesignPrintOperationParent = this.$parent
-			DesignPrintOperationParent.systemDesignerPercentage = num
        },
 		formatter(value) {
-			return `${value*3}%`;
+			return `${value}%`;
 		},
 		
 		setOveralSingle(){
@@ -808,14 +807,13 @@ export default defineComponent({
 					index = ind
 				}
 			})
-			this.designOpenrtion = false
 			if(this.designItemDetailTS.rv){
 				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
 				designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
 				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
+				designItemDetail.clothes[index].undividedLayer = this.designItemDetailTS.rv.clothes[index].undividedLayer
 				designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
 				designItemDetail.clothes[index].printObject.prints = this.setOkData
-				// designItemDetail.clothes[index].printObject.prints = this.computeZindex()
 				designItemDetail.ifSubmit = true
 				designItemDetail.clothes.forEach((item,i)=>{
 					let a
@@ -832,6 +830,7 @@ export default defineComponent({
 				this.setRevocation(designItemDetail,this.designItemDetailTS.data)
 				this.designItemDetailTS = {}
 			}
+			this.designOpenrtion = false
 			if(this.driver__.driver){
 				nextTick(()=>{
 					driverObj__.moveNext();
--- a/src/component/Detail/addDetails.vue
+++ b/src/component/Detail/addDetails.vue
@@ -290,6 +290,7 @@ export default defineComponent({
 			if(str != 'mouseUp'){
 				canvas.remove(brushIndicator)
 			}
+			if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
 			const canvasAsJson = JSON.stringify(canvas.toJSON());
 			normalCanvasState.value.push(canvasAsJson);
 		}
@@ -344,7 +345,7 @@ export default defineComponent({
 							top:item.top*scale,
 						}
 					)
-					exportCanvas.add(obj)
+				Z	exportCanvas.add(obj)
 					if(allObjects.length-1 == index){
 						let data = exportCanvas.toDataURL('jpg')
 						cancelDsign()
--- a/src/component/Detail/editFrontBack.vue
+++ b/src/component/Detail/editFrontBack.vue
@@ -10,6 +10,8 @@
 				<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
 				<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
 				<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
+				<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:rgba == 'rgb(255,0,0)'}" title="front"></div>
+				<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:rgba == 'rgb(0,255,0)'}" title="back"></div>
 				<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
 				<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
 				<div @click="setSubmit">保存</div>
@@ -48,9 +50,8 @@ export default defineComponent({
 		// 	return props.patchData
 		// })
 		watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
+			if(newVal == -1) return
 			imgDomIndex = newVal
-			console.log(newVal,oldVal)
-			console.log(props.patchData);
 			props.patchData.front.imageUrl=  ''
 			init(props.patchData.front[newVal],'')
 		})
@@ -112,8 +113,8 @@ export default defineComponent({
 					
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
-					exportUrl = data.imageUrl
-					fabric.Image.fromURL(data.imageUrl, function(img) {
+					exportUrl = data.maskUrl
+					fabric.Image.fromURL(data.maskUrl, function(img) {
 						// 设置背景图对象的宽度和高度与 canvas 相同
 						img.scaleToWidth(canvas.width);
 						img.scaleToHeight(canvas.height);;
@@ -133,24 +134,29 @@ export default defineComponent({
 						}else{
 							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
 						}
+						setPencilWidth()
 						updateCanvasState()
 						loadingShow.value = false
 					},{ crossOrigin: "Anonymous" });
 					// 鼠标抬起事件
 					canvas.on('mouse:up', function(event) {
-							console.log(event);
 							if(canvasBtn.canvasState != 'move'){
 							updateCanvasState('mouseUp')
 						}
 					});
-
+					
 					//画布上移动
 					canvas.on("mouse:move", event =>setCanvasMove(event));
 					canvas.add(brushIndicator)
+					canvas.on("mouse:down", event=>brushIndicator.bringToFront());
+					canvas.on('object:added', function() {
+						brushIndicator.bringToFront();
+					});
 					setOperation('pencil')
+					createSetTimeSubmit()
 					img.remove()
 				}
-				img.src = data.imageUrl
+				img.src = data.maskUrl
 				
 			})
        }
@@ -171,13 +177,20 @@ export default defineComponent({
 				})
 				
 			}
+		let setClone = ()=>{
+			// canvasBtn.canvasState = 'move'
+		    // canvasBtn.spreadState = false
+			let canvasBox = document.querySelector(".exportCanvasBox_center");
+			let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+			let oldCanvasDom1 =  canvasBox.querySelector('canvas')
+			if(oldCanvasDom)oldCanvasDom.remove()
+			if(oldCanvasDom1)oldCanvasDom1.remove()
+		}
 		let clearCanvas = ()=>{
-		    canvasBtn.canvasState = 'move'
-		    canvasBtn.spreadState = false
 			document.removeEventListener("keydown", canvasKeyDown);
 			document.removeEventListener("keyup", canvasKeyUp);
 		}
-		let rgba = 'rgba(0, 0, 0, 1)'
+		let rgba = ref('rgb(255,0,0)')
 		let brushIndicator = new fabric.Circle({
 			radius:2,
 			fill: 'rgba(0, 0, 0, 0)',
@@ -205,6 +218,7 @@ export default defineComponent({
 				}
 				// brushIndicator.fill = canvasPencilColor.value
 				brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
+				brushIndicator.bringToFront()
 			}
 			canvas.requestRenderAll()
 		}
@@ -216,12 +230,18 @@ export default defineComponent({
 			}else if(str == 'pencil'){
 				setPencil()
 				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
-				
 			}else if(str == 'eraser'){
 				setEraser()
+				rgba.value = ''
 				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
 			}
 		}
+		let setOperationColor = (color)=>{
+			brushIndicator.set({fill: color});
+			rgba.value = color
+			canvas.freeDrawingBrush.color = color
+			setOperation('pencil')
+		}
 		let setMove = ()=>{
 			canvas.isDrawingMode = false
 			canvas.forEachObject((obj) =>obj.selectable = true);
@@ -230,8 +250,8 @@ export default defineComponent({
 			canvas.isDrawingMode = true//开启绘画模式
 			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
 			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			canvas.freeDrawingBrush.color = rgba
-			brushIndicator.set('fill',rgba)
+			canvas.freeDrawingBrush.color = rgba.value
+			brushIndicator.set('fill',rgba.value)
 			canvas.freeDrawingBrush.isEraser = false
 		}
 		let setEraser = ()=>{
@@ -265,10 +285,20 @@ export default defineComponent({
 				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
 			},300)
 		}
+		let setTimeSubmit = null
+		let createSetTimeSubmit = ()=>{
+			clearTimeout(setTimeSubmit)
+			setTimeSubmit = setTimeout(()=>{
+				setSubmit()
+			},1000)
+		}
 		let updateCanvasState = (str) =>{
 			if(str != 'mouseUp'){
 				canvas.remove(brushIndicator)
+			}else{
+				createSetTimeSubmit()
 			}
+			if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
 			const canvasAsJson = JSON.stringify(canvas.toJSON());
 			normalCanvasState.value.push(canvasAsJson);
 		}
@@ -287,19 +317,9 @@ export default defineComponent({
 				return
 			}
 			canvas.loadFromJSON(canvasState.value, () => {});
+			createSetTimeSubmit()
 		}
 		let setSubmit = ()=>{
-			let mark = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/e30c06b3-ce93-4fd8-a381-f3bdb4b5d318.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083215Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=40356ec75617430e7cef2d8cc0524ff0b18411559f4f52ab6a8f8522d7348250'
-			let full = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/ad929cf8-61e9-4e73-9d1b-8338d8d151d2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083909Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=7e7facf97ebce6e621f0cd68188fdebef0e238092cd3b3dd4f70ed783433d637'
-			let size = {
-				width: exportWH * ratio[0],
-				height: exportWH * ratio[1],
-			}
-			segmentImage(mark,full,size).then((rv)=>{
-				console.log(rv);
-
-			})
-			return
 			var allObjects = canvas.getObjects('path');
 			var canvasDom = document.createElement("canvas");
 			let exportCanvas = new fabric.Canvas(canvasDom, {
@@ -337,10 +357,21 @@ export default defineComponent({
 				let data = exportCanvas.toDataURL('png')
 				cancelDsign()
 				clearCanvas()
+				// props.props.patchData.front[imgDomIndex].imageUrl = data
+				let mark = data
+				let full = props.patchData.front[imgDomIndex].undividedLayer
+				let size = {
+					width: Math.round(exportWH * ratio[0]),
+					height: Math.round(exportWH * ratio[1]),
+				}
 				console.log(data);
-				props.patchData.front[imgDomIndex].imageUrl = data
-					// emit('setSloganData',data)
-				
+				segmentImage(mark,full,size).then((rv)=>{
+					// console.log(rv.targetFrontUrl,rv.targetBackUrl)
+					props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
+					props.patchData.back[imgDomIndex].imageUrl = rv.targetBackUrl
+					props.patchData.front[imgDomIndex].maskUrl = data
+				})
+				return
 			})
 		}
 		let cancelDsign = ()=>{
@@ -352,11 +383,14 @@ export default defineComponent({
 			loadingShow,
            t,
 			...toRefs(canvasBtn),
+			rgba,
 			init,
 			setOperation,
+			setOperationColor,
 			setPencilWidth,
 			historyState,
 			setSubmit,
+			setClone,
 			cancelDsign,
        };
    },
@@ -387,13 +421,15 @@ export default defineComponent({
 		
 		display: flex;
 		border: 0.2rem solid #c4c4c4;
-		width: 25rem;
+		width: 35rem;
 		border-radius: 4px; /* 设置圆角半径 */
 		flex-wrap: wrap;
+		align-items: center;
 		.editFrontBack_center_btn_item{
 			display: flex;
 			align-items: center;
 			padding: 1rem 0;
+			
 		}
 	}
 	.exportCanvasBox_center{
@@ -433,6 +469,24 @@ export default defineComponent({
 					display: block;
 				}
 			}
+			.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen{
+				width: 4rem;
+				height: 2rem;
+				border-radius: 4px;
+				margin: 0 .5rem;
+				cursor: pointer;
+				padding: .5rem 1;
+				&.active{
+					border: 2px solid;
+					border-radius: .4rem;
+				}
+			}
+			.editFrontBack_center_btn_colorRed{
+				background: rgba(255,0,0);
+			}
+			.editFrontBack_center_btn_colorGreen{
+				background: rgba(0,255,0);
+			}
 			i{
 				font-size: 2.5rem;
 				cursor: pointer;
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -3,7 +3,7 @@
 		<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:item.clothesOpen}" @click="clothesOpen(index)">
+				<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpenItem}" @click="clothesOpen(index)">
 					<img :src="item?.path" alt="">
 				</div>
 			</div>
@@ -42,7 +42,7 @@
 		<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
 	</div>
 	<div class="design_compile_content">
-		<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex"></editFrontBack>
+		<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex" ref="editFrontBack"></editFrontBack>
 	</div>
 	
 </template>
@@ -92,9 +92,10 @@ export default defineComponent({
 		]);
 		let direction = ref('')
 		let imgDom = ref()
-		let imgDomIndex = ref(2)
+		let imgDomIndex = ref(-1)
 		let frontBack = ref({})
 		let frontBackOld = ref({})
+		let editFrontBack = ref(null)
        return {
 			designItemDetail,
 			current,
@@ -106,6 +107,7 @@ export default defineComponent({
 			frontBack,
 			setRevocation,
 			frontBackOld,
+			editFrontBack,
        };
    },
    data() {
@@ -156,7 +158,7 @@ export default defineComponent({
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let front = []
 			let back = []
-			let body
+			let body = {}
 			designItemDetail.others.forEach((item) => {
 				if(item.type == 'Body'){
 					body = item
@@ -185,11 +187,12 @@ export default defineComponent({
 						front[index] = v.layersObject[i]
 						front[index].style.zIndex = v.priority
 						front[index].id = v.id
+						front[index].undividedLayer = v.undividedLayer
 					}else{
 						back[index] = v.layersObject[i]
 						back[index].style.zIndex = v.priority
 						back[index].id = v.id
-
+						back[index].undividedLayer = v.undividedLayer
 						// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
 					}
 					if(this.printZIndex < v.priority){
@@ -198,10 +201,13 @@ export default defineComponent({
 				}
 				this.printZIndex++
 			})
-			body.style = {
-				width:body.layersObject[0].imageSize?.[0]*ratio+'px',
-				height:body.layersObject[0].imageSize?.[1]*ratio+'px',
+			if(body){
+				body.style = {
+					width:body.layersObject[0].imageSize?.[0]*ratio+'px',
+					height:body.layersObject[0].imageSize?.[1]*ratio+'px',
+				}
 			}
+			
 			this.frontBack = {
 				front:front,
 				back:back,
@@ -235,6 +241,10 @@ export default defineComponent({
 			return num
 		},
 		clear(){
+			this.imgDomIndex = -1
+			console.log(this.editFrontBack);
+			this.clothesOpenActive(-1)
+			this.editFrontBack.setClone()
 			window.removeEventListener('resize', this.setImgSizeTime);
 		},
 		setpitch(item,index){
@@ -391,9 +401,11 @@ export default defineComponent({
 		},
 		clothesOpenActive(index){
 			this.designItemDetail.clothes.forEach((item)=>{
-				item.clothesOpen = false
+				item.clothesOpenItem = false
 			})
-			this.designItemDetail.clothes[index].clothesOpen = true
+			if(index != -1){
+				this.designItemDetail.clothes[index].clothesOpenItem = true
+			}
 		},
 		sort(arr){
 			arr.sort((a, b) => {
@@ -412,15 +424,14 @@ export default defineComponent({
 			// 	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让每次赋值都是不一样的
 			})
+			let front = arr
+			let imageCategory1
 			data.designSingleItemDTOList.forEach((item)=>{
-				let front = arr
-				let imageCategory1
 				if(arr.length > 1){
 					imageCategory1 = arr[1].imageCategory
 				}
@@ -435,6 +446,7 @@ export default defineComponent({
 						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.maskUrl = arr[index].maskUrl
 						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)]
@@ -445,7 +457,6 @@ export default defineComponent({
 					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
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -21,14 +21,14 @@
 		</div> -->
        <div class="exportCanvasBox">
            <div class="exportCanvasBox_left">
-                <div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div>
+                <!-- <div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div> -->
               
 				<!-- <label>
 					<div>Width:</div>
 					<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
 				</label> -->
 				<label>
-				<div>{{ $t('exportModel.Height') }}:</div>
+					<div>{{ $t('exportModel.Height') }}:</div>
 					<input type="number" @input="setMaxInput('height', 30000)" v-model="canvasWH.height" />
 				</label>
                <div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
@@ -42,58 +42,47 @@
                        ]"
                    >
 					</div>
-				</div>
-                <div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
-                    <div
-                        class="exportCanvasBox_allItem"
-                        v-for="(item,key) in allBoardData"
-                    >	
+					<div class="exportCanvasBox_imgbor exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
+						<div
+							class="exportCanvasBox_allItem"
+							v-for="(item,key) in allBoardData"
+						>	

-                        <div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
-                        <div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
-                        <div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
-                        <div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
-                        <div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
-                        <div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
-                        <div v-if="item[0] && key == 'FinalizeImage'" class="exportCanvasBox_intro">Selected Product</div>
-						<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'"  v-for="colorItem in item" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
-							<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
-							<div v-if="!colorItem.gradient">
-								<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
-								<div>{{colorItem.tcx}}</div>
-								<div>{{colorItem.name}}</div>
+							<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
+							<div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
+							<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
+							<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
+							<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
+							<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
+							<div v-if="item[0] && key == 'FinalizeImage'" class="exportCanvasBox_intro">Selected Product</div>
+							<div v-if="key == 'colorBoards'" class="exportCanvasBox_item_colorBor">
+								<div v-for="colorItem in item"  class="exportCanvasBox_item_color" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
+									<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
+									<div v-else>
+										<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
+										<div>{{colorItem.tcx}}</div>
+										<div>{{colorItem.name}}</div>
+									</div>
+								</div>
+								
+							</div>
+
+							<div
+								class="exportCanvasBox_item"
+								v-for="imgItem in item"
+								:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
+								draggable
+								@dragstart="onDragstart(key,imgItem)"
+								@click="isMoible?setDragstart(key,imgItem):''"
+							>
+								<div class="exportCanvasBox_img">
+									<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
+								</div>
 							</div>
-							
 						</div>
-
-                        <div
-                            class="exportCanvasBox_item"
-                            v-for="imgItem in item"
-							:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
-							draggable
-							@dragstart="onDragstart(key,imgItem)"
-							@click="isMoible?setDragstart(key,imgItem):''"
-                        >
-							<div class="exportCanvasBox_img">
-								<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
-							</div>
-                        </div>
-                    </div>
-                </div>
-				<div class="exportCanvasBox_title" @click.stop="setCloseNav('tool')">
-					{{ $t('exportModel.CanvasTool') }}
-					<div
-                        :class="[
-                            'icon',
-                            'iconfont',
-                            'icon-xiala',
-							closeNav.tool?'icon-rotate':''
-                        ]"
-                    >
-					
 					</div>
 				</div>
-				<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
+                <div class="exportCanvasBox_left_tool exportCanvasBox_title">
 					<div class="exportCanvasBox_left_tool_item">
 						<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
 						<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
@@ -101,117 +90,108 @@
 						<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:operation == 'texture'}"></i>
 						<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
 						<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
+						<i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i>
 					</div>
-					<div class="exportCanvasBox_left_tool_item">
-						<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
-						<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
-						<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
-						<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
-						<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
-						<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
-						<label class="uploadImage">
-							<i class="icon iconfont icon-shangchuantupian" ></i>
-							<input type="file" @change="uploadImage">
-						</label>
-						<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
+					<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
+						<div class="exportCanvasBox_left_tool_item">
+							<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
+							<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
+							<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
+							<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
+							<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
+							<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
+							<label class="uploadImage">
+								<i class="icon iconfont icon-shangchuantupian" ></i>
+								<input type="file" @change="uploadImage">
+							</label>
+							<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
+						</div>
 					</div>
+				</div>
+				<div class="exportCanvasBox_left_tool exportCanvasBox_operation" :class="{'closeNav' :closeNav.move}">
 					
+					<div class="exportCanvasBox_operation_bor">
+						<div class="exportCanvasBox_operation_bor_btn">
+							<i class="icon iconfont icon-xiala" :class="closeNav.move?'icon-rotate':''"  @click.stop="setCloseNav('move')"></i>
+						</div>
+						<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
+							<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
+								<div >{{ $t('exportModel.Color') }}</div>
+								<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
+							</label>
+							<label v-show="operation != 'move'">
+								<div >{{ $t('exportModel.Size') }}:</div>
+								<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
+							</label>
+							<label v-show="operation == 'pencil'">
+								<div >{{ $t('exportModel.Brushwork') }}:</div>
+								<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
+									style="flex: 1"
+									@change="brushworkChange"
+									>
+									<!-- v-model:value="brushwork" -->
+									<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
+										<img :src="item.url" alt="">
+									</a-select-option>
+								</a-select>
+							</label>
+							<label v-show="operation == 'texture'" class="texture">
+								<div >{{ $t('exportModel.Texture') }}:</div>
+								<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
+									style="flex: 1"
+									@change="textureValueChange"
+									>
+									<!-- v-model:value="brushwork" -->
+									<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
+										<img :src="item.url" alt="">
+									</a-select-option>
+								</a-select>
+							</label>
+							<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
+								<div >{{ $t('exportModel.FillBack') }}:</div>
+								<div class="exportCanvasBox_left_tool_item leftAlign">
+									<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
+									<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
+								</div>
+							</label>
+							<label v-show="operation === 'move'">
+								<div >{{ $t('exportModel.Layer') }}:</div>
+								<div class="exportCanvasBox_left_tool_item">
+									<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
+									<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
+									<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
+									<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
+								</div>
+							</label>
+							<label v-show="allSelectWidth > -1 && operation != 'move'">
+								<div >{{ $t('exportModel.Width') }}</div>
+								<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
+							</label>
+							<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
+								<div>Font Family</div>
+								<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
+									style="flex: 1"
+									@change="setFontFamily"
+									>
+									<!-- v-model:value="brushwork" -->
+									<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
+										{{item.name}}
+									</a-select-option>
+								</a-select>
+							</label>
+							<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
+								<div >{{ $t('exportModel.Height') }}</div>
+								<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
+							</label> -->
+						</div>
+					</div>
 				</div>
-				<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
+				
+				
+				<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
 					{{ $t('exportModel.More') }}
-					<!-- <div
-                        :class="[
-                            'icon',
-                            'iconfont',
-                            'icon-xiala',
-							closeNav.move?'icon-rotate':''
-                        ]"
-                    >
-					</div> -->
-				</div>
-				<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
-					<div class="exportCanvasBox_left_tool_item">
-						<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
-							<div >{{ $t('exportModel.Color') }}</div>
-							<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
-						</label>
-						<label v-show="operation != 'move'">
-							<div >{{ $t('exportModel.Size') }}:</div>
-							<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
-						</label>
-						<label v-show="operation == 'pencil'">
-							<div >{{ $t('exportModel.Brushwork') }}:</div>
-							<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
-								style="flex: 1"
-								@change="brushworkChange"
-								>
-								<!-- v-model:value="brushwork" -->
-								<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
-									<img :src="item.url" alt="">
-								</a-select-option>
-							</a-select>
-						</label>
-						<label v-show="operation == 'texture'" class="texture">
-							<div >{{ $t('exportModel.Texture') }}:</div>
-							<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
-								style="flex: 1"
-								@change="textureValueChange"
-								>
-								<!-- v-model:value="brushwork" -->
-								<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
-									<img :src="item.url" alt="">
-								</a-select-option>
-							</a-select>
-						</label>
-						<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
-							<div >{{ $t('exportModel.FillBack') }}:</div>
-							<div class="exportCanvasBox_left_tool_item leftAlign">
-								<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
-								<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
-							</div>
-						</label>
-						<label v-show="operation === 'move'">
-							<div >{{ $t('exportModel.Layer') }}:</div>
-							<div class="exportCanvasBox_left_tool_item">
-								<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
-								<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
-								<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
-								<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
-							</div>
-						</label>
-						<label v-show="allSelectWidth > -1">
-							<div >{{ $t('exportModel.Width') }}</div>
-							<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
-						</label>
-						<label v-show="operation == '' || operation == 'text' || textDataShow">
-							<div>Font Family</div>
-							<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
-								style="flex: 1"
-								@change="setFontFamily"
-								>
-								<!-- v-model:value="brushwork" -->
-								<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
-									{{item.name}}
-								</a-select-option>
-							</a-select>
-						</label>
-						<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
-							<div >{{ $t('exportModel.Height') }}</div>
-							<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
-						</label> -->
-					</div>
-				</div>
-				<div class="exportCanvasBox_left_bottom">
-					<div class="exportCanvasBox_left_credits" v-show="credits<1">
-						<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
-					</div>
-					<div class="exportCanvasBox_left_btn Guide_1_38">
-						<!-- <div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div> -->
-						<div class="subitOkPreviewBtn" @click="setSubmit">{{ $t('exportModel.Save') }}</div>
-						<div class="subitOkPreviewBtn" @click="setShare">{{ $t('exportModel.Share') }}</div>
-						<div class="subitOkPreviewBtn" @click="setExport">{{ $t('exportModel.Export') }}</div>
-					</div>
 				</div>
+				 -->
            </div>
 			<!-- <div @click="toSvg">12312312312</div> -->
            <div class="exportCanvasBox_center" :style="[isMoible?'overflow: hidden;':'']">
@@ -219,6 +199,18 @@
 			<div v-if="isMoible" class="exportCanvasBox_scroll">
 				<div></div>
 			</div>
+			<div class="exportCanvasBox_bottom">
+				
+				<div class="exportCanvasBox_left_btn Guide_1_38">
+					<div class="exportCanvasBox_left_credits" v-show="credits<1">
+						<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
+					</div>
+					<!-- <div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div> -->
+					<div class="subitOkPreviewBtn" @click="setSubmit">{{ $t('exportModel.Save') }}</div>
+					<div class="subitOkPreviewBtn" @click="setShare">{{ $t('exportModel.Share') }}</div>
+					<div class="subitOkPreviewBtn" @click="setExport">{{ $t('exportModel.Export') }}</div>
+				</div>
+			</div>
            <!-- <div class="exportCanvasBox_right">
                <div class="exportCanvasBox_title">
 					High-definition Download
@@ -363,7 +355,7 @@ export default defineComponent({
 		let normalCanvasState = ref([])//存放canvas操作
 		let isLoadCanvas = false//撤回或者反撤回false为撤回
 		let userlikeGroupId = 0
-
+		let imgWidth = {} //这是设置画布等宽
 		let submitCanvasContent = null
        let init = (productData) => {
 			userlikeGroupId = productData.userlikeGroupId
@@ -393,7 +385,7 @@ export default defineComponent({
                    height: canvasWH.value.height,
                    isDrawingMode: false, // 开启绘图模式
                });
-				brushIndicator = clearBrushIndicator()
+				brushIndicator = createBrushIndicator()
 				canvasOnDrop()//开启鼠标到画布事件
 				if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
 					JSSetRemoveImage(deleteObject)
@@ -451,6 +443,9 @@ export default defineComponent({
 				let data = {
 					userLikeGroupId:userlikeGroupId
 				}
+				arr.forEach((item)=>{
+					if(item !== 'likeDesignCollectionList')imgWidth[item] = setImageWidth(item)
+				})
 				isShowMark.value = true
 				let oldExportCanvas
 				let localCanvas = localStorage.getItem('canvasContent')
@@ -486,8 +481,6 @@ export default defineComponent({
 						});
 					})
 				}
-				
-				console.log(oldExportCanvas);
                // arr.forEach((item,index)=>{
                if(oldExportCanvas){
 					canvasWH.value.height = oldExportCanvas.canvasHeight
@@ -500,10 +493,6 @@ export default defineComponent({
 							for (const key in allBoardData.value) {
 								if (item == key) {
 									//循环渲染顺序
-									let imgWidth //这是设置画布等宽
-									if(item !== 'likeDesignCollectionList' && item !== 'FinalizeImage'){
-										imgWidth = await setImageWidth(key);
-									}
 									let sketchGroupingItem = [];
 									if (
 										item == "moodboardFiles" &&
@@ -530,17 +519,14 @@ export default defineComponent({
 												resolve();
 											} else {
 												let itemCanvasImg = allItem.imgUrl;
-												if(item == 'FinalizeImage'){
-													console.log(allItem);
-												}
 												if (key == "likeDesignCollectionList") {
 													
 													itemCanvasImg =
 														allItem.designOutfitUrl;
 												}
-												if(item == 'likeDesignCollectionList' || item == 'FinalizeImage')imgWidth = await setImageWidth(key,itemCanvasImg); 
 												fabric.Image.fromURL(itemCanvasImg,(img) => {
-													let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
+													if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img); 
+													let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
 													if(key == "sketchboardFiles"){
 														if(allItemIndex == 0){
 															position.x = 0;
@@ -552,7 +538,7 @@ export default defineComponent({
 															position.y = maxHeight;
 														}
 													}
-													setCanvasImage(img,key,position.x,position.y,allItem,imgWidth)//设置图片
+													setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
 													position.height = img.height * scaleWH + margin;
 													if (key == "sketchboardFiles") {
 														if (sketchGroupingItem.length <3) {
@@ -612,7 +598,6 @@ export default defineComponent({
 				}
 				updateCanvasState('')//加载完成后记录一下
 				setOperation('move')
-				closeNav.value.tool = true
 				submitCanvasContent = setInterval(()=>{
 					let data = setCanvasContent(true)
 					if(data.objects.length == 0){
@@ -656,7 +641,7 @@ export default defineComponent({
 			}
 		
 		
-		let setImageWidth = async (key,img)=>{
+		let setImageWidth = (key,img)=>{
 			let imgWidth = canvasWH.value.width; //这是设置画布等宽
 			if (
 				disposeMoodboardShow &&
@@ -679,20 +664,13 @@ export default defineComponent({
 						(sketchGrouping - 1) * 20) /
 					sketchGrouping;
 			}
-			if (key == "likeDesignCollectionList" || key == 'FinalizeImage') {
+			if (key == "likeDesignCollectionList") {
 				if(img){
-					await new Promise((resolve, reject) => {
-						let imgObj = new Image();
-						imgObj.onload = function () {
-							let height = imgObj.height
-							imgObj.height = canvasWH.value.width / 4 * 1.8
-							let heightScale = imgObj.height / height
-							imgWidth = imgObj.width * heightScale
-							// imgObj.remove()
-							resolve(imgObj.width)
-						}
-						imgObj.src = img;
-					})
+					let imgObj = JSON.parse(JSON.stringify(img))
+					let height = imgObj.height
+					imgObj.height = canvasWH.value.width / 4 * 1.8
+					let heightScale = imgObj.height / height
+					imgWidth = imgObj.width * heightScale
 				}
 				// imgWidth =

@@ -702,33 +680,32 @@ export default defineComponent({
 			}
 			return imgWidth
 		}
-		let setCanvasImage = (img,key,left,top,data,imgWidth)=>{
-			console.log(img,key,data,imgWidth);
+		let setCanvasImage = (img,key,left,top,data)=>{
 			// data
-			if(key == 'likeDesignCollectionList' || key == 'FinalizeImage')imgWidth = setImageWidth(key,data.designOutfitUrl); 
-
 			let imgId = 0
 			let minioUrl = ''//表示收藏或者generate
 			let imgUrl = data.imgUrl
 			if (key == "likeDesignCollectionList") {
 				imgUrl = data.designOutfitUrl;
+				imgWidth[key] = setImageWidth(key,img); 
 			}
+
 			let url = imgUrl.split('?')[0]
 			var match = url.match(/:(\d+)\/(.*)/);
 			minioUrl = match[2]
 			// let id = 
 			let proportion = img.height / img.width; //计算图形宽高比例
 			// let imgWidth = setImageWidth(key)
-			let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
+			let scaleWH = imgWidth[key] / img.width; //计算放到画布上缩小倍率
 			img.set({
-				// width: imgWidth/img.width,
+				// width: imgWidth[key]/img.width,
 				// height: canvasWH.value.height/img.height,
 				left,
 				top,
 				imgId,
 				minioUrl,
 				scaleX:
-					imgWidth / img.width,
+					imgWidth[key] / img.width,
 				scaleY:(img.width * proportion * scaleWH) / img.height,
 				// cornerSize: 10, // 选中时，角的大小为20
 				// transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
@@ -917,12 +894,17 @@ export default defineComponent({
        };

 		let closeNav = ref({
-			nav:true,
+			nav:false,
 			tool:false,
 			move:false,
 		})
 		let setCloseNav = (key)=>{
 			closeNav.value[key] = !closeNav.value[key]
+			// for (const iterator in closeNav.value) {
+			// 	if(key != iterator){
+			// 		closeNav.value[iterator] = false
+			// 	}
+			// }
 		}
 		function multiselect() {//获取整体宽高
 			canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。 
@@ -1097,7 +1079,8 @@ export default defineComponent({
 				if(str == 'loadingCompleted'){
 					// reverseCanvasState.value.push(canvasAsJson);
 				}
-				normalCanvasState.value.push(canvasAsJson);
+			if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
+			normalCanvasState.value.push(canvasAsJson);
 			if (isLoadCanvas) {
 				reverseCanvasState.value = []
 				isLoadCanvas = false;
@@ -1339,7 +1322,7 @@ export default defineComponent({
 			}

 		}
-		let clearBrushIndicator = ()=>{
+		let createBrushIndicator = ()=>{
 			let cator = new fabric.Circle({
 				radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2,
 				fill: '#fff',
@@ -2095,13 +2078,19 @@ export default defineComponent({
    flex: 1;
    // height: 30rem;
    // overflow-x: hidden;
-    
+    .icon{
+		transition: all .3s;
+	}
+	.icon-rotate{
+		transform: rotate(-180deg);
+	}
    .exportCanvasBox {
        flex: 1;
        overflow-x: hidden;
        display: flex;
        margin-top: 2rem;
        justify-content: space-between;
+		flex-direction: column;
        .exportCanvasBox_title {
            margin-bottom: .5rem;
            font-size: 1.8rem;
@@ -2115,12 +2104,8 @@ export default defineComponent({
 			position: sticky;
 			background: #f9fafb;
 			z-index: 2;
-			.icon{
-				transition: all .3s;
-			}
-			.icon-rotate{
-				transform: rotate(-180deg);
-			}
+			align-items: flex-start;
+			
        }
 		.exportCanvasBox_intro{
 			margin-bottom: 1rem;
@@ -2130,14 +2115,12 @@ export default defineComponent({
 		}
        .exportCanvasBox_right,
        .exportCanvasBox_left {
-			width: 25rem;
-			height: 100%;
-			overflow-x: hidden;
+			width: 100%;
+			height: auto;
 			label {
                display: flex;
 				align-items: center;
-				margin-bottom: 1rem;
-				width: 100%;
+				width: 30%;
                div {
                    width: 8rem;
                }
@@ -2165,7 +2148,8 @@ export default defineComponent({
 			}
 			.exportCanvasBox_left_item.closeNav{
 				// max-height: 1000rem;
-				height: auto;
+				// height: auto;
+				display: block;
 			}
        }
 		.exportCanvasBox_left::-webkit-scrollbar,
@@ -2173,57 +2157,104 @@ export default defineComponent({
        .exportCanvasBox_left {
 			padding-right: 1rem;
 			margin-right: 2rem;
-			.exportCanvasBox_left_bottom{
-				position: sticky;
-				background: #f9fafb;
-				z-index: 2;
-				bottom: -1px;
-				.exportCanvasBox_left_btn{
-					display: flex;
-					justify-content: space-between;
-					padding-top: 2rem;
-					flex-wrap: wrap;
-					.subitOkPreviewBtn{
-						position: initial;
-						transform: none;
-						margin-bottom: 2rem;
-						width: 40%;
-						text-align: center;
-						&.active{
-							opacity: .7;
-							cursor: not-allowed;
-						}
-					}
-					.subitOkPreviewBtn:nth-child(2n){
-						margin-left: 1rem;
-					}
-					.subitOkPreviewBtn:nth-child(3),.subitOkPreviewBtn:nth-child(4){
-						margin-bottom: 0;
-					}
-					
-				}
+			// height: 7rem;
+			display: flex;
+			flex-wrap: wrap;
+			align-items: flex-start;
+			position: relative;
+			>label{
+				width: 20%;
 			}
 			.exportCanvasBox_title {
-				padding-right: 2rem;
+				margin: 0 4rem;
+				position: relative;
 			}
            .exportCanvasBox_left_item{
 				overflow: hidden;
 				transition: all .3s;
 				// max-height: 0;
-				height: 0;
 				transform: translate3d(0, 0, 0);
+				position: absolute;
 			}
-            .exportCanvasBox_img {
+			.exportCanvasBox_left_item,.exportCanvasBox_imgbor,.exportCanvasBox_operation_bor{
+				background: #fff;
+				height: auto;
+				max-height: 30rem;
+				border: 1px solid;
+				display: none;
+				top: 7rem;
+				position: absolute;
+			}
+			.exportCanvasBox_operation{
+				left: auto;
+				right: 0;
+				z-index: 2;
+				position: absolute;
+				top: 7rem;
+				max-height: 30rem;
+				height: auto;
+				border: none;
+				background: none;
+				.exportCanvasBox_operation_bor_btn{
+					// transform: translateX(-100%);
+					// position: absolute;
+					border: 1px solid;
+					cursor: pointer;
+					width: 4rem;
+					height: 4rem;
+					background: #fff;
+					i{
+						width: 100%;
+						height: 100%;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						transform: rotate(90deg);
+						&.icon-rotate{
+							transform: rotate(270deg);
+						}
+					}
+				}
+				.exportCanvasBox_operation_bor{
+					overflow: hidden;
+					position: initial;
+					transform: translateX(calc(100% - 4rem));
+					display: block;
+					transition: all .3s;
+					border: none;
+					display: flex;
+					align-items: flex-start;
+					background: rgba(0, 0, 0, 0);
+					.exportCanvasBox_operation_bor_item{
+						background: #fff;
+						border: 1px solid;
+						width: 28rem;
+					}
+					label{
+						width: 100%;
+					}
+				}
+				&.closeNav{
+					.exportCanvasBox_operation_bor{
+					transform: translateX(0%);
+				}
+				}
+			}
+            .exportCanvasBox_imgbor {
 				// height: auto;
-				
+				width: 20rem;
+				overflow-y: auto;
+				padding: 1rem;
+				&.exportCanvasBox_imgbor::-webkit-scrollbar{display: none;}
+
                .exportCanvasBox_allItem {
                    display: flex;
                    flex-wrap: wrap;
+					justify-content: space-between;
                    .exportCanvasBox_item {
                        text-align: center;
 						.exportCanvasBox_img{
 							position: relative;
-							margin-right: 2rem;
 							margin-bottom: 2rem;
 							img {
 								max-width: 7rem;
@@ -2245,9 +2276,14 @@ export default defineComponent({
 						}
                       
                    }
+					.exportCanvasBox_item_colorBor{
+						width: 100%;
+						display: flex;
+						flex-wrap: wrap;
+						justify-content: space-between;
+					}
 					.exportCanvasBox_item_color{
 						width: 8rem;
-						margin-right: 2rem;
 						margin-bottom: 2rem;
 						.exportCanvasBox_item_BGcolor{
 							height: 5rem;
@@ -2272,12 +2308,17 @@ export default defineComponent({
                }
            }
 			.exportCanvasBox_left_tool{
+			
+				.exportCanvasBox_left_tool_item_column{
+					flex-direction: column;
+					padding: 1rem;
+				}
 				.exportCanvasBox_left_tool_item{
 					display: flex;
 					flex: 1;
 					flex-wrap: wrap;
 					justify-content: space-between;
-					margin-bottom: 1rem;
+					align-items: center;
 					&.leftAlign{
 						justify-content: flex-start;
 					}
@@ -2290,6 +2331,7 @@ export default defineComponent({
 						display: flex;
 						align-items: center;
 						justify-content: center;
+						flex-shrink: 0;
 						&.active{
 							border: 1px solid;
 							border-radius: .4rem;
@@ -2307,20 +2349,36 @@ export default defineComponent({
 				}
 			}
        }
-		// .exportCanvasBox_right{
-		// 	display: flex;
-		// 	flex-direction: column;
-		// 	padding-left: 1rem;
-		// 	position: relative;
-		// 	.exportCanvasBox_right_definition{
-		// 		// display: flex;
-		// 		flex: 1;
-		// 	}
-		// 	.exportCanvasBox_right_credits{
-		// 		margin-bottom: 2rem;
-		// 	}
-			
-		// }
+		.exportCanvasBox_bottom{
+			width: 100%;
+			flex-shrink: 0;
+			background: #f9fafb;
+			z-index: 2;
+			padding-top: 2rem;
+			.exportCanvasBox_left_credits{
+				margin-right: auto
+			}
+			.exportCanvasBox_left_btn{
+				display: flex;
+				justify-content: flex-end;
+				flex-wrap: wrap;
+				align-items: flex-start;
+				.subitOkPreviewBtn{
+					position: initial;
+					transform: none;
+					margin-bottom: 0rem;
+					width: auto;
+					text-align: center;
+					&.active{
+						opacity: .7;
+						cursor: not-allowed;
+					}
+				}
+				.subitOkPreviewBtn:nth-child(2n){
+					margin: 0 1rem;
+				}
+			}
+		}
        .exportCanvasBox_center {
 			flex: 1;
            height: 100%;
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -185,8 +185,34 @@ export default defineComponent({
 		//操作移动
 		layout:{
 			mounted (el,layout:any,binding) {
+				
 				let mousedown = function(e: MouseEvent){
 					e.stopPropagation()
+					let event:any = {
+						offsetX:e.offsetX,
+						offsetY:e.offsetY,
+						clientX:e.clientX,
+						clientY:e.clientY,
+					}
+					console.log(e);
+					
+					operation(event)
+				}
+				let touchstart = function(e: any){
+					e.stopPropagation()
+					const touch = e.changedTouches[0];
+					let event:any = {
+						offsetX:touch.clientX - e.target.getBoundingClientRect().left,
+						offsetY: touch.clientY - e.target.getBoundingClientRect().top,
+						clientX:touch.clientX,
+						clientY:touch.clientY,
+					}
+					console.log(e);
+					operation(event)
+				}
+				let operation = function(e: MouseEvent){
+					console.log(e);
+					
 					el.parentElement.children.forEach((v:any) => {
 						v.style.left = v.offsetLeft+'px'
 						v.style.top = v.offsetTop+'px'
@@ -203,10 +229,10 @@ export default defineComponent({
 					let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
 					let domY = e.clientY - e.offsetY - Number(top)
 					let mouse = true
-					document.onmousemove = function(e:MouseEvent){
+					let mouseMove = function(e:MouseEvent){
 						if(mouse){
-							el.style.left = e.x-mouseX - domX+'px'
-							el.style.top = e.y-mouseY - domY+'px'
+							el.style.left = e.clientX-mouseX - domX+'px'
+							el.style.top = e.clientY-mouseY - domY+'px'
 							if(el.offsetLeft <=0){
 								el.style.left = 0+'px'
 							}
@@ -221,18 +247,19 @@ export default defineComponent({
 							}
 						}
 					}
-					document.onmouseup = function(){
+					let mouseup = function(){
 						mouse = false
-						document.onmousemove = ()=>{
-
-						}
-						// el.removeEventListener('mousedown',mousedown)
-						
-						// el.removeEventListener('mousedown',mousedown) 
-						// document.onmousemove = false;
+						el.removeEventListener('mousemove',mouseMove)
+						el.removeEventListener('mouseup',mouseup) 
+						//移动端
 					}
+					document.addEventListener('mousemove', mouseMove);
+					document.addEventListener('mouseup', mouseup);
+					//移动端
 				}
 				el.addEventListener('mousedown',mousedown)
+				el.addEventListener('touchstart',touchstart)
+
 			},
 			updated (el,layout) {
 				
--- a/src/component/HomePage/newPosted.vue
+++ b/src/component/HomePage/newPosted.vue
@@ -0,0 +1,204 @@
+<template>
+	<div class="newPosted_generalMessage_title modal_title_text">
+		<span>动态</span>
+		<!-- <div class="newPosted_generalMessage_title_setting pointer" @click="allRead">全部已读</div> -->
+	</div>
+	<div class="newPosted_generalMessage_center modal_title_text">
+		<div class="newPosted_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
+			<!-- <a-badge :dot="item.isRead == 0"></a-badge> -->
+			<div class="newPosted_generalMessage_item_right">
+				<div class="newPosted_generalMessage_item_img pointer" @click="openOtherUsers(item)">
+					<img :src="item.avatar" alt="">
+				</div>
+				
+			</div>
+			<div class="newPosted_generalMessage_item_content">
+				<div class="modal_title_text_intro">{{ item.userName }} </div>
+				<div class="newPosted_generalMessage_item_content_title pointer" @click="openOtherWork(item)">{{ item.portfolioName }}</div>
+				<div class="modal_title_text_intro">{{ item.createTime }}</div>
+			</div>
+			<div class="newPosted_generalMessage_item_left">
+				<div class="newPosted_generalMessage_item_img">
+					<img :src="item.canvas" alt="">
+				</div>
+			</div>
+		</div>
+		<div class="newPosted_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
+			没有任何信息~
+		</div>
+		<div class="page_loading_box" v-show="!isNoData">
+			<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
+			<span v-show="isShowMark">
+				<a-spin size="large" />
+			</span>
+		</div>
+	</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 { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+    },
+    setup() {
+		const router = useRouter()
+        const store = useStore();
+		let newPostedMessage = reactive({
+			activeKey: ref('1'),
+			dataList:[
+			],
+			page:1,
+			size:10,
+			isNoData: false,
+			isShowMark: false,
+		})
+		let loadingDom:any = ref(null)
+		let init = ()=>{
+			newPostedMessage.isNoData = false
+			newPostedMessage.page = 0
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					newPostedMessage.page+=1
+					getPostedHistory()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
+			let data = {
+				type:'newPosted'
+			}
+			Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
+				store.commit('setMessageSystem',{newPosted:0})
+			}).catch((err)=>{
+			})
+		}
+		let getPostedHistory = ()=>{
+			newPostedMessage.isShowMark = true
+			let data = {
+				page: newPostedMessage.page,
+				size: newPostedMessage.size,
+				type:'newPosted'
+			}
+			Https.axiosPost(Https.httpUrls.getHistoryNotification,data).then((rv)=>{
+				newPostedMessage.isShowMark = false
+				if(rv.content.length == 0) {
+					newPostedMessage.isNoData = true
+					return
+				}
+				newPostedMessage.dataList = rv.content
+			}).catch(() => {
+				newPostedMessage.isShowMark = false
+				newPostedMessage.isNoData = true
+			})
+		}
+		let openOtherUsers = (item:any)=>{
+			const routeUrl = router.resolve({
+				path:'/home/otherUsers',
+				query:{
+					userId:item.senderId
+				}
+			})
+			window.open(routeUrl.href,'_blank')
+		}
+		let openOtherWork = (item:any)=>{
+			const routeUrl = router.resolve({
+				path:'/home/works',
+				query:{
+					workId:item.portfolioId
+				}
+			})
+			window.open(routeUrl.href,'_blank')
+		}
+		onMounted(()=>{
+			
+		})
+        return{
+           ...toRefs(newPostedMessage),
+		   loadingDom,
+		   init,
+		   getPostedHistory,
+		   openOtherUsers,
+		   openOtherWork,
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.modal_title_text{
+	font-size: 2rem;
+	line-height: 1.2;
+	justify-content: space-between;
+}
+.pointer{
+	cursor: pointer;
+}
+.newPosted_generalMessage_title{
+	display: flex;
+}
+.newPosted_generalMessage_center{
+	width: 100%;
+	max-height: 40rem;
+    overflow-y: auto;
+	.newPosted_generalMessage_item{
+		display: flex;
+		padding: 1rem 0;
+		align-items: center;
+	}
+	.newPosted_generalMessage_item_right{
+		margin-right: 1rem;
+		.newPosted_generalMessage_item_img{
+			img{
+				width: 5rem;
+				border-radius: 50%;
+				
+			}
+		}
+	}
+	.newPosted_generalMessage_item_left{
+		height: 10rem;
+		margin-left: auto;
+		.newPosted_generalMessage_item_img{
+			height: 100%;
+			img{
+				width: 5rem;
+				max-height: 100%;
+				object-fit: cover;
+			}
+		}
+	}
+	.newPosted_generalMessage_item_content{
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		margin-right: 1rem;
+		.newPosted_generalMessage_item_content_title:hover{
+			text-decoration: underline;
+		}
+		div{
+			text-align: left
+		}
+	}
+}
+.page_loading_box{
+	text-align: center;
+	height: 50px;
+	.page_loading{
+		display: block;
+		width: 50px;
+		height: 50px;
+		margin: 0 auto;
+	}
+}
+</style>
--- a/src/component/HomePage/productImg.vue
+++ b/src/component/HomePage/productImg.vue
@@ -26,7 +26,7 @@
 					<div class="Guide_1_32">
 						<div class="productImg_content_item_title productImg_content_item_title_menu">
 							<span>{{$t('ProductImg.MagicTools')}}</span>
-							<generalMenu class="productImg_content_item_title_menubtn hideEvents" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
+							<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
 						</div>
 						<div class="input_border productImg_content_item_generate">
 							<div class="input_box">
@@ -34,7 +34,7 @@
 									<input
 										class="search_input"
 										:placeholder="$t('Generate.inputContent1')"
-										v-model="searchName"
+										v-model="searchName[productimgMenu.value]"
 										@keydown.enter="getPrductimg()"
 									/>
 									<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
@@ -44,7 +44,7 @@
 									v-show="isTextarea"
 									class="search_textarea "  
 									@keydown.enter="getPrductimg()"
-									v-model="searchName"
+									v-model="searchName[productimgMenu.value]"
 								></textarea>
 								
 							</div>
@@ -75,7 +75,20 @@
 							</a-slider> -->
 							<a-select  style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
 						</div>
-						
+						<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
+							<span>{{$t('ProductImg.Highlight')}}</span>
+						</div>
+						<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
+							<a-slider class="system_silder"
+								v-model:value="brightenValue"
+								:tooltipVisible="false"
+								:max="5"
+								:min="1"
+								:step="0.1"
+							>
+							</a-slider>
+							<input type="number" readonly v-model="brightenValue">
+						</div>
 						<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
 						<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
 							<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
@@ -162,7 +175,7 @@
 									</div>
 								</div>
 								<div class="productImg_right_item_iconLeft" >
-									<div class="productImg_right_item_scale hideEvents" :style="[(driver__.index == 46 || driver__.index == 47 || driver__.index == 48)?'display: flex;':'']" @click.stop="setScaleImage(generateList,index,true)">
+									<div class="productImg_right_item_scale" :class="{hideEvents:driver__.driver}" :style="[(driver__.index == 46 || driver__.index == 47 || driver__.index == 48)?'display: flex;':'']" @click.stop="setScaleImage(generateList,index,true)">
 										<i class="fi fi-bs-expand-arrows-alt"></i>
 									</div>
 									<div v-show="item.resultType != 'Relight'" class="productImg_right_item_menu Guide_1_34" :style="[(driver__.index == 46 || driver__.index == 47 || driver__.index == 48)?'display: flex;':'']" @click.stop="setMenuShow(item)">
@@ -213,6 +226,7 @@
 			:productData="{
 				upload:upload,
 				similarity:similarity,
+				brightenValue:brightenValue,
 				RelightDirection:RelightDirection,
 				RelightDirectionList:RelightDirectionList,
 			}" 
@@ -256,7 +270,10 @@ export default defineComponent({
 		let productImgData:any = reactive({
 			isShowMark:false,
 			fileList:{},
-			searchName:'',
+			searchName:{
+				ToProductImage:'',
+				Relight:'',
+			},
 			isTextarea:false,//是否展开
 			remProductimg:false,//是否出现取消按钮
 			isProductimg:false,//开始生成
@@ -264,6 +281,7 @@ export default defineComponent({
 			generateList:[],
 			likeList:[],
 			similarity:30,
+			brightenValue:1,
 		})
 		let productimgMenuList = ref([
 			{
@@ -487,10 +505,11 @@ export default defineComponent({
 			}
 			let imageStrength = productImgData.similarity == 100? 95 :productImgData.similarity
 			let data:any ={
-				prompt:productImgData.searchName,
+				prompt:productImgData.searchName[productimgMenu.value.value],
 				toProductImageVOList:selectArr,
 				userLikeGroupId:upload.value.userlikeGroupId,
 				direction:RelightDirection.value,
+				brightenValue:productImgData.brightenValue,
 				imageStrength:(100 - imageStrength)/100,
 			}
 			productImgData.isProductimg = true
@@ -587,7 +606,11 @@ export default defineComponent({
 			if(generateProceedList){
 				// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
 				let str = generateProceedList.join(',')
-				let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
+				let data = {
+					uniqueId:str,userId:JSON.parse(userInfo).userId,
+					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+					type:productimgMenu.value.value,
+				}
 				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
 					(rv) => {
 						generateProceedList = []
@@ -607,6 +630,9 @@ export default defineComponent({
 			// scaleImage.value.isProductimg = false
 			scaleImage.value.init(arr,index)
 			scaleImage.value.isLike = false
+			scaleImage.value.productimgSearchName = productImgData.searchName[productimgMenu.value.value]
+			scaleImage.value.productimgSimilarity = productImgData.similarity
+			scaleImage.value.productimgRelightDirection = RelightDirection.value
 			scaleImage.value.isComparison = true
 		}
 		let generalIsMenuShow:any = {}
@@ -853,13 +879,17 @@ methods: {
 .productImg_left{
 	width: 25%;
 	position: relative;
+	.Guide_1_32{
+		height: 100%;
+		overflow-y: auto;
+		&.Guide_1_32::-webkit-scrollbar{display: none;}
+	}
 	.upload_file_item{
 		display: flex;
 		margin-right: 1rem;
 		width: auto !important;
 		height: 14rem !important;
 		border: none !important;
-		margin-bottom: 0 !important;
 		&.upload_file_item:last-child{
 			margin-right: 0rem;
 		}
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -71,7 +71,20 @@
 						</a-slider> -->
 						<a-select  style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
 					</div>
-
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
+						<span>{{$t('ProductImg.Highlight')}}</span>
+					</div>
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_similarity">
+						<a-slider class="system_silder"
+							v-model:value="productimgBrightenValue"
+							:tooltipVisible="false"
+							:max="5"
+							:min="1"
+							:step="0.1"
+						>
+						</a-slider>
+						<input type="number" readonly v-model="productimgBrightenValue">
+					</div>
 					<div class="productImg_content_item_generate_btn input_border">
 						<div class="input_box">
 							<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
@@ -140,12 +153,14 @@ export default defineComponent({
            type:Object,
 			default:{
 				similarity:30,
+				brightenValue:1,
 				upload:'',
 			},
 		}
 	},
    setup(props:any,{emit}) {
 		const store = useStore();
+		
 		let productimg = reactive({
 			isProductimg:false,
 			productimgSearchName:'',
@@ -153,6 +168,7 @@ export default defineComponent({
 			productimgRemProductimg:false,
 			productimgIsProductimg:false,
 			productimgSimilarity:props.productData.similarity,
+			productimgBrightenValue:props.productData.brightenValue,
 			productimgUpload:props.productData.upload,
 			productimgRelightDirection:props.productData.RelightDirection,
 			productimgRelightDirectionList:props.productData.RelightDirectionList,
@@ -186,6 +202,7 @@ export default defineComponent({
 				direction:productimg.productimgRelightDirection,
 				prompt:productimg.productimgSearchName,
 				toProductImageVOList:[obj],
+				brightenValue:productimg.productimgBrightenValue,
 				userLikeGroupId:productimg.productimgUpload.userlikeGroupId,
 				imageStrength:(100 - imageStrength)/100,
 			}
@@ -268,7 +285,11 @@ export default defineComponent({
 			if(generateProceedList){
 				// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
 				let str = generateProceedList.join(',')
-				let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
+				let data = {
+					uniqueId:str,
+					userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+					type:scaleImageList.value[scaleImageIndex.value]?.resultType
+				}
 				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
 					(rv) => {
 						generateProceedList = []
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -6,6 +6,7 @@ export default {
 		HISTORY:'历史',
 		WORKS:'作品广场',
 		EVENTS:'活动',
+		personal:'个人中心',
 		bindEmail:'绑定邮箱',
 		logOff:'退出登录',
 		Tutorial:'教程',
@@ -159,6 +160,7 @@ export default {
 		Upload:'上传',
 		MagicTools:'转换产品图工具',
 		Similarity:'相似度',
+		Highlight:'高亮',
 		RelightDirection:'打光方向',
 		GenerateProduct:'生成的产品',
 		SelectedProduct:'选择的产品',
@@ -556,6 +558,31 @@ export default {
 		jsContent5:'是否删除当前作品',
 		jsContent6:'作品被作者删除',
 	},
+	account:{
+		personCentered:'个人中心',
+		myInformation:'我的信息',
+		Home:'首页',
+		Messages:'消息中心',
+		Follow:'关注',
+		Fans:'粉丝',
+		editUser:'修改个人信息',
+		//编辑个人信息页
+		userName:'用户名',
+		email:'邮箱',
+		Submit:'提交',
+		//消息
+		systemMessages:'系统消息',
+		comment:'评论',
+		like:'点赞',
+		NewFans:'新增粉丝',
+		AllRead:'全部已读',
+		dataNull:'没有任何信息~',
+		reply:'评论你的作品',
+		followedYou:'关注了你',
+		likedYourWork:'赞了你的作品',
+		//互动
+		Interact:'互动',
+	},
 	guide:{
 		guide1:"在<strong>工作空间</strong>中，您可以个性化您的设计设置，包括选择适用于男装或女装的设计，以及选择用于创作的人体模型。",
 		guide2:"选择您要设计的服装性别。",
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -6,6 +6,7 @@ export default {
 		HISTORY:'HISTORY',
 		WORKS:'GALLERY',
 		EVENTS:'EVENTS',
+		personal:'Personal Center',
 		bindEmail:'bind email',
 		logOff:'log off',
 		Tutorial:'Tutorial',
@@ -39,7 +40,6 @@ export default {
 		createTime:'Create Time',
 	},
 	payOrder:{
-
 		OrderInformation:'Order Information',
 		CreditsInformation:'Credits Information',
 	},
@@ -159,6 +159,7 @@ export default {
 		SelectCollection:'Select Collection',
 		Upload:'Upload',
 		Similarity:'Similarity',
+		Highlight:'Highlight',
 		RelightDirection:'Relight Direction',
 		MagicTools:'To Product lmage Tool',
 		GenerateProduct:'Generate Product',
@@ -557,6 +558,31 @@ export default {
 		jsContent5:'Whether to delete the current gallery',
 		jsContent6:'The author deleted the work',
 	},
+	account:{
+		personCentered:'Account',
+		myInformation:'My Details',
+		Home:'Home',
+		Messages:'Messages',
+		Follow:'Follow',
+		Fans:'Fans',
+		editUser:'Change Information',
+		//编辑个人信息页
+		userName:'User Name',
+		email:'Email',
+		Submit:'Submit',
+		//消息
+		systemMessages:'System Messages',
+		comment:'Comment',
+		like:'Like',
+		NewFans:'New fans',
+		AllRead:'All read',
+		dataNull:'no message~',
+		reply:'commented on your work',
+		followedYou:'followed you',
+		likedYourWork:'liked your work',
+		//互动
+		Interact:'interact',
+	},
 	guide:{
 		guide1:"You can personalize your design settings right here in the <strong>Workspace</strong>, including choosing to design for men's or women's wear, as well as selecting the mannequin to use for your creations.",
 		guide2:"Select the apparel type you'd like to work on.",
--- a/src/store/adminPage/adminPage.ts
+++ b/src/store/adminPage/adminPage.ts
@@ -0,0 +1,23 @@
+import {Module} from 'vuex'
+import {RootState} from '../index'
+
+interface DesignDetail{
+    allUserList:any,
+   
+}
+
+const adminPage : Module<DesignDetail,RootState> = {
+    state:{
+        allUserList:[],
+    },
+    mutations:{
+        setAllUserList(state,files){
+            state.allUserList = files
+        },
+    },
+    actions:{
+
+    }
+}
+
+export default adminPage
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -5,6 +5,7 @@ import HomeStoreModule  from './homeStore/homeStore'
 import UserHabit  from './userHabit/userHabit'
 import Workspace  from './workspace/workspace'
 import Guide  from './guide/guide'
+import adminPage  from './adminPage/adminPage'
 export interface RootState{

 }
@@ -25,5 +26,6 @@ export default createStore<RootState>({
 	UserHabit,
 	Workspace,
 	Guide,
+	adminPage,
  }
 })
--- a/src/store/userHabit/userHabit.ts
+++ b/src/store/userHabit/userHabit.ts
@@ -91,17 +91,20 @@ const userHabit : Module<UserHabit,RootState> = {
 		setMessageSystem(state,data){
 			let num = 0
 			for (const iterator in data) {
-				num+=data[iterator]
-				if(!state.messageSystem.messageType[iterator]){
-					state.messageSystem.messageType[iterator] = data[iterator]
-				}else{
-					for (const key in state.messageSystem.messageType) {
-						if(key == iterator){
-							state.messageSystem.messageType[key] = data[iterator]
-							break
-						}
-					}
+				if(iterator != 'newPosted'){
+					num+=data[iterator]
 				}
+				state.messageSystem.messageType[iterator] = data[iterator]
+				// if(!state.messageSystem.messageType[iterator]){
+				// 	state.messageSystem.messageType[iterator] = data[iterator]
+				// }else{
+				// 	for (const key in state.messageSystem.messageType) {
+				// 		if(key == iterator){
+				// 			state.messageSystem.messageType[key] = data[iterator]
+				// 			break
+				// 		}
+				// 	}
+				// }
 			}
 			state.messageSystem.messageNum = num
 		},
--- a/src/tool/https.js
+++ b/src/tool/https.js
@@ -87,6 +87,7 @@ axios.interceptors.response.use((res) =>{
    }
 }, function(error) {
    if(error?.response?.status === 401 && router.currentRoute._value.name != 'setIdentification'){//如果是记录浏览器页面就不跳转login
+		return
 		clonAllCookie()
 		if(!isLoginTime){
 			isLoginTime = true
--- a/src/tool/util.js
+++ b/src/tool/util.js
@@ -436,27 +436,28 @@ function segmentImage(markerImage,fullImage,size){
 		const ctx1 = markerCanvas.getContext('2d');
 		const ctx2 = fullCanvas.getContext('2d');
 		const ctx3 = nullCanvas.getContext('2d');
-		let targetMarkerUrl = ''
-		let targetFullUrl = ''
+		markerCanvas.width=size.width
+		markerCanvas.height=size.height
+		fullCanvas.height=size.height
+		fullCanvas.width=size.width
+		nullCanvas.height=size.height
+		nullCanvas.width=size.width
+		let targetFrontUrl = ''
+		let targetBackUrl = ''
 		const marker = new Image();
 		const full = new Image();
-		marker.width = size.width;
-		marker.height = size.height;
-		full.width = size.width;
-		full.height = size.height;
-		console.log(full);
 		marker.crossOrigin = 'anonymous';
 		full.crossOrigin = 'anonymous';
 		marker.onload = () => {
 			ctx1.drawImage(marker,0,0 ,size.width, size.height);
 			full.onload = () => {
 				ctx2.drawImage(full,0,0, size.width, size.height);
-				segmentImage();
+				segmentImageItem();
 			};
+			full.src = fullImage;
 		};
 		marker.src = markerImage; 
-		full.src = fullImage;
-		function segmentImage() {
+		function segmentImageItem() {
 				
 			const markerData = ctx1.getImageData(0, 0, size.width, size.height);
 			const fullData = ctx2.getImageData(0, 0, size.width, size.height);
@@ -464,12 +465,17 @@ function segmentImage(markerImage,fullImage,size){
 			const color1 = { r: 255, g: 0, b: 0 }; // 第一个颜色
 			const color2 = { r: 0, g: 255, b: 0 }; // 第二个颜色

-			const threshold = 50; // 颜色匹配的容差
+			const threshold = 100; // 颜色匹配的容差
+
+			// const isColorMatch = (r, g, b, color) => 
+			// 	(Math.abs(r - color.r) < threshold) || (Math.abs(0 - color.r) < threshold) &&
+			// 	(Math.abs(g - color.g) < threshold) || (Math.abs(0 - color.g) < threshold) &&
+			// 	(Math.abs(b - color.b) < threshold) || (Math.abs(0 - color.b) < threshold)

 			const isColorMatch = (r, g, b, color) => 
-				Math.abs(r - color.r) < threshold &&
-				Math.abs(g - color.g) < threshold &&
-				Math.abs(b - color.b) < threshold;
+				(Math.abs(r - color.r) < threshold || Math.abs(0 - color.r) < threshold) &&
+				(Math.abs(g - color.g) < threshold || Math.abs(0 - color.g) < threshold) &&
+				(Math.abs(b - color.b) < threshold || Math.abs(0 - color.b) < threshold)

 			const output1 = ctx3.createImageData(size.width, size.height);
 			const output2 = ctx3.createImageData(size.width, size.height);
@@ -523,10 +529,9 @@ function segmentImage(markerImage,fullImage,size){
 				ctx.putImageData(imageData, 0, 0);
 				return canvas.toDataURL('image/png');
 			};
-			targetMarkerUrl =createImageURL(output1)
-			targetFullUrl =createImageURL(output2)
-			console.log(targetFullUrl,targetMarkerUrl);
-			resolve({targetMarkerUrl, targetFullUrl})
+			targetBackUrl =createImageURL(output2)
+			targetFrontUrl =createImageURL(output1)
+			resolve({targetFrontUrl, targetBackUrl})
 		}
 	})
 }
--- a/src/views/Administrator.vue
+++ b/src/views/Administrator.vue
@@ -81,6 +81,7 @@ import { getUploadUrl } from "@/tool/util";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
 import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
 import { useI18n } from "vue-i18n";
+import store from "@/store";
 export default defineComponent({
 	components: {
 		MailOutlined,
@@ -90,7 +91,8 @@ export default defineComponent({
    props: ["msg",'sketchCatecoryList'],
    setup() {
 		const router = useRouter()
-        const route:any = useRoute()
+        // const route:any = useRoute()
+        const store:any = useStore()
 		const state:any = reactive({
 		rootSubmenuKeys: [{
 			name:'All User',
@@ -263,7 +265,7 @@ export default defineComponent({
 			//储存所有用户id和name
 			Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
 				if (rv) {
-					sessionStorage.setItem('allUserList',JSON.stringify(rv));
+					store.commit('setAllUserList',rv);
 				}
 			})
 			let allCountry = country
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -14,20 +14,20 @@
 							<!-- 点击事件就用下面的div -->
 							<!-- <div class="attention_item attention_item_active"> -->
 								<div>{{ userInfo?.followeeCount }}</div>
-								<span>关注</span>
+								<span>{{$t('account.Follow')}}</span>
 							</div>
 							<div class="attention_item">
 								<div>{{ userInfo?.followerCount }}</div>
-								<span>粉丝</span>
+								<span>{{$t('account.Fans')}}</span>
 							</div>
-							<div class="attention_item">
+							<!-- <div class="attention_item">
 								<div>22</div>
 								<span>作品数</span>
-							</div>
+							</div> -->
 						</div>
 						<div class="homeMain_user_detail_item homeMain_user_detail_setUser" @click="openAccount">
 							<i class="fi fi-rr-user"></i>
-							<div>个人中心</div>
+							<div>{{$t('Header.personal')}}</div>
 							<i class="icon iconfont icon-xiala"></i>
 						</div>
 					</div>
@@ -48,11 +48,7 @@
                    ></div>
                   
                </div>
-				<div class="trialApproval button_second credits message">
-					<a-badge :count="messageNum">
-						<i class="fi fi-rr-envelope" @click="openMessage"></i>
-					</a-badge>
-				</div>
+				
 				<div
 					class="trialApproval button_second credits hideChecked"
                >
@@ -85,11 +81,29 @@
            </nav> -->
 			<navRouter :routerList="navRouterList"></navRouter>
 			<div class="homeMain_right">
-				<img
+				<!-- <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> -->
+							<i class="fi fi-rr-bell" @click.stop="openNewPosted"></i>
+						</a-badge>
+							<div class="message_iconItem_value select_block" v-show="isNewPosted" style="width: 40rem">
+							<newPosted ref="newPosted"></newPosted>
+							</div>
+					</div>
+				</div>
+
 				<Habit></Habit>
 			</div>
 			<nav class="select_block" v-show="isShowOperate">
@@ -149,7 +163,7 @@
    </div>
 </template>
 <script >
-import { defineComponent, createVNode, ref, computed, onMounted } from "vue";
+import { defineComponent, createVNode, ref,toRefs, reactive, computed, onMounted } from "vue";
 import { isEmail } from "@/tool/util";
 import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
 import payOrder from "@/component/Pay/payOrder.vue";
@@ -162,6 +176,7 @@ import { Modal, message } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import RobotAssist from "@/component/HomePage/RobotAssist.vue";
 import scaleVideo from "@/component/HomePage/scaleVideo.vue";
+import newPosted from "@/component/HomePage/newPosted.vue";
 import navRouter from "@/component/modules/navRouter.vue";
 import { useStore } from "vuex";
 import { setLang } from "@/tool/guide";
@@ -177,6 +192,7 @@ export default defineComponent({
 		Habit,
 		RobotAssist,
 		scaleVideo,
+		newPosted,
 		UpgradePlan,
 		payOrder,
 		TaskPage,
@@ -194,6 +210,7 @@ export default defineComponent({
 		let credits = computed(()=>{
 			return store.state.UserHabit.credits.value
 		})
+		
 		let activeCredits = ref(false)
 		let getLangIsShowMark = ref(true)
 		let AdministratorUserIdList = [88,6,46,31,73,83,87,4]
@@ -223,6 +240,19 @@ export default defineComponent({
 		let messageNum = computed(()=>{
 			return store.state.UserHabit.messageSystem.messageNum
 		})
+		let messageType = computed(()=>{
+			return store.state.UserHabit.messageSystem.messageType
+		})
+		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)
 		let getUnreadCount = ()=>{
 			Https.axiosGet(Https.httpUrls.getUnreadCount).then((rv)=>{
 				if(rv){
@@ -230,9 +260,9 @@ export default defineComponent({
 				}
 			})
 		}
+		
 		MyWs.linkWs("ws://"+MyWs.messageUrl,'message')
 		let getWsMessage = (data)=>{
-			console.log(data);
 			store.commit('setMessageSystem',...data)
 		}
 		MyEvent.add('getMessage',getWsMessage)
@@ -242,6 +272,42 @@ export default defineComponent({
 		// MyWs.ws.onmessage = (data)=>{
 		// 	console.log(JSON.parse(data.data),232);
 		// }
+
+		let openNewPosted = ()=>{
+			stateList.isNewPosted = !stateList.isNewPosted
+			newPosted.value.init()
+			document.addEventListener(
+                "click",
+                closeShowOperateContent,
+                false
+            );
+		}
+		 //点击下拉图标出现操作
+		let changeShowOperateContent=() =>{
+            stateList.isShowOperate = !stateList.isShowOperate;
+            document.addEventListener(
+                "click",
+                closeShowOperateContent,
+                false
+            );
+        }
+		let changeLanguage=() =>{
+			stateList.isLanguage = !stateList.isLanguage;
+            document.addEventListener(
+                "click",
+                closeShowOperateContent,
+                false
+            );
+		}
+
+        //关闭下拉图标
+        let closeShowOperateContent=() =>{
+            stateList.isShowOperate = false;
+			stateList.isLanguage = false
+			stateList.isNewPosted = false
+            document.removeEventListener("click", closeShowOperateContent);
+        }
+
 		onMounted(()=>{
 			getUnreadCount()
 		})
@@ -258,11 +324,17 @@ export default defineComponent({
 			AdministratorUserIdList,
 			navRouterList,
 			messageNum,
+			messageType,
+			...toRefs(stateList),
+			newPosted,
+			openNewPosted,
+			changeShowOperateContent,
+			changeLanguage,
+			closeShowOperateContent,
 		}
 	},
    data() {
        return {
-            isShowOperate: false,
            bindEmailVisible: false,
            isHaveBindEmail: false,
            bindEmailStep: 1,
@@ -275,7 +347,6 @@ export default defineComponent({
            numTime: 30,
            timerSec: null,
            modalWarning: null,
-            isLanguage: false,

 			language:[
 				{name:'English',value:'ENGLISH'},
@@ -397,31 +468,7 @@ export default defineComponent({
 			
 			
 		},
-        //点击下拉图标出现操作
-        changeShowOperateContent() {
-            this.isShowOperate = !this.isShowOperate;
-            document.addEventListener(
-                "click",
-                this.closeShowOperateContent,
-                false
-            );
-        },
-		changeLanguage(){
-			this.isLanguage = !this.isLanguage;
-            document.addEventListener(
-                "click",
-                this.closeShowOperateContent,
-                false
-            );
-		},
-
-        //关闭下拉图标
-        closeShowOperateContent() {
-            this.isShowOperate = false;
-			this.isLanguage = false
-            document.removeEventListener("click", this.closeShowOperateContent);
-        },
-
+       

    

@@ -601,6 +648,39 @@ export default defineComponent({
 		display: flex;
 		justify-content: flex-end;
 		align-items: center;
+		.message{
+			display: flex;
+			width: 6rem;
+			justify-content: space-between;
+			margin: 0 2rem;
+			// padding: 1rem;
+			i{
+				margin-left: 0rem;
+				border-left: none;
+				padding-left: 0rem;
+				height: auto;
+				font-size: 2rem;
+				width: 3rem;
+				cursor: pointer;
+			}
+			span{
+				overflow: initial;
+				align-items: center;
+				width: auto;
+				margin: auto;
+				height: auto;
+			}
+			.message_iconItem{
+				position: relative;
+				display: flex;
+				.message_iconItem_value{
+					padding: 1rem;
+					left: 50%;
+					transform: translateX(-50%);
+					top: 4rem;
+				}
+			}
+		}
 	}
    .homeMain_logo {
        width: 14.4rem;
@@ -726,6 +806,7 @@ export default defineComponent({
            align-items: center;
            position: relative;
            height: 3.7rem;
+			
 			&.marLeft2{
 				margin-left: 2rem;
 			}
@@ -774,23 +855,7 @@ export default defineComponent({
 				font-size: 1.8rem;
 				cursor: pointer;
 			}
-			&.message{
-				// padding: 1rem;
-				i{
-					margin-left: 0rem;
-					border-left: none;
-					padding-left: 0rem;
-					height: auto;
-					width: 3rem;
-				}
-				span{
-					overflow: initial;
-					align-items: center;
-					width: auto;
-					margin: auto;
-					height: auto;
-				}
-			}
+			
 			.fi-br-refresh{
 				margin-left: 0;
 				border-left: none;
--- a/src/views/HomeRecommend.vue
+++ b/src/views/HomeRecommend.vue
@@ -1,54 +1,69 @@
 <template>
    <div class="homeRecommend_max Guide_1_16_1">
-        <header class="homeRecommend_heade">
-            <div class="homeRecommend_right_content">
-                <div class="homeRecommend_user_content">
-                    <img
-						class="homeRecommend_logo"
-						@click="turnToNewPage('https://www.aidlab.hk/en/')"
-						src="@/assets/images/loginPage/aida_logo.png"
-					/>
-                </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>
-			</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>
-        </header>
 		<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="content_body_recommend_center content_body_text">
-					<div class="content_body_recommend_center_title">
-						<h1>AiDA</h1>
-						<h3>bloom your creativity</h3>
+			<div class="homeRecommend_content_sticky">
+				<header class="homeRecommend_heade">
+					<div class="homeRecommend_right_content">
+						<div class="homeRecommend_user_content">
+							<img
+								class="homeRecommend_logo"
+								@click="turnToNewPage('https://www.aidlab.hk/en/')"
+								src="@/assets/images/loginPage/aida_logo.png"
+							/>
+						</div>
 					</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>
+					<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>
 					</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 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>
+				</header>
+				<div class="homeRecommend_content_body_recommend">
+					<div class="content_body_recommend_top">
+						<h1>DESIGN <br> AIDA</h1>
+						<div class="zindex">
+							Slooming <br>
+							Your Creativity
+						</div>
+					</div>
+					<img src="../../public/video/homeVideo.gif" alt="">
+					<!-- <video src="@/assets/video/homeVideo.mov" autoplay loop muted controls="controls" type="video/quicktime"></video> -->
+					<div class="content_body_recommend_content">
+						<div class="content_body_recommend_content_left">
+							Start enjoying the amazing experiences <br>
+							of using our AI-based <br>
+							interactive design assistant.
+						</div>
+						<div class="content_body_recommend_content_right zindex">
+							<i class="fi fi-rr-arrow-small-right"></i> Scroll Down
+						</div>
+					</div>
+					<div class="content_body_recommend_bottom ">
+						<div class="zindex" @click="startCreating">Start Creating</div>
+					</div>
+
 				</div>
 			</div>
-			<navRouter :routerList="navRouterList"></navRouter>
-			<router-view :isScroll="false"></router-view>
+			
+			<!-- <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>
+				</div>
+			</div> -->
+			<div style="background-color: #fff;position: relative;">
+				<!-- <navRouter :routerList="navRouterList"></navRouter> -->
+				<router-view :isScroll="false"></router-view>
+			</div>
+			
 		</div>
 		<div class="homeRecommend_content_adminTop" @click="setAdminUp">
 			<i class="fi fi-rr-arrow-small-up"></i>
@@ -107,7 +122,7 @@ export default defineComponent({
 			// router.push("/register");
 		}
 		let setAdminUp = ()=>{
-			let scrollDom = document.querySelector('.homeRecommend_content_body')
+			let scrollDom = document.querySelector('.homeRecommend_max')
 			scrollDom.scrollTo({
 				top: 0,
 				behavior: 'smooth' // 平滑滚动到顶部
@@ -131,7 +146,27 @@ export default defineComponent({
 		let goHome = ()=>{
 			router.push('/home');
 		}
+		let startCreating = ()=>{
+			if(systemUser.value.value == -1){
+				setLogin()
+			}else if(systemUser.value.value == 0){
+				window.open('https://code-create.com.hk/aida/','_blank')
+			}else if(systemUser.value.value == 1){
+				goHome()
+			}
+		}
 		onMounted(()=>{
+			let scrollDom = document.querySelector('.homeRecommend_max')
+			scrollDom.addEventListener('scroll', function() {
+				if(scrollDom.scrollTop > 200){
+					document.querySelector('.homeRecommend_content_adminTop').style.opacity = '1'
+					document.querySelector('.homeRecommend_content_adminTop').style.zIndex = 999
+				}else{
+					document.querySelector('.homeRecommend_content_adminTop').style.opacity = '0'
+					document.querySelector('.homeRecommend_content_adminTop').style.opacity = '0'
+					document.querySelector('.homeRecommend_content_adminTop').style.zIndex = 0
+				}
+			});
 			if(window.innerWidth < 768){
 				isMoblie.value = true
 			}
@@ -146,6 +181,7 @@ export default defineComponent({
 			logout,
 			goHome,
 			isMoblie,
+			startCreating,
 		}
 	},
    data() {
@@ -158,49 +194,49 @@ 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},)
-			ScrollTrigger.create({
-				trigger: codeTweenText, // 触发器元素
-				start: "top 0%", // 滚动触发器的起始滚动位置
-				end: '200% 20%',   // 滚动触发器的结束滚动位置
-				// markers: true, // 开启标注功能
-				scrub: true,
-				animation:tl1,
-				scroller:dom,//设置指定元素为滚动依据
-				scrub:2,
+		// 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},)
+		// 	ScrollTrigger.create({
+		// 		trigger: codeTweenText, // 触发器元素
+		// 		start: "top 0%", // 滚动触发器的起始滚动位置
+		// 		end: '200% 20%',   // 滚动触发器的结束滚动位置
+		// 		// markers: true, // 开启标注功能
+		// 		scrub: true,
+		// 		animation:tl1,
+		// 		scroller:dom,//设置指定元素为滚动依据
+		// 		scrub:2,
 				
-			});
-		})
+		// 	});
+		// })
    },
    methods: {
 		
@@ -214,7 +250,11 @@ export default defineComponent({
 	display: flex;
 	height: 100%;
 	flex-direction: column;
-	
+	overflow-y: auto;
+	overflow-x: hidden;
+	&.homeRecommend_max::-webkit-scrollbar {
+		display: none;
+	}
 	.homeRecommend_content_body{
 		flex: 1;
 	}
@@ -223,9 +263,11 @@ export default defineComponent({
    display: flex;
 	justify-content: space-between;
 	// padding: 0 30px;
-	padding: 0 9rem;
+	// padding: 0 9rem;
+	padding: 4rem 2rem;
+	padding-bottom: 0;
    width: 100%;
-    height: 7rem;
+    // height: 7rem;
 	flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    // border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
@@ -294,142 +336,73 @@ export default defineComponent({
    
 }
 .homeRecommend_content_body{
-	overflow-y: auto;
-	overflow-x: hidden;
-	&.homeRecommend_content_body::-webkit-scrollbar {
-		display: none;
+	// overflow-y: auto;
+	// overflow-x: hidden;
+	
+	// &.homeRecommend_content_body::-webkit-scrollbar {
+	// 	display: none;
+	// }
+	.homeRecommend_content_sticky{
+		position: sticky;
+		top: 0;
+	}
+	.zindex{
+		z-index: 2;
+	}
+	@media (max-width: 768px) {
+		br{
+			display: none;
+		}
 	}
 	.homeRecommend_content_body_recommend{
-		// display: flex;
-		// justify-content: center;
-		position: relative;
+		padding: 0 2rem;
+		padding-right: 4rem;
 		border-bottom: 1px solid #ececec;
-		
-		.content_body_recommend_left,
-		.content_body_recommend_right{
+		--margin:3rem;
+		padding-top: 10rem;
+		padding-bottom: 15rem;
+		@media (max-width: 768px) {
+			padding-right: 2rem;
+		}
+		img{
 			position: absolute;
 			top: 0;
-			img{
-				border-radius: 2rem;
-				position: absolute;
-				width: 20px;
-				object-fit: cover;
+			width: 50%;
+			right: 0;
+			top: -5%;
+			width: 70%;
+			@media (max-width: 768px) {
+				position: relative;
+				top: 0;
+				left: 50%;
+				transform: translateX(-50%);
+			}
+		}
+		.content_body_recommend_top,.content_body_recommend_content{
+			display: flex;
+			justify-content: space-between;
+			@media (max-width: 768px) {
+				flex-direction: column;
+			}
+		}
+		.content_body_recommend_top{
+			h1{
+				font-family: 'pixel';
+				line-height: .6;
+				font-size: 50rem;
+				margin: 0;
+				@media (max-width: 768px) {
+					font-size: 30rem;
+					text-align: center;
+				}
+			}
+			div{
+				font-size: 5rem;
+				@media (max-width: 768px) {
+					text-align: center;
+				}
 			}
 			
-		}
-		--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));
-			}
-		}
-		.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%;
-			}
-			.content_body_recommend_center_title{
-				h1{
-					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;
-				}
-			}
 			.content_body_recommend_center_btn{
 				display: flex;
 				justify-content: center;
@@ -439,6 +412,36 @@ export default defineComponent({
 				}
 			}
 		}
+		.content_body_recommend_content{
+			align-items: center;
+			@media (max-width: 768px) {
+				align-items: flex-start;
+			}
+			.content_body_recommend_content_right{
+				font-family: 'pixel';
+				font-size: 15rem;
+				background: linear-gradient(90deg, #be5865, #39215b);
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+				background-clip: text;
+				line-height: 1;
+				i{
+					font-size: 6rem;
+				}
+			}
+		}
+		.content_body_recommend_bottom{
+			text-align: right;
+			div{
+				padding: 0 1rem;
+				display: inline-block;
+				background: #000000;
+				color: #fff;
+				border-radius: 4px;
+				position: relative;
+				cursor: pointer;
+			}
+		}
 	}
 }
 .homeRecommend_content_adminTop{
@@ -454,7 +457,9 @@ export default defineComponent({
    align-items: center;
    justify-content: center;
 	background: #fff;
-	z-index: 999;
+	z-index: 0;
+	transition: all .3s;
+	opacity: 0;
 	i{
 		display: flex;
 		font-size: 3rem;
--- a/src/views/HomeView/Works.vue
+++ b/src/views/HomeView/Works.vue
@@ -7,7 +7,8 @@
 			<div v-show="isScroll" v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
 				{{ item.name }}
 			</div>
-			<div v-show="!isScroll" class="modal_title_text_assistant active">All</div>
+			<!-- <div v-show="!isScroll" class="modal_title_text_assistant active">All</div> -->
+			 
 			<!-- <div class="modal_search_menu">
 				<generalMenu :dataList="menuList" @setprintModel="setprintModel" :item="selectMenu"></generalMenu>
 			</div> -->
@@ -328,6 +329,14 @@ export default defineComponent({
 	&.otherUsersActive{
 		padding: 0;
 	}
-	
+	.page_loading_box{
+		text-align: center;
+		height: 50px;
+		.page_loading{
+			display: block;
+			width: 50px;
+			height: 50px;
+		}
+	}
 }
 </style>