80 lines
4.0 KiB
Vue
80 lines
4.0 KiB
Vue
<script setup>
|
||
import { ref } from "vue";
|
||
|
||
const form = ref({
|
||
firstName: "",
|
||
lastName: "",
|
||
email: "",
|
||
company: "",
|
||
phone: "",
|
||
alertType: "all"
|
||
});
|
||
const submitted = ref(false);
|
||
|
||
function handleSubmit(e) {
|
||
e.preventDefault();
|
||
submitted.value = true;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<header class="header">
|
||
</header>
|
||
<main ref="main" class="relative min-h-[80vh] flex-center bg-[url('@/assets/image/bg-pc.png')] overflow-hidden">
|
||
<!-- 粒子背景 -->
|
||
<div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
|
||
<!-- 表单卡片/提交成功卡片 -->
|
||
<div class="relative z-10 w-[480px] max-w-[90vw] p-10 bg-white/80 rounded-3xl shadow-2xl backdrop-blur-md animate-bounce-in">
|
||
<template v-if="!submitted">
|
||
<h2 class="text-3xl font-bold text-#8A5AFB mb-2 tracking-wide">E-Mail Alerts</h2>
|
||
<p class="text-sm text-gray-500 mb-6">* Required Fields</p>
|
||
<form class="space-y-4" @submit="handleSubmit">
|
||
<div>
|
||
<label class="block text-gray-700 font-semibold mb-1">* First Name</label>
|
||
<input v-model="form.firstName" type="text" required class="w-full px-4 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||
</div>
|
||
<div>
|
||
<label class="block text-gray-700 font-semibold mb-1">* Last Name</label>
|
||
<input v-model="form.lastName" type="text" required class="w-full px-4 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||
</div>
|
||
<div>
|
||
<label class="block text-gray-700 font-semibold mb-1">* Email</label>
|
||
<input v-model="form.email" type="email" required class="w-full px-4 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||
</div>
|
||
<div>
|
||
<label class="block text-gray-700 font-semibold mb-1">* Company</label>
|
||
<input v-model="form.company" type="text" required class="w-full px-4 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||
</div>
|
||
<div>
|
||
<label class="block text-gray-700 font-semibold mb-1">Phone</label>
|
||
<input v-model="form.phone" type="tel" class="w-full px-4 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||
</div>
|
||
<button type="submit" class="w-full py-3 rounded-xl bg-#8A5AFB text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200">
|
||
Submit
|
||
</button>
|
||
</form>
|
||
</template>
|
||
<template v-else>
|
||
<div class="flex flex-col items-center justify-center min-h-[300px] animate-bounce-in">
|
||
<span class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"></span>
|
||
<h2 class="text-2xl font-bold text-#8A5AFB mb-2">Submitted successfully!</h2>
|
||
<div class="text-gray-700 text-base mb-4">The information you submitted is as follows:</div>
|
||
<div class="w-full bg-white/80 rounded-xl shadow p-4 space-y-2 text-gray-800">
|
||
<div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
|
||
<div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
|
||
<div><span class="font-semibold">Email：</span>{{ form.email }}</div>
|
||
<div><span class="font-semibold">Company：</span>{{ form.company }}</div>
|
||
<div><span class="font-semibold">Phone：</span>{{ form.phone || '（未填写）' }}</div>
|
||
<div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</main>
|
||
<footer>
|
||
</footer>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
/* 可选：自定义粒子或渐变动画背景 */
|
||
</style> |