40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { ImgButton } from '@/components/Button'
|
|
|
|
const props = defineProps<{ moduleName: string }>()
|
|
const emit = defineEmits<{ (e: 'prev'): void; (e: 'next'): void }>()
|
|
</script>
|
|
|
|
<template>
|
|
<ImgButton
|
|
@click="emit('prev')"
|
|
class="absolute left-0 top-1/2 -translate-y-1/2"
|
|
:image="'skill/左滑'"
|
|
/>
|
|
|
|
<ImgButton
|
|
@click="emit('next')"
|
|
class="absolute right-0 top-1/2 -translate-y-1/2"
|
|
:image="'skill/右滑'"
|
|
/>
|
|
|
|
<div class="absolute bottom-28 left-1/2 -translate-x-1/2 z-10">
|
|
<span class="blue-text tracking-[18px] text-5xl">{{ props.moduleName }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.blue-text {
|
|
background: linear-gradient(180deg, #cfffff 0%, #9ff3ff 40%, #6ee7ff 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow:
|
|
0 0 2px rgba(255, 255, 255, 0.9),
|
|
0 0 6px rgba(79, 241, 255, 0.9),
|
|
0 0 14px rgba(79, 241, 255, 0.8),
|
|
0 0 28px rgba(0, 199, 255, 0.6),
|
|
0 0 46px rgba(0, 199, 255, 0.45);
|
|
}
|
|
</style>
|