fix 1440
This commit is contained in:
yuanshan
parent
fd8faedc12
commit
e3196f5619
@ -66,8 +66,8 @@ function copyEmail() {
|
||||
|
||||
.contact-card {
|
||||
display: flex;
|
||||
width: 1240px;
|
||||
height: 860px;
|
||||
width: 100%;
|
||||
height: 771px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
import axios from "axios";
|
||||
const form = ref({
|
||||
firstName: "",
|
||||
@ -7,7 +8,6 @@ const form = ref({
|
||||
email: "",
|
||||
company: "",
|
||||
phone: "",
|
||||
alertType: "all",
|
||||
});
|
||||
const submitted = ref(false);
|
||||
|
||||
@ -25,124 +25,269 @@ async function handleSubmit(e) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main ref="main" class="relative min-h-[80vh] flex-center overflow-hidden">
|
||||
<!-- 粒子背景 -->
|
||||
<div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
|
||||
<!-- 表单卡片/提交成功卡片 -->
|
||||
<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 mt-[60px]">
|
||||
<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="relative z-10 w-[600px] max-w-[90vw] p-8 bg-white/80 rounded-2xl shadow-xl backdrop-blur-md animate-bounce-in"
|
||||
class="form-card relative"
|
||||
:style="{
|
||||
width: submitted ? '678px' : '100%',
|
||||
height: submitted ? '428px' : 'auto',
|
||||
}"
|
||||
>
|
||||
<template v-if="!submitted">
|
||||
<h2 class="text-2xl font-bold text-#ff7bac mb-2 tracking-wide">
|
||||
E-Mail Alerts
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 mb-5">* Required Fields</p>
|
||||
<form class="space-y-3" @submit="handleSubmit">
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1"
|
||||
>* First Name</label
|
||||
>
|
||||
<form class="form-content" @submit="handleSubmit">
|
||||
<div class="form-group">
|
||||
<label for="firstName">* First Name</label>
|
||||
<input
|
||||
id="firstName"
|
||||
v-model="form.firstName"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1"
|
||||
>* Last Name</label
|
||||
>
|
||||
<input
|
||||
v-model="form.lastName"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
<div class="form-group">
|
||||
<label for="lastName">* Last Name</label>
|
||||
<input id="lastName" v-model="form.lastName" type="text" required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1"
|
||||
>* Email</label
|
||||
>
|
||||
<input
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
<div class="form-group">
|
||||
<label for="email">* Email</label>
|
||||
<input id="email" v-model="form.email" type="email" required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1"
|
||||
>* Company</label
|
||||
>
|
||||
<input
|
||||
v-model="form.company"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
<div class="form-group">
|
||||
<label for="company">* Company</label>
|
||||
<input id="company" v-model="form.company" type="text" required />
|
||||
</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-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
<div class="form-group">
|
||||
<label for="phone">* Phone</label>
|
||||
<input id="phone" v-model="form.phone" type="tel" required />
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full py-2.5 rounded-xl text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 submit-btn"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
<button type="submit" class="submit-btn">Submit</button>
|
||||
</form>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center min-h-[280px] animate-bounce-in"
|
||||
>
|
||||
<span
|
||||
class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"
|
||||
></span>
|
||||
<h2 class="text-xl font-bold text-#ff7bac mb-2">
|
||||
Submitted successfully!
|
||||
</h2>
|
||||
<div class="text-gray-700 text-sm mb-3">
|
||||
The information you submitted is as follows:
|
||||
</div>
|
||||
<div
|
||||
class="w-full bg-white/80 rounded-xl shadow p-3 space-y-2 text-gray-800 text-sm"
|
||||
>
|
||||
<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>
|
||||
<div>
|
||||
<span class="font-semibold">Alert Type：</span
|
||||
>{{
|
||||
form.alertType === "all" ? "All Alerts" : "Customize Alerts"
|
||||
}}
|
||||
<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>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 可选：自定义粒子或渐变动画背景 */
|
||||
.alerts-container {
|
||||
width: 1240px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 40px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
width: 58px;
|
||||
height: 7px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 43px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 40px;
|
||||
line-height: 56px;
|
||||
color: #000000;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
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;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
label {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
letter-spacing: 0.48px;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 56px;
|
||||
border: 1px solid #e0e0e6;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&:focus {
|
||||
border-color: #ff7bac;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit-btn {
|
||||
background: linear-gradient(to right, #ff7bac, #00ffff);
|
||||
height: 60px;
|
||||
background: #ff7bac;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: white;
|
||||
letter-spacing: 1.2px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
margin-top: 8px; // 16px (from figma form-group gap) + 8px = 24px
|
||||
|
||||
&: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: 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/1920/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 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -40,7 +40,13 @@ async function handleSubmit(e) {
|
||||
<div class="subtitle">The information you submitted is as follows:</div>
|
||||
</div>
|
||||
<!-- Form Card -->
|
||||
<div class="form-card relative">
|
||||
<div
|
||||
class="form-card relative"
|
||||
:style="{
|
||||
width: submitted ? '70%' : '100%',
|
||||
height: submitted ? '448px' : 'auto',
|
||||
}"
|
||||
>
|
||||
<template v-if="!submitted">
|
||||
<form class="form-content" @submit="handleSubmit">
|
||||
<div class="form-group">
|
||||
@ -65,7 +71,7 @@ async function handleSubmit(e) {
|
||||
<input id="company" v-model="form.company" type="text" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">Phone</label>
|
||||
<label for="phone">* Phone</label>
|
||||
<input id="phone" v-model="form.phone" type="tel" />
|
||||
</div>
|
||||
<button type="submit" class="submit-btn">Submit</button>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<main class="mx-auto">
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="title mb-[20px]">
|
||||
<div class="title">
|
||||
{{ t("press_releases.title") }}
|
||||
</div>
|
||||
</div>
|
||||
@ -655,7 +655,6 @@ const handleClickOutside = (event) => {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
gap: 21px;
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/image/1920/product-introduction-img2.png"
|
||||
src="@/assets/image/1440/product-introduction-img2.png"
|
||||
alt="background"
|
||||
class="hero-bg-img"
|
||||
/>
|
||||
@ -109,7 +109,7 @@
|
||||
<div class="solutions-list">
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/1920/product-introduction-icon1.png"
|
||||
src="@/assets/image/1440/product-introduction-icon1.png"
|
||||
alt="KOL Brand Promotion"
|
||||
class="solution-icon"
|
||||
/>
|
||||
@ -125,7 +125,7 @@
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/1920/product-introduction-icon2.png"
|
||||
src="@/assets/image/1440/product-introduction-icon2.png"
|
||||
alt="Content Creation Support"
|
||||
class="solution-icon"
|
||||
/>
|
||||
@ -141,7 +141,7 @@
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/1920/product-introduction-icon3.png"
|
||||
src="@/assets/image/1440/product-introduction-icon3.png"
|
||||
alt="Account Operation"
|
||||
class="solution-icon"
|
||||
/>
|
||||
@ -158,9 +158,10 @@
|
||||
</div>
|
||||
<div class="solution-image-container">
|
||||
<img
|
||||
src="@/assets/image/1920/product-introduction-img1.png"
|
||||
src="@/assets/image/1440/product-introduction-img1.png"
|
||||
alt="Value Added Solutions"
|
||||
class="solution-image"
|
||||
style="width: 434px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -228,7 +229,7 @@
|
||||
|
||||
<section class="cta-section">
|
||||
<img
|
||||
src="@/assets/image/1920/product-introduction-img5.png"
|
||||
src="@/assets/image/1440/product-introduction-img5.png"
|
||||
alt="background"
|
||||
class="cta-bg-img"
|
||||
/>
|
||||
@ -253,7 +254,7 @@
|
||||
</div>
|
||||
<div class="cta-qr-code">
|
||||
<img
|
||||
src="@/assets/image/1920/product-introduction-img6.png"
|
||||
src="@/assets/image/1440/product-introduction-img6.png"
|
||||
alt="QR Code"
|
||||
/>
|
||||
</div>
|
||||
@ -274,7 +275,7 @@
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-image: url("@/assets/image/1920/product-introduction-img3.png");
|
||||
background-image: url("@/assets/image/1440/product-introduction-img3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: top;
|
||||
@ -296,10 +297,9 @@
|
||||
}
|
||||
.hero-bg-img {
|
||||
position: absolute;
|
||||
bottom: -84px;
|
||||
bottom: -204px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
z-index: 1;
|
||||
}
|
||||
.core-value-card {
|
||||
@ -317,7 +317,7 @@
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@ -361,7 +361,7 @@
|
||||
.features-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
@ -385,6 +385,8 @@
|
||||
color: #455363;
|
||||
letter-spacing: 0.48px;
|
||||
padding: 0 16px;
|
||||
text-align: justify;
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
}
|
||||
|
||||
.solutions-section {
|
||||
@ -394,13 +396,13 @@
|
||||
}
|
||||
.solutions-content {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
gap: 16px;
|
||||
}
|
||||
.solutions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
width: 466px;
|
||||
width: 620px;
|
||||
}
|
||||
.solution-item {
|
||||
text-align: left;
|
||||
@ -425,15 +427,27 @@
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.solution-description {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
align-self: stretch;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48px;
|
||||
padding: 0 16px;
|
||||
|
||||
text-align: justify;
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
/* 正文 */
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
letter-spacing: 0.48px;
|
||||
}
|
||||
.solution-image-container {
|
||||
width: 434px;
|
||||
width: 50%;
|
||||
border-radius: 16px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.solution-image {
|
||||
width: 100%;
|
||||
@ -445,7 +459,7 @@
|
||||
.advantages-section {
|
||||
margin-top: 80px;
|
||||
padding: 80px 0;
|
||||
background-image: url("@/assets/image/1920/product-introduction-img4.png");
|
||||
background-image: url("@/assets/image/1440/product-introduction-img4.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
@ -456,7 +470,7 @@
|
||||
width: 1240px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -469,7 +483,7 @@
|
||||
width: 466px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: 32px;
|
||||
}
|
||||
.advantage-item {
|
||||
display: flex;
|
||||
@ -541,7 +555,7 @@
|
||||
.cta-bg-img {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 201px;
|
||||
left: 355px;
|
||||
width: 530px;
|
||||
height: 268px;
|
||||
opacity: 0.8;
|
||||
@ -549,7 +563,7 @@
|
||||
}
|
||||
.vertical-line {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
height: 19px;
|
||||
background: #ff7bac;
|
||||
flex-shrink: 0;
|
||||
margin-top: 6px;
|
||||
@ -586,13 +600,13 @@
|
||||
left: 0;
|
||||
}
|
||||
.grid-lines .line-2 {
|
||||
left: 233px;
|
||||
left: 310px;
|
||||
}
|
||||
.grid-lines .line-3 {
|
||||
left: 466px;
|
||||
left: 620px;
|
||||
}
|
||||
.grid-lines .line-4 {
|
||||
left: 699px;
|
||||
left: 930px;
|
||||
}
|
||||
.grid-lines .line-5 {
|
||||
right: 0;
|
||||
|
||||
@ -84,7 +84,7 @@ getStockQuate();
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 0 16px;
|
||||
margin-top: 40px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
@ -126,7 +126,7 @@ getStockQuate();
|
||||
|
||||
.price-card {
|
||||
width: 616px;
|
||||
height: 555px;
|
||||
height: 600px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user