diff --git a/.env b/.env
new file mode 100644
index 00000000..9dc0309a
--- /dev/null
+++ b/.env
@@ -0,0 +1,2 @@
+# NODE_ENV = 'production'
+VUE_APP_BASE_URL = 'http://www.aida.com.hk'
diff --git a/.env.test b/.env.test
index 3a0ddd5a..7f5fd7f5 100644
--- a/.env.test
+++ b/.env.test
@@ -1,2 +1,2 @@
-NODE_ENV = 'production'
-VUE_APP_BASE_URL = 'http://18.162.111.141:80'
+NODE_ENV = 'development'
+VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
diff --git a/.env.test_build b/.env.test_build
new file mode 100644
index 00000000..6457fbcb
--- /dev/null
+++ b/.env.test_build
@@ -0,0 +1,2 @@
+NODE_ENV = 'production'
+VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
diff --git a/.eslintrc.js b/.eslintrc.js
index 61c89b40..1129ec58 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,7 +2,7 @@ module.exports = {
     root: true, // 停止在父级目录中寻找
     env: {
       es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型
-      node: true // Node.js 全局变量和 Node.js 作用域
+      node: true, // Node.js 全局变量和 Node.js 作用域
     },
     extends: ['plugin:vue/essential'],
     rules: {
diff --git a/package-lock.json b/package-lock.json
index 5d98998b..d491f29a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "@ans1998/vue3-color": "^3.0.7",
+        "@flaticon/flaticon-uicons": "^2.2.0",
         "ant-design-vue": "^3.2.12",
-        "axios": "^0.27.2",
+        "axios": "^1.4.0",
         "core-js": "^3.8.3",
         "file-saver": "^2.0.5",
         "html2canvas": "^1.4.1",
@@ -1809,6 +1810,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/@flaticon/flaticon-uicons": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.2.0.tgz",
+      "integrity": "sha512-9rZ9dKhqrR/XLI84HHfOwetK8ew/Y0FONp5l6n+fMhqGBrDZKkOGMjAoEgSfBH6d+VaVGcm0E28xhlBt7ggbRg==",
+      "optionalDependencies": {
+        "esbuild-linux-64": "^0.14.5"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -3693,12 +3702,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
-      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
       "dependencies": {
-        "follow-redirects": "^1.14.9",
-        "form-data": "^4.0.0"
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "node_modules/babel-eslint": {
@@ -5365,6 +5375,21 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "node_modules/esbuild-linux-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
@@ -9434,6 +9459,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
@@ -13293,6 +13323,14 @@
         }
       }
     },
+    "@flaticon/flaticon-uicons": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.2.0.tgz",
+      "integrity": "sha512-9rZ9dKhqrR/XLI84HHfOwetK8ew/Y0FONp5l6n+fMhqGBrDZKkOGMjAoEgSfBH6d+VaVGcm0E28xhlBt7ggbRg==",
+      "requires": {
+        "esbuild-linux-64": "^0.14.5"
+      }
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -14844,12 +14882,13 @@
       }
     },
     "axios": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
-      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
       "requires": {
-        "follow-redirects": "^1.14.9",
-        "form-data": "^4.0.0"
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "babel-eslint": {
@@ -16198,6 +16237,12 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "esbuild-linux-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
+      "optional": true
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
@@ -19340,6 +19385,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
diff --git a/package.json b/package.json
index d29ed805..b5509d3b 100644
--- a/package.json
+++ b/package.json
@@ -5,13 +5,15 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build:test": "vue-cli-service build --mode test",
+    "serve:test": "vue-cli-service serve --mode test",
+    "build:test": "vue-cli-service build --mode test_build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@ans1998/vue3-color": "^3.0.7",
+    "@flaticon/flaticon-uicons": "^2.2.0",
     "ant-design-vue": "^3.2.12",
-    "axios": "^0.27.2",
+    "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
diff --git a/src/assets/images/homePage/robot.png b/src/assets/images/homePage/robot.png
new file mode 100644
index 00000000..311c2090
Binary files /dev/null and b/src/assets/images/homePage/robot.png differ
diff --git a/src/assets/style/style.css b/src/assets/style/style.css
new file mode 100644
index 00000000..dafba0da
--- /dev/null
+++ b/src/assets/style/style.css
@@ -0,0 +1,173 @@
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: 'Roboto', sans-serif;
+}
+input {
+  outline: none;
+}
+.page_content {
+  width: 1440px;
+  max-width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+.button_first {
+  width: 9.85rem;
+  text-align: center;
+  background: #E0E0F6;
+  height: 4rem;
+  line-height: 4rem;
+  font-size: 1.3rem;
+  font-weight: 400;
+  color: #343579;
+  cursor: pointer;
+}
+.button_second {
+  width: 9.85rem;
+  text-align: center;
+  background: #343579;
+  height: 4rem;
+  line-height: 4rem;
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: #fff;
+  cursor: pointer;
+}
+.system_silder {
+  width: 100%;
+}
+.system_silder .ant-slider {
+  margin: 0;
+  width: 12rem;
+}
+.system_silder .ant-slider .ant-slider-rail {
+  height: 0.6rem;
+  border-radius: 0.3rem;
+  background: #F2F0FD;
+}
+.system_silder .ant-slider .ant-slider-track {
+  height: 0.6rem;
+  border-radius: 0.3rem;
+  background: #343579;
+}
+.system_silder .ant-slider .ant-slider-handle {
+  margin-top: -0.4rem;
+  border: solid 0.2rem #343579;
+}
+.ant-tooltip {
+  z-index: 2;
+}
+.ant-tooltip .ant-tooltip-inner {
+  background: #343579;
+  border-radius: 5px;
+  padding: 0.6rem 0.5rem;
+}
+.select_block .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  background: transparent;
+  height: 4rem;
+  border: 0.1rem solid #000 !important;
+  border-radius: 0;
+  box-shadow: none !important;
+}
+.select_block .ant-select-single .ant-select-selector .ant-select-selection-item,
+.select_block .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+  line-height: 3.8rem;
+  color: #1A1A1A;
+  font-size: 1.3rem;
+  font-weight: bold;
+}
+.modal_component.ant-modal {
+  top: 0;
+}
+.modal_component .ant-modal-content {
+  overflow: hidden;
+}
+.modal_component .ant-modal-content .ant-modal-header {
+  padding: 2.4rem 2.6rem;
+  background: #F7F7F7;
+}
+.modal_component .ant-modal-content .ant-modal-header .ant-modal-title {
+  font-size: 1.8rem;
+  line-height: 1.8rem;
+  color: #030303;
+}
+.modal_component .ant-modal-content .ant-modal-body {
+  padding: 0;
+}
+.collection_modal .ant-modal-body {
+  height: calc(80vh - 6.4rem);
+  overflow-y: hidden;
+}
+.collection_modal .ant-upload.ant-upload-select-picture-card {
+  width: 16.5rem;
+  height: 16.5rem;
+  background: #FFFFFF;
+  border: 0.3rem dashed #EDEDED;
+  margin: 0 2rem 2rem 0;
+}
+.collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
+  font-size: 3.2rem;
+  color: #B7B7B7;
+}
+.collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text {
+  font-size: 1.6rem;
+  color: #B7B7B7;
+}
+.collection_modal .ant-upload-list-picture-card-container {
+  display: none !important;
+}
+.collection_modal .ant-upload-picture-card-wrapper {
+  width: auto;
+  vertical-align: top;
+}
+.cut_pricture_modal .ant-modal-body {
+  height: 65.4rem;
+  overflow-y: hidden;
+}
+.scroll_style::-webkit-scrollbar-button:single-button {
+  display: block;
+  border-style: solid;
+  height: 1.3rem;
+  width: 1.4rem;
+}
+.scroll_style::-webkit-scrollbar-button:single-button:vertical:decrement {
+  border-width: 0 0.8rem 0.8rem 0.8rem;
+  border-color: transparent transparent #555555 transparent;
+}
+.scroll_style::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
+  border-color: transparent transparent #777777 transparent;
+}
+.scroll_style::-webkit-scrollbar-button:single-button:vertical:increment {
+  border-width: 0.8rem 0.8rem 0 0.8rem;
+  border-color: #555555 transparent transparent transparent;
+}
+.scroll_style::-webkit-scrollbar-button:vertical:single-button:increment:hover {
+  border-color: #777777 transparent transparent transparent;
+}
+.scroll_style::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 1.4rem;
+  /*高宽分别对应横竖滚动条的尺寸*/
+}
+.scroll_style::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  background: #c2c2c2;
+  opacity: 0.8;
+  border-radius: 0.7rem;
+}
+.mark_loading {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  left: 0;
+  top: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 1e32c5f4..ff7230bd 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -5,6 +5,9 @@ html,body,#app{
     height: 100%;
     font-family: 'Roboto', sans-serif;
 }
+input{
+	outline:none
+}
 .page_content{
     width: 1440px;
     max-width: 100%;
@@ -83,6 +86,7 @@ html,body,#app{
   }
 }
 
