fix(HomeFooter): adjust the icon size and position. (#171)

Theo-Messi · Dec 4, 2024 · e4f6bd2 · e4f6bd2
1 parent e513f56
commit e4f6bd2
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/src/components/HomeFooter.vue b/src/components/HomeFooter.vue
@@ -40,7 +40,11 @@ const footer = props.Footer_Data
     <div class="footer-info">
       <div v-if="footer.beian?.icp || footer.beian?.police" class="info-item">
         <span v-if="footer.beian?.icp">
-          <Icon v-if="footer.beian?.showIcon" :icon="footer.beian.icpIcon || 'fluent:globe-shield-48-filled'" />&nbsp;
+          <Icon
+            v-if="footer.beian?.showIcon"
+            :icon="footer.beian.icpIcon || 'fluent:globe-shield-48-filled'"
+            class="info-icon"
+          />&nbsp;
           <a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/" title="ICP备案">
             {{ footer.beian.icp }}
           </a>
@@ -50,6 +54,7 @@ const footer = props.Footer_Data
           <Icon
             v-if="footer.beian?.showIcon"
             :icon="footer.beian.policeIcon || 'fluent:shield-checkmark-48-filled'"
+            class="info-icon"
           />&nbsp;
           <a target="_blank" rel="noopener" href="https://beian.mps.gov.cn/" title="公安备案">
             {{ footer.beian.police }}
@@ -59,9 +64,11 @@ const footer = props.Footer_Data
       <span class="info-spacing-copyright"></span>
       <div v-if="footer.author?.name" class="info-item">
         <span>
-          <Icon icon="ri:copyright-line" />&nbsp;{{ new Date().getFullYear() }}
+          <Icon icon="ri:copyright-line" class="info-icon" style="font-size: 1em" />&nbsp;{{
+            new Date().getFullYear()
+          }}
           <a target="_blank" rel="noopener" title="GitHub" :href="footer.author?.link">{{ footer.author?.name }}</a
-          >. All Rights Reserved.
+          >.&nbsp;All Rights Reserved.
         </span>
       </div>
     </div>
@@ -135,6 +142,13 @@ const footer = props.Footer_Data
   margin-left: 1rem;
 }
 
+.info-icon {
+  position: relative;
+  display: inline-block;
+  margin: -0.2em 0em;
+  font-size: 1.2em;
+}
+
 @media (max-width: 768px) {
   .list-container {
     display: grid;