ss

src/views/NewsView.vue

@@ -1,31 +1,90 @@
 <script setup>
 import PageHero from "../components/PageHero.vue";
 import Reveal from "../components/motion/Reveal.vue";
+import xin1 from "../assets/images/xin1.png";
+import xin2 from "../assets/images/xin2.png";
+import afterSalesUrl from "../assets/images/h8.png?url";
+import news1 from "../assets/images/news1.jpg?url";
+import news3 from "../assets/images/news3.png?url";
+import news4 from "../assets/images/news4.png?url";
+import { useRouter } from "vue-router";
+const router = useRouter();
 
 const items = [
   {
-    date: "2026-02-12",
+    date: "2026-03-12",
     tag: "发布",
-    title: "工业互联网门户新版上线",
-    desc: "统一导航、产品矩阵与行业方案展示，增强案例与新闻聚合能力。",
+    title: "强强联合 数智赋能｜科瑞石油技术与帆软软件正式签署战略合作协议",
+    desc: "",
+    cover: xin1,
+    type: "featured", // 上部大图新闻
+    link: "/news/4",
   },
   {
-    date: "2026-01-28",
+    date: "2026-03-16",
     tag: "活动",
-    title: "工业数据治理专题沙龙报名启动",
-    desc: "围绕资产目录、指标口径与数据质量治理，分享落地方法与实践。",
+    title: "科瑞石油技术邀您相聚EGYPES2026埃及石油展",
+    desc: "",
+    cover: xin2,
+    type: "featured", // 上部大图新闻
+    link: "/news/5",
   },
   {
-    date: "2026-01-10",
+    date: "2026-01-06",
     tag: "更新",
-    title: "设备接入能力升级：新增边缘缓存与多协议适配",
-    desc: "提升现场环境稳定性，支持断点续传与离线数据补传。",
+    title: "夯实数字新基座：科瑞石油技术DeepOil平台获市级工业互联网平台认证",
+    desc: "DeepOil平台的核心价值，在于为复杂的工业现场构建了统一、稳定、安全的数据桥梁。",
+    cover: xin2,
+    type: "list", // 下部列表新闻
+    link: "/news/6",
   },
   {
-    date: "2025-12-20",
+    date: "2025-2-03",
     tag: "案例",
-    title: "从采集到指标：制造企业数据治理全链路实践",
-    desc: "以“口径统一 + 质量可控”为目标，推动数据资产规模化生产。",
+    title: "连油突破区域壁垒，喜迎开门红。",
+    desc: "成功实现拓展海洋项目的重要节点，巩固了原有海上市场。",
+    cover: afterSalesUrl,
+    type: "list", // 下部列表新闻
+    link: "/news/7",
+  },
+  {
+    title: "设备管理系统赋能资产全生命周期管理：从采购到报废的闭环落地",
+    desc: "设备从“采购入库”到“报废处置”的每一步都可控、可追溯。",
+    cover: news1,
+    link: "/news/1",
+  },
+  {
+    title: "AI 设备管理系统实现在线状态智能分析，隐患早发现",
+    desc: "推动工业智能化发展，助力企业创新转型。",
+    cover: news3,
+    link: "/news/2",
+  },
+  {
+    title: "设备维保 “凭感觉”？健康档案 + 动态保养，寿命延25%",
+    desc: "打造“人工智能+工业互联网”赋能制造业转型发展新范式",
+    cover: news4,
+    link: "/news/3",
+  },
+];
+
+const marketActivities = [
+  {
+    title: "设备管理系统赋能资产全生命周期管理：从采购到报废的闭环落地",
+    desc: "设备从“采购入库”到“报废处置”的每一步都可控、可追溯。",
+    cover: news1,
+    link: "/news/1",
+  },
+  {
+    title: "AI 设备管理系统实现在线状态智能分析，隐患早发现",
+    desc: "推动工业智能化发展，助力企业创新转型。",
+    cover: news3,
+    link: "/news/2",
+  },
+  {
+    title: "设备维保 “凭感觉”？健康档案 + 动态保养，寿命延25%",
+    desc: "打造“人工智能+工业互联网”赋能制造业转型发展新范式",
+    cover: news4,
+    link: "/news/3",
   },
 ];
 </script>
