Merge branch 'develop' of https://e.coding.net/aidlabfashion/aida/aida_front into develop

2025-02-03 09:52:24 +08:00
parent e4113ca814 4f6623d5b2
commit 23a78d88ab
92 changed files with 5116 additions and 1541 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -8,5 +8,5 @@ VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 # 徐佩
 # VUE_APP_BASE_URL = 'http://192.168.1.4:5567'
 # 海波
-# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
+# VUE_APP_BASE_URL = 'http://192.168.1.2:5567'

--- a/public/image/events/AiDA2025-Cn.jpg
+++ b/public/image/events/AiDA2025-Cn.jpg
--- a/public/image/events/AiDA2025-En.jpg
+++ b/public/image/events/AiDA2025-En.jpg
--- a/public/js/fabric.brushes.js
+++ b/public/js/fabric.brushes.js
@@ -127,7 +127,6 @@ fabric.Point.prototype.normalize = function(thickness) {
 * This makes the drawing editable, it can be moved, rotated, scaled, skewed etc.
 */
 fabric.BaseBrush.prototype.convertToPath = function() {
-	console.log(this.canvas.upperCanvasEl);
 	var pixelRatio = this.canvas.getRetinaScaling(),
 		c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
 		xy = fabric.util.trimCanvas(c),
@@ -147,13 +146,16 @@ fabric.BaseBrush.prototype.convertToPath = function() {
 		strokeWidth: this._width,
 		stroke: 'black',
 		fill:'transparent',
+		custom:{
+			dashed:true
+		},
 	}).setCoords();
 	let group = new fabric.Group([pathElemetn],{
 		left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
 		top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
 		custom:{
 			dashed:true
-		}
+		},
 	})
 	
 	this.canvas.add(group).clearContext(this.canvas.contextTop);
--- a/src/assets/images/homePage/bankCard.svg
+++ b/src/assets/images/homePage/bankCard.svg
@@ -1,3 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M16 4H0v-.75C0 2.56.448 2 1 2h14c.552 0 1 .56 1 1.25V4zm0 2.5V13a1 1 0 01-1 1H1a1 1 0 01-1-1V6.5h16zM4 10a1 1 0 100 2h1a1 1 0 100-2H4z" fill="#000"/>
-</svg>
--- a/src/assets/images/homePage/stripe.svg
+++ b/src/assets/images/homePage/stripe.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735265169559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1495" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M802.158921 871.935232h-580.317842c-63.174813 0-114.374813-51.2-114.374812-114.374812V177.31934c0-63.174813 51.2-114.374813 114.374812-114.374812h580.317842c63.174813 0 114.374813 51.2 114.374812 114.374812v580.317841c0 63.098051-51.2 114.298051-114.374812 114.298051z" fill="#009BF1" p-id="1496"></path><path d="M469.627586 350.647076c0-25.638381 21.416492-35.54063 55.728936-35.540629 49.971814 0 113.376912 15.275562 163.271964 42.21889V202.804198c-54.423988-21.723538-108.771214-30.013793-163.195203-30.013793-133.181409 0-221.917841 69.546027-221.917841 185.763118 0 181.694753 249.552024 152.295052 249.552024 230.668666 0 30.397601-26.329235 40.146327-62.944527 40.146327-54.347226 0-124.507346-22.414393-179.622189-52.351425v147.919641c61.025487 26.252474 122.895352 37.306147 179.545427 37.306147 136.482159 0 230.515142-58.722639 230.515142-176.782009-0.076762-195.972414-250.933733-160.892354-250.933733-234.813794" fill="#FFFFFF" p-id="1497"></path></svg>
--- a/src/assets/images/icon/details_color.png
+++ b/src/assets/images/icon/details_color.png
--- a/src/assets/images/icon/details_elements.png
+++ b/src/assets/images/icon/details_elements.png
--- a/src/assets/images/icon/details_print.png
+++ b/src/assets/images/icon/details_print.png
--- a/src/assets/images/icon/details_sketch.png
+++ b/src/assets/images/icon/details_sketch.png
--- a/src/assets/json/events.json
+++ b/src/assets/json/events.json
@@ -8,7 +8,11 @@
 			"id": 2,
 			"title":"AiDA X SFT AI Fashion Award 2024",
 			"imgUrl": "/image/events/Fashion-Award-2024.png"
-		  }
+		},{
+			"id": 3,
+			"title":"✨New Year 2025！🎉Let's kick off the year with a burst of inspiration and design!",
+			"imgUrl": "/image/events/AiDA2025-En.jpg"
+		}
 	  ],
 	"eventsItem":[
 	  {
@@ -88,6 +92,53 @@
 				]
 			}
 		]
+		},{
+			"id":3,
+			"title":"✨New Year 2025！🎉Let's kick off the year with a burst of inspiration and design!",
+			"imgUrl": "/image/events/AiDA2025-En.jpg",
+			"textList":[
+				{
+					"paragraph":[
+						{
+							"text":"Share your work and get 1 month of free access to AiDA！"
+						}
+					]
+				},{
+					"paragraph":[
+						{
+							"text":" Just do the following:"
+						}
+					]
+				},{
+					"paragraph":[
+						{
+							"text":" ✅Share your designs on AiDA's Gallery "
+						},{
+							"text":" ✅Add the tag #NewYear_2025  in the work description"
+						},{
+							"text":" ✅At least 20 likes "
+						}
+					]
+				},{
+					"paragraph":[
+						{
+							"text":"📅 Duration: January 1, 2025 – January 31, 2025"
+						}
+					]
+				},{
+					"paragraph":[
+						{
+							"text":"Join in the fun and embark on a new year's journey of design. Mix your creativity with tech to make amazing, unique creations! Get your friends to help you seize this opportunity! Invite them to give your design some love with their likes～💗"
+						}
+					]
+				},{
+					"paragraph":[
+						{
+							"text":"👍 AiDA is waiting for you to unlock a new world of design!"
+						}
+					]
+				}
+			]
 		}
 	]
  }
--- a/src/assets/json/events_cn.json
+++ b/src/assets/json/events_cn.json
@@ -8,7 +8,11 @@
        "id": 2,
 		"title":"AiDA X SFT AI时尚设计比赛2024",
 		"imgUrl": "/image/events/Fashion-Award-2024.png"
-      }
+      },{
+		"id": 3,
+		"title":"🎉搭上2025的列车！打开新设计的大门！",
+		"imgUrl": "/image/events/AiDA2025-Cn.jpg"
+		}
 	],
  "eventsItem":[
 	{
@@ -88,6 +92,53 @@
 				]
 			}
 		]
+	},{
+		"id":3,
+		"title":"🎉搭上2025的列车！打开新设计的大门！",
+		"imgUrl": "/image/events/AiDA2025-Cn.jpg",
+		"textList":[
+			{
+				"paragraph":[
+					{
+						"text":"快来发布作品获得1个月免费使用AiDA的福利！"
+					}
+				]
+			},{
+				"paragraph":[
+					{
+						"text":" 只需要："
+					}
+				]
+			},{
+				"paragraph":[
+					{
+						"text":" ✅在AiDA将设计作品分享至广场/Gallery，"
+					},{
+						"text":" ✅点赞至少20"
+					},{
+						"text":" ✅在作品描述加上tag #NewYear_2025"
+					}
+				]
+			},{
+				"paragraph":[
+					{
+						"text":"📅 活动时间：2025.1.1—2025.1.31"
+					}
+				]
+			},{
+				"paragraph":[
+					{
+						"text":"快来参与，让我们共同开启新年的设计之旅，让创意与科技完美融合，创造出属于你的独一无二的作品！机会难得，叫上你的朋友们助你一臂之力，为你点上大拇指哦！"
+					}
+				]
+			},{
+				"paragraph":[
+					{
+						"text":"👍 点赞即启程，AiDA等你来解锁设计新世界！"
+					}
+				]
+			}
+		]
 	}
  ]
 }
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -7,7 +7,7 @@ body,
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
  --aida-fsize2: calc(2.6rem);
-  --aida-fsize1-8: calc(1.8rem*1.2);
+  --aida-fsize1-8: calc(1.8rem);
  --aida-fsize1-6: calc(1.6rem);
  --aida-fsize1-4: calc(1.4rem*1.2);
  --antd-wave-shadow-color: #39215b;
@@ -217,6 +217,11 @@ li {
  box-sizing: border-box;
  white-space: nowrap;
 }
+.gallery_btn.btnSamil {
+  padding: 0rem 2rem;
+  line-height: 4rem;
+  font-size: 1.6rem;
+}
 .gallery_btn.gallery_btn_radius {
  border-radius: 1.4rem;
 }
@@ -232,13 +237,21 @@ li {
  color: #fff;
  background-color: #000;
 }
+.gallery_btn.white.active {
+  color: #fff;
+  background-color: #000;
+}
+.gallery_btn.active {
+  background-color: #fff;
+  color: #000;
+}
 .started_btn {
  padding: 0 calc(1.8rem*1.2);
  display: inline-block;
-  border-radius: calc(2rem*1.2);
+  border-radius: 4rem;
  font-size: calc(1.2rem*1.2);
  color: #fff;
-  background-color: #39215b;
+  background-color: #000000;
  cursor: pointer;
  height: 3.3rem;
  line-height: 3.3rem;
@@ -261,57 +274,14 @@ li {
    transform: rotate(360deg);
  }
 }
