<template>
  <div>
    <!-- 滚动进度条 -->
    <div class="scroll-progress-bar" data-scroll-progress="bar"></div>
    
    <ihead></ihead>
    
    <!-- 现代化横幅区域 -->
    <div class="banner" data-parallax="0.3">
      <swiper ref="swiper" :options="swiperOption">
        <swiper-slide v-for="banner in banners" :key="banner.img">
          <div class="banner-content">
            <img :src="banner.img" width="100%" />
            <div class="banner-overlay">
              <div class="banner-text">
                <h1 class="banner-title animate fade-in-down">{{banner.title}}</h1>
                <p class="banner-subtitle animate fade-in-up delay-1s">{{banner.subtitle}}</p>
              </div>
            </div>
          </div>
        </swiper-slide>

        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>

    <!-- 公司介绍区域 -->
    <div class="company-intro">
      <div class="container">
        <div class="intro-header">
          <h2 class="section-title animate-on-scroll">技术驱动未来，服务创造价值</h2>
          <p class="section-subtitle animate-on-scroll">上海丙维数字科技有限公司成立于2018年，专注于AI交付内容，为客户提供高质量的数字化解决方案</p>
        </div>
        
        <div class="intro-content animate-stagger">
          <div class="intro-card hover-lift">
            <div class="card-icon animate pulse infinite">🏢</div>
            <h3>公司概况</h3>
            <p>成立于2018年10月22日，注册资本600万元人民币，总部位于上海市宝山区高逸路112-118号3幢6422室</p>
          </div>
          
          <div class="intro-card hover-lift">
            <div class="card-icon animate pulse infinite delay-1s">🎯</div>
            <h3>核心使命</h3>
            <p>致力于计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务</p>
          </div>
          
          <div class="intro-card hover-lift">
            <div class="card-icon animate pulse infinite delay-2s">🚀</div>
            <h3>AI转型</h3>
            <p>2022年成功转型AI交付领域，围绕客户需求提供智能应用解决方案</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 核心优势展示 -->
    <div class="core-advantages">
      <div class="container">
        <h2 class="section-title animate-on-scroll">核心优势</h2>
        <div class="advantages-grid animate-stagger">
          <div class="advantage-item hover-scale" v-for="advantage in advantages" :key="advantage.title">
            <div class="advantage-icon animate bounce delay-1s">{{advantage.icon}}</div>
            <h3>{{advantage.title}}</h3>
            <p>{{advantage.description}}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 业务领域展示 -->
    <div class="business-areas">
      <div class="container">
        <h2 class="section-title animate-on-scroll">业务领域</h2>
        <div class="areas-grid animate-stagger">
          <div class="area-item hover-glow" v-for="area in businessAreas" :key="area.name">
            <div class="area-icon animate wobble delay-2s">{{area.icon}}</div>
            <h3>{{area.name}}</h3>
            <p>{{area.description}}</p>
            <ul class="area-features">
              <li v-for="feature in area.features" :key="feature">{{feature}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 原有产品展示区域 -->
    <div class="scrollToContentWrapper">
      <a href="javascript:void(0)" id="scrollToBoxes" class="scrollToContent bottomShadowSegmentLight animate bounce infinite">
        <img src="../assets/img/svg/ic_caret.svg" alt="">
      </a>
    </div>

         <!-- 产品展示区域 -->
     <div class="products-section">
       <div class="container">
         <h2 class="section-title animate-on-scroll">核心解决方案</h2>
         <p class="section-subtitle animate-on-scroll">为不同行业提供专业的技术解决方案，助力企业数字化转型</p>
         
         <div id="pageBoxesContainer" class="page pageBoxes animate-stagger">
           <div class="box hover-lift" v-for="product in productData" :key="product.name">
             <div class="product-image">
               <img width="100%" :src="product.img" />
               <div class="product-overlay">
                 <div class="overlay-content">
                   <span class="view-more">了解更多</span>
                 </div>
               </div>
             </div>
             
             <div class="boxTableHeader">
               <div class="h2">{{product.name}}</div>
               <div class="product-description">{{product.description}}</div>
               <div class="product-tags">
                 <span v-for="tag in product.tags" :key="tag" class="tag">{{tag}}</span>
               </div>
             </div>
             
             <a v-if="product.isLink||product.url.indexOf('http')>-1" target="view_window" :href="product.url"></a>
             <router-link v-else :to="product.url"> </router-link>
           </div>
         </div>
       </div>
     </div>

    <!-- 联系我们区域 -->
    <div class="contact-section">
      <div class="container">
        <h2 class="section-title animate-on-scroll">联系我们</h2>
        <div class="contact-info animate-stagger">
          <div class="contact-item hover-scale">
            <div class="contact-icon animate heartBeat infinite">📍</div>
            <div>
              <h4>注册地址</h4>
              <p>上海市宝山区高逸路112-118号3幢6422室</p>
            </div>
          </div>
          <div class="contact-item hover-scale">
            <div class="contact-icon animate heartBeat infinite delay-1s">📞</div>
            <div>
              <h4>联系电话</h4>
              <p>13817819452</p>
            </div>
          </div>
          <div class="contact-item hover-scale">
            <div class="contact-icon animate heartBeat infinite delay-2s">🌐</div>
            <div>
              <h4>官方网站</h4>
              <p>www.bimwe.com</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <ifooter></ifooter>
  </div>
</template>

<script>
import VueAwesomeSwiper from 'vue-awesome-swiper'
import ResponsiveHelper from '../static/responsive_helper'

let banner_index0 = require('../assets/img/banner_index0.png')
let banner_index1 = require('../assets/img/banner_index1.png')
let banner_index2 = require('../assets/img/banner_index2.png')
let banner_index3 = require('../assets/img/banner_index3.png')

let boxbg_cleaning = require('../assets/img/boxbg_cleaning.png')
let boxbg_smartbuildings = require('../assets/img/boxbg_smartbuildings.png')
let boxbg_iot = require('../assets/img/boxbg_iot.png')
let boxbg_facilitiesmanagement = require('../assets/img/boxbg_facilitiesmanagement.png')
let boxbg_errands = require('../assets/img/boxbg_errands.png')

export default {
  components: {
    VueAwesomeSwiper,
    ResponsiveHelper,
   
  },
  data() {
    return {
      swiperOption: {
        autoplay: 3000,
        speed: 1000,
        loop: true,
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true,
        },
      },
      banners: [
        { 
          img: banner_index0,
          title: '智能数字化解决方案',
          subtitle: '技术驱动未来，服务创造价值'
        },
        { 
          img: banner_index1,
          title: 'AI技术引领者',
          subtitle: '专注AI交付，助力企业数字化转型'
        },
        { 
          img: banner_index2,
          title: '顶尖技术团队',
          subtitle: '阿里、字节、腾讯技术精英汇聚'
        },
        { 
          img: banner_index3,
          title: '行业解决方案专家',
          subtitle: '金融、制造、零售多行业服务经验'
        },
      ],
      advantages: [
        {
          icon: '👥',
          title: '顶尖技术团队',
          description: '由阿里、字节、腾讯等顶尖互联网公司资深开发人员组成，技术积累深厚，项目经验丰富'
        },
        {
          icon: '🤖',
          title: 'AI领域战略转型',
          description: '2022年成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供定制化智能应用解决方案'
        },
        {
          icon: '🏆',
          title: '客户广泛认可',
          description: '为金融、制造、零售等多个行业的国内外知名企业提供服务，在行业内树立了可靠、专业的品牌形象'
        }
      ],
      businessAreas: [
        {
          icon: '💻',
          name: '技术开发与服务',
          description: '从事计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务',
          features: ['系统优化与性能提升', '网络架构设计', '信息安全解决方案', '技术咨询与培训']
        },
        {
          icon: '🧠',
          name: 'AI智能应用',
          description: '专注于人工智能技术，为客户提供定制化的智能解决方案',
          features: ['数据分析与挖掘', '智能推荐系统', '自动化流程', '机器学习模型']
        },
        {
          icon: '🔧',
          name: '系统集成与软件开发',
          description: '提供高效的计算机信息系统集成服务，以及创新的软件开发',
          features: ['系统集成服务', '定制化软件开发', '数字化转型', '技术架构设计']
        }
      ],
             productData: [
         {
           name: 'AI集成',
           img: boxbg_cleaning,
           url: '/ourPlan/aiSolutions',
           isLink: false,
           description: '基于人工智能技术，为企业提供智能化的业务解决方案',
           tags: ['机器学习', '深度学习', '智能分析']
         },
         {
           name: '智能建筑',
           img: boxbg_smartbuildings,
           url: '/ourPlan/estateManagement',
           isLink: false,
           description: '通过先进技术打造智能化建筑环境，提升建筑管理效率',
           tags: ['BIM技术', '智能监控', '自动化管理']
         },
         {
           name: '物联网',
           img: boxbg_iot,
           url: '/ourPlan/iot',
           isLink: false,
           description: '连接万物，智能互联，打造数字化未来',
           tags: ['传感器网络', '数据采集', '智能分析']
         },
         {
           name: '设施管理',
           img: boxbg_facilitiesmanagement,
           url: '/ourPlan/facilityManagement',
           isLink: false,
           description: '智能化设施管理，提升运营效率与用户体验',
           tags: ['预防性维护', '智能调度', '成本优化']
         },
         {
           name: '系统集成',
           img: boxbg_errands,
           url: '/ourPlan/technologyIntegration',
           isLink: false,
           description: '专业系统整合，构建统一的企业级平台',
           tags: ['API集成', '数据同步', '统一管理']
         },
       ],
    }
  },

  methods: {},
}
</script>

