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

feat: 增添页面内容

Browse Source 
- 首页增添内容：推荐解决方案
- 调整页面布局：当页面内容不足时自动调整页脚至页面底部
- 调整页首布局：将导航菜单置于页首中央
This commit is contained in:
R2m1liA
2025-09-09 16:47:17 +08:00
parent 75a4fc0701 739d053cf0
commit 1884c0a8e1
4 changed files with 90 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/components/JinshenHeader.vue
View File

@ -6,28 +6,30 @@
</NuxtLink>
</div>
<!-- 导航菜单 -->
<el-menu
:default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false"
:persistent="false" router>
<el-menu-item index="productions" :route="$localePath('/productions')">
<span class="title">{{ $t('navigation.productions') }}</span>
</el-menu-item>
<el-menu-item index="solutions" :route="$localePath('/solutions')">
<span class="title">{{ $t('navigation.solutions') }}</span>
</el-menu-item>
<el-menu-item index="support" :route="$localePath('/support')">
<span class="title">{{ $t('navigation.support') }}</span>
</el-menu-item>
<el-menu-item index="about" :route="$localePath('/about')">
<span class="title">{{ $t('navigation.about-us') }}</span>
</el-menu-item>
</el-menu>
<div class="header-menu-section">
<!-- 导航菜单 -->
<el-menu :default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false"
:persistent="false" router>
<el-menu-item index="productions" :route="$localePath('/productions')">
<span class="title">{{ $t('navigation.productions') }}</span>
</el-menu-item>
<el-menu-item index="solutions" :route="$localePath('/solutions')">
<span class="title">{{ $t('navigation.solutions') }}</span>
</el-menu-item>
<el-menu-item index="support" :route="$localePath('/support')">
<span class="title">{{ $t('navigation.support') }}</span>
</el-menu-item>
<el-menu-item index="about" :route="$localePath('/about')">
<span class="title">{{ $t('navigation.about-us') }}</span>
</el-menu-item>
</el-menu>
</div>
<!-- 右侧功能区 -->
<div class="header-actions">
<el-input
v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
<el-input v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
:prefix-icon="Search" clearable @keyup.enter="handleSearch" />
<el-dropdown @command="setLocale">
<el-link type="info" :underline="false">
@ -90,7 +92,6 @@ onMounted(() => {
<style scoped>
.header-container {
margin: 0 auto;
padding: 0 10px;
display: flex;
height: 80px;
@ -101,7 +102,6 @@ onMounted(() => {
.logo-section {
display: flex;
flex: 1;
align-items: center;
margin-left: 20px;
}
@ -116,6 +116,14 @@ onMounted(() => {
width: auto;
}
.header-menu-section {
flex: 2;
display: flex;
justify-content: center;
height: 100%;
}
.header-menu {
margin-right: 40px;
border-bottom: none !important;
@ -138,8 +146,9 @@ onMounted(() => {
}
.header-actions {
flex: 1;
justify-content: flex-end;
display: flex;
align-items: center;
gap: 16px;
}

3
app/layouts/default.vue
View File

@ -16,6 +16,7 @@
.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 0;
}
@ -27,7 +28,7 @@
.main-content {
flex: 1;
padding: 0;
flex-direction: column;
overflow-y: auto;
}
.page-footer {

62
app/pages/index.vue
View File

@ -22,8 +22,7 @@
class="recommend-card" @click="handleProductionCardClick(item.documentId || '')">
<template #header>
<el-image :src="useStrapiMedia(item.cover?.url || '')"
:alt="item.cover?.alternativeText || item.title" fit="cover"
style="width: 100%; height: 200px; border-radius: 8px;" lazy />
:alt="item.cover?.alternativeText || item.title" fit="cover" lazy />
</template>
<div class="recommend-card-body">
<!-- Title -->
@ -38,6 +37,33 @@
</el-carousel-item>
</el-carousel>
</section>
<section>
<h2>推荐解决方案</h2>
<p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
<el-carousel class="recommend-carousel" height="auto" arrow="never" indicator-position="outside"
:autoplay="false">
<el-carousel-item v-for="n in Math.floor(recommend_solutions.length / 3) + 1" :key="n" class="recommend-list">
<div class="recommend-card-group">
<el-card v-for="(item, index) in recommend_solutions.slice((n - 1) * 3, n * 3)" :key="index"
class="recommend-card" @click="handleSolutionCardClick(item.documentId || '')">
<template #header>
<el-image :src="useStrapiMedia(item.cover?.url || '')"
:alt="item.cover?.alternativeText || item.title" fit="cover" lazy />
</template>
<div class="recommend-card-body">
<!-- Title -->
<div class="text-center">
<span class="recommend-card-title">{{ item.title }}</span>
</div>
<!-- Description -->
<div class="recommend-card-description text-left opacity-25">{{ item.summary }}</div>
</div>
</el-card>
</div>
</el-carousel-item>
</el-carousel>
</section>
</div>
<div v-else class="loading">
<el-skeleton :rows="3" animated />
@ -52,6 +78,7 @@ const strapiLocale = getStrapiLocale()
const carouselImages = ref<StrapiImage[]>([])
const recommend_productions = ref<Production[]>([])
const recommend_solutions = ref<Solution[]>([])
const pending = ref(true)
@ -68,14 +95,23 @@ onMounted(async () => {
populate: '*',
},
},
}
},
recommend_solutions: {
populate: {
cover: {
populate: '*',
},
},
},
},
locale: strapiLocale,
})
if (response.data) {
carouselImages.value = response.data.carousel || []
recommend_productions.value = response.data.recommend_productions || []
recommend_solutions.value = response.data.recommend_solutions || []
console.log('推荐产品:', recommend_productions.value)
console.log('推荐解决方案:', recommend_solutions.value)
}
} catch (error) {
console.error('Error fetching homepage data:', error)
@ -92,6 +128,16 @@ const handleProductionCardClick = (documentId: string) => {
router.push(localePath(`/productions/${documentId}`))
}
}
const handleSolutionCardClick = (documentId: string) => {
// 使用路由导航到解决方案详情页
if (documentId) {
const localePath = useLocalePath()
const router = useRouter()
router.push(localePath(`/solutions/${documentId}`))
}
}
</script>
<style scoped lang="scss">
@ -176,10 +222,16 @@ section p {
.recommend-card {
width: 33%;
transition: all 0.3s ease;
text-align: center;
}
.recommend-card :deep(.el-card__header) {
padding: 0;
border: none;
}
.recommend-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
@ -189,7 +241,6 @@ section p {
.recommend-card-body {
margin: 10px auto;
padding: 0px auto;
height: 100px;
}
.recommend-card-title {
@ -203,8 +254,7 @@ section p {
}
.recommend-card .el-image {
height: 150px;
width: 100%;
border-radius: 4px;
}
</style>

1
app/types/strapi/singleTypes.ts
View File

@ -9,4 +9,5 @@ export interface StrapiContactInfo extends StrapiEntity {
export interface StrapiHomepage extends StrapiEntity {
carousel: StrapiImage[];
recommend_productions: StrapiRelation<Production>[];
recommend_solutions: StrapiRelation<Solution>[];
}