diff --git a/src/router/index.ts b/src/router/index.ts
index 77adf854..52dacdd5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -452,21 +452,6 @@ export const dynamicRoutes = [
 							icon: 'iconfont icon-ditu',
 						},
 					},
-					{
-						path: '/fun/rollNotice',
-						name: 'rollNotice',
-						component: () => import('/@/views/fun/rollNotice/index.vue'),
-						meta: {
-							title: 'notice 滚动通知',
-							isLink: '',
-							isHide: false,
-							isKeepAlive: true,
-							isAffix: false,
-							isIframe: false,
-							auth: ['admin', 'test'],
-							icon: 'iconfont icon-tongzhi',
-						},
-					},
 				],
 			},
 			{
@@ -620,6 +605,21 @@ export const dynamicRoutes = [
 							icon: 'iconfont icon-chazhaobiaodanliebiao',
 						},
 					},
+					{
+						path: '/pages/steps',
+						name: 'steps',
+						component: () => import('/@/views/pages/steps/index.vue'),
+						meta: {
+							title: '步骤条',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'iconfont icon-step',
+						},
+					},
 				],
 			},
 			{
diff --git a/src/theme/element.scss b/src/theme/element.scss
index 2f1feba8..c3b5803b 100644
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@@ -765,7 +765,7 @@
 		color: #ffffff !important;
 	}
 }
-.add-is-active {
+#add-is-active {
 	@extend .el-active-extend;
 	&:hover {
 		@extend .el-active-extend;
@@ -803,6 +803,10 @@
 .el-submenu [class^='el-icon-'] {
 	font-size: 14px !important;
 }
+// 去掉离开浏览器时，菜单的默认高亮
+.el-menu-item:focus {
+	background-color: transparent !important;
+}
 
 /* Tabs 标签页
 ------------------------------- */
@@ -866,6 +870,13 @@
 .el-step__head.is-error {
 	border-color: set-color(danger);
 }
+.el-step__icon-inner {
+	font-size: 30px !important;
+	font-weight: 400 !important;
+}
+.el-step__title {
+	font-size: 14px;
+}
 
 /* Dialog 对话框
 ------------------------------- */
@@ -954,3 +965,15 @@
 	height: 100%;
 	overflow: auto;
 }
+.el-drawer-fade-enter-active .el-drawer.rtl {
+	animation: rtl-drawer-animation 0.3s ease-in reverse !important;
+}
+.el-drawer-fade-leave-active .el-drawer.rtl {
+	animation: rtl-drawer-animation 0.3s ease !important;
+}
+.el-drawer-fade-enter-active .el-drawer.ltr {
+	animation: ltr-drawer-animation 0.3s ease-in reverse !important;
+}
+.el-drawer-fade-leave-active .el-drawer.ltr {
+	animation: ltr-drawer-animation 0.3s ease !important;
+}
diff --git a/src/utils/setIconfont.ts b/src/utils/setIconfont.ts
index 8de7408e..4220cb61 100644
--- a/src/utils/setIconfont.ts
+++ b/src/utils/setIconfont.ts
@@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-	'//at.alicdn.com/t/font_2298093_ets0yznyu8g.css',
+	'//at.alicdn.com/t/font_2298093_1pnb6uhuq4e.css',
 	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
 ];
 // 第三方 js url
diff --git a/src/views/fun/rollNotice/index.vue b/src/views/fun/rollNotice/index.vue
deleted file mode 100644
index 3d480687..00000000
--- a/src/views/fun/rollNotice/index.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<div class="roll-notice-container">
-		<el-card shadow="hover" header="滚动通知演示"> </el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive } from 'vue';
-export default {
-	name: 'rollNotice',
-	setup() {
-		const state = reactive({});
-		return {
-			...toRefs(state),
-		};
-	},
-};
-</script>
diff --git a/src/views/layout/navBars/breadcrumb/setings.vue b/src/views/layout/navBars/breadcrumb/setings.vue
index 888c57e8..8e1d27c7 100644
--- a/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/src/views/layout/navBars/breadcrumb/setings.vue
@@ -406,11 +406,10 @@ export default defineComponent({
 				setTimeout(() => {
 					let els = document.querySelector('.el-menu-item.is-active');
 					if (!els) return false;
-					let attr = 'el-menu-item is-active';
-					if (getThemeConfig.value.isMenuBarColorHighlight) els.setAttribute('class', `${attr} add-is-active`);
-					else els.setAttribute('class', `${attr}`);
+					if (getThemeConfig.value.isMenuBarColorHighlight) els.setAttribute('id', `add-is-active`);
+					else els.setAttribute('id', ``);
 					setLocalThemeConfig();
-					setLocal('menuBarHighlightClass', els.getAttribute('class'));
+					setLocal('menuBarHighlightId', els.getAttribute('id'));
 				}, 0);
 			});
 		};
