fix email-alerts 768
This commit is contained in:
yuanshan
parent
60d228c3d8
commit
6679da97f6
@ -1,6 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
import { ref } from "vue";
|
||||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
const form = ref({
|
const form = ref({
|
||||||
firstName: "",
|
firstName: "",
|
||||||
@ -8,9 +8,8 @@ const form = ref({
|
|||||||
email: "",
|
email: "",
|
||||||
company: "",
|
company: "",
|
||||||
phone: "",
|
phone: "",
|
||||||
alertType: "all",
|
|
||||||
});
|
});
|
||||||
const submitted = ref(false);
|
const submitted = ref(true);
|
||||||
|
|
||||||
async function handleSubmit(e) {
|
async function handleSubmit(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -26,132 +25,271 @@ async function handleSubmit(e) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main ref="main">
|
<div class="alerts-container">
|
||||||
<main
|
<!-- Title Section -->
|
||||||
class="min-h-70vh flex flex-col items-center justify-center relative px-6 py-10"
|
<!-- 未提交 -->
|
||||||
|
<div v-if="!submitted" class="title-section">
|
||||||
|
<div class="title-decoration"></div>
|
||||||
|
<div class="title">E-Mail Alerts</div>
|
||||||
|
<div class="subtitle">* Required Fields</div>
|
||||||
|
</div>
|
||||||
|
<!-- 已提交 -->
|
||||||
|
<div v-else class="title-section">
|
||||||
|
<div class="title-decoration"></div>
|
||||||
|
<div class="title">Submitted successfully!</div>
|
||||||
|
<div class="subtitle">The information you submitted is as follows:</div>
|
||||||
|
</div>
|
||||||
|
<!-- Form Card -->
|
||||||
|
<div
|
||||||
|
class="form-card relative"
|
||||||
|
:style="{
|
||||||
|
width: '100%',
|
||||||
|
height: submitted ? '593px' : 'auto',
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<template v-if="!submitted">
|
||||||
class="w-[840px] max-w-90vw p-6 bg-white/95 rounded-2xl shadow-lg animate-bounce-in"
|
<form class="form-content" @submit="handleSubmit">
|
||||||
>
|
<div class="form-group mt-[36px]">
|
||||||
<template v-if="!submitted">
|
<label for="firstName">* First Name</label>
|
||||||
<h2
|
<input
|
||||||
class="text-2xl font-bold text-#ff7bac mb-3 text-center tracking-wide"
|
id="firstName"
|
||||||
>
|
v-model="form.firstName"
|
||||||
E-Mail Alerts
|
type="text"
|
||||||
</h2>
|
required
|
||||||
<p class="text-sm text-gray-500 mb-5 text-center">
|
/>
|
||||||
* Required Fields
|
</div>
|
||||||
</p>
|
<div class="form-group">
|
||||||
<form class="flex flex-col gap-4" @submit="handleSubmit">
|
<label for="lastName">* Last Name</label>
|
||||||
<div>
|
<input id="lastName" v-model="form.lastName" type="text" required />
|
||||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base"
|
</div>
|
||||||
>* First Name</label
|
<div class="form-group">
|
||||||
>
|
<label for="email">* Email</label>
|
||||||
<input
|
<input id="email" v-model="form.email" type="email" required />
|
||||||
v-model="form.firstName"
|
</div>
|
||||||
type="text"
|
<div class="form-group">
|
||||||
class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
<label for="company">* Company</label>
|
||||||
/>
|
<input id="company" v-model="form.company" type="text" required />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="phone">* Phone</label>
|
||||||
|
<input id="phone" v-model="form.phone" type="tel" />
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="submit-btn">Submit</button>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="submitted-data">
|
||||||
|
<div class="submitted-data-content">
|
||||||
|
<div class="submitted-row">
|
||||||
|
<span class="label">First Name：</span>
|
||||||
|
<span class="value">{{ form.firstName || "Not filled in" }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="submitted-row">
|
||||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base"
|
<span class="label">Last Name：</span>
|
||||||
>* Last Name</label
|
<span class="value">{{ form.lastName || "Not filled in" }}</span>
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-model="form.lastName"
|
|
||||||
type="text"
|
|
||||||
class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="submitted-row">
|
||||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base"
|
<span class="label">Email：</span>
|
||||||
>* Email</label
|
<span class="value">{{ form.email || "Not filled in" }}</span>
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-model="form.email"
|
|
||||||
type="email"
|
|
||||||
class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="submitted-row">
|
||||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base"
|
<span class="label">Company：</span>
|
||||||
>* Company</label
|
<span class="value">{{ form.company || "Not filled in" }}</span>
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-model="form.company"
|
|
||||||
type="text"
|
|
||||||
class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="submitted-row">
|
||||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base"
|
<span class="label">Phone：</span>
|
||||||
>Phone</label
|
<span class="value">{{ form.phone || "Not filled in" }}</span>
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-model="form.phone"
|
|
||||||
type="tel"
|
|
||||||
class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="w-full py-3.5 rounded-xl text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-3 submit-btn"
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<div
|
|
||||||
class="flex flex-col items-center justify-center min-h-[240px] animate-bounce-in"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"
|
|
||||||
></span>
|
|
||||||
<h2 class="text-xl font-bold text-#ff7bac mb-3">
|
|
||||||
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/90 rounded-xl shadow p-4 space-y-2 text-gray-800 text-base"
|
|
||||||
>
|
|
||||||
<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 || "(Not filled)" }}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="font-semibold">Alert Type：</span
|
|
||||||
>{{
|
|
||||||
form.alertType === "all" ? "All Alerts" : "Customize Alerts"
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</div>
|
<div class="submitted-bg"></div>
|
||||||
</main>
|
</template>
|
||||||
</main>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
/* Keep tablet background simple */
|
.alerts-container {
|
||||||
|
width: 650 * 2.5px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-section {
|
||||||
|
margin-top: 38 * 2.5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8 * 2.5px;
|
||||||
|
padding: 0 16 * 2.5px;
|
||||||
|
margin-bottom: 32 * 2.5px;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-decoration {
|
||||||
|
width: 58 * 2.5px;
|
||||||
|
height: 7 * 2.5px;
|
||||||
|
background: #ff7bac;
|
||||||
|
margin: auto 0;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: "PingFang SC", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32 * 2.5px;
|
||||||
|
line-height: 1.4em;
|
||||||
|
color: #000000;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-family: "PingFang SC", sans-serif;
|
||||||
|
font-size: 14 * 2.5px;
|
||||||
|
line-height: 1.375em;
|
||||||
|
color: #455363;
|
||||||
|
letter-spacing: 0.48 * 2.5px;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-card {
|
||||||
|
width: 100%;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 16 * 2.5px;
|
||||||
|
padding: 24 * 2.5px;
|
||||||
|
box-shadow: 0px 3 * 2.5px 14 * 2.5px 0px rgba(0, 0, 0, 0.16);
|
||||||
|
animation: fade-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-content {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16 * 2.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8 * 2.5px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-family: "PingFang SC", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14 * 2.5px;
|
||||||
|
line-height: 1.375em;
|
||||||
|
color: #000000;
|
||||||
|
letter-spacing: 0.48 * 2.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
height: 38 * 2.5px;
|
||||||
|
border: 1 * 2.5px solid #e0e0e6;
|
||||||
|
border-radius: 8 * 2.5px;
|
||||||
|
padding: 0 12 * 2.5px;
|
||||||
|
font-size: 14 * 2.5px;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: #ff7bac;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.submit-btn {
|
.submit-btn {
|
||||||
background: linear-gradient(to right, #ff7bac, #00ffff);
|
height: 60 * 2.5px;
|
||||||
|
background: #ff7bac;
|
||||||
|
border-radius: 8 * 2.5px;
|
||||||
|
border: none;
|
||||||
|
font-family: "PingFang SC", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24 * 2.5px;
|
||||||
|
line-height: 32 * 2.5px;
|
||||||
|
color: white;
|
||||||
|
letter-spacing: 1.2 * 2.5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
margin-top: 8 * 2.5px; // 16px (from figma form-group gap) + 8px = 24px
|
||||||
|
margin-bottom: 16 * 2.5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ff7bac;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-info {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: #455363;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submitted-data {
|
||||||
|
padding: 36 * 2.5px 24 * 2.5px 24 * 2.5px;
|
||||||
|
border-radius: 16 * 2.5px;
|
||||||
|
width: 678 * 2.5px;
|
||||||
|
height: 428 * 2.5px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.submitted-bg {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url("@/assets/image/768/email-alerts-submit.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: bottom;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submitted-data-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16 * 2.5px;
|
||||||
|
padding: 16 * 2.5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submitted-row {
|
||||||
|
display: flex;
|
||||||
|
font-family: "PingFang SC", sans-serif;
|
||||||
|
font-size: 14 * 2.5px;
|
||||||
|
line-height: 1.375em;
|
||||||
|
letter-spacing: 0.48 * 2.5px;
|
||||||
|
width: 280 * 2.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000000;
|
||||||
|
width: 110 * 2.5px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-weight: 400;
|
||||||
|
color: #455363;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user