<template>
  <div class="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 relative">
    <div class="relative w-full max-w-[480px] auth-card px-8 py-10 flex flex-col justify-center min-h-[480px] sm:min-h-[400px] mx-4">
      <!-- Logo与标题 -->
      <div class="flex flex-col items-center mb-8">
        <div class="w-16 h-16 flex items-center justify-center bg-gradient-to-br from-blue-600 to-indigo-600 rounded-2xl mb-4 shadow-lg">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h1 class="auth-title mb-1">天远数据控制台</h1>
      </div>

      <!-- 内容区 -->
      <div class="flex-1 flex flex-col justify-center">
        <router-view />
      </div>

      <!-- 底部版权 -->
      <div class="text-center text-xs text-gray-400 mt-8 pt-6 border-t border-gray-100">
        &copy; 2024 天远数据控制台. All rights reserved.
      </div>
    </div>
  </div>
</template>

<script setup>
// 认证布局组件
</script>

<style scoped>
/* 性能优化：减少动画效果 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 性能优化：低端设备降级 */
@media (max-width: 640px) {
  .min-h-\[480px\] {
    min-height: 320px !important;
  }
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .mx-4 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
}

/* 性能优化：简化背景渐变 */
@media (max-width: 768px), (max-device-pixel-ratio: 1) {
  .bg-gradient-to-br {
    background: #f8fafc !important;
  }
}
</style>
