diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..f90a1bf
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,120 @@
+<template>
+  <footer id="footer" :class="store.footerBlur ? 'blur' : null">
+    <Transition name="fade" mode="out-in">
+      <div v-if="!store.playerState || !store.playerLrcShow" class="power">
+        <span>
+          Copyright&nbsp;&copy;
+          <span v-if="siteStartDate?.length >= 4" class="site-start">
+            {{ siteStartDate.substring(0, 4) }}
+            -
+          </span>
+          {{ fullYear }}
+          <a :href="siteUrl">{{ siteAnthor }}</a>
+        </span>
+        <!-- 以下信息请不要修改哦 -->
+        <span class="hidden">
+          &amp;&nbsp;Made&nbsp;by
+          <a :href="config.github" target="_blank">
+            {{ config.author }}
+          </a>
+        </span>
+        <!-- 站点备案 -->
+        <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
+          &amp;
+          {{ siteIcp }}
+        </a>
+      </div>
+      <div v-else class="lrc">
+        <Transition name="fade" mode="out-in">
+          <div class="lrc-all" :key="store.getPlayerLrc">
+            <music-one theme="filled" size="18" fill="#efefef" />
+            <span class="lrc-text text-hidden" v-html="store.getPlayerLrc" />
+            <music-one theme="filled" size="18" fill="#efefef" />
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </footer>
+</template>
+
+<script setup>
+import { MusicOne } from "@icon-park/vue-next";
+import { mainStore } from "@/store";
+import config from "@/../package.json";
+
+const store = mainStore();
+const fullYear = new Date().getFullYear();
+
+// 加载配置数据
+const siteStartDate = ref(import.meta.env.VITE_SITE_START);
+const siteIcp = ref(import.meta.env.VITE_SITE_ICP);
+const siteAnthor = ref(import.meta.env.VITE_SITE_ANTHOR);
+const siteUrl = computed(() => {
+  const url = import.meta.env.VITE_SITE_URL;
+  if (!url) return "https://www.imsyy.top";
+  // 判断协议前缀
+  if (!url.startsWith("http://") && !url.startsWith("https://")) {
+    return "//" + url;
+  }
+  return url;
+});
+</script>
+
+<style lang="scss" scoped>
+#footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 46px;
+  line-height: 46px;
+  text-align: center;
+  z-index: 0;
+  font-size: 14px;
+  .power {
+    animation: fade 0.3s;
+  }
+  .lrc {
+    padding: 0 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    .lrc-all {
+      width: 98%;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      .lrc-text {
+        margin: 0 8px;
+      }
+      .i-icon {
+        width: 18px;
+        height: 18px;
+        display: inherit;
+      }
+    }
+  }
+  &.blur {
+    backdrop-filter: blur(10px);
+    background: rgb(0 0 0 / 25%);
+    font-size: 16px;
+  }
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.15s ease-in-out;
+  }
+  @media (max-width: 720px) {
+    font-size: 0.85rem;
+    &.blur {
+      font-size: 0.85rem;
+    }
+  }
+  @media (max-width: 480px) {
+    .hidden {
+      display: none;
+    }
+  }
+}
+</style>