<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="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 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">
              <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">🏢</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 class="footer-bottom">
          <div class="footer-bottom-content">
            <div class="copyright">
              <p>&copy; © 2025 上海丙维数字科技有限公司. 保留所有权利.</p>
            </div>
            <div class="footer-extra">
              <div class="beian">
                <span class="beian-icon">🔒</span>
                <span>沪ICP备19005870号-1</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>
import { getFooterAboutUsMenu, getFooterSolutionsMenu } from '../config/menu'

export default {
  name: 'ifooter',
  data() {
    return {
      showBackToTop: false,
      aboutUsMenu: getFooterAboutUsMenu(),
      solutionsMenu: getFooterSolutionsMenu()
    }
  },
  mounted() {
    this.initScrollListener()
  },
  methods: {
    initScrollListener() {
      window.addEventListener('scroll', () => {
        this.showBackToTop = window.pageYOffset > 300
      })
    },
    
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style scoped>
.footer {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  position: relative;
  margin-top: 80px;
}

.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 {
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
  color: #95a5a6;
}

/* 返回顶部按钮 */
.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;
  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>


