更新路由配置，新增电子邮件提醒页面；修复联系人页面的背景样式，优化移动端和桌面端的布局。
This commit is contained in:
Phoenix
parent
f6eee146d9
commit
4a6a0ab0a0
@ -17,11 +17,17 @@ const routes = [
|
||||
// next()
|
||||
// }
|
||||
},
|
||||
|
||||
{
|
||||
path: '/contacts',
|
||||
name: 'contacts',
|
||||
component: () => import('@/views/contacts/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/email-alerts',
|
||||
name: 'email-alerts',
|
||||
component: () => import('@/views/email-alerts/index.vue'),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
@ -11,7 +11,7 @@ function copyEmail() {
|
||||
<header className="header">
|
||||
|
||||
</header>
|
||||
<main ref="main" class="flex-center min-h-80vh bg-[url('@/assets/image/bg-pc.png')] rounded-3xl to-accent w-100vw animate-fade-in">
|
||||
<main ref="main" class="flex-center min-h-80vh bg-[url('@/assets/image/bg-pc.png')] rounded-3xl to-accent w-100vw animate-fade-in bg-[url('@/assets/image/bg-pc.png')]">
|
||||
<div class="w-full flex flex-col items-center gap-6 py-16 px-8">
|
||||
<h1 class="text-5xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
|
||||
<div class="text-3xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
|
||||
|
||||
@ -9,7 +9,7 @@ function copyEmail() {
|
||||
<header class="header-mobile">
|
||||
<!-- 可根据需要添加移动端头部内容 -->
|
||||
</header>
|
||||
<main ref="main" class="flex flex-col items-center from-white/80 to-white/40 backdrop-blur-md rounded-xl shadow-lg border border-gradient-to-br from-primary to-accent w-[100vw] mt-8 animate-fade-in px-4 py-8 bg-[url('@/assets/image/background.png')]">
|
||||
<main ref="main" class="flex flex-col items-center from-primary to-accent w-[100vw] mt-8 animate-fade-in px-4 py-8 bg-[url('@/assets/image/bg-mobile.png')]">
|
||||
<div class="w-full flex flex-col items-center gap-4 px-2">
|
||||
<h1 class="text-2xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
|
||||
<div class="text-lg font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
|
||||
|
||||
34
src/views/email-alerts/index.vue
Normal file
34
src/views/email-alerts/index.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
import size375 from "@/views/email-alerts/size375/index.vue";
|
||||
import size768 from "@/views/email-alerts/size768/index.vue";
|
||||
import size1440 from "@/views/email-alerts/size1440/index.vue";
|
||||
import size1920 from "@/views/email-alerts/size1920/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const router = useRouter();
|
||||
const { width } = useWindowSize();
|
||||
const { t } = useI18n();
|
||||
|
||||
const viewComponent = computed(() => {
|
||||
const viewWidth = width.value;
|
||||
if (viewWidth <= 450) {
|
||||
return size375;
|
||||
} else if (viewWidth <= 1100) {
|
||||
return size768;
|
||||
} else if (viewWidth <= 1500) {
|
||||
return size1440;
|
||||
} else if (viewWidth <= 1920 || viewWidth > 1920) {
|
||||
return size1920;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="viewComponent" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
22
src/views/email-alerts/size1440/index.vue
Normal file
22
src/views/email-alerts/size1440/index.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
1440
|
||||
</header>
|
||||
<main ref="main">
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
80
src/views/email-alerts/size1920/index.vue
Normal file
80
src/views/email-alerts/size1920/index.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const form = ref({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
company: "",
|
||||
phone: "",
|
||||
alertType: "all"
|
||||
});
|
||||
const submitted = ref(false);
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
submitted.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="header">
|
||||
</header>
|
||||
<main ref="main" class="relative min-h-[80vh] flex-center bg-[url('@/assets/image/bg-pc.png')] overflow-hidden">
|
||||
<!-- 粒子背景 -->
|
||||
<div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
|
||||
<!-- 表单卡片/提交成功卡片 -->
|
||||
<div class="relative z-10 w-[480px] max-w-[90vw] p-10 bg-white/80 rounded-3xl shadow-2xl backdrop-blur-md animate-bounce-in">
|
||||
<template v-if="!submitted">
|
||||
<h2 class="text-3xl font-bold text-primary mb-2 tracking-wide">E-Mail Alerts</h2>
|
||||
<p class="text-sm text-gray-500 mb-6">* Required Fields</p>
|
||||
<form class="space-y-4" @submit="handleSubmit">
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1">* First Name</label>
|
||||
<input v-model="form.firstName" type="text" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:(border-primary ring-2 ring-primary/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1">* Last Name</label>
|
||||
<input v-model="form.lastName" type="text" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:(border-primary ring-2 ring-primary/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1">* Email</label>
|
||||
<input v-model="form.email" type="email" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:(border-primary ring-2 ring-primary/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1">* Company</label>
|
||||
<input v-model="form.company" type="text" required class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:(border-primary ring-2 ring-primary/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
</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-4 py-2 rounded-lg border border-gray-300 focus:(border-primary ring-2 ring-primary/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
</div>
|
||||
<button type="submit" class="w-full py-3 rounded-xl bg-primary text-white font-bold text-lg shadow-lg hover:(bg-primary/90 scale-105) active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex flex-col items-center justify-center min-h-[300px] animate-bounce-in">
|
||||
<span class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"></span>
|
||||
<h2 class="text-2xl font-bold text-primary mb-2">提交成功！</h2>
|
||||
<div class="text-gray-700 text-base mb-4">您提交的信息如下：</div>
|
||||
<div class="w-full bg-white/80 rounded-xl shadow p-4 space-y-2 text-gray-800">
|
||||
<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 || '（未填写）' }}</div>
|
||||
<div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 可选：自定义粒子或渐变动画背景 */
|
||||
</style>
|
||||
22
src/views/email-alerts/size375/index.vue
Normal file
22
src/views/email-alerts/size375/index.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
375
|
||||
</header>
|
||||
<main ref="main">
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
22
src/views/email-alerts/size768/index.vue
Normal file
22
src/views/email-alerts/size768/index.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
768
|
||||
</header>
|
||||
<main ref="main">
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user