fix: 全局优化css穿透 v-deep写法，避免打包报错提示

src/components/noticeBar/index.vue

@@ -171,7 +171,7 @@ export default defineComponent({
 			.notice-bar-warp-slot {
 				width: 100%;
 				white-space: nowrap;
-				::v-deep(.el-carousel__item) {
+				:deep(.el-carousel__item) {
 					display: flex;
 					align-items: center;
 				}

src/components/upload-wrapper/index.vue

@@ -54,7 +54,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
 </script>
 
 <style scoped>
-.hide ::v-deep(.el-upload-list) {
+.hide :deep(.el-upload-list) {
   display: none;
 }
 

src/components/upload/index.vue

@@ -153,7 +153,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
 </script>
 
 <style scoped>
-.hide ::v-deep(.el-upload--picture-card) {
+.hide :deep(.el-upload--picture-card) {
 	display: none;
 }
 

src/components/vue3cron/vue3cron.vue

@@ -573,7 +573,7 @@ export default defineComponent({
   }
 });
 </script>
-<style >
+<style lang="scss" scoped>
 .vue3-cron-div {
 
   .el-input-number__decrease,

src/layout/lockScreen/index.vue

@@ -357,11 +357,11 @@ export default defineComponent({
 		}
 	}
 }
-::v-deep(.el-input-group__append) {
+:deep(.el-input-group__append) {
 	background: var(--el-color-white);
 	padding: 0px 15px;
 }
-::v-deep(.el-input__inner) {
+:deep(.el-input__inner) {
 	border-right-color: var(--el-border-color-extra-light);
 	&:hover {
 		border-color: var(--el-border-color-extra-light);

src/layout/navBars/breadcrumb/breadcrumb.vue

@@ -134,11 +134,11 @@ export default defineComponent({
 		font-size: 14px;
 		margin-right: 5px;
 	}
-	::v-deep(.el-breadcrumb__separator) {
+	:deep(.el-breadcrumb__separator) {
 		opacity: 0.7;
 		color: var(--next-bg-topBarColor);
 	}
-	::v-deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
+	:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
 		font-weight: unset !important;
 		color: var(--next-bg-topBarColor);
 		&:hover {

src/layout/navBars/breadcrumb/search.vue

@@ -118,12 +118,12 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .layout-search-dialog {
-	::v-deep(.el-dialog) {
+	:deep(.el-dialog) {
 		box-shadow: unset !important;
 		border-radius: 0 !important;
 		background: rgba(0, 0, 0, 0.5);
 	}
-	::v-deep(.el-autocomplete) {
+	:deep(.el-autocomplete) {
 		width: 560px;
 		position: absolute;
 		top: 100px;

src/layout/navBars/breadcrumb/setings.vue

@@ -602,7 +602,7 @@ export default defineComponent({
 	height: calc(100vh - 50px);
 	padding: 0 15px;
 
-	::v-deep(.el-scrollbar__view) {
+	:deep(.el-scrollbar__view) {
 		overflow-x: hidden !important;
 	}
 

src/layout/navBars/breadcrumb/user.vue

@@ -302,18 +302,18 @@ export default defineComponent({
     }
   }
 
-  ::v-deep(.el-dropdown) {
+  :deep(.el-dropdown) {
     color: var(--next-bg-topBarColor);
   }
 
-  ::v-deep(.el-badge) {
+  :deep(.el-badge) {
     height: 40px;
     line-height: 40px;
     display: flex;
     align-items: center;
   }
 
-  ::v-deep(.el-badge__content.is-fixed) {
+  :deep(.el-badge__content.is-fixed) {
     top: 12px;
   }
 }

src/layout/navBars/breadcrumb/userNews.vue

@@ -121,7 +121,7 @@ const onGoToGiteeClick = () => {
 			opacity: 1;
 		}
 	}
-	::v-deep(.el-empty__description p) {
+	:deep(.el-empty__description p) {
 		font-size: 13px;
 	}
 }

src/layout/navBars/tagsView/tagsView.vue

@@ -557,7 +557,7 @@ export default defineComponent({
 	border-bottom: 1px solid var(--next-border-color-light);
 	position: relative;
 	z-index: 4;
-	::v-deep(.el-scrollbar__wrap) {
+	:deep(.el-scrollbar__wrap) {
 		overflow-x: auto !important;
 	}
 	&-ul {

src/layout/navMenu/horizontal.vue

@@ -135,10 +135,10 @@ export default defineComponent({
 	flex: 1;
 	overflow: hidden;
 	margin-right: 30px;
-	::v-deep(.el-scrollbar__bar.is-vertical) {
+	:deep(.el-scrollbar__bar.is-vertical) {
 		display: none;
 	}
-	::v-deep(a) {
+	:deep(a) {
 		width: 100%;
 	}
 	.el-menu.el-menu--horizontal {

src/views/iot/alarm/setting/component/edit.vue

@@ -629,7 +629,8 @@ export default defineComponent({
 	},
 });
 </script>
-<style scoped>
+<style scoped lang="scss">
+
 .inline {
 	display: inline-flex;
 }

src/views/iot/alarm/setting/index.vue

@@ -236,6 +236,7 @@ export default defineComponent({
 });
 </script>
 <style scoped lang="scss">
+
 .el-button.is-text:not(.is-disabled).is-has-bg {
 	background-color: var(--next-border-color-light);
 }

src/views/iot/device-tree/tree/index.vue

@@ -377,11 +377,11 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-.el-card ::v-deep(.el-card__body) {
+.el-card :deep(.el-card__body) {
   height: 100%;
 }
 
-.el-tree ::v-deep(.el-tree-node__label) {
+.el-tree :deep(.el-tree-node__label) {
   width: 100%;
   overflow: hidden;
   display: block;

src/views/iot/device/instance/component/function.vue

@@ -118,11 +118,11 @@ function clear(row: IListItem) {
 		flex: 2;
 	}
 
-	::v-deep(.el-textarea__inner) {
+	:deep(.el-textarea__inner) {
 		height: 100%;
 	}
 
-	::v-deep(.el-select) {
+	:deep(.el-select) {
 		width: 100%;
 	}
 }

src/views/iot/device/product/component/dataParse.vue

@@ -84,13 +84,13 @@ function mock() {
 }
 </script>
 <style lang="scss" scoped>
-::v-deep(.CodeMirror) {
+:deep(.CodeMirror) {
 	height: calc(100vh - 320px);
 }
 
 .input,
 .output {
-	::v-deep(.el-textarea__inner) {
+	:deep(.el-textarea__inner) {
 		height: calc(50vh - 170px);
 	}
 }

src/views/iot/device/template/component/deviceTemplateDialog.vue

@@ -309,9 +309,7 @@ export default {
 	margin: 10px;
 }
 
-::v-deep {
-	.el-form-item__label {
-		text-align: right;
-	}
+:deep(.el-form-item__label) {
+	text-align: right;
 }
 </style>

src/views/iot/device/template/component/importFile.vue

@@ -123,20 +123,17 @@ export default {
 				});
 		},
 	},
-
-	mounted() {},
 };
 </script>
 
 <style lang="scss" scoped>
-::v-deep {
-	.import-dialog {
-		.el-dialog {
-			width: 575px !important;
-			height: auto;
-		}
+:deep(.import-dialog) {
+	.el-dialog {
+		width: 575px !important;
+		height: auto;
 	}
 }
+
 .title {
 	// color: #000;
 	font-size: 16px;
@@ -156,6 +153,7 @@ export default {
 	padding: 10px;
 	margin-bottom: 20px;
 	border: 2px dashed #ccc;
+
 	img {
 		margin-right: 10px;
 	}
@@ -175,8 +173,8 @@ export default {
 	cursor: pointer;
 	margin-bottom: 20px;
 	padding: 5px 10px;
+
 	&:hover {
 		background-color: #f5f7fa;
 	}
-}
-</style>
+}</style>

src/views/iot/iotCard/dashboard.vue

@@ -667,7 +667,7 @@ watch(
       justify-content: space-between;
       align-items: center;
       margin-bottom: 16px;
-      ::v-deep .el-date-editor.el-input__wrapper {
+      :deep(.el-date-editor.el-input__wrapper) {
         width: 360px!important;
         margin-left: 12px;
       }
@@ -685,7 +685,7 @@ watch(
       justify-content: space-between;
       align-items: center;
       margin-bottom: 16px;
-      ::v-deep .el-date-editor.el-input__wrapper {
+      :deep(.el-date-editor.el-input__wrapper) {
         max-width: 220px!important;
       }
     }

src/views/iot/iotCard/index/detail.vue

@@ -695,7 +695,7 @@ watch(
       justify-content: space-between;
       align-items: center;
       margin-bottom: 16px;
-      ::v-deep .el-date-editor.el-input__wrapper {
+      :deep(.el-date-editor.el-input__wrapper) {
         width: 360px!important;
         margin-left: 12px;
       }

src/views/iot/network/server/component/list.vue

@@ -178,11 +178,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-::v-deep div.more-opearte-wrap {
+:deep(div.more-opearte-wrap) {
   flex-direction: row;
   background-color: pink;
 
   // padding: 4px!important;
-  div {}
 }
 </style>

src/views/iot/network/server/create.vue

@@ -375,7 +375,7 @@ export default defineComponent({
 }
 </style>
 <style lang="scss" scoped>
-::v-deep .el-collapse-item__header {
+:deep(.el-collapse-item__header) {
   position: relative;
   padding-left: 20px;
 
@@ -388,16 +388,16 @@ export default defineComponent({
   }
 }
 
-::v-deep .el-input,
-::v-deep .el-input-number {
+:deep(.el-input),
+:deep(.el-input-number) {
   width: 500px;
 }
 
-::v-deep .params {
+:deep(.params) {
   width: 600px;
 }
 
-::v-deep .flex-column {
+:deep(.flex-column) {
   display: flex;
   flex-direction: column;
 

src/views/iot/network/server/edit.vue

@@ -369,7 +369,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-::v-deep .el-collapse-item__header {
+:deep(.el-collapse-item__header) {
   position: relative;
   padding-left: 20px;
 
@@ -382,16 +382,16 @@ export default defineComponent({
   }
 }
 
-::v-deep .el-input,
-::v-deep .el-input-number {
+:deep(.el-input),
+:deep(.el-input-number) {
   width: 500px;
 }
 
-::v-deep .params {
+:deep(.params) {
   width: 600px;
 }
 
-::v-deep .flex-column {
+:deep(.flex-column) {
   display: flex;
   flex-direction: column;
 

src/views/iot/network/tunnel/component/list.vue

@@ -172,12 +172,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-::v-deep div.more-opearte-wrap {
+:deep(div.more-opearte-wrap) {
   flex-direction: row;
   background-color: pink;
-
-  // padding: 4px!important;
-  div {}
-
 }
 </style>

src/views/iot/network/tunnel/create.vue

@@ -257,7 +257,7 @@ export default defineComponent({
 }
 </style>
 <style lang="scss" scoped>
-::v-deep .el-collapse-item__header {
+:deep(.el-collapse-item__header) {
   position: relative;
   padding-left: 20px;
 
@@ -270,12 +270,12 @@ export default defineComponent({
   }
 }
 
-::v-deep .el-input,
-::v-deep .el-input-number {
+:deep(.el-input),
+:deep(.el-input-number) {
   width: 500px;
 }
 
-::v-deep .params {
+:deep(.params) {
   width: 600px;
 }
 </style>

src/views/iot/network/tunnel/edit.vue

@@ -249,7 +249,7 @@ export default defineComponent({
 }
 </style>
 <style lang="scss" scoped>
-::v-deep .el-collapse-item__header {
+:deep(.el-collapse-item__header) {
     position: relative;
     padding-left: 20px;
 
@@ -262,12 +262,12 @@ export default defineComponent({
     }
 }
 
-::v-deep .el-input,
-::v-deep .el-input-number {
+:deep(.el-input),
+:deep(.el-input-number) {
     width: 500px;
 }
 
-::v-deep .params {
+:deep(.params) {
     width: 600px;
 }
 </style>

src/views/iot/scene/list/index.vue

@@ -51,15 +51,13 @@
 <script lang="ts" setup>
 import api from '/@/api/scene';
 import { useSearch } from '/@/hooks/useCommon';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import { ElMessageBox, ElMessage } from 'element-plus';
 import { ref } from 'vue';
 const queryRef = ref();
 const { params, tableData, getList, loading } = useSearch<any[]>(api.log.getList, 'data', { keyWord: '' });
 getList();
 
-
 const view = (row: any) => {
-
 };
 
 const del = (row: any) => {

src/views/login/component/scan.vue

@@ -46,7 +46,7 @@ export default defineComponent({
 	text-align: center;
 	@extend .login-scan-animation;
 	animation-delay: 0.1s;
-	::v-deep(img) {
+	:deep(img) {
 		margin: auto;
 	}
 	.login-msg {

src/views/personal/index.vue

@@ -180,7 +180,7 @@ const dateChange = (e: any) => {
 		align-items: center;
 
 		.personal-user-left {
-			::v-deep(.el-upload) {
+			:deep(.el-upload) {
 				height: 100%;
 				display: flex;
 				flex-direction: column;
@@ -234,7 +234,7 @@ const dateChange = (e: any) => {
 				.personal-item-value-edit {
 					width: 220px;
 
-					::v-deep(.el-input__wrapper) {
+					:deep(.el-input__wrapper) {
 						width: 100%;
 					}
 				}

src/views/system/assess/totalIndex/component/addItem.vue

@@ -39,8 +39,8 @@
 					</template>
 				</el-table-column>
 			</el-table>
-			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]" v-model:current-page="tableData.param.pageNum" background v-model:page-size="tableData.param.pageSize"
-				layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
+			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]" v-model:current-page="tableData.param.pageNum" background
+				v-model:page-size="tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
 			</el-pagination>
 
 			<template #footer>
@@ -237,7 +237,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-form {
+:deep(.el-form) {
 
 	// display: flex;
 	// justify-self: center;
@@ -248,17 +248,17 @@ export default defineComponent({
 		margin: 8px auto;
 	}
 
-	::v-deep .el-input__inner,
-	::v-deep .el-textarea__inner {
+	:deep(.el-input__inner),
+	:deep(.el-textarea__inner) {
 		width: 400px;
 		// flex-grow: 0;
 	}
 
-	::v-deep .el-input__inner {
+	:deep(.el-input__inner) {
 		padding: 1px 10px;
 	}
 
-	::v-deep .el-input__wrapper {
+	:deep(.el-input__wrapper) {
 		flex-grow: 0;
 		padding: 0
 	}

src/views/system/assess/totalIndex/component/addSign.vue

@@ -198,7 +198,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-::v-deep .has-symbol > .el-form-item__content {
+:deep(.has-symbol) > .el-form-item__content {
 	position: relative;
 	.symbol {
 		position: absolute;
@@ -241,14 +241,14 @@ export default defineComponent({
 				}
 
 			}
-			::v-deep .el-input {
+			:deep(.el-input) {
 				width: 100px;
 				height: 28px;
 			}
 		}
 	}
 }
-::v-deep  .el-dialog__body {
+:deep(.el-dialog__body) {
 	border-top: 1px var(--el-border-color) var(--el-border-style);
 }
 </style>

src/views/system/assess/totalIndex/component/detailItem.vue

@@ -146,7 +146,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-dialog__body {
+:deep(.el-dialog__body) {
 	border-top: 1px var(--el-border-color) var(--el-border-style);
 }
 .table-wrap {

src/views/system/assess/totalIndex/component/editItem.vue

@@ -254,7 +254,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-form {
+:deep(.el-form) {
 
 	// display: flex;
 	// justify-self: center;
@@ -265,17 +265,17 @@ export default defineComponent({
 		margin: 8px auto;
 	}
 
-	::v-deep .el-input__inner,
-	::v-deep .el-textarea__inner {
+	:deep(.el-input__inner),
+	:deep(.el-textarea__inner) {
 		width: 400px;
 		// flex-grow: 0;
 	}
 
-	::v-deep .el-input__inner {
+	:deep(.el-input__inner) {
 		padding: 1px 10px;
 	}
 
-	::v-deep .el-input__wrapper {
+	:deep(.el-input__wrapper) {
 		flex-grow: 0;
 		padding: 0
 	}

src/views/system/assess/totalIndex/component/setTask.vue

@@ -306,7 +306,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .inline-row {
-	::v-deep .el-form-item__content {
+	:deep(.el-form-item__content) {
 		display: flex;
 
 		.el-input {

src/views/system/assess/totalIndex/index.vue

@@ -173,7 +173,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-dialog__body {
+:deep(.el-dialog__body) {
   border-top: 1px var(--el-border-color) var(--el-border-style);
 }
 </style>

src/views/system/basicConfig/index.vue

@@ -44,7 +44,7 @@ function menuChange(index: string) {
 		flex: 1;
 	}
 
-	.el-card ::v-deep(.el-card__body) {
+	.el-card :deep(.el-card__body) {
 		flex: 1;
 		height: 100%;
 		overflow-y: auto;
@@ -54,7 +54,7 @@ function menuChange(index: string) {
 	.el-menu {
 		width: 200px;
 
-		::v-deep(.el-menu-item) {
+		:deep(.el-menu-item) {
 			height: 40px !important;
 			line-height: 40px !important;
 		}