scout666/fiee-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix email-alerts

Browse Source
This commit is contained in:
yuanshan 2025-09-28 18:28:22 +08:00
parent 7a7751567d
commit fd8b03ad3e
4 changed files with 91 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/email-alerts-submit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

4
src/views/contacts/size1920/index.vue
View File

@ -39,14 +39,16 @@ function copyEmail() {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
padding: 0 16px;
margin-bottom: 32px;
}
.title-decoration {
width: 58px;
height: 7px;
background: #ff7bac;
margin: auto 0;
margin-top: 43px;
}
.contact-title {

126
src/views/email-alerts/size1920/index.vue
View File

@ -27,14 +27,20 @@ async function handleSubmit(e) {
<template>
<div class="alerts-container">
<!-- Title Section -->
<div class="title-section">
<!-- 未提交 -->
<div v-if="!submitted" class="title-section">
<div class="title-decoration"></div>
<div class="title">E-Mail Alerts</div>
<p class="subtitle">* Required Fields</p>
<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">
<div class="form-card relative">
<template v-if="!submitted">
<form class="form-content" @submit="handleSubmit">
<div class="form-group">
@ -66,31 +72,31 @@ async function handleSubmit(e) {
</form>
</template>
<template v-else>
<div class="success-message">
<h2 class="success-title">Submitted successfully!</h2>
<div class="success-info">
The information you submitted is as follows:
</div>
<div class="submitted-data">
<div>
<span class="font-semibold">First Name：</span
>{{ form.firstName }}
<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>
<span class="font-semibold">Last Name：</span>{{ form.lastName }}
<div class="submitted-row">
<span class="label">Last Name：</span>
<span class="value">{{ form.lastName || "Not filled in" }}</span>
</div>
<div>
<span class="font-semibold">Email：</span>{{ form.email }}
<div class="submitted-row">
<span class="label">Email：</span>
<span class="value">{{ form.email || "Not filled in" }}</span>
</div>
<div>
<span class="font-semibold">Company：</span>{{ form.company }}
<div class="submitted-row">
<span class="label">Company：</span>
<span class="value">{{ form.company || "Not filled in" }}</span>
</div>
<div>
<span class="font-semibold">Phone：</span
>{{ form.phone || "Not filled in" }}
<div class="submitted-row">
<span class="label">Phone：</span>
<span class="value">{{ form.phone || "Not filled in" }}</span>
</div>
</div>
</div>
<div class="submitted-bg"></div>
</template>
</div>
</div>
@ -103,20 +109,25 @@ async function handleSubmit(e) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
padding: 0 16px;
margin-bottom: 32px;
align-self: center;
}
.title-decoration {
width: 58px;
height: 7px;
background: #ff7bac;
margin: auto 0;
margin-top: 43px;
align-self: center;
}
.title {
@ -134,19 +145,23 @@ async function handleSubmit(e) {
line-height: 22px;
color: #455363;
letter-spacing: 0.48px;
align-self: center;
}
.form-card {
width: 100%;
max-width: 932px;
background-color: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0px 3px 14px 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: 16px;
@ -200,11 +215,6 @@ async function handleSubmit(e) {
}
}
.success-message {
text-align: center;
padding: 40px;
}
.success-title {
font-size: 24px;
font-weight: bold;
@ -218,17 +228,51 @@ async function handleSubmit(e) {
}
.submitted-data {
display: inline-block;
text-align: left;
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
div {
margin-bottom: 8px;
}
.font-semibold {
font-weight: 600;
}
padding: 36px 24px 24px;
border-radius: 16px;
width: 678px;
height: 428px;
flex-shrink: 0;
}
.submitted-bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("@/assets/image/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: 16px;
padding: 16px 0;
}
.submitted-row {
display: flex;
font-family: "PingFang SC", sans-serif;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.48px;
width: 280px;
}
.label {
font-weight: 500;
color: #000000;
width: 110px;
flex-shrink: 0;
}
.value {
font-weight: 400;
color: #455363;
}
@keyframes fade-in {

5
src/views/stock-quote/size1920/index.vue
View File

@ -85,12 +85,13 @@ getStockQuate();
gap: 16px;
padding: 0 16px;
}
.title-decoration {
width: 58px;
height: 7px;
background: #ff7bac;
margin: auto 0;
margin-top: 33px;
margin-top: 43px;
}
.stock-title {
@ -119,7 +120,7 @@ getStockQuate();
.quote-layout {
display: flex;
flex-direction: row;
margin-top: 20px;
margin-top: 10px;
}
.price-card {