@@ -36,6 +95,7 @@ const items = [
 
     <section class="section">
       <div class="container">
+        <h4 style="padding-bottom: 20px">新闻动态</h4>
         <div class="grid newsGrid">
           <Reveal
             v-for="(n, idx) in items"
@@ -45,14 +105,59 @@ const items = [
             class="card card-pad newsItem hover-lift"
             :delay="60 + idx * 70"
           >
-            <div class="newsTop">
-              <span class="muted newsDate">{{ n.date }}</span>
+            <div class="newsCover">
+              <img
+                :src="n.cover"
+                :alt="n.title"
+                loading="lazy"
+                decoding="async"
+              />
+            </div>
+            <div class="newsContent">
+              <div class="newsTop">
+                <span class="muted newsDate">{{ n.date }}</span>
+                <span v-if="n.tag" class="newsTag">{{ n.tag }}</span>
+              </div>
+              <div class="newsTitle" @click="router.push(n.link)">
+                {{ n.title }}
+              </div>
+              <div v-if="n.desc" class="muted newsDesc">{{ n.desc }}</div>
+            </div>
+          </Reveal>
+        </div>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="container">
+        <h4 style="padding-bottom: 20px">行业知识</h4>
+        <div class="grid newsGrid">
+          <Reveal
+            v-for="(n, idx) in marketActivities"
+            :key="n.title"
+            as="div"
+            style="border: none"
+            class="card card-pad newsItem hover-lift"
+            :delay="60 + idx * 70"
+          >
+            <div class="newsCover">
+              <img
+                :src="n.cover"
+                :alt="n.title"
+                loading="lazy"
+                decoding="async"
+              />
+            </div>
+            <div class="newsContent">
+              <div class="newsTop">
+                <span class="muted newsDate">{{ n.date }}</span>
+                <span v-if="n.tag" class="newsTag">{{ n.tag }}</span>
+              </div>
+              <div class="newsTitle" @click="router.push(n.link)">
+                {{ n.title }}
+              </div>
+              <div v-if="n.desc" class="muted newsDesc">{{ n.desc }}</div>
             </div>
-            <div class="newsTitle">{{ n.title }}</div>
-            <div class="muted">{{ n.desc }}</div>
-            <!-- <RouterLink class="btn btn-link newsMore" to="/contact"
-              >详情 <Icon icon="lucide:chevron-right" width="20" height="20"
-            /></RouterLink> -->
           </Reveal>
         </div>
       </div>
@@ -114,4 +219,94 @@ const items = [
   color: #fff;
   text-align: center;
 }
+
+.newsGrid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.newsItem {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0 !important;
+}
+
+.newsCover {
+  width: 100%;
+  height: 240px;
+  overflow: hidden;
+}
+
+.newsCover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.3s ease;
+}
+
+.newsItem:hover .newsCover img {
+  transform: scale(1.05);
+}
+
+.newsContent {
+  padding: 24px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.newsTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.newsDate {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.newsTag {
+  font-size: 12px;
+  padding: 4px 10px;
+  background: rgba(7, 102, 205, 0.1);
+  color: #0766cd;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.newsTitle {
+  letter-spacing: -0.02em;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.4;
+  color: rgba(2, 6, 23, 0.9);
+  transition: color 0.2s ease;
+}
+
+.newsTitle:hover {
+  color: #1d4ed8;
+}
+
+.newsDesc {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #666666;
+  margin-top: auto;
+}
+
+@media (max-width: 960px) {
+  .newsGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .newsCover {
+    height: 200px;
+  }
+}
 </style>