remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: 解决方案页 & 调整部分样式

Browse Source
This commit is contained in:
R2m1liA
2025-08-22 16:33:10 +08:00
parent 3d858e475e
commit ad1e520c07
9 changed files with 257 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/pages/about/contact-us.vue
View File

@ -63,11 +63,11 @@ onMounted(async () => {
margin-bottom: 2rem;
}
:deep(.markdown-body p) {
margin-bottom: 1rem;
}
:deep(.markdown-body h2) {
text-align: center;
}
:deep(.markdown-body ul) {
list-style-type: none;
}
</style>

2
app/pages/productions/[...slug].vue
View File

@ -63,8 +63,6 @@
</template>
<script setup lang="ts">
import type { Production } from '~/types/strapi/production'
const route = useRoute()
const { findOne } = useStrapi()
const { getStrapiLocale } = useLocalizations()

2
app/pages/productions/index.vue
View File

@ -103,7 +103,7 @@ onMounted(async () => {
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
margin-bottom: 20px;
margin-bottom: 1rem;
}
.breadcrumb {

122
app/pages/solutions/[...slug].vue Normal file
View File

@ -0,0 +1,122 @@
<template>
<div class="page-container">
<div v-if="solution">
<div class="page-header">
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">{{ solution.title }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-content">
<div class="solution-info">
<h1>{{ solution.title }}</h1>
<div class="solution-meta">
<span class="solution-date">
CreatedAt: {{ new Date(solution.createdAt).toLocaleDateString() }}
</span>
</div>
</div>
<p class="summary">{{ solution.summary }}</p>
<div class="solution-content">
<markdown-renderer :content="solution.content || ''" />
</div>
</div>
</div>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div>
</div>
</template>
<script setup lang="ts">
const route = useRoute()
const { findOne } = useStrapi()
const { getStrapiLocale } = useLocalizations()
const strapiLocale = getStrapiLocale()
const solution = ref<Solution | null>(null)
// 获取路由参数(documentId)
const documentId = computed(() => route.params.slug as string)
onMounted(async () => {
try {
const response = await findOne<Solution>('solutions', documentId.value, {
populate: '*',
locale: strapiLocale,
})
if (response.data) {
solution.value = {
...response.data,
// 确保 solution_type 保持原始类型
solution_type: response.data.solution_type,
}
}
console.log('Fetched Solution:', solution.value)
} catch (error) {
console.error('Failed to fetch solution:', error)
}
})
</script>
<style scoped>
.page-container {
padding: 1rem;
min-height: 60vh;
}
.breadcrumb {
padding: 1rem;
margin-bottom: 1rem;
}
.solution-header {
display: flex;
align-items: center;
gap: 20px;
}
.solution-header el-image {
width: 200px;
height: 200px;
border-radius: 4px;
}
.page-content h1 {
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
text-align: center;
}
.solution-meta {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 0.5rem;
font-size: 0.8rem;
color: var(--el-text-color-secondary);
}
.summary {
font-size: 0.8rem;
color: var(--el-text-color-secondary);
text-align: center;
}
.solution-content {
margin-top: 1rem;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1rem;
}
</style>

32
app/pages/solutions/index.vue
View File

@ -15,22 +15,25 @@
<el-tabs v-model="activeName" class="solutions-tabs">
<el-tab-pane :label="$t('all')" name="all">
<div class="solution-list">
<production-card
v-for="solution in solutions" :key="solution.documentId || solution.id"
:slug="solution.documentId"
:image-url="useStrapiMedia(solution?.cover?.url || '')"
:name="solution.title" :description="solution.summary || ''" />
<solution-card
v-for="solution in solutions" :key="solution.documentId" :title="solution.title"
:summary="solution.summary || ''" :cover-url="useStrapiMedia(solution?.cover?.url || '')"
:document-id="solution.documentId" />
</div>
</el-tab-pane>
<el-tab-pane
v-for="(group, type) in groupedSolutions" :key="type" :label="type || '未分类'"
:name="type || 'no-category'">
<el-tab-pane
v-for="(group, type) in groupedSolutions" :key="type" :label="type || '未分类'"
:name="type || 'no-category'"
>
<div class="solution-list">
<production-card
v-for="solution in group" :key="solution.documentId || solution.id"
:slug="solution.documentId"
:image-url="useStrapiMedia(solution?.cover?.url || '')"
:name="solution.title" :description="solution.summary || ''" />
<solution-card
v-for="solution in group"
:key="solution.documentId"
:document-id="solution.documentId"
:cover-url="useStrapiMedia(solution?.cover?.url || '')"
:title="solution.title"
:summary="solution.summary || ''"
/>
</div>
</el-tab-pane>
</el-tabs>
@ -104,6 +107,7 @@ onMounted(async () => {
.page-title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1rem;
color: var(--el-color-primary);
}
@ -114,6 +118,8 @@ onMounted(async () => {
.solution-list {
display: flex;
flex-wrap: wrap;
padding: 1rem;
margin-bottom: 2rem;
gap: 40px;
}
</style>