diff --git a/src/assets/icons/dui.svg b/src/assets/icons/dui.svg
new file mode 100644
index 0000000..9e73def
--- /dev/null
+++ b/src/assets/icons/dui.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5369 3.30968C10.8031 3.49116 10.8718 3.85407 10.6903 4.12025L6.3153 10.5369C6.21745 10.6804 6.06073 10.7729 5.88779 10.7891C5.71485 10.8053 5.54368 10.7436 5.42085 10.6208L2.79585 7.99579C2.56805 7.76798 2.56805 7.39864 2.79585 7.17083C3.02366 6.94302 3.39301 6.94302 3.62081 7.17083L5.74798 9.298L9.72637 3.46303C9.90786 3.19685 10.2708 3.12819 10.5369 3.30968Z" fill="#0D0D0D" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/dropdown-menu.vue b/src/components/dropdown-menu.vue
index 9306439..0d5b176 100644
--- a/src/components/dropdown-menu.vue
+++ b/src/components/dropdown-menu.vue
@@ -11,9 +11,13 @@
 					:key="item.value"
 					:disabled="item.value === modelValue"
 					@click="onItemClick(item.value)"
-					style="--el-font-size-base: 1.4rem; --el-text-color-regular: #000"
 				>
-					<span>{{ item.label }}</span>
+					<div class="menu-item">
+						<span class="label">{{ item.label }}</span>
+						<span class="icon" v-show="item.value === modelValue">
+							<svg-icon name="dui" size="14" color="#000" />
+						</span>
+					</div>
 				</el-dropdown-item>
 			</el-dropdown-menu>
 		</template>
@@ -61,4 +65,17 @@
 			margin-left: 1.6rem;
 		}
 	}
+	.menu-item {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		font-size: 1.4rem;
+		color: #000;
+		> .label {
+			margin-right: auto;
+		}
+		> .icon {
+			margin-left: 1.6rem;
+		}
+	}
 </style>
diff --git a/src/views/canvas/index.vue b/src/views/canvas/index.vue
index 80e7178..90479b4 100644
--- a/src/views/canvas/index.vue
+++ b/src/views/canvas/index.vue
@@ -1,24 +1,64 @@
 <template>
 	<div class="canvas">
-		<card type="to-real-style" />
-		<card type="scene-composition" />
-		<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 class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
+			<div
+				class="canvas-content"
+				:style="{
+					top: `${data.y}px`,
+					left: `${data.x}px`,
+					transform: `scale(${data.scale})`
+				}"
+			>
+				<card type="to-real-style" />
+				<card type="scene-composition" />
+				<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>
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import card from './components/cards/index.vue'
-	import { computed, ref, markRaw, onMounted } from 'vue'
+	import { computed, ref, markRaw, onMounted, reactive } from 'vue'
 	import { useGlobalStore } from '@/stores'
-	import { useRouter, useRoute } from 'vue-router'
-	const router = useRouter()
-	const route = useRoute()
 	const globalStore = useGlobalStore()
+	const data = reactive({
+		x: 100,
+		y: 200,
+		scale: 1
+	})
+	const canvasMain = ref<HTMLDivElement>()
+	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 1) return
+		const ox = data.x
+		const oy = data.y
+		const X = e.clientX
+		const Y = e.clientY
+		const onMouseMove = (e: MouseEvent) => {
+			const dx = e.clientX - X
+			const dy = e.clientY - Y
+			data.x = ox + dx
+			data.y = oy + dy
+		}
+		const onMouseUp = (e: MouseEvent) => {
+			document.removeEventListener('mousemove', onMouseMove)
+			document.removeEventListener('mouseup', onMouseUp)
+		}
+		document.addEventListener('mousemove', onMouseMove)
+		document.addEventListener('mouseup', onMouseUp)
+	}
+	const onMouseWheel = (e: WheelEvent) => {
+		var delta = e.deltaY
+		var scale = data.scale - delta / 1000
+		if (scale < 0.2) scale = 0.2
+		if (scale > 10) scale = 10
+		data.scale = scale
+	}
 	onMounted(() => {
 		globalStore.setHomeLeftNavCollapse(true)
 	})
@@ -26,13 +66,29 @@
 
 <style lang="less" scoped>
 	.canvas {
-		overflow-y: auto;
+		// overflow-y: auto;
+		// display: flex;
+		// flex-wrap: wrap;
+		// align-content: flex-start;
+		// align-items: flex-start;
+		// padding: 2rem;
+		// gap: 2rem;
 		background-color: #fcf8f1;
-		display: flex;
-		flex-wrap: wrap;
-		align-content: flex-start;
-		align-items: flex-start;
-		padding: 2rem;
-		gap: 2rem;
+		position: relative;
+		overflow: hidden;
+		> .canvas-main {
+			width: 100%;
+			height: 100%;
+			position: relative;
+			> .canvas-content {
+				position: absolute;
+				width: auto;
+				height: auto;
+				display: flex;
+				align-items: flex-start;
+				gap: 5rem;
+				transform-origin: top left;
+			}
+		}
 	}
 </style>
diff --git a/src/views/home/setting/index.vue b/src/views/home/setting/index.vue
index 9195ae7..3fb7fb4 100644
--- a/src/views/home/setting/index.vue
+++ b/src/views/home/setting/index.vue
@@ -85,6 +85,7 @@
 			> div {
 				width: 16.4rem;
 				height: 3.4rem;
+				margin-bottom: 0.3rem;
 				display: flex;
 				align-items: center;
 				// justify-content: center;
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index d09a0e8..dbffb06 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -102,7 +102,6 @@
 			verificationCode: code
 		})
 			.then((res) => {
-				console.log(res)
 				if (res) {
 					userInfoStore.setToken(res)
 					userInfoStore.setUserInfo({