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

31
app/components/ProductionCard.vue
View File

@ -1,15 +1,18 @@
<template>
<el-card class="production-card" @click="handleClick">
<!-- Image -->
<el-image class="production-image" :src="imageUrl" fit="contain" />
<template #footer>
<template #header>
<!-- Image -->
<el-image class="production-image" :src="imageUrl" fit="contain" />
</template>
<div class="card-body">
<!-- Name -->
<div class="text-center mx-auto text-md">
<div class="text-center">
<span class="production-name">{{ name }}</span>
</div>
<!-- Description -->
<div class="mx-auto mt-5 text-center text-sm opacity-25">{{ description }}</div>
</template>
<div class="card-description text-left opacity-25">{{ description }}</div>
</div>
</el-card>
</template>
@ -38,7 +41,6 @@ const handleClick = () => {
<style scoped>
.production-card {
width: 20%;
/* margin: 20px auto; */
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
@ -50,15 +52,26 @@ const handleClick = () => {
}
.production-name {
font-size: 1rem;
font-weight: 600;
color: var(--el-text-color-primary);
}
.card-description {
font-size: 0.8rem;
margin-top: 5px;
}
.production-card .el-image {
height: 200px;
height: 150px;
border-radius: 4px;
}
.card-body {
margin: 10px auto;
padding: 0px auto;
height: 100px;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.production-card {

83
app/components/SolutionCard.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<el-card class="solution-card" body-class="card-body" header-class="card-header" @click="handleClick">
<template #header>
<!-- Cover Image -->
<el-image class="solution-cover" :src="coverUrl" fit="cover" />
</template>
<!-- Title -->
<template #default>
<div class="text-center mx-auto text-md">
<span class="solution-title">{{ title }}</span>
</div>
<!-- Summary -->
<div class="mx-auto mt-5 text-left text-sm opacity-25">{{ summary }}</div>
</template>
</el-card>
</template>
<script setup lang="ts">
interface Props {
title: string
summary: string
coverUrl: string
documentId?: string
}
const props = defineProps<Props>()
const localePath = useLocalePath()
const handleClick = () => {
const routeParam = props.documentId
if (routeParam) {
navigateTo(localePath(`/solutions/${routeParam}`))
}
}
</script>
<style scoped>
.solution-card {
width: 30%;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.solution-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.solution-title {
font-weight: 600;
}
:deep(.card-header) {
padding: 0;
border-bottom: none !important;
}
:deep(.card-body) {
margin: 10px auto;
padding: 1px auto;
}
.solution-card .el-image {
height: 250px;
}
@media (max-width: 1200px) {
.solution-card {
width: 45%;
}
}
@media (max-width: 768px) {
.solution-card {
width: 90%;
margin: 10px auto;
}
}
</style>

9
app/layouts/default.vue
View File

@ -1,12 +1,12 @@
<template>
<el-container class="app-container">
<el-header class="page-header">
<el-header height="auto" class="page-header">
<jinshen-header />
</el-header>
<el-main class="main-content">
<slot />
</el-main>
<el-footer class="page-footer">
<el-footer height="auto" class="page-footer">
<jinshen-footer />
</el-footer>
</el-container>
@ -16,20 +16,21 @@
.app-container {
display: flex;
flex-direction: column;
padding: 0;
}
.page-header {
padding: 0px;
margin-bottom: auto;
}
.main-content {
flex: 1;
padding: 20px;
padding: 0;
flex-direction: column;
}
.page-footer {
padding: 0px;
}
</style>

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>

2
nuxt.config.ts
View File

@ -6,7 +6,7 @@ export default defineNuxtConfig({
app: {
// head
head: {
title: "Jinshen Website",
title: "金申机械制造有限公司",
meta: [
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{