81 lines
2.7 KiB
Vue
81 lines
2.7 KiB
Vue
<template>
|
||
<div class="h-full flex flex-col p-4 gap-4 bg-[#1b1026] overflow-y-auto custom-scrollbar">
|
||
|
||
<!-- Deity Portrait & Header -->
|
||
<PixelFrame class="flex-shrink-0" title="信仰" highlight>
|
||
<div class="flex flex-col items-center p-1">
|
||
<div class="w-24 h-24 bg-[#1b1026] border-4 border-[#d75b5b] mb-2 p-1 relative flex items-center justify-center overflow-hidden">
|
||
<!-- Background for portrait -->
|
||
<div class="absolute inset-0 bg-[#3d2459] opacity-50" />
|
||
|
||
<!-- Deity Avatar -->
|
||
<div class="scale-125 transform translate-y-2">
|
||
<PixelAvatar :deityId="deity.id" />
|
||
</div>
|
||
</div>
|
||
<h2 class="text-lg text-[#f6b26b] tracking-widest uppercase font-bold text-center leading-tight">
|
||
{{ deity.name }}
|
||
</h2>
|
||
<div class="text-xs text-[#8f80a0] mt-1 text-center font-bold">
|
||
{{ deity.title }}
|
||
</div>
|
||
</div>
|
||
</PixelFrame>
|
||
|
||
<!-- Favor Bar -->
|
||
<div class="px-1 mt-1">
|
||
<RetroResourceBar
|
||
:current="deity.favor"
|
||
:max="deity.maxFavor"
|
||
type="energy"
|
||
label="好感度"
|
||
:icon="Heart"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Deity Details / Description -->
|
||
<PixelFrame variant="inset" class="mt-2 flex-grow overflow-y-auto custom-scrollbar">
|
||
<div class="flex flex-col gap-2 h-full p-1">
|
||
<div class="flex items-center gap-2 text-[#9fd75b] border-b border-[#4a3b5e] pb-1 sticky top-0 bg-[#150c1f] z-10">
|
||
<Sparkles :size="14" />
|
||
<span class="text-xs font-bold uppercase">神恩</span>
|
||
</div>
|
||
|
||
<p class="text-xs text-[#e0d8f0] italic leading-relaxed">
|
||
「{{ deity.description }}」
|
||
</p>
|
||
|
||
<div class="mt-auto p-2 bg-[#231533] border border-[#4a3b5e]">
|
||
<span class="text-[10px] text-[#8f80a0] uppercase block mb-1">當前效果：</span>
|
||
<span class="text-xs text-[#2ce8f4]">
|
||
{{ currentEffect }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</PixelFrame>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import { Heart, Sparkles } from 'lucide-vue-next';
|
||
import PixelFrame from './PixelFrame.vue';
|
||
import RetroResourceBar from './RetroResourceBar.vue';
|
||
import PixelAvatar from './PixelAvatar.vue';
|
||
|
||
type Deity = any;
|
||
|
||
interface Props {
|
||
deity: Deity;
|
||
}
|
||
|
||
const props = defineProps<Props>();
|
||
|
||
const currentEffect = computed(() => {
|
||
if (props.deity.favor >= 80) return "Divine Protection (DEF +20%)";
|
||
if (props.deity.favor >= 50) return "Minor Blessing (LCK +5)";
|
||
return "None (Pray more!)";
|
||
});
|
||
</script>
|