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

add:首页逻辑增加

Browse Source
This commit is contained in:
duyufeng
2025-09-18 11:19:24 +08:00
parent 86dc88abbc
commit 58a3a27a73
1 changed files with 170 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,33 +1,187 @@
<!-- 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>
</div>
<!-- 更多内容屏 -->
<div class="other-screens">
<div class="container">
<div class="news-section animate-fade-in-up">
<h2>最新动态</h2>
<a-list class="news-list" :data-source="newsList" :split="false">
<template #renderItem="{ item }">
<a-list-item>
<a-list-item-meta :description="item.date">
<template #title>
<a href="javascript:;">{{ item.title }}</a>
</template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
// 新闻数据
const newsList = ref([
{ title: '公司荣获绿色企业称号', date: '2023-10-15' },
{ title: '新项目启动，推动城市低碳发展', date: '2023-09-28' },
{ title: '参与国际环保技术交流会', date: '2023-09-12' },
{ title: '发布最新碳中和解决方案', date: '2023-08-30' }
])
const secondScreenRef = ref<HTMLElement | null>(null)
const observer = ref<IntersectionObserver | null>(null)
// 滚动到下一屏
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';
</style>