-.el-cascader {
-  font-size: 1.2rem;
-  width: 100%;
-  height: 3rem;
-  --el-color-primary: #d9d9d9;
-  --el-cascader-tag-background: #e1d9ec;
-}
-.el-cascader .el-input {
-  height: 100%;
-}
-.el-cascader .el-input .el-input__wrapper .el-input__inner {
-  height: 80% !important;
-  font-size: 1.2rem;
+.el-popper.is-pure {
+  border: 1px solid;
 }
 .el-popper {
  padding: 0.5rem 1.1rem;
 }
-.el-cascader__tags,
-.el-cascader__collapse-tag {
-  --el-color-primary: #d9d9d9;
-  --el-cascader-tag-background: #e1d9ec;
-  --el-fill-color: #e1d9ec;
-  height: 100%;
-  width: 90% !important;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  align-items: center;
-}
-.el-cascader__tags .el-tag--light,
-.el-cascader__collapse-tag .el-tag--light {
-  margin: 0 0 0 0.6rem;
-  padding-right: 0.5rem;
-  height: 80%;
-  --el-icon-size: 1.4rem;
-  display: flex;
-}
-.el-cascader__tags .el-tag--light .el-tag__content,
-.el-cascader__collapse-tag .el-tag--light .el-tag__content {
-  font-size: 1.4rem;
-  color: #000;
-}
-.el-cascader__tags .el-cascader__search-input,
-.el-cascader__collapse-tag .el-cascader__search-input {
-  height: 100%;
-  margin: 0 0 0 1.1rem;
-}
-.el-cascader__collapse-tag {
-  margin-bottom: 0.5rem;
-}
-.el-cascader__collapse-tag .el-cascader__collapse-tag .el-tag--light {
-  display: flex !important;
+.el-popper .el-popper__arrow {
+  display: none;
 }
 .hideEvents {
  pointer-events: none !important;
@@ -728,18 +698,29 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
  display: flex;
  align-items: center;
  margin-right: 5rem;
+  height: 6rem;
+}
+.generalModel_state .generalModel_state_item.smail > input {
+  padding: 1rem 2rem !important;
+}
+.generalModel_state .generalModel_state_item.smail .ant-picker-range,
+.generalModel_state .generalModel_state_item.smail .ant-select-selector,
+.generalModel_state .generalModel_state_item.smail .range_picker {
+  padding: 1rem 2rem !important;
+}
+.generalModel_state .generalModel_state_item.smail .el-cascader {
+  padding: 1rem 2rem;
 }
 .generalModel_state .generalModel_state_item > input {
  height: 2.5rem !important;
  border-radius: 4rem;
-  padding: 2rem !important;
+  padding: calc(2rem - 1px * 2) !important;
  box-sizing: content-box;
  background-color: #f3f3f3;
+  background-color: #fff;
  width: calc(100% - 4rem);
  font-size: 1.8rem;
  transition: all 0.3s;
-}
-.generalModel_state .generalModel_state_item > input:hover {
  border: 1px solid;
 }
 .generalModel_state .generalModel_state_item > span {
@@ -757,10 +738,12 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .generalModel_state .generalModel_state_item .range_picker {
  height: 2.5rem !important;
  border-radius: 4rem;
-  padding: 2rem !important;
+  padding: calc(2rem - 1px * 2) !important;
  box-sizing: content-box;
  background-color: #f3f3f3;
+  background-color: #fff;
  width: calc(100% - 4rem);
+  border: 1px solid #000;
 }
 .generalModel_state .generalModel_state_item .ant-picker-input > input {
  font-size: 1.8rem;
@@ -773,6 +756,77 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
  display: flex;
  align-items: center;
 }
+.generalModel_state .generalModel_state_item .el-cascader {
+  font-size: 1.8rem;
+  width: 100%;
+  border: 1px solid #dcdfe6;
+  border-radius: 4rem;
+  background-color: #fff;
+  height: 2.5rem;
+  padding: 2rem;
+  transition: all 0.3s;
+  box-sizing: content-box;
+  border: 1px solid;
+}
+.generalModel_state .generalModel_state_item .el-cascader .el-cascader__tags,
+.generalModel_state .generalModel_state_item .el-cascader .el-input {
+  height: 100%;
+}
+.generalModel_state .generalModel_state_item .el-cascader .el-input .el-input__wrapper {
+  box-shadow: none;
+  padding: 0;
+  width: 100%;
+}
+.generalModel_state .generalModel_state_item .el-cascader .el-input .el-input__wrapper .el-input__inner {
+  font-size: 1.8rem;
+}
+.generalModel_state .generalModel_state_item .el-cascader__tags {
+  padding-left: 1rem;
+}
+.generalModel_state .generalModel_state_item .el-cascader__tags,
+.generalModel_state .generalModel_state_item .el-cascader__collapse-tag {
+  --el-color-primary: #d9d9d9;
+  --el-cascader-tag-background: #000;
+  --el-fill-color: #e1d9ec;
+  box-sizing: content-box;
+  width: 90% !important;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  align-items: center;
+}
+.generalModel_state .generalModel_state_item .el-cascader__tags .el-tag--light,
+.generalModel_state .generalModel_state_item .el-cascader__collapse-tag .el-tag--light {
+  margin: 0 0 0 0.6rem;
+  padding-right: 0.5rem;
+  height: 70%;
+  --el-icon-size: 1.4rem;
+  display: flex;
+}
+.generalModel_state .generalModel_state_item .el-cascader__tags .el-tag--light .el-tag__content,
+.generalModel_state .generalModel_state_item .el-cascader__collapse-tag .el-tag--light .el-tag__content {
+  font-size: 1.4rem;
+  color: #fff;
+}
+.generalModel_state .generalModel_state_item .el-cascader__tags .el-cascader__search-input,
+.generalModel_state .generalModel_state_item .el-cascader__collapse-tag .el-cascader__search-input {
+  height: 100%;
+}
+.generalModel_state .generalModel_state_item .el-cascader__search-input,
+.generalModel_state .generalModel_state_item .el-input__inner {
+  margin: 0;
+  width: 100%;
+  height: 4.6rem;
+  padding-left: 2.1rem;
+  line-height: 4.6rem;
+  font-size: 1.8rem;
+  box-sizing: border-box;
+}
+.generalModel_state .generalModel_state_item .el-cascader__collapse-tag {
+  margin-bottom: 0.5rem;
+}
+.generalModel_state .generalModel_state_item .el-cascader__collapse-tag .el-cascader__collapse-tag .el-tag--light {
+  display: flex !important;
+}
 .generalModel_state .generalModel_current {
  background: #fff;
  width: 100%;
@@ -801,6 +855,13 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .generalModel_state .header_user_content.active {
  display: block;
 }
+.ant-select-dropdown {
+  border: 1px solid #000;
+  border-radius: 1rem;
+}
+.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+  background-color: #f3f3f6;
+}
 .generalModel {
  -moz-user-select: none;
  -webkit-user-select: none;
@@ -811,6 +872,15 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
  box-shadow: none;
  height: calc(65rem*1.2);
 }
+.generalModel.fullScreen {
+  max-width: 100%;
+}
+.generalModel.fullScreen .ant-modal-content {
+  border-radius: 0rem;
+}
+.generalModel.fullScreen .ant-modal-body {
+  padding: 2.5rem 3rem;
+}
 .generalModel .ant-modal-content {
  border-radius: 3rem;
  height: 100%;
@@ -872,6 +942,14 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
  display: flex;
  align-items: center;
  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid;
+  z-index: 2;
+}
+@media (max-width: 768px) {
+  .generalModel .generalModel_btn .generalModel_closeIcon {
+    transform: translate(-100%, 100%);
+  }
 }
 .generalModel .generalModel_btn .generalModel_closeIcon.download {
  transform: translate(-100%, 100%);
@@ -1029,10 +1107,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .sketchboard_upload_modal .switch_type_list.showEvents * {
  pointer-events: auto;
 }
-.ant-modal-wrap {
-  height: 100vh;
-  overflow: auto;
-}
 .ant-btn:hover,
 .ant-btn:focus,
 .ant-btn:active,
@@ -1071,7 +1145,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
  margin: 0 3rem 0 1rem;
 }
 .ant-message {
-  z-index: 1049 !important;
+  z-index: 9999 !important;
  top: 6rem;
 }
 .ant-modal-confirm-btns .ant-btn:hover {
@@ -1088,7 +1162,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
  background: #543087 !important;
 }
 .ant-spin-dot-item {
-  background-color: #543087;
+  background-color: #000000;
 }
 .ant-spin {
  color: #000;
@@ -1169,6 +1243,16 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .ant-pagination-prev:hover .ant-pagination-item-link,
 .ant-pagination-next:hover .ant-pagination-item-link {
  color: #000;
+  background-color: #fff;
+  border: 1px solid #000;
+}
+.ant-pagination-item:hover {
+  border: 1px solid #000;
+}
+.ant-pagination-prev .ant-pagination-item-link,
+.ant-pagination-next .ant-pagination-item-link {
+  background-color: #000;
+  color: #fff;
 }
 .ant-pagination-item:hover a {
  color: #000;
@@ -1179,7 +1263,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .libraryPageCascader .cascader_btn_max {
  height: 4.5rem;
  width: 100%;
-  border-bottom: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
 }
@@ -1532,10 +1615,14 @@ textarea:focus {
 .upload_item .upload_file_item .ant-upload-picture-card-wrapper .ant-upload-select-picture-card {
  width: calc(6rem*1.2);
  height: calc(6rem*1.2);
-  border: calc(0.3rem*1.2) solid #ededed;
+  border: calc(0.3rem*1.2) solid #000;
  border-radius: calc(1rem*1.2);
  margin: 0;
 }
+.upload_item .upload_file_item .ant-upload-picture-card-wrapper .ant-upload-select-picture-card .fi-br-upload {
+  font-size: 2rem;
+  color: #000;
+}
 .upload_item .upload_file_item.upload_file_item:last-child {
  margin: 0;
 }
@@ -1602,12 +1689,11 @@ textarea:focus {
  z-index: 2;
  display: flex;
  align-items: center;
-  position: sticky;
  padding-bottom: calc(2rem*1.2);
  background: #fff;
  top: 0;
  flex-wrap: wrap;
-  --width: 70%;
+  --width: 65%;
 }
 .collection_modal_body .input_border .input_box,
 .design_detail_modal_component .input_border .input_box,
@@ -1671,16 +1757,15 @@ textarea:focus {
 .productImg_modal .input_border .search_keyword .search_keyword_center,
 .accountEdit_page .input_border .search_keyword .search_keyword_center,
 .generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center {
+  margin-top: 1rem;
  justify-content: space-between;
  display: flex;
  width: var(--width);
  background-color: #fff;
  padding: 1rem 2rem;
  border-radius: 0 0 0.4rem 0.4rem;
-  border-top: solid 0 #f1f1f1;
-  border-right: solid 1px #f1f1f1;
-  border-left: solid 1px #f1f1f1;
-  border-bottom: solid 1px #f1f1f1;
+  border: 1px solid;
+  border-radius: 1rem;
  max-height: 30rem;
  overflow-y: scroll;
 }
@@ -1702,8 +1787,7 @@ textarea:focus {
 .accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
 .generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
  border-radius: 0.4rem;
-  border: solid 1px #39215b;
-  background-color: #8156bd;
+  background-color: #000000;
  margin-right: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
@@ -1726,18 +1810,21 @@ textarea:focus {
 .productImg_modal .input_border .input_box_btnBox,
 .accountEdit_page .input_border .input_box_btnBox,
 .generalMenu_printModel_upload .input_border .input_box_btnBox {
-  border: calc(0.1rem*1.2) solid #F1F1F1;
+  border: 1px solid #000;
+  border-radius: 4rem;
  width: var(--width);
  display: flex;
  float: left;
  align-items: center;
+  padding: 1.5rem 2rem;
+  padding-right: 0;
 }
-.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
-.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
-.library_page .input_border .input_box_btnBox .ant-spin-text,
-.productImg_modal .input_border .input_box_btnBox .ant-spin-text,
-.accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
-.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text {
+.collection_modal_body .input_border .input_box_btnBox border .ant-spin-text,
+.design_detail_modal_component .input_border .input_box_btnBox border .ant-spin-text,
+.library_page .input_border .input_box_btnBox border .ant-spin-text,
+.productImg_modal .input_border .input_box_btnBox border .ant-spin-text,
+.accountEdit_page .input_border .input_box_btnBox border .ant-spin-text,
+.generalMenu_printModel_upload .input_border .input_box_btnBox border .ant-spin-text {
  font-size: 1.2rem;
 }
 .collection_modal_body .input_border .input_box_btnBox .search_seed,
@@ -1752,6 +1839,29 @@ textarea:focus {
  font-size: 1.2rem;
  border-right: calc(0.1rem*1.2) solid #F1F1F1;
 }
+.collection_modal_body .input_border .input_box_btnBox .upload_item,
+.design_detail_modal_component .input_border .input_box_btnBox .upload_item,
+.library_page .input_border .input_box_btnBox .upload_item,
+.productImg_modal .input_border .input_box_btnBox .upload_item,
+.accountEdit_page .input_border .input_box_btnBox .upload_item,
+.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item {
+  width: 5.7rem;
+}
+.collection_modal_body .input_border .input_box_btnBox .upload_item .upload_file_item,
+.design_detail_modal_component .input_border .input_box_btnBox .upload_item .upload_file_item,
+.library_page .input_border .input_box_btnBox .upload_item .upload_file_item,
+.productImg_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
+.accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item,
+.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 5.7rem;
+  width: 5.7rem;
+  border-radius: 50%;
+  overflow: hidden;
+}
 .collection_modal_body .input_border input,
 .design_detail_modal_component .input_border input,
 .library_page .input_border input,
@@ -1763,7 +1873,9 @@ textarea:focus {
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding-left: calc(1.5rem*1.2);
  border: calc(0.1rem*1.2) solid #ffffff00;
-  font-size: calc(1.6rem*1.2);
+  font-size: 1.8rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
  font-weight: 400;
 }
 .collection_modal_body .input_border inputinput:-moz-placeholder,
@@ -1948,6 +2060,7 @@ textarea:focus {
 .generalMenu_printModel_upload .input_border .generage_btn_box .content > div {
  background: #cccccc;
  line-height: 2;
+  font-size: 1.8rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
@@ -1969,6 +2082,9 @@ textarea:focus {
 .generalMenu_printModel_upload .input_border .generage_btn {
  margin-left: 2rem;
  display: flex;
+  font-size: 1.8rem;
+  padding: 1rem 2rem;
+  box-sizing: content-box;
 }
 .hideChecked {
  user-select: none;
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -7,7 +7,7 @@ html,body,#app{
 	overflow: hidden;
 	// --antd-wave-shadow-color: #341e57;
 	--aida-fsize2: calc(2.6rem);
-	--aida-fsize1-8: calc(1.8rem*1.2);
+	--aida-fsize1-8: calc(1.8rem);
 	--aida-fsize1-6: calc(1.6rem);
 	--aida-fsize1-4: calc(1.4rem*1.2);
 	--antd-wave-shadow-color:#39215b;
@@ -221,6 +221,11 @@ input:focus{
 	cursor: pointer;
 	box-sizing: border-box;
 	white-space: nowrap;
+	&.btnSamil{
+		padding: 0rem 2rem;
+		line-height: 4rem;
+		font-size: 1.6rem;
+	}
 	&.gallery_btn_radius{
 		border-radius: 1.4rem;
 	}
@@ -235,17 +240,26 @@ input:focus{
 			color: #fff;
 			background-color: #000;
 		}
+		&.active{
+			color: #fff;
+			background-color: #000;
+		}
 	}
+	&.active{
+		background-color: #fff;
+		color: #000;
+	}
+
 }

 //started公共按钮样式
 .started_btn{
 	padding: 0 calc(1.8rem*1.2);
 	display: inline-block;
-	border-radius: calc(2rem*1.2);
+	border-radius: 4rem;
 	font-size: calc(1.2rem*1.2);
 	color: #fff;
-	background-color: #39215b;
+	background-color: #000000;
 	cursor: pointer;
 	height: 3.3rem;
 	line-height: 3.3rem;
@@ -272,59 +286,16 @@ input:focus{



-.el-cascader{
-	font-size: 1.2rem;
-	width: 100%;
-	height: 3rem;
-	--el-color-primary: #d9d9d9;
-	--el-cascader-tag-background:#e1d9ec;
-	.el-input{
-		height: 100%;
-		.el-input__wrapper{
-			.el-input__inner{
-				height: 80% !important;
-				font-size: 1.2rem;
-			}
-		}
-	}
+.el-popper.is-pure{
+	border: 1px solid;
 }
 .el-popper{
 	padding: .5rem 1.1rem;
-}
-.el-cascader__tags,.el-cascader__collapse-tag{
-	--el-color-primary: #d9d9d9;
-	--el-cascader-tag-background:#e1d9ec;
-	--el-fill-color:#e1d9ec;
-	height: 100%;
-	width: 90% !important;
-	flex-wrap: nowrap;
-	overflow: hidden;
-	align-items: center;
-	.el-tag--light{
-		margin: 0 0 0 .6rem;
-		padding-right: .5rem;
-		height: 80%;
-		--el-icon-size: 1.4rem;
-		display: flex;
-		.el-tag__content{
-			font-size: 1.4rem;
-			color: #000;
-			
-		}
-	}
-	.el-cascader__search-input{
-		height: 100%;
-		margin: 0 0 0 1.1rem;
-	}
-}
-.el-cascader__collapse-tag{
-	margin-bottom: .5rem;
-	.el-cascader__collapse-tag{
-		.el-tag--light{
-			display: flex !important;
-		}
+	.el-popper__arrow{
+		display: none;
 	}
 }
+
 .hideEvents{
 	pointer-events:none !important;
 	*{
@@ -794,18 +765,32 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 		display: flex;
 		align-items: center;
 		margin-right: 5rem;
+		height: 6rem;
+		&.smail{
+			>input{
+				padding: 1rem 2rem !important;
+			}
+			.ant-picker-range,.ant-select-selector,.range_picker{
+				padding: 1rem 2rem !important;
+			}
+			.el-cascader{
+				padding: 1rem 2rem;
+			}
+
+		}
 		>input{
 			height: 2.5rem !important;
 			border-radius: 4rem;
-			padding: 2rem !important;
+			padding: calc(2rem - 1px * 2) !important;
 			box-sizing: content-box;
 			background-color: #f3f3f3;
+			background-color: #fff;
 			width: calc(100% - 4rem);
 			font-size: 1.8rem;
 			transition: all .3s;
+			border: 1px solid;
 		}
 		>input:hover{
-			border: 1px solid;
 		}
 		>span{
 			font-size: 2rem;
@@ -820,10 +805,12 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 		.ant-picker-range,.ant-select-selector,.range_picker{
 			height: 2.5rem !important;
 			border-radius: 4rem;
-			padding: 2rem !important;
+			padding: calc(2rem - 1px * 2) !important;
 			box-sizing: content-box;
 			background-color: #f3f3f3;
+			background-color: #fff;
 			width: calc(100% - 4rem);
+			border: 1px solid #000;
 		}
 		.ant-picker-input > input{
 			font-size: 1.8rem;
@@ -838,6 +825,78 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 				}
 			}
 		}
+
+		.el-cascader{
+			font-size: 1.8rem;
+			width: 100%;
+			border: 1px solid #dcdfe6;
+			border-radius: 4rem;
+			background-color: #fff;
+			height: 2.5rem;
+			padding: 2rem;
+			transition: all .3s;
+			box-sizing: content-box;
+			border: 1px solid;
+			.el-cascader__tags,.el-input{
+				height: 100%;
+			}
+			.el-input{
+				.el-input__wrapper{
+					box-shadow: none;
+					padding: 0;
+					width: 100%;
+					.el-input__inner{
+						font-size: 1.8rem;
+					}
+				}
+			}
+		}
+		.el-cascader:hover{
+		}
+		.el-cascader__tags{
+			padding-left: 1rem;
+		}
+		.el-cascader__tags,.el-cascader__collapse-tag{
+			--el-color-primary: #d9d9d9;
+			--el-cascader-tag-background:#000;
+			--el-fill-color:#e1d9ec;
+			box-sizing: content-box;
+			width: 90% !important;
+			flex-wrap: nowrap;
+			overflow: hidden;
+			align-items: center;
+			.el-tag--light{
+				margin: 0 0 0 .6rem;
+				padding-right: .5rem;
+				height: 70%;
+				--el-icon-size: 1.4rem;
+				display: flex;
+				.el-tag__content{
+					font-size: 1.4rem;
+					color: #fff;
+				}
+			}
+			.el-cascader__search-input{
+				height: 100%;
+			}
+		}
+		.el-cascader__search-input,.el-input__inner{
+			margin: 0;
+			width: 100%;
+			height: 4.6rem;
+			padding-left: 2.1rem;
+			line-height: 4.6rem;
+			font-size: 1.8rem;
+			box-sizing: border-box;
+		}
+		.el-cascader__collapse-tag{
+			margin-bottom: .5rem;
+			.el-cascader__collapse-tag{
+				.el-tag--light{
+					display: flex !important;
+				}
+			}
+		}
 	}
 	.generalModel_current{
 		background: #fff;
@@ -869,6 +928,14 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	}
 }	

+//下拉的内容
+.ant-select-dropdown{
+	border: 1px solid #000;
+	border-radius: 1rem;
+	.ant-select-item-option-selected:not(.ant-select-item-option-disabled){
+		background-color: #f3f3f6;
+	}
+}

 .generalModel{//自带关闭的页面
 	-moz-user-select: none;
@@ -879,6 +946,15 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	position: relative;
 	box-shadow: none;
 	height: calc(65rem*1.2);
+	&.fullScreen{
+		max-width: 100%;
+		.ant-modal-content{
+			border-radius: 0rem;
+		}
+		.ant-modal-body{
+			padding: 2.5rem 3rem;
+		}
+	}
 	.ant-modal-content{
 		border-radius: 3rem;
 		height: 100%;
@@ -941,6 +1017,12 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 			display: flex;
 			align-items: center;
 			justify-content: center;
+			border-radius: 50%;
+			border: 1px solid;
+			z-index: 2;
+			@media (max-width: 768px) {
+				transform: translate(-100%, 100%);
+			}
 			&.download{
 				transform: translate(-100%, 100%);
 			}
@@ -1119,12 +1201,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	}
 }

-.ant-modal-wrap{
-	height: 100vh;
-	// overflow: hidden;
-	overflow: auto;
-	// position: fixed;
-}
+// .ant-modal-wrap{
+// 	height: 100vh;
+// 	overflow: auto;
+// }
 // .driver-overlay-animated{
 // 	z-index: 10002 !important;
 // }
@@ -1172,7 +1252,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	margin: 0 3rem 0 1rem;
 }
 .ant-message{
-	z-index: 1049 !important;
+	z-index: 9999 !important;
 	top: 6rem;
 }
 .ant-modal-confirm-btns{
@@ -1192,7 +1272,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 }
 //loding样式
 .ant-spin-dot-item{
-    background-color: #543087;
+    background-color: #000000;
 }
 .ant-spin{
 	color: #000;
@@ -1271,9 +1351,21 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	border-color: #000;
 	box-shadow: none;
 }
-.ant-pagination-prev:hover .ant-pagination-item-link, 
-.ant-pagination-next:hover .ant-pagination-item-link{
-	color: #000;	
+.ant-pagination-prev:hover .ant-pagination-item-link,
+.ant-pagination-next:hover .ant-pagination-item-link {
+  color: #000;		
+  background-color: #fff;
+  border: 1px solid #000;
+}
+.ant-pagination-item:hover{
+	border: 1px solid #000;
+}
+.ant-pagination-prev,
+.ant-pagination-next{
+	.ant-pagination-item-link{
+		background-color: #000;
+		color: #fff;
+	}
 }
 .ant-pagination-item:hover a{
 	color: #000;	
@@ -1285,7 +1377,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	.cascader_btn_max{
 		height: 4.5rem;
 		width: 100%;
-		border-bottom: 1px solid rgb(225 225 225);
 		display: flex;
 		align-items: center;
 		.cascader_btn1{
@@ -1658,9 +1749,13 @@ textarea:focus{
 			.ant-upload-select-picture-card {
 				width: calc(6rem*1.2);
 				height: calc(6rem*1.2);
-				border: calc(0.3rem*1.2) solid #ededed;
+				border: calc(0.3rem*1.2) solid #000;
 				border-radius: calc(1rem*1.2);
 				margin: 0;
+				.fi-br-upload{
+					font-size: 2rem;
+					color: #000;
+				}
 			}
 			
 			
@@ -1732,12 +1827,11 @@ textarea:focus{
 		z-index: 2;
 		display: flex;
 		align-items: center;
-		position: sticky;
 		padding-bottom: calc(2rem*1.2);
 		background: #fff;
 		top: 0;
 		flex-wrap: wrap;
-		--width:70%;
+		--width:65%;
 		.input_box{
 			position: relative;
 			z-index: 2;
@@ -1766,16 +1860,19 @@ textarea:focus{
 			height: 0;
 			flex-basis: 100%;
 			.search_keyword_center{
+				margin-top: 1rem;
 				justify-content: space-between;
 				display: flex;
 				width: var(--width);
 				background-color: #fff;
 				padding: 1rem 2rem;
 				border-radius: 0 0 .4rem .4rem;
-				border-top: solid 0 #f1f1f1;
-				border-right: solid 1px#f1f1f1;
-				border-left: solid 1px#f1f1f1;
-				border-bottom: solid 1px#f1f1f1;
+				// border-top: solid 0 #f1f1f1;
+				// border-right: solid 1px#f1f1f1;
+				// border-left: solid 1px#f1f1f1;
+				// border-bottom: solid 1px#f1f1f1;
+				border: 1px solid;
+				border-radius: 1rem;
 				max-height: 30rem;
 				overflow-y: scroll;
 				.search_keyword_center_left{
@@ -1787,8 +1884,7 @@ textarea:focus{
 				}
 				.search_keyword_center_item{
 					border-radius: .4rem;
-					border: solid 1px #39215b;
-					background-color: #8156bd;
+					background-color: #000000;
 					margin-right: 1rem;
 					margin-bottom: 1rem;
 					padding: .5rem 1rem;
@@ -1803,11 +1899,15 @@ textarea:focus{
 			}
 		}
 		.input_box_btnBox{
-			border: calc(0.1rem*1.2) solid #F1F1F1;
+			border: 1px solid #000;
+			border-radius: 4rem;
 			width: var(--width);
 			display: flex;
 			float: left;
 			align-items: center;
+			padding: 1.5rem 2rem;
+			padding-right: 0;
+			border
 			.ant-spin-text{
 				font-size: 1.2rem;
 			}
@@ -1818,6 +1918,19 @@ textarea:focus{
 				font-size: 1.2rem;
 				border-right: calc(0.1rem* 1.2) solid #F1F1F1;
 			}
+			.upload_item{
+				width: 5.7rem;
+				.upload_file_item{
+					position: absolute;
+					left: 0;
+					top: 50%;
+					transform: translateY(-50%);
+					height: 5.7rem;
+					width: 5.7rem;
+					border-radius: 50%;
+					overflow: hidden;
+				}
+			}
 		}
 		
 		input{
@@ -1827,7 +1940,9 @@ textarea:focus{
 			padding-left: calc(1.5rem*1.2);
 			border: calc(0.1rem*1.2) solid #ffffff00;
 			// border: calc(0.1rem*1.2) solid #F1F1F1;
-			font-size: calc(1.6rem*1.2);
+			font-size: 1.8rem;
+			height: 2.5rem;
+			line-height: 2.5rem;
 			font-weight: 400;
 			&input:-moz-placeholder{   
 				color: rgba(0,0,0,.15);   
@@ -1912,6 +2027,7 @@ textarea:focus{
 			position: relative;
 			display: flex;
 			align-items: center;
+			
 			.icon-xiala{
 				margin-left: 1rem;
 				transition: all .3s;
@@ -1933,6 +2049,7 @@ textarea:focus{
 				>div{
 					background: #cccccc;
 					line-height: 2;
+					font-size: 1.8rem;
 					cursor: pointer;
 					white-space: nowrap;
 					overflow: hidden;
@@ -1947,6 +2064,9 @@ textarea:focus{
 			// margin: 0 auto;
 			margin-left: 2rem;
 			display: flex;
+			font-size: 1.8rem;
+			padding: 1rem 2rem;
+			box-sizing: content-box;
 		}
 	}
 	
--- a/src/component/Account/account.vue
+++ b/src/component/Account/account.vue
@@ -7,12 +7,54 @@
 			<div class="content_item_user">
 				<div class="content_item_user_left">
 					<div class="content_item_user_left_detail">
-						<img :src="userDetail.avatar" alt="">
+						<img :src="uploadUrl?uploadUrl:userDetail.avatar" alt="">
+						<div class="upload_box">
+							<i class="fi fi-rr-camera"></i>
+							<a-upload
+								class="upload"
+								:capture="null"
+								list-type="picture-card"
+								:before-upload="beforeUpload"
+								v-model:file-list="fileList"
+								:customRequest="function(){}"
+								:maxCount="1"
+								accept=".jpg,.png,.jpeg,.bmp"
+								@change="fileUploadChange"
+								>
+								<div
+									class="upload_tip_block"
+								>
+									<!-- <i class="fi fi-br-upload"></i> -->
+									<!-- <img :src="uploadUrl?uploadUrl:userDetail.avatar" alt=""> -->
+								</div>
+							</a-upload>
+						</div>
 					</div>
 					<div class="content_item_user_left_detail">
 						<div class="modal_title_text">
-							<div>{{ userDetail.userName }}</div>
-							<div class="modal_title_text_assistant"><span>{{$t('account.email')}}: </span>{{ userDetail.email }}</div>
+							<div class="label">
+								<div class="content">
+									<div v-if="!isEditUserName">{{ userDetail.userName }}</div>
+									<input v-else type="text" v-model="editUserName">
+								</div>
+								<div class="icon">
+									<i v-if="!isEditUserName" class="fi fi-rr-edit" @click="openEdit('userName')"></i>
+									<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
+								</div>
+								<span class="Modifiable" v-if="userDetail.usernameModify > 0 && isEditUserName">{{ $t('account.remainingModifications') }}{{ userDetail.usernameModify }}/5</span>
+								<span class="Modifiable notModifiable" v-else-if="isEditUserName">{{ $t('account.notModifiable') }} {{ userDetail.usernameModify }}/5</span>
+							</div>
+							<div class="label">
+								<span>{{$t('account.email')}}: </span>
+								<div class="content">
+									<div v-if="!isEditEmail">{{ userDetail.email }}</div>
+									<input v-else type="text" :value="editEmail">
+								</div>
+								<div class="icon">
+									<i v-if="!isEditEmail" class="fi fi-rr-edit" @click="openEdit('email')"></i>
+									<i v-else class="fi fi-br-check" @click="editChek('email')"></i>
+								</div>
+							</div>
 						</div>
 						<div class="content_item_user_left_detail_bottom">
 							<div>
@@ -46,6 +88,8 @@
 				</div>
 			</div>
 		</div>
+		<bindEmail ref="bindEmail"></bindEmail>
+		<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isRound="true"></Cropper>
    </div>
 </template>
 <script lang="ts">
@@ -55,8 +99,11 @@ import { Modal,message } from 'ant-design-vue';
 import { useRouter,useRoute } from 'vue-router'
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
+import bindEmail from "@/component/HomePage/bindEmail.vue";
+import Cropper from '@/component/HomePage/Cropper.vue'
 export default defineComponent({
    components:{
+		bindEmail,Cropper
    },
    setup() {

@@ -66,6 +113,17 @@ export default defineComponent({
 			return store.state.UserHabit.userDetail
 		})
 		let accountHomeData = reactive({
+			isEditUserName:false,
+			editUserName:'',
+			isEditEmail:false,
+			editEmail:'',
+			bindEmail:null as any,
+			Cropper:null as any,
+            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
+			uploadUrl:'',
+			uploadFile:undefined,
+			token:'',
+			fileList:[] as any,
 			rootSubmenuKeys:[
 				{
 					name:t('account.frontPage'),
@@ -88,12 +146,112 @@ export default defineComponent({
            // state.selectedKeys = [Number(event.key)]
            // state.nowPageName = event.item.name
            router.push({path:event.item.route})
+        }
+		const editUserName = async ()=>{
+			if(!accountHomeData.editUserName)return message.warning(t('LibraryPage.jsContent7'))
+			if(accountHomeData.editUserName == userDetail.value.userName)return
+			await new Promise<void>((resolve, reject) => {
+				Https.axiosGet(Https.httpUrls.editUserName,{params:{newUserName:accountHomeData.editUserName}}).
+				then((rv:any)=>{
+					let value = {
+						userName:accountHomeData.editUserName
+					}
+					store.commit('upUserDetail',value)
+					resolve()
+				}).catch((err:any)=>{
+					resolve()
+				})
+			})
+			
+		}
+		const editEmail = ()=>{
+			if(!accountHomeData.editEmail)return message.warning(t('LibraryPage.jsContent7'))
+		}
+		const editChek = async (str:string)=>{
+			if(str == 'userName'){
+				await editUserName()
+			}else{
+				// await editEmail()
+			}
+			accountHomeData.isEditUserName = false
+			accountHomeData.isEditEmail = false
+			accountHomeData.editUserName = ''
+			accountHomeData.editEmail = ''
+		}
+		const openEdit = (str:string)=>{
+			if(str == 'userName'){
+				// if(userDetail.value.usernameModify.remainingTimes == 0)return
+				accountHomeData.isEditUserName = true
+				accountHomeData.isEditEmail = false
+				accountHomeData.editUserName = userDetail.value.userName
+			}else{
+				accountHomeData.bindEmail.init('Modify')
+				// accountHomeData.isEditEmail = true
+				accountHomeData.isEditUserName = false
+				// accountHomeData.editEmail = userDetail.value.email
+			}
+		}
+
+		let beforeUpload=(file:any,fileList:any)=>{
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.info(useI18n().t('PrintboardUpload.jsContent1'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(useI18n().t('PrintboardUpload.jsContent2'));
+            }
+        }
+		let  fileUploadChange = (data:any)=>{
+            let file = data.file
+			// file.id = res.data.id?res.data.id:""
+			var reader = new FileReader();
+			reader.onload = (e:any) => {
+				let data_new;
+				if (typeof e.target.result === 'object') {
+				// 把Array Buffer转化为blob 如果是base64不需要
+				data_new = window.URL.createObjectURL(new Blob([e.target.result]));
+				} else {
+				data_new = e.target.result;
+				}
+				accountHomeData.Cropper.getOptionImg(data_new)
+			};
+			reader.readAsArrayBuffer(file.originFileObj);
+			accountHomeData.Cropper.changeShowModal(true)
+        }
+		let handleCropperSuccess = (event:any)=>{
+            let {file, fileData,base64} =event
+			accountHomeData.fileList[0].status = 'done'
+			accountHomeData.uploadUrl = base64
+			accountHomeData.uploadFile = file
+            accountHomeData.Cropper.closeCropper()
+			if(!accountHomeData.uploadFile)return
+			let param = new FormData(); 
+			param.append('file',accountHomeData.uploadFile);
+			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			Https.axiosPost(Https.httpUrls.uploadAvatar,param,config)
+			.then((rv)=>{
+				let data = {
+					avatar : rv
+				}
+				store.commit("upUserDetail", data)
+				message.success('提交成功')
+			})
+		}
+		let deletUploadFile = () => {
+			accountHomeData.fileList = []
        }
        return{
 			userDetail,
           ...toRefs(accountHomeData),
 		   router,
 		   handleClick,
+		   editChek,
+		   openEdit,
+		   beforeUpload,
+		   fileUploadChange,
+		   handleCropperSuccess,
+		   deletUploadFile,
        }
    },
    data(){
@@ -131,8 +289,78 @@ export default defineComponent({
 			.content_item_user_left{
 				display: flex;
 				.content_item_user_left_detail{
+					position: relative;
+					> .upload_box{
+						position: absolute;
+						bottom: 0;
+						right: 0;
+						> i{
+							width: 4rem;
+							height: 4rem;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							border-radius: 50%;
+							background: rgba(0,0,0,.5);
+							color: #fff;
+							font-size: 2rem;
+						}
+						> .upload{
+							position: absolute;
+							width: 100%;
+							height: 100%;
+							top: 0;
+							left: 0;
+							overflow: hidden;
+							opacity: 0;
+						}
+					}
 					> .modal_title_text{
 						margin: 0;
+						> .label{
+							display: flex;
+							margin: 0;
+							> .content{
+								> input{
+									min-width: 20rem;
+									height: 3.6rem;
+									border-radius: 4rem;
+									border: 1px solid;
+									padding-left: 1.5rem;
+								}
+							}
+							> .Modifiable{
+								font-size: 1.6rem;
+								font-weight: 500;
+								color: #666666;
+								display: flex;
+								align-items: center;
+								&.notModifiable{
+									color: #FF0000;
+								}
+							}
+							> .icon{
+								margin: 0 1.5rem;
+								display: flex;
+								align-items: center;
+								> i{
+									font-weight: 600;
+									font-size: 2.2rem;
+									cursor: pointer;
+									&.fi-br-check{
+										width: 3rem;
+										height: 3rem;
+										display: flex;
+										align-items: center;
+										justify-content: center;
+										background: #000;
+										color: #fff;
+										border-radius: 50%;
+									}
+								}
+							}
+							
+						}
 						> div{
 							margin-bottom: 1rem;
 						}
--- a/src/component/Account/frontPage.vue
+++ b/src/component/Account/frontPage.vue
@@ -2,9 +2,9 @@
    <div class="account_frontPage">
 		<a-tabs class="account_frontPage_body" v-model:activeKey="activeKey" @change="changeTabs">
 			<a-tab-pane v-for="item in frontPageList" :key="item.key">
-				<myInformation v-if="item.key == 'myInformation'" :ref="item.key"></myInformation>
-				<bind v-if="item.key == 'bind'" :ref="item.key"></bind>
-				<cancelRenewal v-if="item.key == 'cancelRenewal'" :ref="item.key"></cancelRenewal>
+				<myInformation v-if="item.key == 'myInformation' && activeKey == 'myInformation'" :ref="item.key"></myInformation>
+				<bind v-if="item.key == 'bind' && activeKey == 'bind'" :ref="item.key"></bind>
+				<cancelRenewal v-if="item.key == 'cancelRenewal' && activeKey == 'cancelRenewal'" :ref="item.key"></cancelRenewal>
 				<template #tab>
 					<a-badge :count="0" >
 						<span>{{item.title}}</span>
@@ -126,11 +126,16 @@ export default defineComponent({
 <style lang="less" scoped>
 .account_frontPage{
 	width: 100%;
+	height: 100%;
 	.account_frontPage_body{
 		padding-bottom: 3rem;
+		height: 100%;
 		:deep(.ant-badge){
 			font-size: var(--aida-fsize2);
 		}
+		:deep(.ant-tabs-content){
+			height: 100%;
+		}
 		:deep(.ant-tabs-tabpane){
 			padding: 0 5rem;
 		}
--- a/src/component/Account/frontPage/bindPage.vue
+++ b/src/component/Account/frontPage/bindPage.vue
@@ -2,42 +2,61 @@
    <div class="bindPage_page">
 		<div class="bindPage_page_body">
 			<div class="bind_item">
-				<div class="title">Bind Wechat</div>
+				<div class="title">{{ $t('frontPage.BindWechat') }}</div>
 				<div class="box">
 					<div class="type">
 						<img v-if="!userDetail.accountExtendList?.WeChat" src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
 						<img v-else :src="userDetail.accountExtendList?.WeChat.headImgUrl" alt="">
-						<div class="text">{{ userDetail.accountExtendList?.WeChat?userDetail.accountExtendList?.WeChat.name:'Unbound' }}</div>
+						<div class="text">{{ userDetail.accountExtendList?.WeChat?userDetail.accountExtendList?.WeChat.name:$t('frontPage.Unbound') }}</div>
 					</div>
-					<div v-if="!userDetail.accountExtendList?.WeChat" class="gallery_btn" @click="openWeiXinModel">Bind Now</div>
-					<div v-else class="gallery_btn" @click="ungroupWeiXinModel">Unbind</div>
+					<div v-if="!userDetail.accountExtendList?.WeChat" class="gallery_btn" @click="openWeiXinModel">{{ $t('frontPage.BindNow') }}</div>
+					<div v-if="userDetail.accountExtendList?.WeChat" class="gallery_btn" @click="ungroupWeiXinModel">{{ $t('frontPage.Unbind') }}</div>
 				</div>
 			</div>
 			<div class="bind_item">
-				<div class="title">Bind Gmail</div>
+				<div class="title">{{ $t('frontPage.BindGmail') }}</div>
 				<div class="box">
 					<div class="type">
 						<img v-if="!userDetail.accountExtendList?.Google" src="@/assets/images/loginPage/gmailIcon.svg" alt="">
 						<img v-else :src="userDetail.accountExtendList?.Google?.headImgUrl" alt="">
-						<div class="text">{{ userDetail.accountExtendList?.Google?userDetail.accountExtendList?.Google.name:'Unbound' }}</div>
+						<div class="text">{{ userDetail.accountExtendList?.Google?userDetail.accountExtendList?.Google.name:$t('frontPage.Unbound') }}</div>
 					</div>
-					<div class="gmail_btn">
-						<div v-if="!userDetail.accountExtendList?.Google" class="gallery_btn">Bind Now</div>
-						<div v-else class="gallery_btn" @click="ungroupGoogleModel">Unbind</div>
+					<!-- <div class="gmail_btn">
+						<div v-if="!userDetail.accountExtendList?.Google && googleLoad" class="gallery_btn">{{ $t('frontPage.BindNow') }}</div>
+						<div v-else-if="!userDetail.accountExtendList?.Google" class="gallery_btn loading"><i class="fi fi-br-loading"></i></div>
 						<div v-show="!userDetail.accountExtendList?.Google" id="g_id_bind"></div>
+						<div v-if="userDetail.accountExtendList?.Google" class="gallery_btn" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div>
+					</div> -->
+					<div class="gmail_btn">
+						<div v-if="!userDetail.accountExtendList?.Google" class="gallery_btn">{{ $t('frontPage.BindNow') }}</div>
+						<div v-show="!userDetail.accountExtendList?.Google" id="g_id_bind"></div>
+						<div v-if="userDetail.accountExtendList?.Google" class="gallery_btn" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div>
+						<!-- <div v-if="userDetail.accountExtendList?.Google" class="gallery_btn" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div> -->
 					</div>
 				</div>
-				
 			</div>
+			<!-- <div class="bind_item">
+				<div class="title">{{ $t('frontPage.ModifyEmail') }}</div>
+				<div class="box">
+					<div class="type">
+						<img :src="userDetail.avatar" alt="">
+						<div class="text">{{ userDetail.email }}</div>
+					</div>
+					<div class="gmail_btn">
+						<div class="gallery_btn" @click="modifyEmail">{{ $t('frontPage.Modify') }}</div>
+					</div>
+				</div>
+			</div> -->
 		</div>
 		<div class="mark_loading" v-show="loadingShow">
 			<a-spin size="large" />
 		</div>
 		<weiXinModel ref="weiXinModel"></weiXinModel>
+		<bindEmail ref="bindEmail"></bindEmail>
    </div>
 </template>
 <script>
-import { defineComponent,computed,ref,reactive,nextTick,toRefs,onBeforeUnmount, onMounted} from 'vue'
+import { defineComponent,computed,createVNode,reactive,nextTick,toRefs,onBeforeUnmount, onMounted} from 'vue'
 import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
 import { useStore } from "vuex";
@@ -45,23 +64,28 @@ import weiXinModel from "@/component/LoginPage/weiXinModel.vue";
 import { useRoute } from 'vue-router';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import bindEmail from "@/component/HomePage/bindEmail.vue";
 export default defineComponent({
    components:{
-		weiXinModel
+		weiXinModel,bindEmail
    },
    setup() {
 		const route = useRoute();
 		const router = useRouter();
+		const t = useI18n().t;
        const store = useStore();
 		let accountHomeData = reactive({
 			router:null,
 			loadingShow:false,
+			googleLoad:false,
 			userDetail:computed(()=>{
 				return store.state.UserHabit.userDetail
 			})
 		})
 		let bindPageDom = reactive({
-			weiXinModel:null
+			weiXinModel:null,
+			bindEmail:null,
 		})
 		let data = reactive({
 			scriptSrc:'https://accounts.google.com/gsi/client',
@@ -88,7 +112,7 @@ export default defineComponent({
 		}
 		const ungroupWeiXinModel = ()=>{
 			Https.axiosGet(Https.httpUrls.unbindWeChat,).then((rv)=>{
-				message.success('Successful discharge');
+				message.success(t('frontPage.jsContent1'));
 				let value = {
 					accountExtendList:{
 						WeChat:undefined,
@@ -107,42 +131,62 @@ export default defineComponent({
 					}
 				}
 				store.commit("upUserDetail", value)
-				message.success('Successful discharge');
+				message.success(t('frontPage.jsContent1'));
 			})
 		}
+		const modifyEmail = ()=>{
+			bindPageDom.bindEmail.init('Modify')
+
+		}
 		onMounted(async ()=>{
-			
 			let  GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
 			var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
-			if(!existingScript){
-				await new Promise((resolve, reject) => {
-					const script = document.createElement("script");
-					script.src = data.scriptSrc
-					script.onload=()=>{
-						resolve()
-					}
-					document.body.appendChild(script);
-				})
-			}
-			window.google.accounts.id.initialize({
-			// 主要就是填写client_id
-				client_id: GOOGLE_CLIENT_ID,
-				auto_select: false,
-				callback: handleCredentialResponse,
-				// context:"signin",
-				ux_mode:"popup",
-				itp_support:true,
-			});
-			window.google.accounts.id.renderButton(
-				document.getElementById("g_id_bind"),
-				{
-					type:"icon",//icon为只有一个icon
-					shape:"circle",
-					theme:"outline",
-					size:"large",
-					logo_alignment:"center",
+			if(!window.isAddGmail){
+				if(!existingScript){
+					window.isAddGmail = true
+					await new Promise((resolve, reject) => {
+						const script = document.createElement("script");
+						script.src = data.scriptSrc
+						script.onload=()=>{
+							accountHomeData.googleLoad = true
+							resolve()
+						}
+						script.onerror = ()=>{
+							Modal.confirm({
+								title: t('frontPage.jsContent2'),
+								icon: createVNode(ExclamationCircleOutlined),
+								okText: 'Yes',
+								cancelText: 'No',
+								mask:false,
+								centered:true,
+								onOk() {
+								}
+							});
+							accountHomeData.googleLoad = true
+						} 
+						document.body.appendChild(script);
+					})
 				}
-			);
+				window.google.accounts.id.initialize({
+				// 主要就是填写client_id
+					client_id: GOOGLE_CLIENT_ID,
+					auto_select: false,
+					callback: handleCredentialResponse,
+					// context:"signin",
+					ux_mode:"popup",
+					itp_support:true,
+				});
+				window.google.accounts.id.renderButton(
+					document.getElementById("g_id_bind"),
+					{
+						type:"icon",//icon为只有一个icon
+						shape:"circle",
+						theme:"outline",
+						size:"large",
+						logo_alignment:"center",
+					}
+				);
+			}
 		})
 		onBeforeUnmount(()=>{
 			var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
@@ -154,6 +198,7 @@ export default defineComponent({
 		   openWeiXinModel,
 		   ungroupGoogleModel,
 		   ungroupWeiXinModel,
+		   modifyEmail,
        }
    },
    data(){
@@ -165,6 +210,9 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .bindPage_page{
+	height: 100%;
+	overflow-y: auto;
+	padding-bottom: 2rem;
 	.bindPage_page_body{
 		.bind_item{
 			margin-bottom: 4rem;
@@ -194,6 +242,25 @@ export default defineComponent({
 						font-size: 1.8rem;
 					}
 				}
+				.gallery_btn{
+					&.loading{
+						width: 10rem;
+						i{
+							&::before{
+								display: inline-block;
+								animation: loading 1s linear infinite;
+								@keyframes loading {
+									from{
+										transform: rotate(0deg);
+									}
+									to{
+										transform: rotate(360deg);
+									}
+								}
+							}
+						}
+					}
+				}
 				>.gmail_btn{
 					position: relative;
 					#g_id_bind{
--- a/src/component/Account/frontPage/cancelRenewal.vue
+++ b/src/component/Account/frontPage/cancelRenewal.vue
@@ -3,41 +3,40 @@
 		<div v-if="userDetail.status != 'canceled'">
 			<div class="cancel_box_item">
 				<div class="modal_title_text">
-					<div>Sorry to see you go</div>
-					<div class="modal_title_text_assistant">What is your reason for cancelling AiDA?</div>
+					<div>{{ $t('cancelRenewal.cancelling') }}</div>
 				</div>
-				<a-select class="gallerySelect" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Select a reason" allowClear show-search></a-select>
-				<textarea v-model="textareaValue" placeholder="Share your feedback here..."></textarea>
-				<div class="button_box">
-					<div class="gallery_btn white gallery_btn_radius" @click="subscribe">stay subscribed</div>
-					<div class="gallery_btn gallery_btn_radius" @click="cancelSubscription">Yes, cancel it</div>
+				<div class="cause_list">
+					<label class="cause_item" v-for="item in causeList" :key="item.vlaue">
+						<input type="checkbox" name="cause" v-model="selectedOptions" :value="item.value">
+						<div>{{ item.str }}</div>
+					</label>
+					<textarea v-model="textareaValue" placeholder="Share your feedback here..."></textarea>
 				</div>
 			</div>
 			<div class="cancel_box_item cancel_box_item2">
 				<div class="modal_title_text">
-					<div>You’re about to cancel your subscription</div>
+					<div>{{ $t('cancelRenewal.subscription') }}</div>
 					<div>
 						<i class="fi fi-sr-circle-xmark"></i>
-						<div class="modal_title_text_assistant">You will loose all your date</div>
+						<div class="modal_title_text_assistant">{{ $t('cancelRenewal.looseDate') }}</div>
 					</div>
 					<div>
 						<i class="fi fi-sr-circle-xmark"></i>
-						<div class="modal_title_text_assistant">You will loose your settings and customizations</div>
+						<div class="modal_title_text_assistant">{{ $t('cancelRenewal.looseCustomizations') }}</div>
 					</div>
 				</div>
 				<div class="tips">
 					<i class="fi fi-sr-triangle-warning"></i>
-					<div>Don’t worry! The data you have in AiDA will be 
-						safe.</div>
+					<div>{{ $t('cancelRenewal.DonWorry') }}</div>
 				</div>
 				<div class="button_box">
-					<div class="gallery_btn white gallery_btn_radius" @click="subscribe">stay subscribed</div>
-					<div class="gallery_btn gallery_btn_radius" @click="cancelSubscription">Yes, cancel it</div>
+					<div class="gallery_btn white" @click="subscribe">{{ $t('cancelRenewal.Continue') }}</div>
+					<div class="gallery_btn" @click="cancelSubscription">{{ $t('cancelRenewal.cancel') }}</div>
 				</div>
 			</div>
 		</div>
 		<div v-else class="no_renewal">
-			There are no subscription plans with automatic renewal.
+			{{ $t('cancelRenewal.subscriptionRenewal') }}
 		</div>
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
@@ -58,32 +57,49 @@ export default defineComponent({
    },
    setup() {
        const store = useStore();
+		const {t} = useI18n()
 		let userDetail:any= computed(()=>{
 			return store.state.UserHabit.userDetail
 		})
 		let accountHomeData:any = reactive({
-            currentState:{value:'income'}, //裁剪的原始文件数据
 			textareaValue:'',
 			isShowMark:false,
+			causeList:[
+				{
+					vlaue:'Too expensive',
+					str:t('account.jsContent1'),
+				},{
+					value:'Sytem not user friendly',
+					str:t('account.jsContent2'),
+				},{
+					value:'Too Slowy',
+					str:t('account.jsContent3'),
+				},{
+					value:'Difficult to edit',
+					str:t('account.jsContent4'),
+				},{
+					value:'Insufficlent Tutorial/Support',
+					str:t('account.jsContent5'),
+				},{
+					value:'Unable to generate what you need',
+					str:t('account.jsContent6'),
+				}
+			],
+			selectedOptions:[]
 		})
-		let state:any = ref([
-			{
-				label:useI18n().t('allOrder.Income'),
-				value:'income',
-			},
-			{
-				label:useI18n().t('allOrder.Expend'),
-				value:'expend',
-			},
-		])
 		let renew = ref()
 		const subscribe = ()=>{
 			renew.value.init()
 		}
 		const cancelSubscription = ()=>{
+			let str = ''
+			accountHomeData.selectedOptions.forEach((item:any)=>{
+				str += ' #' + item
+			})
+
 			let data = {
 				subscriptionId:userDetail.value.subscriptionId,
-				reason:'',
+				reason:accountHomeData.textareaValue + str,
 			}
 			accountHomeData.isShowMark = true
 			Https.axiosGet(Https.httpUrls.cancelSubscription, {params:data})
@@ -102,7 +118,6 @@ export default defineComponent({
        return{
           ...toRefs(accountHomeData),
 		   userDetail,
-		   state,
 		   renew,
 		   subscribe,
 		   cancelSubscription,
@@ -117,12 +132,12 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .cancelRenewal_page{
-	
+	height: 100%;
+	overflow-y: auto;
+	padding-bottom: 2rem;
 	>div{
 		display: flex;
-		justify-content: center;
-		align-items: flex-start;
-		height: 45rem;
+		flex-direction: column;
 		align-items: center;
 		&.no_renewal{
 			font-size: 2rem;
@@ -130,18 +145,16 @@ export default defineComponent({
 		}
 	}
 	.cancel_box_item{
-		border: 2px solid #000;
-		border-radius: 2rem;
-		padding: 3rem;
-		margin-right: 3rem;
-		width: 48rem;
-		height: 45rem;
+		margin-bottom: 3rem;
+		width: 100%;
 		>.modal_title_text{
+			margin: 0;
 			>div{
 				font-weight: 600;
 			}
 			.modal_title_text_assistant{
 				margin-top: 1rem;
+				font-weight: 600;
 			}
 		}
 		>.gallerySelect{
@@ -150,25 +163,35 @@ export default defineComponent({
 				border-radius: 1.4rem;
 			}
 		}	
-		>textarea{
-			margin-top: 1.5rem;
-			width: 100%;
-			border-radius: 1.4rem;
-			border: 1px solid #D0D0D0;
-			height: 11rem !important;
-			font-size: 1.6rem;
-			transition: border .3s;
-			padding: 1.5rem;
-		}
-		>textarea:hover{
-			border: 1px solid #000;
+		>.cause_list{
+			> .cause_item{
+				display: flex;
+				input{
+					margin-right: 1rem;
+				}
+			}
+			>textarea{
+				margin-top: 1.5rem;
+				width: 100%;
+				border-radius: 1.4rem;
+				border: 1px solid #D0D0D0;
+				height: 11rem !important;
+				font-size: 1.6rem;
+				transition: border .3s;
+				padding: 1.5rem;
+			}
+			>textarea:hover{
+				border: 1px solid #000;
+			}
 		}
+		
 		>.button_box{
 			display: flex;
-		    justify-content: space-between;
 			margin-top: 2.5rem;
-			>div{
-				width: calc((100% - 1rem) / 2);
+			justify-content: flex-end;
+			>div:nth-child(1){
+				margin-right: 1rem;
+				// width: calc((100% - 1rem) / 2);
 			}
 		}
 	}
@@ -178,7 +201,7 @@ export default defineComponent({
 	.cancel_box_item2{
 		.modal_title_text{
 			>div:nth-child(1){
-			margin-bottom: 3.4rem;
+				margin-bottom: 2rem;
 			}
 			>div:nth-child(2){
 				margin-bottom: 1.5rem;
@@ -194,6 +217,9 @@ export default defineComponent({
 					display: flex;
 				}
 			}
+			>div:nth-child(3){
+				margin-bottom: 2rem;
+			}
 		}
 		.tips{
 			padding: 1.5rem 1rem;
--- a/src/component/Account/frontPage/mylnformation.vue
+++ b/src/component/Account/frontPage/mylnformation.vue
@@ -1,39 +1,24 @@
 <template>
    <div class="accountEdit_page">
-		<div class="accountEdit_page_head">
-			<div class="upload_item">
-				<div class="upload_file_item">
-					<a-upload
-						:capture="null"
-						list-type="picture-card"
-						:before-upload="beforeUpload"
-						v-model:file-list="fileList"
-						:customRequest="function(){}"
-						:maxCount="1"
-						accept=".jpg,.png,.jpeg,.bmp"
-						@change="fileUploadChange"
-						>
-						<div
-							class="upload_tip_block"
-						>
-							<!-- <i class="fi fi-br-upload"></i> -->
-							<img :src="uploadUrl?uploadUrl:userDetail.avatar" alt="">
-						</div>
-					</a-upload>
-				</div>
-			</div>
-		</div>
 		<div class="accountEdit_page_body">
 			<div class="accountEdit_page_body_item">
-				<div class="accountEdit_page_body_item_name">{{$t('account.userName')}}:</div>
+				<div class="accountEdit_page_body_item_name">{{$t('account.Country')}}:</div>
 				<div class="accountEdit_page_body_item_inut">
-					<input type="text" disabled :value="userDetail.userName">
+					<a-select
+                        v-model:value="Country"
+                        size="large"
+                        optionFilterProp="label"
+                        :options="countryList"
+                        placeholder="Please select"
+                        allowClear
+                        show-search
+                    ></a-select>
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
-				<div class="accountEdit_page_body_item_name">{{$t('account.email')}}:</div>
+				<div class="accountEdit_page_body_item_name">{{$t('account.CompanyName')}}:</div>
 				<div class="accountEdit_page_body_item_inut">
-					<input type="text" disabled :value="userDetail.email">
+					<input type="text"  v-model="CompanyName">
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
@@ -42,7 +27,9 @@
 				</div>
 			</div>
 		</div>
-		<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isRound="true"></Cropper>
+		<div class="mark_loading" v-show="loadingShow">
+            <a-spin size="large" />
+        </div>
    </div>
 </template>
 <script lang="ts">
@@ -50,105 +37,50 @@ import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMo
 import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
 import { useStore } from "vuex";
-import Cropper from '@/component/HomePage/Cropper.vue'
+import { country } from "@/tool/country";
 import { useI18n } from 'vue-i18n'
 export default defineComponent({
    components:{
-		Cropper,
    },
    setup() {
        const store = useStore();
+        const {t} = useI18n();
 		let userDetail:any= computed(()=>{
 			return store.state.UserHabit.userDetail
 		})
 		let accountHomeData:any = reactive({
-            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
-            uploadUrl:'',
-			uploadFile:undefined,
-			token:'',
-			fileList:[]
+			Country:'',
+			CompanyName:'',
+			loadingShow:false,
+			countryList:country
 		})
-		let Cropper = ref()
-		// provide('exhibitionList',exhibitionList)
-		let handleCropperSuccess = (event:any)=>{
-            let {file, fileData,base64} =event
-			accountHomeData.fileList[0].status = 'done'
-			accountHomeData.uploadUrl = base64
-			accountHomeData.uploadFile = file
-            Cropper.value.closeCropper()
-		}
-		let beforeUpload=(file:any,fileList:any)=>{
-            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
-            if (!isJpgOrPng) {
-                message.info(useI18n().t('PrintboardUpload.jsContent1'));
-            }
-            const isLt2M = file.size / 1024 / 1024 < 5;
-            if (!isLt2M) {
-                message.info(useI18n().t('PrintboardUpload.jsContent2'));
-            }
-            if(isJpgOrPng && isLt2M){
-            // }else{
-            //     return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
-            }
-            
-        }
-		let  fileUploadChange = (data:any)=>{
-            let file = data.file
-			// file.id = res.data.id?res.data.id:""
-			var reader = new FileReader();
-			reader.onload = (e:any) => {
-				let data_new;
-				if (typeof e.target.result === 'object') {
-				// 把Array Buffer转化为blob 如果是base64不需要
-				data_new = window.URL.createObjectURL(new Blob([e.target.result]));
-				} else {
-				data_new = e.target.result;
-				}
-				Cropper.value.getOptionImg(data_new)
-				
-				
-			};
-			// 转化为base64
-			// reader.readAsDataURL(file)
-			// 转化为blob
-			reader.readAsArrayBuffer(file.originFileObj);
-			Cropper.value.changeShowModal(true)
-        }
-		let deletUploadFile = () => {
-			accountHomeData.fileList = []
-            // let index = -1
-            // this.fileList.forEach((ele:any,index1:any) => {
-            //     if(this.cropperFileData.uid === ele.uid){
-            //         index = index1
-            //     }
-            // });
-            // if(index > -1){
-            //     this.fileList.splice(index, 1)
-            // }
-        }
 		let setSubmit = ()=>{
-			if(!accountHomeData.uploadFile)return
-			let param = new FormData(); 
-			param.append('file',accountHomeData.uploadFile);
-			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
-			Https.axiosPost(Https.httpUrls.uploadAvatar,param,config)
-			.then((rv)=>{
-				let data = {
-					avatar : rv
-				}
-				store.commit("upUserDetail", data)
-				message.success('提交成功')
-			})
-
+			let data = {
+				country:accountHomeData.Country,
+				occupation:accountHomeData.CompanyName
+			}
+			accountHomeData.loadingShow = true
+			Https.axiosGet(Https.httpUrls.updateUserInfo,{params:data}).
+				then((rv:any)=>{
+					let value = {
+						userName:accountHomeData.editUserName
+					}
+					store.commit('upUserDetail',value)
+					accountHomeData.loadingShow = false
+					message.success(t('exportModel.jsContent7'))
+				}).catch((err:any)=>{
+					accountHomeData.loadingShow = false
+				})
 		}
+		onMounted(()=>{
+			let country = userDetail.value.country
+			let CompanyName = userDetail.value.occupation
+			accountHomeData.Country = country
+			accountHomeData.CompanyName = CompanyName
+		})
        return{
           ...toRefs(accountHomeData),
 		   userDetail,
-		   Cropper,
-		   handleCropperSuccess,
-		   beforeUpload,
-		   fileUploadChange,
-		   deletUploadFile,
 		   setSubmit,
        }
    },
@@ -161,33 +93,15 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .accountEdit_page{
-	.accountEdit_page_head{
-		display: flex;
-		align-items: center;
-		position: relative;
-		img{
-			width: 10rem;
-			object-fit: contain;
-			height: 10rem;
-			border-radius: 50%;
-			background: #fff;
-		}
-		.accountEdit_page_head_upload{
-			width: auto;
-		}
-		.upload_item{
-			:deep(.ant-upload-list-picture-card-container){
-				display: none !important;
-			}
-		}
-		
-		margin-bottom: 5rem;
-	}
+	height: 100%;
+	overflow-y: auto;
+	padding-bottom: 2rem;
 	.accountEdit_page_body{
-		width: 85rem;
+		width: 100%;
+		// width: 85rem;
 		.accountEdit_page_body_item{
 			display: flex;
-			margin-bottom: 5rem;
+			margin-bottom: 20px;
 			flex-direction: column;
 			width: 100%;
 			.gallery_btn{
@@ -201,7 +115,7 @@ export default defineComponent({
 				font-size: 2rem;
 			}
 			input{
-				height: 7rem;
+				height: 40px;
 			}
 			.accountEdit_page_body_item_name{
 				color: #000;
@@ -211,6 +125,22 @@ export default defineComponent({
 			.accountEdit_page_body_item_inut{
 				margin-top: 1.5rem;
 				flex: 1;
+				.ant-select-lg{
+					font-size: 2rem;
+				}
+				.ant-select{
+					width: 100%;
+					border-radius: 1.6rem;
+					border: 2px solid #D0D0D0;
+					overflow: hidden;
+					.ant-select-selector{
+						border-radius: 1.6rem;
+					}
+					:deep(.ant-select-selector ){
+						border: none !important;
+					}
+				}
+				
 			}
 		}
 		.accountEdit_page_body_item:last-child{
--- a/src/component/Administrator/TestClickData.vue
+++ b/src/component/Administrator/TestClickData.vue
@@ -299,7 +299,7 @@ export default defineComponent({
 				endTime:endDate,
 				startTime:startDate,
 				ids:ids,
-				email:this.email,
+				email:this.email.trim(),
 			}
 			Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
 				if (rv) {
--- a/src/component/Administrator/Transaction/TransactionTable.vue
+++ b/src/component/Administrator/Transaction/TransactionTable.vue
@@ -0,0 +1,568 @@
+<template>
+    <div class="admin_page">
+        <div class="admin_table_search">
+            <div class="admin_state">
+                <div class="admin_state_item">
+                    <span>Create Time:</span>
+                    <a-range-picker
+                        style="width: 250px"
+                        class="range_picker"
+                        v-model:value="rangePickerValue"
+                        :placeholder="[
+                            $t('HistoryPage.StartDate'),
+                            $t('HistoryPage.EndDate'),
+                        ]"
+                        valueFormat="YYYY-MM-DD"
+                    >
+                        <template #suffixIcon>
+                            <span
+                                class="icon iconfont range_picker_icon icon-rili"
+                            ></span>
+                        </template>
+                    </a-range-picker>
+                </div>
+                <div class="admin_state_item">
+                    <span>Country:</span>
+					<a-select
+                        v-model:value="country"
+						:allowClear="true"
+						show-search
+                        style="width: 250px"
+                        :filter-option="filterOption"
+                        placeholder="Select Item..."
+                        max-tag-count="responsive"
+                        :options="countryList"
+                    ></a-select>
+                </div>
+				<div class="admin_state_item">
+                    <span>City:</span>
+					<a-select
+                        v-model:value="city"
+						:allowClear="true"
+						show-search
+                        style="width: 250px"
+                        :filter-option="filterOption"
+                        placeholder="Select Item..."
+                        max-tag-count="responsive"
+                        :options="cityList"
+                    ></a-select>
+                </div>
+                <div class="admin_state_item">
+                    <span>payerTotal:</span>
+                    <input
+                        v-model="payerTotal"
+                        placeholder="Please enter payer total"
+                        @keydown.enter="gettrialList"
+                        type="text"
+                        style="width: 250px"
+                    />
+                </div>
+                <div class="admin_state_item">
+                    <span>platform:</span>
+                    <a-select
+                        v-model:value="platform"
+                        size="large"
+                        style="width: 250px"
+                        optionFilterProp="label"
+                        :options="platformList"
+                        placeholder="Please select"
+                        allowClear
+                        show-search
+                    ></a-select>
+                </div>
+				<div class="admin_state_item">
+                    <span>Status:</span>
+                    <a-select
+                        v-model:value="status"
+                        size="large"
+                        style="width: 250px"
+                        optionFilterProp="label"
+                        :options="statusList"
+                        placeholder="Please select"
+                        allowClear
+                        show-search
+                    ></a-select>
+                </div>
+				<div class="admin_state_item">
+                    <span>Type:</span>
+                    <a-select
+                        v-model:value="type"
+                        size="large"
+                        style="width: 250px"
+                        optionFilterProp="label"
+                        :options="articleCategoryList"
+                        placeholder="Please select"
+                        allowClear
+                        show-search
+                    ></a-select>
+                </div>
+            </div>
+            <div class="admin_search">
+                <div class="admin_search_item" @click="searchHistoryList">
+                    Search
+                </div>
+				<div class="admin_search_item" @click="downloadTransaction">
+                    Export
+                </div>
+            </div>
+            <div class="admin_state_list">
+                <div
+                    class="admin_state_list_item"
+                    @click="lastGeTrialList('year')"
+                >
+                    Nearly a year
+                </div>
+                <div
+                    class="admin_state_list_item"
+                    @click="lastGeTrialList('month')"
+                >
+                    Last month
+                </div>
+                <div
+                    class="admin_state_list_item"
+                    @click="lastGeTrialList('week')"
+                >
+                    Last week
+                </div>
+            </div>
+        </div>
+
+        <div class="admin_table_content" ref="historyTable">
+            <a-table
+                @resizeColumn="handleResizeColumn"
+                :loading="tableLoading"
+                :columns="columns"
+                :data-source="dataList"
+                :scroll="{ y: historyTableHeight }"
+                @change="changePage"
+				:showSorterTooltip='false'
+                :pagination="{
+                    showSizeChanger: true,
+                    current: currentPage,
+                    pageSize: pageSize,
+                    total: total,
+                    showQuickJumper: true,
+                    bordered: false,
+                }"
+            >
+				<template #bodyCell="{ column, text, record, index }">
+                    <div class="operate_list" v-if="column?.Operations">
+						<div v-if="record.status == 'Success'" :class="{success:record.status == 'Success'}">
+							<i class="fi fi-ss-check-circle"></i>{{ record.status }}
+						</div>
+						<div v-if="record.status == 'Pending'" :class="{pending:record.status == 'Pending'}">
+							<i class="fi fi-br-hourglass-end"></i>{{ record.status }}
+						</div>
+						<div v-if="record.status == 'Fail'" :class="{fail:record.status == 'Fail'}">
+							<i class="fi fi-ss-cross-circle"></i>{{ record.status }}
+						</div>
+                    </div>
+                </template>
+            </a-table>
+        </div>
+    </div>
+</template>
+<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";
+import {getCookie,clonAllCookie} from '@/tool/cookie'
+export default defineComponent({
+    components: {},
+    setup() {
+        const store:any = useStore()
+        let filter: any = reactive({
+            dataList: [],
+            tableLoading: false,
+			allCountry:[],
+			cityList: computed(()=>{
+				return store.state.adminPage.city
+			}),
+			countryList: computed(()=>{
+				return store.state.adminPage.country
+			}),
+        });
+        let filterData: any = reactive({
+            rangePickerValue: [],
+            currentPage: 1,
+            pageSize: 10,
+            total: 0,
+            country: "",
+			city:"",
+            payerTotal: "",
+            platform: "",
+            order: "", //'Ascending  升序 Descending 降序'
+			orderBy:'',
+			status: "",
+			type: "",
+        });
+		let selectList=reactive({
+			platformList:[
+				{
+					label: "all",
+					value: "",
+				},
+				{
+					label:'PayPal',
+					value:'PayPal',
+				},
+				{
+					label:'Stripe',
+					value:'Stripe',
+				},
+				{
+					label:'Alipay-HK',
+					value:'Alipay-HK',
+				},
+			],
+			statusList:[
+				{
+					label: "all",
+					value: "",
+				},
+				{
+					label:'Success',
+					value:'Success',
+				},
+				{
+					label:'Fail',
+					value:'Fail',
+				},
+				{
+					label:'Pending',
+					value:'Pending',
+				},
+			],
+			articleCategoryList:[
+				{
+					label: "all",
+					value: "",
+				},
+				{
+					label:'new',
+					value:'new',
+				},
+				{
+					label:'renewal',
+					value:'renewal',
+				},
+				{
+					label:'credits',
+					value:'credits',
+				},
+			],
+		})
+        let renameData: any = ref({}); //修改名字选中的数据
+        const columns: any = computed(() => {
+            return [
+                {
+                    title: "Id",
+                    align: "center",
+                    dataIndex: "id",
+                    key: "id",
+					width:100,
+                    fixed: "left",
+					sorter: true,
+                },
+				{
+                    title: "Payer",
+                    align: "center",
+                    dataIndex: "payer",
+                    key: "payer",
+					width:150,
+					ellipsis:true,
+                },
+				{
+                    title: "Platform",
+                    align: "center",
+                    dataIndex: "platform",
+                    key: "platform",
+					width:150,
+					ellipsis:true,
+                },{
+                    title: "Payer Total",
+                    align: "center",
+                    dataIndex: "payerTotal",
+                    key: "payerTotal",
+					width:150,
+					ellipsis:true,
+                },
+				{
+                    title: "Type",
+                    align: "center",
+                    dataIndex: "type",
+                    key: "type",
+					width:150,
+					ellipsis:true,
+                },
+				{
+                    title: "Payment Method",
+                    align: "center",
+                    dataIndex: "paymentMethod",
+                    key: "paymentMethod",
+					width:150,
+					ellipsis:true,
+                },
+				{
+                    title: "last4",
+                    key: "last4",
+					width:120,
+                    align: "center",
+                    dataIndex: "last4",
+                    // slots:{customRender:'action'}
+                },
+                // {
+                //     title: 'User Type',
+                //     align: "center",
+                //     dataIndex: "systemUser",
+                //     key: "systemUser",
+				// 	width:100,
+                //     customRender: (record: any) => {
+                //         let str;
+                //         if (record.value == 0) {
+                //             str = "visitor";
+                //         } else if (record.value == 1) {
+                //             str = "yearly";
+                //         } else if (record.value == 2) {
+                //             str = "monthly";
+                //         } else if (record.value == 3) {
+                //             str = "trial";
+                //         } else if (record.value == 4) {
+                //             str = "userInEvent";
+                //         }
+                //         return str;
+                //     },
+                // },
+				{
+                    title: "City",
+                    align: "center",
+                    dataIndex: "city",
+                    key: "city",
+					width:150,
+					ellipsis:true
+                },
+				{
+                    title: "Country",
+                    align: "center",
+                    dataIndex: "country",
+                    key: "country",
+					width:150,
+					ellipsis:true
+                },
+                {
+                    title: "Create Time",
+                    align: "center",
+                    dataIndex: "createTime",
+                    key: "createTime",
+					width:150,
+					ellipsis:true,
+                },
+                {
+                    title: "Status",
+                    align: "center",
+                    dataIndex: "status",
+                    key: "status",
+                    fixed: "right",
+					width:150,
+                    Operations: true,
+					ellipsis:true,
+                }
+            ];
+        });
+        //改变页码
+        let changePage = (e: any, filters:any, sorter:any) => {
+            filterData.currentPage = e.current;
+            filterData.pageSize = e.pageSize;
+			if(sorter.order){
+				if(sorter.columnKey == 'id'){
+					filterData.orderBy = 'id'
+				}else if(sorter.columnKey == "createDate"){
+					filterData.orderBy = 'time'
+				}else if(sorter.columnKey == "credits"){
+					filterData.orderBy = 'credits'
+				}
+			}
+			filterData.order = sorter.order == "descend" ? "DESC" : "ASC";
+
+            gettrialList();
+        };
+
+        //查询列表
+        let searchHistoryList = () => {
+            filterData.currentPage = 1;
+            gettrialList();
+        };
+        let clearHistoryList = () => {
+            filterData.rangePickerValue = [],
+			filterData.currentPage = 1,
+			filterData.pageSize = 10,
+			filterData.total = 0,
+			filterData.city = "",
+			filterData.country = "",
+			filterData.payerTotal = ""
+			filterData.order = "" //'Ascending  升序 Descending 降序'
+			filterData.orderBy = "" //'Ascending  升序 Descending 降序'
+			filterData.platform = ""
+			filterData.status = ""
+			filterData.type = ""
+        };
+        let setHistoryListData = () => {
+            let startDate: any = filterData.rangePickerValue?.[0]
+                ? filterData.rangePickerValue[0] + " " + "00:00:00"
+                : "";
+            let endDate: any = filterData.rangePickerValue?.[1]
+                ? filterData.rangePickerValue[1] + " " + "23:59:59"
+                : "";
+            let data = {
+                order: filterData.order,
+                orderBy: filterData.orderBy,
+				"city": filterData.city,
+				"country": filterData.country,
+                startTime: startDate,
+                endTime: endDate,
+				"id": 0,
+                page: filterData.currentPage,
+				"payerTotal": filterData.payerTotal,
+				"platform": filterData.platform,
+                size: filterData.pageSize,
+				"status": filterData.status,
+				"type": filterData.type
+            };
+            return data;
+        };
+        //获取列表
+        let gettrialList = () => {
+            filter.tableLoading = true;
+            let data = setHistoryListData();
+            Https.axiosPost(Https.httpUrls.queryTransaction, data).then(
+                (rv: any) => {
+                    if (rv) {
+						console.log(rv);
+						
+                        // this.dataList = rv
+                        filter.dataList = rv.content;
+                        filterData.total = rv.total;
+                        filter.tableLoading = false;
+
+                        // this.workspaceItem.position = this.singleTypeList[0].label
+                    }
+                }
+            );
+        };
+		//导出报表
+        let downloadTransaction = () => {
+            filter.tableLoading = true;
+            let data = setHistoryListData();
+			Https.axiosPost(Https.httpUrls.queryTransactionDownload, data).then(
+                (rv: any) => {
+                    if (rv) {
+						fetch(rv)
+						.then(response => response.blob())  // 将响应转换为 Blob 对象
+						.then(blob => {
+						// 创建一个指向 Blob 对象的 URL
+						const link = document.createElement('a');
+						link.href = URL.createObjectURL(blob);  // 将 Blob 对象转换为可下载的 URL
+						link.download = 'transaction';  // 设置文件名
+						filter.tableLoading = false;
+						link.click();  // 触发下载
+						URL.revokeObjectURL(link.href);  // 释放 URL 对象
+						})
+                    }
+                }
+            );
+        };
+        let lastGeTrialList = (str: string) => {
+            clearHistoryList();
+            let currentDate = new Date();
+            let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
+            // 计算30天前的时间戳
+            let thirtyDaysAgoTimestamp;
+            if (str == "year") {
+                thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
+            } else if (str == "month") {
+                thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
+            } else if (str == "week") {
+                thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
+            }
+            filterData.rangePickerValue[0] = formatTime(
+                thirtyDaysAgoTimestamp,
+                "YYYY-MM-DD"
+            );
+            gettrialList();
+        };
+		let filterOption = (input: any, option: any) => {
+            // 使用 option.label 进行搜索
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        };
+        onMounted(() => {
+			let allCountry: any = sessionStorage.getItem("allCountry");
+            if (allCountry) {
+                filter.allCountry = JSON.parse(allCountry);
+            }
+            gettrialList();
+        });
+        return {
+            ...toRefs(filter),
+            ...toRefs(filterData),
+            ...toRefs(selectList),
+            columns,
+            renameData,
+            changePage,
+            searchHistoryList,
+            lastGeTrialList,
+            gettrialList,
+			downloadTransaction,
+			filterOption,
+        };
+    },
+    data() {
+        return {
+            historyTableHeight: 0,
+            handleResizeColumn: (w: any, col: any) => {
+                col.width = w;
+            },
+        };
+    },
+    mounted() {
+        let historyTable: any = this.$refs.historyTable;
+        this.historyTableHeight = historyTable.clientHeight - 200;
+    },
+    methods: {},
+});
+</script>
+<style lang="less" scoped>
+.admin_page .admin_table_search .admin_state {
+    display: flex;
+    flex-wrap: wrap;
+}
+:deep(.operate_list){
+	.fi{
+		font-size: 2rem;
+		margin-right: 1rem;
+	}
+	.success{
+		.fi-ss-check-circle{
+			color: #3ab45c;
+		}
+	}
+	.pending{
+		.fi-ss-check-circle{
+			color: #ffc628;
+		}
+	}
+	.fail{
+		.fi-ss-check-circle{
+			color: #ff0000;
+		}
+	}
+}
+</style>
--- a/src/component/Administrator/affiliate/affiliateAudit.vue
+++ b/src/component/Administrator/affiliate/affiliateAudit.vue
@@ -96,6 +96,13 @@ export default defineComponent({
                    dataIndex: "id",
                    key: "id",
                    fixed: "left",
+                },
+				{
+                    title: 'User Name',
+                    align: "center",
+                    width: 100,
+                    dataIndex: "username",
+                    key: "username",
                },
                {
                    title: 'Create Time',
@@ -112,13 +119,6 @@ export default defineComponent({
                    dataIndex: "status",
                    key: "status",
 					  
-                },{
-                    title: 'Updata Time',
-                    align: "center",
-                    width: 200,
-                    dataIndex: "updateTime",
-                    key: "updateTime",
-                 
                },{
                    title: 'Total income',
                    align: "center",
@@ -135,6 +135,13 @@ export default defineComponent({
                    dataIndex: "monthlyEarnings",
                    key: "monthlyEarnings",
 					openType:'all',
+                },{
+                    title: 'Unpaid amount',
+                    align: "center",
+                    ellipsis: true,
+                    width: 100,
+                    dataIndex: "unpaidEarnings",
+                    key: "unpaidEarnings",
                },{
                    title: 'Invitation Link',
                    align: "center",
@@ -143,12 +150,12 @@ export default defineComponent({
                    dataIndex: "link",
                    key: "link",
                },{
-                    title: 'Unpaid amount',
+                    title: 'Updata Time',
                    align: "center",
-                    ellipsis: true,
-                    width: 100,
-                    dataIndex: "unpaidEarnings",
-                    key: "unpaidEarnings",
+                    width: 200,
+                    dataIndex: "updateTime",
+                    key: "updateTime",
+                 
                },
                {
                    title: 'Operations',
@@ -263,7 +270,7 @@ export default defineComponent({
            };
            Https.axiosPost(Https.httpUrls.affiliateList, data).then(
                (rv: any) => {
-                    this.collectionList = rv.records;
+                    this.collectionList = rv.content;
 					this.total=rv.total
                }
            );
--- a/src/component/Administrator/affiliate/itemAffiliateDetail.vue
+++ b/src/component/Administrator/affiliate/itemAffiliateDetail.vue
@@ -14,10 +14,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<div class="admin_page">
--- a/src/component/Administrator/allUser.vue
+++ b/src/component/Administrator/allUser.vue
@@ -415,7 +415,7 @@ export default defineComponent({
                ? filterData.rangePickerValue[0] + " " + "00:00:00"
                : "";
            let endDate: any = filterData.rangePickerValue?.[1]
-                ? filterData.rangePickerValue[1] + " " + "00:00:00"
+                ? filterData.rangePickerValue[1] + " " + "23:59:59"
                : "";
            let data = {
                endTime: endDate,
@@ -424,7 +424,7 @@ export default defineComponent({
                page: filterData.currentPage,
                systemUser: filterData.systemUser,
                country: filterData.country,
-                email: filterData.email,
+                email: filterData.email.trim(),
                userType: filterData.userType,
                ids: filterData.ids,
                occupation: filterData.occupation,
--- a/src/component/Administrator/allUserPoerations.vue
+++ b/src/component/Administrator/allUserPoerations.vue
@@ -16,10 +16,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<div class="modal_title_text">
--- a/src/component/Administrator/questionnaire.vue
+++ b/src/component/Administrator/questionnaire.vue
@@ -48,10 +48,11 @@
 			<div class="generalModel_btn">
 				<div class="generalModel_closeIcon" @click.stop="closeModal()">
 					<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 				</div>
 			</div>
 			<feedbackSurveyVue ref="feedbackSurveyVue"></feedbackSurveyVue>
--- a/src/component/Canvas/test.vue
+++ b/src/component/Canvas/test.vue
@@ -14,10 +14,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<canvasIndex></canvasIndex>
--- a/src/component/Detail/DesignDetailAlter.vue
+++ b/src/component/Detail/DesignDetailAlter.vue
@@ -1364,8 +1364,8 @@ export default defineComponent({
 					margin: 0;

 					margin-bottom: calc(2rem*1.2);
-					width: calc(9rem*1.2);
-					height: calc(9rem*1.2);
+					width: 10rem;
+					height: 10rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
--- a/src/component/Detail/addDetails.vue
+++ b/src/component/Detail/addDetails.vue
@@ -16,10 +16,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		
--- a/src/component/Detail/habitSetStyle.vue
+++ b/src/component/Detail/habitSetStyle.vue
@@ -15,10 +15,11 @@
 	<div class="generalModel_btn">
 		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 			<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 		</div>
 	</div>
 	<div class="habitSetStyle_content" v-hoverAnmi>
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -382,7 +382,6 @@ export default defineComponent({
 			//判断尺寸是否到边
 			this.frontBack.front[this.imgDomIndex].style.width = width
 			this.frontBack.front[this.imgDomIndex].style.height = height
-
 		},
 		//鼠标抬起
 		sizeMouseup(e){
--- a/src/component/DetailCopy/designDetail.vue
+++ b/src/component/DetailCopy/designDetail.vue
@@ -0,0 +1,270 @@
+<template>
+    <div ref="designDetailModal" class="designDetailModal">
+		<!-- designDetailShow -->
+		<!-- :class="[driver__.driver?'hideEvents':'']" -->
+        <a-modal class="Guide_1_18 generalModel fullScreen" 
+            v-model:visible="designDetailShow" 
+            :footer="null" 
+			:get-container="() => $refs.designDetailModal"
+            width="100%"
+			height="100%"
+            :maskClosable="false"
+			:mask="false"
+            :centered="true"
+			:keyboard="false"
+			:closable="false"
+        >
+			<div class="content">
+				<div class="nav">
+					<div class="back_home">
+						<div class="gallery_btn" @click="closeModal()">
+							<i class="fi fi-rs-house-chimney"></i>
+						</div>
+					</div>
+					<div class="nav_list">
+						<div class="nav_item active">
+							<img src="@/assets/images/icon/details_sketch.png" alt="">
+							<div class="detailText">Apparel</div>
+						</div>
+						<div class="nav_item">
+							<img src="@/assets/images/icon/details_print.png" alt="">
+							<div class="detailText">Print</div>
+						</div>
+						<div class="nav_item">
+							<img src="@/assets/images/icon/details_color.png" alt="">
+							<div class="detailText">Color</div>
+						</div>
+						<div class="nav_item">
+							<img src="@/assets/images/icon/details_elements.png" alt="">
+							<div class="detailText">Elements</div>
+						</div>
+					</div>
+				</div>
+				<div class="item">
+					<sketchLeft></sketchLeft>
+				</div>
+				<div class="item">
+					<model></model>
+				</div>
+				<div></div>
+				<div class="gallery_btn submit">Submit</div>
+			</div>
+			
+        </a-modal>
+         <div class="mark_loading" v-show="loadingShow">
+            <a-spin size="large" />
+        </div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import sketchLeft from './sketchLeft.vue'
+import model from './model/index.vue'
+
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
+import { useStore } from "vuex";
+import { openGuide,driverObj__ } from "@/tool/guide";
+import { useI18n } from 'vue-i18n'
+import addDetails from '@/component/Detail/addDetails.vue'
+export default defineComponent({
+    components:{
+		sketchLeft,model
+    },
+    setup() {
+        const store = useStore();
+      
+		let designItemDetail :any = computed(()=>{
+			return store.state.DesignDetailModule.designItemDetail
+		})
+		const userDetail = computed(()=>{
+			return store.state.UserHabit.userDetail
+		})
+		const detailData = reactive({
+			designDetail:null,
+			designDetailShow:true,
+			loadingShow:false,
+		})
+		provide('designDetail',detailData.designDetail)
+		const closeModal = ()=>{
+			detailData.designDetailShow = false
+		}
+		const showDesignDetailModal = (data:any,str:any)=>{
+			// this.moible = isMoible()
+			// this.designItemId = data.design.designItemId
+			// this.designOutfitId = data.design.designOutfitId
+            let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
+            // let url = Https.httpUrls.getDesignDetail + `?designItemId=61204&designPythonOutfitId=60908`
+            // this.parentData = data
+            detailData.loadingShow = true
+            Https.axiosGet(url).then(
+                async (rv: any) => {
+					rv.clothes.forEach((item:any)=>{
+						let a
+						item.designType='Library'
+						if(item.layersObject[0].imageCategory.indexOf("back") == -1){
+							a = item.layersObject[0]
+							item.layersObject[0] = item.layersObject[1]
+							item.layersObject[1] = a
+						}
+						if(item.printObject.prints == null)item.printObject.prints = []
+						item.printObject.prints.forEach((element:any) => {
+							if(!element.designType){
+								element.designType = 'Library'
+							}
+						});
+					})
+					setTimeout(() => {
+					detailData.designDetail = rv
+					}, 2000);
+					detailData.designDetailShow = true
+                    // this.store.commit('setDesignItemDetail',rv)
+					// this.deleteShow = false
+
+					setRevocation(rv,'')
+					// if(rv.singleOverall == 'overall'){
+					// 	this.body = false
+					// }else{
+					// 	this.body = true
+					// }
+					// await this.setImgSize()
+                    // this.generateHighDesignImg = rv.highDesignUrl
+                    // this.designDetailShow = true
+                    detailData.loadingShow = false
+					// await this.setImgSize() 
+                }
+				
+            ).catch(rv=>{
+                detailData.loadingShow = false
+            })
+		}
+		const initialize = ()=>{//design后初始化
+
+			
+			sessionStorage.removeItem('oppositeRevocation')
+			sessionStorage.removeItem('revocation')
+		}
+		const setRevocation = (designItemDetail:any,data:any)=>{//设置撤销
+
+		}
+        return{
+			...toRefs(detailData),
+            closeModal,
+			showDesignDetailModal,
+        }
+    },
+	provide() {
+		return {
+		}
+	},
+	mounted(){
+		let beforeunload =  () => {
+			window.removeEventListener('beforeunload',beforeunload)
+		}
+		window.addEventListener('beforeunload',beforeunload)
+		// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
+        //     this.loadingShow = true
+        //     Https.axiosGet(url).then(
+		// 		async (rv: any) => {
+		// 			rv.clothes.forEach((item:any)=>{
+		// 				let a
+		// 				if(item.layersObject[0].imageCategory.indexOf("back") == -1){
+		// 					a = item.layersObject[0]
+		// 					item.layersObject[0] = item.layersObject[1]
+		// 					item.layersObject[1] = a
+		// 				}
+		// 				if(item.printObject.prints == null){
+		// 					item.printObject.prints = [{}]
+		// 				}
+		// 			})
+        //             this.store.commit('setDesignItemDetail',rv)
+		// 			if(rv.others[0].printObject.path == null){
+		// 				this.body = false
+		// 			}else{
+		// 				this.body = true
+		// 			}
+		// 			this.setImgSize()
+        //             this.generateHighDesignImg = rv.highDesignUrl
+        //             this.designShowPrview = 1
+        //             this.designDetailShow = true
+        //             this.loadingShow = false
+        //         }
+        //     ).catch(rv=>{
+        //         this.loadingShow = false
+        //     })
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	:deep(.detailText){
+		font-size: 1.8rem;
+		font-weight: 600;
+	}
+    .designDetailModal{
+		position: relative;
+		top: -100%;
+		height: 100%;
+		:deep(.ant-modal-wrap){
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+		.content{
+			display: flex;
+			align-items: flex-start;
+			height: 100%;
+			width: 100%;
+			> .item{
+				height: 100%;
+			}
+			> .nav{
+				margin-right: 5rem;
+				> .back_home{
+					width: 9rem;
+					text-align: center;
+					> .gallery_btn{
+						width: 6rem;
+						height: 6rem;
+						border-radius: 50%;
+					}
+				}
+				> .nav_list{
+					margin-top: 2.7rem;
+					height: 38rem;
+					width: 9rem;
+					background: #f4f4f4;
+					border-radius: 1.4rem;
+					padding: 1.4rem 0;
+					> .nav_item{
+						text-align: center;
+						width: 100%;
+						height: calc((38rem - 1.4rem * 2) / 4);
+						cursor: pointer;
+						display: flex;
+						align-items: center;
+						flex-direction: column;
+						justify-content: center;
+						> img{
+							width: 4rem;
+							height: 3.6rem;
+							object-fit: contain;
+						}
+						&.active{
+							background: #bdbdbd;
+						}
+					}
+				}
+			}
+			> .submit{
+				margin-left: auto;
+
+			}
+		}
+		
+	}
+</style>
--- a/src/component/DetailCopy/editSketchPosition.vue
+++ b/src/component/DetailCopy/editSketchPosition.vue
--- a/src/component/DetailCopy/libraryList.vue
+++ b/src/component/DetailCopy/libraryList.vue
@@ -0,0 +1,221 @@
+<template>
+    <div class="libraryList">
+		<div class="generalModel_state">
+			<div class="generalModel_state_item">
+				<a-select
+					v-model:value="designType"
+					:options="designTypeList"
+					@change="handleChange"
+					style="width:100%"
+					size="large"
+					:fieldNames="{ label: 'name', value: 'value' }"
+				>
+					<template #suffixIcon
+						><span
+							class="icon iconfont icon-xiala"
+							style="color: #343579"
+						></span
+					></template>
+				</a-select>
+			</div>
+			<div class="generalModel_state_item">
+				<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
+				<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
+			</div>
+			<!-- clothesPrint -->
+		</div>
+		<div class="libraryList_box">
+			<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
+				<div class="content_img_item_block" :class="{active:file?.checked}">
+					<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
+					<sketchCategory :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
+				</div>
+			</div>
+			<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
+				<img src="@/assets/images/homePage/loading.gif" alt="">
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+export default defineComponent({
+    components:{
+		sketchCategory
+    },
+	props:{
+		catecoryList:{
+		    type:Object,
+			default:()=>[] as any,
+			required:true
+		}
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			isShowLoading:false,//懒加载，加载中
+			libraryList:[],
+			designTypeList:[] as any,
+			designType:'',
+			searchPictureName:'',
+		})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const init = ()=>{
+			detailData.designTypeList = props.catecoryList
+			detailData.designType = detailData.designTypeList[0].value
+			getLibraryList()
+		}
+		const selectImgItem = ()=>{
+
+		}
+		const getLibraryList = ()=>{
+            detailData.isShowLoading = true
+			let level2Type = ''
+			let workspace = store.state.Workspace.workspace
+            let data = {
+                level1Type:'Sketchboard',
+                // level2Type:'Pattern',
+                level2Type:detailData.designType,
+				modelSex:workspace?.sex,
+                page:getDetailListData.currentPage,
+                pictureName:detailData.searchPictureName,
+                size:getDetailListData.pageSize+detailData.libraryList.length,
+            }
+            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
+                (rv) => {
+					rv.content.forEach((vItem:any)=>{
+						if(props.catecoryList){
+							props.catecoryList.forEach((item:any) => {
+								if(item.value == vItem.level2Type){
+									vItem.categoryValue = item.value
+									vItem.category = item.name
+								}
+							});
+						}
+						
+					})
+					detailData.libraryList = rv.content
+                    detailData.isShowLoading = false
+                    getDetailListData.total = rv.total
+                }
+            ).catch((res)=>{
+                detailData.isShowLoading = false
+            });
+        }
+		const handleChange = ()=>{
+			getDetailListData.currentPage = 1
+			detailData.libraryList = []
+            getLibraryList()
+		}
+		onMounted(()=>{
+			// getLibraryList()
+		})
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			init,
+			selectImgItem,
+			getLibraryList,
+			handleChange,
+        }
+    },
+	directives:{
+		observe:{
+			mounted (el,binding) {
+				// console.log(binding.instance);
+				let callback = (entries:any, observer:any)=> {
+					entries.forEach((entry:any) => {
+						if (entry.isIntersecting && !this_.isShowLoading) {
+							this_.getLibraryList()
+						} else {
+						}
+					});
+				}
+				const ob = new IntersectionObserver(callback,{
+					root:null,
+					threshold:[.5]
+				})
+				ob.observe(el)
+				// this.currentPage = +=1
+				// this.pageSize = 12
+				// currentPage
+				let this_:any = binding.instance
+				
+			},
+		},
+	},
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .libraryList{
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .generalModel_state{
+			width: 100%;
+			> .generalModel_state_item{
+				width: 100%;
+				margin: 0;
+				position: relative;
+				> .search_icon_block{
+					position: absolute;
+					right: 5px;
+					width: calc(6rem - 4px);
+					height: calc(6rem - 4px);
+					color: #fff;
+					background: #000;
+					border-radius: 50%;
+					display: flex;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					cursor: pointer;
+				}
+			}
+			> .generalModel_state_item:last-child{
+				margin-top: 2rem;
+			}
+		}
+		> .libraryList_box{
+			width: 100%;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 1rem;
+			justify-content: space-between;
+			align-content: flex-start;
+			&::-webkit-scrollbar{display: none;}
+			> .content_img_item{
+				> .content_img_item_block{
+					width: calc((34rem - 2rem) / 2);
+					height: calc((34rem - 2rem) / 2);
+					position: relative;
+					margin-bottom: 2rem;
+
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .material_content_list_loding{
+				width: 100%;
+				height: calc((34rem - 2rem) / 2);
+			}
+		}
+	}
+</style>
--- a/src/component/DetailCopy/model/index.vue
+++ b/src/component/DetailCopy/model/index.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="modelindex">
+		<div class="detail_btn">
+			<!-- 全屏 --> 
+			<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></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> -->
+
+			<!-- 层 -->
+			<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
+			<!-- <i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
+			<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i> -->
+		</div>
+		<div>
+			<position></position>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import position from './modelPosition.vue';
+export default defineComponent({
+    components:{
+		position,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			
+		})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+		})
+		
+		const showDesignImgDetail = ()=>{
+
+		}
+		const deleteNav = ()=>{
+
+		}
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			...toRefs(getDetailListDom),
+			showDesignImgDetail,
+			deleteNav,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .modelindex{
+		width: 80rem;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		padding-top: 3rem;
+	}
+</style>
--- a/src/component/DetailCopy/model/modelPosition.vue
+++ b/src/component/DetailCopy/model/modelPosition.vue
@@ -0,0 +1,233 @@
+<template>
+    <div class="molepositon">
+		<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
+			<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
+				<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
+			</div>
+			<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'"  v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
+			<div class="detail_modal_item_front" v-for="item,index in frontBack.front"  @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)"  :style="item.style">
+				<img :src="item.imageUrl" alt="">
+			</div>
+		{{ designDetail }}
+			<div class="designOpenrtion_btn">
+				<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
+					<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
+					<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
+					<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
+					<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
+					<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
+				</ul>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { getMousePosition } from "@/tool/mdEvent";
+export default defineComponent({
+    components:{
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			frontBack:{
+				front:{},
+				back:{},
+				body:{},
+			},
+			designDetail:inject('designDetail') as any//父组件传过来的数据
+		})
+		console.log(detailData.designDetail);
+		
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+		})
+		watch(detailData.designDetail,(newValue,oldValue)=>{
+			console.log(123123);
+			
+		})
+
+		//设置尺寸
+		const itemSizeMousedown = (direction:any,event:any)=>{
+			// this.direction = direction
+			// this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
+			// this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
+			// let imgDomWH = this.imgDom.getBoundingClientRect()
+			// let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
+			// if(this.direction == 'right' || this.direction == 'bottom'){
+			// 	this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
+			// 	this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
+			// }else{
+			// 	this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
+			// 	this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
+			// }
+			
+			document.addEventListener('mousemove', sizeMouseMove);
+			document.addEventListener('touchmove', sizeTouchmove);
+			document.addEventListener('mouseup', sizeMouseup);
+			document.addEventListener('touchend', sizeMouseup);
+		}
+		const sizeMouseMove = (event:any)=>{
+			let e = getMousePosition(event,false)
+			sizeMouseMoveOperation(e)
+		}
+		const sizeTouchmove = (event:any)=>{
+			let e = getMousePosition(event,true)
+			sizeMouseMoveOperation(e)
+		}
+		const sizeMouseup = (e:any)=>{
+			// this.frontBack.front[this.imgDomIndex].style={
+			// 	right:'auto',
+			// 	left:this.imgDom.offsetLeft+'px',
+			// 	bottom:'auto',
+			// 	top:this.imgDom.offsetTop+'px',
+			// 	height:this.imgDom.offsetHeight+'px',
+			// 	width:this.imgDom.offsetWidth+'px',
+			// 	zIndex:this.printZIndex
+			// }
+			// this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
+			document.removeEventListener('mousemove',sizeMouseMove)
+			document.removeEventListener('touchmove',sizeTouchmove)
+			document.removeEventListener('mouseup',sizeMouseup) 
+			document.removeEventListener('touchend',sizeMouseup) 
+		}
+		const sizeMouseMoveOperation = (e:any)=> {
+			// let imgDomWH = this.imgDom.getBoundingClientRect()
+			// let parentNode =this.imgDom.parentNode
+			// let width = imgDomWH.width
+			// let height = imgDomWH.height
+			// let w,h
+			// let num = height/width
+			// //判断移动四个边
+			// if(this.direction == 'right'){
+			// 	w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)
+			// 	h = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
+			// 	width = w+'px'
+			// 	// height = w*num+'px'
+			// }else if(this.direction == 'top'){
+			// 	num = width/height
+			// 	this.frontBack.front[this.imgDomIndex].style.top = 'auto'
+			// 	// this.printStyleList[this.imgDomIndex].style.left = 'auto'
+			// 	this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
+			// 	w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
+			// 	h = (this.frontBack.front[this.imgDomIndex].centers.top - e.clientY)
+				
+			// 	height = h+'px'
+			// 	// width = h*num+'px'
+			// }else if(this.direction == 'bottom'){
+			// 	num = width/height
+			// 	h = (e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)
+			// 	height = h+'px'
+			// 	// width = h*num+'px'
+			// }else if(this.direction == 'left'){
+			// 	this.frontBack.front[this.imgDomIndex].style.left = 'auto'
+			// 	this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
+			// 	w = (this.frontBack.front[this.imgDomIndex].centers.left - e.clientX)
+				
+			// 	width = w+'px'
+			// 	// height = w*num+'px'
+			// }
+			// //判断尺寸是否到边
+			// this.frontBack.front[this.imgDomIndex].style.width = width
+			// this.frontBack.front[this.imgDomIndex].style.height = height
+		}
+		// 设置移动
+		const mouseMove = (event:any)=>{
+			let e = getMousePosition(event,false)
+			mouseMoveOperation(e)
+		}
+		const touchmove=(event:any)=>{
+			let e = getMousePosition(event,true)
+			mouseMoveOperation(e)
+		}
+		const mouseup = (e:any)=> {
+			document.removeEventListener('mousemove',mouseMove)
+			document.removeEventListener('touchmove',touchmove)
+			document.removeEventListener('mouseup',mouseup) 
+			document.removeEventListener('touchend',mouseup) 
+		}
+		const mouseMoveOperation = (e:any)=>{
+		// 	let imgDomWH = this.imgDom.getBoundingClientRect()
+		// 	let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
+		// 	let x = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
+		// 	let y = ( e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
+		// 	this.frontBack.front[this.imgDomIndex].style.left = x
+		// 	this.frontBack.front[this.imgDomIndex].style.top = y
+		}
+
+		const itemMoveMousedown = (index:any,e:any)=>{
+			// this.imgDomIndex = index
+			// this.frontBack.front.forEach((v)=>{
+			// 	v.designOpenrtionBtn = false
+			// })
+			// this.clothesOpenActive(index)
+			// let event = e||window.event
+			// this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
+			// this.frontBack.front[index].designOpenrtionBtn = true
+			// this.frontBack.front[index].style.zIndex = this.printZIndex++
+			// this.frontBack.back[index].style.zIndex = this.printZIndex
+			// let imgDomWH = this.imgDom.getBoundingClientRect()
+			// let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
+			// let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
+			// this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
+			// this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
+			document.addEventListener('mousemove', mouseMove);
+			document.addEventListener('touchmove', touchmove);
+			document.addEventListener('mouseup', mouseup);
+			document.addEventListener('touchend', mouseup);
+		}
+		const showDesignImgDetail = ()=>{
+
+		}
+		const deleteNav = ()=>{
+
+		}
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListDom),
+			
+			itemSizeMousedown,
+			itemMoveMousedown,
+			showDesignImgDetail,
+			deleteNav,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .molepositon{
+		width: 80rem;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		padding-top: 3rem;
+		> .designOpenrtion_imgMask{
+			width: auto;
+			height: auto;
+			position: relative;
+			height: calc(100% - 1.2rem - 4.8rem - 20%);
+			// overflow: hidden;
+			>img{
+				z-index: 2;
+				position: relative;
+			}
+			>div{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				top: 0;
+			}
+		}
+	}
+</style>
--- a/src/component/DetailCopy/sketchLeft.vue
+++ b/src/component/DetailCopy/sketchLeft.vue
@@ -0,0 +1,165 @@
+<template>
+    <div class="sketchLeft">
+		<div class="detailText">Current Print</div>
+		<div class="select_sketch">
+			<img src="https://develop.aida.com.hk/img/aida_logo_centent.b8a50882.jpg" alt="">
+		</div>
+		<div class="switch_type_list">
+			<div
+				@click.stop="openUpload()"
+				class="switch_type_item"
+				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
+			</div>
+			<div
+				@click.stop="openLibrary()"
+				class="switch_type_item"
+				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
+			</div>
+		</div>
+		<div class="sketch_content_list">
+			<div class="content_item" v-show="selectTitle == 'upload'">
+				<uploadList :catecoryList="sketchCatecoryList"></uploadList>
+			</div>
+			<div class="content_item" v-show="selectTitle == 'library'">
+				<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
+			</div>
+		</div>
+        <div class="mark_loading" v-show="loadingShow">
+            <a-spin size="large" />
+        </div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import libraryList from './libraryList.vue'
+import uploadList from './uploadList.vue'
+export default defineComponent({
+    components:{
+		libraryList,
+		uploadList,
+		sketchCategory,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectTitle:'upload',
+			loadingShow:false,
+			isShowLoading:false,//懒加载，加载中
+			sketchCatecoryList:computed(()=>{
+				return store.state.Workspace.workspacePosition
+			})
+		})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+		})
+		const openUpload = ()=>{
+			detailData.selectTitle = 'upload'
+		}
+		const openLibrary = ()=>{
+			detailData.selectTitle = 'library'
+			getDetailListDom.libraryList.init()
+		}
+		const selectImgItem = ()=>{
+
+		}
+		
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			...toRefs(getDetailListDom),
+
+			openUpload,
+			openLibrary,
+			selectImgItem,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .sketchLeft{
+		width: 34rem;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .detailText{
+			margin-bottom: 1rem;
+		}
+		> .select_sketch{
+			width: 100%;
+			height: 23.5rem;
+			padding: 1rem 0;
+			text-align: center;
+			border-radius: .5rem;
+			// border: 1px dashed #202020;
+			border: 1px dashed transparent;
+        	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);
+			margin-bottom: 3rem;
+			> img{
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+		}
+		> .switch_type_list{
+			display: flex;
+			margin-bottom: 2.5rem;
+			> .switch_type_item:nth-child(1){
+				margin-right: 6.5rem;
+			}
+			> .switch_type_item{
+				position: relative;
+				cursor: pointer;
+			}
+			> .switch_type_item::before {
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    background: #000;
+                    height: calc(.4rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: -.5rem;
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+			> .select_swtich {
+				color: #000;
+				font-weight: 600;
+				transform: scale(1.15);
+			}
+			> .select_swtich::before {
+				width: 100%;
+			}
+		}
+		> .sketch_content_list{
+			flex: 1;
+			overflow: hidden;
+			> .content_item{
+				height: 100%;
+				margin-top: 1rem;
+			}
+		}
+	}
+</style>
--- a/src/component/DetailCopy/uploadList.vue
+++ b/src/component/DetailCopy/uploadList.vue
@@ -0,0 +1,212 @@
+
+<template>
+    <div class="uploadList">
+		<div class="uploadList_box">
+
+			<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
+				<div class="content_img_item_block" :class="{active:file?.checked}">
+					<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
+					<sketchCategory :disignTypeList="catecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
+					
+				</div>
+			</div>
+			<div class="upload_item">
+				<div class="upload_file_item upload_component">
+					<a-upload
+						:action="uploadUrl + '/api/element/upload'"
+						list-type="picture-card"
+						:capture="null"
+
+						:data="{
+							...upload,
+						}"
+						:headers="{ Authorization: token }"
+						v-model:file-list="uploadList"
+						:before-upload="beforeUpload"
+						:maxCount="8"
+						accept=".jpg,.png,.jpeg,.bmp"
+						@change="(file) => upFileUploadChange(file)"
+					>
+						<div
+							class="upload_tip_block"
+							v-show="uploadList.length != 8"
+						>
+							<i class="fi fi-br-upload"></i>
+							<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+						</div>
+					</a-upload>
+				</div>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import { getCookie } from "@/tool/cookie";
+import { message,Upload} from 'ant-design-vue';
+import {getUploadUrl} from '@/tool/util'
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+		sketchCategory
+    },
+	props:{
+		catecoryList:{
+		    type:Object,
+			default:()=>[] as any,
+			required:true
+		}
+	},
+    setup(props,{emit}) {
+		const {t} = useI18n();
+        const store = useStore();
+		const detailData = reactive({
+			isShowLoading:false,//懒加载，加载中
+			uploadList:[],
+			upload:{
+                isPin: 0,
+                level1Type: 'Sketchboard',
+				gender:store.state.Workspace.workspace.sex,
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			},
+			token:getCookie("token"),
+			uploadUrl:getUploadUrl(),
+		})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const selectImgItem = ()=>{
+
+		}
+		const upFileUploadChange = (data:any)=>{
+            let file = data.file;
+			let bor = true
+            if (file.status === "done") {
+                let res = JSON.parse(file.xhr.response);
+				if(res.errCode == 0){
+					file.id = res.data.id;
+					file.url = res.data.url;
+					file.resData = res.data;
+					let type 
+					if(props?.catecoryList){
+						if(res.data.level2Type){
+							props?.catecoryList.forEach((item:any) => {
+								if(item.value == res.data.level2Type){
+									file.categoryValue = item?.value;
+									type = item.value
+									file.category = item?.name;
+								}
+							});
+						}else{
+							file.categoryValue = props?.catecoryList?.[0].value;
+							type = props.catecoryList[0].value
+							file.category = props.catecoryList[0].name;
+						}
+					}
+					
+					file.designType = res.data.designType
+					file.level2Type = type;
+					file.minIOPath = file.resData.minIOPath
+					let fileList = detailData.uploadList.filter(
+						(v:any) => v.status === "done"
+					);
+					detailData.uploadList = fileList
+					// this.selectImgItem(detailData.uploadList[detailData.uploadList.length-1])
+				}else{
+					bor = false
+				}
+            } else if (file.status === "error") {
+				bor = false
+            }
+			if(!bor){
+                let res = JSON.parse(file.xhr.response);
+				let index = -1;
+                detailData.uploadList.forEach((ele:any, index1) => {
+                    if (file.uid === ele.uid) {
+                        index = index1;
+                    }
+                });
+                if (index > -1) {
+                    detailData.uploadList.splice(index, 1);
+                }
+                message.warning(res.errMsg);
+			}
+			
+        }
+		const beforeUpload = (file:any)=>{
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.info(t('DesignDetailAlter.jsContent4'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(t('DesignDetailAlter.jsContent5'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        }
+		onMounted(()=>{
+		})
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+
+			selectImgItem,
+			beforeUpload,
+			upFileUploadChange,
+        }
+    },
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .uploadList{
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .uploadList_box{
+			width: 100%;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 1rem;
+			justify-content: space-between;
+			align-content: flex-start;
+			&::-webkit-scrollbar{display: none;}
+			> .content_img_item{
+				> .content_img_item_block{
+					width: calc((34rem - 2rem) / 2);
+					height: calc((34rem - 2rem) / 2);
+					position: relative;
+					margin-bottom: 2rem;
+
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .material_content_list_loding{
+				width: 100%;
+				height: calc((34rem - 2rem) / 2);
+			}
+			> .upload_item{
+				width: calc((34rem - 2rem) / 2);
+				height: calc((34rem - 2rem) / 2);
+				align-items: center;
+				justify-content: center;
+			}
+		}
+		
+	}
+</style>
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -15,10 +15,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
        <div class="UpgradePlan_content">
@@ -160,6 +161,22 @@
 						<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
 					</div> -->
 				</div>
+				<div class="shortcutKeys_box">
+					<div class="gallery_btn white" @click.stop="setCloseNav('shortcut')">
+						{{ $t('exportModel.ShortcutKeys') }}
+						<i class="icon iconfont icon-xiala" :class="closeNav.shortcut?'icon-rotate-tool':''" ></i>
+					</div>
+					<div class="shortcutKeys_list">
+						<div class="shortcutKeys_list_item" v-for="item in keysList" :key="item.name">
+							<div class="name">{{ item.name }}</div>
+							<div class="key">
+								<div v-if="!isWindow">{{ item.macKey }}</div>
+								<div v-else>{{ item.winDowKey }}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				
 				<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
 					{{ $t('exportModel.More') }}
 				</div>
@@ -169,14 +186,14 @@
 			<div class="exportCanvasBox_center_box exportCanvasBox_left">
 				<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>
-						<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:operation == 'pencil'}"></i>
+						<i class="icon iconfont icon-chehui" @click="historyState('')" :title="isWindow?'Ctrl+Z':'Command+Z'"></i>
+						<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')" :title="isWindow?'Ctrl+Shift+Z':'Command+Ctrl+Z'"></i>
+						<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:operation == 'pencil'}" :title="isWindow?'~':'~'"></i>
 						<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-move" @click="setOperation('move')" :class="{active:operation == 'move'}" :title="isWindow?'M':'M'"></i>
+						<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}" :title="isWindow?'~':'~'"></i>
 						
-						<label class="uploadImage">
+						<label class="uploadImage" :title="isWindow?'Ctrl+O':'Command+O'">
 							<i class="fi fi-br-upload" ></i>
 							<input type="file" @change="uploadImage" accept="image/*">
 						</label>
@@ -296,8 +313,8 @@
 				<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
 			</div>
 		</a-modal>
-		<publish ref="publish" ></publish>
-		<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
+		<publish ref="publish" @clearPublish="clearPublish"></publish>
+		<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction" @clearLiquefaction="clearLiquefaction"></liquefaction>
    </a-modal>
 </div>
 </template>
@@ -336,7 +353,7 @@ export default defineComponent({
 		let driver__ = computed(()=>{
 			return store.state.Guide.guide
 		})
-
+		let isWindow = true
        let showUpgradePlan = ref(false);
        let canvas = ref({});
        // let canvasDom = ref()
@@ -397,6 +414,12 @@ export default defineComponent({
 				"likeDesignCollectionList",
 				productData.key,
 			];
+			const userAgent = navigator.userAgent.toLowerCase();
+			if (userAgent.indexOf('windows') !== -1) {
+				isWindow = true
+			}else if(userAgent.indexOf('macintosh') !== -1 || userAgent.indexOf('mac os') !== -1) {
+				isWindow = false
+			}
 			createCanvas()
 		}
 		let setCanvasData = async (oldExportCanvas)=>{
@@ -532,6 +555,9 @@ export default defineComponent({
        let createCanvas = (oldExportCanvas) => {
            showUpgradePlan.value = true;
 			clearTimeout(submitCanvasContent)
+			setCanvasKeyDown()
+			// document.addEventListener("keydown", setCanvasKeyDown);
+			// document.addEventListener("keyup", clearCanvasKeyDown);
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
 			allBoardData.value.likeDesignCollectionList =
@@ -542,8 +568,6 @@ export default defineComponent({
 				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
 				let oldCanvasDom1 =  canvasBox.querySelector('canvas')
 				var canvasDom = document.createElement("canvas");
-				document.addEventListener("keydown", setCanvasKeyDown);
-				document.addEventListener("keyup", clearCanvasKeyDown);
 				if(oldCanvasDom)oldCanvasDom.remove()
 				if(oldCanvasDom)loadingShow.value = false
 				if(oldCanvasDom1)oldCanvasDom1.remove()
@@ -570,12 +594,6 @@ export default defineComponent({
 				});
 				canvas.preserveObjectStacking = true;
 				//鼠标移动
-				// canvas.wrapperEl.onmouseover = setCanvasKeyDown;//document上添加按下和抬起事件
-				// canvas.wrapperEl.onmouseout  = clearCanvasKeyDown;//document上添加按下和抬起事件
-
-				// canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
-				// canvas.on("mouse:out", clearCanvasKeyDown);//document上添加按下和抬起事件
-
 				canvas.on("mouse:move", event =>setCanvasMove(event));
 				canvas.on("mouse:down", event=>setCanvasDown(event));
 				canvas.on("mouse:up", event=>setCanvasUp(event));
@@ -928,7 +946,6 @@ export default defineComponent({
 				centered:true,
 				onOk() {
 					showUpgradePlan.value = false;
-					canvas.off("mouse:out", clearCanvasKeyDown);
 					canvas.dispose();
 					position = {
 						//设置每个图形位置的初始值
@@ -971,7 +988,7 @@ export default defineComponent({
 		let closeNav = ref({
 			nav:false,
 			tool:false,
-			move:false,
+			shortcut:false,
 		})
 		let setCloseNav = (key)=>{
 			closeNav.value[key] = !closeNav.value[key]
@@ -1198,29 +1215,74 @@ export default defineComponent({
 		// let brushwork = ref('')
 		// 监听键盘的 keydown 和 keyup 事件
 		let keyDown = []
+		const keysList = [
+			{
+				name:useI18.t('exportModel.PaintingEraser'),
+				winDowKey:'~',
+				macKey:'~',
+			},{
+				name:useI18.t('exportModel.Uncheck'),
+				winDowKey:'Ctrl + D',
+				macKey:'Command + D',
+			},{
+				name:useI18.t('exportModel.Revoke'),
+				winDowKey:'Ctrl + Z',
+				macKey:'Command + Z',
+			},{
+				name:useI18.t('exportModel.Retreat'),
+				winDowKey:'Ctrl + Shift + Z',
+				macKey:'Command + Ctrl + Z',
+			},{
+				name:useI18.t('exportModel.ReduceBrushSize'),
+				winDowKey:'[',
+				macKey:'[',
+			},{
+				name:useI18.t('exportModel.IncreaseBrushSize'),
+				winDowKey:']',
+				macKey:']',
+			},{
+				name:useI18.t('exportModel.DrinkingStraw'),
+				winDowKey:'I',
+				macKey:'I',
+			},{
+				name:useI18.t('exportModel.Copy'),
+				winDowKey:'Ctrl + C',
+				macKey:'Command + C',
+			},{
+				name:useI18.t('exportModel.Paste'),
+				winDowKey:'Ctrl + V',
+				macKey:'Command + V',
+			},{
+				name:useI18.t('exportModel.UploadOpenimage'),
+				winDowKey:'Ctrl + O',
+				macKey:'Command + O',
+			},
+		]
 		let oldOperation = ''
 		let canvasKeyDown = (event) => {
-			event.preventDefault(); 
+			let keys = ['Enter','Delete','ControlLeft','KeyZ','ShiftLeft','KeyC','KeyV','BracketLeft','BracketRight','KeyI','KeyD','KeyO','Backquote','MetaLeft']
+			if(keys.indexOf(event.code) > -1){
+				event.preventDefault(); 
+			}
 			if(keyDown.indexOf(event.code)>-1){
 			}else{
 				keyDown.push(event.code)
-				if(event.key === 'Enter' && operation.value == 'fold'){
+				// console.log(keyDown.indexOf('ControlLeft') > -1 , keyDown.indexOf('MetaLeft') > -1, event.code == 'KeyC')
+				if(event.code === 'Enter' && operation.value == 'fold'){
 					foldEnd('Enter')
 				}else if(event.key === 'Delete'){
 					deleteObject()
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
+				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyZ' && keyDown.indexOf('ShiftLeft') > -1){
 					historyState('reverse')
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
+				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyZ'){
 					historyState('')
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyC') > -1){
+				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyC'){
 					copy()
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyV') > -1){
+				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyV'){
 					paste()
 				}else if(keyDown.indexOf('BracketLeft') > -1){
 					let width = canvasPencilWidth.value[operation.value]
-					console.log(width);
 					canvasPencilWidth.value[operation.value] = (width - 5) < 3?3:(width - 5)
-					console.log(canvasPencilWidth.value[operation.value]);
 					setPencilWidth()
 				}else if(keyDown.indexOf('BracketRight') > -1){
 					let width = canvasPencilWidth.value[operation.value]
@@ -1228,16 +1290,20 @@ export default defineComponent({
 					setPencilWidth()
 				}else if(keyDown.indexOf('KeyI') > -1){
 					getColor()//吸色
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyD') > -1){
+				}else if(keyDown.indexOf('KeyM') > -1){
+					setOperation('move')
+				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyD'){
 					canvas.discardActiveObject().renderAll();
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyO') > -1){
+				}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyO'){
 					let input = document.querySelector('.uploadImage input')
 					input.click()
 				}else if(keyDown.indexOf('Backquote') > -1){
-					if(operation.value == 'pencil' || operation.value == 'texture'){
-						oldOperation = operation.value
-						setOperation('eraser')
-					}
+					// if(operation.value == 'pencil' || operation.value == 'texture'){
+					let str = 'pencil'
+					if(operation.value == 'pencil')str = 'eraser'
+					oldOperation = operation.value
+					setOperation(str)
+					// }
 				}
 			}
 		}
@@ -1257,11 +1323,15 @@ export default defineComponent({
 			}
 		}
 		let canvasKeyUp = (event) =>{
+			let keys = ['Enter','Delete','ControlLeft','KeyZ','ShiftLeft','KeyC','KeyV','BracketLeft','BracketRight','KeyI','KeyD','KeyO','Backquote','MetaLeft']
+			if(keys.indexOf(event.code) > -1){
+				event.preventDefault(); 
+			}
 				keyDown = keyDown.filter(function(item) {
 					return event.code !== item;
 				})
 				if(event.code == 'Backquote' && oldOperation){
-					setOperation(oldOperation)
+					// setOperation(oldOperation)
 					oldOperation  = ''
 				}
 			}
@@ -2018,6 +2088,12 @@ export default defineComponent({
 				userlikeGroupId:userlikeGroupId,
 			}
 			publishModal.init(data)
+			document.removeEventListener('keydown',canvasKeyDown);
+			document.removeEventListener('keyup', canvasKeyUp);
+		}
+		const clearPublish = ()=>{
+			document.addEventListener('keydown',canvasKeyDown);
+			document.addEventListener('keyup', canvasKeyUp);
 		}
 		let setSubmit = ()=>{
 			let data = setCanvasContent(false)
@@ -2075,11 +2151,15 @@ export default defineComponent({
 				updateCanvasState()
 			});
 		}
+		const clearLiquefaction = ()=>{
+			setCanvasKeyDown()
+		}
 		let setLiquefaction = ()=>{
 			const activeObjects = canvas.getActiveObjects(); // 获取选中的对象
 			if (activeObjects.length === 1 && activeObjects[0].type === 'image') {
 				liquefactionData = activeObjects[0]
 				liquefaction.value.init(activeObjects[0])
+				clearCanvasKeyDown()
 			} else {
 				message.info(useI18.t('exportModel.jsContent6'))
 				return null;
@@ -2108,13 +2188,13 @@ export default defineComponent({
 			
 		});
 		onBeforeUnmount(()=>{
-			document.removeEventListener("keydown", setCanvasKeyDown);
-			document.removeEventListener("keyup", clearCanvasKeyDown);
+			clearCanvasKeyDown()
 		})
        return {
 			toSvg,
 			t,
 			toSvg,
+			isWindow,//判断是window还是mac
            showUpgradePlan,//当前弹窗是否打开
            canvasWH,//画布初始宽高
 			pencilbtnStyle,//笔触按钮
@@ -2139,6 +2219,7 @@ export default defineComponent({
 			uploadImage,//上传图帕
 			setLayerIndex,//设置选中元素的层级
 			brushList,//笔触列表
+			clearPublish,
 			textureList,//材质列表
 			canvasPencilColor,//input选择颜色
 			canvasPencilWidth,//input选择宽度
@@ -2150,6 +2231,7 @@ export default defineComponent({
 			setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
 			setHDExport,//高清导出选择的图片
 			brushworkChange,//切换笔触的回调
+			keysList,
 			textureValueChange,//切换材质信息
 			brushworkValue,//当前笔触
 			textureValue,//当前材质
@@ -2172,6 +2254,7 @@ export default defineComponent({
 			//液化
 			liquefaction,
 			submitLiquefaction,
+			clearLiquefaction,
 			setLiquefaction,
        };
    },
@@ -2343,6 +2426,39 @@ export default defineComponent({
 			.exportCanvasBox_left_tool{
 				margin: 0;
 			}
+			.shortcutKeys_box{
+				position: relative;
+				.shortcutKeys_list{
+					display: none;
+					position: absolute;
+					z-index: 2;
+					width: 30rem;
+					max-height: 45rem;
+					background: #f7f8fa;
+					border-radius: 2rem;
+					right: 0;
+					overflow-y: auto;
+					padding: 2rem;
+					.shortcutKeys_list_item{
+						display: flex;
+						font-size: 1.8rem;
+						justify-content: space-between;
+						margin-bottom: 2rem;
+						>.key{
+							display: flex;
+						}
+					}	
+					.shortcutKeys_list_item:last-child{
+					    margin-bottom: 0;
+					}
+				}
+				&:hover{
+					.shortcutKeys_list{
+						display: block;
+					}
+				}
+			}
+			
 			.label_item,label {
                display: flex;
 				align-items: center;
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -15,7 +15,7 @@
        <div class="input_border" >
 			<div class="input_box  Guide_1_5" :class="[inputShow?'active':'',type_.type2 =='Sketchboard'?'Guide_1_9_2':'',driver__.driver?'showEvents':'']">
 				<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
-					<div class="upload_item">
+					<div class="upload_item" v-show="sketchboardList?.length != 0">
 						<div
 							class="upload_file_item Guide_1_2_7"
 							v-for="(file, index) in sketchboardList"
@@ -196,6 +196,7 @@
        </div>
 		<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :workspace="workspace"></scaleImage>
 		<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
+		<UpgradePlan ref="UpgradePlan"></UpgradePlan>
    </div>
 </template>
 <script lang="ts">
@@ -215,12 +216,15 @@ import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
 import createSlogan from "@/component/HomePage/createSlogan.vue";
 import { useI18n } from "vue-i18n";
 import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
+
 export default defineComponent({
 	components: {
 		scaleImage,	
 		generalMenu,
 		createSlogan,
 		sketchCategory,
+		UpgradePlan,
 	},
    props: ["msg",'sketchCatecoryList','scene'],
    setup(props) {
@@ -602,21 +606,15 @@ export default defineComponent({
 			},10000)
 			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
                (rv) => {
-					if(data.isTestUser){
-						if(rv.leftUsageCount >= 1){
-							message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Moodboard')}));
-						}else if(rv.leftUsageCount == 0){
-							message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Moodboard')}));
-							this.isGenerate = false
-							return
-						}
-					}
-					// rv.uniqueId.forEach((item:any) => {
-					// 	let arr:any = {}
-					// 	arr.taskId = item
-					// 	arr.status = 'execution'
-					// 	this.fileList.unshift(arr)
-					// });
+					// if(data.isTestUser){
+					// 	if(rv.leftUsageCount >= 1){
+					// 		message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Moodboard')}));
+					// 	}else if(rv.leftUsageCount == 0){
+					// 		message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Moodboard')}));
+					// 		this.isGenerate = false
+					// 		return
+					// 	}
+					// }
 					this.setGenerate(rv.uniqueId)
 					
                }
@@ -625,6 +623,26 @@ export default defineComponent({
 				this.isGenerate = false
 				clearInterval(this.remGenerateTime)
 				this.remGenerate = false
+
+				if(res.errCode === 2){
+					let this_ = this
+					Modal.confirm({
+						title: res.errMsg,
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						zIndex:99999,
+						centered:true,
+						onOk() {
+							let UpgradePlan:any = this_.$refs.UpgradePlan
+							UpgradePlan.init()
+						},
+						onCancel(){
+							
+						}
+					});
+				}
            });
 		},
 		setGenerate(dataList:any){
@@ -945,7 +963,7 @@ export default defineComponent({
 	position: relative;
 	// padding-top: calc(2.5rem*1.2);
 	.input_border{
-		padding-top: calc(2.5rem*1.2);
+		padding-top: 1rem;
 	}
    
 	.mark_loading{
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -550,7 +550,6 @@ export default defineComponent({
 		display: flex;
 		flex-direction: column;
 		flex-shrink: 0;
-        width: 50%;
        // width: 50rem*1.2);
        .switch_type_list {
            display: flex;
@@ -640,6 +639,7 @@ export default defineComponent({
 		flex: 1;
 		margin-left: calc(3rem*1.2);
 		display: flex;
+		min-width: calc(57rem*1.2);
 		flex-direction: column;
 		overflow: hidden;
 		.modal_layout,.modal_accomplish{
--- a/src/component/HomePage/PrintboardUpload.vue
+++ b/src/component/HomePage/PrintboardUpload.vue
@@ -737,8 +737,8 @@ export default defineComponent({
                margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
 				// margin: 0 2rem*1.2) 2rem*1.2) 0;
 				display: inline-block;
-				width: calc(10rem*1.2);
-				height: calc(10rem*1.2);
+				width: 10rem;
+				height: 10rem;
 				border: 1px solid #f5f5f5;
 				vertical-align: top;
 				position: relative;
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -701,8 +701,8 @@ export default defineComponent({
 			margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
 			// margin: 0 2rem*1.2) 2rem*1.2) 0;
 			display: inline-block;
-			width: calc(10rem*1.2);
-			height: calc(10rem*1.2);
+			width: 10rem;
+			height: 10rem;
 			border: 1px solid #f5f5f5;
 			vertical-align: top;
 			position: relative;
--- a/src/component/HomePage/UpgradePlan.vue
+++ b/src/component/HomePage/UpgradePlan.vue
@@ -17,10 +17,11 @@
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<!-- <i class="fi fi-rr-cross-small"></i> -->
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<div class="UpgradePlan_content">
@@ -44,7 +45,7 @@
 				</div>
 			</div>
 		</div>
-		<payMethod ref="payMethod" @completePayment="cancelDsign"></payMethod>
+		<payMethod ref="payMethod" @completePayment="cancelDsign" type="credits"></payMethod>

 		<!-- <div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
 			<div class="UpgradePlan_payAffirm_title">{{ $t('upgradePlan.payment') }}</div>
@@ -207,7 +208,8 @@ export default defineComponent({
 			}
 		},
 		payment(){//付款
-			let url = window.location.href 
+			// let url = window.location.href 
+			let url = window.location.origin+'/paySucceed' 
 			// url = url.replace(/\/[^/]+$/, '') + '/home';
 			// console.log(url);
 			let parsedUrl = new URL(url);
--- a/src/component/HomePage/bindEmail.vue
+++ b/src/component/HomePage/bindEmail.vue
@@ -6,15 +6,29 @@
 		v-model:visible="registerModel"
 		:footer="null"
 		:width="pageWidth"
-		height="60rem"
+		:height="bindType == 'Modify'?'60rem':'70rem'"
 		:maskClosable="false"
 		:centered="true"
 		:closable="false"
 		:mask="registerModelMask"
 		:keyboard="false"
 		:destroyOnClose="true"
-		:zIndex="9999"
 	>
+		<div class="generalModel_btn" v-if="bindType == 'Modify'">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+			</div>
+		</div>
+		<div class="generalModel_btn back" v-if="bindType != 'Modify'">
+			<div class="generalModel_closeIcon" @click.stop="setBack()">
+				<span>←</span>
+				<span class="back_text">Back</span>
+			</div>
+		</div>
 		<div class="login_page">
 			<div class="page_content">
 				<!-- 账号密码和邮箱登录  start-->
@@ -27,56 +41,80 @@
 									'login_active',
 								]"
 							>
-								Bind Email
+								<span v-if="bindType == 'Modify'">Modify Email</span>
+								<span v-else>Bind personal information</span>
 							</div>
 						</div>
 						<!-- 账号密码登录 start -->
-						<!-- v-show="loginType == 'username'" -->
+						<!-- v-show="login$props.Type == 'username'" -->
 						<div >
 							<div class="login_form_content" :state="emailStap">
 								<div class="login_form_title marign_top30">Email</div>
 								<input
 									class="login_form_input"
+									:class="{active:(userDetail.email !== '-------------') && bindType != 'Modify'}"
 									placeholder="Enter your email address"
 									v-model="email"
+									:disabled="(userDetail.email !== '-------------') && bindType != 'Modify'"								
 									@keydown.enter="submitPerLogin()"
 								/>
+								<div v-if="bindType != 'Modify'">
+									<div class="login_form_title marign_top30">{{$t('account.Country')}}:</div>
+									<div class="login_form_select">
+										<a-select
+											class="gallerySelect"
+											v-model:value="Country"
+											:disabled="!!userDetail.country"
+											size="large"
+											optionFilterProp="label"
+											style="width: 100%;"
+											:options="countryList"
+											placeholder="Please select"
+											allowClear
+											show-search
+										></a-select>
+									</div>
+									
+									<div class="login_form_title marign_top30">{{$t('account.CompanyName')}}:</div>
+									<input class="login_form_input" :class="{active:!!userDetail.occupation}" :disabled="!!userDetail.occupation" type="text" placeholder="Please enter occupation" v-model="CompanyName">

+								</div>
+						
 							<!-- 邮箱登录 start -->
 								<div class="login_form_email" :class="{active:emailStap===2}">
-							<div v-show="emailStap === 2"  class="email_last_step">
-								
-								<div class="email_last_step_block" >
-									<span class="email_last_step_content"
-										>Verify with one-time verification code</span
-									>
-									<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
-								</div>
-								<div class="email_last_step_bottom">
-									<div class="email_last_step_des">
-									<div class="sent_email_content">
-										Sent to {{ email }}
-									</div>
-									<div class="tip_content">
-										<span v-show="time">{{ time }}s</span>
-										<span v-show="!time" @click="emailNextStepFun()"
-											>Resend</span
-										>
-									</div>
-								</div>
-								<VerificationCodeInput
-									:ct="emailCode"
-									@sendCaptcha="submitEmailLogin($event)"
-								></VerificationCodeInput>
+									<div v-show="emailStap === 2"  class="email_last_step">
+									
+										<div class="email_last_step_block" >
+											<span class="email_last_step_content"
+												>Verify with one-time verification code</span
+											>
+											<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
+										</div>
+										<div class="email_last_step_bottom">
+											<div class="email_last_step_des">
+											<div class="sent_email_content">
+												Sent to {{ email }}
+											</div>
+											<div class="tip_content">
+												<span v-show="time">{{ time }}s</span>
+												<span v-show="!time" @click="emailNextStepFun()"
+													>Resend</span
+												>
+											</div>
+										</div>
+										<VerificationCodeInput
+											:ct="emailCode"
+											@sendCaptcha="submitEmailLogin($event)"
+										></VerificationCodeInput>

-								<div class="email_last_step_des">
-									<div class="sent_email_content email_tip_content">
-									Please check the junk box if you haven't received verification code
+										<div class="email_last_step_des">
+											<div class="sent_email_content email_tip_content">
+											Please check the junk box if you haven't received verification code
+											</div>
+										</div>
 									</div>
 								</div>
-								</div>
 							</div>
-						</div>
 						</div>
 							<div
 								class="login_submit_button marign_top40" 
@@ -84,7 +122,8 @@
 								:state="emailStap"
 								@click="submitPerLogin()"
 							>
-							Bind Email
+							<span v-if="bindType == 'Modify'">Modify Email</span>
+							<span v-else>Submit</span>
 							</div>
 						</div>
 						<!-- 账号密码登录 end -->
@@ -100,7 +139,7 @@
 </template>

 <script lang="ts">
-import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
+import { defineComponent,ref,reactive,toRefs ,computed, onMounted} from "vue";
 import { Https } from "@/tool/https";
 import { isEmail } from "@/tool/util";
 import { setCookie ,WriteCookie } from "@/tool/cookie";
@@ -109,26 +148,52 @@ import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.v
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
-const md5 = require("md5");
+import { country } from "@/tool/country";
+import { useRouter } from "vue-router";
 export default defineComponent({
    components: {
        VerificationCodeInput,
    },
-    setup(){
+    setup(prop, { emit }){
+		const bindType = ''
+		const router = useRouter()
        let timer:any =  0;
 		const {locale} = useI18n()
 		const store = useStore();
+		let userDetail:any= computed(()=>{
+			return store.state.UserHabit.userDetail
+		})
 		let register = reactive({
-			registerModel:false,
+			registerModel:computed(()=>{
+				return store.state.UserHabit.bindEmail.isBindEmail
+			}),
+			bindType:computed(()=>{
+				return store.state.UserHabit.bindEmail.type
+			}),
 			registerModelMask:true,
-			pageWidth:'45%'
+			pageWidth:'45%',
+			Country:'',
+			CompanyName:'',
+			countryList:country,
+			email:'',
+		})
+		onMounted(()=>{
+			let country = userDetail.value.country
+			let CompanyName = userDetail.value.occupation
+			let email = userDetail.value.email
+			register.Country = country
+			register.CompanyName = CompanyName
+			register.email = email == '-------------'?'':email
 		})
        return{
+			router,
 			store,
            timer,
+			userDetail,
 			...toRefs(register),
 			locale
        }
+		
    },
    data() {
        return {
@@ -136,7 +201,6 @@ export default defineComponent({
            emailStap: 1, // 邮箱登录步骤
            emailCode: ["", "", "", "", "", ""], //邮箱验证码
            emailNextStep: true,
-            email: "", //邮箱登录邮箱
            frogetPasswordStep: 1, //忘记密码的步骤
            forgetPasswordEmail: "",
            forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
@@ -150,10 +214,13 @@ export default defineComponent({
        };
    },
    methods: {
-		init(){
-			this.registerModel = true
+		init(type:any){
+			let data =  {
+				type,
+				isBindEmail:true
+			}
+			this.store.commit('setIsBindEmail', data)
 			this.emailLastStepFun()
-			
 		},
       

@@ -210,15 +277,28 @@ export default defineComponent({
 					message.info("The email format is incorrect");
 					return;
 				}
+				if (!this.CompanyName && this.bindType != 'Modify') {
+					message.info("Please enter occupation");
+					return;
+				}
+				if (!this.Country && this.bindType != 'Modify') {
+					message.info("Please select a country");
+					return;
+				}
+				let type = 'BIND_MAILBOX'
+				if(this.email == this.userDetail.email && this.bindType != 'Modify')type = 'UPDATE_USERINFO'
 				let data = {
 					"email": this.email,
 					"ip": "",
-					"operationType": "BIND_MAILBOX"
+					"operationType": type,
+					occupation:this.CompanyName,
+					country:this.Country
 				};
 				if(this.loginTime){
 					this.loginTime = false
 					Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
 					(rv: any) => {
+						if(type == 'UPDATE_USERINFO')this.setSuccessLogin(rv)
 						this.emailStap = 2;
 						if (rv) {
 							this.userId = rv.userId
@@ -244,7 +324,9 @@ export default defineComponent({
 		setSuccessLogin(rv:any){
 			if (rv) {
 				let value = {
-					email:this.email
+					email:this.email,
+					occupation:this.CompanyName,
+					country:this.Country,
 				}
 				this.store.commit("upUserDetail", value)
 				window.location.reload();
@@ -282,7 +364,10 @@ export default defineComponent({
            }
        },
 		cancelDsign(){
-			this.registerModel = false
+			this.store.commit('setIsBindEmail', false)
+		},
+		setBack(){
+            this.router.push({path:'/login'})
 		}
    },
 });
@@ -307,9 +392,29 @@ export default defineComponent({
 }
 </style>
 <style lang="less" scoped>
+.generalModel_btn{
+	&.back{
+		.generalModel_closeIcon{
+			border-radius: 0;
+			right: auto;
+			left: 0;
+			border: none;
+			font-size: 2rem;
+			font-weight: 600;
+			transform: translate(100%, 100%);
+			.back_text{
+				text-decoration: underline;
+			}
+			span{
+				margin-right: .5rem;
+			}
+		}
+	}
+}
 .login_page {
    width: 100%;
    height: 100%;
+	
    .page_content {
        // position: relative;
        .login_content {
@@ -421,7 +526,17 @@ export default defineComponent({
                        cursor: pointer;
                    }
                }
-
+				.gallerySelect{
+                    margin-top: 1rem;
+					:deep(.ant-select-selector){
+						height: 5rem;
+						border: 0.1rem solid #dfdfdf;
+						border-radius: 2.5rem;
+					}
+					:deep(.ant-select-selector):hover{
+						border: 0.1rem solid #000;
+					}
+				}
                .login_form_input {
                    width: 100%;
                    height: 5rem;
@@ -434,6 +549,10 @@ export default defineComponent({
                    box-sizing: border-box;
                    outline: none;
 					transition: all .3s;
+					&.active{
+						color: #b8b8b8;
+						background: #f5f5f5;
+					}
 					&:hover{
 						border: 0.1rem solid #000;
 					}
--- a/src/component/HomePage/collectionModal.vue
+++ b/src/component/HomePage/collectionModal.vue
@@ -426,7 +426,7 @@ export default defineComponent({
 		font-size: var(--aida-fsize2);
 		font-weight: 900;
 		color: rgba(0,0,0,.65);
-		z-index: 2;
+		z-index: 999;
 		align-items: center;
 		width: calc(35rem*1.2);
 		justify-content: space-between;
--- a/src/component/HomePage/createSlogan.vue
+++ b/src/component/HomePage/createSlogan.vue
@@ -16,10 +16,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					<circle cx="23" cy="23" r="22.5" stroke="#666666"/>
+					<rect x="32.5059" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5059 12)" fill="#666666"/>
+					<rect x="34.627" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.627 32.5059)" fill="#666666"/>
 				</svg>
+
 			</div>
 		</div>
 		
--- a/src/component/HomePage/generalMenu.vue
+++ b/src/component/HomePage/generalMenu.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="generalMenu_printModel">
-		<div @click.stop="openPrintModel" :class="driverClass.class1">
+		<div @click.stop="openPrintModel" :class="driverClass.class1" :style="$props.style_">
 			<a-popover v-if="isCanvas">
 				<template #content>
 					<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
@@ -85,6 +85,10 @@ import { message, Upload, Modal } from "ant-design-vue";
 		 driverClass:{
 			 type:Object,
 			 default:{class1:'',class2:'',classList:{item1:'',item2:'',item3:''}},
+		 },
+		 style_:{
+			 type:Object,
+			 default:{}
 		 }
 	 },
 	 emits:['setprintModel'],
@@ -200,14 +204,15 @@ import { message, Upload, Modal } from "ant-design-vue";
 		>div{
 			// display: flex;
 			display: block;
-			width: calc(13rem*1.2);
-			border-radius: calc(1rem*1.2);
+			width: 20rem;
+			border-radius: 4rem;
 			margin: 0;
-			border: 2px solid;
+			border: 1px solid;
            cursor: pointer;
-			padding: 0 calc(1rem*1.2);
+			padding: 1.5rem 2rem;
 			text-align: center;
 			display: flex;
+			font-size: 1.8rem;
 			justify-content: space-around;
 			> span{
 				white-space: nowrap; 
@@ -221,7 +226,8 @@ import { message, Upload, Modal } from "ant-design-vue";
 		}
 		ul{
 			position: absolute;
-			width: calc(13rem*1.2);
+			border: 1px solid;
+			width: 20rem;
 			text-align: center;
 			margin-top: calc(.3rem*1.2);
 			border-radius: calc(1rem*1.2);
@@ -229,7 +235,7 @@ import { message, Upload, Modal } from "ant-design-vue";
 			z-index: 3;
 			li{
 				// background: rgba(0,0,0,.2);
-				background: #cccccc;
+				background: #fff;
 				line-height: 2;
 				cursor: pointer;
 				white-space: nowrap; 
@@ -257,7 +263,7 @@ import { message, Upload, Modal } from "ant-design-vue";
 			}
 			.printModel_item:hover{
 				// background: rgba(0,0,0,.4);
-				background: #999999;
+				background: #f3f3f6;
 				color: #000;
 			}
 		}
--- a/src/component/HomePage/productImg.vue
+++ b/src/component/HomePage/productImg.vue
@@ -16,10 +16,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<div class="productImg_content">
@@ -237,6 +238,8 @@
 				RelightDirectionList:RelightDirectionList,
 			}" 
 			:isProductimg="true"></scaleImage>
+		<UpgradePlan ref="UpgradePlan"></UpgradePlan>
+
 	</a-modal>
 </div>
 </template>
@@ -257,12 +260,14 @@ import { useStore } from "vuex";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
 import generalMenu from "@/component/HomePage/generalMenu.vue";
 import { openGuide,driverObj__ } from "@/tool/guide";
+import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
+

 export default defineComponent({
 	components:{
 		ExportModel,
 		scaleImage,
-		generalMenu,
+		generalMenu,UpgradePlan
 	},
    props: ['setTask'],
    setup(props,{emit}) {
@@ -292,6 +297,7 @@ export default defineComponent({
 			likeList:[],
 			similarity:30,
 			brightenValue:1,
+			UpgradePlan
 		})
 		let productimgMenuList = ref([
 			{
@@ -547,6 +553,25 @@ export default defineComponent({
 				productImgData.isProductimg = false
 				clearInterval(remPrductimgTime)
 				productImgData.remProductimg= false
+				if(res.errCode === 2){
+					Modal.confirm({
+						title: res.errMsg,
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						zIndex:99999,
+						centered:true,
+						onOk() {
+							let UpgradePlan:any = productImgData.UpgradePlan
+							UpgradePlan.init()
+						},
+						onCancel(){
+							
+						}
+					});
+				}
+				
            });
 		}
 		let generateProceedList:any = []
@@ -889,6 +914,9 @@ methods: {
 .productImg_left{
 	width: 25%;
 	position: relative;
+	display: flex;
+	height: 100%;
+    flex-direction: column;
 	.Guide_1_32{
 		height: 100%;
 		overflow-y: auto;
@@ -951,9 +979,7 @@ methods: {
 		}
 	}
 	.productImg_content_item_generate_btn{
-		position: absolute;
-		bottom: 0;
-		top: auto;
+		margin-top: auto;
 		width: 100%;
 		justify-content: space-around;
 		.input_box{
--- a/src/component/HomePage/renew.vue
+++ b/src/component/HomePage/renew.vue
@@ -19,15 +19,16 @@
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<!-- <i class="fi fi-rr-cross-small"></i> -->
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<div class="renewContent">
 			<div class="generalModelTitle">
-				Select The Best Plan For Your Needs
+				{{ $t('Renew.title') }}
 			</div>
 			<div class="renew_detail">
 				<div class="name generalModelTitle">{{ current.title }}</div>
@@ -39,16 +40,16 @@
 					<div class="type" v-if="current.typeList.length > 1">
 						<label>
 							<input name="pric" type="radio" value="monthly" v-model="current.type" @change="setPricType('monthly')">
-							Monthly
+							{{ $t('Renew.Monthly') }}
 						</label>
 						<label>
 							<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
-							Yearly
+							{{ $t('Renew.Yearly') }}
 						</label>
 					</div>
 					<div class="info">{{ current.info }}</div>
 				</div>
-				<div class="gallery_btn gallery_btn_radius" @click="payment">Subscribe Now</div>
+				<div class="gallery_btn gallery_btn_radius" @click="payment">{{ $t('Renew.SubscribeNow') }}</div>
 			</div>
 			<div
 				class="login_footer_item_text"
@@ -68,7 +69,7 @@
 			</div>
 		</div>
 	</a-modal>
-	<payMethod ref="payMethod" @completePayment="cancelDsign"></payMethod>
+	<payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
 </template>

 <script lang="ts">
@@ -76,6 +77,7 @@ import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
 import { message } from "ant-design-vue";
 import payMethod from "@/component/Pay/payMethod.vue";
 import { useStore } from "vuex";
+import { useI18n } from "vue-i18n";
 const md5 = require("md5");
 export default defineComponent({
    components: {
@@ -83,6 +85,7 @@ export default defineComponent({
    },
    setup(){
 		const store = useStore();
+		const {t} = useI18n()
 		let renew = reactive({
 			renewModel:false,
 			renewModelMask:true,
@@ -90,14 +93,14 @@ export default defineComponent({
 		})
 		let renewData = reactive({
 			personage:{
-				title:'Personal version',
+				title:t('Renew.PersonalVersion'),
 				price:{
 					monthly:'500',
 					year:'5,000',
 				},
 				unit:{
-					monthly:'HKD / Month',
-					year:'HKD / Year',
+					monthly:t('Renew.HKDMonth'),
+					year:t('Renew.HKDYear'),
 				},
 				type:'monthly',
 				typeList:['monthly','year'],
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -16,10 +16,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 			<div class="generalModel_closeIcon download" @click.stop="download()">
 				<i class="fi fi-rr-down-to-line"></i>
@@ -109,7 +110,7 @@
 			<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
 				<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
 				<generalMiniCanvas v-if="isCanvas" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
-				<img v-else :src="scaleImageList[scaleImageIndex]?.imgUrl">
+				<img v-else :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
 				
 				<div class="img_operate_block" v-if="isLike">
 					<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
@@ -123,7 +124,7 @@
 			</div>
 			<div class="nav_list" v-mousewheel>
 				<div class="nav_centent">
-					<img  v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl" :key="item.id">
+					<img  v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl || item?.url" :key="item.id">
 				</div>
 			</div>
 			<div class="nav_right">
@@ -133,6 +134,8 @@
 		<div class="mark_loading" v-show="loadingShow">
 				<a-spin size="large" />
 			</div>
+		<UpgradePlan ref="UpgradePlan"></UpgradePlan>
+
 	</a-modal>
 </div>
 </template>
@@ -146,8 +149,10 @@ import { downloadIamge } from "@/tool/util";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 import generalMiniCanvas from "@/component/modules/generalMiniCanvas.vue";
+import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
+
 export default defineComponent({
-	components:{generalMiniCanvas},
+	components:{generalMiniCanvas,UpgradePlan},
 	props:{
 		productData:{
            type:Object,
@@ -174,6 +179,7 @@ export default defineComponent({
 		})
 		let {t} = useI18n()
 		let productimg = reactive({
+			UpgradePlan:null,
 			isProductimg:false,
 			productimgSearchName:'',
 			productimgIsTextarea:false,
@@ -245,6 +251,25 @@ export default defineComponent({
 				productimg.productimgIsProductimg = false
 				clearInterval(remPrductimgTime)
 				productimg.productimgRemProductimg = false
+				if(res.errCode === 2){
+					Modal.confirm({
+						title: res.errMsg,
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						zIndex:99999,
+						centered:true,
+						onOk() {
+							let UpgradePlan:any = productimg.UpgradePlan
+							UpgradePlan.init()
+						},
+						onCancel(){
+							
+						}
+					});
+				}
+
            });
 		}
 		let generateProceedList:any = []
@@ -512,6 +537,9 @@ export default defineComponent({
 			z-index: 9;
 			.productImg_left{
 				width: 100%;
+				display: flex;
+				height: 100%;
+				flex-direction: column;
 				.input_box_btnBox{
 					width: 100%;
 				}
@@ -519,7 +547,7 @@ export default defineComponent({
 					justify-content: flex-end;
 				}
 				.productImg_content_item_generate_btn{
-					transform: translateY(100%);
+					// transform: translateY(100%);
 					position: absolute;
 					bottom: 0;
 					top: auto;
--- a/src/component/LoginPage/googleLogin.vue
+++ b/src/component/LoginPage/googleLogin.vue
@@ -2,8 +2,11 @@
    <div class="Container">
        <!-- 谷歌登录 -->
        <div class="g_id_signin" id="g_id_signin">
-			<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
 		</div>
+		<div class="icon">
+			<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
+			<span>{{ $props.text }}</span>
+		 </div>
    </div>
 </template>
 <script>
@@ -12,6 +15,12 @@
    export default defineComponent({
        name: "login",
 		emits: ['googelLogin'],
+		props: {
+			text: {
+				type: String,
+				default: 'Sign in with Google'
+			}
+		},
 		setup(props, { emit }) {
 			const  handleCredentialResponse = async (response) => {
                // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
@@ -28,34 +37,37 @@
 			// 使用谷歌登录的api
 			const createGmailLogin = async ()=>{
 				var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
-				if(!existingScript){
-					await new Promise((resolve, reject) => {
-						const script = document.createElement("script");
-						script.src = data.scriptSrc
-						script.onload=()=>{
-							resolve()
-						}
-						document.body.appendChild(script);
-					})
-				}
-				window.google.accounts.id.initialize({
-					// 主要就是填写client_id
-					client_id: GOOGLE_CLIENT_ID,
-					auto_select: false,
-					callback: handleCredentialResponse,
-					// context:"signin",
-					ux_mode:"popup",
-					itp_support:true,
-				});
-				window.google.accounts.id.renderButton(
-					document.getElementById("g_id_signin"),
-					{
-						type:"icon",//icon为只有一个icon
-						shape:"circle",
-						theme:"outline",
-						size:"large",
-						logo_alignment:"center",
+				if(!window.isAddGmail){
+					if(!existingScript){
+						window.isAddGmail = true
+						await new Promise((resolve, reject) => {
+							const script = document.createElement("script");
+							script.src = data.scriptSrc
+							script.onload=()=>{
+								resolve()
+							}
+							document.body.appendChild(script);
+						})
+					}
+					window.google.accounts.id.initialize({
+						// 主要就是填写client_id
+						client_id: GOOGLE_CLIENT_ID,
+						auto_select: false,
+						callback: handleCredentialResponse,
+						// context:"signin",
+						ux_mode:"popup",
+						itp_support:true,
 					});
+					window.google.accounts.id.renderButton(
+						document.querySelector('.Container #g_id_signin'),
+						{
+							type:"standard",//icon为只有一个icon
+							shape:"circle",
+							theme:"outline",
+							size:"large",
+							logo_alignment:"center",
+						});
+				}
 			}
 			onBeforeUnmount(()=>{
 				var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
@@ -69,27 +81,67 @@
 </script>
 <style scoped lang="less">
 .Container{
+	position: relative;
+	border-radius: 4rem;
+	overflow: hidden;
 	:deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb ){
 		justify-content: center;
 		.nsm7Bb-HzV7m-LgbsSe-Bz112c{
 			padding: 0;
 		}
 	}
-	.g_id_signin{
-		width: 40px;
-		height: 40px;
+	:deep(.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK){
+		width: 100%;
+	}
+	// :deep(.S9gUrf-YoZ4jf){
+	// 	*{
+	// 		width: 100%;
+	// 		height: 100%;
+	// 	}
+		
+	// }
+	.icon{
+		// width: 40px;
+		width: auto;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		border: 1px solid #dadce0;
-		border-radius: 50%;
+		border-radius: 4rem;
+		padding: .5rem 3rem;
 		cursor: pointer;
+		box-sizing: border-box;
+		position: relative;
+		background: #fff;
+		pointer-events: none;
 		&:hover{
 			background: #f8faff;
 		}
 		img{
-			width: 18px;
-			height: 18px;
+			width: 3.8rem;
+			height: 3.8rem;
+		}
+		span{
+			font-size: 1.4rem;
+			margin-left: 1.4rem;
+		}
+	}
+	.g_id_signin{
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		top: 0;
+		left: 0;
+		// opacity: 0;
+		:deep(.S9gUrf-YoZ4jf){
+			width: 100%;
+			height: 100%;
+		}
+	}
+	&:hover{
+		.icon{
+			background: #f8faff;
 		}
 	}
 }
--- a/src/component/LoginPage/phoneModel.vue
+++ b/src/component/LoginPage/phoneModel.vue
@@ -18,10 +18,11 @@
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<!-- <i class="fi fi-rr-cross-small"></i> -->
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<div class="phoneLogin">
--- a/src/component/LoginPage/weiXinLogin.vue
+++ b/src/component/LoginPage/weiXinLogin.vue
@@ -2,6 +2,7 @@
    <div class="Container">
        <div class="icon" @click="openWeiXinModel">
 			<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
+			<span>{{ $props.text }}</span>
 		</div>
 		<weiXinModel ref="weiXinModel"></weiXinModel>
    </div>
@@ -14,6 +15,12 @@
 		components: {
 		    weiXinModel
 		},
+		props: {
+			text: {
+				type: String,
+				default: 'Sign in with Wechat'
+			}
+		},
 		setup() {
 			let weiXinDom = reactive({
 				weiXinModel:null
@@ -35,20 +42,26 @@
 .Container{
 	position: relative;
 	.icon{
-		width: 40px;
-		height: 40px;
+		// width: 40px;
+		width: auto;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		border: 1px solid #dadce0;
-		border-radius: 50%;
+		border-radius: 4rem;
+		padding: .5rem 3rem;
 		cursor: pointer;
+		box-sizing: border-box;
 		&:hover{
 			background: #f8faff;
 		}
 		img{
-			width: 18px;
-			height: 18px;
+			width: 3.8rem;
+			height: 3.8rem;
+		}
+		span{
+			font-size: 1.4rem;
+			margin-left: 1.4rem;
 		}
 	}
 	&.Container:hover{
--- a/src/component/LoginPage/weiXinModel.vue
+++ b/src/component/LoginPage/weiXinModel.vue
@@ -16,10 +16,11 @@
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<!-- <i class="fi fi-rr-cross-small"></i> -->
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<div class="weiXinLogin">
--- a/src/component/Pay/payMethod.vue
+++ b/src/component/Pay/payMethod.vue
@@ -19,31 +19,30 @@
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<!-- <i class="fi fi-rr-cross-small"></i> -->
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<div class="payMethodContent">
 			<div class="generalModelTitle">
-				Purchase points
-			</div>
-			<div class="generalModelInfo">
-				select a payment method
+				{{ $t('upgradePlan.paymentmethod') }}
 			</div>
 			<div class="payMethod_list">
-				<label class="payMethod_item">
+				<label class="payMethod_item" v-show="$props.type == 'credits'">
 					<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
 					<img src="../../assets/images/homePage/paypal.svg" alt="">
 					<span>PayPal</span>
 				</label>
 				<label class="payMethod_item">
 					<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
-					<img src="../../assets/images/homePage/bankCard.svg" alt="">
-					<span>{{ $t('upgradePlan.CreditCard') }}</span>
+					<img src="../../assets/images/homePage/stripe.svg" alt="">
+					<!-- <span>{{ $t('upgradePlan.CreditCard') }}</span> -->
+					 <span>Stripe</span>
 				</label>
-				<label class="payMethod_item">
+				<label class="payMethod_item" v-show="$props.type == 'credits'">
 					<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
 					<img src="../../assets/images/homePage/alipay.svg" alt="">
 					<span>{{ $t('upgradePlan.Alipay') }}</span>
@@ -66,11 +65,14 @@
 				</label>
 			</div>
 			<div class="payMethod_payAffirm_btn">
-				<div class="gallery_btn white" @click="cancelDsign">Cancel</div>
-				<div class="gallery_btn" @click="payAffirm">Payment</div>
+				<div class="gallery_btn white" @click="cancelDsign">{{ $t('upgradePlan.Cancel') }}</div>
+				<div class="gallery_btn" @click="payAffirm">{{ $t('upgradePlan.Payment') }}</div>
 			</div>
 			
 		</div>
+		<div class="mark_loading" v-show="isShowMark_">
+			<a-spin size="large" />
+		</div>
 		<div class="mark_loading" v-show="isShowMark" state="true">
 			<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
 			<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
@@ -98,6 +100,12 @@ export default defineComponent({
    components: {
        VerificationCodeInput,
    },
+	props:{
+		type:{
+			type:String,
+			default:''
+		}
+	},
 	emits: ['completePayment'],
    setup(prop,{emit}){
 		const store = useStore();
@@ -114,6 +122,7 @@ export default defineComponent({
 			clause:false,
 			newWindow:null as any,
 			isShowMark:false,
+			isShowMark_:false,
 		})
 		const init = (data:any)=>{
 			payMethod.payMethodModel = true
@@ -133,8 +142,9 @@ export default defineComponent({
 				}
 				return
 			}
+			payMethodData.isShowMark_ = true
 			let httpsUrl
-			let url = window.location.href 
+			let url = window.location.origin+'/paySucceed' 
 			let payAffirmData = payMethodData.payAffirmData
 			let data = {
 				autoRenewal:true,//false为不自动续费
@@ -142,6 +152,7 @@ export default defineComponent({
 				quantity:payAffirmData.quantity?payAffirmData.quantity:1,
 				returnUrl:url,
 				subscribeType:payAffirmData.subscribeType?payAffirmData.subscribeType:'',//yearly为年费，monthly为月费
+				wallet:payMethodData.modeOfPaymentDetail,
 			}
 			if(payMethodData.modeOfPayment == 'paypal'){
 				httpsUrl = Https.httpUrls.payPaypal
@@ -177,8 +188,10 @@ export default defineComponent({
 						window.location.href=herf;  
 					}
 					payMethodData.isShowMark = true
+					payMethodData.isShowMark_ = false
 				}
 			).catch(res=>{
+				payMethodData.isShowMark_ = false
 			});
 		}
 		const setPaidBack = ()=>{
--- a/src/component/Pay/payOrder.vue
+++ b/src/component/Pay/payOrder.vue
@@ -16,10 +16,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
        <div class="payOrder_page">
--- a/src/component/WorksPage/newScaleImage.vue
+++ b/src/component/WorksPage/newScaleImage.vue
@@ -16,10 +16,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign('')">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 			<!-- <div class="collection_closeIcon" @click.stop="download()">
 				<i class="fi fi-rr-down-to-line"></i>
--- a/src/component/WorksPage/newScaleImageMobile.vue
+++ b/src/component/WorksPage/newScaleImageMobile.vue
@@ -7,6 +7,7 @@
            :footer="null"
 			:get-container="() => $refs.newScaleImageMobileModal"
            width="100%"
+			height="70%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
@@ -17,10 +18,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign('')">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 			<!-- <div class="collection_closeIcon" @click.stop="download()">
 				<i class="fi fi-rr-down-to-line"></i>
@@ -629,6 +631,10 @@ export default defineComponent({
 		background: #39215b;
 	}
 }
+.generalModel_closeIcon{
+	border-radius: 50%;
+	background: #949494;
+}
 .newScaleImageMobile_modal {
 	box-shadow: none;
 	height: 100%;
--- a/src/component/WorksPage/publish.vue
+++ b/src/component/WorksPage/publish.vue
@@ -15,10 +15,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<div class="publish_content">
@@ -85,6 +86,7 @@ import { useI18n } from 'vue-i18n';
 import { useStore } from "vuex";

 export default defineComponent({
+	emits: ['clearPublish'],
    setup(prop,{emit}) {
 		let {t} = useI18n()
        const store = useStore();
@@ -113,7 +115,10 @@ export default defineComponent({
 		})
 		let portfolio:any = inject('portfolio')
 		let setPortfolio:any = inject('setPortfolio')
-		let tagList = ref([{id:1,tagName:'#AiDAworkshop_2024',title:'The process is simple: use AiDA to post your design work on the "Gallery ", and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! '}])
+		let tagList = ref([
+			// {id:1,tagName:'#AiDAworkshop_2024',title:'The process is simple: use AiDA to post your design work on the "Gallery ", and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! '},
+			{id:3,tagName:'#NewYear_2025',title:"✨New Year 2025！🎉Let's kick off the year with a burst of inspiration and design!"}
+		])
 		// let textarea: any = ref(null)
 		// let setCopy = ()=>{
 		// 	textarea.value.select()
@@ -199,6 +204,7 @@ export default defineComponent({
 		    publish.value = false
 			publishData.isShowMark = false
 			publishData.subPublishDate = {}
+			emit('clearPublish')
 		}
 		let cancelDsign = ()=>{
 			Modal.confirm({
--- a/src/component/affiliate/home.vue
+++ b/src/component/affiliate/home.vue
@@ -24,7 +24,7 @@
 		</div>
 		<div class="echarts_box">
 			<div class="title generalModel_state">
-				<div class="radio">
+				<!-- <div class="radio">
 					<label>
 						<input name="pric" type="radio" value="monthly" v-model="current.type" @change="setPricType('monthly')">
 						Monthly
@@ -33,7 +33,7 @@
 						<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
 						Yearly
 					</label>
-				</div>
+				</div> -->
 				<div class="date generalModel_state_item">
 					<a-date-picker
 						class="range_picker"
--- a/src/component/mainPage/signUp/index.vue
+++ b/src/component/mainPage/signUp/index.vue
@@ -1,9 +1,6 @@
 <template>
-	<div class="signUp" v-if="signUp">
+	<div class="signUp">
 		<div class="selectSignUp" v-show="!isSelectSignUp">
-			<div class="back" @click="close">
-				&lt; BACK
-			</div>
 			<div class="title">Our Advantages</div>
 			<div class="introduce"><span @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</span></div>
 			<div class="gallery_list product_list">
@@ -12,8 +9,9 @@
 						<div class="title">{{ item.title }}</div>
 						<div class="info">{{ item.info }}</div>
 						<div class="detail">{{ item.detail }}</div>
-						<div class="highlight">{{ item.highlight }}</div>
-						<div class="gallery_btn gallery_btn_radius" @click="createAccount">Create account</div>
+						<div class="highlight" v-if="item.highlight">{{ item.highlight }}</div>
+						<div class="gallery_btn gallery_btn_radius" v-if="item.info != '/'" @click="createAccount">Create account</div>
+						<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">Contact us</a>
 					</div>
 					<ul class="product_detail">
 						<li v-for="detailItem in item.detailList">{{ detailItem }}</li>
@@ -33,6 +31,7 @@
 				</div>
 			</div>
 			<div class="gallery_btn" style="width: 20rem;" @click="()=>isSelectSignUp=false">Create account</div>
+			<!-- <div class="gallery_btn" v-else style="width: 20rem;" @click="()=>isSelectSignUp=false">Contact us</div> -->
 		</div>
 		<registerModel ref="registerModel"></registerModel>
 	</div>
@@ -52,7 +51,6 @@
 				registerModel:null
 			})
 			let data = reactive({
-				signUp:false,
 				isSelectSignUp:false,
 				productList:[
 					{
@@ -68,34 +66,33 @@
 							'Support monthly/annual payment options',
 							'Suitable for individual creators and freelance designers to use'
 						]
+					},{
+						title:"Education Edition",
+						info:"/",
+						detail:"Multi user management system for universities",
+						highlight:"",
+						detailList:[
+							'Multi user management system for universities',
+							'Credit limits are shared across the entire school',
+							'AI assisted design teaching function',
+							'Support sketch creativity and design inspiration teaching',
+							'Basic 3D design functions',
+						]
+					},{
+						title:"Enterprise Edition",
+						info:"/",
+						detail:"Enterprise level multi person collaboration system",
+						highlight:"",
+						detailList:[
+							'Enterprise level multi person collaboration system',
+							'Internal Credit Sharing within Enterprises',
+							'Brand DNA management system, customizable brand Exclusive design preferences',
+							'Cloud based design generation and management',
+							'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
+							'Enterprise level data security assurance',
+							'Suitable for fashion design teams and brands to use',
+						]
 					},
-					// {
-					// 	title:"Education Edition",
-					// 	info:"XXX / Year",
-					// 	detail:"Multi user management system for universities",
-					// 	highlight:"Free 5-day trial",
-					// 	detailList:[
-					// 		'Multi user management system for universities',
-					// 		'Credit limits are shared across the entire school',
-					// 		'AI assisted design teaching function',
-					// 		'Support sketch creativity and design inspiration teaching',
-					// 		'Basic 3D design functions',
-					// 	]
-					// },{
-					// 	title:"Enterprise Edition",
-					// 	info:"XXX / Year",
-					// 	detail:"Enterprise level multi person collaboration system",
-					// 	highlight:"Free 5-day trial",
-					// 	detailList:[
-					// 		'Enterprise level multi person collaboration system',
-					// 		'Internal Credit Sharing within Enterprises',
-					// 		'Brand DNA management system, customizable brand Exclusive design preferences',
-					// 		'Cloud based design generation and management',
-					// 		'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
-					// 		'Enterprise level data security assurance',
-					// 		'Suitable for fashion design teams and brands to use',
-					// 	]
-					// },
 				],
 				introductList:[
 					{
@@ -125,12 +122,7 @@
 					},
 				]
 			})
-			const init = ()=>{
-				data.signUp = true
-			}
 			const close = ()=>{
-				data.signUp = false
-				emit('close')
 			}
 			const createAccount = ()=>{
 				if(window.innerWidth < 768){
@@ -144,7 +136,6 @@
 			return {
 				...toRefs(dom),
 				...toRefs(data),
-				init,
 				close,
 				createAccount,
            }
@@ -216,6 +207,9 @@
 				border: 2px solid #000;
 				padding: 3rem;
 				position: relative;
+				.active{
+					pointer-events: none;
+				}
 			}
 			.product_detail{
 				margin-top: 4rem;
--- a/src/component/mainPage/signUp/registerModel.vue
+++ b/src/component/mainPage/signUp/registerModel.vue
@@ -18,10 +18,11 @@
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<!-- <i class="fi fi-rr-cross-small"></i> -->
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		<div class="login_page">
@@ -143,8 +144,8 @@
 								</label>
 							</div>
 							<div class="thirdPartyLogin marign_top30">
-								<googleLogin @googelLogin="googelLogin"></googleLogin>
-								<weiXinLogin></weiXinLogin>
+								<googleLogin @googelLogin="googelLogin" text="Register with Google"></googleLogin>
+								<weiXinLogin text="Register with wechat"></weiXinLogin>
 								<!-- <phoneLogin></phoneLogin> -->
 							</div>
 							<div
@@ -644,16 +645,14 @@ export default defineComponent({
    .page_content {
        // position: relative;
        .login_content {
-			
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%,-50%);
+            // position: relative;
+            // top: 50%;
+            // left: 50%;
+            // transform: translate(-50%,-50%);
            // width: 60rem;
-			width: 80%;
+			// width: 80%;
            background: #FFFFFF;
            // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
-            border-radius: 1rem;
            padding: 3rem 6rem 6.5rem;
            box-sizing: border-box;
 			display: flex;
--- a/src/component/modules/liquefaction.vue
+++ b/src/component/modules/liquefaction.vue
@@ -15,10 +15,11 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-				</svg>
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+					</svg>
+
 			</div>
 		</div>
 		
@@ -47,6 +48,10 @@
 						<input type="range" v-model="density" @change="routesChange('density')">
 					</div>
 				</div>
+				<div class="liquefaction_parameter_item icon">
+					<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+					<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+				</div>
 				<div class="liquefaction_parameter_item">
 					<div class="generage_btn started_btn" @click="cancelDsign">{{ $t('Cropper.Cancel')}}</div>
 					<div class="generage_btn started_btn" @click="submit">{{ $t('Cropper.Finish')}}</div>
@@ -57,13 +62,13 @@
    </a-modal>
 </template>
 <script>
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs, onBeforeUnmount } from "vue";
 import { useI18n } from "vue-i18n";
 import { getMousePosition } from "@/tool/mdEvent";
 export default defineComponent({
    components: {
    },
-	emits: ['submitLiquefaction'],
+	emits: ['submitLiquefaction','clearLiquefaction'],
    setup(props,{emit}) {
        // let presentState = ref('paypal');
 		let liqufeaction = ref(false);
@@ -84,6 +89,8 @@ export default defineComponent({
 				transform:`translateY(-100%) rotate(${90}deg)`,
 			}
 		})
+		let records = []//撤回
+		let normalCanvasState = []//反撤回
 		let canvas
 		let canvasImgData = {
 			width:0,
@@ -91,8 +98,12 @@ export default defineComponent({
 		}
 		let downX
 		let downY
+		let context
 		let init = async (data)=>{
+			records = []
 			liqufeaction.value = true
+			document.addEventListener("keydown", kyeDown);
+			document.addEventListener("keyup", KeyUp);
 			await new Promise((resolve, reject) => {
 				nextTick(()=>{
 					resolve()
@@ -115,7 +126,7 @@ export default defineComponent({
 				canvas.width = width
 				canvas.height = height
 				let optfor = false
-				const context = canvas.getContext('2d');
+				context = canvas.getContext('2d');
 				context.drawImage(img, 1, 1, canvas.width, canvas.height);
 				let imgData = context.getImageData(0, 0, canvas.width, canvas.height)
 				
@@ -160,7 +171,9 @@ export default defineComponent({
 						}
 						distance = 0
 						arrows.value.show = false
-						context.putImageData(imgData, 0, 0);
+						const copiedImgData = new ImageData(new Uint8ClampedArray(imgData.data), imgData.width, imgData.height);
+						records.push(copiedImgData)
+						context.putImageData(copiedImgData, 0, 0);
 						optfor = false
 						canvasBox.removeEventListener('mousemove', mouseMove);
 						canvasBox.removeEventListener('touchmove', touchmove);
@@ -203,7 +216,10 @@ export default defineComponent({
 			}else{
 				img.src = data
 			}
+
+
        }
+
 		let distanceSqr = (x1, y1, x2, y2) => sqr(x1 - x2) + sqr(y1 - y2); 
 		let sqr = (x) => x * x;; 
 		let eachCircleDot = (imageData, ox, oy, r, callback)=>{
@@ -244,6 +260,44 @@ export default defineComponent({
 				}
 			}
 		}
+
+		let keyDowns = []
+		let kyeDown = (event)=>{
+			if(keyDowns.indexOf(event.code)>-1){
+			}else{
+				keyDowns.push(event.code)
+				if(keyDowns.indexOf('ControlLeft') > -1 && keyDowns.indexOf('KeyZ') > -1 && keyDowns.indexOf('ShiftLeft') > -1){
+					historyState('')
+				}else if(keyDowns.indexOf('ControlLeft') > -1 && keyDowns.indexOf('KeyZ') > -1){
+					historyState('reverse')
+				}
+			}
+		}
+		let KeyUp = (event) =>{
+			keyDowns = keyDowns.filter(function(item) {
+				return event.code !== item;
+			})
+		}
+		const historyState = (str)=>{
+			console.log(str);
+			let obj
+			if(str == 'reverse' && records.length > 0){//反撤回
+				obj = records.pop()
+				normalCanvasState.push(obj);
+			}else if(str == '' && normalCanvasState.length > 1){
+				obj = normalCanvasState.pop()
+				records.push(obj);
+			}else{
+				return
+			}
+			console.log(obj,context);
+			context.putImageData(obj, 0, 0);
+
+		}
+		onBeforeUnmount(()=>{
+			document.removeEventListener("keydown", kyeDown);
+			document.removeEventListener("keyup", KeyUp);
+		})
 		let copyImageDataBuff = (imgData)=>{
 			var data = imgData.data,
 				imgDataBuff = [];
@@ -303,6 +357,7 @@ export default defineComponent({
 		}
 		let cancelDsign = ()=>{
 			liqufeaction.value = false
+			emit('clearLiquefaction')
 		}
 		let routesChange = (str)=>{
 			liqufeactionData[str] = Math.round(liqufeactionData[str]/10)*10;
@@ -334,6 +389,7 @@ export default defineComponent({
 			...toRefs(liqufeactionData),
 			arrows,
 			init,
+			historyState,
 			cancelDsign,
 			routesChange,
 			submit,
@@ -390,6 +446,25 @@ export default defineComponent({
 						width: 100%;
 					}
 				}
+				&.icon{
+					flex-direction: row;
+					i{
+						width: 4rem;
+						height: 4rem;
+						display: flex;
+						border-radius: .5rem;
+						font-size: 2rem;
+						cursor: pointer;
+						border: 2px solid #000;
+						margin-right: 1rem;
+						align-items: center;
+						justify-content: center;
+						font-weight: 600;
+					}
+					i::last-nth{
+						margin: 0;
+					}
+				}
 			}
 			.liquefaction_parameter_item:last-child{
 				margin-top: 20px;
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -19,6 +19,7 @@ export default {
 		SentTo:'发送',
 		Resend:'重发',
 		Credits:'积分',
+		SubscribeNow:'立即订阅',
 		TaskList:'任务列表',
 		ViewOrders:'查询订单',
 		jsContent1:'邮箱格式不正确',
@@ -71,6 +72,17 @@ export default {
 		Cancel:'取消',
 		size:'区域',
 		density:'强度',
+		ShortcutKeys:'快捷键',
+		PaintingEraser:'绘图/橡皮',
+		Uncheck:'取消选择',
+		Revoke:'撤回',
+		Retreat:'反撤回',
+		ReduceBrushSize:'减小笔触大小',
+		IncreaseBrushSize:'增大笔触大小',
+		DrinkingStraw:'吸色',
+		Copy:'复制',
+		Paste:'粘贴',
+		UploadOpenimage:'Upload/Open image',
 		jsContent1:"您是否已经保存画布内容？如果没有，请再关闭前点击'保存'。",
 		jsContent2:'我们只支持对印花进行超分',
 		jsContent3:'您的积分小于一次超分',
@@ -94,6 +106,8 @@ export default {
 		payment:'选择付款方式',
 		Cancel:'取消',
 		Payment:'付款',
+		PurchasePoints:'购买',
+		paymentmethod:'请选择付款方式',
 		policy1:'我承认我已阅读并同意',
 		policy2:'条款和条件',
 		policy3:'(包括服务范围)及',
@@ -141,6 +155,7 @@ export default {
 		Design:'设计',
 		Redesign:'重新设计',
 		GeneratedDesign:'生成设计，请选择您最喜欢的设计',
+		recycleBin:'回收站',
 		SelectedDesign:'喜欢的设计',
 		Export:'导出',
 		moodboard:"情绪板",
@@ -530,6 +545,7 @@ export default {
 		FavoriteWorks:'点赞的作品',
 		MyWorks:'我的作品',
 		RCAworkshop_2024:'AiDA工作坊 2024',
+		NewYear_2025:'新年 2025',
 	},
 	Publish:{
 		Publish:'发布',
@@ -584,15 +600,20 @@ export default {
 		Follow:'关注',
 		Fans:'粉丝',
 		editUser:'修改个人信息',
+		notModifiable:'没有修改次数',
+		remainingModifications:'本月剩余次数：',
+		Country:'国家',
+		CompanyName:'职业',
 		//account首页
 		myInfor:'我的信息',
 		bindWeChat:'绑定',
-		cancel:'订阅',
+		cancel:'取消订阅',

 		//编辑个人信息页
 		userName:'用户名',
 		email:'邮箱',
 		Submit:'提交',
+		UpdateAvatar:'修改头像',
 		//消息
 		systemMessages:'系统消息',
 		comment:'评论',
@@ -607,6 +628,43 @@ export default {
 		Interact:'互动',
 		hisWorks:'他的作品',
 		works:'作品',
+		//取消
+		jsContent1:'太贵了',
+		jsContent2:'系统不友好',
+		jsContent3:'太慢了',
+		jsContent4:'操作困难',
+		jsContent5:'教程不充足',
+		jsContent6:'无法生成需要的内容',
+	},
+	frontPage:{
+		BindWechat:'绑定微信',
+		Unbound:'未绑定',
+		BindNow:'绑定',
+		Unbind:'取消绑定',
+		BindGmail:'绑定谷歌',
+		ModifyEmail:'修改邮箱',
+		Modify:'修改',
+		jsContent1:'取消绑定成功',
+		jsContent2:'当前网络无法加载谷歌',
+	},
+	Renew:{
+		title:'根据您的需求选择最佳计划',
+		Monthly:'月',
+		Yearly:'年',
+		SubscribeNow:'立即订阅',
+		PersonalVersion:'个人版',
+		HKDMonth:'HKD / 月',
+		HKDYear:'HKD / 年',
+	},
+	cancelRenewal:{
+		cancelling:'您取消AiDA的原因是什么？',
+		subscription:'您即将取消订阅',
+		looseDate:'你将失去所有功能',
+		looseCustomizations:'你将丢失你的设置和自定义',
+		DonWorry:'别担心！您在 AiDA 中的数据是安全的.',
+		Continue:'继续续订',
+		cancel:'是的，取消',
+		subscriptionRenewal:'没有自动续订的订阅计划.',
 	},
 	guide:{
 		guide1:"在<strong>工作空间</strong>中，您可以个性化您的设计设置，包括选择适用于男装或女装的设计，以及选择用于创作的人体模型。",
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -19,6 +19,7 @@ export default {
 		SentTo:'Sent to',
 		Resend:'Resend',
 		Credits:'Credits',
+		SubscribeNow:'Subscribe now',
 		TaskList:'Task List',
 		ViewOrders:'View Orders',
 		jsContent1:'The email format is incorrect',
@@ -71,6 +72,17 @@ export default {
 		Cancel:'Cancel',
 		size:'Size',
 		density:'Density',
+		ShortcutKeys:'Shortcut keys',
+		PaintingEraser:'Painting/Eraser',
+		Uncheck:'Uncheck',
+		Revoke:'Revoke',
+		Retreat:'Retreat',
+		ReduceBrushSize:'Reduce brush size',
+		IncreaseBrushSize:'Increase brush size',
+		DrinkingStraw:'Drinking straw',
+		Copy:'Copy',
+		Paste:'Paste',
+		UploadOpenimage:'Upload/Open image',
 		jsContent1:"Have you saved your canvas content? If not, please click 'Save' before closing.",
 		jsContent2:'We only provide super-resolution capabilities for printboard images.',
 		jsContent3:'Your points are less than one SR',
@@ -94,6 +106,8 @@ export default {
 		payment:'Select payment method',
 		Cancel:'Cancel',
 		Payment:'Payment',
+		PurchasePoints:'Purchase points',
+		paymentmethod:'select a payment method',
 		policy1:'I acknowledge that I have read, understand, and agree with the ',
 		policy2:'Terms and Conditions',
 		policy3:' (including the Scope of service) and the ',
@@ -141,6 +155,7 @@ export default {
 		Design:'Design',
 		Redesign:'Redesign',
 		GeneratedDesign:'Generated Design，please choose your favorite design',
+		recycleBin:'Recycle Bin',
 		SelectedDesign:'Selected Design',
 		Export:'Export',
 		moodboard:"moodboard",
@@ -530,6 +545,7 @@ export default {
 		FavoriteWorks:'Like Works',
 		MyWorks:'My Works',
 		RCAworkshop_2024:'AiDA Workshop 2024',
+		NewYear_2025:'NewYear 2025',
 	},
 	Publish:{
 		Publish:'Publish',
@@ -584,6 +600,10 @@ export default {
 		Follow:'Follow',
 		Fans:'Fans',
 		editUser:'Change Information',
+		notModifiable:'Not modifiable',
+		remainingModifications:'Remaining this month:',
+		Country:'Country',
+		CompanyName:'Occupation',
 		//account首页
 		myInfor:'My lnformation',
 		bindWeChat:'Bind WeChat/gmail',
@@ -592,6 +612,7 @@ export default {
 		userName:'User Name',
 		email:'Email',
 		Submit:'Submit',
+		UpdateAvatar:'Update Avatar',
 		//消息
 		systemMessages:'System Messages',
 		comment:'Comment',
@@ -606,6 +627,43 @@ export default {
 		Interact:'interact',
 		hisWorks:'His works',
 		works:'Works',
+		//取消
+		jsContent1:'Too expensive',
+		jsContent2:'Sytem not user friendly',
+		jsContent3:'Too Slowy',
+		jsContent4:'Difficult to edit',
+		jsContent5:'Insufficlent Tutorial/Support',
+		jsContent6:'Unable to generate what you need',
+	},
+	frontPage:{
+		BindWechat:'Bind Wechat',
+		Unbound:'Unbound',
+		BindNow:'Bind Now',
+		Unbind:'Unbind',
+		BindGmail:'Bind Gmail',
+		ModifyEmail:'Modify Email',
+		Modify:'Modify',
+		jsContent1:'Successful discharge',
+		jsContent2:'The current network cannot load Google',
+	},
+	Renew:{
+		title:'Select The Best Plan For Your Needs',
+		Monthly:'Monthly',
+		Yearly:'Yearly',
+		SubscribeNow:'Subscribe Now',
+		PersonalVersion:'Personal version',
+		HKDMonth:'HKD / Month',
+		HKDYear:'HKD / Year',
+	},
+	cancelRenewal:{
+		cancelling:'What is your reason for cancelling AiDA?',
+		subscription:'You’re about to cancel your subscription',
+		looseDate:'You will loose all your date',
+		looseCustomizations:'You will loose your settings and customizations',
+		DonWorry:'Don’t worry! The data you have in AiDA will be safe.',
+		Continue:'Continue to renew',
+		cancel:'Yes，cancel it',
+		subscriptionRenewal:'There are no subscription plans with automatic renewal.',
 	},
 	createSlogan:{
 		title:'Create Slogan',
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,7 +8,7 @@ import './assets/iconfont2/iconfont.css'
 import flexible from './tool/flexible.js'
 import 'ant-design-vue/dist/antd.css';
 import Antd from 'ant-design-vue';
-// import (reference) './assets/style/style.less';
+import './assets/style/style.less';
 import VueLazyload from "vue-lazyload";
 import i18n from './lang/index'
 import { getBrowserInfo, murmur } from './tool/util'
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,6 +23,18 @@ const routes: Array<RouteRecordRaw> = [
 		meta:{enter:'all',},
 		component: _import('LoginPage')
 	},
+	{
+		path: '/test',
+		name: 'test1',
+		meta:{enter:'all',},
+		component: _import('test')
+	},
+	{
+		path: '/register',
+		name: 'register',
+		meta:{enter:'all',},
+		component: _import('Register')
+	},
 	// {
 	// 	path: '/register',
 	// 	name: 'register',
@@ -244,6 +256,11 @@ const routes: Array<RouteRecordRaw> = [
 				name:'affiliateAudit',
 				meta:{enter:3,},
 				component: _import_component('Administrator/affiliate/affiliateAudit.vue'),
+			},{
+				path:'TransactionTable',
+				name:'TransactionTable',
+				meta:{enter:3,},
+				component: _import_component('Administrator/Transaction/TransactionTable.vue'),
 			},
 		]
 	},
@@ -345,7 +362,9 @@ window.addEventListener("beforeunload", (e) => {
 });
 var vuex_setUserDetail:any = localStorage.getItem("vuex_setUserDetail");
 if (vuex_setUserDetail) {
-	store.commit("setUserDetail", JSON.parse(vuex_setUserDetail));
+	if(JSON.parse(vuex_setUserDetail).email != '-------------'){
+		store.commit("setUserDetail", JSON.parse(vuex_setUserDetail));
+	}
 	// localStorage.removeItem("vuex_setUserDetail");
 }

--- a/src/store/adminPage/adminPage.ts
+++ b/src/store/adminPage/adminPage.ts
@@ -3,16 +3,35 @@ import {RootState} from '../index'

 interface DesignDetail{
    allUserList:any,
-   
+	city:any,
+	country:any,
 }

 const adminPage : Module<DesignDetail,RootState> = {
    state:{
        allUserList:[],
+        city:[],
+        country:[],
    },
    mutations:{
        setAllUserList(state,files){
            state.allUserList = files
+        },
+		setAllCitiesList(state,files){
+            state.city = []
+			files.city.forEach((item:any) => {
+				state.city.push({
+					label:item,
+					value:item,
+				})    
+			})
+			state.country = []
+			files.country.forEach((item:any) => {
+				state.country.push({
+					label:item,
+					value:item,
+				})    
+			})
        },
    },
    actions:{
--- a/src/store/homeStore/homeStore.ts
+++ b/src/store/homeStore/homeStore.ts
@@ -4,6 +4,7 @@ import {RootState} from '../index'
 interface DesignDetail{
    designCollectionList:any,
    likeDesignCollectionList:any,
+    deleteDesignCollectionList:any,
    userGroupId:any,
    designCollectionId:any,
    templateId:any,
@@ -16,6 +17,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
    state:{
        designCollectionList:[],
        likeDesignCollectionList:[],
+        deleteDesignCollectionList:[],
        userGroupId:'',
        designCollectionId:'',
        templateId:'',
@@ -32,6 +34,16 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
        },
        setLikeDesignCollectionList(state,data){
            state.likeDesignCollectionList = data
+        },
+		setDeleteDesignCollectionList(state,data){
+            let obj = state.designCollectionList.splice(data,1)
+			// state.deleteDesignCollectionList.unshift(...obj)
+        },
+		cancelDeleteDesignCollectionList(state,data){
+            let obj = state.deleteDesignCollectionList.splice(data,1)
+			console.log(obj);
+			
+			state.designCollectionList.unshift(...obj)
        },
        setSingleDesignCollectionList(state,data){
            state.designCollectionList[data.index] = data.design
@@ -73,6 +85,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
            state.designCollectionList=[]
            state.likeDesignCollectionList = []
            state.designCollectionId = ''
+			state.deleteDesignCollectionList = []
        },
        setTemplateData(state,data){
            state.templateId=data.id
--- a/src/store/uploadFile/uploadFile.ts
+++ b/src/store/uploadFile/uploadFile.ts
@@ -242,6 +242,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 			state.disposeMoodboard = []
 			// state.showSketchboard = []
 			state.chooseIsDesign.value = true
+			state.moodboardPosition = {}
        },
 		clearAllId(state){
            state.moodboard.forEach((v:any) => {
--- a/src/store/userHabit/userHabit.ts
+++ b/src/store/userHabit/userHabit.ts
@@ -22,6 +22,7 @@ interface UserHabit{
    messageSystem:any,
    sex:any,
 	userDetail:any,
+	bindEmail:any,
 }

 const userHabit : Module<UserHabit,RootState> = {
@@ -77,6 +78,14 @@ const userHabit : Module<UserHabit,RootState> = {
 			},
 			subscriptionType:null,
 			subscriptionId:null,
+			usernameModify:0,
+			occupation:'',//职业
+			country:'',//国家
+
+		},
+		bindEmail : {
+			isBindEmail:false,
+			type:''
 		}
    },
    mutations:{
@@ -174,17 +183,41 @@ const userHabit : Module<UserHabit,RootState> = {
 				subscriptionId:null,
 				//是否是affiliate用户
 				affiliate:false,
+				usernameModify:0,
+				occupation:'',//职业
+				country:'',//国家
+				
+			}
+			state.bindEmail = {
+				isBindEmail:false,
+				type:''
 			}
 		},
+		setIsBindEmail(state,data){
+			state.bindEmail.isBindEmail = data.isBindEmail
+			state.bindEmail.type = data.type
+
+		},
 		setUserDetail(state,data){
-			console.log(data);
 			
+			// if(!data.email && !state.userDetail.email)state.isBindEmail = true
 			// state.userDetail = data
-			state.userDetail.email = data.email?data.email:'------'
+			state.userDetail.email = data.email?data.email:'-------------'
 			state.userDetail.userName = data.userName//用户名
 			state.userDetail.userId = data.userId//用户id
 			state.userDetail.avatar = data.avatar//头像
+			state.userDetail.country = data.country//头像
+			state.userDetail.occupation = data.occupation//头像
+			state.userDetail.usernameModify = data.usernameModify//当月剩余修改次数
 			state.userDetail.isBeginner = data.isBeginner == 1 ? true : false;//是否完成新手指引
+			if(
+				(!data.email && state.userDetail.email == '-------------') || 
+				(!data.country && !state.userDetail.country) || 
+				(!data.occupation && !state.userDetail.occupation)
+			){
+				state.bindEmail.isBindEmail = true
+				state.bindEmail.type = ''
+			}
 			/**
 			 * 用于区分游客与系统用户
 			 * 0 ： 游客
@@ -203,7 +236,8 @@ const userHabit : Module<UserHabit,RootState> = {
 			state.userDetail.systemList = []
 			if(data.systemUser != 0)state.userDetail.systemList.push(1)
 			if(data.affiliate)state.userDetail.systemList.push(2)
-			let adminIdList = [88,6,46,31,73,83,87,4]
+			let adminIdList = [88,6,46,31,73,83,87,4,11482,11630,12201,12592]
+			// if(data.email == '' || data.email)state.userDetail.systemList.push(3)
 			if(adminIdList.indexOf(data.userId) > -1)state.userDetail.systemList.push(3)

 			state.userDetail.followeeCount = data.followeeCount//粉丝数量
@@ -221,13 +255,12 @@ const userHabit : Module<UserHabit,RootState> = {
 					state.userDetail.accountExtendList = obj//绑定相关内容
 				}
 			}
-			state.userDetail.email = data.email?data.email:'------'
-			let current = Math.floor(Date.now() / 1000);
+			let current = Math.floor(Date.now() );
 			let timeData
-			if(data.expireTime){
+			if(data.validEndTime){
 				timeData = {
-					isExpiration:current<data.expireTime,
-					text:new Date(parseInt(String(data.expireTime*1000))).toLocaleDateString()
+					isExpiration:current<data.validEndTime,
+					text:new Date(parseInt(String(data.validEndTime))).toLocaleDateString()
 				}
 			}else{
 				timeData = {
@@ -312,7 +345,9 @@ const userHabit : Module<UserHabit,RootState> = {
 			let getUserDetail = ()=>{
 				return new Promise((resolve,reject) => {
 			        Https.axiosPost(Https.httpUrls.accountDetail).then((rv: any) => {
-						context.commit('setUserDetail',rv)
+						if(rv){
+							context.commit('setUserDetail',rv)
+						}
 						resolve('')
 					}).catch(()=>{
 						reject('')
--- a/src/tool/canvasGeneralCopy.js
+++ b/src/tool/canvasGeneralCopy.js
@@ -7,7 +7,7 @@ import {
 	JScreateCheck,
 	JSSetTexture,
 	JSSetRemoveImage,
- } from "@/tool/canvasDrawing";
+ } from "@/tool/canvasDrawingCopy";
 import { getMousePosition } from "@/tool/mdEvent";
 import { file } from "jszip";
 class MyCanvas {
@@ -401,7 +401,8 @@ class MyCanvas {
 				}
 			});
 		}
-		if(str == 'dashed' || str == 'dashedPencil' || str != 'movePosition'){
+		if(str == 'dashed' || str == 'dashedPencil'){
+		// if(str == 'dashed' || str == 'dashedPencil' || str != 'movePosition'){
 			if(this.layer.selectLayer.group.custom.groupType == 'Grid')this.setGroupGrid('all')
 			this.clipPath = {
 				isImg:false,
@@ -428,8 +429,7 @@ class MyCanvas {
 				getActiveObject && 
 				getActiveObject.custom.dashed && 
 				this.layer.selectLayer.group.custom?.groupType == 'Grid' &&
-				this.operation == 'movePosition' &&
-				getActiveObject._objects.length == 1
+				this.operation == 'movePosition'
 			){
 				this.setclipPathImg()
 			}
@@ -474,7 +474,7 @@ class MyCanvas {
 			// }
 			this.dashed.state = false
 		}
-		let dashedGroup = MyCanvas.canvas.getObjects().filter(obj => obj.custom.dashed)[0];
+		let dashedGroup = MyCanvas.canvas.getObjects().filter(obj => obj?.custom?.dashed)[0];
 		if(this.dashed.state && (this.operation == 'dashed' || this.operation == 'dashedPencil') && dashedGroup)return
 		if(!this.dashed.state && (this.operation == 'dashed' || this.operation == 'dashedPencil') && !event.target?.custom?.dashed && dashedGroup){
 			MyCanvas.canvas.remove(dashedGroup)
@@ -629,7 +629,7 @@ class MyCanvas {
 				if(this.operation == 'dashed'){
 					await this.setDashed(this.createPatterning.current)
 				}else{
-					this.addLayer({target:this.createPatterning.current})
+					this.addLayer({target:this.createPatterning?.current})
 					this.setOperation('movePosition')
 				}
 				this.clearPatterning()//临时图形置为空并且添加撤回对象里面
@@ -640,8 +640,7 @@ class MyCanvas {
 	async setclipPathImg(){//裁剪图片
 		if(!this.clipPath.clipGroup)return
 		this.clipPath.isImg = true
-
-		let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.type != 'image')[0]
+		let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom)[0]
 		let imgBG = MyCanvas.canvas.getObjects().filter(obj => obj.custom.isSelectable && obj.type == 'rect')[0];
 		let position = {
 			left:this.clipPath.clipGroup?.left - (imgBG.left?imgBG.left:0),
@@ -684,6 +683,11 @@ class MyCanvas {
 		}
 		await obj.clone((cloned)=>{
 			let {width,height,left,top} = position
+			cloned.set({
+				custom:{
+					dashed:true
+				}
+			})
 			// cloned.set({left:cloned.strokeWidth/2,top:cloned.strokeWidth/2})
 			let group = new fabric.Group([cloned],{
 				left:left + cloned.strokeWidth/2,
@@ -693,71 +697,9 @@ class MyCanvas {
 					dashed:true
 				}
 			})
+			console.log(223);
 			MyCanvas.canvas.add(group)
 		})
-		
-		// this.addLayer({target:obj})//更新参数
-		// for (let index = 0; index < elements.length; index++) {
-		// 	const item = elements[index];
-		// 	await new Promise((resolve, reject) => {
-		// 		if(this.isAddToLayer(item)){
-		// 			item.clone((cloned)=>{
-		// 				this.setClone(item,cloned)
-		// 				if(item.custom?.layerId != -1){
-		// 					temporar.add(cloned)
-		// 				}
-		// 				resolve()
-		// 			})
-		// 		}
-		// 	})
-		// }
-		// const {left,height,top,width} = position
-		// let scale = 1.2/MyCanvas.canvas.getZoom()<1?1.2:1.2/MyCanvas.canvas.getZoom()
-		// let data = temporar.toDataURL({left,height:height+scale,top,width:width+scale});
-		// let img = await this.createImage({minioUrl:data})
-		// img.set({scaleX:1,scaleY:1})
-		// MyCanvas.canvas.forEachObject((item) =>{
-		// 	if(item.custom.isSelectable)return
-		// 	if(!this.isAddToLayer(item))return
-		// 	let imgScale = {
-		// 		pX:(item.scaleX?item.scaleX:1),
-		// 		pY:(item.scaleY?item.scaleY:1),
-		// 	}
-		// 	let scaleWH = item.width / (item.width * imgScale.pX)
-		// 	let rect = new fabric.Rect({
-		// 		left:left * scaleWH - item.left - item.width / 2,
-		// 		top:top * scaleWH - item.top - item.height / 2,
-		// 		width:width * scaleWH,
-		// 		height:height * scaleWH,
-		// 	})
-		// 	let group
-		// 	if(item.clipPath){
-		// 		item.clipPath.clone(cloned =>{	
-		// 			group = cloned
-		// 		})
-		// 	}else{
-		// 		group = new fabric.Group([],)
-		// 	}
-		// 	group.set({
-		// 		width:item.width * imgScale.pX,
-		// 		height:item.height * imgScale.pY,
-		// 		left: -item.width * imgScale.pX / 2,
-		// 		top: -item.height * imgScale.pY / 2,
-		// 		inverted:true,
-		// 	})
-		// 	group.add(rect)
-		// 	item.set({clipPath:group})
-		// 	MyCanvas.canvas.renderAll(); // 请求重绘画布
-		// })
-		// img.set({
-		// 	left:left,
-		// 	top:top,
-		// 	custom:{
-		// 		layerId:this.layer.selectLayer.id,
-		// 	},
-		// 	// hasControls:false,
-		// })
-		// MyCanvas.canvas.add(img)
 	}
 	async setGridOrObject(id,str){
 		this.layer.list.forEach((item) => {
@@ -897,7 +839,6 @@ class MyCanvas {
 	async setLiquefactionImgObj(liquefaction,data){
 		if(liquefaction.type == 'upImgFiles'){
 			await new Promise((resolve, reject) => {
-				console.log(liquefaction.img);
 				liquefaction.img.setSrc(data, (value)=>{
 					delete liquefaction.img.minioUrl
 					resolve()
@@ -1229,7 +1170,6 @@ class MyCanvas {
 	setMove(){
 		MyCanvas.canvas.isDrawingMode = false
 		MyCanvas.canvas.forEachObject((obj) =>{
-			console.log(obj,this.isSelectable(obj));
 			if(this.isSelectable(obj)){
 				obj.selectable = true
 			}else{
@@ -1494,7 +1434,8 @@ class MyCanvas {
 			height: MyCanvas.canvas.height
 		}))
 	}
-	addLayer(options){
+	async addLayer(options){
+		console.log(options);
 		if(this.createPatterning.state)return
 		this.clipPath.clipGroup = MyCanvas.canvas.getObjects().filter(obj => obj.custom?.dashed)?.[0];
 		if (options.target.type === 'group' && options.target.custom?.layerId) return;
@@ -1533,7 +1474,39 @@ class MyCanvas {
 			item.moveTo(index)
 		  })
 		
-		if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid')this.setGroupGrid('all')
+		if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid'){
+			await new Promise((resolve, reject) => {
+				console.log(this.clipPath.clipGroup);
+				let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom?.dashed)[0]
+				let clipPathLect = this.clipPath.clipGroup.left
+				let clipPathTop = this.clipPath.clipGroup.top
+
+				clipPathElement.clone((clipPathElementCloned)=>{
+					clipPathElementCloned.set({
+						// left:this.clipPath.clipGroup.left,
+						// top:this.clipPath.clipGroup.top,
+						left:clipPathLect,
+						top:clipPathTop,
+						absolutePositioned:true,
+					})
+					let optionLect = (options.target.left - this.clipPath.clipGroup.left) - this.clipPath.clipGroup.width/2
+					let optionTop = (options.target.top - this.clipPath.clipGroup.top) - this.clipPath.clipGroup.height/2
+					options.target.clone((cloned)=>{
+						cloned.set({
+							left:optionLect,
+							top:optionTop,
+							clipPath:clipPathElementCloned,
+						})
+						this.clipPath.clipGroup.add(cloned)
+						console.log(this.clipPath.clipGroup);
+						MyCanvas.canvas.remove(options.target)
+						resolve()
+					})
+				})
+			})
+			
+			// this.setGroupGrid('all')
+		}
 		
 		MyCanvas.canvas.renderAll();

@@ -1930,7 +1903,6 @@ class MyCanvas {
 		if(str == 'loadingCompleted'){
 			// this.reverseCanvasState.push(canvasAsJson);
 		}
-		console.log(JSON.parse(canvasAsJson))
 		this.normalCanvasState.push({canvasAsJson,layerList,layerId});
 		if (this.isLoadCanvas) {
 			this.reverseCanvasState = []
--- a/src/tool/country.js
+++ b/src/tool/country.js
@@ -1,4 +1,34 @@
 let country = [
+	{
+        label: "Commonly used",
+        value: "Commonly used",
+		disabled: true,
+    },
+	{
+        label: "Hong Kong, China",
+        value: "Hong Kong, China"
+    },
+	{
+        label: "Taiwan, China",
+        value: "Taiwan, China"
+    },
+	{
+        label: "China",
+        value: "China"
+    },
+	{
+        label: "South Korea",
+        value: "South Korea"
+    },
+	{
+        label: "American",
+        value: "American"
+    },
+	{
+        label: "All",
+        value: "All",
+		disabled: true,
+    },
    {
        label: "Albania",
        value: "Albania"
--- a/src/tool/flexible.js
+++ b/src/tool/flexible.js
@@ -10,8 +10,8 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
 		if(width/height>1.98) width = height * 1.98;
        width > maxWidth && (width = maxWidth);
        width < minWidth && (width = minWidth);
-        var rem = width * 10 / designWidth;
-        // var rem = Math.round(width * 10 / designWidth);
+        // var rem = width * 10 / designWidth;
+        var rem = Math.round(width * 10 / designWidth);
 		docEl.style.fontSize = rem+'px'
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }
--- a/src/tool/https.js
+++ b/src/tool/https.js
@@ -36,7 +36,7 @@ axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
 const CancelToken = axios.CancelToken;
 const source = CancelToken.source();
 // console.log(process.env.VUE_APP_BASE_URL);
-const filterHttpsUrl = ['/api/portfolio/page','/api/portfolio/detail']
+const filterHttpsUrl = ['/api/portfolio/page','/api/portfolio/detail','/api/account/preLogin']
 //POST传参序列化(添加请求拦截器)
 axios.interceptors.request.use((config) => {
    //在发送请求之前做某件事
@@ -130,6 +130,8 @@ export const Https = {
        getUserLanguage:`/api/account/getUserLanguage`, //获取当前用户语言
        changeUserLanguage:`/api/account/changeUserLanguage`, //切换用户当前语言
        uploadAvatar:`/api/account/uploadAvatar`, //修改头像
+        editUserName:`/api/account/editUserName`, //修改用户名
+        updateUserInfo:`/api/account/updateUserInfo`, //修改国家职业
        accountDetail:`/api/account/getAccountDetail`, //用户详细信息

        trialUserLogout:`/account/trialUserLogout`, //试用用户退出登录接口
@@ -170,6 +172,7 @@ export const Https = {
        reDesignCollection:`/api/design/reDesignCollection`,//重新设计 Conllection
        countDesignProcess:'/api/design/countDesignProcess', //统计design进度
        getDesignResult:'/api/design/getDesignResult', //查询design结果
+        designSort:`/api/design/sort`, //design排序

        designProcess:`/api/design/designProcess`, //统计design进度
        designGetModel:`/api/design/getModel`, //导出获取模特链接
@@ -258,7 +261,10 @@ export const Https = {
 		//管理员接口
 		//查询所有试用用户
 		inquiryGetTrial:`/api/inquiry/getTrial`,//查询所有试用用户
+		getCities:`/api/inquiry/getCities`,//获取所有付款订单使用的国家
 		getUserInfo:`/api/inquiry/getUserInfo`,//查询所有用户
+		queryTransaction:`/api/inquiry/queryTransaction`,//查询交易记录
+		queryTransactionDownload:`/api/inquiry/queryTransaction/download`,//导出交易记录
 		//查询某个时间内design点击次数
 		getDesignStatistic:`/api/inquiry/getDesignStatistic`,//拒绝审批
 		getAllQuestionnaire:`/api/inquiry/getAllQuestionnaire`,//拒绝审批
--- a/src/tool/mdEvent.js
+++ b/src/tool/mdEvent.js
@@ -1,5 +1,6 @@
 const getMousePosition = (e,bor,dom) => {
 	e.stopPropagation()
+	e.preventDefault();
 	if(bor){
 		const touch = e.changedTouches[0];
 		event = {
--- a/src/views/Administrator.vue
+++ b/src/views/Administrator.vue
@@ -214,11 +214,34 @@ export default defineComponent({
 				// },
 			],
 		},{
-			name:'Trial Affiliate',
+			name:'Approval Affiliate',
 			icon:'usetime',
 			route:'/administrator/affiliateAudit',
 			key:'sub10',
 			isShow:true,
+		},{
+			name:'Transaction',
+			icon:'usetime',
+			expandIcon:'icon-xiala',
+			key:'sub11',
+			isShow:true,
+			children: [
+				{
+					name:'Transaction Record',
+					route:'/administrator/TransactionTable',
+					icon:'',
+					key:'sub11-1',
+					isShow:true,
+				},
+				// {
+				// 	code:'ROLE_MANAGER',
+				// 	name:'Access Permission',
+				// 	route:'/home/excil2',
+				// 	icon:'',
+				// 	key:'/home/excil33',
+				// 	isShow:true,
+				// },
+			],
 		}],
 		openKeys: [],
 		selectedKeys: ['sub1'],
@@ -263,6 +286,11 @@ export default defineComponent({
 					store.commit('setAllUserList',rv);
 				}
 			})
+			Https.axiosGet(Https.httpUrls.getCities,).then((rv: any) => {
+				if (rv) {
+					store.commit('setAllCitiesList',rv);
+				}
+			})
 			let allCountry = country
 			sessionStorage.setItem('allCountry',JSON.stringify(allCountry));
 			// state.nowPageName = state.rootSubmenuKeys[0].name
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -92,7 +92,8 @@
 					<!-- <i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i> -->
 					<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
                </div>
-				<div class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">Subscribe now</div>
+				<div v-if="userDetail.systemUser == 0 || userDetail.systemUser == 3" class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">{{$t('Header.SubscribeNow')}}</div>
+				<div v-else style="width: 30rem;"></div>
            </div>
 			<navRouter :routerList="navRouterList"></navRouter>
 			<div class="homeMain_right">
@@ -127,7 +128,7 @@
 				</keep-alive>
 				<component :key="$route.name" :is="Component"  v-if="!$route.meta.keepAlive"/>
 			</router-view>  -->
-			<router-view @setTask = "setTask" :getLangIsShowMark="getLangIsShowMark">
+			<router-view @setTask="setTask" :getLangIsShowMark="getLangIsShowMark">
 			</router-view>
 		</div>
 		<RobotAssist></RobotAssist>
@@ -208,7 +209,6 @@ export default defineComponent({

 		let newPosted = ref(null)

-		let bindEmail = ref(null)
 		let getUnreadCount = ()=>{
 			Https.axiosGet(Https.httpUrls.getUnreadCount).then((rv)=>{
 				if(rv){
@@ -311,7 +311,6 @@ export default defineComponent({
 			messageType,
 			...toRefs(stateList),
 			newPosted,
-			bindEmail,
 			openNewPosted,
 			changeLanguage,
 			closeShowOperateContent,
@@ -321,8 +320,6 @@ export default defineComponent({
 	},
    data() {
        return {
-            bindEmailVisible: false,
-            bindEmailStep: 1,
            email: "",
            emailCode: ["", "", "", "", "", ""], //邮箱验证码
            time: 60, //60秒倒计时
@@ -345,16 +342,6 @@ export default defineComponent({
 			],
        };
    },
-	watch: {
-		'userDetail.email':{
-			handler(newVal, oldVal){
-				nextTick(()=>{
-					if(newVal == '-------------')this.setBindEmail()//如果没有绑定邮箱就弹窗
-				})
-			},
-			immediate: true
-		},
-	},
 	directives:{
 		moveOpenDetal:{
 			mounted (el,binding) {
@@ -433,9 +420,6 @@ export default defineComponent({
 			this.openTask(data)
 		},
       
-		setBindEmail(){
-			this.bindEmail.init()
-		},
        turnToPage(name) {
            let noRefresh = name === "home" ? true : false;
            this.$router.push({ name: name, params: { noRefresh: noRefresh } });
@@ -473,9 +457,9 @@ export default defineComponent({
 		},
 		//教程
 		getTutorial(){
-			let url = 'https://code-create.com.hk/wp-content/uploads/2024/10/aida_3.0-Manual-10_21-CN.pdf'
+			let url = 'https://code-create.com.hk/wp-content/uploads/2024/12/aida_3.0-Manual-10_21-CN.pdf'
 			if(this.locale == 'ENGLISH'){
-				url = 'https://code-create.com.hk/wp-content/uploads/2024/10/aida_3.0-Manual-10_21-EN.pdf'
+				url = 'https://code-create.com.hk/wp-content/uploads/2024/12/aida_3.0-Manual-10_21-EN.pdf'
 				showViewVideo({url:'https://code-create.com.hk/wp-content/uploads/2024/10/AiDA-demo-video_10_21_EN.mp4'})
 			}else{
 				showViewVideo({url:'https://code-create.com.hk/wp-content/uploads/2024/10/AiDA-demo-video_10_21_CN.mp4'})
@@ -626,11 +610,11 @@ export default defineComponent({
 	flex-shrink: 0;
    display: flex;
 	// padding: 0 30px;
-	padding: 0 6rem;
+	padding: 2rem 6rem;
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 0.2);
-    // border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
+    border-bottom: 1px solid #e1e1e1;
    position: relative;
    align-items: center;
 	z-index: 9;
@@ -890,6 +874,9 @@ export default defineComponent({
 					// height: 3.2rem;
 					div{
 						height: 100%;
+						display: flex;
+						align-items: center;
+						justify-content: center;
 					}
 				}
 			}
--- a/src/views/HomeRecommend.vue
+++ b/src/views/HomeRecommend.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="homeRecommend_max" ref="homeRecommendMax">
+    <div class="homeRecommend_max">
        <header class="homeRecommend_heade">
            <div class="homeRecommend_right_content">
                <div class="homeRecommend_user_content">
@@ -8,26 +8,9 @@
 						@click="turnToNewPage('https://www.aidlab.hk/en/')"
 						src="@/assets/images/loginPage/aida_logo.png"
 					/>
-					<div
-						class="login_footer_item_text"
-						@click="turnToWindow(
-							'https://code-create.com.hk/aida-terms-and-conditions/'
-						)"
-					>
-						Terms&Conditions
-					</div>
-					<div
-						class="login_footer_item_text"
-						@click="turnToWindow(
-							'https://code-create.com.hk/aida-subscription-agreement/'
-						)"
-					>
-						Privacy Policy
-					</div>
                </div>
            </div>
 			<div class="homeRecommend_right">
-				<a class="gallery_btn" v-if="userDetail.systemUser == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
 				<div class="gallery_btn" v-if="userDetail.systemUser == 1 && !isMoblie" @click="goHome">Home</div>
 				<div class="gallery_btn white" v-if="userDetail.systemUser != -1" @click="logout">log off</div>
 			</div>
@@ -36,7 +19,6 @@
 				<div class="gallery_btn white" @click="setRegister">Sign up</div>
 			</div>
        </header>
-		<signUp ref="signUp" @close="signUpClose"></signUp>
 		<div class="homeRecommend_content_body">
 			<div class="homeRecommend_content_body_recommend">
 				<img src="@/assets/images/homePage/home-bg.png">
@@ -45,12 +27,6 @@
 						<h1>AiDA</h1>
 						<h3>bloom your creativity</h3>
 					</div>
-					<div class="content_body_recommend_center_btn">
-						<div @click="setRegister" class="gallery_btn white" style="border: none; margin-right: 2rem;" >SUBSCRIBE NOW</div>
-						<div @click="setRegister" class="gallery_btn white" style="border: none;" >START TRIAL</div>
-						<!-- <a class="gallery_btn white" style="border: none;" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
-						<a class="gallery_btn white" style="border: none;" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a> -->
-					</div>
 				</div>
 			</div>
 			<Works :isScroll="false"></Works>
@@ -77,21 +53,17 @@ import { useI18n } from "vue-i18n";
 import { useRouter } from 'vue-router';
 import { gsap, TweenMax } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
-import signUp from '@/component/mainPage/signUp/index.vue'
 export default defineComponent({
    components: {
        VerificationCodeInput,
 		Habit,
 		Works,
-		signUp,
    },
 	setup(){
        const store = useStore();
 		const router = useRouter();
 		let registerModel = ref()
 		let data = reactive({
-			homeRecommendMax:null,
-			signUp:null
 		})
 		let isMoblie = ref(false)
 		let userDetail = computed(()=>{
@@ -100,13 +72,6 @@ export default defineComponent({
 		let setLogin = ()=>{
 			router.push("/login");
 		}
-		let setRegister = () =>{
-			data.signUp.init()
-			data.homeRecommendMax.classList.add('openSignUp')
-		}
-		let signUpClose = ()=>{
-			data.homeRecommendMax.classList.remove('openSignUp')
-		}
 		let setAdminUp = ()=>{
 			let scrollDom = document.querySelector('.homeRecommend_content_body')
 			scrollDom.scrollTo({
@@ -140,7 +105,15 @@ export default defineComponent({
 			},500)
 			
 		}
+		const setRegister = ()=>{
+			router.push('/register');
+		}
 		onMounted(()=>{
+			if(window.innerWidth < 768){
+				isMoblie.value = true
+			}else{
+				isMoblie.value = false
+			} 
 			window.addEventListener('resize',updataIsMoblie)
 		})
 		onBeforeUnmount(() => {
@@ -151,12 +124,11 @@ export default defineComponent({
 			userDetail,
 			setLogin,
 			registerModel,
-			setRegister,
-			signUpClose,
 			setAdminUp,
 			logout,
 			goHome,
 			isMoblie,
+			setRegister,
 		}
 	},
    data() {
@@ -222,21 +194,6 @@ export default defineComponent({
 	.homeRecommend_content_body{
 		flex: 1;
 	}
-	&.openSignUp{
-		.homeRecommend_heade{
-			position: relative;
-			background: #fff !important;
-			.login_footer_item_text{
-				display: block;
-			}
-		}
-		.homeRecommend_content_body{
-			display: none;
-		}
-		.homeRecommend_content_adminTop{
-			display: none;
-		}
-	}
 }
 .homeRecommend_heade {
    display: flex;
@@ -354,11 +311,7 @@ export default defineComponent({
 					font-size: 6rem;
 				}
 			}
-			.content_body_recommend_center_btn{
-				a:nth-child(1){
-					margin-right: 3rem;
-				}
-			}
+			
 		}
 	}
 }
--- a/src/views/HomeView/Events.vue
+++ b/src/views/HomeView/Events.vue
@@ -1,19 +1,19 @@
 <template>
    <div class="events_page" :class="{active:isScroll}">
 		<div class="modal_title_text modal_search">
-			<div v-show="isScroll || userDetail.systemUser>-1" v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
+			<div v-show="isScroll || userDetail.systemUser>-1" v-for="item in worksType" :key="item" class="gallery_btn white" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
 				{{ item.name }}
 			</div>
-			<div v-show="!isScroll && userDetail.systemUser == -1" class="modal_title_text_assistant active">All</div>
+			<div v-show="!isScroll && userDetail.systemUser == -1" class="gallery_btn active">All</div>
 		</div>
        <div class="page_content" >
 			<div class="page_content_itemBox">
-				<div class="page_content_item" v-for="item in eventsList" :key="item.id"  v-fadeIn="isScroll">
-					<div class="page_content_item_img" @click="openEventsDetail(item)">
-						<img :src="item.imgUrl" alt="">
+				<div class="page_content_item" v-for="item,index in eventsList" :key="eventsList[eventsList.length-1-index].id"  v-fadeIn="isScroll">
+					<div class="page_content_item_img" @click="openEventsDetail(eventsList[eventsList.length-1-index])">
+						<img :src="eventsList[eventsList.length-1-index].imgUrl" alt="">
 					</div>
-					<div class="page_content_item_time">{{ item.time }}</div>
-					<div class="page_content_item_title" @click="openEventsDetail(item)">{{ item.title }}</div>
+					<div class="page_content_item_time">{{ eventsList[eventsList.length-1-index].time }}</div>
+					<div class="page_content_item_title" @click="openEventsDetail(eventsList[eventsList.length-1-index])">{{ eventsList[eventsList.length-1-index].title }}</div>
 				</div>
 			</div>
 			<div class="page_loading_box" v-show="!isNoData">
@@ -218,20 +218,13 @@ export default defineComponent({
 		display: flex;
 		margin: 0;
 		padding-bottom: 2.4rem;
-		.modal_title_text_assistant{
-			padding: 1rem 3rem;
-			border-radius: 2rem;
-			background: #eee;
+		.gallery_btn{
 			margin-right: 1rem;
-			cursor: pointer;
+			min-width: 12rem;
 		}
-		.modal_title_text_assistant:last-child{
+		.gallery_btn:last-child{
 			margin-right: 0;
 		}
-		.active{
-			background: #39215b;
-			color: #fff;
-		}
 		.modal_search_menu{
 			margin-left: auto;
 			z-index: 10;
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
--- a/src/views/HomeView/Works.vue
+++ b/src/views/HomeView/Works.vue
@@ -4,11 +4,11 @@
 			<div>Works</div>
 		</div> -->
 		<div class="modal_title_text modal_search" v-if="!otherUsers">
-			<div v-show="isScroll" v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
+			<div v-show="isScroll" v-for="item in worksType" :key="item" class="gallery_btn white" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
 				{{ item.name }}
 			</div>
-			<div v-show="!isScroll" class="modal_title_text_assistant" :class="{active:'all' == worksSelect}" @click="setWorksSelect({value:'all'})">All</div>
-			<div v-show="!isScroll" class="modal_title_text_assistant" :class="{active:'RCAworkshop_2024' == worksSelect}" @click="setWorksSelect({value:'RCAworkshop_2024'})">AiDA Workshop 2024</div>
+			<div v-show="!isScroll" class="gallery_btn white" :class="{active:'all' == worksSelect}" @click="setWorksSelect({value:'all'})">All</div>
+			<div v-show="!isScroll" class="gallery_btn white" :class="{active:'RCAworkshop_2024' == worksSelect}" @click="setWorksSelect({value:'RCAworkshop_2024'})">AiDA Workshop 2024</div>
 			<!-- <div class="modal_search_menu">
 				<generalMenu :dataList="menuList" @setprintModel="setprintModel" :item="selectMenu"></generalMenu>
 			</div> -->
@@ -73,14 +73,6 @@ export default defineComponent({
 					name: useI18n().t('works.all'),
 					value: 'all'
 				},
-				// {
-				// 	name: 'generate',
-				// 	value: 'generate'
-				// },
-				// {
-				// 	name: 'freehand sketching',
-				// 	value: 'freehandSketching'
-				// },
 				{
 					name: useI18n().t('works.FavoriteWorks'),
 					value: 'favoriteWorks'
@@ -89,9 +81,13 @@ export default defineComponent({
 					name: useI18n().t('works.MyWorks'),
 					value: 'myWorks'
 				},
+				// {
+				// 	name: useI18n().t('works.RCAworkshop_2024'),
+				// 	value: 'RCAworkshop_2024'
+				// },
 				{
-					name: useI18n().t('works.RCAworkshop_2024'),
-					value: 'RCAworkshop_2024'
+					name: useI18n().t('works.NewYear_2025'),
+					value: 'NewYear_2025'
 				},
 			],
 			worksList: [
@@ -146,6 +142,8 @@ export default defineComponent({
 				filter.getListDate.getMyPortfolio = 1
 			}else if(val.value == 'RCAworkshop_2024'){
 				filter.getListDate.tagId = 1
+			}else if(val.value == 'NewYear_2025'){
+				filter.getListDate.tagId = 3
 			}
 			
 			filter.getListDate.page = 0
@@ -291,20 +289,13 @@ export default defineComponent({
 		display: flex;
 		margin: 0;
 		padding-bottom: 2.4rem;
-		.modal_title_text_assistant{
-			padding: 1rem 3rem;
-			border-radius: 2rem;
-			background: #eee;
-			margin-right: 1rem;
-			cursor: pointer;
+		.gallery_btn{
+			min-width: 12rem;
+			margin-right: 2rem;
 		}
-		.modal_title_text_assistant:last-child{
+		.gallery_btn:last-child{
 			margin-right: 0;
 		}
-		.active{
-			background: #39215b;
-			color: #fff;
-		}
 		.modal_search_menu{
 			margin-left: auto;
 			z-index: 10;
@@ -318,6 +309,7 @@ export default defineComponent({
 		min-height: 80%;
 		height: auto;
 		background: #f7f8fa;
+		border-radius: 3rem;
 		@media (max-width: 768px) {
 			background: #fff;
 		}
--- a/src/views/HomeView/history.vue
+++ b/src/views/HomeView/history.vue
@@ -1,10 +1,6 @@
 <template>
     <div class="history_page">
        <div class="page_content">
-            <img
-                class="page_content_bg"
-                src="@/assets/images/homePage/bg.png"
-            />
            <div class="page_content_body">
                <!-- <HeaderComponent></HeaderComponent> -->
                <div class="history_page_body">
@@ -14,14 +10,18 @@
                            <input class="search_input" :placeholder="$t('HistoryPage.inputContent1')" v-model="searchCollectionName"  @keydown.enter="searchHistoryList()">
                            <div class="search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
                        </div> -->
-						<div class="content_search_block">
-							<a-range-picker class="range_picker" v-model:value="rangePickerValue" :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]" valueFormat="YYYY-MM-DD">
-                            <template #suffixIcon>
-                                <span class="icon iconfont range_picker_icon icon-rili"></span>
-                            </template>
-                        </a-range-picker>
-							<input class="search_input" :placeholder="$t('LibraryPage.inputContent1')" v-model="searchCollectionName"  @keydown.enter="searchHistoryList()">
-							<div class="search_cascader">
+						<div class="content_search_block generalModel_state">
+							<div class="generalModel_state_item">
+								<a-range-picker class="range_picker" v-model:value="rangePickerValue" :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]" valueFormat="YYYY-MM-DD">
+									<template #suffixIcon>
+										<span class="icon iconfont range_picker_icon icon-rili"></span>
+									</template>
+								</a-range-picker>
+							</div>
+							<div class="generalModel_state_item">
+								<input class="search_input" :placeholder="$t('LibraryPage.inputContent1')" v-model="searchCollectionName"  @keydown.enter="searchHistoryList()">
+							</div>
+							<div class="generalModel_state_item">
 								<el-cascader 
 									:options="options" 
 									filterable
@@ -49,7 +49,8 @@
 								<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
 							</div>
 							<!-- <div class="search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div> -->
-							<div class="generage_btn search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
+							<div class="gallery_btn" style="padding: 2rem; line-height: 1;" @click="searchHistoryList('')"><span class="icon iconfont icon-sousuo"></span></div>
+
 						</div>
                    </div>

@@ -404,13 +405,6 @@ export default defineComponent({
 	position: relative;
    .page_content {
        position: relative;
-
-        .page_content_bg {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-        }
-
        .page_content_body {
            position: absolute;
            width: 100%;
@@ -420,7 +414,7 @@ export default defineComponent({
            .history_page_body{
                width: 100%;
                height: 100%;
-                padding: 4rem 2.5rem 4rem;
+                padding: 3rem 0;
                box-sizing: border-box;

                .history_header{
@@ -435,19 +429,7 @@ export default defineComponent({
                    display: flex;
                    align-items: center;

-                    .range_picker{
-                        width: 36rem;
-                        height: 3rem;
-						margin-right: 2rem;
-						
-                        .ant-picker-input > input{
-                            font-size: 1.6rem;
-                        }
-
-                        .range_picker_icon{
-                            font-size: 2.2rem;
-                        }
-                    }
+                    
 					.ant-picker:hover, .ant-picker-focused{
 						border-color: #d5d8df;
 					}
@@ -455,28 +437,7 @@ export default defineComponent({
 						display: flex;
 						align-items: center;
 						width: 140rem; 
-						.search_input{
-							height: 3rem;
-							border-radius: 0.5rem;
-							width: 20rem;
-							border: 1px solid rgba(0, 0, 0, 0.15);
-							padding-left: 1.5rem;
-							border: 0.2rem solid #d5d8df;
-							font-size: 1.2rem;
-							font-weight: 400;
-							margin-right: 2rem;
-							&::placeholder {
-								color: #C2C2C2;
-							}
-						}
-						.search_cascader{
-							// width: 53%;
-							width: 38rem;
-							display: flex;
-							position: relative;
-							
-							
-						}
+					
 						.search_icon_block{
 							width: 5.2rem;
 							height: 2.8rem;
@@ -493,10 +454,13 @@ export default defineComponent({
 							}
 						}
 						.intersection{
-							margin-left: 3rem;
 							cursor: pointer;
+							margin-right: 3rem;
+							>div{
+								font-size: 3rem;
+								font-weight: 900;
+							}
 						}
-						
 					}
                }

@@ -519,24 +483,22 @@ export default defineComponent({
                        &::-webkit-scrollbar { width: 0 !important }

                    }
-
+					
                    .ant-table-thead > tr > th{
                        background: #FFFFFF;
                    }
-
+					.ant-table-tbody > tr:hover{
+						background: #ededed;
+					}
                    .ant-table-tbody > tr > td{
                        border: none;
                        background: transparent;

                        
                    }
-
-                     .ant-table-tbody > tr{
-
-                         &:hover > td{
-                            background: #FFFFFF;
-                        }
-                     }
+					.ant-table-pagination-right{
+						justify-content: center;
+					}

                     .ant-table-pagination-right{
                         padding-right: 3.5rem;
@@ -552,7 +514,7 @@ export default defineComponent({
                            font-size: 1.4rem;
                            font-family: Roboto;
                            font-weight: 400;
-                            color: #343579;
+                            color: #007EE5;
                            cursor: pointer;
                        }
                    }
--- a/src/views/HomeView/library.vue
+++ b/src/views/HomeView/library.vue
@@ -36,68 +36,80 @@
 							   <div v-show="selectCode != 'Models' &&  selectCode != 'DesignElements'" class='header_operate_item pointer'  :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
                            </div>

-                            <div class="librart_headr_right">
-                                <div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'Models'|| selectCode == 'DesignElements'|| selectCode == 'Printboard'" >
-									<a-select
-                                        ref="select"
-										v-show="selectCode != 'DesignElements' && selectCode != 'Printboard'"
-                                        v-model:value="sex"
-                                        :options="sexList"
-										:fieldNames="{ label: 'name', value: 'value' }"
-                                        @change="sexChange"
-                                    >
-                                        <template #suffixIcon
-                                            ><span
-                                                class="icon iconfont icon-xiala"
-                                                style="color: #343579"
-                                            ></span
-                                        ></template>
-                                    </a-select>
-                                    <a-select
-                                        ref="select"
-										v-show="designTypeList[selectCode]?.[0]?.value && selectCode != 'Sketchboard'"
-                                        v-model:value="designType"
-                                        :options="designTypeList[selectCode]"
-                                        @change="handleChange"
-										:fieldNames="{ label: 'name', value: 'value' }"
-                                    >
-                                        <template #suffixIcon
-                                            ><span
-                                                class="icon iconfont icon-xiala"
-                                                style="color: #343579"
-                                            ></span
-                                        ></template>
-                                    </a-select>
-									<a-select
-                                        ref="select"
-										v-show="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
-                                        v-model:value="designType"
-                                        :options="designTypeList[selectCode]"
-                                        @change="handleChange"
-										:fieldNames="{ label: 'name', value: 'value' }"
-                                    >
-                                        <template #suffixIcon
-                                            ><span
-                                                class="icon iconfont icon-xiala"
-                                                style="color: #343579"
-                                            ></span
-                                        ></template>
-                                    </a-select>
-									<a-select
-                                        ref="select"
-										v-show="SketchGenerateTypeList?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate == 'Generate'"
-                                        v-model:value="SketchGenerateType"
-                                        :options="SketchGenerateTypeList"
-                                        @change="setSketchGenerateType"
-										:fieldNames="{ label: 'name', value: 'value' }"
-                                    >
-                                        <template #suffixIcon
-                                            ><span
-                                                class="icon iconfont icon-xiala"
-                                                style="color: #343579"
-                                            ></span
-                                        ></template>
-                                    </a-select>
+                            <div class="librart_headr_right ">
+                                <div class="generalModel_state " v-show="selectCode == 'Sketchboard' || selectCode == 'Models'|| selectCode == 'DesignElements'|| selectCode == 'Printboard'" >
+									<div class="generalModel_state_item smail" v-if="selectCode != 'DesignElements' && selectCode != 'Printboard'">
+										<a-select
+											ref="select"
+											v-model:value="sex"
+											:options="sexList"
+											size="large"
+											:fieldNames="{ label: 'name', value: 'value' }"
+											style="width:20rem"
+											@change="sexChange"
+										>
+											<template #suffixIcon
+												><span
+													class="icon iconfont icon-xiala"
+													style="color: #343579"
+												></span
+											></template>
+										</a-select>
+									</div>
+									<div class="generalModel_state_item smail" v-if="designTypeList[selectCode]?.[0]?.value && selectCode != 'Sketchboard'">
+										<a-select
+											ref="select"
+											v-model:value="designType"
+											:options="designTypeList[selectCode]"
+											@change="handleChange"
+											style="width:20rem"
+											size="large"
+											:fieldNames="{ label: 'name', value: 'value' }"
+										>
+											<template #suffixIcon
+												><span
+													class="icon iconfont icon-xiala"
+													style="color: #343579"
+												></span
+											></template>
+										</a-select>
+									</div>
+									<div class="generalModel_state_item smail" v-if="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'">
+										<a-select
+											ref="select"
+											v-model:value="designType"
+											:options="designTypeList[selectCode]"
+											@change="handleChange"
+											style="width:20rem"
+											size="large"
+											:fieldNames="{ label: 'name', value: 'value' }"
+										>
+											<template #suffixIcon
+												><span
+													class="icon iconfont icon-xiala"
+													style="color: #343579"
+												></span
+											></template>
+										</a-select>
+									</div>
+									<div class="generalModel_state_item smail" v-if="SketchGenerateTypeList?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate == 'Generate'">
+										<a-select
+											ref="select"
+											v-model:value="SketchGenerateType"
+											:options="SketchGenerateTypeList"
+											@change="setSketchGenerateType"
+											style="width:20rem"
+											size="large"
+											:fieldNames="{ label: 'name', value: 'value' }"
+										>
+											<template #suffixIcon
+												><span
+													class="icon iconfont icon-xiala"
+													style="color: #343579"
+												></span
+											></template>
+										</a-select>
+									</div>
                                </div>
                            </div>
                        </div>
@@ -128,13 +140,16 @@
 											<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">{{ $t('LibraryPage.Delete') }}</div>
 											<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal(selectImgList,'batch')">{{ $t('LibraryPage.Rename') }}</div>
 										</div>
-										<div class="content_search_block">
-											<input 
-											class="search_input" 
-											:placeholder="$t('LibraryPage.inputContent1')" 
-											v-model="searchPictureName"  
-											@keydown.enter="getLibraryList('')">
-											<div class="search_cascader">
+										<div class="content_search_block generalModel_state">
+											<div class="generalModel_state_item">
+												<input 
+												class="search_input" 
+												style="background-color: #fff;"
+												:placeholder="$t('LibraryPage.inputContent1')" 
+												v-model="searchPictureName"  
+												@keydown.enter="getLibraryList('')">
+											</div>
+											<div class="generalModel_state_item search_cascader">
 												<el-cascader 
 													:options="options" 
 													filterable
@@ -162,13 +177,14 @@
 												<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
 											</div>
 											<!-- <div class="search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div> -->
-											<div class="generage_btn search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
+											<div class="gallery_btn" style="padding: 2rem; line-height: 1;" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
+										</div>
+										<div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
+											<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
+											<div>{{ $t('LibraryPage.all') }}</div>
 										</div>
 									</div>
-                                    <div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
-                                        <div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
-                                        <div>{{ $t('LibraryPage.all') }}</div>
-                                    </div>
+                                    
                                </div>

                                <div class="content_body_table scroll_style">
@@ -185,6 +201,9 @@
                                                    </div>
                                                    <div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteSinglePic(img,index)">
                                                        <span class="icon iconfont icon-shanchu operate_icon"></span>
+                                                    </div>
+													<div class="img_operate_block">
+														<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index,imgList,'library')"></i>
                                                    </div>
                                                </div>
                                            </div>
@@ -210,7 +229,6 @@
                            </div>
 							<div class="right_content_body" v-show="uploadGenerate !='Upload'">
 								<div class="content_body_header content_body_header_generate">
-									<div class="content_body_header_right"></div>
 									<!-- <div v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" class="printModel">
 										<div @click.stop="PrintModel">{{ printModel.name }}</div>
 										<ul v-show="printModel.optype">
@@ -219,11 +237,11 @@
 											<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
 										</ul>
 									</div> -->
-									<generalMenu v-if="printModelList" class="printModel" v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
+									<generalMenu v-if="printModelList" class="printModel" v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel" :style_="{padding:'2rem'}"></generalMenu>
 									<div class="input_border">
 										<div class="input_box" :class="{active:inputShow}">
 											<div class="input_box_btnBox"  v-if="scene?.value != 'extract'">
-												<div class="upload_item" v-show="selectCode !== 'Moodboard' && ((selectCode == 'Printboard' && scene?.value == 'Pattern') || (selectCode == 'Printboard' && scene?.value == 'Slogan') || selectCode == 'Sketchboard')">
+												<div class="upload_item" v-show="selectGenerateList.length != 0 && selectCode !== 'Moodboard' && ((selectCode == 'Printboard' && scene?.value == 'Pattern') || (selectCode == 'Printboard' && scene?.value == 'Slogan') || selectCode == 'Sketchboard')">
 													<div
 														class="upload_file_item"
 														v-for="(file, index) in selectGenerateList"
@@ -253,7 +271,6 @@
 													<input class="search_seed" max="9999" v-show="selectCode == 'Printboard' && scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
 												</a-popover> -->
 												<input 
-													class="search_input " 
 													@input="ifMaximumLength" 
 													:maxlength='inputShow?0:9999' 
 													@keydown.enter="getgenerate"  
@@ -343,7 +360,7 @@
 												v-model="captionGeneration"
 											></textarea>
 											<div class="generage_btn_box" v-show="!isGenerate[selectCode]">
-												<div class="generage_btn started_btn">
+												<div class="generage_btn started_btn" style="padding: 2rem;">
 													
 													<div @click.stop="getgenerate">
 														<span v-if="
@@ -391,16 +408,14 @@
 													<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
                                                        <span class="icon iconfont icon-shanchu operate_icon"></span>
                                                    </div>
-                                                </div>
-												<div class="img_operate_content left"  :class="[driver__.driver?'hideEvents':'']">
 													<div class="img_operate_block">
-														<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
+														<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index,generateList[selectCode],'generate')"></i>
                                                    </div>
 													<div class="img_operate_block">
 														<i v-if="!img.like" class="fi fi-rr-heart operate_icon" @click.stop="likeFile(img,'like')"></i>
 														<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!img.like" @click.stop="likeFile(img,'noLike')"></i>
                                                    </div>
-												</div>
+                                                </div>
                                            </div>
 											<sketchCategory  v-show="selectCode == 'Sketchboard'" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
                                        </div>
@@ -422,6 +437,7 @@
        <ModelPlacementMobile ref="ModelPlacementMobile" @submitModelPlacement="getLibraryList"></ModelPlacementMobile>
 		<setLabel ref="setLabel"></setLabel>
 		<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
+		<UpgradePlan ref="UpgradePlan"></UpgradePlan>

        <!-- 蒙层 start-->
        <div class="mark_loading" v-show="isShowMark || getLangIsShowMark">
@@ -441,6 +457,7 @@ import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
 import setLabel from '@/component/LibraryPage/setLabel.vue';
 import ModelPlacementMobile from '@/component/LibraryPage/ModelPlacementMobile.vue';
 import searchLabel from '@/component/LibraryPage/searchLabel.vue';
+
 // import RobotAssist from "@/component/HomePage/RobotAssist.vue";
 import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -456,6 +473,7 @@ import { remove } from "jszip";
 import createSlogan from "@/component/HomePage/createSlogan.vue";
 import generalMenu from "@/component/HomePage/generalMenu.vue";
 import { id } from "element-plus/es/locale";
+import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
 export default defineComponent({
    components: {
        // HeaderComponent,
@@ -469,6 +487,7 @@ export default defineComponent({
 		sketchCategory,
 		createSlogan,
 		generalMenu,
+		UpgradePlan,
    },
 	props:{
 		getLangIsShowMark:{
@@ -810,6 +829,7 @@ export default defineComponent({
            },
            token: "",
 			isInputFocus:false,
+			deleteSelectManneuin:false,
        };
    },
 	watch:{
@@ -1120,25 +1140,48 @@ export default defineComponent({

        //确定删除图片 有data则是单个
        confirmDeletePic(data:any,index:any,nData:any){
-            let libraryIds = data ? [data.id] : this.selectImgList
-            let newData = {
-                libraryIds:libraryIds,
+			let libraryIds = data ? [data.id] : this.selectImgList
+			let newData = {
+				libraryIds:libraryIds,
 				deleteModelConfirm:this.selectCode == 'Models' ? data.deleteModelConfirm?data.deleteModelConfirm : 0:'',
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,  
-            }
+			}
 			if(nData)newData = nData
-             Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
-                (rv: any) => {
-                    if(data && data.id){
-                        this.imgList.splice(index, 1)
-                    }else{
-                        this.selectImgList = []
-                        this.getLibraryList('')
-                    }
-                }
-            ).catch((res)=>{
+			Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
+				(rv: any) => {
+					if(data && data.id){
+						this.imgList.splice(index, 1)
+					}else{
+						this.selectImgList = []
+						this.getLibraryList('')
+					}
+					if(!this.deleteSelectManneuin)return
+					let id = this.store.state.Workspace.workspace.id
+					Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
+						if (rv) {
+							if(rv.position == "Overall"){
+								rv.overallSingle = false
+							}else{
+								rv.overallSingle = true
+							}
+							if(rv.sexEnum.name == 'Female'){
+								rv.mannequinUrl = rv.femalePresignedUrl
+								rv.mannequinType = rv.mannequinFemaleType
+								rv.mannequinId = rv.mannequinFemaleId
+							}else if(rv.sexEnum.name == 'Male'){
+								rv.mannequinUrl = rv.malePresignedUrl
+								rv.mannequinType = rv.mannequinMaleType
+								rv.mannequinId = rv.mannequinMaleId
+							}
+							this.store.commit("setWorkspace", rv);
+							this.deleteSelectManneuin = false
+						}
+					})
+				}
+			).catch((res)=>{
 				if(this.selectCode == "Models" && res.errCode === 2){
 					let _this = this
+					this.deleteSelectManneuin = true
 					Modal.confirm({
 						title: res.errMsg,
 						icon: createVNode(ExclamationCircleOutlined),
@@ -1147,37 +1190,15 @@ export default defineComponent({
 						mask:false,
 						zIndex:99999,
 						centered:true,
-						onOk() {
+						onOk () {
 							newData.deleteModelConfirm = 1
-							let id = _this.store.state.Workspace.workspace.id
-							Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
-								if (rv) {
-									if(rv.position == "Overall"){
-										rv.overallSingle = false
-									}else{
-										rv.overallSingle = true
-									}
-									if(rv.sexEnum.name == 'Female'){
-										rv.mannequinUrl = rv.femalePresignedUrl
-										rv.mannequinType = rv.mannequinFemaleType
-										rv.mannequinId = rv.mannequinFemaleId
-									}else if(rv.sexEnum.name == 'Male'){
-										rv.mannequinUrl = rv.malePresignedUrl
-										rv.mannequinType = rv.mannequinMaleType
-										rv.mannequinId = rv.mannequinMaleId
-									}
-									
-									_this.store.commit("setWorkspace", rv);
-								}
-							})
 							_this.confirmDeletePic('',index,newData)
 						},
 						onCancel(){
-							
 						}
 					});
 				}
-            });
+			});
        },

        beforeUpload(file:any,fileList:any){
@@ -1293,7 +1314,6 @@ export default defineComponent({
            placementModal.showPlacementModal(data,this.sex)
        },
 		setTextareaShow(){
-			this.isTextarea = !this.isTextarea
 			this.isTextarea = !this.isTextarea
 			if(this.isTextarea){
 				document.addEventListener('click',this.setTextareaShow)
@@ -1522,14 +1542,14 @@ export default defineComponent({
 						}else if(selectCodeStr == 'Sketchboard'){
 							str = this.t('collectionModal.Sketchboard')
 						}
-						if(rv.leftUsageCount >= 1){
-							message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:str}));
-						}else if(rv.leftUsageCount == 0){
-							message.warning(this.t('Generate.jsContent9',{str:str}));
-							this.isGenerate[selectCodeStr] = false
-							// this.isShowMark = false
-							return
-						}
+						// if(rv.leftUsageCount >= 1){
+						// 	message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:str}));
+						// }else if(rv.leftUsageCount == 0){
+						// 	message.warning(this.t('Generate.jsContent9',{str:str}));
+						// 	this.isGenerate[selectCodeStr] = false
+						// 	// this.isShowMark = false
+						// 	return
+						// }
 					}
 					this.setGenerate(selectCodeStr,rv.uniqueId)
 					
@@ -1540,6 +1560,25 @@ export default defineComponent({
 				this.isGenerate[selectCodeStr] = false
 				clearInterval(this.remGenerateTime[selectCodeStr])
 				this.remGenerate[selectCodeStr] = false
+				if(res.errCode === 2){
+					let this_ = this
+					Modal.confirm({
+						title: res.errMsg,
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						zIndex:99999,
+						centered:true,
+						onOk() {
+							let UpgradePlan:any = this_.$refs.UpgradePlan
+							UpgradePlan.init()
+						},
+						onCancel(){
+							
+						}
+					});
+				}
            });
 		},
 		setGenerate(str:any,dataList:any){
@@ -1671,10 +1710,11 @@ export default defineComponent({
 			

 		},
-		scaleImage(index:any){
+		scaleImage(index:any,list:any,str:any){
 			let scaleImage:any = this.$refs.scaleImage
 			scaleImage.scaleImageMask = true
-			scaleImage.init(this.generateList[this.selectCode],index)
+			str == 'library'?scaleImage.isLike = false:scaleImage.isLike = true
+			scaleImage.init(list,index)
 		},
 		onPaste(e:any){
 			if(e.clipboardData.items[0] && !this.isTextarea && this.selectCode !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
@@ -1740,7 +1780,6 @@ export default defineComponent({
 				flex: 1;
                box-sizing: border-box;
                display: flex;
-				padding-top: 2rem;
 				.printModel{
 					font-size: 1.4rem;
 					font-weight: 500;
@@ -1748,29 +1787,27 @@ export default defineComponent({
 				}
                .library_body_left{
                    // width: 27.5rem;
-					width: 36.5rem;
+					// width: 36.5rem;
+					width: 25rem;
                    height: 100%;
-                    background: rgba(255,255,255,0.4);
-					margin-right: 5rem;
+					margin-right: 3rem;
+					background: #f7f8fa;
 					>div{
-						background: #f7f8fa;
 						border-radius: 2rem;
 						overflow: hidden;
 						padding: 2rem 0;
 					}
                    .library_menu_list{
-						padding-left: 2rem;
                        .menu_item{
                            width: 100%;
-                            height: 6.8rem;
                            display: flex;
 							font-weight: 900;
                            align-items: center;
                            justify-content: space-between;
-                            padding: 0 1rem 0 2.5rem;
+                            padding: 1rem 3rem;
                            border-left: 0.5rem solid transparent;
                            // font-size: 1.6rem;
-							font-size: var(--aida-fsize2);
+							font-size: var(--aida-fsize1-8);
                            color: #030303;
                            cursor: pointer;
 							transition: all .3s;
@@ -1780,11 +1817,8 @@ export default defineComponent({
                            }

                            &.select_menu_item{
-                                background: #fff;
-								border-radius: 2rem;
-								transform: translateX(2rem);
-                                // background: #E6E6F6;
-                                // border-color: #343579;;
+                                background: #000;
+								color: #fff;
                            }

                            .menu_item_left{
@@ -1795,7 +1829,6 @@ export default defineComponent({
                                .fi{
                                    font-size: 2.2rem;
 									display: flex;
-                                    color: #030303;
                                    margin-right: 1.8rem;
                                }
                            }
@@ -1842,55 +1875,28 @@ export default defineComponent({
 							cursor: pointer;
 						}
 						&:last-child{
-							margin-right: 11rem;
+							margin-right: 7rem;
 						}
 					}

 					.content_search_block{
-						display: flex;
-						align-items: center;
-						width: 75rem; 
-						.search_input{
-							height: 3rem;
-							border-radius: 0.5rem;
-							width: 20rem;
-							border: 1px solid rgba(0, 0, 0, 0.15);
-							padding-left: 1.5rem;
-							border: 0.1rem solid #F1F1F1;
-							font-size: 1.2rem;
-							font-weight: 400;
-							margin-right: 2rem;
-							&::placeholder {
-								color: #C2C2C2;
-							}
+						// width: 85rem; 
+						margin-left: auto;
+
+						.generalModel_state_item,.gallery_btn{
+							margin-right: 3rem;
 						}
-					
 						.search_cascader{
 							// width: 53%;
-							width: 38rem;
-							display: flex;
-							position: relative;
-							
-							
-						}
-						.search_icon_block{
-							width: 5.2rem;
-							height: 2.8rem;
-							line-height: 2.8rem;
-							text-align: center;
-							background: #343579;
-							background-color: #39215b;
-							cursor: pointer;
-							border-radius: 2rem;
-							margin-left: 3rem;
-							.icon-sousuo{
-								font-size: 1.6rem;
-								color: #FFFFFF;
-							}
+							width: 37rem;
 						}
 						.intersection{
-							margin-left: 3rem;
 							cursor: pointer;
+							margin-right: 3rem;
+							>div{
+								font-size: 3rem;
+								font-weight: 900;
+							}
 						}
 						
 					}
@@ -1899,10 +1905,9 @@ export default defineComponent({
                        display: flex;
                        padding: 0 3.5rem 0 2.8rem;
                        align-items: center;
-                        justify-content: space-between;
                        background: rgba(255,255,255,0.4);
                        box-shadow: 0 0.2rem 0.8rem 0 rgba(238,238,244,0.25);
-
+						margin: 2rem 0;
                        .library_header_left{
                            height: 4rem;
                            display: flex;
@@ -1910,30 +1915,15 @@ export default defineComponent({

                           
                        }
-
-						 
-
                        .librart_headr_right{
                            display: flex;
                            align-items: center;
-                            .select_block{
-                                // background: #FFFFFF;
-                                color: #1A1A1A !important;
+							.generalModel_state_item{
+								margin-right: 2rem;
 								.ant-select-selector{
-									border: 2px solid !important;
+									background: #fff;
 								}
-								.ant-select{
-									.ant-select-arrow{
-										.icon-xiala{
-											margin-left: -2rem;
-											zoom: .7;
-										}
-									}
-								}
-                                .icon-xiala{
-                                    color: #1A1A1A !important;
-                                }
-                            }
+							}
                        }
                    }

@@ -1947,23 +1937,24 @@ export default defineComponent({
                            width: 100%;
                            height: 100%;
                            background: #f6f5fa;
-                            padding: 0 2rem 5rem 1rem;
+							padding: 2rem 4rem;
 							border-radius: 2rem;
 							overflow: hidden;
 							display: flex;
 							flex-direction: column;
                            .content_body_header{
-                                height: 10rem;
+                                // height: 10rem;
+								margin-bottom: 1rem;
                                display: flex;
                                justify-content: flex-end;
                                align-items: center;
 								// padding: 2rem 0 2rem 3rem;
-								padding-left: 3rem;
 								box-sizing: content-box;
 								justify-content: space-between;
 								.content_body_header_left{
 									display: flex;
 									align-items: center;
+									width: 100%;
 								}
 								.content_body_header_right{
 									display: flex;
@@ -2017,10 +2008,11 @@ export default defineComponent({
 										padding-bottom: 0;
 										background: rgba(0, 0, 0, 0);
 										width: 55rem;
+										--width:65%;
 										.input_box_btnBox{
 											background: #fff;
 											align-items: center;
-											width:65%;
+											padding: 2rem;
 											.search_input{
 												height: 3rem;
 											}
@@ -2099,12 +2091,15 @@ export default defineComponent({

                                            .img_operate_content{
                                                position: absolute;
-                                                right: 0.6rem;
-                                                top: 0.6rem;
-												&.left{
-													left: 0.6rem;
-													right: auto;
-													
+												top: 50%;
+												left: 50%;
+												transform: translate(-50%,-50%);
+												max-width: 90%;
+												display: flex;
+												flex-wrap: wrap;
+												>div{
+													margin-bottom: .5rem;
+													margin-right: .5rem;
 												}
                                            }
                                            .img_operate_block{
@@ -2202,37 +2197,6 @@ export default defineComponent({
                    color:#adabb9
                }
            }
-			.select_block{
-				display: flex;
-				justify-content: space-between;
-                font-size: 1.8rem;
-				color:#adabb9;
-				font-weight: 300;
-				.ant-select{
-					border-radius: 4px;
-					width: 48%;
-					border: 0.1rem solid #d9d9d9 !important;
-					.ant-select-arrow{
-						.icon-xiala{
-							margin-left: -0rem;
-						}
-					}
-				}
-				.ant-select-selection-item{
-					color:#262626;
-					font-weight: 300;
-				}
-				.ant-select-selector{
-					margin-left: 0rem;
-					color:#adabb9;
-					width: 100%;
-					padding-left: 2.1rem;
-				}
-				.icon-xiala{
-					color: #adabb9 !important;
-					font-weight: 400;
-				}
-			}
        }

        .rename_button_list{
@@ -2261,31 +2225,7 @@ export default defineComponent({
                color: #FFFFFF;
            }
        }
-		.el-cascader{
-			.el-input--suffix{
-			--el-input-hover-border-color: #d9d9d9;
-				// border: .1rem solid #d9d9d9;
-			}
-			height: 4.6rem;
-			.el-tag__content{
-				line-height: 2.5;
-				.el-cascader__tags{
-					
-				}
-			}
-			.el-input__wrapper{
-				padding-left: 0;
-			}
-			.el-cascader__search-input,.el-input__inner{
-				margin: 0;
-				width: 100%;
-				height: 4.6rem;
-				padding-left: 2.1rem;
-				line-height: 4.6rem;
-				font-size: 1.8rem;
-				box-sizing: border-box;
-			}
-		}
+		

        
    }
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -16,7 +16,7 @@
                                'login_active',
                            ]"
                        >
-                            Log on to AiDA 3.1
+                            Log on to AiDA 3.0
                        </div>
                    </div>
                    <!-- 账号密码登录 start -->
@@ -129,8 +129,14 @@
                            </label>
                        </div>
 						<div class="thirdPartyLogin marign_top30">
-							<googleLogin @googelLogin="googelLogin"></googleLogin>
-							<weiXinLogin></weiXinLogin>
+							<div class="label">
+								<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
+								<googleLogin @googelLogin="googelLogin"></googleLogin>
+							</div>
+							<div class="label">
+								<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
+								<weiXinLogin></weiXinLogin>
+							</div>
 							<!-- <phoneLogin></phoneLogin> -->
 						</div>
                        <div
@@ -240,7 +246,7 @@
        <!-- <div class="login_footer">
            <div class="login_footer_item">
                <div class="login_footer_item_text">
-                    ©2024 Code-Create Limited
+                    ©2025 Code-Create Limited
                </div>
            </div>
            <div class="login_footer_item">
@@ -312,8 +318,8 @@ export default defineComponent({
            emailCode: ["", "", "", "", "", ""], //邮箱验证码
            emailNextStep: true,
            username: "",
-            password: "",
-            email: "", //邮箱登录邮箱
+            password: localStorage.getItem("loginPassword") || '',
+            email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
            frogetPasswordStep: 1, //忘记密码的步骤
            forgetPasswordEmail: "",
            forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
@@ -489,6 +495,8 @@ export default defineComponent({
                                this.time = 60;
                                this.emailCode = ["", "", "", "", "", ""];
                                this.createTimer();
+								localStorage.setItem("loginEmail", this.email);
+								localStorage.setItem("loginPassword", this.password);
                            }
                        })
                        .catch((res) => {
@@ -520,6 +528,11 @@ export default defineComponent({
                })
                .catch((res) => {});
        },
+		isCheckAgreement(){
+			message.info(
+					"Agree to all terms, privacy fees and policies"
+				);
+		},
 		//微信登录
 		wechatLogin(value:any) {
 			let data = {
@@ -564,7 +577,6 @@ export default defineComponent({
 				}
 				if(rv.email)userid.email = rv.email
 				this.store.commit("upUserDetail", userid);
-				this.store.commit("setSystemUser", rv.systemUser);
 				
 				if (window.innerWidth < 768) {
 					message.info(
@@ -998,9 +1010,19 @@ export default defineComponent({
    }
 	.thirdPartyLogin{
 		display: flex;
-		justify-content: flex-start;
-		>div{
+		// justify-content: flex-start;
+		> div{
+			position: relative;
 			margin-right: 1rem;
+			> .mask{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				top: 0;
+				left: 0;
+				z-index: 2;
+				cursor: pointer;
+			}
 		}
 	}
    .tip_content {
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -0,0 +1,236 @@
+<template>
+    <div class="homeRecommend_max openSignUp">
+        <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
+						class="login_footer_item_text"
+						@click="turnToWindow(
+							'https://code-create.com.hk/aida-terms-and-conditions/'
+						)"
+					>
+						Terms&Conditions
+					</div>
+					<div
+						class="login_footer_item_text"
+						@click="turnToWindow(
+							'https://code-create.com.hk/aida-subscription-agreement/'
+						)"
+					>
+						Privacy Policy
+					</div>
+                </div>
+            </div>
+			<div class="homeRecommend_right">
+				<div class="gallery_btn" v-if="userDetail.systemUser == 1 && !isMoblie" @click="goHome">Home</div>
+				<div class="gallery_btn white" v-if="userDetail.systemUser != -1" @click="logout">log off</div>
+			</div>
+			<div class="homeRecommend_right" v-if="userDetail.systemUser == -1">
+				<div class="gallery_btn" @click="setLogin">Login</div>
+			</div>
+        </header>
+		<signUp ref="signUp" @close="signUpClose"></signUp>
+    </div>
+	
+</template>
+<script >
+import { defineComponent, toRefs, reactive, ref , nextTick,computed, onMounted, onBeforeUnmount } from "vue";
+import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useRouter } from 'vue-router';
+import signUp from '@/component/mainPage/signUp/index.vue'
+export default defineComponent({
+    components: {
+		signUp,
+    },
+	setup(){
+        const store = useStore();
+		const router = useRouter();
+		let registerModel = ref()
+		let data = reactive({
+			homeRecommendMax:null,
+			signUp:null
+		})
+		let isMoblie = ref(false)
+		let userDetail = computed(()=>{
+			return store.state.UserHabit.userDetail
+		})
+		let setLogin = ()=>{
+			router.push("/login");
+		}
+		let logout = ()=>{
+			let userInfo = store.state.UserHabit.userDetail;
+			let data = {
+                userId: userInfo?.userId,
+            };
+			store.commit('createDetail')
+			if(!data.userId) return
+			Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
+				clonAllCookie();
+			});
+		}
+		let goHome = ()=>{
+			router.push('/home');
+		}
+		let time
+		let updataIsMoblie = ()=>{
+			clearTimeout(time)
+			time = setTimeout(()=>{
+				if(window.innerWidth < 768){
+					isMoblie.value = true
+				}else{
+					isMoblie.value = false
+				}    
+			},500)
+			
+		}
+		onMounted(()=>{
+			window.addEventListener('resize',updataIsMoblie)
+		})
+		onBeforeUnmount(() => {
+			window.removeEventListener('resize', updataIsMoblie);
+		});
+		return {
+			...toRefs(data),
+			userDetail,
+			setLogin,
+			registerModel,
+			logout,
+			goHome,
+			isMoblie,
+		}
+	},
+    data() {
+        return {
+        };
+    },
+	watch: {
+		// credits.value(newVal,oldVal){
+		// 	console.log(String(newVal).length);
+		// }
+	},
+    mounted() {
+		
+    },
+    methods: {
+		turnToNewPage(url) {
+            window.open(url);
+        },
+		turnToWindow(url) {
+            window.open(url);
+        },
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.homeRecommend_max{
+	position: relative;
+	display: flex;
+	height: 100%;
+	flex-direction: column;
+	
+	
+	&.openSignUp{
+		.homeRecommend_heade{
+			position: relative;
+			background: #fff !important;
+			.login_footer_item_text{
+				display: block;
+			}
+		}
+		
+		.homeRecommend_content_adminTop{
+			display: none;
+		}
+	}
+}
+.homeRecommend_heade {
+    display: flex;
+	justify-content: space-between;
+	// padding: 0 30px;
+	padding: 1rem 4rem;
+    width: 100%;
+    // height: 7rem;
+	flex-shrink: 0;
+    // background: rgba(255, 255, 255, 0.2);
+    // border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
+    position: absolute;
+    align-items: center;
+	z-index: 2;
+	@media (max-width: 768px) {
+		z-index: 1000;
+	}
+	.homeRecommend_right{
+		width: 33%;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		.gallery_btn{
+			// color: #000;
+			// background: #fff;
+			// border: 2px solid #39215b;
+			// margin-left: 2rem;
+			width: 13rem;
+			text-align: center;
+			&.gallery_btn:nth-child(1){
+			    margin-right: 3rem;
+			}
+		}
+	}
+    .homeRecommend_logo {
+        width: 14.4rem;
+        height: 3.2rem;
+		margin-top: 0;
+    }
+	.login_footer_item_text{
+		margin-left: 5rem;
+		display: none;
+	}
+    .homeRecommend_right_content {
+        top: 0;
+		left: 0;
+        display: flex;
+		width: 40%;
+		height: 100%;
+		align-items: center;
+		overflow: hidden;
+        .homeRecommend_user_content {
+            display: flex;
+            align-items: center;
+            position: relative;
+            height: 3.7rem;
+			&.marLeft2{
+				margin-left: 2rem;
+			}
+            .username {
+                font-size: 1.8rem;
+                color: #1a1a1a;
+                margin: 0 0.8rem;
+				font-weight: 900;
+				span{
+					margin: .7rem;
+				}
+            }
+            .icon-xiala {
+                font-size: 1.4rem;
+                cursor: pointer;
+				transition: .3s all;
+            }
+            .icon_rotate {
+                -moz-transform: rotate(180deg);
+                -webkit-transform: rotate(180deg);
+                transform: rotate(180deg);
+                animation-direction: 0.5s;
+            }
+        }
+    }
+    
+}
+</style>
--- a/src/views/affiliate/affiliateRegister.vue
+++ b/src/views/affiliate/affiliateRegister.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="affiliateRegister">
 		<div class="title">AiDA 3.0 Questionnaire</div>
-		<div class="info">Have questions or suggestions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.</div>
+		<div class="info">Why do you want to become an affiliate user?</div>
 		<div class="textarea_box">
 			<div class="text"></div>
 			<textarea :value="textarea"></textarea>
--- a/src/views/feedbackSurvey.vue
+++ b/src/views/feedbackSurvey.vue
@@ -789,6 +789,7 @@ export default defineComponent({
    margin: 1rem;
 	height: 100%;
 	overflow-y: auto;
+	padding-bottom: 2rem;
 	&.active{
 		#title {
 			font-size: 3rem;
--- a/src/views/feedbackSurveyCN.vue
+++ b/src/views/feedbackSurveyCN.vue
@@ -712,6 +712,7 @@ export default defineComponent({
    margin: 1rem;
 	height: 100%;
 	overflow-y: auto;
+	padding-bottom: 2rem;
 	#main{
 		background: linear-gradient(45deg, #eee4f3, #f3f4e6);

--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class='box'>
+	<tesst></tesst>
+  </div>
+</template>
+
+<script>
+import { defineComponent} from "vue";
+import tesst from "@/component/Canvas/test.vue";
+export default defineComponent({
+	name: "test",
+	components:{
+	tesst
+	}
+})
+</script>
+
+<style lang='less' scoped>
+  .box {
+   border: 1px solid #f00;
+  }
+</style>
--- a/vue.config.js
+++ b/vue.config.js
@@ -56,7 +56,6 @@ module.exports = defineConfig({
  css: {
    loaderOptions: {
      less: {
-		additionalData: `@import (reference) "~@/assets/style/style.less";`,
        lessOptions: {
          modifyVars: {
            'primary-color': '#ec6800'
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735265169559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1495" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M802.158921 871.935232h-580.317842c-63.174813 0-114.374813-51.2-114.374812-114.374812V177.31934c0-63.174813 51.2-114.374813 114.374812-114.374812h580.317842c63.174813 0 114.374813 51.2 114.374812 114.374812v580.317841c0 63.098051-51.2 114.298051-114.374812 114.298051z" fill="#009BF1" p-id="1496"></path><path d="M469.627586 350.647076c0-25.638381 21.416492-35.54063 55.728936-35.540629 49.971814 0 113.376912 15.275562 163.271964 42.21889V202.804198c-54.423988-21.723538-108.771214-30.013793-163.195203-30.013793-133.181409 0-221.917841 69.546027-221.917841 185.763118 0 181.694753 249.552024 152.295052 249.552024 230.668666 0 30.397601-26.329235 40.146327-62.944527 40.146327-54.347226 0-124.507346-22.414393-179.622189-52.351425v147.919641c61.025487 26.252474 122.895352 37.306147 179.545427 37.306147 136.482159 0 230.515142-58.722639 230.515142-176.782009-0.076762-195.972414-250.933733-160.892354-250.933733-234.813794" fill="#FFFFFF" p-id="1497"></path></svg>