125 lines
3.8 KiB
Vue
125 lines
3.8 KiB
Vue
<template>
|
||
<div class="auth-layout min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute inset-0 overflow-hidden">
|
||
<div class="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full opacity-20 animate-pulse-slow"></div>
|
||
<div class="absolute -bottom-40 -left-40 w-96 h-96 bg-gradient-to-tr from-pink-400 to-yellow-500 rounded-full opacity-20 animate-bounce-gentle"></div>
|
||
</div>
|
||
|
||
<!-- 主要内容 -->
|
||
<div class="relative w-full max-w-md">
|
||
<!-- Logo和标题 -->
|
||
<div class="text-center mb-8">
|
||
<div class="flex justify-center mb-4">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
|
||
<el-icon size="32" class="text-white">
|
||
<Sunny />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<h1 class="text-3xl font-bold text-gray-900 mb-2">情绪博物馆</h1>
|
||
<p class="text-gray-600">记录情绪，分享心情的温暖空间</p>
|
||
</div>
|
||
|
||
<!-- 认证表单容器 -->
|
||
<div class="bg-white rounded-2xl shadow-xl p-8 backdrop-blur-sm bg-opacity-95">
|
||
<router-view />
|
||
</div>
|
||
|
||
<!-- 底部链接 -->
|
||
<div class="text-center mt-6 space-y-2">
|
||
<div class="flex justify-center space-x-4 text-sm text-gray-600">
|
||
<a href="#" class="hover:text-blue-600 transition-colors">帮助中心</a>
|
||
<span>·</span>
|
||
<a href="#" class="hover:text-blue-600 transition-colors">隐私政策</a>
|
||
<span>·</span>
|
||
<a href="#" class="hover:text-blue-600 transition-colors">服务条款</a>
|
||
</div>
|
||
<p class="text-xs text-gray-500">
|
||
© 2024 情绪博物馆. All rights reserved.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主题切换按钮 -->
|
||
<div class="absolute top-4 right-4">
|
||
<el-button circle @click="toggleTheme" class="bg-white bg-opacity-80 backdrop-blur-sm">
|
||
<el-icon>
|
||
<Sunny v-if="!isDarkTheme" />
|
||
<Moon v-else />
|
||
</el-icon>
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 语言切换按钮 -->
|
||
<div class="absolute top-4 left-4">
|
||
<el-dropdown @command="handleLanguageChange">
|
||
<el-button circle class="bg-white bg-opacity-80 backdrop-blur-sm">
|
||
<el-icon><Globe /></el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item command="zh-CN">中文</el-dropdown-item>
|
||
<el-dropdown-item command="en-US">English</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { Sunny, Moon, Globe } from '@element-plus/icons-vue'
|
||
import { useAppStore } from '@/stores/app'
|
||
|
||
const appStore = useAppStore()
|
||
|
||
// 计算属性
|
||
const isDarkTheme = computed(() => appStore.isDarkTheme)
|
||
|
||
// 方法
|
||
const toggleTheme = () => {
|
||
appStore.toggleTheme()
|
||
}
|
||
|
||
const handleLanguageChange = (language: string) => {
|
||
appStore.setLanguage(language)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.auth-layout {
|
||
background-image:
|
||
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
||
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
|
||
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
|
||
}
|
||
|
||
@keyframes pulse-slow {
|
||
0%, 100% {
|
||
opacity: 0.2;
|
||
}
|
||
50% {
|
||
opacity: 0.3;
|
||
}
|
||
}
|
||
|
||
@keyframes bounce-gentle {
|
||
0%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-10px);
|
||
}
|
||
}
|
||
|
||
.animate-pulse-slow {
|
||
animation: pulse-slow 4s ease-in-out infinite;
|
||
}
|
||
|
||
.animate-bounce-gentle {
|
||
animation: bounce-gentle 6s ease-in-out infinite;
|
||
}
|
||
</style>
|