#1 大幅改进页面显示效果 (#1)

Reviewed-on: #1

src/views/encyclopedia/CloudTypeView.vue

@@ -168,7 +168,7 @@ watch(() => route.params.id, () => {
   <div class="max-w-6xl mx-auto px-4 py-8">
     <div class="mb-6">
       <RouterLink to="/encyclopedia">
-        <NButton text type="primary">← 返回图鉴总览</NButton>
+        <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">← 返回图鉴总览</NButton>
       </RouterLink>
     </div>
 

src/views/encyclopedia/EncyclopediaView.vue

@@ -96,7 +96,7 @@ onMounted(async () => {
       </NAlert>
 
       <div v-if="encyclopediaStore.loadingCloudTypes" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
-        <NCard v-for="n in 6" :key="n">
+        <NCard v-for="n in 6" :key="n" class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
           <NSkeleton class="h-44 w-full" />
           <NSkeleton class="mt-5 h-5 w-2/5" />
           <NSkeleton class="mt-3 h-4 w-1/3" />
@@ -176,7 +176,7 @@ onMounted(async () => {
         </button>
       </div>
 
-      <div v-else class="border border-dashed border-slate-300 bg-white px-6 py-12">
+      <div v-else class="oc-empty-card border border-dashed border-slate-300 bg-white px-6 py-12">
         <NEmpty description="暂时还没有图鉴数据" />
       </div>
     </div>