DNchngguo/RuoYi-Vue3/src/views/front/HydrologicalPlatform.vue

<template>
  <div class="sales-platform">
    <!-- 页面头部 -->
    <PageHeader />

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 英雄区域 - 轮播图 -->
      <section class="hero-section">
        <el-carousel class="hero-carousel" height="450px" indicator-position="outside" autoplay interval="5000">
          <!-- 轮播图1 - 数字孪生太浦河 -->
          <el-carousel-item>
            <div class="carousel-content">
              <div class="carousel-image">
                <img 
                  v-if="carouselData[0].image"
                  :src="carouselData[0].image" 
                  :alt="carouselData[0].title" 
                  loading="lazy" 
                  class="carousel-image-element"
                  @load="(event) => onImageLoad(event, 0)"
                >
                <div v-if="!carouselData[0].image || !carouselData[0].loaded" class="image-placeholder">
                  <span class="placeholder-icon">🌊</span>
                  <span class="placeholder-text">数字孪生流域</span>
                </div>
              </div>
              <div class="carousel-text">
                <h1 class="hero-title">数字孪生流域</h1>
                <p class="hero-description">基于数字孪生技术的流域综合管理平台，实现流域监测、模拟预测与智能调度</p>
                <el-button type="primary" size="medium" @click="goToProjectCases">
                  <el-icon><Document /></el-icon>
                  查看案例
                </el-button>
              </div>
            </div>
          </el-carousel-item>
          
          <!-- 轮播图2 - 数字孪生水文站 -->
          <el-carousel-item>
            <div class="carousel-content">
              <div class="carousel-image">
                <img 
                  v-if="carouselData[1].image"
                  :src="carouselData[1].image" 
                  :alt="carouselData[1].title" 
                  loading="lazy" 
                  class="carousel-image-element"
                  @load="(event) => onImageLoad(event, 1)"
                >
                <div v-if="!carouselData[1].image || !carouselData[1].loaded" class="image-placeholder">
                  <span class="placeholder-icon">💧</span>
                  <span class="placeholder-text">数字孪生水文站</span>
                </div>
              </div>
              <div class="carousel-text">
                <h1 class="hero-title">数字孪生水文站</h1>
                <p class="hero-description">实现水文监测站点的数字化映射，提供实时数据可视化与智能分析功能</p>
                <el-button type="primary" size="medium" @click="goToProjectCases">
                  <el-icon><Document /></el-icon>
                  查看案例
                </el-button>
              </div>
            </div>
          </el-carousel-item>
          
          <!-- 轮播图3 - 流域数据采集 -->
          <el-carousel-item>
            <div class="carousel-content">
              <div class="carousel-image">
                <img 
                  v-if="carouselData[2].image"
                  :src="carouselData[2].image" 
                  :alt="carouselData[2].title" 
                  loading="lazy" 
                  class="carousel-image-element"
                  @load="(event) => onImageLoad(event, 2)"
                >
                <div v-if="!carouselData[2].image || !carouselData[2].loaded" class="image-placeholder">
                  <span class="placeholder-icon">📡</span>
                  <span class="placeholder-text">流域数据采集</span>
                </div>
              </div>
              <div class="carousel-text">
                <h1 class="hero-title">流域数据采集</h1>
                <p class="hero-description">全流域水文数据采集与传输系统，支持多源数据融合与标准化管理</p>
                <el-button type="primary" size="medium" @click="goToProjectCases">
                  <el-icon><Document /></el-icon>
                  查看案例
                </el-button>
              </div>
            </div>
          </el-carousel-item>
          
          <!-- 轮播图4 - 解决方案 -->
          <el-carousel-item>
            <div class="carousel-content">
              <div class="carousel-image">
                <img 
                  v-if="carouselData[3].image"
                  :src="carouselData[3].image" 
                  :alt="carouselData[3].title" 
                  loading="lazy" 
                  class="carousel-image-element"
                  @load="(event) => onImageLoad(event, 3)"
                >
                <div v-if="!carouselData[3].image || !carouselData[3].loaded" class="image-placeholder">
                  <span class="placeholder-icon">🔬</span>
                  <span class="placeholder-text">智能解决方案</span>
                </div>
              </div>
              <div class="carousel-text">
                <h1 class="hero-title">水资源评价与调配</h1>
                <p class="hero-description">基于水资源调配模型分析，提供精准的水资源评价与优化调配方案</p>
                <el-button type="primary" size="medium" @click="goToCompanyProfile">
                  <el-icon><OfficeBuilding /></el-icon>
                  了解我们
                </el-button>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        
        <!-- 导航按钮 -->
        <div class="hero-buttons">
          <el-button type="primary" size="medium" @click="goToProjectCases">
            <el-icon><Document /></el-icon>
            项目案例
          </el-button>
          <el-button type="primary" size="medium" @click="goToCompanyProfile">
            <el-icon><OfficeBuilding /></el-icon>
            公司资质
          </el-button>
          <el-button type="primary" size="medium" @click="goToAwards">
            <el-icon><Trophy /></el-icon>
            荣誉奖项
          </el-button>
          <el-button type="primary" size="medium" @click="goToAdmin">
            <el-icon><Setting /></el-icon>
            后台管理
          </el-button>
        </div>
      </section>

      <!-- 核心优势区域 -->
      <section class="features-section">
        <div class="feature-card">
          <h3>🎯 专业团队</h3>
          <p>拥有10年以上经验的技术专家团队，精通各类软件开发与架构设计</p>
        </div>
        <div class="feature-card">
          <h3>🚀 快速开发</h3>
          <p>采用敏捷开发流程，快速响应需求，确保项目按时交付</p>
        </div>
        <div class="feature-card">
          <h3>🔒 质量保障</h3>
          <p>严格的测试流程，确保产品质量，提供持续的技术支持</p>
        </div>
        <div class="feature-card">
          <h3>💡 创新能力</h3>
          <p>持续创新，紧跟技术前沿，为客户提供最佳解决方案</p>
        </div>
        <div class="feature-card">
          <h3>🤝 客户至上</h3>
          <p>以客户需求为导向，提供定制化服务，建立长期合作关系</p>
        </div>
        <div class="feature-card">
          <h3>📈 成功案例</h3>
          <p>已完成100+项目，服务50+客户，涵盖多个行业领域</p>
        </div>
      </section>

      <!-- 项目案例区域 -->
      <section class="project-section">
        <h2 class="section-title">精选项目案例</h2>
        <div class="project-grid">
          <div class="project-card" @click="goToProjectCases('tai-pu-river')">
            <div class="project-image">
              <img 
                :src="taiPuRiverImage2" 
                alt="数字孪生流域" 
                loading="lazy"
                class="project-image-element"
              >
            </div>
            <div class="project-content">
              <h3>数字孪生流域</h3>
              <p>基于数字孪生技术的流域综合管理平台，实现流域监测、模拟预测与智能调度</p>
              <div class="project-tags">
                <span class="tag">数字孪生</span>
                <span class="tag">GIS</span>
                <span class="tag">大数据</span>
              </div>
            </div>
          </div>
          <div class="project-card" @click="goToProjectCases('hydrological-station')">
            <div class="project-image">
              <img 
                :src="gongHuImage" 
                alt="数字孪生水文站" 
                loading="lazy"
                class="project-image-element"
              >
            </div>
            <div class="project-content">
              <h3>数字孪生水文站</h3>
              <p>实现水文监测站点的数字化映射，提供实时数据可视化与智能分析功能</p>
              <div class="project-tags">
                <span class="tag">数字孪生</span>
                <span class="tag">物联网</span>
                <span class="tag">AI</span>
              </div>
            </div>
          </div>
          <div class="project-card" @click="goToProjectCases('data-collection')">
            <div class="project-image">
              <div class="placeholder-image">
                <span class="placeholder-text">流域数据采集</span>
              </div>
            </div>
            <div class="project-content">
              <h3>流域数据采集</h3>
              <p>全流域水文数据采集与传输系统，支持多源数据融合与标准化管理</p>
              <div class="project-tags">
                <span class="tag">数据采集</span>
                <span class="tag">传感器</span>
                <span class="tag">通信</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 公司资质区域 -->
      <section class="certification-section">
        <h2 class="section-title">公司资质与荣誉</h2>
        <div class="certification-grid">
          <div class="certification-card">
            <div class="certification-icon">🏆</div>
            <h3>高新技术企业</h3>
            <p>国家级高新技术企业认定证书</p>
          </div>
          <div class="certification-card">
            <div class="certification-icon">⭐</div>
            <h3>CMMI认证</h3>
            <p>软件能力成熟度模型集成三级认证</p>
          </div>
          <div class="certification-card">
            <div class="certification-icon">🛡️</div>
            <h3>ISO认证</h3>
            <p>ISO9001质量管理体系认证</p>
          </div>
          <div class="certification-card">
            <div class="certification-icon">🎖️</div>
            <h3>创新企业</h3>
            <p>省级科技创新企业认定</p>
          </div>
        </div>
      </section>
    </main>

    <!-- 页面底部 -->
    <footer class="page-footer">
      <p>&copy; 2025 东南大区成果展示平台 - 金水内部测试系统</p>
    </footer>
  </div>
