首页样式修改

src/components/home/CardItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="w-full min-w-0 relative">
+  <el-card class="w-full min-w-0 relative" style="border: 0">
     <div
       class="relative overflow-hidden rounded-md mb-3 h-36 bg-cover bg-center"
       :style="{ backgroundImage: `url(${bg})` }"
@@ -22,7 +22,7 @@
         <div
           v-for="(item, index) in items"
           :key="index"
-          class="relative bg-gray-50 rounded-lg p-3 text-center hover:bg-blue-50 hover:border-blue-200 border border-transparent transition-all duration-200 cursor-pointer group"
+          class="relative bg-gray-50 rounded-lg p-3 text-center cursor-pointer group transform transition-transform duration-200 hover:bg-blue-50 hover:scale-105 hover:shadow-lg"
           @mouseenter="showTooltip(index)"
           @mouseleave="hideTooltip"
           @click="handleView(item)"
@@ -30,11 +30,13 @@
           <div class="flex flex-col items-center">
             <!-- 功能图标占位符 -->
             <div
-              class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-2 mx-auto group-hover:bg-blue-200 transition-colors"
+              class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-2 mx-auto transition-colors"
             >
-              <span class="text-blue-600 font-bold text-lg">{{
-                item.label.substring(0, 2)
-              }}</span>
+              <img
+                :src="getIconByLabel(item.label)"
+                :alt="`${item.label} Logo`"
+                class="w-full h-full object-contain"
+              />
             </div>
 
             <!-- 功能名称 -->
@@ -45,7 +47,7 @@
             <!-- 标签 -->
             <span
               v-if="item.tag"
-              class="mt-1 text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-600"
+              class="mt-1 text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700"
             >
               {{ item.tag }}
             </span>
@@ -70,6 +72,30 @@ import { ssoLogin } from "@/api/user";
 import { useUserStore } from "@/stores/useUserStore";
 import { getAccessToken } from "@/utils/auth";
 
+// 导入所有图标
+import oaimage from "@/assets/images/oa.png";
+import crmimage from "@/assets/images/crm.png";
+import ehrimage from "@/assets/images/ehr.png";
+import scmimage from "@/assets/images/scm.png";
+import erpimage from "@/assets/images/erp.jpg"; // 财务管理系统
+import driveimage from "@/assets/images/drive.png"; // 经营驾驶舱
+import zhanlueimage from "@/assets/images/zhanlue.jpeg"; // 战略解码
+import jishuimage from "@/assets/images/jishu.jpeg"; // 技术研发管理
+import zuzhiimage from "@/assets/images/zuzhi.png"; // 组织资产管理
+import safeimage from "@/assets/images/safe.png"; // 安全合规管理
+import pmsimage from "@/assets/images/pms.jpeg"; // 设备管理
+import zhonghangimage from "@/assets/images/中航.png"; // 中航北斗
+import lianyouimage from "@/assets/images/lianyou.jpeg"; // 智能连油
+import qhseimage from "@/assets/images/qhse.jpeg"; // qhse
+import zuanjingimage from "@/assets/images/zuanjing.jpeg"; //智能钻井
+import yalieimage from "@/assets/images/yalie.png"; //智能压裂
+import zhuqiimage from "@/assets/images/zhuqi.png"; //智能注气
+import pmimage from "@/assets/images/pm.png"; // 项目管理
+import dataimage from "@/assets/images/data.png"; // 全局数据治理
+import thinkimage from "@/assets/images/think.png"; // 智能决策
+import aiimage from "@/assets/images/ai.png"; // AI大模型
+import agentimage from "@/assets/images/agent.jpeg"; // ai智能体
+
 const userStore = useUserStore();
 const router = useRouter();
 
@@ -95,6 +121,37 @@ const props = defineProps<{
   id: string;
 }>();
 
+// 创建图标映射表
+const iconMap: Record<string, string> = {
+  OA办公系统: oaimage,
+  经营驾驶舱: driveimage,
+  战略解码与执行: zhanlueimage,
+  "财务管理(收入、成本、应收账款)": erpimage,
+  技术研发管理: jishuimage,
+  "客户管理(CRM)": crmimage,
+  "人力资源(EHR)": ehrimage,
+  "供应链管理(SCM)": scmimage,
+  组织资产管理: zuzhiimage,
+  "风控、合规管理": safeimage,
+  中航北斗智慧管理系统: zhonghangimage,
+  智能钻井系统: zuanjingimage,
+  智能压裂系统: yalieimage,
+  智能注气系统: zhuqiimage,
+  智能连油系统: lianyouimage,
+  "QHSE (安全监控、应急指挥)": qhseimage,
+  "设备管理系统 (PMS)": pmsimage,
+  "项目管理 (PM)": pmimage,
+  "全局数据治理 (数据中台)": dataimage,
+  智能决策: thinkimage,
+  行业AI大模型: aiimage,
+  "AI智能体 (智能交互)": agentimage,
+};
+
+// 根据标签获取对应图标
+const getIconByLabel = (label: string) => {
+  return iconMap[label] || oaimage; // 默认返回oa图标，以防某些标签没有对应图标
+};
+
 const goDetail = () => {
   if (props.id === "management") {
     router.push({ path: "/management" });
@@ -200,11 +257,6 @@ const handleView = async (item: Item) => {
   padding: 0;
 }
 
-/* 九宫格项悬停效果 */
-.group:hover .text-gray-700 {
-  color: #02409b;
-}
-
 /* 弹出框向上淡入动画 */
 .tooltip-fade-enter-active {
   transition: all 0.3s ease;

src/components/home/Footer.vue

@@ -41,7 +41,7 @@
           <li>设备管理系统 (PMS)</li>
           <li>项目管理 (PM)</li>
           <li>Chat BI平台</li>
-          <li>经营管理平台</li>
+          <li>数字运营平台</li>
         </ul>
       </div>
 

src/router/index.ts

@@ -36,7 +36,7 @@ const routes: RouteRecordRaw[] = [
     name: "Management",
     component: Management,
     meta: {
-      title: "DeepOil 智慧经营平台 | 经营管理平台",
+      title: "DeepOil 智慧经营平台 | 数字运营平台",
     },
   },
   {

src/views/index.vue

@@ -71,6 +71,7 @@ import img3 from "@/assets/images/3.jpg";
 import bgVideo from "@/assets/bg.mp4";
 import bg2 from "@/assets/images/e4.png";
 import g1 from "@/assets/images/g1.png";
+import title from "@/assets/images/title.jpeg";
 
 type Card = {
   name: string;
@@ -84,7 +85,7 @@ const cardBgs = [bg2, g1, bg2];
 const cards: Card[] = [
   {
     name: "device",
-    title: "经营管理平台",
+    title: "数字运营平台",
     desc: "集成财务、研发、客户、人力等关键业务数据，为管理者提供全局态势感知和战略决策支持",
     id: "management",
     bg: img1,

src/views/management.vue

@@ -4,7 +4,7 @@
 
     <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>
+        <h2 class="text-[28px] font-bold text-[#0644a1]">数字运营平台</h2>
         <p class="mt-2 text-[#606266]">
           集成财务、研发、客户、人力等关键业务数据，为管理者提供全局态势感知和战略决策支持。
         </p>