feat(Footer): replace ID selectors with class selectors in Footer component

.vitepress/theme/components/Footer.vue

@@ -6,17 +6,17 @@ const siteVersion = theme.value.siteVersion;
 </script>
 
 <template>
-  <footer class="main-layout-footer">
+  <footer class="Footer">
     <hr />
-    <div id="main-layout-footer-description">
-      <div id="main-layout-footer-description-topic">
+    <div class="description-area">
+      <div class="topic">
         <img src="/assets/images/avatar.webp" alt="logo" />
         <div>
           <h3>{{ page.title }}</h3>
           <p>来自 {{ site.title }}</p>
         </div>
       </div>
-      <div id="main-layout-footer-description-theme">
+      <div class="theme-info">
         <p>
           使用
           <a href="https://github.com/sendevia/vitepress-theme" target="_blank">sendevia's material theme</a>
@@ -24,14 +24,14 @@ const siteVersion = theme.value.siteVersion;
         </p>
         <a :href="'https://github.com/sendevia/website/tags/v' + siteVersion" target="_blank"> 版本：{{ siteVersion }}</a>
       </div>
-      <div id="main-layout-footer-description-beian">
-        <div id="main-layout-footer-beian-gongan">
+      <div class="beian-info">
+        <div class="beian-gongan">
           <img src="/assets/images/beian.png" loading="eager" />
           <a href="https://beian.mps.gov.cn/#/query/webSearch?code=23020002230215" target="_blank"
             >黑公网安备23020002230215</a
           >
         </div>
-        <div id="main-layout-footer-Registration-icp">
+        <div>
           <a href="https://beian.miit.gov.cn/" target="_blank">黑ICP备2024016516号-1</a>
         </div>
       </div>

.vitepress/theme/styles/components/Footer.scss

@@ -1,6 +1,6 @@
 @use "../mixin";
 
-footer {
+.Footer {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
@@ -22,13 +22,13 @@ footer {
     width: 100%;
   }
 
-  #main-layout-footer-description {
+  .description-area {
     display: flex;
     flex-grow: 1;
     flex-direction: column;
     gap: 6px;
 
-    #main-layout-footer-description-topic {
+    .topic {
       display: flex;
       align-items: center;
       flex-direction: row;
@@ -48,7 +48,7 @@ footer {
       }
     }
 
-    #main-layout-footer-description-theme {
+    .theme-info {
       @include mixin.typescale-style("body-large");
 
       display: flex;
@@ -56,14 +56,14 @@ footer {
       gap: 6px;
     }
 
-    #main-layout-footer-description-beian {
+    .beian-info {
       @include mixin.typescale-style("body-large");
 
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
 
-      #main-layout-footer-beian-gongan {
+      .beian-gongan {
         display: inline-flex;
         align-items: center;
         gap: 5px;
@@ -76,7 +76,7 @@ footer {
     }
   }
 
-  #main-layout-footer-social-media {
+  .social-media {
     display: flex;
     flex-direction: row;
     flex-grow: 1;
@@ -87,25 +87,25 @@ footer {
 }
 
 @media screen and (max-width: 1600px) {
-  footer {
+  .Footer {
     grid-column: span 12;
   }
 }
 
 @media screen and (max-width: 1200px) {
-  footer {
+  .Footer {
     grid-column: span 8;
   }
 }
 
 @media screen and (max-width: 840px) {
-  footer {
+  .Footer {
     grid-column: span 6;
   }
 }
 
 @media screen and (max-width: 600px) {
-  footer {
+  .Footer {
     grid-column: span 4;
   }
 }