Chengdong Zhang
0d0e10b97b
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{ images: { image: string; url?: string }[]; height?: number; interval?: number }>(), {
|
|
height: 450,
|
|
interval: 4000,
|
|
});
|
|
|
|
const index = ref(0);
|
|
let timer: ReturnType<typeof setInterval> | null = null;
|
|
|
|
function go(i: number): void {
|
|
index.value = (i + props.images.length) % props.images.length;
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (props.images.length > 1) {
|
|
timer = setInterval(() => {
|
|
index.value = (index.value + 1) % props.images.length;
|
|
}, props.interval);
|
|
}
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (timer) clearInterval(timer);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative w-full overflow-hidden" :style="{ height: `${height}px` }">
|
|
<NuxtLink
|
|
v-for="(img, i) in images"
|
|
v-show="i === index"
|
|
:key="img.image"
|
|
:to="img.url || '#'"
|
|
class="block h-full w-full bg-cover bg-center"
|
|
:style="{ backgroundImage: `url(${img.image})` }"
|
|
/>
|
|
<div v-if="images.length > 1" class="absolute bottom-[14px] left-0 right-0 flex justify-center gap-2">
|
|
<button
|
|
v-for="(_, i) in images"
|
|
:key="i"
|
|
type="button"
|
|
class="h-2.5 w-2.5 rounded-full bg-white/55 p-0 transition-colors"
|
|
:class="i === index ? 'bg-primary' : 'hover:bg-white/80'"
|
|
:aria-label="`slide ${i + 1}`"
|
|
@click="go(i)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|