diff --git a/src/assets/icons/angle.svg b/src/assets/icons/angle.svg
new file mode 100644
index 0000000..31cb922
--- /dev/null
+++ b/src/assets/icons/angle.svg
@@ -0,0 +1,9 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="6.78125" height="6.78125" fill="url(#pattern0_16_10027)"/>
+<defs>
+<pattern id="pattern0_16_10027" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_16_10027" transform="scale(0.0078125)"/>
+</pattern>
+<image id="image0_16_10027" width="128" height="128" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAN2AAADdgF91YLMAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAThQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAR/EwCQAAAGd0Uk5TAAECBAUGBwoLDA8QEhUXGRocIiUnLC03PEBCRkdJS0xOVFZXWV1hYmdobnF1enyAgYKDhoeLjY+QkpSVmp6go6anr7S1uLq7wcTGx8jKy8zN0NPV19zg5+rr7vDx8vP09vf6+/z9/seyqosAAAGbSURBVHja7dhVUwNBEATgJri7uwR3lwDBggZ3OZz5//8Aqd17DpLqKqr7KbszV9+83GYTQFEURVH+eRpiiZkqHh+Zs488dtD8RfvKTSnXN+sh+zZG9q2T7J/lcv2gluzXyZcvX758+fLly5cvX758+fLly5cvX758+fLl/y/fJsm+PdZwfbPTPK5vtkT2zaJk34Iqih/Ewo9HOZz3fz1cLHDOn+KLcFnP8IHGN7/epvjAVLjTRPGRfeC3khQfqLz3m20UH5gIX8UMio+iW7/fTvGBEV84iVB8FFz7UhfFB4Z8bYPjI//KFZ8KKT4wmNav5RTun0XPrr7K8YFN1/CQx/HRl7ajIMX7f8mr64lzfGDLNd3lcHz0+7YWjo9yfzEZ5fjAoWtcIfnwzYckPzwMA5KPVt9cxvFR8bfX8+///xB5cO29HB84cv3TJB9x98Da3/q2PZti9t0Dl7M/z0x/9ecAMePlZRzoNGqi2OcOkMQ9d4AA59wBjjHAHWAYWGb6iUwgq3l+Z+9H2d37XXbj3Wn9ha0oiqIoqeUdwmrKD1GdTTcAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/src/assets/images/icon/xyz.png b/src/assets/images/icon/xyz.png
new file mode 100644
index 0000000..a09a06d
Binary files /dev/null and b/src/assets/images/icon/xyz.png differ
diff --git a/src/views/canvas/components/card.vue b/src/views/canvas/components/card.vue
index 825b9eb..705c087 100644
--- a/src/views/canvas/components/card.vue
+++ b/src/views/canvas/components/card.vue
@@ -21,6 +21,13 @@
 	import { computed, ref, markRaw, onMounted } from 'vue'
 	import ToRealStyle from './cards/to-real-style.vue'
 	import SceneComposition from './cards/scene-composition.vue'
