fix：新闻等内容增加
This commit is contained in:
duyufeng
@@ -101,25 +101,143 @@
|
|||||||
<!-- 第三屏：AI+智能节能技术 -->
|
<!-- 第三屏：AI+智能节能技术 -->
|
||||||
<div class="three-screen" ref="threeScreenRef">
|
<div class="three-screen" ref="threeScreenRef">
|
||||||
<div class="container">
|
<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>
|
</div>
|
||||||
<!-- 更多内容屏 -->
|
<div class="partnerImgAll animate-fade-in-up">
|
||||||
|
<img src="../../assets/images/partercomp.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--第六屏 新闻资讯 -->
|
||||||
<div class="other-screens">
|
<div class="other-screens">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="news-section animate-fade-in-up">
|
<div class="content-section animate-fade-in-up">
|
||||||
<h2>最新动态</h2>
|
<h2>
|
||||||
<a-list class="news-list" :data-source="newsList" :split="false">
|
<img src="./../../assets/images/point.png" />
|
||||||
<template #renderItem="{ item }">
|
<span>新闻资讯</span>
|
||||||
<a-list-item>
|
</h2>
|
||||||
<a-list-item-meta :description="item.date">
|
<p class="desc">了解最新行业资讯 把握市场最新动向</p>
|
||||||
<template #title>
|
<div class="content">
|
||||||
<a href="javascript:;">{{ item.title }}</a>
|
<div class="lt">
|
||||||
</template>
|
<div class="img"><img src="./../../assets/images/news.png" /></div>
|
||||||
</a-list-item-meta>
|
<p class="title">降本增效新引擎：AI如何实现能源的精细化管理与数智变革？</p>
|
||||||
</a-list-item>
|
<p class="nr">在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...</p>
|
||||||
</template>
|
</div>
|
||||||
</a-list>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
@@ -127,19 +245,99 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||||
import { DownOutlined } from '@ant-design/icons-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([
|
const newsList = ref([
|
||||||
{ title: '公司荣获绿色企业称号', date: '2023-10-15' },
|
{
|
||||||
{ title: '新项目启动，推动城市低碳发展', date: '2023-09-28' },
|
id: 1,
|
||||||
{ title: '参与国际环保技术交流会', date: '2023-09-12' },
|
date: '2025-09-01',
|
||||||
{ title: '发布最新碳中和解决方案', date: '2023-08-30' }
|
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 secondScreenRef = ref<HTMLElement | null>(null)
|
||||||
const observer = ref<IntersectionObserver | 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 scrollToNext = () => {
|
||||||
@@ -184,4 +382,38 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import 'style/index.less';
|
@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>
|
</style>
|
||||||
Reference in New Issue
Block a user