ss

src/components/home/CardItem.vue

@@ -86,19 +86,19 @@ import ehrimage from "@/assets/images/ehr.jpg";
 import scmimage from "@/assets/images/scm.png";
 import erpimage from "@/assets/images/fm.jpg"; // 财务管理系统
 import driveimage from "@/assets/images/drive.jpg"; // 经营驾驶舱
-import zhanlueimage from "@/assets/images/zhanlue.jpeg"; // 战略解码
-import jishuimage from "@/assets/images/jishu.jpeg"; // 技术研发管理
-import zuzhiimage from "@/assets/images/zuzhi.png"; // 组织资产管理
+import zhanlueimage from "@/assets/images/zhanlue.jpg"; // 战略解码
+import jishuimage from "@/assets/images/jishu.jpg"; // 技术研发管理
+import zuzhiimage from "@/assets/images/zuzhi.jpg"; // 组织资产管理
 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 qhseimage from "@/assets/images/qhse.jpg"; // 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.jpg"; // 项目管理
-import dataimage from "@/assets/images/data.png"; // 全局数据治理
+import dataimage from "@/assets/images/data.jpg"; // 全局数据治理
 import thinkimage from "@/assets/images/think.jpg"; // 智能决策
 import aiimage from "@/assets/images/ai.png"; // AI大模型
 import agentimage from "@/assets/images/agent.jpeg"; // ai智能体

src/components/home/header.vue

@@ -217,7 +217,7 @@
             class="bg-[#0050b3] hover:bg-[#0050b3]/90 text-white text-sm flex items-center justify-center cursor-pointer h-full px-10 py-4"
             @click="login"
           >
-            登录
+            登 录
           </div>
         </template>
       </div>

src/views/index.vue

@@ -3,7 +3,7 @@
     <Header />
 
     <section
-      class="relative w-full h-[30vh] md:h-[25vh] overflow-hidden mt-15 md:pb-5 pb-30"
+      class="relative w-full h-[30vh] md:h-[25vh] overflow-hidden mt-15 md:pb-30 pb-50 pt-9"
     >
       <video
         class="absolute inset-0 w-full h-full object-cover"
@@ -15,27 +15,35 @@
       ></video>
       <div class="absolute inset-0 bg-black/40"></div>
       <div
-        class="relative z-10 w-full mx-auto h-full px-20 flex items-center mt-5"
+        class="relative z-10 w-full mx-auto h-full px-20 flex items-center mt-5 pt-10"
       >
         <div class="text-white max-w-4xl">
-          <h1 class="text-2xl md:text-4xl font-bold leading-tight">
+          <h1
+            class="text-2xl md:text-4xl pt-2 font-bold leading-tight slide-up-fade-in"
+          >
             山东科瑞石油技术门户网站 · DeepOil 智慧经营平台
           </h1>
           <p
-            class="mt-3 md:mt-4 text-sm md:text-base text-white/90 leading-relaxed"
+            class="mt-3 md:mt-4 text-sm md:text-base text-white/90 leading-relaxed slide-up-fade-in"
+            style="animation-delay: 0.2s"
           >
             连接经营管理、生产指挥与数据智能，打造石油能源行业的一体化数字化平台，
             为企业提供高效协同、智能决策与可靠的数字化服务。
           </p>
-          <div class="mt-4 md:mt-6 flex gap-3">
+          <div
+            class="mt-4 md:mt-6 flex gap-3 slide-up-fade-in"
+            style="animation-delay: 0.4s"
+          >
             <a
               class="bg-[#0644a1] hover:bg-[#0a53c1] text-white px-4 py-2 cursor-pointer"
-              >了解平台</a
             >
+              了解平台
+            </a>
             <a
               class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 cursor-pointer"
-              >联系我们</a
             >
+              联系我们
+            </a>
           </div>
         </div>
       </div>
@@ -258,4 +266,17 @@ onMounted(() => {
 ::-webkit-scrollbar-thumb:hover {
   background-color: #30459c;
 }
+
+.slide-up-fade-in {
+  opacity: 0;
+  transform: translateY(20px);
+  animation: slideUpFadeIn 0.8s forwards ease-out;
+}
+
+@keyframes slideUpFadeIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>