237 lines
11 KiB
Vue
237 lines
11 KiB
Vue
<template>
|
||
<div class="news-view-page">
|
||
<div class="orb orb-1"></div>
|
||
<div class="orb orb-2"></div>
|
||
<div class="orb orb-3"></div>
|
||
|
||
<section class="news-hero">
|
||
<div class="news-hero-glow news-hero-glow-1"></div>
|
||
<div class="news-hero-glow news-hero-glow-2"></div>
|
||
<div class="news-shell">
|
||
<div class="hero-content">
|
||
<span class="hero-badge">COMPANY NEWS</span>
|
||
<div class="hero-title-row">
|
||
<h1>企业动态</h1>
|
||
<button type="button" class="about-link" @click="goAbout">关于我们 →</button>
|
||
</div>
|
||
<p>了解开元云最新动态，把握AI行业前沿资讯，与我们一起见证智能跃迁</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="filter-section">
|
||
<div class="news-shell">
|
||
<div class="filter-tabs">
|
||
<button
|
||
v-for="item in filterTabs"
|
||
:key="item.value"
|
||
type="button"
|
||
class="filter-tab"
|
||
:class="{ active: activeCategory === item.value }"
|
||
@click="activeCategory = item.value"
|
||
>
|
||
{{ item.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="featured-section">
|
||
<div class="news-shell">
|
||
<article v-if="featuredNews" class="news-featured">
|
||
<div class="news-item-glow"></div>
|
||
<span class="hover-detail">详情 <i class="el-icon-arrow-right"></i></span>
|
||
<div class="news-featured-inner">
|
||
<div class="news-featured-img">
|
||
<img :src="featuredNews.img || fallbackNewsImage" :alt="featuredNews.title">
|
||
</div>
|
||
<div class="news-featured-body">
|
||
<div class="news-featured-date">
|
||
<span class="category-pill" :style="{ background: featuredNews.tagColor }">{{ featuredNews.tag }}</span>
|
||
{{ featuredNews.date }}
|
||
</div>
|
||
<h2>{{ featuredNews.title }}</h2>
|
||
<p>{{ featuredNews.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="news-list-section">
|
||
<div class="news-shell">
|
||
<div class="news-grid">
|
||
<article
|
||
v-for="(item, index) in filteredNewsList"
|
||
:key="item.id"
|
||
class="news-item"
|
||
:style="{ animationDelay: `${(index + 1) * 0.08}s` }"
|
||
>
|
||
<div class="news-item-glow"></div>
|
||
<span class="hover-detail">详情 <i class="el-icon-arrow-right"></i></span>
|
||
<div class="news-item-img">
|
||
<img :src="item.img || fallbackNewsImage" :alt="item.title">
|
||
<div class="news-item-img-overlay"></div>
|
||
<span class="news-item-tag" :style="{ background: item.tagColor }">{{ item.tag }}</span>
|
||
</div>
|
||
<div class="news-item-body">
|
||
<div class="news-item-date">{{ item.date }}</div>
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.desc }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="pagination">
|
||
<button type="button" class="pagination-btn"><i class="el-icon-arrow-left"></i></button>
|
||
<button type="button" class="pagination-btn active">1</button>
|
||
<button type="button" class="pagination-btn">2</button>
|
||
<button type="button" class="pagination-btn">3</button>
|
||
<button type="button" class="pagination-btn"><i class="el-icon-arrow-right"></i></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'NewsView',
|
||
data() {
|
||
return {
|
||
fallbackNewsImage: require('@/assets/image/news.jpg'),
|
||
activeCategory: 'all',
|
||
filterTabs: [
|
||
{ label: '全部', value: 'all' },
|
||
{ label: '企业动态', value: 'company' },
|
||
{ label: '产品动态', value: 'product' },
|
||
{ label: '行业洞察', value: 'industry' },
|
||
{ label: '活动资讯', value: 'event' }
|
||
],
|
||
newsList: [
|
||
{
|
||
id: 0,
|
||
category: 'company',
|
||
tag: '企业动态',
|
||
tagColor: 'rgba(16,185,129,0.85)',
|
||
date: '2026.6.15',
|
||
title: '开元云随贸促会走访东盟',
|
||
desc: '开元云科技随贸促会广西分会经贸代表团密集出访越南、老挝，深度参与中国-东盟经贸合作，以AI技术赋能区域产业升级，推动智能体工厂落地东南亚市场。',
|
||
img: '',
|
||
featured: true,
|
||
content: '<p>开元云科技随贸促会广西分会经贸代表团密集出访越南、老挝，深度参与中国-东盟经贸合作。</p><p>在此次出访中，开元云向东南亚市场全面展示了AI智能体工厂的工业级交付能力，涵盖智慧工程、智能运维、能源管理等多个核心领域的技术方案。</p><p>此次东盟之行标志着开元云正式开启东南亚市场战略布局，未来将持续深化与东盟各国在AI领域的合作，以技术赋能区域产业升级。</p>'
|
||
},
|
||
{
|
||
id: 1,
|
||
category: 'company',
|
||
tag: '企业动态',
|
||
tagColor: 'rgba(16,185,129,0.85)',
|
||
date: '2026.05.17',
|
||
title: '开元云荣登福布斯中国人工智能商业落地示范企业',
|
||
desc: '凭借AI智能体工厂的工业级交付能力与央国企标杆案例，开元云入选福布斯中国人工智能商业落地示范企业，成为行业AI落地标杆。',
|
||
content: '<p>凭借AI智能体工厂的工业级交付能力与央国企标杆案例，开元云入选福布斯中国人工智能商业落地示范企业。</p><p>此次评选从技术实力、商业落地、行业影响力等多维度综合评估，开元云凭借智能体工厂产品创新力成功跻身示范企业榜单。</p>'
|
||
},
|
||
{
|
||
id: 2,
|
||
category: 'product',
|
||
tag: '产品动态',
|
||
tagColor: 'rgba(99,102,241,0.85)',
|
||
date: '2026.05.10',
|
||
title: '智能体工厂2.0正式发布，全面升级AI交付能力',
|
||
desc: '开元云智能体工厂2.0版本重磅上线，新增多智能体协同编排、可视化工作流设计等核心功能，AI应用交付效率提升300%。',
|
||
content: '<p>开元云智能体工厂2.0版本重磅上线，新增多智能体协同编排、可视化工作流设计等核心功能。</p><p>2.0版本支持复杂业务场景的智能体协作、拖拽式工作流构建和增强的文档智能处理能力。</p>'
|
||
},
|
||
{
|
||
id: 3,
|
||
category: 'industry',
|
||
tag: '行业洞察',
|
||
tagColor: 'rgba(13,148,136,0.85)',
|
||
date: '2026.04.28',
|
||
title: '2026年AI+能源行业趋势：从预测性维护到智能调度',
|
||
desc: 'AI技术正在重塑能源行业，从发电设备的预测性维护到电网智能调度，开元云深度解析行业变革趋势与落地实践。',
|
||
content: '<p>AI技术正在重塑能源行业，从发电设备的预测性维护到电网智能调度，行业正在进入智能化深水区。</p><p>基于机器视觉和传感器数据融合的预测性维护方案已在火电、风电领域广泛应用。</p>'
|
||
},
|
||
{
|
||
id: 4,
|
||
category: 'event',
|
||
tag: '活动资讯',
|
||
tagColor: 'rgba(245,158,11,0.85)',
|
||
date: '2026.04.15',
|
||
title: '开元云亮相2026中国人工智能大会',
|
||
desc: '开元云受邀出席2026中国人工智能大会，现场展示智能体工厂最新技术成果，与行业领袖共话AI产业化新路径。',
|
||
content: '<p>开元云受邀出席2026中国人工智能大会，现场展示智能体工厂最新技术成果。</p><p>在大会主论坛上，开元云系统阐述了AI技术从实验创新到工业级交付的方法论。</p>'
|
||
},
|
||
{
|
||
id: 5,
|
||
category: 'company',
|
||
tag: '企业动态',
|
||
tagColor: 'rgba(16,185,129,0.85)',
|
||
date: '2026.03.22',
|
||
title: '开元云与南宁林业局达成智慧林业战略合作',
|
||
desc: '开元云携手南宁林业局打造林业空间采伐智审系统，融合GIS空间分析、卫星遥感等多源数据，审批周期从数天压缩至分钟级。',
|
||
img: '',
|
||
content: '<p>开元云携手南宁林业局打造林业空间采伐智审系统，融合GIS空间分析、卫星遥感等多源数据。</p><p>项目上线后，采伐审批效率显著提升，成为智慧林业标杆案例。</p>'
|
||
},
|
||
{
|
||
id: 6,
|
||
category: 'product',
|
||
tag: '产品动态',
|
||
tagColor: 'rgba(236,72,153,0.85)',
|
||
date: '2026.03.08',
|
||
title: '机器视觉检测平台升级，支持工业质检全场景覆盖',
|
||
desc: '开元云机器视觉检测平台全面升级，新增缺陷分类、尺寸测量、表面检测三大能力模块，覆盖制造业全场景质检需求。',
|
||
content: '<p>开元云机器视觉检测平台全面升级，新增缺陷分类、尺寸测量、表面检测三大能力模块。</p><p>该平台已在汽车零部件、3C电子、半导体封装等行业完成部署。</p>'
|
||
},
|
||
{
|
||
id: 7,
|
||
category: 'industry',
|
||
tag: '行业洞察',
|
||
tagColor: 'rgba(37,99,235,0.85)',
|
||
date: '2026.02.20',
|
||
title: 'AI+教育：大模型如何重构个性化学习路径',
|
||
desc: '从知识图谱构建到学习路径智能推荐，大模型正在从根本上改变教育模式。开元云分享AI+教育的最新落地实践与思考。',
|
||
content: '<p>从知识图谱构建到学习路径智能推荐，大模型正在从根本上改变教育模式。</p><p>基于大模型的自适应学习系统可以实时评估学习者知识掌握程度，动态调整学习路径。</p>'
|
||
},
|
||
{
|
||
id: 8,
|
||
category: 'event',
|
||
tag: '活动资讯',
|
||
tagColor: 'rgba(124,58,237,0.85)',
|
||
date: '2026.02.05',
|
||
title: '开元云荣获2025年度AI创新企业TOP50',
|
||
desc: '在2025年度人工智能创新企业评选中，开元云凭借卓越的技术创新能力和丰富的行业落地经验，成功入选AI创新企业TOP50。',
|
||
content: '<p>在2025年度人工智能创新企业评选中，开元云凭借卓越的技术创新能力和丰富的行业落地经验成功入选。</p>'
|
||
},
|
||
{
|
||
id: 9,
|
||
category: 'company',
|
||
tag: '企业动态',
|
||
tagColor: 'rgba(234,88,12,0.85)',
|
||
date: '2026.01.18',
|
||
title: '开元云完成B轮融资，加速AI智能体产业布局',
|
||
desc: '开元云科技宣布完成B轮融资，融资金额将用于加速AI智能体工厂产品研发、行业解决方案深化及海外市场拓展。',
|
||
content: '<p>开元云科技宣布完成B轮融资，融资金额将用于加速AI智能体工厂产品研发、行业解决方案深化及海外市场拓展。</p>'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
featuredNews() {
|
||
return this.newsList.find(item => item.featured)
|
||
},
|
||
filteredNewsList() {
|
||
return this.newsList.filter(item => !item.featured && (this.activeCategory === 'all' || item.category === this.activeCategory))
|
||
}
|
||
},
|
||
methods: {
|
||
goAbout() {
|
||
this.$router.push('/homePage/about')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import url('../../../assets/less/news/news.less');
|
||
</style>
|