63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
|
<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">
|
||
|
|
© 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>
|