|
@@ -7,15 +7,19 @@
|
|
|
</div>
|
|
|
<div class="slide-layout">
|
|
|
<ui-slide
|
|
|
- :items="data"
|
|
|
- :current-index="data.indexOf(active)"
|
|
|
- @change="index => $emit('update:active', data[index])"
|
|
|
+ :items="data"
|
|
|
+ :current-index="data.indexOf(active)"
|
|
|
+ @change="(index) => $emit('update:active', data[index])"
|
|
|
>
|
|
|
- <template v-slot="{raw}">
|
|
|
+ <template v-slot="{ raw }: any">
|
|
|
<template v-if="$slots.default">
|
|
|
<slot :data="raw" />
|
|
|
</template>
|
|
|
- <img :src="useStaticUrl(getURL ? getURL(raw) : raw.url).value" class="image" v-else />
|
|
|
+ <img
|
|
|
+ :src="useStaticUrl(getURL ? getURL(raw) : raw.url).value"
|
|
|
+ class="image"
|
|
|
+ v-else
|
|
|
+ />
|
|
|
</template>
|
|
|
</ui-slide>
|
|
|
</div>
|
|
@@ -27,20 +31,20 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import UiSlide from "@/components/base/components/slide/index.vue";
|
|
|
-import {useStaticUrl} from '@/hook/useStaticUrl'
|
|
|
+import { useStaticUrl } from "@/hook/useStaticUrl";
|
|
|
import UiIcon from "@/components/base/components/icon/index.vue";
|
|
|
|
|
|
-type Item = {url: string}
|
|
|
+type Item = { url: string };
|
|
|
|
|
|
-defineProps<{ data: Item[], active: Item, getURL?: (data: any) => string }>()
|
|
|
+defineProps<{ data: Item[]; active: Item; getURL?: (data: any) => string }>();
|
|
|
const emit = defineEmits<{
|
|
|
- (e: 'update:active', d: Item): void,
|
|
|
- (e: 'quit'): void
|
|
|
-}>()
|
|
|
+ (e: "update:active", d: Item): void;
|
|
|
+ (e: "quit"): void;
|
|
|
+}>();
|
|
|
|
|
|
const clickHandler = () => {
|
|
|
- emit('quit')
|
|
|
-}
|
|
|
+ emit("quit");
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@@ -100,7 +104,7 @@ const clickHandler = () => {
|
|
|
.fill-slide .ui-slide .ui-gate-layer {
|
|
|
overflow: initial !important;
|
|
|
.ui-gate-slides .ui-gate-content {
|
|
|
- transition: all .3s ease;
|
|
|
+ transition: all 0.3s ease;
|
|
|
transform: scale(0.9);
|
|
|
opacity: 0.5 !important;
|
|
|
|
|
@@ -110,4 +114,4 @@ const clickHandler = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|