<style scoped>
/* 横幅样式升级 */
.banner {
  position: relative;
  height: 80vh;
  min-height: 500px;
  overflow: hidden;
}

.banner-content {
  position: relative;
  height: 100%;
  width: 100%;
}

.banner-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.banner-text {
  max-width: 800px;
  padding: 0 20px;
}

.banner-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  animation: fadeInUp 1s ease-out;
}

.banner-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  animation: fadeInUp 1s ease-out 0.3s both;
}

/* 公司介绍区域 */
.company-intro {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.intro-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 1rem;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #3498db, #2980b9);
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.intro-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.intro-card {
  background: white;
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.intro-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.intro-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
}

.intro-card p {
  color: #6c757d;
  line-height: 1.6;
}

/* 核心优势区域 */
.core-advantages {
  padding: 80px 0;
  background: white;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.advantage-item {
  text-align: center;
  padding: 40px 20px;
}

.advantage-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.advantage-item h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
}

.advantage-item p {
  color: #6c757d;
  line-height: 1.6;
  font-size: 1.1rem;
}

/* 业务领域区域 */
.business-areas {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.area-item {
  background: white;
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.area-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.area-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  text-align: center;
}

.area-item h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  text-align: center;
}

.area-item p {
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
}

.area-features {
  list-style: none;
  padding: 0;
}

.area-features li {
  color: #495057;
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
  position: relative;
  padding-left: 25px;
}

.area-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
}

