fix email-alerts 768
This commit is contained in:
yuanshan
parent
60d228c3d8
commit
6679da97f6
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import { ref } from "vue";
|
||||
|
||||
import axios from "axios";
|
||||
const form = ref({
|
||||
firstName: "",
|
||||
@ -8,9 +8,8 @@ const form = ref({
|
||||
email: "",
|
||||
company: "",
|
||||
phone: "",
|
||||
alertType: "all",
|
||||
});
|
||||
const submitted = ref(false);
|
||||
const submitted = ref(true);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
@ -26,132 +25,271 @@ async function handleSubmit(e) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main ref="main">
|
||||
<main
|
||||
class="min-h-70vh flex flex-col items-center justify-center relative px-6 py-10"
|
||||
<div class="alerts-container">
|
||||
<!-- Title Section -->
|
||||
<!-- 未提交 -->
|
||||
<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
|
||||
class="w-[840px] max-w-90vw p-6 bg-white/95 rounded-2xl shadow-lg animate-bounce-in"
|
||||
>
|
||||
<template v-if="!submitted">
|
||||
<h2
|
||||
class="text-2xl font-bold text-#ff7bac mb-3 text-center tracking-wide"
|
||||
>
|
||||
E-Mail Alerts
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 mb-5 text-center">
|
||||
* Required Fields
|
||||
</p>
|
||||
<form class="flex flex-col gap-4" @submit="handleSubmit">
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base"
|
||||
>* First Name</label
|
||||
>
|
||||
<input
|
||||
v-model="form.firstName"
|
||||
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"
|
||||
/>
|
||||
<template v-if="!submitted">
|
||||
<form class="form-content" @submit="handleSubmit">
|
||||
<div class="form-group mt-[36px]">
|
||||
<label for="firstName">* First Name</label>
|
||||
<input
|
||||
id="firstName"
|
||||
v-model="form.firstName"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lastName">* Last Name</label>
|
||||
<input id="lastName" v-model="form.lastName" type="text" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">* Email</label>
|
||||
<input id="email" v-model="form.email" type="email" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<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>
|
||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base"
|
||||
>* Last Name</label
|
||||
>
|
||||
<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 class="submitted-row">
|
||||
<span class="label">Last Name：</span>
|
||||
<span class="value">{{ form.lastName || "Not filled in" }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base"
|
||||
>* Email</label
|
||||
>
|
||||
<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 class="submitted-row">
|
||||
<span class="label">Email：</span>
|
||||
<span class="value">{{ form.email || "Not filled in" }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base"
|
||||
>* Company</label
|
||||
>
|
||||
<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 class="submitted-row">
|
||||
<span class="label">Company：</span>
|
||||
<span class="value">{{ form.company || "Not filled in" }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base"
|
||||
>Phone</label
|
||||
>
|
||||
<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 class="submitted-row">
|
||||
<span class="label">Phone：</span>
|
||||
<span class="value">{{ form.phone || "Not filled in" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
<div class="submitted-bg"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user