fix(projects): fix page about style in mobile

This commit is contained in:
Soybean 2024-01-21 23:48:44 +08:00
parent 697c1b6106
commit 8b6de484b8

View File

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