Fix: 修正部分加载Bug & 调整页面样式

This commit is contained in:
2025-08-21 15:44:35 +08:00
parent 2fe8797551
commit e9b6409144
10 changed files with 150 additions and 113 deletions

View File

@ -1,16 +1,21 @@
<template>
<div>
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
{{ $t('navigation.home') }}
</el-breadcrumb-item>
<el-breadcrumb-item class="text-sm opacity-50">
{{ $t('contact-info') }}
</el-breadcrumb-item>
</el-breadcrumb>
<div class="page-container">
<div v-if="content">
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
{{ $t('navigation.home') }}
</el-breadcrumb-item>
<el-breadcrumb-item class="text-sm opacity-50">
{{ $t('navigation.contact-info') }}
</el-breadcrumb-item>
</el-breadcrumb>
<div class="content">
<markdown-renderer :content="content || ''" />
<div class="content">
<markdown-renderer :content="content || ''" />
</div>
</div>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div>
</div>
</template>
@ -41,6 +46,10 @@ onMounted(async () => {
</script>
<style scoped>
.page-container {
padding: 2rem 1rem;
}
.breadcrumb {
padding: 1rem 1rem;
}

View File

@ -1,27 +1,34 @@
<template>
<div>
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
{{ $t('navigation.home') }}
</el-breadcrumb-item>
<el-breadcrumb-item class="text-sm opacity-50">
{{ $t('about-us') }}
</el-breadcrumb-item>
</el-breadcrumb>
<div class="page-container">
<div v-if="content">
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
{{ $t('navigation.home') }}
</el-breadcrumb-item>
<el-breadcrumb-item class="text-sm opacity-50">
{{ $t('navigation.about-us') }}
</el-breadcrumb-item>
</el-breadcrumb>
<div class="content">
<markdown-renderer :content="content || ''" />
<div class="content">
<markdown-renderer :content="content || ''" />
</div>
<el-divider content-position="left">更多信息</el-divider>
<div class="button-group">
<NuxtLink :to="$localePath('/about/contact-us')">
<el-card class="card-button">
<el-icon class="icon" size="80">
<ElIconService />
</el-icon>
<br>
联系信息
</el-card>
</NuxtLink>
</div>
</div>
<el-divider content-position="left">更多信息</el-divider>
<div class="button-group">
<NuxtLink :to="$localePath('/about/contact-us')">
<el-card class="card-button">
<el-icon class="icon" size="80"><ElIconService /></el-icon>
<br>
联系信息
</el-card>
</NuxtLink>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div>
</div>
</template>
@ -32,12 +39,11 @@ const { getStrapiLocale } = useLocalizations()
const strapiLocale = getStrapiLocale()
const content = ref<string>('')
const content = ref<string | null>(null)
onMounted(async () => {
try {
const response = await findOne<StrapiCompanyProfile>('company-profile', undefined, {
populate: '*',
locale: strapiLocale,
})
if (response.data) {
@ -52,6 +58,10 @@ onMounted(async () => {
</script>
<style scoped>
.page-container {
padding: 2rem 1rem;
}
.breadcrumb {
padding: 1rem 1rem;
}
@ -99,4 +109,11 @@ onMounted(async () => {
.icon {
padding: 10px;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1rem;
}
</style>