fix: 优化官网
This commit is contained in:
Daniel
@@ -8,19 +8,11 @@
|
||||
<div class="footer-logo">
|
||||
<img :src="require('@/assets/img/logo.png')" alt="丙维科技" class="logo">
|
||||
<h3>上海丙维数字科技有限公司</h3>
|
||||
<p class="company-desc">技术驱动未来，服务创造价值</p>
|
||||
<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="item in aboutUsMenu" :key="item.name">
|
||||
<router-link :to="item.url">{{ item.name }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>解决方案</h4>
|
||||
<ul class="footer-links">
|
||||
@@ -31,37 +23,46 @@
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>联系我们</h4>
|
||||
<h4>联系咨询</h4>
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
<span class="contact-icon">🏢</span>
|
||||
<span>上海市宝山区高逸路112-118号3幢6422室</span>
|
||||
<span class="contact-icon" v-html="icons.phone"></span>
|
||||
<a href="tel:13817819452">13817819452</a>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<span class="contact-icon">📱</span>
|
||||
<span>13817819452</span>
|
||||
<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">📧</span>
|
||||
<span>bimwe@bimwe.com</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<span class="contact-icon">💻</span>
|
||||
<span>www.bimwe.com</span>
|
||||
<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>© © 2025 上海丙维数字科技有限公司. 保留所有权利.</p>
|
||||
<p>© 2025 上海丙维数字科技有限公司. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="footer-extra">
|
||||
<div class="beian">
|
||||
<span class="beian-icon">🔒</span>
|
||||
<span class="beian-icon" v-html="icons.shield"></span>
|
||||
<span>沪ICP备19005870号-1</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,32 +72,41 @@
|
||||
</div>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<div class="back-to-top" @click="scrollToTop" v-show="showBackToTop">
|
||||
<span class="arrow">↑</span>
|
||||
</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 { getFooterAboutUsMenu, getFooterSolutionsMenu } from '../config/menu'
|
||||
import { getFooterSolutionsMenu } from '../config/menu'
|
||||
|
||||
export default {
|
||||
name: 'ifooter',
|
||||
data() {
|
||||
const icon = (path) => `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">${path}</svg>`
|
||||
return {
|
||||
showBackToTop: false,
|
||||
aboutUsMenu: getFooterAboutUsMenu(),
|
||||
solutionsMenu: getFooterSolutionsMenu()
|
||||
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() {
|
||||
this.initScrollListener()
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
this.handleScroll()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
methods: {
|
||||
initScrollListener() {
|
||||
window.addEventListener('scroll', () => {
|
||||
this.showBackToTop = window.pageYOffset > 300
|
||||
})
|
||||
handleScroll() {
|
||||
this.showBackToTop = window.pageYOffset > 300
|
||||
},
|
||||
|
||||
scrollToTop() {
|
||||
@@ -111,10 +121,9 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
background: #111827;
|
||||
color: white;
|
||||
position: relative;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
@@ -150,7 +159,7 @@ export default {
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: #3498db;
|
||||
background: #60a5fa;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
@@ -174,6 +183,20 @@ export default {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.footer-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 38px;
|
||||
margin-top: 18px;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 链接列表 */
|
||||
.footer-links {
|
||||
list-style: none;
|
||||
@@ -185,7 +208,8 @@ export default {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
.footer-links a,
|
||||
.contact-item a {
|
||||
color: #bdc3c7;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
@@ -193,24 +217,12 @@ export default {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #3498db;
|
||||
.footer-links a:hover,
|
||||
.contact-item a:hover {
|
||||
color: #93c5fd;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.footer-links a::before {
|
||||
content: '→';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover::before {
|
||||
opacity: 1;
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
/* 联系信息 */
|
||||
.contact-info {
|
||||
display: flex;
|
||||
@@ -227,9 +239,30 @@ export default {
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 1.2rem;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
color: #93c5fd;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-address {
|
||||
margin-top: 18px;
|
||||
color: #7d8898;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 页脚底部 */
|
||||
@@ -267,8 +300,8 @@ export default {
|
||||
}
|
||||
|
||||
.beian-icon {
|
||||
font-size: 1.2rem;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
color: #95a5a6;
|
||||
}
|
||||
@@ -280,26 +313,30 @@ export default {
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
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 4px 15px rgba(52, 152, 219, 0.3);
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
|
||||
background: #1d4ed8;
|
||||
box-shadow: 0 16px 32px rgba(37, 99, 235, 0.34);
|
||||
}
|
||||
|
||||
.back-to-top .arrow {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@@ -330,25 +367,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.footer-section {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.footer-section:nth-child(1) { animation-delay: 0.1s; }
|
||||
.footer-section:nth-child(2) { animation-delay: 0.2s; }
|
||||
.footer-section:nth-child(3) { animation-delay: 0.3s; }
|
||||
.footer-section:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬停效果增强 */
|
||||
.footer-section:hover {
|
||||
transform: translateY(-2px);
|
||||
@@ -359,17 +377,4 @@ export default {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
/* 渐变背景动画 */
|
||||
.footer {
|
||||
background-size: 200% 200%;
|
||||
animation: gradientShift 10s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user