454 lines
17 KiB
Vue
454 lines
17 KiB
Vue
<!-- src/views/pc/index.vue -->
|
||
<template>
|
||
<div class="pc-home">
|
||
<!-- 第一屏：全屏轮播 -->
|
||
<div class="first-screen">
|
||
<div class="carousel-wrapper">
|
||
<a-carousel autoplay :autoplay-speed="5000" arrows dots-class="slick-dots slick-thumb">
|
||
<div class="carousel-item">
|
||
<video src="./video/9c4a6c72df9f8a4f6b013003cb2f6bd5.mp4" autoplay loop muted playsinline></video>
|
||
<div class="carousel-content">
|
||
<h1 class="animate-slide-in slideTitle">我们的愿景</h1>
|
||
<p class="animate-slide-in delay-1 slideintro">成为全球企业信赖的能碳管理伙伴定义智慧零碳时代新标准</p>
|
||
<p class="animate-slide-in delay-2 englishFont">BECOME A TRUSTED PARTNER IN ENERGY AND CARBON MANAGEMENT
|
||
FOR GLOBAL ENTERPRISES; DEFINE THE NEW STANDARDS FOR THE ERA OF SMART ZERO CARBON.</p>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-item">
|
||
<video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_2.mp4" autoplay loop
|
||
muted playsinline></video>
|
||
<!-- <div class="carousel-content">
|
||
<h1 class="animate-slide-in">可持续发展</h1>
|
||
<p class="animate-slide-in delay-1">推动绿色能源转型</p>
|
||
<a-button class="animate-slide-in delay-2" type="primary" size="large">
|
||
探索方案
|
||
</a-button>
|
||
</div> -->
|
||
</div>
|
||
<div class="carousel-item">
|
||
<video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_3.mp4" autoplay loop
|
||
muted playsinline></video>
|
||
<!-- <div class="carousel-content">
|
||
<h1 class="animate-slide-in">创新科技</h1>
|
||
<p class="animate-slide-in delay-1">打造环保解决方案</p>
|
||
<a-button class="animate-slide-in delay-2" type="primary" size="large">
|
||
查看案例
|
||
</a-button>
|
||
</div> -->
|
||
</div>
|
||
</a-carousel>
|
||
</div>
|
||
|
||
<!-- 向下滚动指示器 -->
|
||
<div class="scroll-indicator" @click="scrollToNext">
|
||
<DownOutlined />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二屏：核心产品 -->
|
||
<div class="second-screen" ref="secondScreenRef">
|
||
<div class="container">
|
||
<div class="content-section animate-fade-in-up">
|
||
<h2>
|
||
<img src="./../../assets/images/point.png" />
|
||
<span>核心产品</span>
|
||
</h2>
|
||
<ul class="core-products animate-fade-in-up">
|
||
<li>AI智控</li>
|
||
<li>高效节能</li>
|
||
<li>能碳双控</li>
|
||
<li>绿色低碳</li>
|
||
</ul>
|
||
</div>
|
||
<div class="services-section">
|
||
<a-row :gutter="[16, 16]" class="serviceList">
|
||
<a-col :span="12">
|
||
<div class="service-card animate-fade-in-up delay-1">
|
||
<h3>全生命周期产品碳足迹平台</h3>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<div class="service-card animate-fade-in-up delay-2">
|
||
<h3>城市级能碳平台</h3>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="[16, 16]" class="serviceList2">
|
||
<a-col :span="6">
|
||
<div class="service-card animate-fade-in-up delay-3">
|
||
<h3>城市级能碳平台</h3>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<div class="service-card animate-fade-in-up delay-4">
|
||
<h3>工业锅炉节能器</h3>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<div class="service-card animate-fade-in-up delay-5">
|
||
<h3>FMCS智能工业平台</h3>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<div class="service-card animate-fade-in-up delay-6">
|
||
<h3>ESG绿色认证咨询</h3>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 第三屏：AI+智能节能技术 -->
|
||
<div class="three-screen" ref="threeScreenRef">
|
||
<div class="container">
|
||
<div class="content-section animate-fade-in-up">
|
||
<h2>
|
||
<img src="./../../assets/images/point.png" />
|
||
<span>AI+智能节能技术</span>
|
||
</h2>
|
||
<p>为客户提供多场景中长期智慧能源战略规划，包括AIoT能源管理系统与低碳技术集成</p>
|
||
</div>
|
||
<!-- 横向循环焦点图展示 轮播图 -->
|
||
<div class="carousel-section">
|
||
<swiper :centered-slides="true" :loop="true" :slides-per-view="5" :space-between="-90" :autoplay="false"
|
||
:breakpoints="{
|
||
'768': {
|
||
slidesPerView: 1.5,
|
||
spaceBetween: -15
|
||
},
|
||
'1024': {
|
||
slidesPerView: 2.2,
|
||
spaceBetween: -20
|
||
},
|
||
'1200': {
|
||
slidesPerView: 5,
|
||
spaceBetween: -90
|
||
}
|
||
}" @slideChange="onThirdScreenSlideChange" @autoplayTimeLeft="onThirdScreenAutoplayTimeLeft"
|
||
class="ai-tech-carousel" ref="thirdScreenSwiperRef" :initial-slide="3">
|
||
<swiper-slide v-for="(item, index) in carouselItems" :key="index">
|
||
<div class="slide-content" @click="() => selectItem(index)" :class="{ active: index === currentIndex }">
|
||
<div class="slide-inner">
|
||
<img :src="item.image" :alt="item.title" />
|
||
<div class="slide-info">
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 第四屏 -应用场景 -->
|
||
<div class="screens-four">
|
||
<div class="container">
|
||
<div class="content-section animate-fade-in-up">
|
||
<h2>
|
||
<img src="./../../assets/images/point.png" />
|
||
<span>应用场景</span>
|
||
</h2>
|
||
<p class="desc">融合智能感知与认知计算，全面提升运营效率与决策智能化水平</p>
|
||
</div>
|
||
<!-- 横向滚动屏 -->
|
||
<div class="carousel-section">
|
||
<swiper :modules="[Autoplay, Pagination]" :slides-per-view="4.5" :space-between="0" :loop="true" :autoplay="{
|
||
delay: 3000,
|
||
disableOnInteraction: false,
|
||
pauseOnMouseEnter: true
|
||
}" @slideChange="onSlideChange" @autoplayTimeLeft="onAutoplayTimeLeft" class="tech-carousel">
|
||
<swiper-slide v-for="(item, index) in carouselSeneceList" :key="index">
|
||
<div class="slide-content" @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)">
|
||
<img :src="item.image" :alt="item.title" />
|
||
<div class="image-overlay default-info" v-show="!item.hovered">
|
||
<p>{{ item.companyName }}</p>
|
||
</div>
|
||
<div class="hover-overlay" v-show="item.hovered">
|
||
<div class="overlay-content">
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</swiper-slide>
|
||
|
||
<!-- 进度条导航 -->
|
||
<div class="swiper-pagination-custom">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" :style="{ width: progress + '%' }"></div>
|
||
</div>
|
||
</div>
|
||
</swiper>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--第五屏 合作伙伴 -->
|
||
<div class="partner-screens">
|
||
<div class="container">
|
||
<div class="content-section animate-fade-in-up">
|
||
<h2>
|
||
<img src="./../../assets/images/point.png" />
|
||
<span>合作伙伴</span>
|
||
</h2>
|
||
<p>与您携手共赢,共同创造美好未来</p>
|
||
<h4>
|
||
<line></line>荣誉资质<line></line>
|
||
</h4>
|
||
<div class="partner-img">
|
||
<p><span>ISO9001认证</span></p>
|
||
<p><span>ISO45001认证</span></p>
|
||
<p><span>ISO14001认证</span></p>
|
||
</div>
|
||
<h4 class="partner-title">
|
||
<line></line>客户及战略伙伴<line></line>
|
||
</h4>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="partnerImgAll animate-fade-in-up">
|
||
<img src="../../assets/images/partercomp.png" alt="">
|
||
</div>
|
||
</div>
|
||
<!--第六屏 新闻资讯 -->
|
||
<div class="other-screens">
|
||
<div class="container">
|
||
<div class="content-section animate-fade-in-up">
|
||
<h2>
|
||
<img src="./../../assets/images/point.png" />
|
||
<span>新闻资讯</span>
|
||
</h2>
|
||
<p class="desc">了解最新行业资讯 把握市场最新动向</p>
|
||
<div class="content">
|
||
<div class="lt">
|
||
<div class="img"><img src="./../../assets/images/news.png" /></div>
|
||
<p class="title">降本增效新引擎：AI如何实现能源的精细化管理与数智变革？</p>
|
||
<p class="nr">在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...</p>
|
||
</div>
|
||
<div class="rt">
|
||
<ul>
|
||
<li v-for="item in newsList" :key="item.id">
|
||
<div class="newslt">
|
||
<h4>{{ item.date.substring(8, 10) }}</h4>
|
||
<p>{{ item.date.substring(0, 7) }}</p>
|
||
</div>
|
||
<div class="newsrt">
|
||
<h4>{{ item.title }}</h4>
|
||
<p>{{ item.description }}</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||
import { DownOutlined } from '@ant-design/icons-vue'
|
||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||
import { Autoplay, Pagination } from 'swiper/modules';
|
||
import 'swiper/css';
|
||
import 'swiper/css/pagination';
|
||
// 静态导入所有图片(AI智能节能技术)
|
||
import carouse1 from './../../assets/images/carouse1.png'
|
||
import carouse2 from './../../assets/images/carouse2.png'
|
||
import carouse3 from './../../assets/images/carouse3.png'
|
||
import carouse4 from './../../assets/images/carouse4.png'
|
||
import carouse5 from './../../assets/images/carouse5.png'
|
||
//应用场景图片
|
||
import appScene1 from './../../assets/images/scene1.png'
|
||
import appScene2 from './../../assets/images/scene2.png'
|
||
import appScene3 from './../../assets/images/scene3.png'
|
||
import appScene4 from './../../assets/images/scene4.png'
|
||
import appScene5 from './../../assets/images/scene5.png'
|
||
// 添加进度状态
|
||
const progress = ref(0);
|
||
const swiperRef = ref(null);
|
||
|
||
// 新闻数据
|
||
const newsList = ref([
|
||
{
|
||
id: 1,
|
||
date: '2025-09-01',
|
||
title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
|
||
description: '在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...'
|
||
},
|
||
{
|
||
id: 2,
|
||
date: '2025-09-04',
|
||
title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
|
||
description: '在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...'
|
||
},
|
||
{
|
||
id: 3,
|
||
date: '2025-09-15',
|
||
title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
|
||
description: '在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...'
|
||
}
|
||
])
|
||
|
||
const secondScreenRef = ref<HTMLElement | null>(null)
|
||
const observer = ref<IntersectionObserver | null>(null)
|
||
/************************AI+智能节能技术——第三屏轮播图片*************************** */
|
||
// AI智能节能技术-轮播图数据
|
||
const carouselItems = ref([
|
||
{
|
||
image: carouse1,
|
||
title: 'AI+空气压缩',
|
||
description: '通过AI技术实现能源使用优化'
|
||
},
|
||
{
|
||
image: carouse2,
|
||
title: 'AI+监控',
|
||
description: '全生命周期碳排放监控与分析'
|
||
},
|
||
{
|
||
image: carouse3,
|
||
title: 'AI+区域能源站',
|
||
description: '工业4.0背景下的低碳生产模式'
|
||
},
|
||
{
|
||
image: carouse4,
|
||
title: 'AI+智慧照明',
|
||
description: '构建智慧城市的能源生态系统'
|
||
},
|
||
{
|
||
image: carouse5,
|
||
title: 'AI+虚拟电厂',
|
||
description: '风光储一体化解决方案'
|
||
}
|
||
])
|
||
const thirdScreenProgress = ref(0);
|
||
const thirdScreenSwiperRef = ref(null);
|
||
const currentIndex = ref(3);
|
||
console.log(currentIndex.value, "hahahahyyyyyyyy")
|
||
const onThirdScreenSlideChange = (swiper: any) => {
|
||
thirdScreenProgress.value = 0;
|
||
// 更新当前索引以保持同步
|
||
if (swiper.realIndex !== undefined) {
|
||
currentIndex.value = swiper.realIndex;
|
||
}
|
||
}
|
||
|
||
const onThirdScreenAutoplayTimeLeft = (s: any, time: any, progressValue: any) => {
|
||
thirdScreenProgress.value = (1 - progressValue) * 100;
|
||
thirdScreenSwiperRef.value = s;
|
||
}
|
||
// 选择图片
|
||
const selectItem = (index: any) => {
|
||
currentIndex.value = index;
|
||
|
||
// 如果有Swiper实例引用，则切换到对应slide
|
||
if (thirdScreenSwiperRef.value && thirdScreenSwiperRef.value.swiper) {
|
||
thirdScreenSwiperRef.value.swiper.slideToLoop(index, 500);
|
||
}
|
||
}
|
||
/************************AI+智能节能技术——第三屏轮播图片 end*************************** */
|
||
//应用场景轮播图
|
||
const carouselSeneceList = ref([
|
||
{
|
||
image: appScene1,
|
||
companyName: '绿色酒店',
|
||
title: '绿色酒店',
|
||
hovered: false,
|
||
description: '创建绿色酒店是社会进步的需要。在建设绿色酒店的过程中，采用科学的方法对酒店进行绿色管理。'
|
||
},
|
||
|
||
{
|
||
image: appScene3,
|
||
companyName: '商业综合体',
|
||
title: '商业综合体',
|
||
hovered: false,
|
||
description: '介绍商业综合体场景的内容介绍商业综合介绍商业综合体介绍，商业综合体介绍商业综合体体。介绍介绍商业综合体场景的内容介绍商业综合介绍商业综合体介绍，商业综合体介绍商业综合体体。'
|
||
},
|
||
{
|
||
image: appScene2,
|
||
companyName: '零碳园区',
|
||
title: '零碳园区',
|
||
hovered: false,
|
||
description: '通过应用清洁能源、提升能源利用效率、优化碳排放管理等技术手段，实现园区内碳排放总量抵消的现代化产业园区'
|
||
},
|
||
{
|
||
image: appScene4,
|
||
companyName: '绿色工厂',
|
||
title: '绿色工厂',
|
||
hovered: false,
|
||
description: '绿色工厂是绿色制造的实施主体，属于绿色制造体系的核心支撑单元，侧重于生产过程的绿色化。'
|
||
},
|
||
{
|
||
image: appScene5,
|
||
companyName: '智慧医院',
|
||
title: '智慧医院',
|
||
hovered: false,
|
||
description: '智慧医院是通过数字化技术与医疗场景深度融合，构建的全流程智能化服务体系。它以数据互联互通为基础，结合人工智能、物联网、5G等技术，实现患者服务便捷化、诊疗流程精准化、医院管理精细化，是医疗行业未来发展的核心方向。'
|
||
}
|
||
])
|
||
|
||
|
||
|
||
|
||
// 滚动到下一屏
|
||
const scrollToNext = () => {
|
||
const nextScreen = document.querySelector('.second-screen')
|
||
if (nextScreen) {
|
||
window.scrollTo({
|
||
top: nextScreen.offsetTop,
|
||
behavior: 'smooth'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 初始化 Intersection Observer
|
||
const initIntersectionObserver = () => {
|
||
observer.value = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible')
|
||
}
|
||
})
|
||
}, {
|
||
threshold: 0.1
|
||
})
|
||
|
||
// 观察所有需要动画的元素
|
||
const animateElements = document.querySelectorAll('.animate-fade-in-up, .animate-slide-in')
|
||
animateElements.forEach(el => {
|
||
observer.value?.observe(el)
|
||
})
|
||
}
|
||
/******************应用场景-逻辑start******************* */
|
||
// 修改鼠标事件处理方法
|
||
const handleMouseEnter = (index: number) => {
|
||
carouselSeneceList.value[index].hovered = true
|
||
}
|
||
|
||
const handleMouseLeave = (index: number) => {
|
||
carouselSeneceList.value[index].hovered = false
|
||
}
|
||
const onSlideChange = (swiper: any) => {
|
||
progress.value = 0;
|
||
}
|
||
// 处理自动播放时间
|
||
const onAutoplayTimeLeft = (s: any, time: any, progressValue: any) => {
|
||
progress.value = (1 - progressValue) * 10;
|
||
swiperRef.value = s;
|
||
};
|
||
/*****************应用场景-逻辑start******************** */
|
||
onMounted(() => {
|
||
initIntersectionObserver()
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
if (observer.value) {
|
||
observer.value.disconnect()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import 'style/index.less';
|
||
</style> |