Feature:产品总览页 & Strapi API
This commit is contained in:
275
app/components/JinshenFooter.vue
Normal file
275
app/components/JinshenFooter.vue
Normal file
@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<footer class="jinshen-footer">
|
||||
<div class="footer-container">
|
||||
<!-- Logo 和公司信息 -->
|
||||
<div class="footer-section">
|
||||
<div class="footer-logo">
|
||||
<img src="/jinshen-logo.png" alt="Jinshen Logo" class="logo-image">
|
||||
<h3>{{ $t('company-name') }}</h3>
|
||||
</div>
|
||||
<p class="company-description">
|
||||
{{ $t('company-description') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 快速链接 -->
|
||||
<div class="footer-section">
|
||||
<h4>{{ $t('quick-links') }}</h4>
|
||||
<ul class="footer-links">
|
||||
<li>
|
||||
<NuxtLink to="/">{{ $t('navigation.home') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/productions">{{ $t('productions') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/solutions">{{ $t('solutions') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/support">{{ $t('support') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/about">{{ $t('about-us') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<div class="footer-section">
|
||||
<h4>{{ $t('contact-info') }}</h4>
|
||||
<div class="contact-item">
|
||||
<el-icon><Phone /></el-icon>
|
||||
<span>{{ $t('telephone') }}: 0573-88187988</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<el-icon><Message /></el-icon>
|
||||
<span>{{ $t('email') }}: jinshen@wzjinshen.com</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<el-icon><Location /></el-icon>
|
||||
<span>{{ $t('address') }}: {{ $t('company-address') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 社交媒体 -->
|
||||
<div class="footer-section">
|
||||
<h4>{{ $t('follow-us') }}</h4>
|
||||
<div class="social-links">
|
||||
<a href="#" class="social-link" aria-label="WeChat">
|
||||
<el-icon size="20"><ChatDotRound /></el-icon>
|
||||
</a>
|
||||
<a href="#" class="social-link" aria-label="Weibo">
|
||||
<el-icon size="20"><Star /></el-icon>
|
||||
</a>
|
||||
<a href="#" class="social-link" aria-label="LinkedIn">
|
||||
<el-icon size="20"><Link /></el-icon>
|
||||
</a>
|
||||
<a href="#" class="social-link" aria-label="Email">
|
||||
<el-icon size="20"><Message /></el-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 版权信息 -->
|
||||
<div class="footer-bottom">
|
||||
<div class="footer-container">
|
||||
<div class="copyright">
|
||||
<p>© {{ currentYear }} {{ $t('company-name') }}. {{ $t('all-rights-reserved') }}</p>
|
||||
<p>备案号: 浙ICP备12003709号-5</p>
|
||||
</div>
|
||||
<div class="footer-links-bottom">
|
||||
<NuxtLink to="/privacy">{{ $t('privacy-policy') }}</NuxtLink>
|
||||
<span class="separator">|</span>
|
||||
<NuxtLink to="/terms">{{ $t('terms-of-service') }}</NuxtLink>
|
||||
<span class="separator">|</span>
|
||||
<NuxtLink to="/sitemap">{{ $t('sitemap') }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Phone,
|
||||
Message,
|
||||
Location,
|
||||
ChatDotRound,
|
||||
Star,
|
||||
Link
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.jinshen-footer {
|
||||
background: var(--el-bg-color-page);
|
||||
border-top: 1px solid var(--el-border-color);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.footer-section h3,
|
||||
.footer-section h4 {
|
||||
color: var(--el-text-color-primary);
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.company-description {
|
||||
color: var(--el-text-color-regular);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-links li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--el-text-color-regular);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
.contact-item .el-icon {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 50%;
|
||||
color: var(--el-text-color-regular);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: var(--el-color-primary);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
background: var(--el-fill-color-light);
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.footer-bottom .footer-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
grid-template-columns: none;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.copyright p {
|
||||
margin: 0;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-links-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-links-bottom a {
|
||||
color: var(--el-text-color-regular);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-links-bottom a:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.footer-container {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.footer-bottom .footer-container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footer-links-bottom {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.jinshen-footer {
|
||||
background: var(--el-bg-color-page);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
background: var(--el-fill-color-darker);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
app/components/ProductionCard.vue
Normal file
29
app/components/ProductionCard.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<el-card class="production-card">
|
||||
<!-- Image -->
|
||||
<el-image :src="imageUrl" fit="cover" />
|
||||
<template #footer>
|
||||
<!-- Name -->
|
||||
<div class="text-center mx-auto text-md">
|
||||
<span class="production-name">{{ name }}</span>
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<div class="mx-auto mt-5 text-center text-sm opacity-25">{{ description }}</div>
|
||||
</template>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
name: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.production-card {
|
||||
width: 30%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
</style>
|
||||
@ -6,5 +6,8 @@
|
||||
<el-main>
|
||||
<slot />
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<jinshen-footer />
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</template>
|
||||
@ -1,5 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtWelcome />
|
||||
<div class="homepage">
|
||||
<div class="hero-section">
|
||||
<h1>{{ $t('company-name') }}</h1>
|
||||
<p>{{ $t('company-description') }}</p>
|
||||
<el-button type="primary" size="large">
|
||||
{{ $t('learn-more') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="content-sections">
|
||||
<div class="section">
|
||||
<h2>{{ $t('productions') }}</h2>
|
||||
<p>{{ $t('productions-desc') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>{{ $t('solutions') }}</h2>
|
||||
<p>{{ $t('solutions-desc') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>{{ $t('support') }}</h2>
|
||||
<p>{{ $t('support-desc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.homepage {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
padding: 4rem 0;
|
||||
background: linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary));
|
||||
border-radius: 8px;
|
||||
margin-bottom: 3rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.content-sections {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 2rem;
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
color: var(--el-color-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section p {
|
||||
color: var(--el-text-color-regular);
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
62
app/pages/productions/index.vue
Normal file
62
app/pages/productions/index.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="productions-container">
|
||||
<production-card
|
||||
v-for="production in productions" :key="production.title" :image-url="production.image_url"
|
||||
:name="production.title" :description="production.summary" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
const { find } = useStrapi()
|
||||
|
||||
const baseUrl = 'http://192.168.86.5:1337';
|
||||
|
||||
class ProductionInfo {
|
||||
title: string;
|
||||
summary: string;
|
||||
image_url: string;
|
||||
|
||||
constructor(title: string, summary: string, image_url: string) {
|
||||
this.title = title;
|
||||
this.summary = summary;
|
||||
this.image_url = baseUrl + image_url;
|
||||
}
|
||||
}
|
||||
|
||||
interface StrapiProduction {
|
||||
title: string;
|
||||
summary: string;
|
||||
production_image?: {
|
||||
url: string;
|
||||
};
|
||||
}
|
||||
|
||||
const productions = ref<ProductionInfo[]>();
|
||||
|
||||
onMounted(async () => {
|
||||
const response = await find<StrapiProduction>('productions', {
|
||||
populate: '*',
|
||||
})
|
||||
productions.value = response.data.map((item: StrapiProduction) => {
|
||||
return new ProductionInfo(
|
||||
item.title,
|
||||
item.summary,
|
||||
item.production_image?.url || ''
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.productions-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user