From 8b6de484b871ffdb174274940ca07669a1da75f8 Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Sun, 21 Jan 2024 23:48:44 +0800
Subject: [PATCH] fix(projects): fix page about style in mobile

---
 src/views/about/index.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index a0a19fd4..dd87421d 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
 import pkg from '~/package.json';
 
+const appStore = useAppStore();
+
+const column = computed(() => (appStore.isMobile ? 1 : 2));
+
 interface PkgJson {
   name: string;
   version: string;
@@ -40,7 +46,7 @@ const latestBuildTime = BUILD_TIME;
       <p>{{ $t('page.about.introduction') }}</p>
     </NCard>
     <NCard :title="$t('page.about.projectInfo.title')" :bordered="false" size="large" class="card-wrapper">
-      <NDescriptions label-placement="left" bordered size="small" :column="2">
+      <NDescriptions label-placement="left" bordered size="small" :column="column">
         <NDescriptionsItem :label="$t('page.about.projectInfo.version')">
           <NTag type="primary">{{ pkgJson.version }}</NTag>
         </NDescriptionsItem>
@@ -60,14 +66,14 @@ const latestBuildTime = BUILD_TIME;
       </NDescriptions>
     </NCard>
     <NCard :title="$t('page.about.prdDep')" :bordered="false" size="large" class="card-wrapper">
-      <NDescriptions label-placement="left" bordered size="small">
+      <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">
-      <NDescriptions label-placement="left" bordered size="small">
+      <NDescriptions label-placement="left" bordered size="small" :column="column">
         <NDescriptionsItem v-for="item in pkgJson.devDependencies" :key="item.name" :label="item.name">
           {{ item.version }}
         </NDescriptionsItem>