@@ -610,10 +609,10 @@ export default defineComponent({
 							asideEl.style.cssText = getLocal('asideBgStyle');
 						}
 						// 菜单字体背景高亮
-						if (getLocal('menuBarHighlightClass')) {
+						if (getLocal('menuBarHighlightId')) {
 							let els = document.querySelector('.el-menu-item.is-active');
 							if (!els) return false;
-							els.setAttribute('class', getLocal('menuBarHighlightClass'));
+							els.setAttribute('id', getLocal('menuBarHighlightId'));
 						}
 						// 灰色模式/色弱模式
 						if (getLocal('appFilterStyle')) {
diff --git a/src/views/layout/navBars/breadcrumb/user.vue b/src/views/layout/navBars/breadcrumb/user.vue
index 59cc461a..2c0c83c7 100644
--- a/src/views/layout/navBars/breadcrumb/user.vue
+++ b/src/views/layout/navBars/breadcrumb/user.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-navbars-breadcrumb-user" :style="{ flex: setFlexAutoStyle }">
+	<div class="layout-navbars-breadcrumb-user">
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
 			<i class="el-icon-search" title="菜单搜索"></i>
 		</div>
@@ -63,11 +63,6 @@ export default {
 			isScreenfull: false,
 			isShowUserNewsPopover: false,
 		});
-		// 设置布局
-		const setFlexAutoStyle = computed(() => {
-			let { isBreadcrumb, layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
-			return !isBreadcrumb && layout !== 'transverse' && isClassicSplitMenu ? 1 : '';
-		});
 		// 获取用户信息 vuex
 		const getUserInfos = computed(() => {
 			return store.state.userInfos.userInfos;
@@ -129,7 +124,6 @@ export default {
 			searchRef.value.openSearch();
 		};
 		return {
-			setFlexAutoStyle,
 			getUserInfos,
 			onLayoutSetingClick,
 			onHandleCommandClick,
@@ -147,6 +141,7 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
+	flex: 1;
 	&-link {
 		height: 100%;
 		display: flex;
diff --git a/src/views/layout/navBars/tagsView/tagsView.vue b/src/views/layout/navBars/tagsView/tagsView.vue
index 35980a0a..eaab5781 100644
--- a/src/views/layout/navBars/tagsView/tagsView.vue
+++ b/src/views/layout/navBars/tagsView/tagsView.vue
@@ -250,7 +250,7 @@ export default {
 				} else {
 					// 非头/尾部
 					if (liIndex === 0) beforePrevL = liFirst.offsetLeft - 5;
-					else beforePrevL = liPrevTag.offsetLeft - 5;
+					else beforePrevL = liPrevTag?.offsetLeft - 5;
 					if (liIndex === liLength) afterNextL = liLast.offsetLeft + liLast.offsetWidth + 5;
 					else afterNextL = liNextTag.offsetLeft + liNextTag.offsetWidth + 5;
 					if (afterNextL > scrollL + offsetW) {
diff --git a/src/views/pages/steps/index.vue b/src/views/pages/steps/index.vue
new file mode 100644
index 00000000..b893ab61
--- /dev/null
+++ b/src/views/pages/steps/index.vue
@@ -0,0 +1,32 @@
+<template>
+	<div class="steps-container">
+		<el-card shadow="hover" header="element-plus 步骤条">
+			<el-steps :active="stepsActive">
+				<el-step title="第一步" icon="iconfont icon-0_round_solid"></el-step>
+				<el-step title="第二步" icon="iconfont icon-2_round_solid"></el-step>
+				<el-step title="第三步" icon="iconfont icon-3_round_solid"></el-step>
+			</el-steps>
+			<el-button @click="onNextSteps" size="small" class="mt15" type="primary">下一步</el-button>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+	name: 'steps',
+	setup() {
+		const state = reactive({
+			stepsActive: 1,
+		});
+		// 下一步点击
+		const onNextSteps = () => {
+			if (state.stepsActive++ > 2) state.stepsActive = 1;
+		};
+		return {
+			onNextSteps,
+			...toRefs(state),
+		};
+	},
+};
+</script>