添加一点图片

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>
@@ -34,3 +50,5 @@
     </button>
   </div>
 </template>
+<script setup>
+</script>

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>
+      <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-10 h-10 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="" alt="Bordered avatar">
+        <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>子墨</p>
+        <p class="m-3">姓名</p>
+        <p>简介</p>
       </div>
       <!-- Item 2 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
+      <div class="text-white hidden duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" 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="...">
+        <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>
+      <div class="text-white hidden duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" 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="...">
+        <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>
+      <div class=" text-white duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" 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="...">
+        <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>
+      <div class="text-white duration-700 ease-in-out bg-green-400 flex flex-col justify-center items-center" 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="...">
+        <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>

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>