|
@@ -57,7 +57,7 @@
|
|
|
</section>
|
|
|
|
|
|
<!-- 产品优势 section -->
|
|
|
- <section class="advantages-section" ref="advantagesSection">
|
|
|
+ <section v-if="advantages.length > 0" class="advantages-section" ref="advantagesSection">
|
|
|
<div class="container">
|
|
|
<h2 class="section-title animate-fade-up" :class="{ 'animate-visible': isAdvantagesVisible }">产品优势</h2>
|
|
|
<img src="@assets/products-select.png" alt="" class="title-indicator animate-scale-in"
|
|
@@ -88,11 +88,6 @@ import { getProjectClassifyList, getProjectList } from '@/api/modules/home'
|
|
|
import productsBg01 from '@/assets/products-bg01.png'
|
|
|
import productsBg02 from '@/assets/products-bg02.png'
|
|
|
import productsYoushi01 from '@/assets/products-youshi-01.png'
|
|
|
-import productsYoushi02 from '@/assets/products-youshi-02.png'
|
|
|
-import productsYoushi03 from '@/assets/products-youshi-03.png'
|
|
|
-import productsYoushi04 from '@/assets/products-youshi-04.png'
|
|
|
-import productsYoushi05 from '@/assets/products-youshi-05.png'
|
|
|
-import productsYoushi06 from '@/assets/products-youshi-06.png'
|
|
|
|
|
|
export default {
|
|
|
name: 'ProductsPage',
|
|
@@ -121,39 +116,8 @@ export default {
|
|
|
// 产品列表数据
|
|
|
const productList = ref([])
|
|
|
|
|
|
- // 产品优势数据
|
|
|
- const advantages = ref([
|
|
|
- {
|
|
|
- title: '成本节约',
|
|
|
- description: '通过优化碳排放和碳资产配置,企业 可以在碳交易市场上卖出多余的碳排 放配额,实现成本节约。此外,提高 能效和采用清洁能源也有助于降低能 源成本。',
|
|
|
- image: productsYoushi01
|
|
|
- },
|
|
|
- {
|
|
|
- title: '市场竞争力提升',
|
|
|
- description: '积极管理碳资产的企业能够改善其 在绿色市场中的形象,吸引越来越 多注重可持续性的消费者和投资者, 从而提升市场竞争力。',
|
|
|
- image: productsYoushi02
|
|
|
- },
|
|
|
- {
|
|
|
- title: '详细合规与风险管理',
|
|
|
- description: '碳资产管理帮助企业准确监测和 报告碳排放,确保企业遵守相关 的环境法规和标准,降低因违反 碳排放规定而产生的法律和财务 风险。',
|
|
|
- image: productsYoushi03
|
|
|
- },
|
|
|
- {
|
|
|
- title: '技术创新与生产力提升',
|
|
|
- description: '碳资产管理促使企业投资于低碳技术和 能源效率改进,这些投资不仅有助于减 少碳排放,还能提高整体生产力和操作 效率。',
|
|
|
- image: productsYoushi04
|
|
|
- },
|
|
|
- {
|
|
|
- title: '长远战略规划',
|
|
|
- description: '碳资产管理有助于企业制定长期的碳 减排目标和策略,帮助企业在应对气 候变化的全球趋势中占据有利位置。 推动企业的可持续发展。',
|
|
|
- image: productsYoushi05
|
|
|
- },
|
|
|
- {
|
|
|
- title: '数据驱动决策支持',
|
|
|
- description: '碳资产管理平台提供的数据分析和报告功能, 能够帮助企业管理层做出更加明智的决策优 化资源分配,提高决策的数据驱动性。助力 企业制定长期的碳减排目标和策略。',
|
|
|
- image: productsYoushi06
|
|
|
- }
|
|
|
- ])
|
|
|
+ // 产品优势数据 - 从API获取
|
|
|
+ const advantages = ref([])
|
|
|
|
|
|
// 切换平台
|
|
|
const switchPlatform = async (index) => {
|
|
@@ -242,6 +206,24 @@ export default {
|
|
|
|
|
|
if (data && data.rows) {
|
|
|
productList.value = data.rows
|
|
|
+
|
|
|
+ // 更新产品优势数据
|
|
|
+ if (data.rows.length > 0 && data.rows[0].projectMeritList) {
|
|
|
+ advantages.value = data.rows[0].projectMeritList.map(merit => ({
|
|
|
+ title: merit.title,
|
|
|
+ description: merit.content,
|
|
|
+ image: merit.backImage ? imgHost + merit.backImage : productsYoushi01
|
|
|
+ }))
|
|
|
+
|
|
|
+ // 数据加载完成后,重新设置优势区域的观察器
|
|
|
+ nextTick(() => {
|
|
|
+ setupAdvantagesObserver()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ // 如果没有优势数据,清空数组
|
|
|
+ advantages.value = []
|
|
|
+ }
|
|
|
+
|
|
|
// 更新当前选中平台的信息
|
|
|
if (platforms.value[activePlatform.value] && data.rows.length > 0) {
|
|
|
// 更新subtitle为第一条数据的projectProfile
|
|
@@ -297,6 +279,26 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ // 单独设置优势区域观察器
|
|
|
+ const setupAdvantagesObserver = () => {
|
|
|
+ const observerOptions = {
|
|
|
+ threshold: 0.2,
|
|
|
+ rootMargin: '0px 0px -50px 0px'
|
|
|
+ }
|
|
|
+
|
|
|
+ const observer = new IntersectionObserver((entries) => {
|
|
|
+ entries.forEach(entry => {
|
|
|
+ if (entry.isIntersecting && entry.target.classList.contains('advantages-section')) {
|
|
|
+ isAdvantagesVisible.value = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, observerOptions)
|
|
|
+
|
|
|
+ if (advantagesSection.value) {
|
|
|
+ observer.observe(advantagesSection.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
handleGetProjectClassifyList1() // 获取产品分类列表
|
|
|
startAutoPlay()
|