</template>

<script setup>
import PageHeader from './PageHeader.vue'
import { Document, OfficeBuilding, Trophy, Setting } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import taiPuRiverImage from '@/assets/images/太浦河全景.png'
import taiPuRiverImage2 from '@/assets/images/太浦河全景2.png'
import gongHuImage from '@/assets/images/贡湖.png'
import collectionPlatformImage from '@/assets/images/采集平台.png'
import waterResourcesImage from '@/assets/images/水资源模型调配.png'

const router = useRouter()

// 轮播图数据
const carouselData = ref([
  {
    title: '数字孪生流域',
    description: '基于数字孪生技术的流域综合管理平台',
    buttonText: '查看案例',
    image: taiPuRiverImage2, // 使用太浦河全景图2
    loaded: false
  },
  {
    title: '数字孪生水文站',
    description: '实现水文监测站点的数字化映射',
    buttonText: '查看案例',
    image: gongHuImage, // 使用贡湖图片
    loaded: false
  },
  {
    title: '流域数据采集',
    description: '全流域水文数据采集与传输系统',
    buttonText: '查看案例',
    image: collectionPlatformImage, // 使用采集平台图片
    loaded: false
  },
  {
    title: '水资源评价与调配',
    description: '通过专业水资源模型分析，提供精准的水资源评价与优化调配方案',
    buttonText: '了解我们',
    image: waterResourcesImage, // 使用水资源模型调配图片
    loaded: false
  }
])

