mirror of
https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git
synced 2025-02-04 19:42:34 +08:00
添加一点图片
This commit is contained in:
parent
ac114ca9a2
commit
c0dacc3578
|
|
@ -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>
|
||||
</template>
|
||||
<script setup>
|
||||
</script>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user