464 lines
9.7 KiB
Vue
464 lines
9.7 KiB
Vue
<template>
|
|
<div class="footer">
|
|
<div class="footer-content">
|
|
<div class="container">
|
|
<!-- 主要页脚信息 -->
|
|
<div class="footer-main">
|
|
<div class="footer-section">
|
|
<div class="footer-logo">
|
|
<img :src="img('logo.png')" alt="丙维科技" class="logo">
|
|
<h3>上海丙维数字科技有限公司</h3>
|
|
<p class="company-desc">AI 工程交付与企业数字化服务</p>
|
|
<router-link to="/index#contact" class="footer-cta">预约咨询</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h4>解决方案</h4>
|
|
<ul class="footer-links">
|
|
<li v-for="solution in solutionsMenu" :key="solution.name">
|
|
<router-link :to="solution.url">{{ solution.name }}</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h4>联系咨询</h4>
|
|
<div class="contact-info">
|
|
<div class="contact-item">
|
|
<span class="contact-icon" v-html="icons.phone"></span>
|
|
<a href="tel:13817819452">13817819452</a>
|
|
</div>
|
|
<div class="contact-item">
|
|
<span class="contact-icon" v-html="icons.mail"></span>
|
|
<a href="mailto:bimwe@bimwe.com">bimwe@bimwe.com</a>
|
|
</div>
|
|
<div class="contact-item">
|
|
<span class="contact-icon" v-html="icons.globe"></span>
|
|
<router-link to="/index#contact">提交业务场景</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h4>合规信息</h4>
|
|
<ul class="footer-links">
|
|
<li><router-link to="/aboutUs">关于我们</router-link></li>
|
|
<li><router-link to="/legal/privacy">隐私政策</router-link></li>
|
|
<li><router-link to="/legal/terms">服务条款</router-link></li>
|
|
<li><router-link to="/legal/compliance">数据合规说明</router-link></li>
|
|
</ul>
|
|
<div class="footer-address">
|
|
上海市宝山区高逸路112-118号3幢6422室
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚底部 -->
|
|
<div class="footer-bottom">
|
|
<div class="footer-bottom-content">
|
|
<div class="copyright">
|
|
<p>© {{ currentYear }} 上海丙维数字科技有限公司. 保留所有权利.</p>
|
|
</div>
|
|
<div class="footer-extra">
|
|
<div class="beian">
|
|
<span class="beian-icon" v-html="icons.shield"></span>
|
|
<span>沪ICP备19005870号-1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 返回顶部按钮 -->
|
|
<button type="button" class="back-to-top" @click="scrollToTop" v-show="showBackToTop" aria-label="返回顶部">
|
|
<span class="arrow" v-html="icons.arrowUp"></span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getFooterSolutionsMenu } from '../config/menu'
|
|
import { img } from '@/utils/image'
|
|
|
|
export default {
|
|
name: 'ifooter',
|
|
computed: {
|
|
currentYear() {
|
|
return new Date().getFullYear()
|
|
}
|
|
},
|
|
data() {
|
|
const icon = (path) => `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">${path}</svg>`
|
|
return {
|
|
img,
|
|
showBackToTop: false,
|
|
solutionsMenu: getFooterSolutionsMenu(),
|
|
icons: {
|
|
phone: icon('<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.4 19.4 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/>'),
|
|
mail: icon('<path d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z"/><path d="M22 7l-10 6L2 7"/>'),
|
|
globe: icon('<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 0 20M12 2a15.3 15.3 0 0 0 0 20"/>'),
|
|
shield: icon('<path d="M12 3l7 4v5c0 4.5-2.9 7.5-7 9-4.1-1.5-7-4.5-7-9V7l7-4Z"/><path d="M9 12l2 2 4-5"/>'),
|
|
arrowUp: icon('<path d="M12 19V5M6 11l6-6 6 6"/>')
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener('scroll', this.handleScroll)
|
|
this.handleScroll()
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('scroll', this.handleScroll)
|
|
},
|
|
methods: {
|
|
handleScroll() {
|
|
this.showBackToTop = window.pageYOffset > 300
|
|
},
|
|
|
|
scrollToTop() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.footer {
|
|
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
|
color: #0f172a;
|
|
position: relative;
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.footer-content {
|
|
padding: 56px 0 0 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
/* 主要页脚区域 */
|
|
.footer-main {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 36px;
|
|
margin-bottom: 42px;
|
|
}
|
|
|
|
.footer-section h4 {
|
|
font-size: 1.08rem;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
color: #0f172a;
|
|
position: relative;
|
|
}
|
|
|
|
.footer-section h4::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -7px;
|
|
left: 0;
|
|
width: 30px;
|
|
height: 2px;
|
|
background: #94a3b8;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* Logo区域 */
|
|
.footer-logo .logo {
|
|
height: 50px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.footer-logo h3 {
|
|
font-size: 1.14rem;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.company-desc {
|
|
color: #475569;
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.footer-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 38px;
|
|
margin-top: 18px;
|
|
padding: 0 16px;
|
|
border-radius: 8px;
|
|
background: #2563eb;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: background-color 0.25s ease, transform 0.25s ease;
|
|
}
|
|
|
|
.footer-cta:hover {
|
|
background: #1d4ed8;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* 链接列表 */
|
|
.footer-links {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.footer-links li {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: #475569;
|
|
text-decoration: none;
|
|
transition: color 0.25s ease;
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.contact-item a {
|
|
color: #475569;
|
|
text-decoration: none;
|
|
transition: color 0.25s ease;
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.footer-links a:hover,
|
|
.contact-item a:hover {
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
/* 联系信息 */
|
|
.contact-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: #475569;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.contact-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
line-height: 0;
|
|
text-align: center;
|
|
color: #64748b;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.footer-address {
|
|
margin-top: 18px;
|
|
color: #64748b;
|
|
font-size: 0.86rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.contact-icon /deep/ svg,
|
|
.beian-icon /deep/ svg,
|
|
.back-to-top .arrow /deep/ svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 页脚底部 */
|
|
.footer-bottom {
|
|
border-top: 1px solid #dbe3ee;
|
|
padding: 22px 0;
|
|
}
|
|
|
|
.footer-bottom-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.copyright p {
|
|
color: #64748b;
|
|
font-size: 0.9rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.footer-extra {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.beian {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #64748b;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.beian-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
text-align: center;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
/* 返回顶部按钮 */
|
|
.back-to-top {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
width: 50px;
|
|
height: 50px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: #2563eb;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.back-to-top:hover {
|
|
transform: translateY(-3px);
|
|
background: #1d4ed8;
|
|
box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
|
|
}
|
|
|
|
.back-to-top .arrow {
|
|
display: block;
|
|
width: 22px;
|
|
height: 22px;
|
|
color: white;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.footer-content {
|
|
padding: 28px 0 0 0;
|
|
}
|
|
|
|
.footer-main {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
margin-bottom: 28px;
|
|
justify-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-section {
|
|
width: min(520px, 100%);
|
|
}
|
|
|
|
.footer-section h4 {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.footer-logo .logo {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.footer-logo h3 {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.footer-cta {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.footer-links li {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.contact-info {
|
|
gap: 10px;
|
|
}
|
|
|
|
.footer-address {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.footer-section h4::after {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.contact-info {
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.contact-item {
|
|
justify-content: center;
|
|
text-align: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.footer-logo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-bottom {
|
|
padding: 14px 0;
|
|
}
|
|
|
|
.footer-bottom-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.back-to-top {
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
|
|
.back-to-top .arrow {
|
|
font-size: 1.3rem;
|
|
}
|
|
}
|
|
|
|
</style>
|