README.md

@@ -1 +1,7 @@
 # kerui-portal
+
+# 0.0.1
+
+功能新增
+
+- 门户静态页面

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@iconify/iconify": "^3.1.1",
     "@iconify/vue": "^5.0.0",
+    "@kjgl77/datav-vue3": "^1.7.4",
     "axios": "^1.13.1",
     "element-plus": "^2.11.7",
     "pinia": "^3.0.3",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@iconify/vue':
         specifier: ^5.0.0
         version: 5.0.0(vue@3.5.22(typescript@5.9.3))
+      '@kjgl77/datav-vue3':
+        specifier: ^1.7.4
+        version: 1.7.4(vue@3.5.22(typescript@5.9.3))
       axios:
         specifier: ^1.13.1
         version: 1.13.1
@@ -62,7 +65,7 @@ importers:
         version: 5.9.3
       unplugin-auto-import:
         specifier: ^20.2.0
-        version: 20.2.0(@vueuse/core@9.13.0(vue@3.5.22(typescript@5.9.3)))
+        version: 20.2.0(@vueuse/core@10.11.1(vue@3.5.22(typescript@5.9.3)))
       unplugin-vue-components:
         specifier: ^30.0.0
         version: 30.0.0(@babel/parser@7.28.5)(vue@3.5.22(typescript@5.9.3))
@@ -206,6 +209,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -404,6 +411,21 @@ packages:
     peerDependencies:
       vue: '>=3'
 
