FaCopyright 组件改用 unocss 实现样式

Author: hooray

src/ui/components/FaCopyright/index.vue

@@ -9,29 +9,14 @@ const settingsStore = useSettingsStore()
 </script>
 
 <template>
-  <footer v-if="settingsStore.settings.copyright.enable" class="copyright">
-    <span>Copyright</span>
+  <footer v-if="settingsStore.settings.copyright.enable" class="my-4 flex flex-wrap items-center justify-center px-4 text-sm text-secondary-foreground/50">
+    <span class="px-1">Copyright</span>
     <FaIcon name="i-ri:copyright-line" class="size-5" />
-    <span v-if="settingsStore.settings.copyright.dates">{{ settingsStore.settings.copyright.dates }}</span>
+    <span v-if="settingsStore.settings.copyright.dates" class="px-1">{{ settingsStore.settings.copyright.dates }}</span>
     <template v-if="settingsStore.settings.copyright.company">
-      <a v-if="settingsStore.settings.copyright.website" :href="settingsStore.settings.copyright.website" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.company }}</a>
-      <span v-else>{{ settingsStore.settings.copyright.company }}</span>
+      <a v-if="settingsStore.settings.copyright.website" :href="settingsStore.settings.copyright.website" target="_blank" rel="noopener" class="px-1 text-center no-underline transition hover-text-secondary-foreground">{{ settingsStore.settings.copyright.company }}</a>
+      <span v-else class="px-1">{{ settingsStore.settings.copyright.company }}</span>
     </template>
-    <a v-if="settingsStore.settings.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.beian }}</a>
+    <a v-if="settingsStore.settings.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" class="px-1 text-center no-underline transition hover-text-secondary-foreground">{{ settingsStore.settings.copyright.beian }}</a>
   </footer>
 </template>
-
-<style scoped>
-.copyright {
-  --uno: flex items-center justify-center flex-wrap my-4 px-4 text-sm text-secondary-foreground/50;
-
-  span,
-  a {
-    --uno: px-1;
-  }
-
-  a {
-    --uno: text-center no-underline hover-text-secondary-foreground transition;
-  }
-}
-</style>

src/views/login.vue

@@ -60,7 +60,7 @@ const formType = ref<'login' | 'register' | 'resetPassword'>('login')
       </Transition>
     </div>
   </div>
-  <FaCopyright />
+  <FaCopyright class="copyright" />
 </template>
 
 <style scoped>