/* 联系我们区域 */
.contact-section {
  padding: 80px 0;
  background: white;
}

.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  padding: 30px;
  background: #f8f9fa;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

.contact-item:hover {
  transform: translateY(-5px);
}

.contact-icon {
  font-size: 2.5rem;
  margin-right: 20px;
  flex-shrink: 0;
}

.contact-item h4 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.contact-item p {
  color: #6c757d;
  margin: 0;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner-title {
    font-size: 2.5rem;
  }
  
  .banner-subtitle {
    font-size: 1.2rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .intro-content,
  .advantages-grid,
  .areas-grid,
  .contact-info {
    grid-template-columns: 1fr;
  }
  
       .company-intro,
  .core-advantages,
  .business-areas,
  .contact-section,
  .products-section {
    padding: 60px 0;
  }
  
  .pageBoxes {
    grid-template-columns: 1fr;
    gap: 30px;
    display: flex;
    flex-direction: row;
  }
  
  .boxTableHeader {
    padding: 25px;
  }
  
  .product-tags {
    gap: 8px;
  }
  
  .tag {
    font-size: 0.8rem;
    padding: 5px 12px;
  }
}

 /* 产品展示区域样式 */
.products-section {
  padding: 80px 0;
  background: white;
}

.pageBoxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.box {
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.product-image {
  position: relative;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.box:hover .product-image img {
  transform: scale(1.05);
}

.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(52, 152, 219, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.box:hover .product-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
  color: white;
}

.view-more {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 12px 24px;
  border: 2px solid white;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.box:hover .view-more {
  background: white;
  color: #3498db;
}

.boxTableHeader {
  padding: 30px;
  text-align: center;
}

.boxTableHeader .h2 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 20px;
}

.product-description {
  color: #6c757d;
  line-height: 1.7;
  margin-bottom: 25px;
  font-size: 1rem;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.tag {
  background: #e9ecef;
  color: #495057;
  padding: 6px 14px;
  border-radius: 18px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tag:hover {
  background: #3498db;
  color: white;
  transform: translateY(-2px);
}

  /* Swiper 基础样式 */
  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: white;
    background: rgba(0, 0, 0, 0.3);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .swiper-button-next:hover,
  .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.6);
  }

  .swiper-pagination {
    bottom: 10%;
  }

  .swiper-pagination-bullet {
    background: white;
    opacity: 0.7;
  }

  .swiper-pagination-bullet-active {
    opacity: 1;
    background: #3498db;
  }
</style>