// 图片加载完成处理
const onImageLoad = (event, index) => {
  const img = event.target
  if (index !== undefined && index < carouselData.value.length) {
    carouselData.value[index].loaded = true
    img.classList.add('loaded')
  }
}

// 跳转到项目案例页面
const goToProjectCases = (projectId = 'tai-pu-river') => {
  router.push(`/project-cases/${projectId}`)
}

// 跳转到公司资质页面
const goToCompanyProfile = () => {
  window.location.href = '/company-profile'
}

// 跳转到荣誉奖项页面
const goToAwards = () => {
  window.location.href = '/awards'
}

// 跳转到后台管理
const goToAdmin = () => {
  // 跳转到若依后台管理界面
  window.location.href = '/admin'
}
</script>

<style scoped>
.sales-platform {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  background: #f8f9fa;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  width: 100%;
  padding: 2rem 0;
  overflow-y: auto;
  height: calc(100% - 160px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hero-section {
  width: 100%;
  margin-bottom: 2.5rem;
  padding: 0 1rem;
}

.hero-carousel {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.carousel-content {
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: linear-gradient(135deg, #ffffff 0%, #f0f5ff 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.carousel-image-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.carousel-image-element.loaded {
  opacity: 1;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.placeholder-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.placeholder-text {
  font-size: 1.25rem;
  color: #326ee2;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .carousel-content {
    height: 350px;
    padding: 0 1rem;
  }
  
  .carousel-text {
    max-width: 100%;
    padding: 1.5rem;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-description {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .carousel-content {
    height: 250px;
    padding: 0 0.5rem;
  }
  
  .carousel-text {
    padding: 1rem;
  }
  
  .hero-title {
    font-size: 1.5rem;
  }
  
  .hero-description {
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
  }
  
  .placeholder-icon {
    font-size: 3rem;
  }
  
  .placeholder-text {
    font-size: 1rem;
  }
}

.carousel-text {
  width: 50%;
  min-width: 350px;
  padding: 2rem;
  position: relative;
  z-index: 2;
  color: #000000;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 0;
  align-items: flex-end;
  text-align: right;
}

.hero-title {
  font-size: 2.5rem;
  color: #000000;
  margin-bottom: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero-description {
  font-size: 1rem;
  color: #000000;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  font-weight: 400;
}

.hero-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  padding: 0 1rem;
}

/* 按钮样式优化 */
:deep(.el-button) {
  border-radius: 5px !important;
  min-width: auto !important;
  padding: 0 12px !important;
  width: auto !important;
  max-width: 120px !important;
}

/* 核心优势区域 */
.features-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

/* 项目案例区域 */
.project-section {
  background: white;
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.section-title {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 2rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 0 1rem;
}

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

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

.project-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f0f5ff;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-card:hover .project-image img {
  transform: scale(1.1);
}

.project-content {
  padding: 2rem;
}

.project-content h3 {
  font-size: 1.25rem;
  color: #2c3e50;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.project-content p {
  font-size: 0.875rem;
  color: #7f8c8d;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.project-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag {
  background: #f0f5ff;
  color: #326ee2;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* 公司资质区域 */
.certification-section {
  background: white;
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.certification-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 0 1rem;
}

.certification-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f5ff 100%);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  text-align: center;
}

.certification-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

.certification-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.certification-card h3 {
  font-size: 1.125rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.4;
}

.certification-card p {
  font-size: 0.875rem;
  color: #7f8c8d;
  line-height: 1.4;
}

.feature-card {
  background: white;
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

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

.feature-card h3 {
  font-size: 1.25rem;
  color: #2c3e50;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.feature-card p {
  font-size: 1rem;
  color: #7f8c8d;
  line-height: 1.6;
  font-weight: 400;
}

/* 页面底部 */
.page-footer {
  background: white;
  color: #326ee2;
  text-align: center;
  padding: 1.5rem 0;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #f0f5ff;
}

.page-footer p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}
</style>