fix(projects): perf card style

soybeanjs · Jan 25, 2024 · c1afb9d · c1afb9d · vercel · Jan 25, 2024
1 parent d886e50
commit c1afb9d
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
     AppProvider: typeof import('./../components/common/app-provider.vue')['default']
     BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
     ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
+    CardWrapper: typeof import('./../components/common/card-wrapper.vue')['default']
     CountTo: typeof import('./../components/custom/count-to.vue')['default']
     DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
     ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']

diff --git a/src/views/_builtin/login/index.vue b/src/views/_builtin/login/index.vue
@@ -59,7 +59,7 @@ const bgColor = computed(() => {
 <template>
   <div class="relative flex-center wh-full overflow-hidden" :style="{ backgroundColor: bgColor }">
     <WaveBg :theme-color="bgThemeColor" />
-    <NCard class="relative w-auto rd-12px z-4">
+    <NCard :bordered="false" class="relative w-auto rd-12px z-4">
       <div class="w-400px <sm:w-300px">
         <header class="flex-y-center justify-between">
           <SystemLogo class="text-64px text-primary <sm:text-48px" />

diff --git a/src/views/about/index.vue b/src/views/about/index.vue
@@ -42,10 +42,10 @@ const latestBuildTime = BUILD_TIME;
 
 <template>
   <NSpace vertical :size="16">
-    <NCard :title="$t('page.about.title')" :bordered="false" size="large" class="card-wrapper">
+    <NCard :title="$t('page.about.title')" :bordered="false" size="small" segmented class="card-wrapper">
       <p>{{ $t('page.about.introduction') }}</p>
     </NCard>
-    <NCard :title="$t('page.about.projectInfo.title')" :bordered="false" size="large" class="card-wrapper">
+    <NCard :title="$t('page.about.projectInfo.title')" :bordered="false" size="small" segmented class="card-wrapper">
       <NDescriptions label-placement="left" bordered size="small" :column="column">
         <NDescriptionsItem :label="$t('page.about.projectInfo.version')">
           <NTag type="primary">{{ pkgJson.version }}</NTag>
@@ -65,14 +65,14 @@ const latestBuildTime = BUILD_TIME;
         </NDescriptionsItem>
       </NDescriptions>
     </NCard>
-    <NCard :title="$t('page.about.prdDep')" :bordered="false" size="large" class="card-wrapper">
+    <NCard :title="$t('page.about.prdDep')" :bordered="false" size="small" segmented class="card-wrapper">
       <NDescriptions label-placement="left" bordered size="small" :column="column">
         <NDescriptionsItem v-for="item in pkgJson.dependencies" :key="item.name" :label="item.name">
           {{ item.version }}
         </NDescriptionsItem>
       </NDescriptions>
     </NCard>
-    <NCard :title="$t('page.about.devDep')" :bordered="false" size="large" class="card-wrapper">
+    <NCard :title="$t('page.about.devDep')" :bordered="false" size="small" segmented class="card-wrapper">
       <NDescriptions label-placement="left" bordered size="small" :column="column">
         <NDescriptionsItem v-for="item in pkgJson.devDependencies" :key="item.name" :label="item.name">
           {{ item.version }}

diff --git a/src/views/home/components/card-data.vue b/src/views/home/components/card-data.vue
@@ -78,7 +78,7 @@ function getGradientColor(color: CardData['color']) {
 </script>
 
 <template>
-  <NCard :bordered="false" class="card-wrapper">
+  <NCard :bordered="false" size="small" class="card-wrapper">
     <!-- define component start: GradientBg -->
     <DefineGradientBg v-slot="{ $slots, gradientColor }">
       <div class="px-16px pt-8px pb-4px rd-8px text-white" :style="{ backgroundImage: gradientColor }">

diff --git a/src/views/home/components/header-banner.vue b/src/views/home/components/header-banner.vue
@@ -41,7 +41,7 @@ const statisticData = computed<StatisticData[]>(() => [
 <template>
   <NCard :bordered="false" class="card-wrapper">
     <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
-      <NGi span="24 s:24 m:20">
+      <NGi span="24 s:24 m:18">
         <div class="flex-y-center">
           <div class="shrink-0 size-72px rd-1/2 overflow-hidden">
             <img src="@/assets/imgs/soybean.jpg" class="size-full" />
@@ -54,7 +54,7 @@ const statisticData = computed<StatisticData[]>(() => [
           </div>
         </div>
       </NGi>
-      <NGi span="24 s:24 m:4">
+      <NGi span="24 s:24 m:6">
         <NSpace :size="24" justify="end">
           <NStatistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" v-bind="item" />
         </NSpace>