mirror of
https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git
synced 2025-02-04 11:32:36 +08:00
修正轮播图 Flowbite.js 问题
This commit is contained in:
parent
d94d318c06
commit
ac114ca9a2
GPG Key ID:
F693AA12AABBFA87
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
|
|
@ -10,5 +10,4 @@
|
|||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
<script type="application/javascript" src="/src/assets/flowbite.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,35 +1,19 @@
|
|||
<template>
|
||||
<div id="default-carousel" class="relative w-full" data-carousel="slide">
|
||||
<div id="controls-carousel" class="relative w-full" data-carousel="slide">
|
||||
<!-- Carousel wrapper -->
|
||||
<div class="relative overflow-hidden rounded-lg h-[600px]">
|
||||
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
|
||||
<!-- Item 1 -->
|
||||
<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="...">
|
||||
<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="...">
|
||||
</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="hidden duration-700 ease-in-out" data-carousel-item="active">
|
||||
<img src="@/assets/images/img2.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
|
||||
</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="...">
|
||||
<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="" 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="" 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>
|
||||
|
|
@ -49,7 +33,4 @@
|
|||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
</script>
|
||||
|
|
@ -1,3 +1,12 @@
|
|||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { initFlowbite } from 'flowbite'
|
||||
|
||||
// initialize components based on data attribute selectors
|
||||
onMounted(() => {
|
||||
initFlowbite();
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class=" w-full h-auto bg-sky-200">
|
||||
<div>
|
||||
|
|
@ -8,49 +17,6 @@
|
|||
<NewProfile/>
|
||||
<ExcellentMember/>
|
||||
|
||||
|
||||
<div id="default-carousel" class="relative w-full" data-carousel="slide">
|
||||
<!-- Carousel wrapper -->
|
||||
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
|
||||
<!-- 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="...">
|
||||
</div>
|
||||
<!-- Item 2 -->
|
||||
<div class="hidden duration-700 ease-in-out" data-carousel-item>
|
||||
<img src="../assets/images/img2.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
|
||||
</div>
|
||||
<!-- Item 3 -->
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
||||
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
|
||||
</svg>
|
||||
<span class="sr-only">Previous</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
|
||||
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
||||
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
|
||||
</svg>
|
||||
<span class="sr-only">Next</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!--版权-->
|
||||
<div class="mt-40 flex items-center justify-center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import './assets/main.css'
|
||||
import 'flowbite';
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
1
src/public/flowbite.min.css
vendored
1
src/public/flowbite.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user