+  '@jiaminghi/bezier-curve@0.0.9':
+    resolution: {integrity: sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==}
+
+  '@jiaminghi/c-render@0.4.3':
+    resolution: {integrity: sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==}
+
+  '@jiaminghi/charts@0.2.18':
+    resolution: {integrity: sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==}
+
+  '@jiaminghi/color@1.1.3':
+    resolution: {integrity: sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==}
+
+  '@jiaminghi/transition@1.1.11':
+    resolution: {integrity: sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -420,6 +442,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@kjgl77/datav-vue3@1.7.4':
+    resolution: {integrity: sha512-zYVTVKkklUxwtiNKS1qPBilm4rTW+WItfp0zVpaRAI8wgXkLSPbDR9xPq2+UcU/Jft7/DVdMfBp709E2ResuPQ==}
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -647,6 +672,9 @@ packages:
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@vitejs/plugin-vue@6.0.1':
     resolution: {integrity: sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -750,12 +778,21 @@ packages:
       vue:
         optional: true
 
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
@@ -1695,6 +1732,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/runtime@7.28.4': {}
+
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -1824,6 +1863,28 @@ snapshots:
       '@iconify/types': 2.0.0
       vue: 3.5.22(typescript@5.9.3)
 
+  '@jiaminghi/bezier-curve@0.0.9':
+    dependencies:
+      '@babel/runtime': 7.28.4
+
+  '@jiaminghi/c-render@0.4.3':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@jiaminghi/bezier-curve': 0.0.9
+      '@jiaminghi/color': 1.1.3
+      '@jiaminghi/transition': 1.1.11
+
+  '@jiaminghi/charts@0.2.18':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@jiaminghi/c-render': 0.4.3
+
+  '@jiaminghi/color@1.1.3': {}
+
+  '@jiaminghi/transition@1.1.11':
+    dependencies:
+      '@babel/runtime': 7.28.4
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -1843,6 +1904,16 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@kjgl77/datav-vue3@1.7.4(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@jiaminghi/c-render': 0.4.3
+      '@jiaminghi/charts': 0.2.18
+      '@jiaminghi/color': 1.1.3
+      '@vueuse/core': 10.11.1(vue@3.5.22(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@polka/url@1.0.0-next.29': {}
 
   '@rolldown/pluginutils@1.0.0-beta.29': {}
@@ -1999,6 +2070,8 @@ snapshots:
 
   '@types/web-bluetooth@0.0.16': {}
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@vitejs/plugin-vue@6.0.1(vite@7.1.12(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.2))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.29
@@ -2163,6 +2236,16 @@ snapshots:
       typescript: 5.9.3
       vue: 3.5.22(typescript@5.9.3)
 
+  '@vueuse/core@10.11.1(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.22(typescript@5.9.3))
+      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@9.13.0(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
@@ -2173,8 +2256,17 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/metadata@10.11.1': {}
+
   '@vueuse/metadata@9.13.0': {}
 
+  '@vueuse/shared@10.11.1(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/shared@9.13.0(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
@@ -2742,7 +2834,7 @@ snapshots:
       unplugin: 2.3.10
       unplugin-utils: 0.3.1
 
-  unplugin-auto-import@20.2.0(@vueuse/core@9.13.0(vue@3.5.22(typescript@5.9.3))):
+  unplugin-auto-import@20.2.0(@vueuse/core@10.11.1(vue@3.5.22(typescript@5.9.3))):
     dependencies:
       local-pkg: 1.1.2
       magic-string: 0.30.21
@@ -2751,7 +2843,7 @@ snapshots:
       unplugin: 2.3.10
       unplugin-utils: 0.3.1
     optionalDependencies:
-      '@vueuse/core': 9.13.0(vue@3.5.22(typescript@5.9.3))
+      '@vueuse/core': 10.11.1(vue@3.5.22(typescript@5.9.3))
 
   unplugin-utils@0.3.1:
     dependencies:

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>
+  <div class="overflow-x-hidden">
     <router-view></router-view>
   </div>
 </template>

src/assets/style/main.css

@@ -4,5 +4,6 @@
   body,
   #app {
     @apply w-screen h-screen;
+    overflow-x: hidden;
   }
 }

src/components/home/CardItem.vue

@@ -1,12 +1,15 @@
 <template>
-  <el-card shadow="hover" class="h-full">
+  <el-card shadow="hover" class="h-[850px] w-full min-w-0">
     <div
       class="relative overflow-hidden rounded-md mb-3 h-36 bg-cover bg-center"
       :style="{ backgroundImage: `url(${bg})` }"
     >
       <div class="absolute inset-0 bg-white/0"></div>
-      <div class="relative h-full flex items-center gap-3 px-4">
-        <div>
+      <div
+        class="relative h-full flex items-center gap-3 px-4 cursor-pointer"
+        @click="goDetail"
+      >
+        <div class="min-w-0 flex-1">
           <div class="text-[20px] font-bold text-[#0050b3]">{{ title }}</div>
           <div class="text-[#606266] text-sm mt-1 leading-snug">{{ desc }}</div>
         </div>
@@ -20,16 +23,16 @@
         :name="String(idx)"
         :title="i.label"
       >
-        <div class="text-[#606266]">{{ i.label }} 详细介绍占位文案。</div>
+        <div class="text-[#606266]">{{ i.label }}</div>
         <template #title>
-          <div class="flex items-center">
-            <span>{{ i.label }}</span>
+          <div class="flex items-center min-w-0 flex-1">
+            <span class="truncate">{{ i.label }}</span>
             <el-tag
               v-if="i.tag"
               size="small"
               type="danger"
               effect="dark"
-              class="ml-2"
+              class="ml-2 shrink-0"
               >{{ i.tag }}</el-tag
             >
           </div>
@@ -40,7 +43,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, getCurrentInstance, nextTick } from "vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 
 type Item = { label: string; tag?: "新" | "热" };
 
@@ -49,39 +55,63 @@ const props = defineProps<{
   desc: string;
   items: Item[];
   bg: string;
+  key: string;
+  id: string;
 }>();
 
 const activeNames = ref<string[]>([]);
 
-// 悬浮展开，移出收起（移动端仍可点击）
-onMounted(async () => {
-  await nextTick();
-  const root = (getCurrentInstance()?.proxy?.$el as HTMLElement) || null;
-  if (!root) return;
-  const headers = root.querySelectorAll(
-    ".el-collapse-item__header"
-  ) as NodeListOf<HTMLElement>;
-  const items = root.querySelectorAll(
-    ".el-collapse-item"
-  ) as NodeListOf<HTMLElement>;
-  headers.forEach((el, idx) => {
-    el.addEventListener("mouseenter", () => {
-      activeNames.value = [String(idx)];
-    });
-  });
-  items.forEach((el) => {
-    el.addEventListener("mouseleave", () => {
-      activeNames.value = [];
-    });
-  });
-});
+const goDetail = () => {
+  if (props.id === "management") {
+    router.push({ path: "/management" });
+  } else if (props.id === "command") {
+    router.push({ path: "/command" });
+  } else if (props.id === "chatbi") {
+    router.push({ path: "/chatbi" });
+  }
+};
 </script>
 
 <style scoped>
+:deep(.el-card) {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+:deep(.el-card__body) {
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+}
+
+:deep(.el-collapse) {
+  width: 100%;
+  min-width: 0;
+}
+
+:deep(.el-collapse-item) {
+  width: 100%;
+  min-width: 0;
+}
+
 :deep(.el-collapse-item) .el-collapse-item__header {
   padding: 10px 12px;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
 }
+
 :deep(.el-collapse-item) .el-collapse-item__wrap {
   padding: 0 12px 10px;
+  width: 100%;
+  min-width: 0;
+}
+
+:deep(.el-collapse-item__content) {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  word-wrap: break-word;
 }
 </style>

src/components/home/header.vue

@@ -1,13 +1,13 @@
 <template>
   <header
-    class="sticky top-0 z-100 bg-white border-b border-[#f0f2f5] shadow-sm"
+    class="fixed w-full top-0 z-100 bg-white border-b border-[#f0f2f5] shadow-sm"
   >
     <div
       class="max-w-[1200px] mx-auto flex items-center justify-between py-3 px-4"
     >
       <div class="flex items-center gap-2 cursor-pointer" @click="goHome">
-        <img :src="logo" alt="logo" class="w-9 h-9" />
-        <span class="font-semibold whitespace-nowrap text-[#0050b3]"
+        <img :src="logo" alt="logo" class="w-20 h-9" />
+        <span class="text-[#02409b] text-[20px] font-bold border-l-2 pl-1"
           >DeepOil</span
         >
       </div>

src/router/index.ts

@@ -5,6 +5,9 @@ import {
 } from "vue-router";
 
 import Home from "@/views/index.vue";
+import Management from "@/views/management.vue";
+import Command from "@/views/command.vue";
+import ChatBI from "@/views/chatbi.vue";
 
 const routes: RouteRecordRaw[] = [
   {
@@ -12,6 +15,21 @@ const routes: RouteRecordRaw[] = [
     name: "Home",
     component: Home,
   },
+  {
+    path: "/management",
+    name: "Management",
+    component: Management,
+  },
+  {
+    path: "/command",
+    name: "Command",
+    component: Command,
+  },
+  {
+    path: "/chatbi",
+    name: "ChatBI",
+    component: ChatBI,
+  },
 ];
 
 const router = createRouter({

src/types/cards.ts

@@ -0,0 +1,8 @@
+export type Card = {
+  key: string;
+  title: string;
+  desc: string;
+  bg: string;
+  items: Array<{ label: string; tag?: "新" | "热" }>;
+  id: string;
+};

src/views/chatbi.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="bg-white min-h-screen">
+    <Header />
+
+    <section class="max-w-[1200px] mx-auto mt-20 mb-8 px-4">
+      <div class="text-center mb-8">
+        <h2 class="text-[28px] font-bold text-[#0644a1]">Chat BI平台</h2>
+        <p class="mt-2 text-[#606266]">
+          工厂上云，高效协同，生产效率和产品质量提升
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div
+          v-for="item in items"
+          :key="item.id"
+          class="group relative overflow-hidden rounded-lg bg-white shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer"
+        >
+          <div class="relative h-48 overflow-hidden">
+            <div
+              class="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-110"
+              :style="{ backgroundImage: `url(${item.bg})` }"
+            >
+              <div
+                class="absolute inset-0 bg-gradient-to-t from-[#0050b3]/40 to-[#0050b3]/10 group-hover:from-[#0050b3]/50 group-hover:to-[#0050b3]/20 transition-colors duration-300"
+              ></div>
+            </div>
+          </div>
+          <div class="p-4">
+            <h3 class="text-lg font-semibold text-[#1f2d3d] mb-2">
+              {{ item.title }}
+            </h3>
+            <p class="text-sm text-[#606266] leading-relaxed">
+              {{ item.desc }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from "@components/home/header.vue";
+import img1 from "@/assets/images/1.jpg";
+import img2 from "@/assets/images/2.jpg";
+import img3 from "@/assets/images/3.jpg";
+import agent from "@/assets/images/agent.png";
+import model from "@/assets/images/model.jpeg";
+import data from "@/assets/images/data.png";
+
+type GridItem = {
+  id: string;
+  title: string;
+  desc: string;
+  bg: string;
+};
+
+const items: GridItem[] = [
+  {
+    id: "1",
+    title: "全局数据治理 (数据中台)",
+    desc: "企业数据驱动的核心基础设施",
+    bg: data,
+  },
+  {
+    id: "2",
+    title: "智能决策",
+    desc: "利用数据驱动的方法来优化从油藏到输油管的整个生产价值链",
+    bg: img2,
+  },
+  {
+    id: "3",
+    title: "行业AI大模型",
+    desc: "针对油气勘探开发领域训练的垂直大模型，它将成为推动整个行业迈向智能化、自动化的核心引擎",
+    bg: model,
+  },
+  {
+    id: "4",
+    title: "AI智能体 (智能交互)",
+    desc: "在行业AI大模型基础上构建的、具备感知、决策、执行和交互能力的智能实体",
+    bg: agent,
+  },
+];
+</script>
+
+<style scoped></style>

src/views/command.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="bg-white min-h-screen">
+    <Header />
+
+    <section class="max-w-[1200px] mx-auto mt-20 mb-8 px-4">
+      <div class="text-center mb-8">
+        <h2 class="text-[28px] font-bold text-[#0644a1]">生产指挥平台</h2>
+        <p class="mt-2 text-[#606266]">
+          深入工业场景，为中小企业数字化升级赋能
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div
+          v-for="item in items"
+          :key="item.id"
+          class="group relative overflow-hidden rounded-lg bg-white shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer"
+        >
+          <div class="relative h-48 overflow-hidden">
+            <div
+              class="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-110"
+              :style="{ backgroundImage: `url(${item.bg})` }"
+            >
+              <div
+                class="absolute inset-0 bg-gradient-to-t from-[#0050b3]/40 to-[#0050b3]/10 group-hover:from-[#0050b3]/50 group-hover:to-[#0050b3]/20 transition-colors duration-300"
+              ></div>
+            </div>
+          </div>
+          <div class="p-4">
+            <h3 class="text-lg font-semibold text-[#1f2d3d] mb-2">
+              {{ item.title }}
+            </h3>
+            <p class="text-sm text-[#606266] leading-relaxed">
+              {{ item.desc }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from "@components/home/header.vue";
+import zuanjing from "@/assets/images/zuanjing.png";
+import yalie from "@/assets/images/yalie.png";
+import pm from "@/assets/images/pm.png";
+import pms from "@/assets/images/pms.webp";
+import qhse from "@/assets/images/qhse.jpg";
+import lianyou from "@/assets/images/lianyou.png";
+import zhuqi from "@/assets/images/zhuqi.png";
+
+type GridItem = {
+  id: string;
+  title: string;
+  desc: string;
+  bg: string;
+};
+
+const items: GridItem[] = [
+  {
+    id: "1",
+    title: "智能钻井系统",
+    desc: "基于传感器测量与计算机控制实现的无人化钻井系统",
+    bg: zuanjing,
+  },
+  {
+    id: "2",
+    title: "智能压裂系统",
+    desc: "通过智能化、高效化和绿色化升级，实现了压裂作业的重大突破",
+    bg: yalie,
+  },
+  {
+    id: "3",
+    title: "智能注气系统",
+    desc: "集成了物联网、大数据、人工智能和自动控制技术的综合性解决方案",
+    bg: zhuqi,
+  },
+  {
+    id: "4",
+    title: "智能连油系统",
+    desc: "集成了先进传感器、实时数据传输、井下控制工具和智能决策软件的综合性技术平台",
+    bg: lianyou,
+  },
+  {
+    id: "5",
+    title: "QHSE (安全监控、应急指挥)",
+    desc: "现代智能系统则构建了一个 “感、传、知、用” 的智能体",
+    bg: qhse,
+  },
+  {
+    id: "6",
+    title: "设备管理系统 (PMS)",
+    desc: "将信息化了设备技术信息与现代化管理相结合，是实现研究级管理信息化的先导",
+    bg: pms,
+  },
+  {
+    id: "7",
+    title: "项目管理 (PM)",
+    desc: "供应链全流程管理，优化库存和物流效率",
+    bg: pm,
+  },
+];
+</script>
+
+<style scoped></style>

src/views/index.vue

@@ -2,21 +2,18 @@
   <div class="bg-white">
     <Header />
 
-    <section class="max-w-[1200px] mx-auto mt-6 mb-2 px-4 text-center">
-      <h2 class="text-[28px] font-bold text-[#1f2d3d]">
-        提供多维度、更可靠的数字化服务
-      </h2>
-      <p class="mt-2 text-[#606266]">
-        围绕企业设备、场景、工厂、园区与政企服务提供一体化解决方案
-      </p>
+    <section class="max-w-[1200px] mx-auto mt-20 mb-2 px-4 text-center">
+      <h2 class="text-[28px] font-bold text-[#0644a1]">DeepOil智慧经营平台</h2>
+      <p class="mt-2 text-[#606266]">提供多维度、更可靠的数字化服务</p>
     </section>
 
-    <section class="max-w-[1200px] mx-auto px-4 mb-8 mt-5">
+    <section class="max-w-[1200px] mx-auto px-2 mb-8 mt-5">
       <div class="grid gap-5 grid-cols-1 md:grid-cols-3 xl:grid-cols-3">
         <CardItem
           v-for="card in cards"
           :key="card.key"
           :title="card.title"
+          :id="card.id"
           :desc="card.desc"
           :items="card.items"
           :bg="card.bg"
@@ -32,47 +29,54 @@ import CardItem from "@components/home/CardItem.vue";
 import img1 from "@/assets/images/1.jpg";
 import img2 from "@/assets/images/2.jpg";
 import img3 from "@/assets/images/3.jpg";
-
-type Card = {
-  key: string;
-  title: string;
-  desc: string;
-  bg: string;
-  items: Array<{ label: string; tag?: "新" | "热" }>;
-};
+import { type Card } from "@types/cards";
 
 const cards: Card[] = [
   {
     key: "device",
     title: "经营管理平台",
     desc: "通过设备物联，实时掌握车间动态信息",
+    id: "management",
     bg: img1,
     items: [
-      { label: "设备智能管理解决方案", tag: "新" },
-      { label: "家电智能控制解决方案" },
-      { label: "孪生制造一体化平台" },
+      { label: "经营驾驶舱", tag: "新" },
+      { label: "战略解码与执行" },
+      { label: "财务管理(收入、成本、应收账款)" },
+      { label: "技术研发管理" },
+      { label: "客户管理(CRM)" },
+      { label: "人力资源(EHR)" },
+      { label: "供应链管理(SCM)" },
+      { label: "组织资产管理" },
+      { label: "风控、合规管理" },
     ],
   },
   {
     key: "scene",
     title: "生产指挥平台",
     desc: "深入工业场景，为中小企业数字化升级赋能",
+    id: "command",
     bg: img2,
     items: [
-      { label: "机器视觉表面缺陷检测系统", tag: "热" },
-      { label: "纺织服装大规模定制解决方案" },
-      { label: "双碳场景" },
+      { label: "智能钻井系统", tag: "热" },
+      { label: "智能压裂系统" },
+      { label: "智能注气系统" },
+      { label: "智能连油系统" },
+      { label: "QHSE (安全监控、应急指挥)" },
+      { label: "设备管理系统 (PMS)" },
+      { label: "项目管理 (PM)" },
     ],
   },
   {
     key: "factory",
     title: "Chat BI平台",
     desc: "工厂上云，高效协同，生产效率和产品质量提升",
+    id: "chatbi",
     bg: img3,
     items: [
-      { label: "工业智慧仓储解决方案", tag: "热" },
-      { label: "电子行业智能制造执行系统" },
-      { label: "PCBA行业数字化工厂解决方案", tag: "新" },
+      { label: "全局数据治理 (数据中台)", tag: "热" },
+      { label: "智能决策" },
+      { label: "行业AI大模型", tag: "新" },
+      { label: "AI智能体 (智能交互)", tag: "新" },
     ],
   },
 ];

src/views/management.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="bg-white min-h-screen">
+    <Header />
+
+    <section class="max-w-[1200px] mx-auto mt-20 mb-8 px-4">
+      <div class="text-center mb-8">
+        <h2 class="text-[28px] font-bold text-[#0644a1]">经营管理平台</h2>
+        <p class="mt-2 text-[#606266]">通过设备物联，实时掌握车间动态信息</p>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div
+          v-for="item in items"
+          :key="item.id"
+          class="group relative overflow-hidden rounded-lg bg-white shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer"
+        >
+          <div class="relative h-48 overflow-hidden">
+            <div
+              class="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-110"
+              :style="{ backgroundImage: `url(${item.bg})` }"
+            >
+              <div
+                class="absolute inset-0 bg-gradient-to-t from-[#0050b3]/40 to-[#0050b3]/10 group-hover:from-[#0050b3]/50 group-hover:to-[#0050b3]/20 transition-colors duration-300"
+              ></div>
+            </div>
+          </div>
+          <div class="p-4">
+            <h3 class="text-lg font-semibold text-[#1f2d3d] mb-2">
+              {{ item.title }}
+            </h3>
+            <p class="text-sm text-[#606266] leading-relaxed">
+              {{ item.desc }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from "@components/home/header.vue";
+import img1 from "@/assets/images/1.jpg";
+import img2 from "@/assets/images/2.jpg";
+import ehr from "@/assets/images/ehr.png";
+import crm from "@/assets/images/crm.png";
+import scm from "@/assets/images/srm.png";
+import money from "@/assets/images/money.png";
+import caiwu from "@/assets/images/caiwu.png";
+import technology from "@/assets/images/jishu.png";
+import guifan from "@/assets/images/guifan.png";
+import drive from "@/assets/images/drive.png";
+
+type GridItem = {
+  id: string;
+  title: string;
+  desc: string;
+  bg: string;
+};
+
+const items: GridItem[] = [
+  {
+    id: "1",
+    title: "经营驾驶舱",
+    desc: "实时监控企业运营数据，提供全面的经营分析和决策支持",
+    bg: drive,
+  },
+  {
+    id: "2",
+    title: "战略解码与执行",
+    desc: "将战略目标分解为可执行的计划，确保战略落地实施",
+    bg: img2,
+  },
+  {
+    id: "3",
+    title: "财务管理",
+    desc: "收入、成本、应收账款等财务数据的全面管理与分析",
+    bg: caiwu,
+  },
+  {
+    id: "4",
+    title: "技术研发管理",
+    desc: "研发项目管理、进度跟踪、资源配置和成果管理",
+    bg: technology,
+  },
+  {
+    id: "5",
+    title: "客户管理(CRM)",
+    desc: "客户关系管理，提升客户满意度和业务转化率",
+    bg: crm,
+  },
+  {
+    id: "6",
+    title: "人力资源(EHR)",
+    desc: "员工信息管理、招聘、培训、绩效和薪酬管理",
+    bg: ehr,
+  },
+  {
+    id: "7",
+    title: "供应链管理(SCM)",
+    desc: "供应链全流程管理，优化库存和物流效率",
+    bg: scm,
+  },
+  {
+    id: "8",
+    title: "组织资产管理",
+    desc: "企业资产全生命周期管理，提升资产利用率",
+    bg: money,
+  },
+  {
+    id: "9",
+    title: "风控、合规管理",
+    desc: "风险识别、评估和控制，确保企业合规经营",
+    bg: guifan,
+  },
+];
+</script>
+
+<style scoped></style>