+
 //弹窗公共样式
 
 .modal_component{
diff --git a/src/component/Detail/habit.vue b/src/component/Detail/habit.vue
new file mode 100644
index 00000000..d87e4ffb
--- /dev/null
+++ b/src/component/Detail/habit.vue
@@ -0,0 +1,433 @@
+<template>
+    <div class="habit">
+        <div class="habit_button" @click="habitBtn" ref="stringg">
+            Workspace
+            <i class="fi fi-bs-angle-down"></i>
+        </div>
+		
+        <div class="habit_content" v-fade="habit">
+            <div class="habit_title">
+                <h3 class="" @click="aaa()">Workspace Setting</h3>
+                <div class="habit_intro">adjust your workspace setting</div>
+            </div>
+            <div class="habit_type">
+                <a-dropdown>
+                    <template #overlay>
+                        <a-menu @click="habitTypeclick">
+                            <a-menu-item aaa="22" key="1st menu item"> 1st menu item </a-menu-item>
+                            <a-menu-item key="2nd menu item"> 2nd menu item </a-menu-item>
+                            <a-menu-item key="3rd item"> 3rd item </a-menu-item>
+                        </a-menu>
+                    </template>
+                    <a-button>
+                        <UserOutlined />
+                        {{habitType.habitTypeone}}
+                        <DownOutlined />
+                    </a-button>
+                </a-dropdown>
+            </div>
+
+            <div class="habit_Overal_Single">
+                <div
+                    class="habit_Overal_Single_text"
+                    :class="{ active: !checked }"
+                >
+                    Overal
+                </div>
+                <a-switch v-model:checked="checked" />
+                <div
+                    class="habit_Overal_Single_text"
+                    :class="{ active: checked }"
+                >
+                    Single
+                </div>
+            </div>
+            <div class="habit_habit_singleton" v-show="checked">
+                <a-dropdown >
+                    <template #overlay>
+                        <a-menu @click="handleMenuClick">
+                            <a-menu-item key="1"> 上衣 </a-menu-item>
+                            <a-menu-item key="2"> 裤子 </a-menu-item>
+                        </a-menu>
+                    </template>
+                    <a-button>
+                        <UserOutlined />
+                        上衣
+                        <DownOutlined />
+                    </a-button>
+                </a-dropdown>
+            </div>
+			<div class="habit_System_Designer">
+                <a-slider id="system_silder"
+                    v-model:value="value"
+                    @afterChange="systemDesigner"
+					:tip-formatter="formatter"
+				>
+                </a-slider>
+                <div class="habit_System_Designer_text_max">
+                    <div class="habit_System_Designer_text">System</div>
+                    <div class="habit_System_Designer_text">Designer</div>
+                </div>
+            </div>
+			<div class="habit_model">
+                <a-dropdown placement="bottomRight"
+					trigger="['click']"
+					@click="modelBtn"
+					>
+                    <a-button>
+                        <UserOutlined />
+                        Mannequin
+                        <DownOutlined />
+                    </a-button>
+                </a-dropdown>
+            </div>
+			<div id="modelShow" class="habit_model_show"  v-fade="model">
+				<div class="habit_btn">
+					<div class="model_current">
+					<div class="model_text">Current</div>
+					<div class="model_img">
+						<img src="" alt="">
+					</div>
+				</div>
+				<div class="model_Designer">
+					<div class="model_text">
+						<div
+							class="habit_Overal_Single_text"
+							:class="{ active: !checked }"
+						>
+							System
+						</div>
+						<a-switch v-model:checked="checked" />
+						<div
+							class="habit_Overal_Single_text"
+							:class="{ active: checked }"
+						>
+							Seleves
+						</div>
+					</div>
+					<div class="model_img">
+						<div v-for="(item,index) in checked?obj:obj2" :key="item.id">
+							<img :src="item.url" alt="">
+						</div>
+					</div>
+				</div>
+				</div>
+				
+			</div>
+        </div>
+	
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, createVNode, ref,Ref} from "vue";
+import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
+import type { MenuProps } from "ant-design-vue";
+export default defineComponent({
+    components: {
+        DownOutlined,
+        UserOutlined,
+    },
+	setup(){
+		let checked:any= ref(true);
+		let value = ref<number>(30);
+		let tooltip = ref(true);
+		let habit = ref(false);
+		let model = ref(false);
+		let habitType = ref({
+			habitTypeone:"Workspace Setting",
+			habitTypeList:[
+				{
+					id:1,
+					name:"11111"
+				},
+				{
+					id:2,
+					name:"222"
+				},
+				{
+					id:2,
+					name:"333"
+				},
+			],
+		});
+		let obj= ref([
+			{
+				id:1,
+				url:"11111"
+			},
+			{
+				id:2,
+				url:"11111"
+			},
+		]);
+		let obj2= ref([
+			{
+				id:1,
+				url:"22"
+			},
+			{
+				id:2,
+				url:"222"
+			},
+		])
+		// const stringg = ref()
+		const habitTypeclick : MenuProps['onClick'] = (e)=>{
+			
+			// this.habitType.habitTypeone = e
+		}
+		// const stringg:Ref<HTMLElement | null> = ref(null)
+		// const aaa = ()=>{
+		// 	if(stringg.value){
+		// 		console.log(stringg.value.classList)
+		// 	}
+		// }
+			
+	return{
+			habitTypeclick,
+			checked,
+			value,
+			tooltip,
+			habit,
+			model,
+			habitType,
+			obj,
+			obj2,
+		}
+    },
+    data() {
+
+        return {
+        };
+    },
+    mounted() {},
+	directives:{
+		fade:{
+			updated (el,model){
+				
+				if(model.value){
+					el.style.display="block"
+					setTimeout(() => {
+						el.classList.add("active")
+					}, 100);
+				}else{
+					el.classList.remove("active")
+					setTimeout(() => {
+					el.style.display="none"
+					}, 100);
+				}
+			}
+		}
+	},
+    methods: {
+	
+        handleButtonClick(e: Event) {
+            console.log("click left button", e);
+        },
+        handleMenuClick(e: Event) {
+            console.log("click", e);
+        },
+        systemDesigner(num: Number) {
+            console.log(num);
+        },
+		formatter(value: number) {
+			return `${value}%`;
+		},
+		habitBtn(){
+			const aa = this.$refs.stringg
+			// const aa = this.$refs.stringg;
+			// aa.style
+			console.log(aa);
+			
+			this.habit = !this.habit
+			if(!this.habit){
+				this.model = false
+			}
+		},
+		modelBtn(){
+			this.model = !this.model
+		},
+    },
+});
+</script>
+<style lang="less" scoped>
+.habit {
+    position: relative;
+    .habit_button {
+		background-color: #fff;
+        border: solid 2px #000;
+        padding: 0px 20px;
+        box-sizing: initial;
+        font-weight: 600;
+        height: 32px;
+        line-height: 32px;
+        padding: 4px 15px;
+        font-size: 14px;
+		cursor: pointer;
+        .fi-bs-angle-down {
+            margin-left: 10px;
+            display: inline-block;
+            transform: translateY(2px);
+        }
+    }
+    .habit_content {
+        border: solid 2px #000;
+        border-radius: 10px;
+        padding: 20px 20px;
+		// zoom: .75;
+        transform-origin: top right;
+        position: absolute;
+        right: -3px;
+        top: 110%;
+        background: #fff;
+        // width: 25rem;
+		width: 200px;
+		opacity: 0;
+		transition: all .3s;
+        transform: scale(0.75)translateY(10%);
+		display: none;
+		&.active{
+			opacity: 1;
+			transform: scale(0.75)translateY(0%);
+		}
+        .habit_title {
+            h3 {
+                font-size: 16px;
+                font-weight: 600;
+                color: #000;
+                margin: 0;
+            }
+            .habit_intro {
+                font-size: 12px;
+                color: rgba(0, 0, 0, 0.5);
+                font-weight: 500;
+            }
+        }
+        .habit_type {
+            margin-top: 15px;
+        }
+        .habit_Overal_Single {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 30px 0;
+            .habit_Overal_Single_text {
+                font-weight: 600;
+                color: rgba(0, 0, 0, 0.5);
+                &.active {
+                    color: rgba(0, 0, 0, 0.7);
+                    font-weight: 900;
+                }
+                :deep(.ant-switch-checked) {
+                    background-color: #000;
+                }
+            }
+            :deep(.ant-switch) {
+                margin: 0 10px;
+            }
+        }
+        .habit_habit_singleton {
+            margin-bottom: 30px;
+        }
+        .habit_System_Designer {
+			margin-top: 80px;
+            :deep(.ant-slider-track),
+            :deep(.ant-slider-rail) {
+                height: 0.6rem;
+                background-color: #e1e1e1;
+                border-radius: 0.5rem;
+            }
+            :deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
+            :deep(.ant-slider-handle) {
+                background-color: #2d2e76 !important;
+                border: none !important;
+            }
+            :deep(.ant-slider-handle:hover) {
+                box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
+            }
+           
+            .habit_System_Designer_text_max {
+                display: flex;
+                justify-content: space-between;
+                .habit_System_Designer_text {
+                }
+            }
+        }
+		.habit_model{
+			margin-top: 20px;
+			
+		}
+		
+		.habit_model_show{
+			position: absolute;
+			border: solid 2px #000;
+			border-radius: 10px;
+			padding: 20px 20px;
+			bottom: -5px;
+			transform: translateY(110%);
+			right: -2px;
+			width: 35rem;
+			opacity: 0;
+			transition: all .3s;
+			display: none;
+			&.active{
+				opacity: 1;
+				transform: translateY(100%);
+			}
+			.habit_btn{
+				display: flex;
+				justify-content: space-between;
+			}
+			.model_Designer{
+				.model_text{
+					display: flex;
+					:deep(.ant-switch) {
+						margin: 0 10px;
+					}
+				}
+			}
+			.model_img{
+					display: flex;
+			}
+		}
+		
+    }
+}
+.habit :deep(.ant-dropdown-button) {
+    margin-right: 8px;
+    margin-bottom: 8px;
+}
+.habit :deep(.ant-btn:hover),
+:deep(.ant-btn:focus),
+:deep(.ant-btn:active),
+:deep(.ant-btn::after) {
+    color: #000;
+    border-color: #000 !important;
+    box-shadow: none !important;
+}
+.habit :deep(.ant-btn) {
+    box-shadow: none !important;
+    color: rgba(0, 0, 0, 0.5);
+    box-shadow: none;
+    border: none;
+    background: #f6f6f6;
+    width: 100%;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>
+<style>
+
+.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
+	background: #000 !important;
+}
+.habit_mod{
+	background-color: #000 !important;
+	/* top: 0 !important; */
+	/* left: 0 !important; */
+}
+.ant-tooltip .ant-tooltip-inner ,.ant-tooltip-arrow-content{
+	background: #000 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
new file mode 100644
index 00000000..5fab4b79
--- /dev/null
+++ b/src/component/HomePage/Generate.vue
@@ -0,0 +1,470 @@
+<template>
+    <div>
+        <a-modal class="my_material_modal" 
+            v-model:visible="generateShow" 
+            :footer="null" 
+            width="80%"
+            :maskClosable="false"
+            :centered="true"
+        >
+            <div class="my_material_header">
+                <div class="my_material_title">My Library</div>
+                <div class="my_material_header_right">
+                    <div class="content_search_block">
+                        <input class="search_input" placeholder="Please input" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
+                        <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
+                    </div>
+
+                    <div class="icon iconfont icon-guanbi icon_close" @click="closeModal"></div>
+                </div>
+            </div>
+
+            <div class="my_material_content">
+                <div class="material_content_top">
+                    <div class="material_content_top_title"></div>
+                    <div class="material_content_top_right">
+                        <div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
+                            <a-select
+                                ref="select"
+                                v-model:value="designType"
+                                :options="disignTypeList"
+                                placeholder="All"
+                                :allowClear="true"
+                                @change="handleChange"
+                            >
+                                <template #suffixIcon
+                                    ><span
+                                        class="icon iconfont icon-xiala"
+                                        style="color: #343579"
+                                    ></span
+                                ></template>
+                            </a-select>
+                        </div>
+                        <div :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()"  v-show="imgList.length">
+                            <div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
+                            <div>all</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="material_content_body scroll_style">
+                    <div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
+                        <div :class="['content_img_item_block', selectImgListIds.indexOf(img.id) > -1 ? 'select_item_img' :'']">
+                            <img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url"/>
+                        </div>
+                        <div class="content_img_name">{{img.name}}</div>
+                    </div>
+                    <div class="no_data_block" v-show="!imgList.length && !isShowLoading">
+                        <img src="@/assets/images/homePage/null_img.png">
+                    </div>
+                </div>
+                <div class="no_data_block loading_block" v-show="isShowLoading">
+                    <a-spin size="large"></a-spin>
+                </div>
+                <div class="material_confirm" @click="confirmSelect()"  v-show="imgList.length">Confirm</div>
+                <div class="table_pagination" v-show="imgList.length">
+                    <a-pagination
+                        
+                        v-model:current="currentPage"
+                        v-model:pageSize="pageSize"
+                        :total="total"
+                        :showSizeChanger="false"
+                        :showQuickJumper="true"
+                        @change="changePage"
+                    />
+                </div>
+            </div>
+        </a-modal>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent, ref} from 'vue'
+import { Https } from "@/tool/https";
+import { message } from 'ant-design-vue';
+export default defineComponent({
+    setup() {
+        let myMaterialModalShow = ref(false)
+        let imgList = ref([])
+        let selectImgList:any = ref([])
+        let selectImgListIds:any = ref([])
+        let isShowLoading:any = ref(false)
+        let selectCode:any = ref('')
+        let currentPage:any = ref(1)
+        let searchPictureName = ref('')
+        let pageSize = ref(20)
+        let total = ref(0)
+        let searcMaterialhName:any = ref('') //搜索名字
+        let designType:any = ref(null)
+        let disignTypeList = [
+                {
+                    value: "Outwear",
+                    label: "Outwear",
+                },
+                {
+                    value: "Blouse",
+                    label: "Blouse",
+                },
+                {
+                    value: "Dress",
+                    label: "Dress",
+                },
+                {
+                    value: "Trousers",
+                    label: "Trousers",
+                },
+                {
+                    value: "Skirt",
+                    label: "Skirt",
+                },
+            ]
+        let boardList = {
+            Moodboard:'Mood',
+            Printboard:'Print',
+            Sketchboard:'Sketch',
+            MarketingSketch:'MarketingSketch'
+        }
+        return{
+            myMaterialModalShow,
+            imgList,
+            selectImgList,
+            selectImgListIds,
+            isShowLoading,
+            selectCode,
+            currentPage,
+            searchPictureName,
+            pageSize,
+            total,
+            searcMaterialhName,
+            designType,
+            disignTypeList,
+            boardList
+        }
+    },
+    methods:{
+
+        init(code:any){
+            this.selectCode = code
+            this.myMaterialModalShow = true
+            this.getLibraryList()
+        },
+        
+        selectImgItem(imgData:any){
+            this.selectImgListIds =  this.selectImgList.map((v:any)=>v.id)
+            if(this.selectImgListIds.indexOf(imgData.id) === -1){
+                this.selectImgList.push(imgData)
+                this.selectImgListIds.push(imgData.id)
+            }else{
+                let index = this.selectImgListIds.indexOf(imgData.id)
+                this.selectImgList.splice(index,1)
+                this.selectImgListIds.splice(index,1)
+            }
+        },
+
+
+        //改变页码
+        changePage(current: number, pageSize: number){
+            this.currentPage = current
+            this.pageSize = pageSize
+            this.getLibraryList()
+        },
+
+        handleChange(){
+            this.getLibraryList()
+        },
+
+        //选择所有的图片
+        selectAllImg(){
+            if(this.selectImgListIds.length == this.imgList.length){
+                this.selectImgListIds = []
+                this.selectImgList = []
+            }else{
+                this.selectImgListIds = this.imgList.map((v:any) => v.id)
+                this.selectImgList = this.imgList
+            }
+        },
+
+        getLibraryList(){
+            let data = {
+                level1Type:this.selectCode,
+                level2Type:this.designType,
+                page:this.currentPage,
+                pictureName:this.searchPictureName,
+                size:this.pageSize,
+            }
+            this.isShowLoading = true
+            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
+                (rv: any) => {
+                    this.imgList = rv.content
+                    this.total = rv.total
+                    this.isShowLoading = false
+                }
+            ).catch((res)=>{
+                this.isShowLoading = false
+            });
+        },
+
+        confirmSelect(){
+            if(!this.selectImgList.length){
+                message.error('Please select at least one image')
+                return
+            }
+            this.$emit('confirmSelect',this.selectImgList)
+            this.closeModal()
+        },
+
+        closeModal(){
+            this.myMaterialModalShow = false
+            this.searchPictureName = ''
+            this.designType = null
+            this.selectImgList = []
+            this.selectImgListIds = []
+            this.imgList = []
+            this.currentPage = 1
+            this.pageSize = 10
+            this.total = 0
+        }
+    }
+})
+</script>
+<style lang="less">
+.my_material_modal{
+
+    .ant-modal-close{
+        width: 3.6rem;
+        height: 3.6rem;
+        position: absolute;
+        top: -1.8rem;
+        right: -1.8rem;
+    }
+
+    .ant-modal-header{
+        display: none;
+    }
+
+    .ant-modal-body{
+        background: #F2F3FB;
+        height: 80vh;
+        min-height: 72rem;
+        overflow-y: hidden;
+        padding: 0;
+    }
+
+    .my_material_header{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 6.6rem;
+        background: #F7F7F7;
+        padding: 0 3.4rem 0 3.1rem;
+
+        .my_material_title{
+            font-size: 1.8rem;
+            color: #030303;
+            font-weight: 500;
+        }
+
+        .my_material_header_right{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .content_search_block{
+                margin-right: 5rem;
+                display: flex;
+
+                .search_input{
+                    width: 30rem;
+                    padding-left: 1.5rem;
+                    height: 4rem;
+                    line-height: 3.8rem;
+                    background: #FFFFFF;
+                    border: 0.1rem solid #F1F1F1;
+                    font-size: 1.6rem;
+                    font-weight: 400;
+
+                    &::placeholder {
+                        color: #C2C2C2;
+                    }
+                }
+
+                .search_icon_block{
+                    width: 6rem;
+                    height: 4rem;
+                    line-height: 4rem;
+                    text-align: center;
+                    background: #343579;
+                    cursor: pointer;
+
+                    .icon-sousuo{
+                        font-size: 2rem;
+                        color: #FFFFFF;
+                    }
+                }
+            }
+
+            .icon_close{
+                color: rgba(174, 178, 183, 1);
+                font-size: 2.4rem;
+                cursor: pointer;
+            }
+        }
+
+        
+    }
+
+    .my_material_content{
+        padding: 0 3rem 3.5rem 3rem;
+        height: calc(100% - 6.6rem);
+        position: relative;
+
+        .material_content_top{
+            padding: 1.3rem 0 2.1rem;
+            height: 7rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+
+            .material_content_top_title{
+                font-size: 20px;
+                color: #030303;
+            }
+
+            .material_content_top_right{
+                display: flex;
+                align-items: center;
+
+                .select_block{
+                    background: #FFFFFF;
+                    color: #1A1A1A !important;
+                    margin-right: 2.3rem;
+
+                    .icon-xiala{
+                        color: #1A1A1A !important;
+                    }
+                }
+
+                .check_all_block{
+                    display: flex;
+                    align-items: center;
+                    font-size: 1.6rem;
+                    color: #64686D;
+                    cursor: pointer;
+
+                    &.check_all{
+                        color: #1A1A1A;
+                    }
+
+                    .check_block{
+                        width: 2.4rem;
+                        height: 2.4rem;
+                        background: #EBECF4;
+                        border: 0.1rem solid #64686D;
+                        padding: 0.3rem;
+                        margin-right: 0.7rem;
+
+                        .check_block_body{
+                            width: 100%;
+                            height: 100%;
+                            background: #343579;
+                        }
+                    }
+                }
+            }
+
+        }
+
+        .material_content_body{
+            width: 100%;
+            height: calc(100% - 19rem);
+            overflow-y: auto;
+            position: relative;
+
+            .content_img_item{
+                display: inline-block;
+                vertical-align: top;
+                padding: 0 1.4rem;
+                margin-bottom: 2.8rem;
+
+                .content_img_item_block{
+                    border: 0.1rem solid transparent;
+                    width: 16.5rem;
+                    height: 16.5rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: relative;
+                    cursor: pointer;
+
+                    &.select_item_img{
+                        border-color: #343579;
+                    }
+
+                    .print_content_img{
+                        width: 100%;
+                        height: 100%;
+                    }
+
+                    .content_img{
+                        max-width: 100%;
+                        max-height: 100%;
+                    }
+
+                }
+                .content_img_name{
+                    width: 16.5rem;
+                    height: 3.5rem;
+                    line-height: 3.5rem;
+                    white-space: nowrap;
+                    text-align: center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-size: 1.4rem;
+                    color: #030303;
+                }
+            }
+
+            
+        }
+
+        .no_data_block{
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 99;
+
+            &.loading_block{
+                background: rgba(0,0,0,0.2);
+            }
+        }
+
+        .material_confirm{
+            width: 9.8rem;
+            height: 3.6rem;
+            line-height: 3.6rem;
+            font-size: 1.4rem;
+            text-align: center;
+            margin: 0 auto;
+            color: #FFFFFF;
+            background: #343579;
+            cursor: pointer;
+            margin-top: 2rem;
+        }
+
+        .table_pagination{
+            position: absolute;
+            bottom: 3.5rem;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            margin-top: 5rem;
+        }
+    }
+}
+</style>
diff --git a/src/component/HomePage/Header.vue b/src/component/HomePage/Header.vue
index dc95850c..c8e8a6a6 100644
--- a/src/component/HomePage/Header.vue
+++ b/src/component/HomePage/Header.vue
@@ -1,32 +1,75 @@
 <template>
     <div>
         <header class="header_component">
-            <img class="header_logo"  @click="turnToNewPage('https://www.aidlab.hk/en/')" src="@/assets/images/loginPage/aida_logo.png" />
-            <nav class="header_nav_content">
-                <div :class="['nav_item', $route.name === 'home'?'select_nav':'']" @click="turnToPage('home')">HOME</div>
-                <div  :class="['nav_item', $route.name === 'library'?'select_nav':'']" @click="turnToPage('library')">LIBRARY</div>
-                <div :class="['nav_item', $route.name === 'history'?'select_nav':'']" @click="turnToPage('history')">HISTORY</div>
-            </nav>
             <div class="header_right_content">
                 <div class="header_icon icon iconfont icon-touxiang3"></div>
                 <div class="header_user_content">
-                    <div class="username">{{userInfo?.userName}}</div>
-                    <div :class="['icon','iconfont', 'icon-xiala', isShowOperate?'icon_rotate':'']" @click.stop="changeShowOperateContent()"></div>
+                    <div class="username">{{ userInfo?.userName }}</div>
+                    <div
+                        :class="[
+                            'icon',
+                            'iconfont',
+                            'icon-xiala',
+                            isShowOperate ? 'icon_rotate' : '',
+                        ]"
+                        @click.stop="changeShowOperateContent()"
+                    ></div>
                     <nav class="select_block" v-show="isShowOperate">
                         <!-- <div class="select_item" @click="showBindEmailModal()">
                             <span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
                         </div> -->
                         <div class="select_item" @click="logout()">
-                            <span class="icon iconfont icon-tuichu"></span><span class="select_item_des">log off</span>
+                            <span class="icon iconfont icon-tuichu"></span
+                            ><span class="select_item_des">log off</span>
                         </div>
                     </nav>
                 </div>
             </div>
+            <nav class="header_nav_content">
+                <div
+                    :class="[
+                        'nav_item',
+                        $route.name === 'home' ? 'select_nav' : '',
+                    ]"
+                    @click="turnToPage('home')"
+                >
+                    HOME
+                </div>
+                <div
+                    :class="[
+                        'nav_item',
+                        $route.name === 'library' ? 'select_nav' : '',
+                    ]"
+                    @click="turnToPage('library')"
+                >
+                    LIBRARY
+                </div>
+                <div
+                    :class="[
+                        'nav_item',
+                        $route.name === 'history' ? 'select_nav' : '',
+                    ]"
+                    @click="turnToPage('history')"
+                >
+                    HISTORY
+                </div>
+            </nav>
+           
+			<div class="header_right">
+				<img
+                class="header_logo"
+                @click="turnToNewPage('https://www.aidlab.hk/en/')"
+                src="@/assets/images/loginPage/aida_logo.png"
+            />
+			<Habit></Habit>
+
+			</div>
         </header>
 
-        <a-modal class="modal_component" 
-            v-model:visible="bindEmailVisible" 
-            :footer="null" 
+        <a-modal
+            class="modal_component"
+            v-model:visible="bindEmailVisible"
+            :footer="null"
             title="Mailbox binding"
             width="56rem"
             :maskClosable="false"
@@ -37,284 +80,323 @@
             </template>
             <div class="bind_email_content" v-if="isHaveBindEmail">
                 <div class="bind_email_tip">you have binded email</div>
-                <div class="bind_email">{{userInfo.email}}</div>
+                <div class="bind_email">{{ userInfo.email }}</div>
             </div>
-            <div class="bind_email_content"  v-else>
+            <div class="bind_email_content" v-else>
                 <!-- 绑定邮箱第一步 start -->
                 <div v-show="bindEmailStep === 1">
                     <div class="bind_email_form_content">
                         <div class="bind_email_form_title">Email</div>
-                        <input class="bind_email_form_input" placeholder="Enter a new email" v-model="email" @keydown.enter="emailNextStepFun()">
+                        <input
+                            class="bind_email_form_input"
+                            placeholder="Enter a new email"
+                            v-model="email"
+                            @keydown.enter="emailNextStepFun()"
+                        />
+                    </div>
+                    <div
+                        class="bind_email_submit_button"
+                        @click="emailNextStepFun()"
+                    >
+                        Next step
                     </div>
-                    <div class="bind_email_submit_button"  @click="emailNextStepFun()">Next step</div>
                 </div>
                 <!-- 绑定邮箱第一步 end -->
 
                 <!-- 绑定邮箱第二步 start -->
                 <div v-show="bindEmailStep === 2">
                     <div @click="emailLastStepFun()">
-                        <span class="icon iconfont icon--shangyibu"></span><span class="email_last_step_content">Enter verification code</span>
+                        <span class="icon iconfont icon--shangyibu"></span
+                        ><span class="email_last_step_content"
+                            >Enter verification code</span
+                        >
                     </div>
                     <div class="email_last_step_des">
