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

Feature:产品总览页 & Strapi API

Browse Source
This commit is contained in:
R2m1liA
2025-08-15 14:20:49 +08:00
parent 775ff17fda
commit 1c06b377d0
11 changed files with 518 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
app/components/JinshenFooter.vue Normal file
View 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>&copy; {{ 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>