1
This commit is contained in:
张成
@@ -1,83 +1,370 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="footer">
|
||||
<div class="row1">
|
||||
<div class="pageWidth">
|
||||
<table class="footerTable">
|
||||
<thead class="bread desktop smallDesktop">
|
||||
<tr>
|
||||
<th>我们的办公室</th>
|
||||
<th>快速链接</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="stackable">
|
||||
<ul class="quickLinks bread">
|
||||
<li v-for="item in contactData" :key="item.name">
|
||||
<label>{{item.name+"："}}</label>
|
||||
<label>{{item.value}}</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</td>
|
||||
<td class="quickLinksContainer">
|
||||
<div class="mobile mobileFooterTitle bread">Snabblänkar</div>
|
||||
<ul class="quickLinks bread">
|
||||
<li v-for="menu in menus" :key="menu.name">
|
||||
<router-link :to="menu.url">{{menu.name}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<!-- 主要页脚信息 -->
|
||||
<div class="footer-main">
|
||||
<div class="footer-section">
|
||||
<div class="footer-logo">
|
||||
<img :src="require('@/assets/img/logo.png')" alt="丙维科技" class="logo">
|
||||
<h3>上海丙维数字科技有限公司</h3>
|
||||
<p class="company-desc">技术驱动未来，服务创造价值</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>关于我们</h4>
|
||||
<ul class="footer-links">
|
||||
<li><router-link to="/aboutUs/aboutUs">公司简介</router-link></li>
|
||||
<li><router-link to="/aboutUs/propystTechnology">技术优势</router-link></li>
|
||||
<li><router-link to="/aboutUs/cooperateWithUs">合作共赢</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>解决方案</h4>
|
||||
<ul class="footer-links">
|
||||
<li><router-link to="/ourPlan/iot">物联网</router-link></li>
|
||||
<li><router-link to="/ourPlan/smartbuildings">智能建筑</router-link></li>
|
||||
<li><router-link to="/ourPlan/facilityManagement">设施管理</router-link></li>
|
||||
<li><router-link to="/ourPlan/reaEstate">房地产</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>联系我们</h4>
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
<span class="contact-icon">📍</span>
|
||||
<span>上海市宝山区高逸路112-118号3幢6422室</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<span class="contact-icon">📞</span>
|
||||
<span>13817819452</span>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row2">
|
||||
<div class="contentContainer pageWidth">
|
||||
<div class="bread">Copyright © 2018 Bimwe Technology co. LTD</div>
|
||||
|
||||
<div class="beian-box">
|
||||
<img src="../assets/img/beian_icon.png" style="width:20px;" />
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备19005870号-1</a>
|
||||
|
||||
<!-- 页脚底部 -->
|
||||
<div class="footer-bottom">
|
||||
<div class="footer-bottom-content">
|
||||
<div class="copyright">
|
||||
<p>© 2024 上海丙维数字科技有限公司. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="footer-extra">
|
||||
<div class="beian">
|
||||
<img :src="require('@/assets/img/beian_icon.png')" alt="备案" class="beian-icon">
|
||||
<span>沪ICP备XXXXXXXX号</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<div class="back-to-top" @click="scrollToTop" v-show="showBackToTop">
|
||||
<span class="arrow">↑</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ifooter',
|
||||
data() {
|
||||
return {
|
||||
menus: window.config.menus,
|
||||
contactData: [
|
||||
{ name: '地址', value: '上海市宝山区' },
|
||||
{ name: '手机', value: '13817819452' },
|
||||
{ name: '邮箱', value: 'Zhp@bimwe.com' }
|
||||
]
|
||||
showBackToTop: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initScrollListener()
|
||||
},
|
||||
methods: {
|
||||
initScrollListener() {
|
||||
window.addEventListener('scroll', () => {
|
||||
this.showBackToTop = window.pageYOffset > 300
|
||||
})
|
||||
},
|
||||
|
||||
scrollToTop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.quickLinks li {
|
||||
float: left;
|
||||
margin: 5px 20px;
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
color: white;
|
||||
position: relative;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.beian-box {
|
||||
.footer-content {
|
||||
padding: 60px 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: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.footer-section h4 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #ecf0f1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-section h4::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: #3498db;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Logo区域 */
|
||||
.footer-logo .logo {
|
||||
height: 50px;
|
||||
margin-bottom: 15px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.footer-logo h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.company-desc {
|
||||
color: #bdc3c7;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 链接列表 */
|
||||
.footer-links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-links li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #bdc3c7;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #3498db;
|
||||
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;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #bdc3c7;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 1.2rem;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 页脚底部 */
|
||||
.footer-bottom {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
.footer-bottom-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.copyright p {
|
||||
color: #95a5a6;
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.beian {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #95a5a6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.beian-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
filter: brightness(0) invert(0.6);
|
||||
}
|
||||
|
||||
/* 返回顶部按钮 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
a {
|
||||
color: #fff;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
.back-to-top .arrow {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.footer-content {
|
||||
padding: 40px 0 0 0;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.footer-bottom-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.back-to-top .arrow {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.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);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
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