feat: 首页样式调整

src/components/home/CardItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card shadow="hover" class="h-[850px] w-full min-w-0">
+  <el-card 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})` }"

src/views/index.vue

@@ -2,9 +2,46 @@
   <div class="bg-white">
     <Header />
 
-    <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>
+    <!-- Hero with video background -->
+    <section class="relative w-full h-[56vh] md:h-[70vh] overflow-hidden">
+      <video
+        class="absolute inset-0 w-full h-full object-cover"
+        :src="bgVideo"
+        autoplay
+        muted
+        loop
+        playsinline
+      ></video>
+      <div class="absolute inset-0 bg-black/40"></div>
+      <div
+        class="relative z-10 max-w-[1200px] mx-auto h-full px-4 flex items-center"
+      >
+        <div class="text-white max-w-3xl">
+          <h1 class="text-2xl md:text-4xl font-bold leading-tight">
+            山东科瑞石油技术门户网站 · DeepOil 智慧经营平台
+          </h1>
+          <p
+            class="mt-3 md:mt-4 text-sm md:text-base text-white/90 leading-relaxed"
+          >
+            连接经营管理、生产指挥与数据智能，打造石油能源行业的一体化数字化平台，
+            为企业提供高效协同、智能决策与可靠的数字化服务。
+          </p>
+          <div class="mt-4 md:mt-6 flex gap-3">
+            <a
+              class="bg-[#0644a1] hover:bg-[#0a53c1] text-white px-4 py-2 rounded-md cursor-pointer"
+              >了解平台</a
+            >
+            <a
+              class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-md cursor-pointer"
+              >联系我们</a
+            >
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="max-w-[1200px] mx-auto px-2 mb-8 mt-6 flex justify-center">
+      <p class="text-2xl">提供多维度、更可靠的数智化服务</p>
     </section>
 
     <section class="max-w-[1200px] mx-auto px-2 mb-8 mt-5">
@@ -30,6 +67,7 @@ import img1 from "@/assets/images/1.jpg";
 import img2 from "@/assets/images/2.jpg";
 import img3 from "@/assets/images/3.jpg";
 import { type Card } from "@types/cards";
+import bgVideo from "@/assets/bg.mp4";
 
 const cards: Card[] = [
   {