-                        <div class="sent_email_content">Sent to {{email}}</div>
+                        <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>
+                            <span v-show="time">{{ time }}s</span>
+                            <span v-show="!time" @click="emailNextStepFun()"
+                                >Resend</span
+                            >
                         </div>
                     </div>
-					<VerificationCodeInput :ct="emailCode" @sendCaptcha="submitBindEmail($event)"></VerificationCodeInput>
+                    <VerificationCodeInput
+                        :ct="emailCode"
+                        @sendCaptcha="submitBindEmail($event)"
+                    ></VerificationCodeInput>
                 </div>
                 <!-- 绑定邮箱第一步 end -->
-                
             </div>
         </a-modal>
     </div>
-   
 </template>
 <script >
-import { defineComponent ,createVNode} from 'vue'
-import {isEmail} from '@/tool/util'
-import {setCookie, getCookie, WriteCookie} from '@/tool/cookie'
-import VerificationCodeInput from '@/component/LoginPage/verificationCodeInput.vue'
+import { defineComponent, createVNode } from "vue";
+import { isEmail } from "@/tool/util";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
+import Habit from "@/component/Detail/habit.vue";
 import { Https } from "@/tool/https";
-import { Modal,message } from 'ant-design-vue';
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Modal, message } from "ant-design-vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 export default defineComponent({
-    components:{
-		VerificationCodeInput,
-	},
-    data(){
-        return{
-            isShowOperate:false,
-            bindEmailVisible:false,
-            isHaveBindEmail:false,
-            bindEmailStep:1,
-            email:'',
-            emailCode:['','','','','',''],//邮箱验证码
-            time:60,//60秒倒计时
+    components: {
+        VerificationCodeInput,
+		Habit,
+    },
+    data() {
+        return {
+            isShowOperate: false,
+            bindEmailVisible: false,
+            isHaveBindEmail: false,
+            bindEmailStep: 1,
+            email: "",
+            emailCode: ["", "", "", "", "", ""], //邮箱验证码
+            time: 60, //60秒倒计时
             timer: 0,
-            userInfo:{},
-            timerOperate:null,
-            numTime:30,
-            timerSec:null,
-            modalWarning:null
-        }
+            userInfo: {},
+            timerOperate: null,
+            numTime: 30,
+            timerSec: null,
+            modalWarning: null,
+        };
     },
-    mounted(){
-        this.userInfo = JSON.parse(getCookie('userInfo'))
-        if(!this.userInfo){
-            this.$router.replace('/login')
-        }else{
-            this.accountIsLogin(this.userInfo)
+    mounted() {
+        this.userInfo = JSON.parse(getCookie("userInfo"));
+        if (!this.userInfo) {
+            this.$router.replace("/login");
+        } else {
+            this.accountIsLogin(this.userInfo);
         }
-        this.isHaveBindEmail = this.userInfo?.email ? true : false
+        this.isHaveBindEmail = this.userInfo?.email ? true : false;
 
-        this.operateClick()
-        document.addEventListener('click',this.operateClick)
+        this.operateClick();
+        document.addEventListener("click", this.operateClick);
     },
-    methods:{
-        turnToNewPage(url){
-            window.open(url)
+    methods: {
+        turnToNewPage(url) {
+            window.open(url);
         },
 
-        turnToPage(name){
-            let noRefresh = name === 'home' ? true :false
-            this.$router.push({name:name,params: {noRefresh:noRefresh}})
+        turnToPage(name) {
+            let noRefresh = name === "home" ? true : false;
+            this.$router.push({ name: name, params: { noRefresh: noRefresh } });
         },
 
         //点击下拉图标出现操作
-        changeShowOperateContent(){
-            this.isShowOperate = !this.isShowOperate
-            document.addEventListener('click',this.closeShowOperateContent,false)
+        changeShowOperateContent() {
+            this.isShowOperate = !this.isShowOperate;
+            document.addEventListener(
+                "click",
+                this.closeShowOperateContent,
+                false
+            );
         },
 
         //关闭下拉图标
-        closeShowOperateContent(){
-          this.isShowOperate = false
-          document.removeEventListener('click',this.closeShowOperateContent)
+        closeShowOperateContent() {
+            this.isShowOperate = false;
+            document.removeEventListener("click", this.closeShowOperateContent);
         },
 
         //打开绑定邮箱弹窗
-        showBindEmailModal(){
-            this.bindEmailVisible = true
+        showBindEmailModal() {
+            this.bindEmailVisible = true;
         },
 
-        emailNextStepFun(){
-            if(!isEmail(this.email)){
-                message.error('The email format is incorrect');
-                return
+        emailNextStepFun() {
+            if (!isEmail(this.email)) {
+                message.error("The email format is incorrect");
+                return;
             }
             let data = {
-                email:this.email,
+                email: this.email,
                 operationType: "BIND_MAILBOX",
-            }
-            const hide = message.loading('loading', 0);
-            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv) =>{
-                if(rv){
-                    this.bindEmailStep = 2
-                    this.emailCode = ['','','','','',''],
-                    this.createTimer()
-                    hide()
-                    message.success('Succeeded in binding the mailbox.')
-                }
-            }).catch(res=>{
-                 hide()
-            })
+            };
+            const hide = message.loading("loading", 0);
+            Https.axiosPost(Https.httpUrls.accountSendEmail, data)
+                .then((rv) => {
+                    if (rv) {
+                        this.bindEmailStep = 2;
+                        (this.emailCode = ["", "", "", "", "", ""]),
+                            this.createTimer();
+                        hide();
+                        message.success("Succeeded in binding the mailbox.");
+                    }
+                })
+                .catch((res) => {
+                    hide();
+                });
         },
 
         //绑定邮箱的上一步
-        emailLastStepFun(){
-            this.bindEmailStep = 1
-            this.email = ''
-            this.emailCode = ['','','','','',''],
-            this.clearTimer()
+        emailLastStepFun() {
+            this.bindEmailStep = 1;
+            this.email = "";
+            (this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
         },
 
         //创建定时器
-        createTimer(){
-            this.timer = setInterval(()=>{
-                this.time--
-                if(!this.time){
-                clearInterval(this.timer)
+        createTimer() {
+            this.timer = setInterval(() => {
+                this.time--;
+                if (!this.time) {
+                    clearInterval(this.timer);
                 }
-            },1000)
+            }, 1000);
         },
 
         //清除定时器
-        clearTimer(){
-            this.time = 60
-            if(this.timer){
-                clearInterval(this.timer)
+        clearTimer() {
+            this.time = 60;
+            if (this.timer) {
+                clearInterval(this.timer);
             }
         },
 
         //登出
-        logout(){
+        logout() {
             let data = {
-                userId:this.userInfo.userId
-            }
-            Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) =>{
-                this.$router.replace('/login')
-                WriteCookie('token')
-            })
+                userId: this.userInfo.userId,
+            };
+            Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
+                this.$router.replace("/login");
+                WriteCookie("token");
+            });
         },
 
         //绑定邮箱
-        submitBindEmail(emailVerifyCode){
-             let data = {
-                userEmail:this.email,
+        submitBindEmail(emailVerifyCode) {
+            let data = {
+                userEmail: this.email,
                 userId: this.userInfo.userId,
-                emailVerifyCode:emailVerifyCode
-            }
-            Https.axiosPost(Https.httpUrls.accountBindEmail, data).then((rv) =>{
-                if(rv){
-                    this.userInfo.email = this.email
-                    setCookie('userInfo',JSON.stringify(this.userInfo))
-                    this.bindEmailVisible = false,
-                    this.bindEmailStep = 1
-                    this.clearTimer()
-                    this.emailCode = ['','','','','','']
+                emailVerifyCode: emailVerifyCode,
+            };
+            Https.axiosPost(Https.httpUrls.accountBindEmail, data).then(
+                (rv) => {
+                    if (rv) {
+                        this.userInfo.email = this.email;
+                        setCookie("userInfo", JSON.stringify(this.userInfo));
+                        (this.bindEmailVisible = false),
+                            (this.bindEmailStep = 1);
+                        this.clearTimer();
+                        this.emailCode = ["", "", "", "", "", ""];
+                    }
                 }
-            })
+            );
         },
 
         //判断是否登录
-        accountIsLogin(userInfo){
-            let data ={
-                userId:userInfo.userId
-            }
-             Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) =>{
-                if(!rv){
-                    this.$router.replace('/login')
+        accountIsLogin(userInfo) {
+            let data = {
+                userId: userInfo.userId,
+            };
+            Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) => {
+                if (!rv) {
+                    this.$router.replace("/login");
                 }
-            })
+            });
         },
 
         //点击重置判断是否长时间五操作
-        operateClick(){
-            if(this.timer){
-                clearTimeout(this.timer)
+        operateClick() {
+            if (this.timer) {
+                clearTimeout(this.timer);
             }
-            let _this = this
-            let timeNum = 1000 * 60 *120
-            this.timer = setTimeout(()=>{
-                this.modalWarning =  Modal.warning ({
-                    title: () => `You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
+            let _this = this;
+            let timeNum = 1000 * 60 * 120;
+            this.timer = setTimeout(() => {
+                this.modalWarning = Modal.warning({
+                    title: () =>
+                        `You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
                     icon: createVNode(ExclamationCircleOutlined),
-                    okText: 'Ok',
+                    okText: "Ok",
                     onOk() {
-                       _this.numTime = 30
-                       clearInterval(_this.timerSec)
-                    }
+                        _this.numTime = 30;
+                        clearInterval(_this.timerSec);
+                    },
                 });
-                _this.numCounter()
-            },timeNum)
+                _this.numCounter();
+            }, timeNum);
         },
 
-        numCounter(){
-            this.timerSec = setInterval(()=>{
-                if(this.numTime > 0){
-                    this.numTime = this.numTime - 1
-                }else{
-                    clearTimeout(this.timer)
-                    clearInterval(this.timerSec)
-                    this.logout()
-                    this.modalWarning.destroy()
+        numCounter() {
+            this.timerSec = setInterval(() => {
+                if (this.numTime > 0) {
+                    this.numTime = this.numTime - 1;
+                } else {
+                    clearTimeout(this.timer);
+                    clearInterval(this.timerSec);
+                    this.logout();
+                    this.modalWarning.destroy();
                 }
-            },1000)
-        }
-    }
-})
+            }, 1000);
+        },
+    },
+});
 </script>
 <style lang="less" scoped>
-.header_component{
+.header_component {
     display: flex;
+	justify-content: space-between;
+	padding: 0 30px;
     width: 100%;
     height: 7rem;
     background: rgba(255, 255, 255, 0.2);
-    border-bottom: 0.1rem solid rgba(3,3,3,0.1);
+    border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
     position: relative;
-
-    .header_logo{
+    align-items: center;
+	.header_right{
+		display: flex;
+		align-items: center;
+	}
+    .header_logo {
         width: 14.4rem;
         height: 3.2rem;
-        margin: 2.1rem 0 0 2.8rem;
+        margin: 2.1rem 2.8rem 0 ;
+		// position: absolute;
+		margin-top: 0;
     }
 
-    .header_nav_content{
+    .header_nav_content {
         display: flex;
-        margin-left: 28.9rem;
+        // margin-left: 28.9rem;
+		// margin-left: 46.2rem;
         align-items: center;
 
-        .nav_item{
+        .nav_item {
             padding: 1.1rem 1rem;
             border-bottom: 0.1rem solid transparent;
             margin-right: 3.4rem;
             font-size: 1.6rem;
             line-height: 1.3rem;
-            color: #333333;
+            // color: #333333;
+            color: #000;
             cursor: pointer;
-            font-weight: 500;
+            font-weight: 900;
 
-            &.select_nav{
-                background: #E6E6F6;
+            &.select_nav {
+                background: #e6e6f6;
             }
         }
     }
 
-    .header_right_content{
-        position: absolute;
+    .header_right_content {
+        // position: absolute;
         top: 0;
-        right: 3.2rem;
+        // right: 3.2rem;
+		left: 0;
         display: flex;
-
-        .header_icon{
+		width: 33%;
+        .header_icon {
             font-size: 3.6rem;
             position: relative;
             top: 0.3rem;
         }
 
-        .header_user_content{
+        .header_user_content {
             margin-left: 1rem;
             display: flex;
             align-items: center;
@@ -322,53 +404,53 @@ export default defineComponent({
             top: 1.2rem;
             height: 3.7rem;
 
-            .username{
+            .username {
                 font-size: 1.6rem;
-                color: #1A1A1A;
+                color: #1a1a1a;
                 margin-right: 0.8rem;
             }
 
-            .icon-xiala{
+            .icon-xiala {
                 font-size: 1.4rem;
                 cursor: pointer;
             }
 
-            .icon_rotate{
-                -moz-transform:rotate(180deg);
-                -webkit-transform:rotate(180deg);
+            .icon_rotate {
+                -moz-transform: rotate(180deg);
+                -webkit-transform: rotate(180deg);
                 transform: rotate(180deg);
                 animation-direction: 0.5s;
             }
 
-            .select_block{
+            .select_block {
                 position: absolute;
                 right: -1.5rem;
                 top: 3.7rem;
                 width: 11.4rem;
-                background: #FFFFFF;
-                box-shadow: 0px 0.4rem 0.4rem 0px rgba(0,0,0,0.1);
+                background: #ffffff;
+                box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
                 z-index: 9;
                 overflow: hidden;
                 border: 1px solid #000000;
 
-                .select_item{
+                .select_item {
                     padding-left: 1.5rem;
                     height: 4.1rem;
-                    color: #4D4D4D;
+                    color: #4d4d4d;
                     display: flex;
                     align-items: center;
                     cursor: pointer;
-                    user-select:none;
+                    user-select: none;
 
-                    &:hover{
-                        background: #F7F7F7;
+                    &:hover {
+                        background: #f7f7f7;
                     }
 
-                    .iconfont{
+                    .iconfont {
                         font-size: 1.4rem;
                     }
 
-                    .select_item_des{
+                    .select_item_des {
                         font-size: 1.3rem;
                         margin-left: 0.8rem;
                     }
@@ -376,32 +458,32 @@ export default defineComponent({
             }
         }
     }
+    
 }
-.modal_component{
-
-    .skip_content{
+.modal_component {
+    .skip_content {
         width: 6rem;
         height: 3rem;
         line-height: 2.8rem;
         border: 0.1rem solid #343579;
         font-size: 1.4rem;
-        color: #343579;    
+        color: #343579;
         position: absolute;
         top: 1.8rem;
         right: 1.8rem;
         cursor: pointer;
     }
-    
-    .bind_email_content{
+
+    .bind_email_content {
         padding: 4.8rem 9.2rem 6rem;
 
-        .bind_email_tip{
+        .bind_email_tip {
             font-size: 1.8rem;
-            color: #A5B0C2;
+            color: #a5b0c2;
             line-height: 1.9rem;
             text-align: center;
         }
-        .bind_email{
+        .bind_email {
             margin-top: 2rem;
             font-size: 2.2rem;
             font-weight: 400;
@@ -409,51 +491,50 @@ export default defineComponent({
             text-align: center;
         }
 
-        .bind_email_form_content{
-
-            .bind_email_form_title{
+        .bind_email_form_content {
+            .bind_email_form_title {
                 font-size: 2.2rem;
                 font-weight: bold;
                 color: #030303;
                 line-height: 2.4rem;
             }
 
-            .bind_email_form_input{
+            .bind_email_form_input {
                 width: 100%;
                 height: 4.6rem;
                 margin-top: 1rem;
-                border: 0.1rem solid #B4BED7;
+                border: 0.1rem solid #b4bed7;
                 padding-left: 2.1rem;
                 line-height: 4.6rem;
                 font-size: 1.8rem;
                 box-sizing: border-box;
 
                 &::placeholder {
-                    color:#A5B0C2,
+                    color: #a5b0c2;
                 }
             }
         }
 
-        .bind_email_submit_button{
+        .bind_email_submit_button {
             height: 4.6rem;
             line-height: 4.6rem;
             background: #343579;
             font-size: 1.6rem;
             font-weight: 500;
-            color: #FFFFFF;
+            color: #ffffff;
             width: 12.8rem;
             text-align: center;
             cursor: pointer;
             margin: 3rem auto 0;
         }
 
-        .icon--shangyibu{
+        .icon--shangyibu {
             font-size: 2.5rem;
             font-weight: bold;
             color: #030303;
         }
 
-        .email_last_step_content{
+        .email_last_step_content {
             margin-left: 1rem;
             font-size: 2.2rem;
             font-family: PingFang SC;
@@ -461,24 +542,24 @@ export default defineComponent({
             color: #030303;
         }
 
-        .tip_content{
+        .tip_content {
             font-size: 1.3rem;
             font-weight: bold;
             color: #343579;
             cursor: pointer;
         }
 
-        .email_last_step_des{
+        .email_last_step_des {
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-top: 2.5rem;
             margin-bottom: 1.5rem;
 
-            .sent_email_content{
+            .sent_email_content {
                 font-size: 1.8rem;
                 font-weight: bold;
-                color: #A5B0C2;
+                color: #a5b0c2;
             }
         }
     }
diff --git a/src/component/HomePage/MoodboardUpload.vue b/src/component/HomePage/MoodboardUpload.vue
index b16e4d67..8b66402d 100644
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -6,6 +6,9 @@
             </div>
              <div @click="openLibrary()" class="switch_type_item">
                 <span>My Library</span>
+            </div>
+			<div @click="openLibrary()" class="switch_type_item">
+                <span>Generate</span>
             </div>
             <div class="design_template_button" @click.stop="changeTemplateModal()" v-show="fileList.length>2">Design</div>
         </div>
diff --git a/src/component/HomePage/RobotAssist.vue b/src/component/HomePage/RobotAssist.vue
new file mode 100644
index 00000000..e7405dca
--- /dev/null
+++ b/src/component/HomePage/RobotAssist.vue
@@ -0,0 +1,363 @@
+<template>
+	<div class="robot" @click="robotmax">
+		<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
+			<div :class="[item.state == 1?'text_right':'text_left']" v-for="item in dialogue" ref="robotChildDom">
+				<div class="robot_text">{{item.str}}</div>
+			</div>
+		</div>
+		<div class="robot_bottom">
+			<div class="robot_input" v-fade="robotInput,'flex'">
+				<input
+					placeholder="write a message~"
+					v-model="chatCentent"
+					@keydown.enter="roborSend()"
+					@input="robotmax"
+				/>
+				<div class="robot_btn">
+					<i class="fi fi-ss-paper-plane-top" @click="roborSend"></i>
+				</div>
+			</div>
+			<div class="robot_img">
+				<img src="@/assets/images/homePage/robot.png" @click="robotBtn">
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent, createVNode, ref,Ref} from "vue";
+import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
+import { Https } from "@/tool/https";
+import { getCookie } from "@/tool/cookie";
+import axios from 'axios'
+
+import { message } from "ant-design-vue";
+export default defineComponent({
+    components: {
+        DownOutlined,
+        UserOutlined,
+    },
+	setup() {
+		const robotDom = ref<HTMLElement | null>(null);
+		const robotChildDom = ref<HTMLElement | null>(null);
+		let chatCentent = ref<string>('');
+		const robotTop = ref(false)
+		const robotInput = ref(false)
+        let timeTop:any =  0;
+        let timeInput:any =  0;
+		let dialogue:any = ref([
+			{
+				state:1,
+				str:"2222222 22222222 222"
+			},
+			{
+				state:2,
+				str:"2222 22222 22 2222 22"
+			},
+			{
+				state:1,
+				str:"222 22222 222 2222 222"
+			},
+		])
+		const userInfo:any =  {}
+		
+		return {
+		robotTop,
+		robotInput,
+		chatCentent,
+		dialogue,
+		robotDom,
+		robotChildDom,
+		timeTop,
+		timeInput,
+		userInfo,
+		};
+	},
+    data() {
+        return {
+        };
+    },
+    mounted() {
+		this.textScroll()
+		let userInfo:any = getCookie("userInfo")
+        this.userInfo = JSON.parse(userInfo);
+console.log(22);
+
+const data = {
+                "user_id": "83",
+                "session_id": "",
+                "message": "Hello, can you tell me what holiday is on July 1st",
+            };
+			
+		    axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
+					// console.log(11);
+                  //     num = progressEvent.event.currentTarget.response
+			  		console.log(progressEvent);
+
+                    },
+                }).then((res)=>{
+					console.log(res);
+				}).catch((response) => {
+                    console.log(response);
+                    // var res = http.responseText
+                });
+	},
+	directives:{
+		fade:{
+			updated (el,oldVal){
+				if(oldVal.value){
+					el.style.display = oldVal.arg
+					setTimeout(() => {
+						el.classList.add("active")
+					}, 100);
+				}else{
+					el.classList.remove("active")
+					setTimeout(() => {
+					el.style.display="none"
+					}, 100);
+				}
+			}
+		}
+	},
+    methods: {
+		robotBtn(){
+			if(!this.robotTop||!this.robotInput){
+				this.robotTop = true
+				this.robotInput = true
+				
+			}else{
+				this.robotTop = false
+				this.robotInput = false
+			}
+			this.textScroll()//聊天定位到最低部
+			this.createTimer()
+		},
+		textScroll(){
+			
+			
+			this.$nextTick(()=>{
+				if(this.robotDom && this.robotChildDom){
+				// const items = this.robotChildDom._rawValue
+				let num = 0
+				for (let index = 0; index < (this.$refs.robotChildDom as any).length; index++) {
+					const height = (this.$refs.robotChildDom as any)[index].clientHeight;
+					num = num+40+height
+				}
+				this.robotDom.scrollTop = num
+			}
+			})
+			
+		},
+		robotmax(){//点击内容就设置为true显示 重置定时器
+			this.createTimer()
+		},
+		roborSend (){
+			this.createTimer()
+			if(!this.chatCentent){
+                message.error("Please enter content");
+				return
+			}
+			this.dialogue.push({
+				state:2,
+				str:this.chatCentent
+			})
+			let a = true
+			let data = {
+				"user_id" : this.userInfo.userId,
+				// "message" : this.chatCentent,
+				"message" : "Hello, can you tell me what holiday is on July 1st",
+				
+				"session_id":""
+			}
+			console.log(getCookie('token'));
+			
+			let interaction = {onDownloadProgress: (progressEvent:any) => {
+					this.clearTimer()
+					console.log(progressEvent);
+					
+				  if(a){
+					this.dialogue.push({
+						state:1,
+						// str:progressEvent.event.currentTarget.response
+					})
+					a = false
+				  }else{
+					this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
+				  }
+                },
+            }
+			// Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
+            //     (rv: any) => {
+			// 		a = true
+			// 		this.createTimer()
+            //     }
+            // ).catch(res=>{
+			// 	this.createTimer()
+            // });
+
+			// new Promise((resolve, reject) => {
+
+				axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
+					// console.log(11);
+                  //     num = progressEvent.event.currentTarget.response
+			  		console.log(progressEvent);
+
+                    },
+                }).then((res)=>{
+					console.log(res);
+				}).catch((response) => {
+                    console.log(response);
+                    // var res = http.responseText
+                });
+			
+            // axios.post("/api/python/chatStream", data,{
+			// 	onDownloadProgress: (progressEvent:any) => {
+			// 		// this.clearTimer()
+			// 		console.log(progressEvent);
+					
+			// 	//   if(a){
+			// 	// 	this.dialogue.push({
+			// 	// 		state:1,
+			// 	// 		// str:progressEvent.event.currentTarget.response
+			// 	// 	})
+			// 	// 	a = false
+			// 	//   }else{
+			// 	// 	this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
+			// 	//   }
+            //     },
+			// 	}).then(response => {
+            //         // resolve(response)
+			// 		console.log(response);
+
+            //     }).catch((error) => {
+			// 		console.log(error);
+					
+			// 	})
+
+        // }); 
+		
+			this.chatCentent = ""
+			this.textScroll()
+
+		},
+		//创建定时器
+        createTimer() {
+			if (this.robotTop || this.robotInput) {
+				this.clearTimer()
+				this.timeTop = setInterval(() => {
+					this.robotTop = false
+				}, 10000);
+				this.timeInput = setInterval(() => {
+					this.robotInput = false
+				}, 5000);
+
+			}
+           
+        },
+
+        //清除定时器
+        clearTimer() {
+			
+			clearInterval(this.timeTop);
+			clearInterval(this.timeInput);
+        },
+    },
+});
+</script>
+<style lang="less" scoped>
+.robot{
+	position: absolute;
+	bottom: 25px;
+	right: 50px;
+	z-index: 9999;
+	// width: 400px;
+	.robot_top{
+		// width: 70%;
+		width: 250px;
+		margin-left: auto;
+		height: 140px;
+		overflow-x: hidden;
+		transition: .3s all;
+		opacity: 0;
+		display: none;
+		&.active{
+			opacity: 1;
+		}
+		&.robot_top::-webkit-scrollbar{display: none;}
+		.robot_text{
+			font-size: 14px;
+			padding: 5px 10px;
+			display: inline-block;
+			border-radius: 20px;
+			max-width: 80%;
+		}
+		.text_left,.text_right{
+			margin: 20px 0;
+			font-size: 12px;
+		}
+		.text_left{
+			display: flex;
+			justify-content: flex-start;
+			>div{
+				background-color: #e8e8ea;
+				color: #000;
+			}
+		}
+		.text_right{
+			display: flex;
+			justify-content: flex-end;
+			>div{
+				background-color: #835ff7;
+				color: #fff;
+			}
+		}
+	}
+	.robot_bottom{
+		display: flex;
+		align-items: center;
+	}
+	.robot_input{
+		border: 1px solid #d5d5d7;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 5px 10px;
+		background: #fff;
+		border-radius: 5px;
+		// height: 32px;
+		transition: .3s all;
+		opacity: 0;
+		display: none;
+		margin-right: 40px;
+		&.active{
+			opacity: 1;
+		}
+		input{
+			border: none;
+			font-size: 12px;
+			width: 250px;
+		}
+		.robot_btn{
+			display: flex;
+			height: 100%;
+			cursor: pointer;
+		}
+		.fi-ss-paper-plane-top{
+			display: flex;
+			align-items: center;
+		}
+		.fi-ss-paper-plane-top::before{
+			color: #835df8;
+		}
+	}
+	.robot_img{
+		    margin-left: auto;
+		img{
+			width: 100px;
+			width: 80px;
+			// margin-left: 40px;
+			cursor: pointer;
+
+		}
+	}
+}
+</style>
diff --git a/src/component/HomePage/collectionModal.vue b/src/component/HomePage/collectionModal.vue
index f3eb3110..00629dde 100644
--- a/src/component/HomePage/collectionModal.vue
+++ b/src/component/HomePage/collectionModal.vue
@@ -8,10 +8,10 @@
             :centered="true"
         >
             <template #title>
-                <div v-show="collectionStep === 1">Moodboard Upload</div>
-                <div v-show="collectionStep === 2"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Printboard Upload</div>
-                <div v-show="collectionStep === 3"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Colorboard Upload</div>
-                <div v-show="collectionStep === 4"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Sketchboard Upload</div>
+                <div v-show="collectionStep === 1">Moodboard</div>
+                <div v-show="collectionStep === 2"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Printboard</div>
+                <div v-show="collectionStep === 3"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Colorboard</div>
+                <div v-show="collectionStep === 4"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Sketchboard</div>
                 <div v-show="collectionStep === 5"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Markets Sketch</div>
             </template>
             <template #closeIcon>
diff --git a/src/main.ts b/src/main.ts
index 98976130..fec7fdee 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,8 +9,13 @@ import 'ant-design-vue/dist/antd.css';
 import Antd from 'ant-design-vue';
 import './assets/style/style.less'
 import VueLazyload from "vue-lazyload";
+import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css"
 flexible()
 
+// console.log(process.env)
+
+
+
 let loadingParam =  {
     loading: require('./assets/images/homePage/loading.gif'),
     attempt: 1
diff --git a/src/store/index.ts b/src/store/index.ts
index 285fb2b5..a868d635 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -2,6 +2,7 @@ import { createStore } from 'vuex'
 import UploadFilesModule from './uploadFile/uploadFile'
 import DesignDetailModule from './Detail/designDetail'
 import HomeStoreModule  from './homeStore/homeStore'
+import UserHabit  from './userHabit/userHabit'
 export interface RootState{
 
 }
@@ -18,6 +19,7 @@ export default createStore<RootState>({
   modules: {
     UploadFilesModule,
     DesignDetailModule,
-    HomeStoreModule
+    HomeStoreModule,
+	UserHabit
   }
 })
diff --git a/src/store/userHabit/userHabit.ts b/src/store/userHabit/userHabit.ts
new file mode 100644
index 00000000..5784844e
--- /dev/null
+++ b/src/store/userHabit/userHabit.ts
@@ -0,0 +1,48 @@
+import {Module} from 'vuex'
+import {RootState} from '../index'
+import { Https } from "@/tool/https";
+interface DesignDetail{
+    clothingType:any,
+    // devise:any,
+    // deviseType:any,
+    // system_per:any,
+    // model:any,
+    
+}
+
+const HomeStoreModule : Module<DesignDetail,RootState> = {
+    state:{
+        clothingType:[],
+		
+        
+    },
+    mutations:{
+        res_clothingType(state,data){
+            state.clothingType = data
+			console.log(data);
+			
+        },
+    },
+
+    actions:{
+		get_clothingType(context){
+			var arr = [{
+				id:11,
+				name:"nv"
+			},{
+				id:22,
+				name:"nan",
+			}]
+			context.commit('res_clothingType',arr)
+
+			// Https.axiosGet(url)
+			// 	.then((rv: any) => {
+			// 		context.commit('res_clothingType',rv)
+			// 	})
+			// 	.catch((rv) => {
+			// 	});
+		}
+    }
+}
+
+export default HomeStoreModule
\ No newline at end of file
diff --git a/src/tool/https.js b/src/tool/https.js
index 67ec015b..deb00a8c 100644
--- a/src/tool/https.js
+++ b/src/tool/https.js
@@ -7,10 +7,19 @@ import {getCookie} from '@/tool/cookie'
 // import cookie from '@/tools/cookie.js'
 
 axios.defaults.timeout = 60000;                        //响应时间
-axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
+axios.defaults.headers.post["Content-Type"] = "application/json";
+
+
+axios.defaults.headers.post['lang'] = 'en';        //配置语言请求头
 axios.defaults.withCredentials = true;  //跨域携带cookie
 import { message } from 'ant-design-vue';
-axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
+
+if(process.env.NODE_ENV == "development"){
+	axios.defaults.baseURL = "";   //配置接口地址
+}else{
+	axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
+}
 
 //POST传参序列化(添加请求拦截器)
 axios.interceptors.request.use((config) => {
@@ -89,6 +98,7 @@ export const Https = {
         deleteHighDesign:'/api/design/detail/deleteHighDesign',//删除高级design图片
         saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
         libraryModelsDot:'/api/library/modelsDot',//Models打点预览
+        pythonChatStream:'/api/python/chatStream',//机器人助力
      
     },
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 292226ef..b1e8cf2c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,1108 +1,1228 @@
 <template>
-    <div class="home_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="home_page_body">
-                    <div class="home_page_left">
-                        <div class="home_page_left_content">
-                            <!-- 空状态 start-->
-                            <div class="home_left_null" v-show="!isHaveReviewCollection">
-                                <div>
-                                    <img
+	<div class="home_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="home_page_body">
+					<div class="home_page_left">
+						<div class="home_page_left_content">
+							<!-- 空状态 start-->
+							<div class="home_left_null" v-show="!isHaveReviewCollection">
+								<div>
+									<!-- <img
                                         class="home_null_icon"
                                         src="@/assets/images/homePage/null_img.png"
-                                    />
-                                    <div class="new_collection_button" @click="startNewCollection()">
-                                        Start
-                                    </div>
-                                </div>
-                                <div class="is_finish_loading" v-show="isFinishLoading">
-                                    <a-spin size="large"></a-spin>
-                                </div>
-                            </div>
-                            <!-- 空状态 end-->
+                                    /> -->
+									<div class="new_collection_button" @click="startNewCollection()">
+										Get Started
+									</div>
+								</div>
+								<div class="is_finish_loading" v-show="isFinishLoading">
+									<a-spin size="large"></a-spin>
+								</div>
+							</div>
+							<!-- 空状态 end-->
 
-                            <!-- 有图状态 start-->
-                            <div class="home_left_info" v-show="isHaveReviewCollection">
+							<!-- 有图状态 start-->
+							<div class="home_left_info" v-show="isHaveReviewCollection">
 								<div class="left_info_top">
-									<div class="button_second" @click="startNewCollection()">Start</div>
-									<div class="button_first button_margin" @click="recollection()">Edit</div>
+									<div class="button_second" @click="startNewCollection()">
+										Start
+									</div>
+									<div class="button_first button_margin" @click="recollection()">
+										Edit
+									</div>
 								</div>
 								<div class="left_info_content scroll_style">
 									<div class="left_info_content_body" ref="collection_canvas">
-                                        <NewCollectionReview id="collectionReview"></NewCollectionReview>
-                                    </div>
+										<NewCollectionReview id="collectionReview"></NewCollectionReview>
+									</div>
 								</div>
 							</div>
-                            <!-- 有图状态 end-->
-                        </div>
-                    </div>
-                    <div class="home_page_right">
-                        <div class="right_top">
-                            <div class="right_top_left">
-                                <div class="button_second"  @click="designNewCollection()">
-                                    Design
-                                </div>
-                                <div class="button_first button_margin_14"  v-show="designCollectionId" @click="resDesignCollection()">
-                                    Redesign
-                                </div>
-                                <div class="system_scale">
-                                    <div class="system_silder">
-                                        <a-slider
-                                            id="system_silder"
-                                            :tooltipVisible="true"
-                                            v-model:value="system_scale_value"
-                                            :tip-formatter="formatter"
-                                            :getTooltipPopupContainer="(triggerNode) => triggerNode.parentNode"
-                                        />
-                                    </div>
-                                     <div class="sacle_left_tip">
-                                        Designer
-                                    </div>
-                                    <div class="sacle_right_tip">
-                                        System
-                                    </div>
-                                </div>
+							<!-- 有图状态 end-->
+						</div>
+					</div>
+					<div class="home_page_right">
+						<div class="right_top">
+							<div class="right_top_left">
+								<div class="button_second" @click="designNewCollection()">
+									Design
+								</div>
+								<div class="button_first button_margin_14" v-show="designCollectionId"
+									@click="resDesignCollection()">
+									Redesign
+								</div>
+								<div class="system_scale">
+									<div class="system_silder">
+										<a-slider id="system_silder" :tooltipVisible="true"
+											v-model:value="system_scale_value" :tip-formatter="formatter"
+											:getTooltipPopupContainer="(triggerNode) =>
+													triggerNode.parentNode
+												" />
+									</div>
+									<div class="sacle_left_tip">Designer</div>
+									<div class="sacle_right_tip">System</div>
+								</div>
 
-                                <div
-                                    class="switch_component_block"
-                                    @click="change_switch()"
-                                >
-                                    <div class="switch_item">Outfit</div>
-                                    <div class="switch_item">Category</div>
-                                    <div
-                                        :class="[
-                                            'switch_white_button',
-                                            switch_open
-                                                ? 'switch_open_button'
-                                                : '',
-                                        ]"
-                                    >
-                                    {{switch_open ? 'Category':'Outfit'}}
-                                    </div>
-                                </div>
-                                <div class="select_block" v-show="!switch_open">
-                                    <a-select
-                                        ref="select"
-                                        v-model:value="designType"
-                                        :options="disignTypeList"
-                                    >
-                                        <template #suffixIcon
-                                            ><span
-                                                class="icon iconfont icon-xiala"
-                                                style="color: #343579"
-                                            ></span
-                                        ></template>
-                                    </a-select>
-                                </div>
-                            </div>
-                            <div class="right_top_right">
-                                <div class="content_header_button" @click="selectModels()">
-                                    <span class="content_header_button_des">Mannequins</span><span class="icon iconfont icon-xiala"></span>
-                                </div>
-                            </div>
-                        </div>
+								<div class="switch_component_block" @click="change_switch()">
+									<div class="switch_item">Outfit</div>
+									<div class="switch_item">Category</div>
+									<div :class="[
+										'switch_white_button',
+										switch_open
+											? 'switch_open_button'
+											: '',
+									]">
+										{{
+											switch_open ? "Category" : "Outfit"
+										}}
+									</div>
+								</div>
+								<div class="select_block" v-show="!switch_open">
+									<a-select ref="select" v-model:value="designType" :options="disignTypeList">
+										<template #suffixIcon><span class="icon iconfont icon-xiala"
+												style="color: #343579"></span></template>
+									</a-select>
+								</div>
+							</div>
+							<div class="right_top_right">
+								<div class="content_header_button" @click="selectModels()">
+									<span class="content_header_button_des">Mannequins</span><span
+										class="icon iconfont icon-xiala"></span>
+								</div>
+							</div>
+						</div>
 
-                        <div class="right_content_block">
-                            <div class="right_content_header">
-                                <div class="content_header_left">
-                                    <span class="icon iconfont icon-dangqianweizhi"></span><span class="content_header_des">Generated Design</span>
-                                </div>
-                                
-                            </div>
-                            
-                            <div class="right_content_body">
-                                <div class="right_content_img_block scroll_style">
-                                    <div class="content_img_block" v-for="(design,index) in designCollectionList" :key="design?.designItemId" @click="designDetail(design,index,designCollectionList,'dislike')">
-                                        <div class="content_img_flex"><img class="content_img" :src="design.designItemUrl"></div>
-                                        <div class="icon iconfont icon-jushoucang icon_like" @click.stop="likeDesignCollection(design,index)"></div>
-                                    </div>
-                                </div>
-                            </div>
+						<div class="right_content_block">
+							<div class="right_content_header">
+								<div class="content_header_left">
+									<i class="fi fi-rs-comments"></i><span class="content_header_des">Generated
+										Design</span>
+								</div>
+							</div>
 
-                            <div class="right_content_header">
-                                <div class="content_header_left">
-                                    <span class="icon iconfont icon-dangqianweizhi"></span><span class="content_header_des">Selected Design</span>
-                                </div>
-                                <div class="button_second" v-show="likeDesignCollectionList.length" @click="exportCanvas()">Export</div>
-                            </div>
-                            
-                            <div class="right_content_body">
-                                <div class="right_content_img_block scroll_style">
-                                    <div class="content_img_block" v-for="(design,index) in likeDesignCollectionList" :key="design?.id" @click="designDetail(design,index,likeDesignCollectionList,'like')">
-                                        <div class="content_img_flex"><img class="content_img" v-lazy="design.designItemUrl" :key="design.designItemUrl"></div>
-                                        <div class="icon iconfont icon-jushoucanggift icon_like"  @click.stop="dislikeDesignCollection(design,index)"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                    </div>
-                </div>
-            </div>
-        </div>
-        <CollectionModal ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
-        <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
-        <ModelsModal ref="modelsModal" @sureSelectModel="sureSelectModel"></ModelsModal>
-        <ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
-        <!-- 导出缩略图的蒙层 start-->
-        <div class="mark_loading" v-show="isShowMark">
-            <a-spin size="large" />
-        </div>
-        <!-- 导出缩略图的蒙层 end-->
+							<div class="right_content_body">
+								<div class="right_content_img_block scroll_style">
+									<div class="content_img_block" v-for="(
+                                            design, index
+                                        ) in designCollectionList" :key="design?.designItemId" @click="
+                                        	designDetail(
+                                        		design,
+                                        		index,
+                                        		designCollectionList,
+                                        		'dislike'
+                                        	)
+                                        	">
+										<div class="content_img_flex">
+											<img class="content_img" :src="design.designItemUrl" />
+										</div>
+										<div class="icon iconfont icon-jushoucang icon_like" @click.stop="
+											likeDesignCollection(
+												design,
+												index
+											)
+											"></div>
+									</div>
+								</div>
+							</div>
 
-        <!-- design collection的进度蒙层  start-->
-        <div class="progress_mark" v-show="showDesignMark">
-            <div class="mark_content">
-                 <a-progress type="circle" :percent="designProgress" :width="200"/>
-                 <div>
-                    <a-spin :indicator="indicator"/>
-                 </div>
-            </div>
-        </div>
-        <!-- design collection的进度蒙层  end-->
-    </div>
+							<div class="right_content_header">
+								<div class="content_header_left">
+									<i class="fi fi-rs-comments"></i><span class="content_header_des">Selected Design</span>
+								</div>
+								<div class="button_second" v-show="likeDesignCollectionList.length" @click="exportCanvas()">
+									Export
+								</div>
+							</div>
+
+							<div class="right_content_body">
+								<div class="right_content_img_block scroll_style">
+									<div class="content_img_block" v-for="(
+                                            design, index
+                                        ) in likeDesignCollectionList" :key="design?.id" @click="
+                                        	designDetail(
+                                        		design,
+                                        		index,
+                                        		likeDesignCollectionList,
+                                        		'like'
+                                        	)
+                                        	">
+										<div class="content_img_flex">
+											<img class="content_img" v-lazy="design.designItemUrl"
+												:key="design.designItemUrl" />
+										</div>
+										<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
+											dislikeDesignCollection(
+												design,
+												index
+											)
+											"></div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<RobotAssist class="robot"></RobotAssist>
+		</div>
+		<CollectionModal ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
+		<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
+		<ModelsModal ref="modelsModal" @sureSelectModel="sureSelectModel"></ModelsModal>
+		<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
+		<!-- 导出缩略图的蒙层 start-->
+		<div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div>
+		<!-- 导出缩略图的蒙层 end-->
+
+		<!-- design collection的进度蒙层  start-->
+		<div class="progress_mark" v-show="showDesignMark">
+			<div class="mark_content">
+				<a-progress type="circle" :percent="designProgress" :width="200" />
+				<div>
+					<a-spin :indicator="indicator" />
+				</div>
+			</div>
+		</div>
+		<!-- design collection的进度蒙层  end-->
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent,h,ref,computed} from "vue";
+import { defineComponent, h, ref, computed ,inject} from "vue";
 import HeaderComponent from "@/component/HomePage/Header.vue";
-import CollectionModal from "@/component/HomePage/collectionModal.vue"
-import NewCollectionReview from '@/component/HomePage/NewCollectionReview.vue'
-import ExportNewCoolection from '@/component/HomePage/ExportNewCoolection.vue'
-import ModelsModal from '@/component/LibraryPage/ModelsModal.vue'
-import DesignDetail from '@/component/Detail/DesignDetail.vue'
-import html2canvas from 'html2canvas';
-import { message } from 'ant-design-vue';
-import {useStore} from 'vuex'
+import CollectionModal from "@/component/HomePage/collectionModal.vue";
+import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
+import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
+import ModelsModal from "@/component/LibraryPage/ModelsModal.vue";
+import DesignDetail from "@/component/Detail/DesignDetail.vue";
+import RobotAssist from "@/component/HomePage/RobotAssist.vue";
+import html2canvas from "html2canvas";
+import { message } from "ant-design-vue";
+import { useStore } from "vuex";
 import { Https } from "@/tool/https";
-import {rgbToHsv, dataURLtoBlob} from '@/tool/util'
-import { LoadingOutlined } from '@ant-design/icons-vue';
-import JSZip from 'jszip'
-const FileSaver = require('file-saver');
+import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import JSZip from "jszip";
+const FileSaver = require("file-saver");
 
 export default defineComponent({
-    components: {
-        HeaderComponent,
-        CollectionModal,
-        NewCollectionReview,
-        DesignDetail,
-        ModelsModal,
-        ExportNewCoolection,
-    },
-    setup(){
-        const store = useStore();
-        let likeDesignCollectionList:any = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
-        let designCollectionList:any = computed(()=>{return store.state.HomeStoreModule.designCollectionList})
-        let templateId:any = computed(()=>{return store.state.HomeStoreModule.templateId})//模特id
-        let userGroupId:any = computed(()=>{return store.state.HomeStoreModule.userGroupId})//模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
-        let designCollectionId:any = computed(()=>{return store.state.HomeStoreModule.designCollectionId})
-        let designId:any = computed(()=>{return store.state.HomeStoreModule.designId})
-        return {
-            store,
-            likeDesignCollectionList,
-            designCollectionList,
-            userGroupId,
-            templateId,
-            designCollectionId,
-            designId
-        }
-    },
-    data() {
-        return {
-            system_scale_value: 30,
-            switch_open: true,
-            designType: "Outwear",
-            isHaveReviewCollection:false,
-            isFinishLoading:false,
-            isShowMark:false,//导出的loading蒙层
-            disignTypeList: [
-                {
-                    value: "Outwear",
-                    label: "Outwear",
-                },
-                {
-                    value: "Blouse",
-                    label: "Blouse",
-                },
-                {
-                    value: "Dress",
-                    label: "Dress",
-                },
-                {
-                    value: "Trousers",
-                    label: "Trousers",
-                },
-                {
-                    value: "Skirt",
-                    label: "Skirt",
-                },
-            ],
-            indicator : h(LoadingOutlined, {
-                style: {
-                    fontSize: '4.8rem',
-                    marginTop:'3rem',
-                },
-                spin: true,
-            }),
-            designProgress:0,
-            showDesignMark:false,
-            startDesignType:'design',//设计类型 design 和 resdesign
-            disLikeLoading:false,//不喜欢防抖
-            likeLoading:false,//喜欢防抖
-        };
-    },
-    mounted(){
-        let noRefresh = this.$route.params.noRefresh //判断是否主动刷新还是路由跳转过来的 true 路由跳转过来的
-        if(noRefresh){
-            let colorBoards = this.store.state.UploadFilesModule.allBoardData.colorBoards || []
-            if(colorBoards.length){
-                this.isHaveReviewCollection = true
-            }
-        }else{
-            this.store.commit('setUserGroupId',this.$route.params.id)
-            this.store.commit('clearAllCollection')
-        }
-         if(this.$route.params.id){
-            this.getHistoryChoose(this.$route.params.id,'normal')
-        }else{
-            this.store.commit('clearAllData')
-        }
-    },
-    methods: {
-        change_switch() {
-            this.switch_open = !this.switch_open;
-        },
+	components: {
+		HeaderComponent,
+		CollectionModal,
+		NewCollectionReview,
+		DesignDetail,
+		ModelsModal,
+		ExportNewCoolection,
+		RobotAssist,
+	},
+	setup() {
+		const store = useStore();
+		let likeDesignCollectionList: any = computed(() => {
+			return store.state.HomeStoreModule.likeDesignCollectionList;
+		});
+		let designCollectionList: any = computed(() => {
+			return store.state.HomeStoreModule.designCollectionList;
+		});
+		let templateId: any = computed(() => {
+			return store.state.HomeStoreModule.templateId;
+		}); //模特id
+		let userGroupId: any = computed(() => {
+			return store.state.HomeStoreModule.userGroupId;
+		}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
+		let designCollectionId: any = computed(() => {
+			return store.state.HomeStoreModule.designCollectionId;
+		});
+		let designId: any = computed(() => {
+			return store.state.HomeStoreModule.designId;
+		});
+		return {
+			store,
+			likeDesignCollectionList,
+			designCollectionList,
+			userGroupId,
+			templateId,
+			designCollectionId,
+			designId,
+		};
+	},
+	data() {
+		return {
+			system_scale_value: 30,
+			switch_open: true,
+			designType: "Outwear",
+			isHaveReviewCollection: false,
+			isFinishLoading: false,
+			isShowMark: false, //导出的loading蒙层
+			disignTypeList: [
+				{
+					value: "Outwear",
+					label: "Outwear",
+				},
+				{
+					value: "Blouse",
+					label: "Blouse",
+				},
+				{
+					value: "Dress",
+					label: "Dress",
+				},
+				{
+					value: "Trousers",
+					label: "Trousers",
+				},
+				{
+					value: "Skirt",
+					label: "Skirt",
+				},
+			],
+			indicator: h(LoadingOutlined, {
+				style: {
+					fontSize: "4.8rem",
+					marginTop: "3rem",
+				},
+				spin: true,
+			}),
+			designProgress: 0,
+			showDesignMark: false,
+			startDesignType: "design", //设计类型 design 和 resdesign
+			disLikeLoading: false, //不喜欢防抖
+			likeLoading: false, //喜欢防抖
+		};
+	},
+	mounted() {
+		this.store.dispatch('get_clothingType')
 
-        formatter(value:number){
-            return `${value}%`;
-        },
-        //开始设计collection
-        startNewCollection(){
-            let collectionModal:any = this.$refs.collectionModal
-            this.store.commit('clearAllData')
-            collectionModal.changeCollectionModal(true)
-        },
+		// console.log(this.store.state.UserHabit);
+		
+		let noRefresh = this.$route.params.noRefresh; //判断是否主动刷新还是路由跳转过来的 true 路由跳转过来的
+		if (noRefresh) {
+			let colorBoards =
+				this.store.state.UploadFilesModule.allBoardData.colorBoards ||
+				[];
+			if (colorBoards.length) {
+				this.isHaveReviewCollection = true;
+			}
+		} else {
+			this.store.commit("setUserGroupId", this.$route.params.id);
+			this.store.commit("clearAllCollection");
+		}
+		if (this.$route.params.id) {
+			this.getHistoryChoose(this.$route.params.id, "normal");
+		} else {
+			this.store.commit("clearAllData");
+		}
+	},
+	methods: {
+		change_switch() {
+			this.switch_open = !this.switch_open;
+		},
 
-        //recollection
-        recollection(){
-            let collectionModal:any = this.$refs.collectionModal
-            this.store.commit('clearAllData')
-            collectionModal.changeCollectionModal(true)
-            collectionModal.recollection()
-        },
+		formatter(value: number) {
+			return `${value}%`;
+		},
+		//开始设计collection
+		startNewCollection() {
+			let collectionModal: any = this.$refs.collectionModal;
+			this.store.commit("clearAllData");
+			collectionModal.changeCollectionModal(true);
+		},
 
-        //完成设计
-        finishCollection(){
-            let _this = this
-            _this.isFinishLoading = true
-            this.getPantongName().then(res=>{
-                _this.store.commit('setAllBoardData')
-                _this.isHaveReviewCollection = true
-                _this.isFinishLoading = true
-            }).catch(res=>{
-                _this.isFinishLoading = false
-            })
-            
-        },
+		//recollection
+		recollection() {
+			let collectionModal: any = this.$refs.collectionModal;
+			this.store.commit("clearAllData");
+			collectionModal.changeCollectionModal(true);
+			collectionModal.recollection();
+		},
 
-        //查询颜色的潘通值和txc
-        getPantongName(){
-            let colorBoards = this.store.state.UploadFilesModule.colorBoards
-            let data:any = []
-            for(let v of colorBoards){
-                let color:any = [v.rgbValue.r,v.rgbValue.g,v.rgbValue.b]
-                let hsv = rgbToHsv(color)
-                v.hsv = hsv[0] + hsv[1] + hsv[2]
-                data.push({
-                    h:hsv[0],
-                    s:hsv[1],
-                    v:hsv[2],
-                })
-            }
-            return new Promise((resolve:any, reject:any)=>{
-                Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data).then(
-                    (rv: any) => {
-                        if (rv) {
-                            rv.forEach((ele:any,index:number) => {
-                                colorBoards[index].id = ele.id
-                                colorBoards[index].tcx = ele.tcx
-                                colorBoards[index].name = ele.name
-                            });
-                            this.store.commit('setColorboardList',colorBoards)
-                            resolve()
-                        }
-                    }
-                ).catch(res=>{
-                    reject()
-                });
-            })
-        },
+		//完成设计
+		finishCollection() {
+			let _this = this;
+			_this.isFinishLoading = true;
+			this.getPantongName()
+				.then((res) => {
+					_this.store.commit("setAllBoardData");
+					_this.isHaveReviewCollection = true;
+					_this.isFinishLoading = true;
+				})
+				.catch((res) => {
+					_this.isFinishLoading = false;
+				});
+		},
 
-        getContainer(){
-            return document.querySelector("#system_silder")
-        },
+		//查询颜色的潘通值和txc
+		getPantongName() {
+			let colorBoards = this.store.state.UploadFilesModule.colorBoards;
+			let data: any = [];
+			for (let v of colorBoards) {
+				let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
+				let hsv = rgbToHsv(color);
+				v.hsv = hsv[0] + hsv[1] + hsv[2];
+				data.push({
+					h: hsv[0],
+					s: hsv[1],
+					v: hsv[2],
+				});
+			}
+			return new Promise((resolve: any, reject: any) => {
+				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
+					.then((rv: any) => {
+						if (rv) {
+							rv.forEach((ele: any, index: number) => {
+								colorBoards[index].id = ele.id;
+								colorBoards[index].tcx = ele.tcx;
+								colorBoards[index].name = ele.name;
+							});
+							this.store.commit("setColorboardList", colorBoards);
+							resolve();
+						}
+					})
+					.catch((res) => {
+						reject();
+					});
+			});
+		},
 
-        //设计新的collection
-        designNewCollection(){
-            let {colorBoards} = this.store.state.UploadFilesModule.allBoardData
-            if(!colorBoards  ||  colorBoards?.length < 1){
-                message.error('You must choose one or more colors for further process.')
-                return
-            }
-            let data = this.getDesignData('')
-            Https.axiosPost(Https.httpUrls.designCollection, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.store.commit('setDesignCollectionList',rv.designCollectionItems)
-                        this.store.commit('setLikeDesignCollectionList',[])
-                        this.store.commit('deleteUserGroupId')
-                        this.store.commit('setDesignCollectionId',rv.collectionId)
-                        this.store.commit('setDesignId',rv.designId)
-                        this.showDesignMark = false
-                        this.designProgress = 0
-                        this.startDesignType = 'design'
-                    }
-                }
-            ).catch(res=>{
-                this.showDesignMark = false
-            });
-            this.getDesignProcess()
-        },
+		getContainer() {
+			return document.querySelector("#system_silder");
+		},
 
-        //重新设计collection
-        resDesignCollection(){
-            let {colorBoards} = this.store.state.UploadFilesModule.allBoardData
-            if(!colorBoards  ||  colorBoards?.length < 1){
-                message.error('You must choose one or more colors for further process.')
-                return
-            }
-            
-            let data = this.getDesignData(this.designCollectionId)
-            Https.axiosPost(Https.httpUrls.reDesignCollection, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.store.commit('setDesignCollectionList',rv.designCollectionItems)
-                        this.showDesignMark = false
-                        this.designProgress = 0,
-                        this.startDesignType = 'resDesign'
-                    }
-                }
-            ).catch(res=>{
-                this.showDesignMark = false
-            });
-            this.getDesignProcess()
-        },
+		//设计新的collection
+		designNewCollection() {
+			let { colorBoards } =
+				this.store.state.UploadFilesModule.allBoardData;
+			if (!colorBoards || colorBoards?.length < 1) {
+				message.error(
+					"You must choose one or more colors for further process."
+				);
+				return;
+			}
+			let data = this.getDesignData("");
+			Https.axiosPost(Https.httpUrls.designCollection, data)
+				.then((rv: any) => {
+					if (rv) {
+						this.store.commit(
+							"setDesignCollectionList",
+							rv.designCollectionItems
+						);
+						this.store.commit("setLikeDesignCollectionList", []);
+						this.store.commit("deleteUserGroupId");
+						this.store.commit(
+							"setDesignCollectionId",
+							rv.collectionId
+						);
+						this.store.commit("setDesignId", rv.designId);
+						this.showDesignMark = false;
+						this.designProgress = 0;
+						this.startDesignType = "design";
+					}
+				})
+				.catch((res) => {
+					this.showDesignMark = false;
+				});
+			this.getDesignProcess();
+		},
 
-        getDesignData(designCollectionId:any){
-            let {moodboardFiles, printboardFiles,generatePrintFiles, colorBoards, skecthboardFiles, marketingSketchFiles,moodTemplateId} = this.store.state.UploadFilesModule.allBoardData
-            let new_printboardFiles = printboardFiles.concat(generatePrintFiles)
-            let data:any = {
-                colorBoards:this.getColorBoard(colorBoards),
-                marketingSketchs:this.getBoardId(marketingSketchFiles),
-                moodBoards:this.getBoardId(moodboardFiles),
-                printBoards:this.getPrintId(new_printboardFiles),
-                sketchBoards:this.getSkecthBoard(skecthboardFiles),
-                switchCategory:!this.switch_open ? this.designType : '',
-                singleOverall:!this.switch_open ? 'single' : 'overall',
-                systemScale:this.system_scale_value / 100,
-                templateId:this.templateId,
-                moodTemplateId:moodTemplateId ? String(moodTemplateId) : null,
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            }
-            if(designCollectionId){
-                data.collectionId = designCollectionId
-            }
-            this.designProgress = 0
-            this.showDesignMark = true
-            return data
-        },
+		//重新设计collection
+		resDesignCollection() {
+			let { colorBoards } =
+				this.store.state.UploadFilesModule.allBoardData;
+			if (!colorBoards || colorBoards?.length < 1) {
+				message.error(
+					"You must choose one or more colors for further process."
+				);
+				return;
+			}
 
-        //deisgn的进度
-        getDesignProcess(){
-            Https.axiosPost(Https.httpUrls.countDesignProcess, {}).then(
-                (rv: any) => {
-                   if(rv < 1 && this.showDesignMark){
-                       this.designProgress = rv * 100
-                        setTimeout(()=>{
-                            this.getDesignProcess()
-                        },1000)
-                   }
-                }
-            );
-        },
+			let data = this.getDesignData(this.designCollectionId);
+			Https.axiosPost(Https.httpUrls.reDesignCollection, data)
+				.then((rv: any) => {
+					if (rv) {
+						this.store.commit(
+							"setDesignCollectionList",
+							rv.designCollectionItems
+						);
+						this.showDesignMark = false;
+						(this.designProgress = 0),
+							(this.startDesignType = "resDesign");
+					}
+				})
+				.catch((res) => {
+					this.showDesignMark = false;
+				});
+			this.getDesignProcess();
+		},
 
-        getBoardId(boardData:any){
-            let dataList = boardData.map((v:any)=>{
-                let data:any = {
-                    id:v.resData.id,
-                    designType:v.resData.designType,
-                }
-                return data
-            })
-            return dataList
-        },
+		getDesignData(designCollectionId: any) {
+			let {
+				moodboardFiles,
+				printboardFiles,
+				generatePrintFiles,
+				colorBoards,
+				skecthboardFiles,
+				marketingSketchFiles,
+				moodTemplateId,
+			} = this.store.state.UploadFilesModule.allBoardData;
+			let new_printboardFiles =
+				printboardFiles.concat(generatePrintFiles);
+			let data: any = {
+				colorBoards: this.getColorBoard(colorBoards),
+				marketingSketchs: this.getBoardId(marketingSketchFiles),
+				moodBoards: this.getBoardId(moodboardFiles),
+				printBoards: this.getPrintId(new_printboardFiles),
+				sketchBoards: this.getSkecthBoard(skecthboardFiles),
+				switchCategory: !this.switch_open ? this.designType : "",
+				singleOverall: !this.switch_open ? "single" : "overall",
+				systemScale: this.system_scale_value / 100,
+				templateId: this.templateId,
+				moodTemplateId: moodTemplateId ? String(moodTemplateId) : null,
+				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			};
+			if (designCollectionId) {
+				data.collectionId = designCollectionId;
+			}
+			this.designProgress = 0;
+			this.showDesignMark = true;
+			return data;
+		},
 
-        getPrintId(boardData:any){
-            let dataList = boardData.map((v:any)=>{
-                let data:any = {
-                    id:v.resData.id,
-                    designType:v.resData.designType,
-                    isPin:v.pin ? 1 : 0,
-                }
-                return data
-            })
-            return dataList
-        },
+		//deisgn的进度
+		getDesignProcess() {
+			Https.axiosPost(Https.httpUrls.countDesignProcess, {}).then(
+				(rv: any) => {
+					if (rv < 1 && this.showDesignMark) {
+						this.designProgress = rv * 100;
+						setTimeout(() => {
+							this.getDesignProcess();
+						}, 1000);
+					}
+				}
+			);
+		},
 
-        getSkecthBoard(boardData:any){
-            let sketchBoards = boardData.map((v:any)=>{
-                let data = {
-                    designType:v.resData.designType,
-                    isPin:v.pin ? 1 : 0,
-                    level2Type:v.category,
-                    sketchBoardId:v.resData.id
-                }
-                return data
-            })
-            return sketchBoards
-        },
+		getBoardId(boardData: any) {
+			let dataList = boardData.map((v: any) => {
+				let data: any = {
+					id: v.resData.id,
+					designType: v.resData.designType,
+				};
+				return data;
+			});
+			return dataList;
+		},
 
-        getColorBoard(boardData:any){
-            let colorBoards = boardData.map((v:any)=>{
-                let data = {
-                    id:v.id,
-                    name:v.name,
-                    tcx:v.tcx,
-                    rgbValue:''
-                }
-                data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`
-                return data
-            })
-            return colorBoards
-        },
+		getPrintId(boardData: any) {
+			let dataList = boardData.map((v: any) => {
+				let data: any = {
+					id: v.resData.id,
+					designType: v.resData.designType,
+					isPin: v.pin ? 1 : 0,
+				};
+				return data;
+			});
+			return dataList;
+		},
 
-        likeDesignCollection(design:any,index:any){
-            let data = {
-                designItemId:design.designItemId,
-                userGroupId:this.userGroupId,
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            }
-            if(this.likeLoading){
-                return
-            }
-            this.likeLoading = true
-            Https.axiosPost(Https.httpUrls.designLike, data).then(
-                (rv: any) => {
-                   if(rv){
-                       this.store.commit('setUserGroupId',rv.userGroupId)
-                       design.groupDetailId = rv.groupDetailId
-                       this.store.commit('addLikeDesignCollectionList',design)
-                       this.store.commit('deleteDesignCollectionList',index)
-                       if(this.startDesignType === 'resDesign'){
-                           this.getHistoryChoose(this.userGroupId,'like')
-                       }
-                       
-                   }
-                   this.likeLoading = false
-                }
-            ).catch(rv=>{
-                this.likeLoading = false
-            });
-        },
+		getSkecthBoard(boardData: any) {
+			let sketchBoards = boardData.map((v: any) => {
+				let data = {
+					designType: v.resData.designType,
+					isPin: v.pin ? 1 : 0,
+					level2Type: v.category,
+					sketchBoardId: v.resData.id,
+				};
+				return data;
+			});
+			return sketchBoards;
+		},
 
-        //不喜欢设计
-        dislikeDesignCollection(design:any,index:any){
-             let data = {
-                designId:design.designId || this.designId,
-                groupDetailId:design.groupDetailId,
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            }
-            if(this.disLikeLoading){
-                return
-            }
-            this.disLikeLoading = true
-            Https.axiosPost(Https.httpUrls.designDislike, data).then(
-                (rv: any) => {
-                   if(rv){
-                       this.store.commit('addDesignCollectionList',design)
-                       this.store.commit('deleteLikeDesignCollectionList',index)
-                       if(!this.likeDesignCollectionList.length){
-                           this.store.commit('deleteUserGroupId')
-                       }
-                   }
-                   this.disLikeLoading = false
-                }
-            ).catch(rv=>{
-                this.disLikeLoading = false
-            });
-        },
+		getColorBoard(boardData: any) {
+			let colorBoards = boardData.map((v: any) => {
+				let data = {
+					id: v.id,
+					name: v.name,
+					tcx: v.tcx,
+					rgbValue: "",
+				};
+				data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
+				return data;
+			});
+			return colorBoards;
+		},
 
-        //获取选择的组
-        getHistoryChoose(userGroupId:any,type:any){
-            this.isShowMark = true
-            let url = Https.httpUrls.historyChoose  + `?userGroupId=${userGroupId}`
-            Https.axiosGet(url).then(
-                (rv: any) => {
-                    this.dealHistoryChooseData(rv,type)
-                    this.isShowMark = false
-                }
-            ).catch(rv=>{
-                this.isShowMark = false
-            });
-        },
+		likeDesignCollection(design: any, index: any) {
+			let data = {
+				designItemId: design.designItemId,
+				userGroupId: this.userGroupId,
+				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			};
+			if (this.likeLoading) {
+				return;
+			}
+			this.likeLoading = true;
+			Https.axiosPost(Https.httpUrls.designLike, data)
+				.then((rv: any) => {
+					if (rv) {
+						this.store.commit("setUserGroupId", rv.userGroupId);
+						design.groupDetailId = rv.groupDetailId;
+						this.store.commit(
+							"addLikeDesignCollectionList",
+							design
+						);
+						this.store.commit("deleteDesignCollectionList", index);
+						if (this.startDesignType === "resDesign") {
+							this.getHistoryChoose(this.userGroupId, "like");
+						}
+					}
+					this.likeLoading = false;
+				})
+				.catch((rv) => {
+					this.likeLoading = false;
+				});
+		},
 
-        //处理选择组的数据
-        dealHistoryChooseData(data:any,type:any){
-            let collectionData = {
-                moodboardFiles:this.dealViewChooseData(data.collection.moodBoards),
-                printboardFiles:this.dealViewChooseData(data.collection.printBoards),
-                generatePrintFiles:[],
-                colorBoards:this.dealViewChooseColor(data.collection.colorBoards),
-                skecthboardFiles:this.dealViewChooseData(data.collection.sketchBoards),
-                marketingSketchFiles:this.dealViewChooseData(data.collection.marketingSketchs),
-                moodTemplateId:data.collection.moodTemplateId
-            }
-            this.store.commit('setAllBoardDataChoose',collectionData)
-            this.designCollectionId =  this.store.commit('setDesignCollectionId',data.collection.collectionId)
-            this.isHaveReviewCollection = true
-            if(type === 'normal'){
-                 let likeDesignCollectionList = data.userLikeDetails.map((v:any)=>{
-                    let data = {
-                        ...v,
-                        groupDetailId:v.id,
-                        designItemUrl:v.url,
-                    }
-                    return data
-                })
-                this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
-            }
-           
-        },
+		//不喜欢设计
+		dislikeDesignCollection(design: any, index: any) {
+			let data = {
+				designId: design.designId || this.designId,
+				groupDetailId: design.groupDetailId,
+				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			};
+			if (this.disLikeLoading) {
+				return;
+			}
+			this.disLikeLoading = true;
+			Https.axiosPost(Https.httpUrls.designDislike, data)
+				.then((rv: any) => {
+					if (rv) {
+						this.store.commit("addDesignCollectionList", design);
+						this.store.commit(
+							"deleteLikeDesignCollectionList",
+							index
+						);
+						if (!this.likeDesignCollectionList.length) {
+							this.store.commit("deleteUserGroupId");
+						}
+					}
+					this.disLikeLoading = false;
+				})
+				.catch((rv) => {
+					this.disLikeLoading = false;
+				});
+		},
 
-        //统一处理选择组的渲染数据
-        dealViewChooseData(data:any){
-            if(!data){
-                return []
-            }
-            let filesList = data.map((v:any)=>{
-                let newData:any = {
-                    imgUrl:v.url,
-                    id:v.id,
-                    status:'done',
-                    resData:v,
-                }
-                if(v.level1Type === 'Sketchboard'){
-                    newData.pin = v.isPin
-                    newData.category = v.level2Type
-                }
-                if(v.level1Type === 'Printboard'){
-                    newData.pin = v.isPin
-                }
-                return newData
-            })
-            return filesList
-        },
+		//获取选择的组
+		getHistoryChoose(userGroupId: any, type: any) {
+			this.isShowMark = true;
+			let url =
+				Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
+			Https.axiosGet(url)
+				.then((rv: any) => {
+					this.dealHistoryChooseData(rv, type);
+					this.isShowMark = false;
+				})
+				.catch((rv) => {
+					this.isShowMark = false;
+				});
+		},
 
-         //统一处理选择组的渲染数据
-        dealViewChooseColor(data:any){
-            let colorList = data.map((v:any)=>{
-                let rgbValue = v.rgbValue.split(' ')
-                let newData:any = {
-                    id:v.id,
-                    name:v.name,
-                    tcx:v.tcx || '',
-                    rgbValue:{r:rgbValue[0],g:rgbValue[1],b:rgbValue[2],a:1}
-                }
-                return newData
-            })
-            return colorList
-        },
+		//处理选择组的数据
+		dealHistoryChooseData(data: any, type: any) {
+			let collectionData = {
+				moodboardFiles: this.dealViewChooseData(
+					data.collection.moodBoards
+				),
+				printboardFiles: this.dealViewChooseData(
+					data.collection.printBoards
+				),
+				generatePrintFiles: [],
+				colorBoards: this.dealViewChooseColor(
+					data.collection.colorBoards
+				),
+				skecthboardFiles: this.dealViewChooseData(
+					data.collection.sketchBoards
+				),
+				marketingSketchFiles: this.dealViewChooseData(
+					data.collection.marketingSketchs
+				),
+				moodTemplateId: data.collection.moodTemplateId,
+			};
+			this.store.commit("setAllBoardDataChoose", collectionData);
+			this.designCollectionId = this.store.commit(
+				"setDesignCollectionId",
+				data.collection.collectionId
+			);
+			this.isHaveReviewCollection = true;
+			if (type === "normal") {
+				let likeDesignCollectionList = data.userLikeDetails.map(
+					(v: any) => {
+						let data = {
+							...v,
+							groupDetailId: v.id,
+							designItemUrl: v.url,
+						};
+						return data;
+					}
+				);
+				this.store.commit(
+					"setLikeDesignCollectionList",
+					likeDesignCollectionList
+				);
+			}
+		},
 
-        //导出合成图
-        exportCanvas(){
-            let collectionReview:any = document.querySelector("#exportNewCoolection")
-            let a = document.createElement('a');
-            this.isShowMark = true
-            html2canvas(collectionReview,{useCORS:true,scale:3}).then((canvas) => {
-                let blob:any = dataURLtoBlob(canvas.toDataURL('image/png'));
-                let allBoardData:any = this.store.state.UploadFilesModule.allBoardData
-                let index = 0
-                let img = [
-                    {
-                        imgUrl:URL.createObjectURL(blob),
-                        name:'collection.png'
-                    }
-                ]
-                for(let key in allBoardData){
-                    if(key !== 'colorBoards' && key !== 'moodTemplateId'){
-                        for(let item of allBoardData[key]){
-                            let nameTail = item.imgUrl.split('.').pop()
-                            console.log(nameTail, 666)
-                            let data = {
-                                imgUrl:item.imgUrl,
-                                name:item.resData.name + index + '.' + nameTail
-                            }
-                            img.push(data)
-                            index ++
-                        }
-                    }
-                }
-                this.downImg(img)
-                // a.setAttribute('href', URL.createObjectURL(blob));
-                // a.setAttribute('download', `collection.png`);
-                // a.click();
-                
-            })
-        },
+		//统一处理选择组的渲染数据
+		dealViewChooseData(data: any) {
+			if (!data) {
+				return [];
+			}
+			let filesList = data.map((v: any) => {
+				let newData: any = {
+					imgUrl: v.url,
+					id: v.id,
+					status: "done",
+					resData: v,
+				};
+				if (v.level1Type === "Sketchboard") {
+					newData.pin = v.isPin;
+					newData.category = v.level2Type;
+				}
+				if (v.level1Type === "Printboard") {
+					newData.pin = v.isPin;
+				}
+				return newData;
+			});
+			return filesList;
+		},
 
-        //打开图片详情
-        designDetail(design:any,index:number,collectionList:any,type:string){
-            let designDetail:any = this.$refs.designDetail
-            let data = {
-                design : design,
-                index:index,
-                collectionList:collectionList,
-                type:type
-            }
-            designDetail.showDesignDetailModal(data)
-        },
+		//统一处理选择组的渲染数据
+		dealViewChooseColor(data: any) {
+			let colorList = data.map((v: any) => {
+				let rgbValue = v.rgbValue.split(" ");
+				let newData: any = {
+					id: v.id,
+					name: v.name,
+					tcx: v.tcx || "",
+					rgbValue: {
+						r: rgbValue[0],
+						g: rgbValue[1],
+						b: rgbValue[2],
+						a: 1,
+					},
+				};
+				return newData;
+			});
+			return colorList;
+		},
 
-        //完成单个图片设计
-        finishRedesign(event:any){
-            let {design, index, type} = event
-            if(type === 'dislike'){
-                this.store.commit('setSingleDesignCollectionList',{index:index,design:design})
-            }else{
-                this.store.commit('setSingleLikeDesignCollectionList',{index:index,design:design})
-            }
-        },
+		//导出合成图
+		exportCanvas() {
+			let collectionReview: any = document.querySelector(
+				"#exportNewCoolection"
+			);
+			let a = document.createElement("a");
+			this.isShowMark = true;
+			html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
+				(canvas) => {
+					let blob: any = dataURLtoBlob(
+						canvas.toDataURL("image/png")
+					);
+					// console.log(blob);
 
-        //选择模特
-        selectModels(){
-            let modelsModal:any = this.$refs.modelsModal
-            modelsModal.init()
-        },
+					let allBoardData: any =
+						this.store.state.UploadFilesModule.allBoardData;
+					let index = 0;
+					let img = [
+						{
+							imgUrl: URL.createObjectURL(blob),
+							name: "collection.png",
+						},
+					];
+					for (let key in allBoardData) {
+						if (key !== "colorBoards" && key !== "moodTemplateId") {
+							for (let item of allBoardData[key]) {
+								let nameTail = item.imgUrl.split(".").pop();
+								// console.log(nameTail, 666);
+								let data = {
+									imgUrl: item.imgUrl,
+									name:
+										item.resData.name +
+										index +
+										"." +
+										nameTail,
+								};
+								img.push(data);
+								index++;
+							}
+						}
+					}
+					this.downImg(img);
+					// a.setAttribute('href', URL.createObjectURL(blob));
+					// a.setAttribute('download', `collection.png`);
+					// a.click();
+				}
+			);
+		},
 
-        //确定选择模特
-        sureSelectModel(event:any){
-            this.store.commit('setTemplateData',event)
-        },
+		//打开图片详情
+		designDetail(
+			design: any,
+			index: number,
+			collectionList: any,
+			type: string
+		) {
+			let designDetail: any = this.$refs.designDetail;
+			let data = {
+				design: design,
+				index: index,
+				collectionList: collectionList,
+				type: type,
+			};
+			designDetail.showDesignDetailModal(data);
+		},
 
-        //通过url 转为blob格式的数据
-        getImgArrayBuffer(url:any) {
-            return new Promise((resolve, reject) => {
-                //通过请求获取文件blob格式
-                let xmlhttp = new XMLHttpRequest();
-                xmlhttp.open("GET", url, true);
-                xmlhttp.responseType = "blob";
-                xmlhttp.onload = function () {
-                if (this.status == 200) {
-                    resolve(this.response);
-                } else {
-                    reject(this.status);
-                }
-                };
-                xmlhttp.send();
-            });
-        },
-        // imgDataUrl 数据的url数组
-        downImg(imagesParams:any) {
-            let _this:any = this;
-            let zip = new JSZip();
-            let cache:any = {};
-            let promises = [];
+		//完成单个图片设计
+		finishRedesign(event: any) {
+			let { design, index, type } = event;
+			if (type === "dislike") {
+				this.store.commit("setSingleDesignCollectionList", {
+					index: index,
+					design: design,
+				});
+			} else {
+				this.store.commit("setSingleLikeDesignCollectionList", {
+					index: index,
+					design: design,
+				});
+			}
+		},
 
-            for (let item of imagesParams) {
-                const promise = _this.getImgArrayBuffer(item.imgUrl).then((data:any) => {
-                // 下载文件, 并存成ArrayBuffer对象(blob)
-                zip.file(item.name, data, { binary: true }); // 逐个添加文件
-                cache[item.title] = data;
-                });
-                promises.push(promise);
-            }
+		//选择模特
+		selectModels() {
+			let modelsModal: any = this.$refs.modelsModal;
+			modelsModal.init();
+		},
 
-            Promise.all(promises)
-                .then(() => {
-                zip.generateAsync({ type: "blob" }).then((content:any) => {
-                    // 生成二进制流
-                    FileSaver.saveAs(
-                    content,
-                    'DesignFiles'
-                    ); // 利用file-saver保存文件  自定义文件名
-                    this.isShowMark = false
-                });
-                })
-                .catch((res) => {
-                    _this.message.error("Failed to export the file");
-                    this.isShowMark = false
-                });
-        },
-    },
+		//确定选择模特
+		sureSelectModel(event: any) {
+			this.store.commit("setTemplateData", event);
+		},
+
+		//通过url 转为blob格式的数据
+		getImgArrayBuffer(url: any) {
+			return new Promise((resolve, reject) => {
+				//通过请求获取文件blob格式
+				let xmlhttp = new XMLHttpRequest();
+				xmlhttp.open("GET", url, true);
+				xmlhttp.responseType = "blob";
+				xmlhttp.onload = function () {
+					if (this.status == 200) {
+						resolve(this.response);
+					} else {
+						reject(this.status);
+					}
+				};
+				xmlhttp.send();
+			});
+		},
+		// imgDataUrl 数据的url数组
+		downImg(imagesParams: any) {
+			let _this: any = this;
+			let zip = new JSZip();
+			let cache: any = {};
+			let promises = [];
+
+			for (let item of imagesParams) {
+				const promise = _this
+					.getImgArrayBuffer(item.imgUrl)
+					.then((data: any) => {
+						// 下载文件, 并存成ArrayBuffer对象(blob)
+						zip.file(item.name, data, { binary: true }); // 逐个添加文件
+						cache[item.title] = data;
+					});
+				promises.push(promise);
+			}
+
+			Promise.all(promises)
+				.then(() => {
+					zip.generateAsync({ type: "blob" }).then((content: any) => {
+						// 生成二进制流
+						FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
+						this.isShowMark = false;
+					});
+				})
+				.catch((res) => {
+					_this.message.error("Failed to export the file");
+					this.isShowMark = false;
+				});
+		},
+	},
 });
 </script>
 <style lang="less" scoped>
 .home_page {
-    width: 100%;
-    height: 100%;
+	width: 100%;
+	height: 100%;
 
-    .page_content {
-        position: relative;
+	.page_content {
+		position: relative;
+		.page_content_body {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			padding-bottom: 2.1rem;
+			box-sizing: border-box;
 
-        .page_content_body {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            padding-bottom: 2.1rem;
-            box-sizing: border-box;
+			.home_page_body {
+				width: 100%;
+				height: calc(100% - 7rem);
+				display: flex;
+				padding-left: 0.7rem;
+				box-sizing: border-box;
 
-            .home_page_body {
-                width: 100%;
-                height: calc(100% - 7rem);
-                display: flex;
-                padding-left: 0.7rem;
-                box-sizing: border-box;
+				.home_page_left {
+					width: 44.4rem;
+					height: 100%;
+					padding: 2.3rem 0.7rem 1.7rem 1.3rem;
+					background: rgba(255, 255, 255, 0.2);
 
-                .home_page_left {
-                    width: 44.4rem;
-                    height: 100%;
-                    padding: 2.3rem 0.7rem 1.7rem 1.3rem;
-                    background: rgba(255, 255, 255, 0.2);
+					.home_page_left_content {
+						height: 100%;
 
-                    .home_page_left_content {
-                        height: 100%;
+						.home_left_null {
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							text-align: center;
+							width: 100%;
+							height: 100%;
+							position: relative;
+							background: #f7f8fa;
+							border: 1px solid #f2f2f9;
+							border-radius: 10px;
+							overflow: hidden;
 
-                        .home_left_null {
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            text-align: center;
-                            width: 100%;
-                            height: 100%;
-                            position: relative;
-                            background: #f7f8fa;
-                            border: 1px solid #f2f2f9;
-                            border-radius: 10px;
-                            overflow: hidden;
+							.home_null_icon {
+								display: block;
+								width: 32.3rem;
+							}
 
-                            .home_null_icon {
-                                display: block;
-                                width: 32.3rem;
-                            }
+							.new_collection_button {
+								padding: .5rem 5rem;
+								height: 4rem;
+								line-height: 4rem;
+								background: #fff;
+								font-size: 1.3rem;
+								color: #000000;
+								margin: 1.2rem auto 0;
+								text-align: center;
+								cursor: pointer;
+								display: inline-block;
+								box-sizing: initial;
+								border: 2px solid #000;
+								font-weight: 600;
+								border-radius: 15px;
+							}
 
-                            .new_collection_button {
-                                padding: 0 1.5rem;
-                                height: 4rem;
-                                line-height: 4rem;
-                                background: #e0e0f6;
-                                font-size: 1.3rem;
-                                color: #343579;
-                                margin: 1.2rem auto 0;
-                                text-align: center;
-                                cursor: pointer;
-                                display: inline-block;
-                            }
+							.is_finish_loading {
+								width: 100%;
+								height: 100%;
+								position: absolute;
+								left: 0;
+								top: 0;
+								background: #ffffff;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							}
+						}
 
-                            .is_finish_loading{
-                                width: 100%;
-                                height: 100%;
-                                position: absolute;
-                                left: 0;
-                                top:0;
-                                background: #ffffff;
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                            }
-                        }
+						.home_left_info {
+							height: 100%;
 
-                        .home_left_info {
-                            height: 100%;
+							.left_info_top {
+								padding: 0 0 1.3rem 2rem;
+								display: flex;
 
-                            .left_info_top {
-                                padding: 0 0 1.3rem 2rem;
-                                display: flex;
+								.button_margin {
+									margin-left: 2rem;
+								}
+							}
 
-                                .button_margin {
-                                    margin-left: 2rem;
-                                }
-                            }
+							.left_info_content {
+								width: 100%;
+								height: calc(100% - 6.9rem);
+								overflow-y: auto;
+								background: #ffffff;
 
-                            .left_info_content {
-                                width: 100%;
-                                height: calc(100% - 6.9rem);
-                                overflow-y: auto;
-                                background: #ffffff;
+								.left_info_content_body {
+									width: 100%;
+								}
+							}
+						}
+					}
+				}
 
-                                .left_info_content_body {
-                                    width: 100%;
-                                }
-                            }
-                        }
-                    }
-                }
+				.home_page_right {
+					width: calc(100% - 44.4rem);
+					height: 100%;
 
-                .home_page_right {
-                    width: calc(100% - 44.4rem);
-                    height: 100%;
+					.right_top {
+						padding: 2rem 3.2rem 2rem 1.2rem;
+						display: flex;
+						justify-content: space-between;
+						box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
+						background: rgba(255, 255, 255, 0.4);
 
-                    .right_top {
-                        padding: 2rem 3.2rem 2rem 1.2rem;
-                        display: flex;
-                        justify-content: space-between;
-                        box-shadow: 0rem 0.2rem 8rem 0rem
-                            rgba(238, 238, 244, 0.25);
-                        background: rgba(255, 255, 255, 0.4);
+						.right_top_left {
+							display: flex;
+							align-items: center;
 
-                        .right_top_left {
-                            display: flex;
-                            align-items: center;
+							.button_margin_14 {
+								margin-left: 1.4rem;
+							}
 
-                            .button_margin_14 {
-                                margin-left: 1.4rem;
-                            }
-                            .system_scale {
-                                margin-left: 7rem;
-                                width: 12rem;
-                                position: relative;
+							.system_scale {
+								margin-left: 7rem;
+								width: 12rem;
+								position: relative;
 
-                                .system_scale_title {
-                                    font-size: 13px;
-                                    font-weight: 400;
-                                    color: #030303;
-                                }
-                                .system_silder {
-                                    margin-top: 0.5rem;
-                                    display: flex;
-                                    align-items: center;
-                                    position: absolute;
+								.system_scale_title {
+									font-size: 13px;
+									font-weight: 400;
+									color: #030303;
+								}
 
-                                    .system_silder_value {
-                                        font-size: 1.3rem;
-                                        color: #030303;
-                                        margin-left: 0.9rem;
-                                    }
-                                }
+								.system_silder {
+									margin-top: 0.5rem;
+									display: flex;
+									align-items: center;
+									position: absolute;
 
-                                .sacle_left_tip{
-                                    position: absolute;
-                                    left: -2rem;
-                                    bottom: -3.8rem;
-                                    font-size: 1.4rem;
-                                    line-height: 1.4rem;
-                                    color: #030303;
-                                }
-                                .sacle_right_tip{
-                                    position: absolute;
-                                    right: -2rem;
-                                    bottom: -3.8rem;
-                                    font-size: 1.4rem;
-                                    line-height: 1.4rem;
-                                    color: #030303;
-                                }
-                            }
+									.system_silder_value {
+										font-size: 1.3rem;
+										color: #030303;
+										margin-left: 0.9rem;
+									}
+								}
 
-                            .switch_component_block {
-                                width: 14rem;
-                                height: 4rem;
-                                background: #343579;
-                                border: 1px solid #141533;
-                                padding: 0.4rem 0.6rem;
-                                margin-left: 7rem;
-                                box-sizing: border-box;
-                                display: flex;
-                                position: relative;
-                                cursor: pointer;
+								.sacle_left_tip {
+									position: absolute;
+									left: -2rem;
+									bottom: -3.8rem;
+									font-size: 1.4rem;
+									line-height: 1.4rem;
+									color: #030303;
+								}
 
-                                .switch_item {
-                                    width: 50%;
-                                    height: 100%;
-                                    line-height: 3rem;
-                                    font-size: 1.2rem;
-                                    text-align: center;
-                                    color: #ffffff;
-                                }
+								.sacle_right_tip {
+									position: absolute;
+									right: -2rem;
+									bottom: -3.8rem;
+									font-size: 1.4rem;
+									line-height: 1.4rem;
+									color: #030303;
+								}
+							}
 
-                                .switch_white_button {
-                                    position: absolute;
-                                    width: calc(50% - 0.6rem);
-                                    height: 3rem;
-                                    left: 0.6rem;
-                                    top: 0.4rem;
-                                    background: #ffffff;
-                                    transition-duration: 0.5s;
-                                    line-height: 3rem;
-                                    font-size: 1.2rem;
-                                    text-align: center;
-                                    color: #030303;
+							.switch_component_block {
+								width: 14rem;
+								height: 4rem;
+								background: #343579;
+								border: 1px solid #141533;
+								padding: 0.4rem 0.6rem;
+								margin-left: 7rem;
+								box-sizing: border-box;
+								display: flex;
+								position: relative;
+								cursor: pointer;
 
-                                    &.switch_open_button {
-                                        left: 50%;
-                                    }
-                                }
-                            }
+								.switch_item {
+									width: 50%;
+									height: 100%;
+									line-height: 3rem;
+									font-size: 1.2rem;
+									text-align: center;
+									color: #ffffff;
+								}
 
-                            .select_block {
-                                margin-left: 2rem;
+								.switch_white_button {
+									position: absolute;
+									width: calc(50% - 0.6rem);
+									height: 3rem;
+									left: 0.6rem;
+									top: 0.4rem;
+									background: #ffffff;
+									transition-duration: 0.5s;
+									line-height: 3rem;
+									font-size: 1.2rem;
+									text-align: center;
+									color: #030303;
 
-                                .icon-xiala{
-                                    color: #1A1A1A !important;
-                                }
-                            }
-                        }
+									&.switch_open_button {
+										left: 50%;
+									}
+								}
+							}
 
-                        .right_top_right {
-                            display: flex;
-                            align-items: center;
+							.select_block {
+								margin-left: 2rem;
 
-                            .content_header_button{
-                                display: flex;
-                                justify-content: space-between;
-                                align-items: center;
-                                height: 4rem;
-                                border: 1px solid #000000;
-                                padding: 0 1.2rem 0 0.8rem;
-                                font-size: 1.3rem;
-                                color: #1A1A1A;
-                                cursor: pointer;
+								.icon-xiala {
+									color: #1a1a1a !important;
+								}
+							}
+						}
 
-                                .content_header_button_des{
-                                    margin-right: 1rem;
-                                    font-weight: bold;
-                                }
-                                .icon-xiala{
-                                    transform: rotate(-90deg);
-                                    color: #1A1A1A;
-                                }
-                            }
-                        }
-                    }
+						.right_top_right {
+							display: flex;
+							align-items: center;
 
-                    .right_content_block{
-                        height: calc(100% - 8.584rem);
+							.content_header_button {
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+								height: 4rem;
+								border: 1px solid #000000;
+								padding: 0 1.2rem 0 0.8rem;
+								font-size: 1.3rem;
+								color: #1a1a1a;
+								cursor: pointer;
 
-                        .right_content_header{
-                            display: flex;
-                            justify-content: space-between;
-                            height: 5.5rem;
-                            align-items: center;
-                            padding: 0 3.2rem 0 1.9rem;
-                            background:rgba(255,255,255,0.2);
+								.content_header_button_des {
+									margin-right: 1rem;
+									font-weight: bold;
+								}
 
-                            .content_header_left{
-                                display: flex;
-                                justify-content: space-between;
-                                align-items: center;
-                                
-                                .icon-dangqianweizhi{
-                                    font-size: 1.6rem;
-                                    color: #000;
-                                }
-                                .content_header_des{
-                                    font-size: 1.6rem;
-                                    color: #000000;
-                                    margin-left: 1rem;
-                                }
+								.icon-xiala {
+									transform: rotate(-90deg);
+									color: #1a1a1a;
+								}
+							}
+						}
+					}
 
-                            }
+					.right_content_block {
+						height: calc(100% - 8.584rem);
 
-                            
+						.right_content_header {
+							display: flex;
+							justify-content: space-between;
+							height: 5.5rem;
+							align-items: center;
+							padding: 0 3.2rem 0 1.9rem;
+							background: rgba(255, 255, 255, 0.2);
 
-                        }
+							.content_header_left {
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
 
-                        .right_content_body{
-                            padding: 0 1.8rem 0 1.2rem;
-                            background:rgba(255,255,255,0.2);
-                            height: calc(50% - 5.5rem);
+								.icon-dangqianweizhi {
+									font-size: 1.6rem;
+									color: #000;
+								}
 
-                            .right_content_img_block{
-                                padding: 0.6rem 2.8rem 0.6rem 0.9rem;
-                                overflow-y: auto;
-                                background: #F6F6FA;
-                                border-radius: 1rem;
-                                height: 100%;
+								.content_header_des {
+									font-size: 1.6rem;
+									color: #000000;
+									margin-left: 1rem;
+									font-weight: 900;
+								}
+							}
+						}
 
-                                .content_img_block{
-                                    width: 20.1rem;
-                                    height: 29.5rem;
-                                    margin-right: 3rem;
-                                    margin-bottom: 1rem;
-                                    display: inline-block;
-                                    position: relative;
-                                    vertical-align: top;
+						.right_content_body {
+							padding: 0 1.8rem 0 1.2rem;
+							background: rgba(255, 255, 255, 0.2);
+							height: calc(50% - 5.5rem);
 
-                                    &:hover .icon_like{
-                                        display: block;
-                                    }
+							.right_content_img_block {
+								padding: 0.6rem 2.8rem 0.6rem 0.9rem;
+								overflow-y: auto;
+								background: #f6f6fa;
+								border-radius: 1rem;
+								height: 100%;
 
-                                    &:nth-child(4n){
-                                        margin-right: 0;
-                                    }
+								.content_img_block {
+									width: 20.1rem;
+									height: 29.5rem;
+									margin-right: 3rem;
+									margin-bottom: 1rem;
+									display: inline-block;
+									position: relative;
+									vertical-align: top;
 
-                                    .content_img_flex{
-                                        display: flex;
-                                        justify-content: center;
-                                        align-items: center;
-                                        width: 100%;
-                                        height: 100%;
-                                    }
+									&:hover .icon_like {
+										display: block;
+									}
 
-                                    .content_img{
-                                        max-width: 100%;
-                                        max-height: 100%;
-                                    }
+									&:nth-child(4n) {
+										margin-right: 0;
+									}
 
-                                    .icon_like{
-                                        font-size: 2.4rem;
-                                        top: 1rem;
-                                        right: 1rem;
-                                        position: absolute;
-                                        cursor: pointer;
-                                        display: none;
-                                    }
-                                    .icon-jushoucang{
-                                        color: #000;
-                                    }
-                                    .icon-jushoucanggift{
-                                        color: rgba(52, 53, 121, 1);
-                                    }
-                                }
-                            }
-                        }
-                    }
+									.content_img_flex {
+										display: flex;
+										justify-content: center;
+										align-items: center;
+										width: 100%;
+										height: 100%;
+									}
 
-                    
-                }
-            }
-        }
+									.content_img {
+										max-width: 100%;
+										max-height: 100%;
+									}
 
-        .page_content_bg {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-        }
-    }
+									.icon_like {
+										font-size: 2.4rem;
+										top: 1rem;
+										right: 1rem;
+										position: absolute;
+										cursor: pointer;
+										display: none;
+									}
 
-    .progress_mark{
-        background: #ffffff;
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        left: 0;
-        top: 0;
-        z-index: 9999;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+									.icon-jushoucang {
+										color: #000;
+									}
 
-        .mark_content{
-            text-align: center;
-        }
-    }
+									.icon-jushoucanggift {
+										color: rgba(52, 53, 121, 1);
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.page_content_bg {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.progress_mark {
+		background: #ffffff;
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		left: 0;
+		top: 0;
+		z-index: 9999;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.mark_content {
+			text-align: center;
+		}
+	}
 }
 </style>
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index 975b8511..7623dbc5 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -7,115 +7,141 @@
             />
             <!-- 账号密码和邮箱登录  start-->
             <div class="login_content" v-if="isLogin === 1">
-                <div class="login_type_list">
-                    <div
-                        :class="[
-                            'login_type_item','username_login_item',
-                            'login_active',
-                        ]"
-                    >
-                        Log on to AiDA
-                    </div>
-                </div>
-                <!-- 账号密码登录 start -->
-                <div v-show="loginType == 'username'">
-                    <div class="login_form_content">
-                        <div class="login_form_title">Username</div>
-                        <input
-                            class="login_form_input"
-                            placeholder="Enter your username"
-                            v-model="username"
-                        />
-                        <div class="login_form_title marign_top30">
-                            <div>Password</div>
-                            <!-- <div class="tip_content" @click="changeIsLogin(2)">
-                                Forgot password？
-                            </div> -->
-                        </div>
-                        <div class="password_input_block">
-                            <input
-                                class="login_form_input"
-                                :type="passwordType"
-                                placeholder="Enter your password"
-                                v-model="password"
-                                @keydown.enter="submitPerLogin()"
-                            />
-                            <div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
-                        </div>
-                        
-                    </div>
-                    <div
-                        class="login_submit_button marign_top40"
-                        @click="submitPerLogin()"
-                    >
-                        Continue
-                    </div>
-                    
-                    <div class="login_text"  >
-                        <div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
-                    </div>
+				<div class="login_content_left">
+					<div class="login_type_list">
+						<div
+							:class="[
+								'login_type_item','username_login_item',
+								'login_active',
+							]"
+						>
+							Log on to AiDA
+						</div>
+					</div>
+					<!-- 账号密码登录 start -->
+					<!-- v-show="loginType == 'username'" -->
+					<div >
+						<div class="login_form_content" :state="emailStap">
+								<div class="login_form_title">Name</div>
+							<input
+								class="login_form_input"
+								placeholder="Enter your username"
+								v-model="username"
+							/>
+							
+							<div class="login_form_title marign_top30">
+								<div>Password</div>
+								<!-- <div class="tip_content" @click="changeIsLogin(2)">
+									Forgot password？
+								</div> -->
+							</div>
+							<div class="password_input_block">
+								<input
+									class="login_form_input"
+									:type="passwordType"
+									placeholder="Enter your password"
+									v-model="password"
+									@keydown.enter="submitPerLogin()"
+								/>
+								<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
+							</div>
+							<div class="login_form_title marign_top30">Email</div>
+							<input
+								class="login_form_input"
+								placeholder="Enter your email address"
+								v-model="email"
+								@keydown.enter="emailNextStepFun()"
+							/>
 
-                </div>
-                <!-- 账号密码登录 end -->
+						<!-- 邮箱登录 start -->
+							<div class="login_form_email" :class="{active:emailStap===2}">
+					<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
+						<!-- <div v-show="emailStap === 1" class="forget_password_content">
+							<div class="forget_password_content_block" @click="changeLoginType('username')">
+								<span class="icon iconfont icon--shangyibu"></span
+								><span class="forget_password_content_title"
+									>Log on to AiDA</span
+								>
+							</div>
+							<div class="login_form_content">
+								<div class="login_form_title">Email</div>
+								<input
+									class="login_form_input"
+									placeholder="Enter your email address"
+									v-model="email"
+									@keydown.enter="emailNextStepFun()"
+								/>
+							</div>
+							<div
+								class="login_submit_button marign_top40"
+								@click="emailNextStepFun()"
+							>
+								Sign In
+							</div>
+						</div> -->
 
-                <!-- 邮箱登录 start -->
-                <div v-show="loginType == 'email'">
-                    <div v-show="emailStap === 1" class="forget_password_content">
-                        <div class="forget_password_content_block" @click="changeLoginType('username')">
-                            <span class="icon iconfont icon--shangyibu"></span
-                            ><span class="forget_password_content_title"
-                                >Log on to AiDA</span
-                            >
-                        </div>
-                        <div class="login_form_content">
-                            <div class="login_form_title">Email</div>
-                            <input
-                                class="login_form_input"
-                                placeholder="Enter your email address"
-                                v-model="email"
-                                @keydown.enter="emailNextStepFun()"
-                            />
-                        </div>
-                        <div
-                            class="login_submit_button marign_top40"
-                            @click="emailNextStepFun()"
-                        >
-                            Continue
-                        </div>
-                    </div>
+						<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" @click="emailLastStepFun()">
-                            <span class="icon iconfont icon--shangyibu"></span
-                            ><span class="email_last_step_content"
-                                >Verify with one-time verification code</span
-                            >
-                        </div>
-                        <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>
+							</div>
+							</div>
+						</div>
+					</div>
+						</div>
 
-                        <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  class="login_form_title marign_top30">
+							<label>
+							<input type="checkbox" v-model="checked">
+							<span>I agree to all Term, Privacy Policy and Fees</span>
+						</label>
+						</div>
+						
+						<div
+							class="login_submit_button marign_top40" :state="emailStap"
+							@click="submitPerLogin()"
+						>
+						Sign In
+						</div>
+						
+						<div class="login_text"  >
+							<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
+						</div>
+
+					</div>
+					<!-- 账号密码登录 end -->
+					
+				</div>
+                
                 <!-- 邮箱登录 end -->
+				<div class="login_content_right">
+					<img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt="">
+				</div>
             </div>
 
             <!-- 忘记密码 start -->
@@ -199,7 +225,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent,ref ,onMounted} from "vue";
 import { Https } from "@/tool/https";
 import { isEmail } from "@/tool/util";
 import { setCookie } from "@/tool/cookie";
@@ -207,19 +233,21 @@ import { message } from "ant-design-vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
 
 const md5 = require("md5");
-
 export default defineComponent({
     components: {
         VerificationCodeInput,
     },
     setup(){
-        let timer:any =  0
+        let timer:any =  0;
+	
         return{
             timer
         }
     },
+
     data() {
         return {
+			checked:false,
             isLogin: 1, //是否为登录 1-登录， 2-忘记密码
             loginType: "username",
             emailStap: 1, // 邮箱登录步骤
@@ -285,7 +313,11 @@ export default defineComponent({
         //邮箱登录的上一步
         emailLastStepFun() {
             this.emailStap = 1;
+			this.username = "",
+            this.password = "",
             this.email = "";
+			this.checked=false,
+			this.loginType = "username",
             (this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
         },
 
@@ -309,7 +341,6 @@ export default defineComponent({
                 }
             );
         },
-
         //忘记密码的上一步
         forgetPasswordLastStepFun() {
             if (this.frogetPasswordStep === 1) {
@@ -336,22 +367,56 @@ export default defineComponent({
 
         //提交账号密码预先登录
         submitPerLogin() {
-            if (!this.username || !this.password) {
+			//输入账号密码
+			if(this.emailStap>=2){
+				return;
+			}else{
+				if (!this.username || !this.password || !this.email) {
                 message.error("Please enter your password");
                 return;
+            }
+			//输入邮箱
+			if (!this.email) {
+                message.error("Please enter your email address");
+                return;
+            }
+			//判断邮箱格式是否正确
+			if (!isEmail(this.email)) {
+                message.error("The email format is incorrect");
+                return;
+            }
+			//判断是否同意隐私政策
+			if (!this.checked) {
+                message.error("Agree to all terms, privacy fees and policies");
+                return;
             }
             let data = {
                 password: md5(this.password + "abc"),
                 userName: this.username,
+                email: this.email,
+				operationType:"LOGIN",
+				ip:"",
             };
-            Https.axiosPost(Https.httpUrls.preLogin, data).then(
+			// this.loginType = 'email'
+			// this.emailStap = 2;
+
+			Https.axiosPost(Https.httpUrls.preLogin, data).then(
                 (rv: any) => {
-                    if (rv) {
+                    // if (rv) {
+                    //     this.loginType = 'email'
+                    // }
+					
+					if (rv) {
                         this.userId = rv.userId
                         this.loginType = 'email'
+                        this.emailStap = 2;
+                        this.time = 60;
+                        this.emailCode = ["", "", "", "", "", ""]
+                        this.createTimer();
                     }
                 }
             );
+			}
         },
 
         changePasswordType(){
@@ -440,17 +505,53 @@ export default defineComponent({
         }
 
         .login_content {
+			
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);
-            width: 60rem;
+            // width: 60rem;
+			width: 120rem;
             background: #FFFFFF;
-            box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
+            // 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;
+			justify-content: space-between;
+			align-items: center;
 
+			.login_content_left{
+				width: 45%;
+				.login_form_email{
+					position: absolute;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					top: 0;
+					background: #fff;
+					transform: scale(0);
+					transition: .3s all;
+					border: 2px solid;
+					border-radius: 20px;
+					.email_last_step{
+						width: 100%;
+						height: 100%;
+						#app{
+							height: auto;
+						}
+					}
+				}
+				.active{
+					transform: scale(1);
+				}
+			}
+			.login_content_right{
+				width: 40%;
+				img{
+					width: 100%;
+				}
+			}
             .login_type_list {
                 width: 100%;
                 display: flex;
@@ -469,18 +570,35 @@ export default defineComponent({
                     }
                 }
             }
-
-            .login_form_content {
-                margin-top: 4rem;
-
-                .login_form_title {
+			.login_form_title {
                     font-size: 1.6rem;
-                    color: #666666;
+                    // color: #666666;
+					font-weight: 900;
+					color: #000;
                     display: flex;
                     justify-content: space-between;
                     box-sizing: border-box;
+					label{
+						display: flex;
+						span{
+							font-size: 1.6rem;
+							margin-left: 10px;
+							font-weight: normal;
+						}
+					}
                 }
 
+            .login_form_content {
+                margin-top: 4rem;
+				position: relative;
+                &[state="2"]{
+					>*{
+						opacity: 0;
+					}
+					.login_form_email{
+						opacity: 1;
+					}
+				}
                 .password_input_block{
                     position: relative;
 
@@ -513,10 +631,28 @@ export default defineComponent({
             }
 
             .email_last_step {
-                margin-top: 4rem;
-
+                // margin-top: 4rem;
+				.email_last_step_bottom{
+					padding: 0 40px;
+				}
                 .email_last_step_block{
-                    cursor: pointer;
+					padding: 10px;
+					border-bottom: 2px solid;
+					box-sizing: border-box;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					.email_last_step_content {
+                    margin-left: 1rem;
+                    font-size: 2.2rem;
+                    font-weight: bold;
+                    color: #030303;
+                }
+					.email_last_step_block_icon{
+						cursor: pointer;
+						margin-right: 1rem;
+						height: 20px;
+					}
                 }
 
                 .icon--shangyibu {
@@ -525,17 +661,12 @@ export default defineComponent({
                     color: #030303;
                 }
 
-                .email_last_step_content {
-                    margin-left: 1rem;
-                    font-size: 2.2rem;
-                    font-weight: bold;
-                    color: #030303;
-                }
+                
             }
 
             .login_submit_button {
                 height: 5rem;
-                background: #343579;
+                background: #000;
                 border-radius: 2.5rem;
                 line-height: 5rem;
                 text-align: center;
@@ -543,6 +674,9 @@ export default defineComponent({
                 font-weight: 500;
                 color: #ffffff;
                 cursor: pointer;
+				&[state="2"]{
+					cursor: not-allowed;
+				}
             }
             .login_text {
                 font-size: 1.6rem;
@@ -624,7 +758,7 @@ export default defineComponent({
 
             .forget_submit_button {
                 height: 5rem;
-                background: #343579;
+                background: #000;
                 border-radius: 2.5rem;
                 line-height: 5rem;
                 text-align: center;
diff --git a/vue.config.js b/vue.config.js
index 3c85a078..d937a20c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,14 +1,22 @@
 const {defineConfig} = require('@vue/cli-service')
 const path = require('path');
+const webpack = require('webpack')
+
 module.exports = defineConfig({
+
   transpileDependencies: ['vuetify'],
   lintOnSave:false,//关闭语法检查
   devServer: {
     // hot: true, // 热更新
-    port: '8060',
+    // port: '8060',
+    port: process.env.NODE_ENV === 'production'
+	? '8060'
+	: '10086',
+
     proxy: {
       "/api": {
-        target: 'https://www.aida.com.hk', //后端接口地址
+        // target: 'https://www.aida.com.hk', //后端接口地址
+		target: process.env.VUE_APP_BASE_URL,
         changeOrigin: true, //是否允许跨越
       }
     },