From 24746acaa135179fd1f3bf631a85943ffd081ede Mon Sep 17 00:00:00 2001
From: lizhipeng <zpli@aidlab.hk>
Date: Mon, 9 Feb 2026 14:55:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E5=B8=83=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/canvas/components/card.vue          |  26 +++-
 .../canvas/components/cards/color-palette.vue |  64 ++++++++++
 .../canvas/components/cards/edit-material.vue |  26 ++++
 .../components/cards/scene-composition.vue    |   9 --
 .../canvas/components/cards/to-3d-model.vue   |  26 ++++
 .../canvas/components/cards/to-real-style.vue |  21 +---
 .../canvas/components/cards/to-video.vue      |  91 ++++++++++++++
 src/views/canvas/components/upload-file.vue   |  96 ++++++++++-----
 src/views/canvas/index.vue                    |   1 +
 src/views/home/left-nav.vue                   |  16 ++-
 src/views/login/css/style.css                 |  51 ++++----
 src/views/login/index.vue                     |   6 +-
 src/views/login/less/style.less               | 111 +++++++++---------
 src/views/login/visible-code.vue              |   2 +-
 src/views/nuic/index.vue                      |   2 +-
 src/views/nuic/nuic-1.vue                     |   2 +-
 src/views/nuic/nuic-2.vue                     |   2 +-
 src/views/nuic/nuic-3.vue                     |   4 +-
 18 files changed, 402 insertions(+), 154 deletions(-)
 create mode 100644 src/views/canvas/components/cards/color-palette.vue
 create mode 100644 src/views/canvas/components/cards/edit-material.vue
 create mode 100644 src/views/canvas/components/cards/to-3d-model.vue
 create mode 100644 src/views/canvas/components/cards/to-video.vue

diff --git a/src/views/canvas/components/card.vue b/src/views/canvas/components/card.vue
index 825b9eb..653e6b2 100644
--- a/src/views/canvas/components/card.vue
+++ b/src/views/canvas/components/card.vue
@@ -21,6 +21,10 @@
 	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 EditMaterial from './cards/edit-material.vue'
 	const components = [
 		{
 			type: 'to-real-style',
@@ -35,17 +39,17 @@
 		{
 			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: 'add-print',
@@ -55,7 +59,7 @@
 		{
 			type: 'edit-material',
 			title: 'Edit Material',
-			component: SceneComposition
+			component: EditMaterial
 		}
 	]
 	const emit = defineEmits(['add', 'generate'])
@@ -121,6 +125,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/color-palette.vue b/src/views/canvas/components/cards/color-palette.vue
new file mode 100644
index 0000000..31cc3b9
--- /dev/null
+++ b/src/views/canvas/components/cards/color-palette.vue
@@ -0,0 +1,64 @@
+<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 {
+		> .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..c93ca5d
--- /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 '../my-textarea.vue'
+	import uploadFile from '../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..fba8cf9 100644
--- a/src/views/canvas/components/cards/scene-composition.vue
+++ b/src/views/canvas/components/cards/scene-composition.vue
@@ -5,18 +5,9 @@
 
 <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)
-	})
 </script>
 
 <style lang="less" scoped>
 	.scene-composition {
-		width: 100%;
 	}
 </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..2226b65
--- /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 '../my-textarea.vue'
+	import uploadFile from '../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-real-style.vue b/src/views/canvas/components/cards/to-real-style.vue
index cbf9ae5..bc79c26 100644
--- a/src/views/canvas/components/cards/to-real-style.vue
+++ b/src/views/canvas/components/cards/to-real-style.vue
@@ -1,27 +1,20 @@
 <template>
 	<!-- 转换为真实图 -->
 	<div class="to-real-style">
+		<p class="label">Prompt</p>
 		<my-textarea v-model="data.prompt" />
+		<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 { computed, ref, reactive, onMounted } 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)
-	})
+
 	const data = reactive({
-		prompt: '123123',
+		prompt: '',
 		pixelRatio: '1:1',
 		file: null
 	})
@@ -31,9 +24,5 @@
 
 <style lang="less" scoped>
 	.to-real-style {
-		width: 100%;
-		> * {
-			margin-bottom: 1rem;
-		}
 	}
 </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..cab8511
--- /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 '../my-textarea.vue'
+	import uploadFile from '../upload-file.vue'
+	import pixelRatioSelection from '../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/upload-file.vue b/src/views/canvas/components/upload-file.vue
index cb5fe6f..eb5c28b 100644
--- a/src/views/canvas/components/upload-file.vue
+++ b/src/views/canvas/components/upload-file.vue
@@ -1,26 +1,44 @@
 <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 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, defineExpose } from 'vue'
+	import { reactive, computed } 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']
-		}
+		modelValue: { type: [File, null] },
+		tip: { type: String, default: 'Upload your files' }
 	})
-	const data = reactive({})
+	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>
 
@@ -30,29 +48,49 @@
 		height: 9.9rem;
 		border-radius: 1rem;
 		background-color: #f0f0f0;
+		// padding: 0 1.7rem;
 		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;
+		> .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;
+				}
+			}
 		}
-		> 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;
 			}
 		}
 	}
diff --git a/src/views/canvas/index.vue b/src/views/canvas/index.vue
index 2b83bc1..66d5f8b 100644
--- a/src/views/canvas/index.vue
+++ b/src/views/canvas/index.vue
@@ -29,6 +29,7 @@
 		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;