pet_data/app/components/pixel/InfoPanel.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>