zlcx/company-website
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: zlcx:86dc88abbc9a950f8ebd3edee1b9b2f79e261b60
Branches Tags
zlcx:main
...
compare: zlcx:3952cc2a3eef73453630d946af8ce04fa20cbb3d
Branches Tags
zlcx:main

2 Commits
86dc88abbc ... 3952cc2a3e

Author SHA1 Message Date
duyufeng
3952cc2a3e fix：新闻等内容增加 2025-09-18 16:13:42 +08:00
duyufeng
58a3a27a73 add:首页逻辑增加 2025-09-18 11:19:24 +08:00
1 changed files with 402 additions and 16 deletions
Expand all files Collapse all files

418
src/views/pc/index.vue
View File

@@ -1,33 +1,419 @@
<!-- src/views/News.vue -->
<!-- src/views/pc/index.vue -->
<template>
<div class="index-home">
啊哈哈哈哈我来了
<div class="content">
我是首页内容
<!-- 将轮播图放在内容区域或页脚区域 -->
<div class="pc-home">
<!-- 第一屏：全屏轮播 -->
<div class="first-screen">
<div class="carousel-wrapper">
<a-carousel autoplay :autoplay-speed="5000">
<div>
<video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_1.mp4" autoplay loop
muted playsinline style="width: 100%; height: auto;"></video>
<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>
<div class="carousel-item">
<video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_2.mp4" autoplay loop
muted playsinline style="width: 100%; height: auto;"></video>
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>
<div class="carousel-item">
<video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_3.mp4" autoplay loop
muted playsinline style="width: 100%; height: auto;"></video>
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">
<div class="carousel-container">
<div class="carousel-wrapper" ref="carouselWrapper">
<div v-for="(item, index) in carouselItems" :key="index" class="carousel-item"
:class="{ active: index === currentIndex }" @click="selectItem(index)">
<img :src="item.image" :alt="item.title" />
<div class="item-info" v-if="index === currentIndex">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</div>
</div>
</div>
</div>
</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>融合智能感知与认知计算，全面提升运营效率与决策智能化水平</p>
</div>
<!-- 横向滚动屏 -->
<div class="carousel-section">
<a-carousel arrows dots-class="slick-dots slick-thumb" class="tech-carousel">
<div v-for="(item, index) in carouselItems" :key="index" class="carousel-slide">
<div class="slide-content">
<img :src="item.image" :alt="item.title" />
<div class="item-info">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</div>
</div>
</div>
</a-carousel>
</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>
<div class="newslt">
<h4>12</h4>
<p>2025.09</p>
</div>
<div class="newsrt">
<h4>降本增效新引擎：AI如何实现能源的精细化管理与数智变革？</h4>
<p>在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...</p>
</div>
</li> -->
<!-- <li>
<div class="newslt">
<h4>10</h4>
<p>2025.09</p>
</div>
<div class="newsrt">
<h4>降本增效新引擎：AI如何实现能源的精细化管理与数智变革？</h4>
<p>在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...</p>
</div>
</li>
<li>
<div class="newslt">
<h4>15</h4>
<p>2025.09</p>
</div>
<div class="newsrt">
<h4>降本增效新引擎：AI如何实现能源的精细化管理与数智变革？</h4>
<p>在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...</p>
</div>
</li> -->
<li v-for="item in newsList" :key="item.id">
<div class="newslt">
<h4>{{ item.date.substring(8, 10) }}</h4>
<p>{{ item.date.substring(0, 8) }}</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 } from 'vue'
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
// 静态导入所有图片
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'
// 新闻数据
// 新闻数据
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)
/************************第三屏轮播图片*************************** */
// 轮播图数据
const carouselItems = ref([
{
image: carouse1,
title: '智能能源管理',
description: '通过AI技术实现能源使用优化'
},
{
image: carouse2,
title: '碳足迹追踪',
description: '全生命周期碳排放监控与分析'
},
{
image: carouse3,
title: '绿色工厂解决方案',
description: '工业4.0背景下的低碳生产模式'
},
{
image: carouse4,
title: '城市能源互联网',
description: '构建智慧城市的能源生态系统'
},
{
image: carouse5,
title: '可再生能源集成',
description: '风光储一体化解决方案'
}
])
const currentIndex = ref(0)
const carouselWrapper = ref(null)
// 选择图片
const selectItem = (index) => {
currentIndex.value = index
centerActiveItem()
}
// 居中显示当前选中项
const centerActiveItem = () => {
nextTick(() => {
if (carouselWrapper.value) {
const activeItem = carouselWrapper.value.querySelector('.carousel-item.active')
if (activeItem) {
const containerWidth = carouselWrapper.value.offsetWidth
const itemWidth = activeItem.offsetWidth
const itemLeft = activeItem.offsetLeft
const scrollLeft = itemLeft - (containerWidth - itemWidth) / 2
carouselWrapper.value.scrollTo({
left: scrollLeft,
behavior: 'smooth'
})
}
}
})
}
// 滚动到下一屏
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)
})
}
onMounted(() => {
initIntersectionObserver()
})
onBeforeUnmount(() => {
if (observer.value) {
observer.value.disconnect()
}
})
</script>
<style scoped></style>
<style lang="less" scoped>
@import 'style/index.less';
.tech-carousel {
:deep(.slick-slide) {
padding: 0 10px;
.slide-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
img {
width: 100%;
max-width: 300px;
height: auto;
border-radius: 8px;
}
.item-info {
margin-top: 20px;
h3 {
font-size: 18px;
margin-bottom: 10px;
}
p {
font-size: 14px;
color: #666;
}
}
}
}
}
</style>