first commit

src/layouts/AuthLayout.vue

@@ -0,0 +1,62 @@
+<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>