diff --git a/src/layout/components/Footer/src/Footer.vue b/src/layout/components/Footer/src/Footer.vue
index ebe7e2b42..060f7eae2 100644
--- a/src/layout/components/Footer/src/Footer.vue
+++ b/src/layout/components/Footer/src/Footer.vue
@@ -17,7 +17,7 @@ const title = computed(() => appStore.getTitle)
 <template>
   <div
     :class="prefixCls"
-    class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-contnet-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
+    class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-content-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
   >
     <p style="font-size: 14px">Copyright ©2022-{{ title }}</p>
   </div>
diff --git a/src/styles/var.css b/src/styles/var.css
index a44f804f4..63459ba63 100644
--- a/src/styles/var.css
+++ b/src/styles/var.css
@@ -48,7 +48,7 @@
 
   --app-content-padding: 20px;
 
-  --app-contnet-bg-color: #f5f7f9;
+  --app-content-bg-color: #f5f7f9;
 
   --app-footer-height: 50px;