From c0dacc3578d46135dede5a231c596d56a9812b0e Mon Sep 17 00:00:00 2001
From: GUjiYN <2946459904@qq.com>
Date: Mon, 15 Jan 2024 22:32:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=80=E7=82=B9=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MainPage/Carousel.vue        | 22 ++++-
 src/components/MainPage/ExcellentMember.vue | 94 +++++----------------
 src/components/MainPage/ProjectList.vue     | 14 +--
 3 files changed, 48 insertions(+), 82 deletions(-)

diff --git a/src/components/MainPage/Carousel.vue b/src/components/MainPage/Carousel.vue
index ea529ed..65ef531 100644
--- a/src/components/MainPage/Carousel.vue
+++ b/src/components/MainPage/Carousel.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="controls-carousel" class="relative w-full" data-carousel="slide">
     <!-- Carousel wrapper -->
-    <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
+    <div class="relative h-56 overflow-hidden rounded-lg md:h-[600px]">
       <!-- Item 1 -->
       <div class="hidden duration-700 ease-in-out" data-carousel-item>
         <img src="@/assets/images/img1.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
@@ -14,6 +14,22 @@
       <div class="hidden duration-700 ease-in-out" data-carousel-item>
         <img src="@/assets/images/img3.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
       </div>
+      <!-- Item 4 -->
+      <div class="hidden duration-700 ease-in-out" data-carousel-item>
+        <img src="@/assets/images/img11.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
+      </div>
+      <!-- Item 5 -->
+      <div class="hidden duration-700 ease-in-out" data-carousel-item>
+        <img src="@/assets/images/img19.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
+      </div>
+    </div>
+    <!-- Slider indicators -->
+    <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
+      <button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
+      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
+      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
+      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
+      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
     </div>
     <!-- Slider controls -->
     <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
@@ -33,4 +49,6 @@
         </span>
     </button>
   </div>
-</template>
\ No newline at end of file
+</template>
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/components/MainPage/ExcellentMember.vue b/src/components/MainPage/ExcellentMember.vue
index 8c46fac..5f414fb 100644
--- a/src/components/MainPage/ExcellentMember.vue
+++ b/src/components/MainPage/ExcellentMember.vue
@@ -1,27 +1,36 @@
 <template>
-  <div id="default-carousel" class="relative w-full" data-carousel="slide">
+  <div id="default-carousel" class="mt-40 relative w-full" data-carousel="slide">
     <!-- Carousel wrapper -->
     <div class="relative overflow-hidden rounded-lg h-[600px]">
       <!-- Item 1 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-        <img class="w-10 h-10 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="" alt="Bordered avatar">
-        <p>子墨</p>
+      <div class="text-white hidden duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" data-carousel-item>
+        <img class="w-20 h-20 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="@/assets/images/img4.jpg" alt="Bordered avatar">
+        <p class="m-3">姓名</p>
+        <p>简介</p>
       </div>
       <!-- Item 2 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-        <img src="" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
+      <div class="text-white hidden duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" data-carousel-item>
+        <img class="w-20 h-20 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="@/assets/images/img5.jpg" alt="Bordered avatar">
+        <p class="m-3">姓名</p>
+        <p>简介</p>
       </div>
       <!-- Item 3 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-        <img src="" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
+      <div class="text-white hidden duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" data-carousel-item>
+        <img class="w-20 h-20 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="@/assets/images/img6.jpg" alt="Bordered avatar">
+        <p class="m-3">姓名</p>
+        <p>简介</p>
       </div>
       <!-- Item 4 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-        <img src="" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
+      <div class=" text-white duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" data-carousel-item>
+        <img class="w-20 h-20 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="@/assets/images/img7.jpg" alt="Bordered avatar">
+        <p class="m-3">姓名</p>
+        <p>简介</p>
       </div>
       <!-- Item 5 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-        <img src="" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
+      <div class="text-white duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" data-carousel-item>
+        <img class="w-20 h-20 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="@/assets/images/img8.jpg" alt="Bordered avatar">
+        <p class="m-3">姓名</p>
+        <p>简介</p>
       </div>
     </div>
     <!-- Slider indicators -->
@@ -51,64 +60,3 @@
     </button>
   </div>
 </template>
-<script>
-// 这里假设你正在使用 Vue.js
-export default {
-  data() {
-    return {
-      currentSlide: 0, // 当前显示的幻灯片索引
-      totalSlides: 5,  // 总共的幻灯片数量
-    };
-  },
-  methods: {
-    showSlide(index) {
-      // 显示特定索引的幻灯片
-      const slides = document.querySelectorAll('[data-carousel-item]');
-      slides.forEach((slide, i) => {
-        if (i === index) {
-          slide.classList.remove('hidden');
-        } else {
-          slide.classList.add('hidden');
-        }
-      });
-    },
-    updateIndicators() {
-      // 更新指示器的状态
-      const indicators = document.querySelectorAll('[data-carousel-slide-to]');
-      indicators.forEach((indicator, i) => {
-        if (i === this.currentSlide) {
-          indicator.setAttribute('aria-current', 'true');
-        } else {
-          indicator.setAttribute('aria-current', 'false');
-        }
-      });
-    },
-    nextSlide() {
-      // 显示下一张幻灯片
-      this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
-      this.showSlide(this.currentSlide);
-      this.updateIndicators();
-    },
-    prevSlide() {
-      // 显示上一张幻灯片
-      this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
-      this.showSlide(this.currentSlide);
-      this.updateIndicators();
-    },
-  },
-  mounted() {
-    // 默认显示第一张幻灯片
-    this.showSlide(this.currentSlide);
-
-    // 绑定事件处理程序，处理前进和后退按钮的点击事件
-    document.querySelector('[data-carousel-prev]').addEventListener('click', this.prevSlide);
-    document.querySelector('[data-carousel-next]').addEventListener('click', this.nextSlide);
-  },
-  beforeDestroy() {
-    // 在组件销毁前解除事件监听
-    document.querySelector('[data-carousel-prev]').removeEventListener('click', this.prevSlide);
-    document.querySelector('[data-carousel-next]').removeEventListener('click', this.nextSlide);
-  },
-};
-
-</script>
\ No newline at end of file
diff --git a/src/components/MainPage/ProjectList.vue b/src/components/MainPage/ProjectList.vue
index c6657bd..a88bb5b 100644
--- a/src/components/MainPage/ProjectList.vue
+++ b/src/components/MainPage/ProjectList.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="container w-full ml-96">
+  <div class="container w-full ml-96 mt-40">
     <h2 class="text-3xl font-bold ml-96 mb-20">项目展示</h2>
     <div class="flex flex-col space-y-8">
       <div class="flex space-x-6">
-        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
+        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img21.jpg')]">
           <ProjectCard :project="projects[0]" />
         </div>
-        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
+        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img22.jpg')]">
           <ProjectCard :project="projects[1]" />
         </div>
-        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
+        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img23.jpg')]">
           <ProjectCard :project="projects[2]" />
         </div>
       </div>
       <div class="flex space-x-6">
-        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
+        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img24.jpg')]">
           <ProjectCard :project="projects[3]" />
         </div>
-        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
+        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img25.jpg')]">
           <ProjectCard :project="projects[4]" />
         </div>
-        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
+        <div class="border-gray-400 shadow-lg h-72 w-72 bg-cover bg-center bg-[url('@/assets/images/img26.jpg')]">
           <ProjectCard :project="projects[5]" />
         </div>
       </div>