+	import ColorPalette from './cards/color-palette.vue'
+	import ToVideo from './cards/to-video.vue'
+	import To3DModel from './cards/to-3d-model.vue'
+	import AddPrint from './cards/add-print.vue'
+	import ToCAD from './cards/to-cad.vue'
+
+	import EditMaterial from './cards/edit-material.vue'
 	const components = [
 		{
 			type: 'to-real-style',
@@ -35,27 +42,32 @@
 		{
 			type: 'color-palette',
 			title: 'Color Palette',
-			component: SceneComposition
+			component: ColorPalette
 		},
 		{
 			type: 'to-video',
 			title: 'To Video',
-			component: SceneComposition
+			component: ToVideo
 		},
 		{
 			type: 'to-3d-model',
 			title: 'To 3D Model',
-			component: SceneComposition
+			component: To3DModel
+		},
+		{
+			type: 'to-cad',
+			title: 'To CAD',
+			component: ToCAD
 		},
 		{
 			type: 'add-print',
 			title: 'Add Print',
-			component: SceneComposition
+			component: AddPrint
 		},
 		{
 			type: 'edit-material',
 			title: 'Edit Material',
-			component: SceneComposition
+			component: EditMaterial
 		}
 	]
 	const emit = defineEmits(['add', 'generate'])
@@ -121,6 +133,20 @@
 		}
 		> .body {
 			padding: 1.6rem 1.3rem;
+			&:deep(> *) {
+				width: 100%;
+				> * {
+					margin-bottom: 1rem;
+					&:last-child {
+						margin-bottom: 0;
+					}
+				}
+				> .label {
+					font-size: 1.2rem;
+					font-family: Medium;
+					color: #000;
+				}
+			}
 		}
 		> .footer {
 			margin-bottom: 1.6rem;
diff --git a/src/views/canvas/components/cards/add-print.vue b/src/views/canvas/components/cards/add-print.vue
new file mode 100644
index 0000000..c1907f9
--- /dev/null
+++ b/src/views/canvas/components/cards/add-print.vue
@@ -0,0 +1,116 @@
+<template>
+	<!-- 添加印花 -->
+	<div class="add-print">
+		<p class="label">Print</p>
+		<upload-file v-model="data.file" />
+		<p class="label">Settings</p>
+		<div class="settings">
+			<div>
+				<p class="label">Angle</p>
+				<my-input
+					v-model="data.setting.angle"
+					type="number"
+					after="°"
+					:min="-180"
+					:max="180"
+					icon="angle"
+					icon-size="8"
+				/>
+			</div>
+			<div>
+				<span class="label">Scale</span>
+				<slider
+					:min="1"
+					:max="1000"
+					:tipFormatter="(v) => `${v}%`"
+					v-model="data.setting.scale"
+				/>
+			</div>
+			<div>
+				<span class="label">Gap X</span>
+				<slider
+					:min="0"
+					:max="1000"
+					:tipFormatter="(v) => `${v}px`"
+					v-model="data.setting.gap.x"
+				/>
+			</div>
+			<div>
+				<span class="label">Gap Y</span>
+				<slider
+					:min="0"
+					:max="1000"
+					:tipFormatter="(v) => `${v}px`"
+					v-model="data.setting.gap.y"
+				/>
+			</div>
+			<div>
+				<span class="label">Offset</span>
+				<offset-tool v-model="data.setting.offset" :show-dish="false" />
+			</div>
+			<div class="offset">
+				<offset-tool v-model="data.setting.offset" :show-input="false" />
+			</div>
+		</div>
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted } from 'vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import uploadFile from '../tools/upload-file.vue'
+	import myInput from '../tools/my-input.vue'
+	import offsetTool from '../tools/offset-tool.vue'
+	import slider from '../tools/slider.vue'
+
+	const data = reactive({
+		prompt: '',
+		setting: {
+			angle: 0,
+			scale: 100,
+			gap: {
+				x: 0,
+				y: 0
+			},
+			offset: {
+				x: 50,
+				y: 50
+			}
+		},
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.add-print {
+		> .settings {
+			margin: 0 1.1rem;
+			> div {
+				display: flex;
+				align-items: center;
+				margin-bottom: 1rem;
+				&:last-child {
+					margin-bottom: 0;
+				}
+				&.offset {
+					justify-content: center;
+				}
+				> .label {
+					width: 5.5rem;
+					font-size: 1rem;
+				}
+				&:not(.offset) > div {
+					flex: 1;
+				}
+				> .slider {
+					--slider-thumb-color1: #000;
+					--slider-thumb-color2: #eee;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/canvas/components/cards/color-palette.vue b/src/views/canvas/components/cards/color-palette.vue
new file mode 100644
index 0000000..e4ee1ee
--- /dev/null
+++ b/src/views/canvas/components/cards/color-palette.vue
@@ -0,0 +1,65 @@
+<template>
+	<!-- 颜色调色板 -->
+	<div class="color-palette">
+		<p class="label">Choose Color</p>
+		<div class="color-list">
+			<div
+				class="color-item"
+				v-for="(v, i) in data.colors"
+				:key="i"
+				:style="{ background: v }"
+			></div>
+			<div class="add" @click="addColor">
+				<svg-icon name="add" size="12rem" color="#fff" />
+				<input type="color" ref="colorInput" @change="changeColor" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted, ref } from 'vue'
+	const data = reactive({
+		colors: ['#FF4747', '#F96060', '#FFB1B1', '#FA7B7B', '#FF9090']
+	})
+	const colorInput = ref<HTMLInputElement>()
+	// 添加颜色
+	const addColor = () => {
+		colorInput.value?.click()
+	}
+	const changeColor = (e: Event) => {
+		const target = e.target as HTMLInputElement
+		data.colors.push(target.value)
+	}
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.color-palette {
+		min-height: 14rem;
+		> .color-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.5rem;
+			> div {
+				width: 3.5rem;
+				height: 3.5rem;
+			}
+			> .add {
+				border: 0.1rem solid rgba(0, 0, 0, 0.1);
+				background-color: rgba(0, 0, 0, 0.1);
+				position: relative;
+				> input {
+					position: absolute;
+					width: 0;
+					height: 0;
+					border: none;
+					padding: 0;
+					top: 0;
+					left: 0;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/canvas/components/cards/edit-material.vue b/src/views/canvas/components/cards/edit-material.vue
new file mode 100644
index 0000000..e2ec238
--- /dev/null
+++ b/src/views/canvas/components/cards/edit-material.vue
@@ -0,0 +1,26 @@
+<template>
+	<!-- 编辑素材 -->
+	<div class="edit-material">
+		<p class="label">Material</p>
+		<upload-file v-model="data.file" />
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted } from 'vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import uploadFile from '../tools/upload-file.vue'
+	const data = reactive({
+		prompt: '',
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.edit-material {
+	}
+</style>
diff --git a/src/views/canvas/components/cards/scene-composition.vue b/src/views/canvas/components/cards/scene-composition.vue
index 9f2ceaf..65ae059 100644
--- a/src/views/canvas/components/cards/scene-composition.vue
+++ b/src/views/canvas/components/cards/scene-composition.vue
@@ -1,22 +1,86 @@
 <template>
 	<!-- 场景构图 -->
-	<div class="scene-composition"></div>
+	<div class="scene-composition">
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+		<p class="label">Choose Style</p>
+		<div class="style-list">
+			<div
+				class="item"
+				v-for="v in styleList"
+				:key="v.value"
+				:class="{ active: data.styles.includes(v.value) }"
+				@click="onClickStyle(v.value)"
+			>
+				<span class="icon"><svg-icon name="add" color="#0D0D0D" size="8" /></span>
+				<span class="label">{{ v.label }}</span>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-	import { computed, ref, markRaw, onMounted } from 'vue'
-	import { useGlobalStore } from '@/stores'
-	import { useRouter, useRoute } from 'vue-router'
-	const router = useRouter()
-	const route = useRoute()
-	const globalStore = useGlobalStore()
-	onMounted(() => {
-		globalStore.setHomeLeftNavCollapse(true)
+	import { computed, ref, reactive, onMounted } from 'vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	const styleList = ref([
+		{ label: 'Colorful', value: 'Colorful' },
+		{ label: 'Minimalist', value: 'Minimalist' },
+		{ label: 'Modernist', value: 'Modernist' },
+		{ label: 'Bauhaus', value: 'Bauhaus' },
+		{ label: 'Mintage', value: 'Mintage' },
+		{ label: 'Industrial', value: 'Industrial' },
+		{ label: 'Futuristic', value: 'Futuristic' },
+		{ label: 'Elegant', value: 'Elegant' },
+		{ label: 'Organic', value: 'Organic' },
+		{ label: 'Calm', value: 'Calm' },
+		{ label: 'Abstract', value: 'Abstract' },
+		{ label: 'Kitsch-core', value: 'Kitsch-core' },
+		{ label: 'Sophisticated', value: 'Sophisticated' },
+		{ label: 'Maximalism', value: 'Maximalism' },
+		{ label: 'Clean', value: 'Clean' },
+		{ label: 'Bright Colors', value: 'Bright Colors' },
+		{ label: 'Luxurious', value: 'Luxurious' },
+		{ label: 'Bold Colors', value: 'Bold Colors' },
+		{ label: 'Brutalism', value: 'Brutalism' }
+	])
+	const data = reactive({
+		prompt: '',
+		styles: ['Colorful', 'Modernist']
 	})
+	const onClickStyle = (value: string) => {
+		if (data.styles.includes(value)) {
+			data.styles = data.styles.filter((v) => v !== value)
+		} else {
+			data.styles.push(value)
+		}
+	}
+	defineExpose({ data })
 </script>
 
 <style lang="less" scoped>
 	.scene-composition {
-		width: 100%;
+		> .style-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.829rem 0.55rem;
+			> .item {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding: 0.5rem 0.7rem;
+				font-family: Medium;
+				border-radius: 2rem;
+				font-size: 0.829rem;
+				border: 0.05rem solid #e4e4e7;
+				color: #000;
+				> .icon {
+					margin-right: 0.4rem;
+				}
+				&.active {
+					border-color: #0095ff;
+					background-color: rgba(0, 149, 255, 0.05);
+				}
+			}
+		}
 	}
 </style>
diff --git a/src/views/canvas/components/cards/to-3d-model.vue b/src/views/canvas/components/cards/to-3d-model.vue
new file mode 100644
index 0000000..7cb286f
--- /dev/null
+++ b/src/views/canvas/components/cards/to-3d-model.vue
@@ -0,0 +1,26 @@
+<template>
+	<!-- 转3D模型 -->
+	<div class="to-3d-model">
+		<p class="label">Image</p>
+		<upload-file v-model="data.file" />
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted } from 'vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import uploadFile from '../tools/upload-file.vue'
+	const data = reactive({
+		prompt: '',
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.to-3d-model {
+	}
+</style>
diff --git a/src/views/canvas/components/cards/to-cad.vue b/src/views/canvas/components/cards/to-cad.vue
new file mode 100644
index 0000000..c84d459
--- /dev/null
+++ b/src/views/canvas/components/cards/to-cad.vue
@@ -0,0 +1,26 @@
+<template>
+	<!-- 转CAD -->
+	<div class="to-cad">
+		<p class="label">3D Model</p>
+		<upload-file v-model="data.file" />
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted } from 'vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import uploadFile from '../tools/upload-file.vue'
+	const data = reactive({
+		prompt: '',
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.to-cad {
+	}
+</style>
diff --git a/src/views/canvas/components/cards/to-real-style.vue b/src/views/canvas/components/cards/to-real-style.vue
index cbf9ae5..a6f4e2b 100644
--- a/src/views/canvas/components/cards/to-real-style.vue
+++ b/src/views/canvas/components/cards/to-real-style.vue
@@ -1,27 +1,51 @@
 <template>
 	<!-- 转换为真实图 -->
 	<div class="to-real-style">
+		<p class="label">Prompt</p>
 		<my-textarea v-model="data.prompt" />
+		<div class="shortcut-list">
+			<div
+				class="item"
+				v-for="v in shortcutList"
+				:key="v.value"
+				@click="data.prompt = v.value"
+			>
+				{{ v.label }}
+			</div>
+		</div>
+		<p class="label">Size</p>
 		<pixel-ratio-selection v-model="data.pixelRatio" />
-		<upload-file v-model="data.file" />
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { computed, ref, reactive, onMounted, defineExpose } from 'vue'
-	import myTextarea from '../my-textarea.vue'
-	import pixelRatioSelection from '../pixel-ratio-selection.vue'
-	import uploadFile from '../upload-file.vue'
-	import { useGlobalStore } from '@/stores'
-	import { useRouter, useRoute } from 'vue-router'
-	const router = useRouter()
-	const route = useRoute()
-	const globalStore = useGlobalStore()
-	onMounted(() => {
-		globalStore.setHomeLeftNavCollapse(true)
-	})
+	import { computed, ref, reactive, onMounted } from 'vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import pixelRatioSelection from '../tools/pixel-ratio-selection.vue'
+	const shortcutList = ref([
+		{
+			label: 'Change the...',
+			value: 'Change the...'
+		},
+		{
+			label: 'Bright Colors...',
+			value: 'Bright Colors...'
+		},
+		{
+			label: 'Make the...',
+			value: 'Make the...'
+		},
+		{
+			label: 'Imagine...',
+			value: 'Imagine...'
+		},
+		{
+			label: 'Wood Materials with...',
+			value: 'Wood Materials with...'
+		}
+	])
 	const data = reactive({
-		prompt: '123123',
+		prompt: '',
 		pixelRatio: '1:1',
 		file: null
 	})
@@ -31,9 +55,20 @@
 
 <style lang="less" scoped>
 	.to-real-style {
-		width: 100%;
-		> * {
-			margin-bottom: 1rem;
+		> .shortcut-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 1rem 0.4rem;
+			> .item {
+				display: flex;
+				align-items: center;
+				padding: 0.5rem 0.3rem;
+				font-family: Medium;
+				border-radius: 0.3rem;
+				font-size: 1rem;
+				border: 0.05rem solid #e4e4e7;
+				background: #f0f0f0;
+			}
 		}
 	}
 </style>
diff --git a/src/views/canvas/components/cards/to-video.vue b/src/views/canvas/components/cards/to-video.vue
new file mode 100644
index 0000000..8328e03
--- /dev/null
+++ b/src/views/canvas/components/cards/to-video.vue
@@ -0,0 +1,91 @@
+<template>
+	<!-- 转视频 -->
+	<div class="to-video">
+		<p class="label">Frames</p>
+		<div class="frames">
+			<upload-file v-model="data.first_file" tip="First Frame" />
+			<upload-file v-model="data.last_file" tip="Last Frame" />
+		</div>
+		<p class="label">Size</p>
+		<pixel-ratio-selection v-model="data.pixelRatio" />
+		<div class="label">
+			<span>Aspect Ratio</span>
+			<span>Time</span>
+		</div>
+		<div class="select">
+			<el-select v-model="data.aspectRatio">
+				<el-option v-for="v in aspectRatioList" :key="v" :label="v" :value="v" />
+			</el-select>
+			<el-select v-model="data.time">
+				<el-option v-for="v in timeList" :key="v" :label="v" :value="v" />
+			</el-select>
+		</div>
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, ref } from 'vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import uploadFile from '../tools/upload-file.vue'
+	import pixelRatioSelection from '../tools/pixel-ratio-selection.vue'
+	const aspectRatioList = ref(['720p', '1080p', '1440p', '2160p', '1k', '2k'])
+	const timeList = ref(['5s', '10s', '15s', '20s', '30s', '60s'])
+	const data = reactive({
+		first_file: null,
+		last_file: null,
+		pixelRatio: '1:1',
+		aspectRatio: '720p',
+		time: '5s',
+		prompt: ''
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.to-video {
+		> .frames {
+			display: flex;
+			gap: 0.5rem;
+		}
+		> .select,
+		> div.label {
+			display: flex;
+			gap: 1.3rem;
+			> * {
+				flex: 1;
+			}
+		}
+		> .select {
+			&:deep(.el-select) {
+				--el-select-input-font-size: 1.2rem;
+				.el-select__wrapper {
+					font-size: 1.2rem;
+					min-height: 0;
+					height: 2.8rem;
+					padding: 0 0.8rem;
+				}
+				.el-select__selected-item,
+				.el-select__input-wrapper,
+				.el-select__placeholder {
+					line-height: normal;
+				}
+				.el-select__input {
+					height: 2.4rem;
+				}
+			}
+		}
+	}
+	.el-popper{
+		.el-select-dropdown{
+			li{
+				padding-left: 0.8rem;
+				height: 3rem;
+				line-height: 3rem;;
+				font-size: 1.2rem;
+			}
+		}
+	}
+</style>
diff --git a/src/views/canvas/components/tools/my-input.vue b/src/views/canvas/components/tools/my-input.vue
new file mode 100644
index 0000000..a413a07
--- /dev/null
+++ b/src/views/canvas/components/tools/my-input.vue
@@ -0,0 +1,79 @@
+<template>
+	<div class="my-input">
+		<span class="decorate"></span>
+		<span v-show="icon" class="icon">
+			<svg-icon :name="icon" :size="iconSize" />
+		</span>
+		<span v-show="before" class="before">{{ before }}</span>
+		<input v-bind="attrs" :value="modelValue" @input="onInput" />
+		<span v-show="after" class="after">{{ after }}</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, useAttrs, watch } from 'vue'
+	const props = defineProps({
+		modelValue: { type: [String, Number] },
+		icon: { default: '', type: String },
+		iconSize: { default: '10', type: [Number, String] },
+		before: { default: '', type: String },
+		after: { default: '', type: String }
+	})
+	const attrs = useAttrs()
+	const emit = defineEmits(['update:modelValue', 'input'])
+	const onInput = (e) => {
+		var value = e.target.value
+		if (attrs.type === 'number') value = Number(value)
+		emit('update:modelValue', value)
+		emit('input', value)
+	}
+</script>
+<style scoped lang="less">
+	.my-input {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		border: 1px solid rgba(230, 230, 231, 1);
+		border-radius: 0.17rem;
+		height: 1.7rem;
+		padding: 0 0.4rem 0 0.2rem;
+		> .decorate {
+			width: 0.2rem;
+			background-color: rgba(230, 230, 231, 1);
+			border-radius: 0.3rem;
+			height: 85%;
+			margin-right: 0.4rem;
+		}
+		> .iconfont {
+			font-size: 1rem;
+			color: #000;
+			margin-right: 0.2rem;
+		}
+		> .before {
+			font-size: 1rem;
+			color: #000;
+			margin-right: 0.2rem;
+		}
+		> .after {
+			font-size: 1rem;
+			color: #000;
+			margin-left: 0.1rem;
+		}
+		> input {
+			font-size: 1rem;
+			width: 0;
+			flex: 1;
+			text-align: right;
+			outline: none;
+			border: none;
+			background-color: transparent;
+			padding: 0;
+			-moz-appearance: textfield; /* Firefox */
+			&::-webkit-outer-spin-button,
+			&::-webkit-inner-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+			}
+		}
+	}
+</style>
diff --git a/src/views/canvas/components/my-textarea.vue b/src/views/canvas/components/tools/my-textarea.vue
similarity index 100%
rename from src/views/canvas/components/my-textarea.vue
rename to src/views/canvas/components/tools/my-textarea.vue
diff --git a/src/views/canvas/components/tools/offset-tool.vue b/src/views/canvas/components/tools/offset-tool.vue
new file mode 100644
index 0000000..9d9c237
--- /dev/null
+++ b/src/views/canvas/components/tools/offset-tool.vue
@@ -0,0 +1,217 @@
+<template>
+	<div class="offset-tool">
+		<div class="input" v-show="showInput">
+			<my-input v-model="left" type="number" before="X" after="%" :min="-100" :max="100" />
+			<my-input v-model="top" type="number" before="Y" after="%" :min="-100" :max="100" />
+		</div>
+		<div
+			class="dish"
+			@mousedown="mousedown"
+			@touchstart="mousedown"
+			ref="dishRef"
+			v-show="showDish"
+		>
+			<img src="/src/assets/images/icon/xyz.png" />
+			<span class="ball" :style="ballStyle"></span>
+			<span class="tip x">X: {{ left }}%</span>
+			<span class="tip y">Y: {{ top }}%</span>
+			<span class="line x"></span>
+			<span class="line y"></span>
+			<span class="line z" :style="lineZStyle"></span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch, computed } from 'vue'
+	import MyInput from './my-input.vue'
+	const props = defineProps({
+		modelValue: { type: Object },
+		showInput: {
+			type: Boolean,
+			default: true
+		},
+		showDish: {
+			type: Boolean,
+			default: true
+		}
+	})
+	const emit = defineEmits(['update:modelValue', 'change', 'input'])
+	// 工具的实际坐标 -100 ~ 100
+	const top = ref(Math.round(props.modelValue.y))
+	const left = ref(Math.round(props.modelValue.x))
+
+	// 原点的坐标 0 ~ 100
+	const ballStyle = computed(() => ({
+		top: 50 + top.value / 2 + '%',
+		left: 50 + left.value / 2 + '%'
+	}))
+	watch(
+		() => props.modelValue.x,
+		(v) => (left.value = v)
+	)
+	watch(
+		() => props.modelValue.y,
+		(v) => (top.value = v)
+	)
+	const dishRef = ref<HTMLDivElement>()
+	const mousedown = (e: MouseEvent | TouchEvent) => {
+		if (!dishRef.value) return
+		const mousemove = (e: MouseEvent | TouchEvent) => {
+			if (!dishRef.value) return
+			const rect = dishRef.value.getBoundingClientRect()
+			const X = e.clientX || (e as TouchEvent).touches[0].clientX
+			const Y = e.clientY || (e as TouchEvent).touches[0].clientY
+			var x = ((X - rect.left) / rect.width) * 100
+			var y = ((Y - rect.top) / rect.height) * 100
+			if (x < 0) x = 0
+			if (x > 100) x = 100
+			if (y < 0) y = 0
+			if (y > 100) y = 100
+			left.value = Math.round((x - 50) * 2)
+			top.value = Math.round((y - 50) * 2)
+			onInput()
+		}
+		mousemove(e)
+		const mouseup = () => {
+			onChange()
+			document.removeEventListener('mousemove', mousemove)
+			document.removeEventListener('touchmove', mousemove)
+			document.removeEventListener('mouseup', mouseup)
+			document.removeEventListener('touchend', mouseup)
+		}
+		document.addEventListener('mousemove', mousemove)
+		document.addEventListener('touchmove', mousemove)
+		document.addEventListener('mouseup', mouseup)
+		document.addEventListener('touchend', mouseup)
+	}
+	const onInput = () => {
+		const value = {
+			x: left.value,
+			y: top.value
+		}
+		emit('update:modelValue', value)
+		emit('input', value)
+	}
+	var changeTime: any = null
+	const onChange = () => {
+		clearTimeout(changeTime)
+		changeTime = setTimeout(() => {
+			const value = {
+				x: left.value,
+				y: top.value
+			}
+			emit('update:modelValue', value)
+			emit('change', value)
+		}, 500)
+	}
+	const lineZStyle = computed(() => ({
+		'--rotateZ': calculateAngle(0, 0, left.value, top.value) + 'deg',
+		width: calculateDistance(0, 0, left.value, top.value) / 2 + '%'
+	}))
+	// 计算角度
+	function calculateAngle(x1: number, y1: number, x2: number, y2: number) {
+		const deltaX = x2 - x1
+		const deltaY = y1 - y2
+		let angle = Math.atan2(deltaX, deltaY) * (180 / Math.PI) - 90
+		return angle
+	}
+	// 计算距离
+	function calculateDistance(x1: number, y1: number, x2: number, y2: number) {
+		const deltaX = x2 - x1
+		const deltaY = y2 - y1
+		const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+		return distance
+	}
+</script>
+
+<style scoped lang="less">
+	.offset-tool {
+		position: relative;
+		> .input {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			> * {
+				flex: 1;
+				margin-right: 1rem;
+				&:last-child {
+					margin-right: 0;
+				}
+			}
+		}
+		> .dish {
+			width: 11.5rem;
+			height: 11.5rem;
+			border: 0.1rem solid #eaeaea;
+			border-radius: 0.34rem;
+			cursor: pointer;
+			position: relative;
+			background-color: #f6f6f6;
+			margin-top: 2rem;
+			> * {
+				position: absolute;
+				pointer-events: none;
+				user-select: none;
+			}
+			> img {
+				width: 1.2rem;
+				height: 1.2rem;
+				bottom: 0.35rem;
+				right: 0.35rem;
+			}
+			> .ball {
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: 0.85rem;
+				height: 0.85rem;
+				border: 0.1rem solid #fff;
+				background-color: #333;
+				border-radius: 50%;
+				box-shadow: 0px 0.068rem 0.17px 0px rgba(0, 0, 0, 0.26);
+			}
+			> .tip {
+				font-size: 0.85rem;
+				color: #000;
+				line-height: 2.4rem;
+				&.x {
+					top: 50%;
+					right: 0%;
+					transform: translate(100%, -50%);
+					padding-left: 6px;
+				}
+				&.y {
+					top: 0%;
+					left: 50%;
+					transform: translate(-50%, -100%);
+				}
+			}
+			> .line {
+				border-color: #d9d9d9;
+				border-style: dashed;
+				border-width: 0;
+				width: 0;
+				height: 0;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				&.x {
+					width: 100%;
+					border-top-width: 0.1rem;
+				}
+				&.y {
+					height: 100%;
+					border-left-width: 0.1rem;
+				}
+				&.z {
+					width: 50%;
+					border-top-width: 0.1rem;
+					border-color: #454754;
+					transform: translate(0%, -50%) rotateZ(var(--rotateZ));
+					transform-origin: left center;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/canvas/components/pixel-ratio-selection.vue b/src/views/canvas/components/tools/pixel-ratio-selection.vue
similarity index 100%
rename from src/views/canvas/components/pixel-ratio-selection.vue
rename to src/views/canvas/components/tools/pixel-ratio-selection.vue
diff --git a/src/views/canvas/components/tools/slider.vue b/src/views/canvas/components/tools/slider.vue
new file mode 100644
index 0000000..46cd80a
--- /dev/null
+++ b/src/views/canvas/components/tools/slider.vue
@@ -0,0 +1,172 @@
+<template>
+	<div class="slider" :disabled="disabled">
+		<div
+			class="input-range"
+			:style="{
+				'--progress': (value - props.min) / (props.max - props.min)
+			}"
+		>
+			<span class="tip">{{ props.tipFormatter(value) }}</span>
+			<input
+				type="range"
+				v-model="value"
+				v-bind="$attrs"
+				@input="onInput"
+				@change="onChange"
+				:disabled="disabled"
+				:min="props.min"
+				:max="props.max"
+			/>
+		</div>
+		<div class="input" v-show="isInput">
+			<my-input
+				type="number"
+				v-model="value"
+				v-bind="$attrs"
+				@input="onInput"
+				@change="onChange"
+				:disabled="disabled"
+				:min="props.min"
+				:max="props.max"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch } from 'vue'
+	import MyInput from './my-input.vue'
+	const props = defineProps({
+		modelValue: { type: Number },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		min: {
+			type: Number,
+			default: 0
+		},
+		max: {
+			type: Number,
+			default: 100
+		},
+		tipFormatter: {
+			type: Function,
+			default: (v) => v
+		},
+		isInput: {
+			type: Boolean,
+			default: true
+		}
+	})
+	const emit = defineEmits(['update:modelValue', 'change', 'input'])
+	watch(
+		() => props.modelValue,
+		(v) => {
+			value.value = v
+		}
+	)
+	const value = ref(props.modelValue)
+	const onInput = () => {
+		if (props.disabled) return
+		const v = Number(value.value)
+		emit('update:modelValue', v)
+		emit('input', v)
+	}
+	const onChange = () => {
+		if (props.disabled) return
+		const v = Number(value.value)
+		emit('update:modelValue', v)
+		emit('change', v)
+	}
+</script>
+
+<style scoped lang="less">
+	.slider {
+		position: relative;
+		display: flex;
+		align-items: center;
+		--input-thumb-size: 0.8rem;
+		--backcolor1: var(--slider-thumb-color1, #4285f4);
+		--backcolor2: var(--slider-thumb-color2, rgba(0, 0, 0, 0.1));
+		&:hover {
+			> .input-range > .tip {
+				display: block;
+			}
+		}
+		> .input-range {
+			position: relative;
+			flex: 2;
+			display: flex;
+			> input {
+				width: 100%;
+				-webkit-appearance: none;
+				appearance: none;
+				height: 0.339rem;
+				border-radius: 0.3rem;
+				outline: none;
+				background: linear-gradient(
+					to right,
+					var(--backcolor1) 0%,
+					var(--backcolor1) calc(var(--progress) * 100%),
+					var(--backcolor2) calc(var(--progress) * 100%),
+					var(--backcolor2) 100%
+				);
+				&::-webkit-slider-thumb {
+					-webkit-appearance: none;
+					appearance: none;
+					width: var(--input-thumb-size);
+					height: var(--input-thumb-size);
+					border-radius: 50%;
+					background: var(--backcolor1); /* 蓝色滑块 */
+					cursor: pointer;
+					transition: all 0.2s;
+					box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
+				}
+				&::-webkit-slider-thumb:hover {
+					transform: scale(1.1);
+				}
+			}
+			> .tip {
+				position: absolute;
+				font-size: 1rem;
+				pointer-events: none;
+				user-select: none;
+				color: #666;
+				top: calc(var(--input-thumb-size) / -2 - 0.35rem);
+				left: calc(
+					(100% - var(--input-thumb-size)) * var(--progress) + var(--input-thumb-size) / 2
+				);
+				transform: translate(-50%, -100%);
+				background-color: rgba(0, 0, 0, 0.7);
+				color: white;
+				padding: 0.3rem 0.5rem;
+				border-radius: 0.4rem;
+				font-size: 1rem;
+				white-space: nowrap;
+				pointer-events: none;
+				display: none;
+				&::after {
+					content: '';
+					position: absolute;
+					top: 97%;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 0;
+					height: 0;
+					border-left: 0.5rem solid transparent;
+					border-right: 0.5rem solid transparent;
+					border-top: 0.5rem solid rgba(0, 0, 0, 0.8);
+				}
+			}
+		}
+		> .input {
+			flex: 1;
+			margin-left: 1rem;
+			> input {
+				border-radius: 0.3rem;
+				width: 100%;
+			}
+		}
+	}
+</style>
diff --git a/src/views/canvas/components/tools/upload-file.vue b/src/views/canvas/components/tools/upload-file.vue
new file mode 100644
index 0000000..eb5c28b
--- /dev/null
+++ b/src/views/canvas/components/tools/upload-file.vue
@@ -0,0 +1,97 @@
+<template>
+	<div class="upload-file">
+		<div class="preview" v-if="url">
+			<img :src="url" @error="onChange(null)" />
+			<div class="close" @click="onChange(null)">
+				<svg-icon name="close-border" size="16" />
+			</div>
+		</div>
+		<div class="control" v-else>
+			<div class="icon"><svg-icon name="upload" size="17" /></div>
+			<p class="txt">{{ tip }}</p>
+			<button @click="onSelectFile">Select File</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, computed } from 'vue'
+	const emit = defineEmits(['update:modelValue', 'change'])
+	const props = defineProps({
+		modelValue: { type: [File, null] },
+		tip: { type: String, default: 'Upload your files' }
+	})
+	const data = reactive({
+		file: null
+	})
+	const url = computed(() => (props.modelValue ? URL.createObjectURL(props.modelValue) : ''))
+	const onChange = (v) => {
+		emit('update:modelValue', v)
+		emit('change', v)
+	}
+	const onSelectFile = () => {
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.accept = 'image/png, image/jpeg, image/jpg'
+		input.addEventListener('change', (e) => {
+			const file = e.target.files[0]
+			if (file) onChange(file)
+		})
+		input.click()
+	}
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.upload-file {
+		width: 100%;
+		height: 9.9rem;
+		border-radius: 1rem;
+		background-color: #f0f0f0;
+		// padding: 0 1.7rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		> .control {
+			text-align: center;
+			> .txt {
+				margin-top: 0.6rem;
+				margin-bottom: 0.8rem;
+				font-size: 0.8rem;
+				color: #7c7c7c;
+			}
+			> button {
+				box-shadow: 0px 0.75px 0px 0px #00000005;
+				min-width: 3.9rem;
+				height: 1.3rem;
+				border-radius: 0.23rem;
+				background-color: #fff;
+				font-size: 0.6rem;
+				color: #000;
+				border: 0.05rem solid #d9d9d9;
+				cursor: pointer;
+				&:active {
+					opacity: 0.6;
+				}
+			}
+		}
+		> .preview {
+			width: 8rem;
+			height: 8rem;
+			position: relative;
+			> img {
+				height: 100%;
+				width: 100%;
+				object-fit: contain;
+			}
+			> .close {
+				position: absolute;
+				top: 0.01rem;
+				right: 0.01rem;
+				border-radius: 50%;
+				background-color: #fff;
+				cursor: pointer;
+			}
+		}
+	}
+</style>
diff --git a/src/views/canvas/components/upload-file.vue b/src/views/canvas/components/upload-file.vue
deleted file mode 100644
index cb5fe6f..0000000
--- a/src/views/canvas/components/upload-file.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-	<div class="upload-file">
-		<div class="icon"><svg-icon name="upload" size="17" /></div>
-		<span class="txt">Upload your files</span>
-		<button class="btn">Select File</button>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, defineExpose } from 'vue'
-	const emit = defineEmits(['update:modelValue', 'change'])
-	const props = defineProps({
-		modelValue: { type: String },
-		list: {
-			type: Array,
-			default: () => ['1:1', '4:3', '3:4', '16:9']
-		}
-	})
-	const data = reactive({})
-	const onChange = (v) => {
-		emit('update:modelValue', v)
-		emit('change', v)
-	}
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.upload-file {
-		width: 100%;
-		height: 9.9rem;
-		border-radius: 1rem;
-		background-color: #f0f0f0;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		// padding: 0 1.7rem;
-		> .txt {
-			margin-top: 0.6rem;
-			margin-bottom: 0.8rem;
-			font-size: 0.8rem;
-			color: #7c7c7c;
-		}
-		> button {
-			box-shadow: 0px 0.75px 0px 0px #00000005;
-			min-width: 3.9rem;
-			height: 1.3rem;
-			border-radius: 0.23rem;
-			background-color: #fff;
-			font-size: 0.6rem;
-			color: #000;
-			border: 0.05rem solid #d9d9d9;
-			cursor: pointer;
-			&:active {
-				opacity: 0.6;
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas/index.vue b/src/views/canvas/index.vue
index 2b83bc1..ed8ba68 100644
--- a/src/views/canvas/index.vue
+++ b/src/views/canvas/index.vue
@@ -5,6 +5,7 @@
 		<card type="color-palette" />
 		<card type="to-video" />
 		<card type="to-3d-model" />
+		<card type="to-cad" />
 		<card type="add-print" />
 		<card type="edit-material" />
 	</div>
@@ -25,10 +26,12 @@
 
 <style lang="less" scoped>
 	.canvas {
+		overflow-y: auto;
 		background-color: #fcf8f1;
 		display: flex;
 		flex-wrap: wrap;
 		align-content: flex-start;
+		align-items: flex-start;
 		padding: 2rem;
 		gap: 2rem;
 	}
diff --git a/src/views/home/left-nav.vue b/src/views/home/left-nav.vue
index 635cefa..7191cf9 100644
--- a/src/views/home/left-nav.vue
+++ b/src/views/home/left-nav.vue
@@ -7,7 +7,7 @@
 				<svg-icon name="shouqi" size="24" />
 			</div>
 		</div>
-		<button class="create-btn">
+		<button class="create-btn" @click="onCreateProject">
 			<span class="icon"><svg-icon name="add" size="16" /></span>
 			<span v-show="!isCollapse" class="text">{{ $t('Home.newProject') }}</span>
 		</button>
@@ -104,14 +104,20 @@
 			name: 'Conversation Item 5'
 		}
 	])
-	const onHome = () => {
-		console.log('onHome')
+	const onCreateProject = () => {
+		router.push({ name: 'mainInput' })
 	}
+	const onHome = () => {}
 	const onCanvas = () => {
 		router.push({ name: 'canvas' })
 	}
 	const onHistory = () => {
-		showHistory.value = !showHistory.value
+		if (isCollapse.value) {
+			globalStore.setHomeLeftNavCollapse(false)
+			showHistory.value = true
+		} else {
+			showHistory.value = !showHistory.value
+		}
 	}
 	const onClickHistoryItem = (item: any) => {
 		router.push({ name: 'test', params: { id: item.id } })
@@ -129,7 +135,7 @@
 		}
 	}
 </script>
-
+ 
 <style lang="less" scoped>
 	.left-nav {
 		width: var(--left-nav-collapse-width, 30rem);
diff --git a/src/views/login/css/style.css b/src/views/login/css/style.css
index d552fa6..8614e4e 100644
--- a/src/views/login/css/style.css
+++ b/src/views/login/css/style.css
@@ -88,8 +88,8 @@
   justify-content: center;
   color: #252727;
 }
-.register > .right > .box > .title::v-deep > *,
-.login > .right > .box > .title::v-deep > * {
+.register > .right > .box > .title:deep(*),
+.login > .right > .box > .title:deep(*) {
   margin-left: 1rem;
   font-family: LBold;
   margin-bottom: -1rem;
@@ -102,36 +102,33 @@
   color: #666;
   margin-top: 0.5rem;
 }
-.register > .right > .box > .el-form,
-.login > .right > .box > .el-form {
+.register > .right > .box:deep(.el-form),
+.login > .right > .box:deep(.el-form) {
   margin-top: 5rem;
   width: 100%;
-}
-.register > .right > .box > .el-form::v-deep,
-.login > .right > .box > .el-form::v-deep {
   font-family: Regular;
 }
-.register > .right > .box > .el-form::v-deep .el-form-item,
-.login > .right > .box > .el-form::v-deep .el-form-item {
+.register > .right > .box:deep(.el-form) .el-form-item,
+.login > .right > .box:deep(.el-form) .el-form-item {
   margin-bottom: 2rem;
 }
-.register > .right > .box > .el-form::v-deep .el-form-item__label,
-.login > .right > .box > .el-form::v-deep .el-form-item__label {
+.register > .right > .box:deep(.el-form) .el-form-item__label,
+.login > .right > .box:deep(.el-form) .el-form-item__label {
   color: #252727;
   font-size: 1.8rem;
   margin-bottom: 0.8rem;
   font-family: Medium;
 }
-.register > .right > .box > .el-form::v-deep .el-input,
-.login > .right > .box > .el-form::v-deep .el-input {
+.register > .right > .box:deep(.el-form) .el-input,
+.login > .right > .box:deep(.el-form) .el-input {
   --el-input-height: 5rem;
   --el-input-border-radius: 0.8rem;
   --el-input-text-color: #252727;
   --el-border-color: #dfdfdf;
   font-size: 1.4rem;
 }
-.register > .right > .box > .el-form::v-deep .forgetPassword,
-.login > .right > .box > .el-form::v-deep .forgetPassword {
+.register > .right > .box:deep(.el-form) .forgetPassword,
+.login > .right > .box:deep(.el-form) .forgetPassword {
   margin-top: -1.2rem;
   margin-bottom: 2rem;
   font-size: 1.6rem;
@@ -140,29 +137,29 @@
   cursor: pointer;
   text-decoration: underline;
 }
-.register > .right > .box > .el-form::v-deep .privacy,
-.login > .right > .box > .el-form::v-deep .privacy {
+.register > .right > .box:deep(.el-form) .privacy,
+.login > .right > .box:deep(.el-form) .privacy {
   --el-checkbox-height: auto;
   margin-bottom: 4rem;
 }
-.register > .right > .box > .el-form::v-deep .privacy .el-checkbox__label,
-.login > .right > .box > .el-form::v-deep .privacy .el-checkbox__label {
+.register > .right > .box:deep(.el-form) .privacy .el-checkbox__label,
+.login > .right > .box:deep(.el-form) .privacy .el-checkbox__label {
   font-size: 1.6rem;
   color: #666666;
   font-weight: 400;
 }
-.register > .right > .box > .el-form::v-deep .privacy .el-checkbox__label > div > span,
-.login > .right > .box > .el-form::v-deep .privacy .el-checkbox__label > div > span {
+.register > .right > .box:deep(.el-form) .privacy .el-checkbox__label > div > span,
+.login > .right > .box:deep(.el-form) .privacy .el-checkbox__label > div > span {
   text-decoration: underline;
   cursor: pointer;
 }
-.register > .right > .box > .el-form::v-deep .el-form-item__error,
-.login > .right > .box > .el-form::v-deep .el-form-item__error {
+.register > .right > .box:deep(.el-form) .el-form-item__error,
+.login > .right > .box:deep(.el-form) .el-form-item__error {
   padding-top: 1px;
   font-size: 1.4rem;
 }
-.register > .right > .box > .el-form::v-deep .submit,
-.login > .right > .box > .el-form::v-deep .submit {
+.register > .right > .box:deep(.el-form) .submit,
+.login > .right > .box:deep(.el-form) .submit {
   width: 100%;
   height: 6rem;
   background: #252727;
@@ -179,8 +176,8 @@
   color: #666;
   font-family: Regular;
 }
-.register > .right > .box > .tip-2::v-deep > span,
-.login > .right > .box > .tip-2::v-deep > span {
+.register > .right > .box > .tip-2:deep(span),
+.login > .right > .box > .tip-2:deep(span) {
   text-decoration: underline;
   color: #FF7A50;
   cursor: pointer;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 571b061..db51358 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -41,7 +41,10 @@
 			width: 100%;
 			display: flex;
 			justify-content: center;
-			// align-items: center;
+			> * {
+				position: relative;
+				z-index: 1;
+			}
 			> .tip {
 				position: absolute;
 				width: 100%;
@@ -51,6 +54,7 @@
 				text-align: center;
 				font-family: Regular;
 				color: #fff;
+				z-index: 0;
 			}
 			> .logo {
 				width: auto;
diff --git a/src/views/login/less/style.less b/src/views/login/less/style.less
index da039f3..544a68a 100644
--- a/src/views/login/less/style.less
+++ b/src/views/login/less/style.less
@@ -85,7 +85,7 @@
 				justify-content: center;
 				color: #252727;
 
-				&::v-deep>* {
+				&:deep(*) {
 					margin-left: 1rem;
 					font-family: LBold;
 					margin-bottom: -1rem;
@@ -100,76 +100,73 @@
 				margin-top: 0.5rem;
 			}
 
-			>.el-form {
+			&:deep(.el-form) {
 				margin-top: 5rem;
 				width: 100%;
+				font-family: Regular;
 
-				&::v-deep {
-					font-family: Regular;
+				.el-form-item {
+					margin-bottom: 2rem;
+				}
 
-					.el-form-item {
-						margin-bottom: 2rem;
-					}
+				.el-form-item__label {
+					color: #252727;
+					font-size: 1.8rem;
+					margin-bottom: 0.8rem;
+					font-family: Medium;
+				}
 
-					.el-form-item__label {
-						color: #252727;
-						font-size: 1.8rem;
-						margin-bottom: 0.8rem;
-						font-family: Medium;
-					}
+				.el-input {
+					--el-input-height: 5rem;
+					--el-input-border-radius: 0.8rem;
+					--el-input-text-color: #252727;
+					--el-border-color: #dfdfdf;
+					font-size: 1.4rem;
+				}
 
-					.el-input {
-						--el-input-height: 5rem;
-						--el-input-border-radius: 0.8rem;
-						--el-input-text-color: #252727;
-						--el-border-color: #dfdfdf;
-						font-size: 1.4rem;
-					}
+				.forgetPassword {
+					margin-top: -1.2rem;
+					margin-bottom: 2rem;
+					font-size: 1.6rem;
+					text-align: right;
+					color: #666666;
+					cursor: pointer;
+					text-decoration: underline;
+				}
 
-					.forgetPassword {
-						margin-top: -1.2rem;
-						margin-bottom: 2rem;
+
+				.privacy {
+					--el-checkbox-height: auto;
+					margin-bottom: 4rem;
+
+					.el-checkbox__label {
 						font-size: 1.6rem;
-						text-align: right;
 						color: #666666;
-						cursor: pointer;
-						text-decoration: underline;
-					}
+						font-weight: 400;
 
-
-					.privacy {
-						--el-checkbox-height: auto;
-						margin-bottom: 4rem;
-
-						.el-checkbox__label {
-							font-size: 1.6rem;
-							color: #666666;
-							font-weight: 400;
-
-							>div {
-								>span {
-									text-decoration: underline;
-									cursor: pointer;
-								}
+						>div {
+							>span {
+								text-decoration: underline;
+								cursor: pointer;
 							}
 						}
 					}
+				}
 
-					.el-form-item__error {
-						padding-top: 1px;
-						font-size: 1.4rem;
-					}
+				.el-form-item__error {
+					padding-top: 1px;
+					font-size: 1.4rem;
+				}
 
-					.submit {
-						width: 100%;
-						height: 6rem;
-						background: #252727;
-						font-size: 2rem;
-						border-radius: 0.8rem;
-						color: #fff;
-						font-weight: 600;
-						font-family: SemiBold;
-					}
+				.submit {
+					width: 100%;
+					height: 6rem;
+					background: #252727;
+					font-size: 2rem;
+					border-radius: 0.8rem;
+					color: #fff;
+					font-weight: 600;
+					font-family: SemiBold;
 				}
 			}
 
@@ -179,7 +176,7 @@
 				color: #666;
 				font-family: Regular;
 
-				&::v-deep>span {
+				&:deep(span) {
 					text-decoration: underline;
 					color: #FF7A50;
 					cursor: pointer;
diff --git a/src/views/login/visible-code.vue b/src/views/login/visible-code.vue
index 73aeb50..c49896b 100644
--- a/src/views/login/visible-code.vue
+++ b/src/views/login/visible-code.vue
@@ -73,7 +73,7 @@
 			font-size: 1.8rem;
 			color: #666;
 			font-family: Regular;
-			&::v-deep > span {
+			&:deep(span) {
 				color: #252727;
 				font-family: Medium;
 			}
diff --git a/src/views/nuic/index.vue b/src/views/nuic/index.vue
index 7498093..6b787db 100644
--- a/src/views/nuic/index.vue
+++ b/src/views/nuic/index.vue
@@ -110,7 +110,7 @@
 				}
 			}
 		}
-		&::v-deep > .view {
+		&:deep(.view) {
 			margin-top: 5rem;
 			display: flex;
 			flex-direction: column;
diff --git a/src/views/nuic/nuic-1.vue b/src/views/nuic/nuic-1.vue
index 967689a..47dbc1c 100644
--- a/src/views/nuic/nuic-1.vue
+++ b/src/views/nuic/nuic-1.vue
@@ -37,7 +37,7 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 2rem;
-			&::v-deep > b {
+			&:deep(b) {
 				font-size: 4.8rem;
 				font-family: MBold;
 			}
diff --git a/src/views/nuic/nuic-2.vue b/src/views/nuic/nuic-2.vue
index d129c52..63717d8 100644
--- a/src/views/nuic/nuic-2.vue
+++ b/src/views/nuic/nuic-2.vue
@@ -43,7 +43,7 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 6rem;
-			&::v-deep > b {
+			&:deep(b) {
 				font-size: 4.8rem;
 				font-family: MBold;
 			}
diff --git a/src/views/nuic/nuic-3.vue b/src/views/nuic/nuic-3.vue
index daa50ba..906044c 100644
--- a/src/views/nuic/nuic-3.vue
+++ b/src/views/nuic/nuic-3.vue
@@ -61,7 +61,7 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 9.8rem;
-			&::v-deep > b {
+			&:deep(b) {
 				font-size: 4.8rem;
 				font-family: MBold;
 			}
@@ -80,7 +80,7 @@
 			> .el-select {
 				width: 100%;
 				--el-border-radius-base: 0.8rem;
-				&::v-deep {
+				&:deep {
 					font-family: Regular;
 					.el-select__wrapper {
 						min-height: auto;