ssss

src/views/index.vue

@@ -3,30 +3,54 @@
     <Header />
 
     <main class="mx-auto max-w-[1200px] px-6 pb-8 pt-24">
-      <section class="hero-banner overflow-hidden rounded-[6px]">
-        <div class="hero-banner__inner">
-          <div class="hero-copy">
-            <div class="hero-script">HELLO</div>
-            <p class="hero-text">{{ heroGreeting }}</p>
-            <div class="hero-progress">
-              <span class="hero-progress__active"></span>
-              <span class="hero-progress__line"></span>
-            </div>
-          </div>
+      <section class="hero-banner overflow-hidden rounded-[6px] relative">
+        <div class="">
+          <!-- 轮播容器 -->
+          <div class="carousel-container relative h-full">
+            <!-- 轮播项 -->
+            <div
+              class="carousel-slide absolute inset-0 transition-opacity duration-500 ease-in-out"
+              v-for="(slide, index) in slides"
+              :key="index"
+              :class="{
+                'opacity-100': currentIndex === index,
+                'opacity-0': currentIndex !== index,
+              }"
+            >
+              <div class="hero-copy carousel-caption">
+                <div class="hero-script text-[68px] font-italic text-[#0c4eb5]">
+                  HELLO
+                </div>
+                <p class="hero-text mt-4 text-[24px] text-[#5f6f83]">
+                  {{ slide.text }}
+                </p>
+              </div>
 
-          <div class="hero-visual">
-            <div class="hero-orb hero-orb--cloud">
-              <Icon icon="mdi:cloud-outline" class="text-[54px]" />
-            </div>
-            <div class="hero-orb hero-orb--shield">
-              <Icon icon="mdi:shield-search-outline" class="text-[52px]" />
+              <!-- 轮播背景图 -->
+              <div class="hero-visual absolute inset-0">
+                <img
+                  :src="slide.image"
+                  alt="Banner"
+                  class="w-full h-full object-cover"
+                />
+              </div>
             </div>
-            <div class="hero-orb hero-orb--chart">
-              <Icon icon="mdi:chart-areaspline" class="text-[66px]" />
+
+            <!-- 指示器 -->
+            <div
+              class="carousel-indicators absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"
+            >
+              <button
+                v-for="(_, i) in slides"
+                :key="i"
+                @click="currentIndex = i"
+                :class="{
+                  'bg-blue-500': currentIndex === i,
+                  'bg-gray-300': currentIndex !== i,
+                }"
+                class="w-3 h-3 rounded-full transition-colors"
+              ></button>
             </div>
-            <div class="hero-cube hero-cube--one"></div>
-            <div class="hero-cube hero-cube--two"></div>
-            <div class="hero-ring"></div>
           </div>
         </div>
       </section>
@@ -208,9 +232,9 @@ import { Icon } from "@iconify/vue";
 import { getMCSsoToken, ssoLogin, zentaoSsoLogin } from "@/api/user";
 import { useUserStore } from "@/stores/useUserStore";
 import { getAccessToken } from "@/utils/auth";
-import banner1 from "@/assets/images/banner1.jpg";
-import banner2 from "@/assets/images/model.jpeg";
-import bg666 from "@/assets/images/bg666.png";
+import banner1 from "@/assets/images/banner1.png";
+import banner2 from "@/assets/images/banner2.jpg";
+import banner3 from "@/assets/images/banner3.jpg";
 import img3 from "@/assets/images/3.jpg";
 import oaimage from "@/assets/images/oa.jpg";
 import crmimage from "@/assets/images/crm.jpg";
@@ -231,7 +255,6 @@ import thinkimage from "@/assets/images/think.jpg";
 import aiimage from "@/assets/images/ai.png";
 import agentimage from "@/assets/images/agent.jpeg";
 import videoimage from "@/assets/images/video.png";
-import youimage from "@/assets/images/youcnag.png";
 import fileagent from "@/assets/images/fileagent.png";
 import zhiduagent from "@/assets/images/zhiduagent.png";
 import jishuimage2 from "@/assets/images/jishuimage.png";
@@ -350,6 +373,36 @@ let boldLabes = ref([
   "质量安全管理(QHSE)",
 ]);
 
+// 添加轮播数据
+const slides = ref([
+  {
+    image: banner1,
+    text: "早上好，保持热爱，奔赴目标！",
+  },
+  {
+    image: banner2,
+    text: "数字化转型，驱动未来增长",
+  },
+  {
+    image: banner3,
+    text: "智慧平台，赋能高效协同",
+  },
+]);
+
+// 当前索引
+const currentIndex = ref(0);
+
+// 下一页
+const nextSlide = () => {
+  currentIndex.value = (currentIndex.value + 1) % slides.value.length;
+};
+
+// 上一页
+const prevSlide = () => {
+  currentIndex.value =
+    (currentIndex.value - 1 + slides.value.length) % slides.value.length;
+};
+
 const notices: NoticeItem[] = [
   {
     title: "集团总部关于办公楼设备维保的说明",
@@ -548,6 +601,8 @@ function dingTalkAutoLogin() {
 
 onMounted(() => {
   dingTalkAutoLogin();
+  const interval = setInterval(nextSlide, 5000);
+  return () => clearInterval(interval); // 清理定时器
 });
 </script>
 
@@ -998,4 +1053,44 @@ onMounted(() => {
     margin-top: 22px;
   }
 }
+
+.carousel-container {
+  position: relative;
+  height: 220px;
+  overflow: hidden;
+}
+
+.carousel-slide {
+  position: relative;
+  background-size: cover;
+  background-position: center;
+}
+
+.hero-visual img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.carousel-caption {
+  position: absolute;
+  left: 40px;
+  top: 50%;
+  z-index: 2;
+  transform: translateY(-50%);
+  text-align: left;
+}
+
+.carousel-indicators {
+  display: flex;
+  gap: 8px;
+}
+
+.carousel-indicators button {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
 </style>