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; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
margin-bottom: 32px;
padding: 0 16px; padding: 0 16px;
margin-bottom: 32px;
} }
.title-decoration { .title-decoration {
width: 58px; width: 58px;
height: 7px; height: 7px;
background: #ff7bac; background: #ff7bac;
margin: auto 0;
margin-top: 43px;
} }
.contact-title { .contact-title {

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

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

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

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