From c1767a32d5989a933ec129c173c2b7a53b9a0ceb Mon Sep 17 00:00:00 2001
From: qq_63480508 <qq_63480508@devide>
Date: Thu, 3 Apr 2025 17:20:00 +0800
Subject: [PATCH] Thu Apr  3 17:20:00 CST 2025 inscode

---
 src/App.vue                   |   4 +-
 src/components/HelloWorld.vue | 156 +++++++++++++++++++++++++++-------
 2 files changed, 128 insertions(+), 32 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 633a5df..40ca4a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+// import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+    <!-- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> -->
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 1b8faac..5730c5d 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,43 +1,139 @@
-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
+  <div class="carousel">
+    <div class="carousel-inner" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
+      <div class="carousel-item" v-for="(image, index) in images" :key="index">
+        <img :src="image" alt="轮播图" />
+      </div>
+    </div>
+    <div class="carousel-controls">
+      <button @click="prev">‹</button>
+      <button @click="next">›</button>
+    </div>
+    <div class="carousel-indicators">
+      <span
+        v-for="(image, index) in images"
+        :key="index"
+        :class="{ active: index === currentIndex }"
+        @click="goTo(index)"
+      ></span>
+    </div>
   </div>
 </template>
 
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+const images = [
+  'https://image.so.com/ai/s?q=%E5%B9%B3%E5%8F%B0%E5%9B%BE%E7%89%87&listsrc=sobox&listsign=28c4844d972744afe424ff0172e943a0&src=360pic_strong',
+  'https://via.placeholder.com/800x400?text=Slide+2',
+  'https://via.placeholder.com/800x400?text=Slide+3',
+  'https://via.placeholder.com/800x400?text=Slide+4',
+];
+
+const currentIndex = ref(0);
+const intervalTime = 3000; 
+let timer = null;
+
+
+const next = () => {
+  currentIndex.value = (currentIndex.value + 1) % images.length;
+};
+
+
+const prev = () => {
+  currentIndex.value = (currentIndex.value - 1 + images.length) % images.length;
+};
+
+
+const goTo = (index) => {
+  currentIndex.value = index;
+};
+
+
+onMounted(() => {
+  timer = setInterval(() => {
+    next();
+  }, intervalTime);
+});
+
+
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
+
 <style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
+.carousel {
+  position: relative;
+  width: 800px;
+  height: 400px;
+  overflow: hidden;
+  margin: 0 auto;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.carousel-inner {
+  display: flex;
+  transition: transform 0.5s ease;
+}
+
+.carousel-item {
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+.carousel-item img {
+  width: 220px;
+  height: 220px;
+  object-fit: cover;
+}
+
+
+.carousel-controls {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  transform: translateY(-50%);
+}
+
+.carousel-controls button {
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  color: #fff;
+  font-size: 2rem;
+  padding: 10px 15px;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: background 0.3s;
+}
+
+.carousel-controls button:hover {
+  background: rgba(0, 0, 0, 0.7);
 }
 
-h3 {
-  font-size: 1.2rem;
+/* 底部指示器 */
+.carousel-indicators {
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  display: flex;
+  transform: translateX(-50%);
 }
 
-.greetings h1,
-.greetings h3 {
-  text-align: center;
+.carousel-indicators span {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin: 0 5px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.3s;
 }
 
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
+.carousel-indicators span.active {
+  background: rgba(255, 255, 255, 1);
 }
 </style>
-- 
GitLab