feat: 二级页面

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,84 @@
+<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";
+
+type GridItem = {
+  id: string;
+  title: string;
+  desc: string;
+  bg: string;
+};
+
+const items: GridItem[] = [
+  {
+    id: "1",
+    title: "全局数据治理 (数据中台)",
+    desc: "企业数据驱动的核心基础设施",
+    bg: img1,
+  },
+  {
+    id: "2",
+    title: "智能决策",
+    desc: "利用数据驱动的方法来优化从油藏到输油管的整个生产价值链",
+    bg: img2,
+  },
+  {
+    id: "3",
+    title: "行业AI大模型",
+    desc: "针对油气勘探开发领域训练的垂直大模型，它将成为推动整个行业迈向智能化、自动化的核心引擎",
+    bg: img3,
+  },
+  {
+    id: "4",
+    title: "AI智能体 (智能交互)",
+    desc: "在行业AI大模型基础上构建的、具备感知、决策、执行和交互能力的智能实体",
+    bg: img1,
+  },
+];
+</script>
+
+<style scoped></style>

src/views/command.vue

@@ -0,0 +1,102 @@
+<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 img3 from "@/assets/images/3.jpg";
+
+type GridItem = {
+  id: string;
+  title: string;
+  desc: string;
+  bg: string;
+};
+
+const items: GridItem[] = [
+  {
+    id: "1",
+    title: "智能钻井系统",
+    desc: "基于传感器测量与计算机控制实现的无人化钻井系统",
+    bg: img1,
+  },
+  {
+    id: "2",
+    title: "智能压裂系统",
+    desc: "通过智能化、高效化和绿色化升级，实现了压裂作业的重大突破",
+    bg: img2,
+  },
+  {
+    id: "3",
+    title: "智能注气系统",
+    desc: "集成了物联网、大数据、人工智能和自动控制技术的综合性解决方案",
+    bg: img3,
+  },
+  {
+    id: "4",
+    title: "智能连油系统",
+    desc: "集成了先进传感器、实时数据传输、井下控制工具和智能决策软件的综合性技术平台",
+    bg: img1,
+  },
+  {
+    id: "5",
+    title: "QHSE (安全监控、应急指挥)",
+    desc: "现代智能系统则构建了一个 “感、传、知、用” 的智能体",
+    bg: img2,
+  },
+  {
+    id: "6",
+    title: "设备管理系统 (PMS)",
+    desc: "将信息化了设备技术信息与现代化管理相结合，是实现研究级管理信息化的先导",
+    bg: img3,
+  },
+  {
+    id: "7",
+    title: "项目管理 (PM)",
+    desc: "供应链全流程管理，优化库存和物流效率",
+    bg: img1,
+  },
+];
+</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,112 @@
+<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 img3 from "@/assets/images/3.jpg";
+
+type GridItem = {
+  id: string;
+  title: string;
+  desc: string;
+  bg: string;
+};
+
+const items: GridItem[] = [
+  {
+    id: "1",
+    title: "经营驾驶舱",
+    desc: "实时监控企业运营数据，提供全面的经营分析和决策支持",
+    bg: img1,
+  },
+  {
+    id: "2",
+    title: "战略解码与执行",
+    desc: "将战略目标分解为可执行的计划，确保战略落地实施",
+    bg: img2,
+  },
+  {
+    id: "3",
+    title: "财务管理",
+    desc: "收入、成本、应收账款等财务数据的全面管理与分析",
+    bg: img3,
+  },
+  {
+    id: "4",
+    title: "技术研发管理",
+    desc: "研发项目管理、进度跟踪、资源配置和成果管理",
+    bg: img1,
+  },
+  {
+    id: "5",
+    title: "客户管理(CRM)",
+    desc: "客户关系管理，提升客户满意度和业务转化率",
+    bg: img2,
+  },
+  {
+    id: "6",
+    title: "人力资源(EHR)",
+    desc: "员工信息管理、招聘、培训、绩效和薪酬管理",
+    bg: img3,
+  },
+  {
+    id: "7",
+    title: "供应链管理(SCM)",
+    desc: "供应链全流程管理，优化库存和物流效率",
+    bg: img1,
+  },
+  {
+    id: "8",
+    title: "组织资产管理",
+    desc: "企业资产全生命周期管理，提升资产利用率",
+    bg: img2,
+  },
+  {
+    id: "9",
+    title: "风控、合规管理",
+    desc: "风险识别、评估和控制，确保企业合规经营",
+    bg: img3,
+  },
+];
+</script>
+
+<style scoped></style>