fix page style
This commit is contained in:
yuanshan
parent
c6a1188488
commit
7454cd99ab
Binary file not shown.
|
Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 874 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 272 KiB After Width: | Height: | Size: 874 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 8.2 KiB |
@ -6,7 +6,7 @@
|
||||
>
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage width="80" height="80" :src="FiEELogo" preview-disabled />
|
||||
<NImage width="100" height="100" :src="FiEELogo" preview-disabled />
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<NMenu
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
>
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage width="80" height="80" :src="FiEELogo" preview-disabled />
|
||||
<NImage width="90" height="90" :src="FiEELogo" preview-disabled />
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<NMenu
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage
|
||||
style="width: 60px; height: 60px; max-width: 100%"
|
||||
style="width: 120px; height: 30px; max-width: 100%"
|
||||
:src="FiEELogo"
|
||||
preview-disabled
|
||||
/>
|
||||
|
||||
@ -137,7 +137,6 @@ const solutions = computed(() => [
|
||||
}
|
||||
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -138,7 +138,6 @@ const solutions = computed(() => [
|
||||
}
|
||||
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -152,7 +152,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
|
||||
<style scoped>
|
||||
.role-badge.chair {
|
||||
color: orange;
|
||||
color: #00baff;
|
||||
}
|
||||
.title h1 {
|
||||
position: relative;
|
||||
@ -165,7 +165,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: #895bff;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
@ -235,7 +235,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: #f9f6ff;
|
||||
background: #fff0f6;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
@ -359,7 +359,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
}
|
||||
}
|
||||
.director-link {
|
||||
color: #895bff;
|
||||
color: #ff7bac;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
@ -151,7 +151,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
<style scoped>
|
||||
/* 紫色主题变量 */
|
||||
.role-badge.chair {
|
||||
color: orange;
|
||||
color: #00baff;
|
||||
}
|
||||
:root {
|
||||
--primary: #895bff;
|
||||
@ -178,7 +178,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: #895bff;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
@ -232,7 +232,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: #f9f6ff;
|
||||
background: #fff0f6;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
@ -356,7 +356,7 @@ const getCommitteeRole = (name, committee) => {
|
||||
}
|
||||
}
|
||||
.director-link {
|
||||
color: #895bff;
|
||||
color: #ff7bac;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
@ -161,11 +161,6 @@ const getInitials = (name) => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.role-badge.chair {
|
||||
background-color: #e6f2ff;
|
||||
color: #0066cc;
|
||||
}
|
||||
|
||||
.role-badge.member {
|
||||
background-color: #f0f0f0;
|
||||
color: #555;
|
||||
@ -181,7 +176,7 @@ const getInitials = (name) => {
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: #895bff;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
@ -260,6 +255,7 @@ const getInitials = (name) => {
|
||||
}
|
||||
|
||||
.card-header {
|
||||
color: #ff7bac;
|
||||
padding: 1.25rem;
|
||||
background: var(--bg-light);
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
@ -326,8 +322,8 @@ const getInitials = (name) => {
|
||||
}
|
||||
|
||||
.role-badge.chair {
|
||||
background: rgba(137, 91, 255, 0.15);
|
||||
color: var(--primary-dark);
|
||||
background-color: #e6f2ff;
|
||||
color: #00baff;
|
||||
}
|
||||
|
||||
.committee-name {
|
||||
|
||||
@ -163,7 +163,7 @@ const getInitials = (name) => {
|
||||
|
||||
.role-badge.chair {
|
||||
background-color: #e6f2ff;
|
||||
color: #0066cc;
|
||||
color: #00baff;
|
||||
}
|
||||
|
||||
.role-badge.member {
|
||||
@ -181,7 +181,7 @@ const getInitials = (name) => {
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: #895bff;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
@ -260,6 +260,7 @@ const getInitials = (name) => {
|
||||
}
|
||||
|
||||
.card-header {
|
||||
color: #ff7bac;
|
||||
padding: 1.25rem;
|
||||
background: var(--bg-light);
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
@ -325,11 +326,6 @@ const getInitials = (name) => {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.role-badge.chair {
|
||||
background: rgba(137, 91, 255, 0.15);
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.committee-name {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.8;
|
||||
|
||||
@ -66,7 +66,6 @@ const otherDirectors = [
|
||||
}
|
||||
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -189,7 +189,6 @@ const stats = ref([
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -3,20 +3,38 @@ import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
function copyEmail() {
|
||||
navigator.clipboard.writeText('fiee@dlkadvisory.com');
|
||||
navigator.clipboard.writeText("fiee@dlkadvisory.com");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<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')]" >
|
||||
<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-5 py-12 px-6">
|
||||
<h1 class="text-4xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
|
||||
<div class="text-2xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
|
||||
<div class="text-xl text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
|
||||
<div class="text-lg text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
|
||||
<h1
|
||||
class="text-4xl font-bold text-primary animate-fade-in-down animate-delay-0"
|
||||
>
|
||||
Investor Contacts
|
||||
</h1>
|
||||
<div
|
||||
class="text-2xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
|
||||
>
|
||||
FiEE Inc.
|
||||
</div>
|
||||
<div class="text-xl text-#ff7bac animate-fade-in-down animate-delay-400">
|
||||
Investor Relations
|
||||
</div>
|
||||
<div
|
||||
class="text-lg text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600"
|
||||
>
|
||||
<span>Email:</span>
|
||||
<span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
|
||||
<span
|
||||
class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
|
||||
@click="copyEmail"
|
||||
>fiee@dlkadvisory.com</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -37,9 +55,16 @@ function copyEmail() {
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
.animate-delay-0 { animation-delay: 0s; }
|
||||
.animate-delay-200 { animation-delay: 0.2s; }
|
||||
.animate-delay-400 { animation-delay: 0.4s; }
|
||||
.animate-delay-600 { animation-delay: 0.6s; }
|
||||
.animate-delay-0 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.animate-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.animate-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.animate-delay-600 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -3,28 +3,43 @@ import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
function copyEmail() {
|
||||
navigator.clipboard.writeText('fiee@dlkadvisory.com');
|
||||
navigator.clipboard.writeText("fiee@dlkadvisory.com");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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 bg-[url('@/assets/image/bg-pc.png')]">
|
||||
<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 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>
|
||||
<div class="text-2xl text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
|
||||
<div class="text-xl text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
|
||||
<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>
|
||||
<div class="text-2xl text-#ff7bac animate-fade-in-down animate-delay-400">
|
||||
Investor Relations
|
||||
</div>
|
||||
<div
|
||||
class="text-xl text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600"
|
||||
>
|
||||
<span>Email:</span>
|
||||
<span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
|
||||
<span
|
||||
class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
|
||||
@click="copyEmail"
|
||||
>fiee@dlkadvisory.com</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<footer></footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -42,9 +57,16 @@ function copyEmail() {
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
.animate-delay-0 { animation-delay: 0s; }
|
||||
.animate-delay-200 { animation-delay: 0.2s; }
|
||||
.animate-delay-400 { animation-delay: 0.4s; }
|
||||
.animate-delay-600 { animation-delay: 0.6s; }
|
||||
.animate-delay-0 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.animate-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.animate-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.animate-delay-600 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,24 +1,43 @@
|
||||
<script setup>
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
function copyEmail() {
|
||||
navigator.clipboard.writeText('fiee@dlkadvisory.com');
|
||||
navigator.clipboard.writeText("fiee@dlkadvisory.com");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<main ref="main" class="flex flex-col items-center from-primary to-accent w-[100vw] mt-8 animate-fade-in px-4 py-8 pt-500px">
|
||||
<main
|
||||
ref="main"
|
||||
class="flex flex-col items-center from-primary to-accent w-[100vw] mt-8 animate-fade-in px-4 py-8 pt-500px"
|
||||
>
|
||||
<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>
|
||||
<div class="text-base text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
|
||||
<div class="text-sm text-gray-600 flex items-center gap-1 animate-fade-in-down animate-delay-600">
|
||||
<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>
|
||||
<div
|
||||
class="text-base text-#ff7bac animate-fade-in-down animate-delay-400"
|
||||
>
|
||||
Investor Relations
|
||||
</div>
|
||||
<div
|
||||
class="text-sm text-gray-600 flex items-center gap-1 animate-fade-in-down animate-delay-600"
|
||||
>
|
||||
<span>Email:</span>
|
||||
<span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
|
||||
<span
|
||||
class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
|
||||
@click="copyEmail"
|
||||
>fiee@dlkadvisory.com</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -35,11 +54,20 @@ function copyEmail() {
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
.animate-delay-0 { animation-delay: 0s; }
|
||||
.animate-delay-200 { animation-delay: 0.2s; }
|
||||
.animate-delay-400 { animation-delay: 0.4s; }
|
||||
.animate-delay-600 { animation-delay: 0.6s; }
|
||||
.animate-delay-0 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.animate-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.animate-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.animate-delay-600 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.max-w-343px { max-width: 343px; }
|
||||
.max-w-343px {
|
||||
max-width: 343px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,19 +1,38 @@
|
||||
<script setup>
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
function copyEmail() {
|
||||
navigator.clipboard.writeText('fiee@dlkadvisory.com');
|
||||
navigator.clipboard.writeText("fiee@dlkadvisory.com");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main ref="main" class="flex flex-col items-center from-primary to-accent w-[100vw] mt-12 animate-fade-in px-6 py-10 pt-500px">
|
||||
<main
|
||||
ref="main"
|
||||
class="flex flex-col items-center from-primary to-accent w-[100vw] mt-12 animate-fade-in px-6 py-10 pt-500px"
|
||||
>
|
||||
<div class="w-full flex flex-col items-center gap-5 px-4">
|
||||
<h1 class="text-3xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
|
||||
<div class="text-xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
|
||||
<div class="text-lg text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
|
||||
<div class="text-base text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
|
||||
<h1
|
||||
class="text-3xl font-bold text-primary animate-fade-in-down animate-delay-0"
|
||||
>
|
||||
Investor Contacts
|
||||
</h1>
|
||||
<div
|
||||
class="text-xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200"
|
||||
>
|
||||
FiEE Inc.
|
||||
</div>
|
||||
<div class="text-lg text-#ff7bac animate-fade-in-down animate-delay-400">
|
||||
Investor Relations
|
||||
</div>
|
||||
<div
|
||||
class="text-base text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600"
|
||||
>
|
||||
<span>Email:</span>
|
||||
<span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
|
||||
<span
|
||||
class="transition-colors duration-300 cursor-pointer text-#00baff hover:text-primary active:text-secondary select-all"
|
||||
@click="copyEmail"
|
||||
>fiee@dlkadvisory.com</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -33,9 +52,16 @@ function copyEmail() {
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
.animate-delay-0 { animation-delay: 0s; }
|
||||
.animate-delay-200 { animation-delay: 0.2s; }
|
||||
.animate-delay-400 { animation-delay: 0.4s; }
|
||||
.animate-delay-600 { animation-delay: 0.6s; }
|
||||
.animate-delay-0 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.animate-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.animate-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.animate-delay-600 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,76 +1,141 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
const form = ref({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
company: "",
|
||||
phone: "",
|
||||
alertType: "all"
|
||||
alertType: "all",
|
||||
});
|
||||
const submitted = ref(false);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
|
||||
if(res.data.status === 0){
|
||||
const res = await axios.post(
|
||||
"https://erpapi-out.szjixun.cn/api/stock/submit/data",
|
||||
form.value
|
||||
);
|
||||
if (res.data.status === 0) {
|
||||
submitted.value = true;
|
||||
}else{
|
||||
|
||||
} else {
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<main ref="main" class="relative min-h-[80vh] flex-center bg-[url('@/assets/image/bg-pc.png')] overflow-hidden">
|
||||
<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-[600px] max-w-[90vw] p-8 bg-white/80 rounded-2xl shadow-xl backdrop-blur-md animate-bounce-in">
|
||||
<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"
|
||||
>
|
||||
<template v-if="!submitted">
|
||||
<h2 class="text-2xl font-bold text-#8A5AFB mb-2 tracking-wide">E-Mail Alerts</h2>
|
||||
<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>
|
||||
<input v-model="form.firstName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
<label class="block text-gray-700 font-semibold mb-1"
|
||||
>* First Name</label
|
||||
>
|
||||
<input
|
||||
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"
|
||||
/>
|
||||
</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 border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
<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>
|
||||
<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 border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
<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>
|
||||
<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 border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
<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>
|
||||
<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 border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
<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>
|
||||
<button type="submit" class="w-full py-2.5 rounded-xl bg-#8A5AFB text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200">
|
||||
<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>
|
||||
</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-#8A5AFB 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>
|
||||
<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 in' }}</div>
|
||||
<div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
|
||||
<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>
|
||||
<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 in" }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Alert Type：</span
|
||||
>{{
|
||||
form.alertType === "all" ? "All Alerts" : "Customize Alerts"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -80,5 +145,7 @@ async function handleSubmit(e) {
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 可选：自定义粒子或渐变动画背景 */
|
||||
.submit-btn {
|
||||
background: linear-gradient(to right, #ff7bac, #00ffff);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,87 +1,154 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
const form = ref({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
company: "",
|
||||
phone: "",
|
||||
alertType: "all"
|
||||
alertType: "all",
|
||||
});
|
||||
const submitted = ref(false);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
|
||||
if(res.data.status === 0){
|
||||
const res = await axios.post(
|
||||
"https://erpapi-out.szjixun.cn/api/stock/submit/data",
|
||||
form.value
|
||||
);
|
||||
if (res.data.status === 0) {
|
||||
submitted.value = true;
|
||||
}else{
|
||||
|
||||
} else {
|
||||
}
|
||||
|
||||
}
|
||||
</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">
|
||||
<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">
|
||||
<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-#8A5AFB mb-2 tracking-wide">E-Mail Alerts</h2>
|
||||
<h2 class="text-3xl font-bold text-#ff7bac 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" class="w-full px-4 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
<label class="block text-gray-700 font-semibold mb-1"
|
||||
>* First Name</label
|
||||
>
|
||||
<input
|
||||
v-model="form.firstName"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
</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-4 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
<label class="block text-gray-700 font-semibold mb-1"
|
||||
>* Last Name</label
|
||||
>
|
||||
<input
|
||||
v-model="form.lastName"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
</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-4 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
<label class="block text-gray-700 font-semibold mb-1"
|
||||
>* Email</label
|
||||
>
|
||||
<input
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
</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-4 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
<label class="block text-gray-700 font-semibold mb-1"
|
||||
>* Company</label
|
||||
>
|
||||
<input
|
||||
v-model="form.company"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
</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 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
<input
|
||||
v-model="form.phone"
|
||||
type="tel"
|
||||
class="w-full px-4 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="w-full py-3 rounded-xl bg-#8A5AFB text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200">
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full py-3 rounded-xl text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 submit-btn"
|
||||
>
|
||||
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-#8A5AFB mb-2">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/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 || 'Not filled in' }}</div>
|
||||
<div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
|
||||
<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-#ff7bac mb-2">
|
||||
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/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 || "Not filled in" }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Alert Type：</span
|
||||
>{{
|
||||
form.alertType === "all" ? "All Alerts" : "Customize Alerts"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
</footer>
|
||||
<footer></footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 可选：自定义粒子或渐变动画背景 */
|
||||
.submit-btn {
|
||||
background: linear-gradient(to right, #ff7bac, #00ffff);
|
||||
}
|
||||
</style>
|
||||
@ -1,73 +1,142 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import axios from 'axios'
|
||||
import { ref } from "vue";
|
||||
import axios from "axios";
|
||||
const form = ref({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
company: '',
|
||||
phone: '',
|
||||
alertType: 'all',
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
company: "",
|
||||
phone: "",
|
||||
alertType: "all",
|
||||
});
|
||||
const submitted = ref(false);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
|
||||
if(res.data.status === 0){
|
||||
const res = await axios.post(
|
||||
"https://erpapi-out.szjixun.cn/api/stock/submit/data",
|
||||
form.value
|
||||
);
|
||||
if (res.data.status === 0) {
|
||||
submitted.value = true;
|
||||
}else{
|
||||
|
||||
} else {
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="min-h-60vh flex flex-col items-center justify-center relative px-4 py-8">
|
||||
<main
|
||||
class="min-h-60vh flex flex-col items-center justify-center relative px-4 py-8"
|
||||
>
|
||||
<!-- Card -->
|
||||
<div class="w-full max-w-90vw p-4 bg-white/95 rounded-2xl shadow-lg animate-bounce-in">
|
||||
<div
|
||||
class="w-full max-w-90vw p-4 bg-white/95 rounded-2xl shadow-lg animate-bounce-in"
|
||||
>
|
||||
<template v-if="!submitted">
|
||||
<h2 class="text-xl font-bold text-#8A5AFB mb-2 text-center tracking-wide">E-Mail Alerts</h2>
|
||||
<h2
|
||||
class="text-xl font-bold text-#ff7bac mb-2 text-center tracking-wide"
|
||||
>
|
||||
E-Mail Alerts
|
||||
</h2>
|
||||
<p class="text-xs text-gray-500 mb-4 text-center">* Required Fields</p>
|
||||
<form class="flex flex-col gap-3" @submit="handleSubmit">
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1 text-sm">* First Name</label>
|
||||
<input v-model="form.firstName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
|
||||
<label class="block text-gray-700 font-semibold mb-1 text-sm"
|
||||
>* First Name</label
|
||||
>
|
||||
<input
|
||||
v-model="form.firstName"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1 text-sm">* Last Name</label>
|
||||
<input v-model="form.lastName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
|
||||
<label class="block text-gray-700 font-semibold mb-1 text-sm"
|
||||
>* Last Name</label
|
||||
>
|
||||
<input
|
||||
v-model="form.lastName"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1 text-sm">* Email</label>
|
||||
<input v-model="form.email" type="email" class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
|
||||
<label class="block text-gray-700 font-semibold mb-1 text-sm"
|
||||
>* Email</label
|
||||
>
|
||||
<input
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1 text-sm">* Company</label>
|
||||
<input v-model="form.company" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
|
||||
<label class="block text-gray-700 font-semibold mb-1 text-sm"
|
||||
>* Company</label
|
||||
>
|
||||
<input
|
||||
v-model="form.company"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1 text-sm">Phone</label>
|
||||
<input v-model="form.phone" type="tel" class="w-full px-3 py-2 rounded-lg border border-gray-300 outline-none bg-white/90 text-sm" />
|
||||
<label class="block text-gray-700 font-semibold mb-1 text-sm"
|
||||
>Phone</label
|
||||
>
|
||||
<input
|
||||
v-model="form.phone"
|
||||
type="tel"
|
||||
class="w-full px-3 py-2 rounded-lg ring-8 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="w-full py-3 rounded-xl bg-#8A5AFB text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-2">
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full py-3 rounded-xl text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-2 submit-btn"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex flex-col items-center justify-center min-h-[200px] animate-bounce-in">
|
||||
<span class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"></span>
|
||||
<h2 class="text-lg font-bold text-#8A5AFB 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/90 rounded-xl shadow p-3 space-y-1 text-gray-800 text-sm">
|
||||
<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="flex flex-col items-center justify-center min-h-[200px] animate-bounce-in"
|
||||
>
|
||||
<span
|
||||
class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"
|
||||
></span>
|
||||
<h2 class="text-lg 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/90 rounded-xl shadow p-3 space-y-1 text-gray-800 text-sm"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
@ -77,5 +146,7 @@ async function handleSubmit(e) {
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* Keep mobile background simple */
|
||||
.submit-btn {
|
||||
background: linear-gradient(to right, #ff7bac, #00ffff);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,85 +1,157 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
const form = ref({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
company: '',
|
||||
phone: '',
|
||||
alertType: 'all',
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
company: "",
|
||||
phone: "",
|
||||
alertType: "all",
|
||||
});
|
||||
const submitted = ref(false);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const res = await axios.post('https://erpapi-out.szjixun.cn/api/stock/submit/data', form.value)
|
||||
if(res.data.status === 0){
|
||||
const res = await axios.post(
|
||||
"https://erpapi-out.szjixun.cn/api/stock/submit/data",
|
||||
form.value
|
||||
);
|
||||
if (res.data.status === 0) {
|
||||
submitted.value = true;
|
||||
}else{
|
||||
|
||||
} else {
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<main ref="main">
|
||||
<main class="min-h-70vh flex flex-col items-center justify-center relative px-6 py-10">
|
||||
<div class="w-[640px] max-w-90vw p-6 bg-white/95 rounded-2xl shadow-lg animate-bounce-in">
|
||||
<main
|
||||
class="min-h-70vh flex flex-col items-center justify-center relative px-6 py-10"
|
||||
>
|
||||
<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-#8A5AFB mb-3 text-center tracking-wide">E-Mail Alerts</h2>
|
||||
<p class="text-sm text-gray-500 mb-5 text-center">* Required Fields</p>
|
||||
<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-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
|
||||
<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"
|
||||
/>
|
||||
</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-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
|
||||
<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>
|
||||
<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-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
|
||||
<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>
|
||||
<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-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
|
||||
<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>
|
||||
<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-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
|
||||
<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 bg-#8A5AFB text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-3">
|
||||
<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-#8A5AFB 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="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>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* Keep tablet background simple */
|
||||
.submit-btn {
|
||||
background: linear-gradient(to right, #ff7bac, #00ffff);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<template #content>
|
||||
<main class="p-[35px] max-w-[1200px] mx-auto">
|
||||
<div class="title mb-[20px]">
|
||||
{{ t('events_calendar.title') }}
|
||||
{{ t("events_calendar.title") }}
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<n-date-picker
|
||||
@ -12,12 +12,8 @@
|
||||
type="date"
|
||||
class="search-date-picker"
|
||||
></n-date-picker>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="handleSearch"
|
||||
class="search-button"
|
||||
>
|
||||
{{ t('events_calendar.search.button') }}
|
||||
<n-button @click="handleSearch" class="search-button">
|
||||
{{ t("events_calendar.search.button") }}
|
||||
</n-button>
|
||||
</div>
|
||||
</main>
|
||||
@ -27,21 +23,21 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import customDefaultPage from '@/components/customDefaultPage/index.vue'
|
||||
import { reactive } from 'vue'
|
||||
import { NDatePicker, NButton } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import customDefaultPage from "@/components/customDefaultPage/index.vue";
|
||||
import { reactive } from "vue";
|
||||
import { NDatePicker, NButton } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n()
|
||||
const { t } = useI18n();
|
||||
|
||||
const state = reactive({
|
||||
selectedDateValue: null, //选中值
|
||||
})
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
// 搜索处理逻辑
|
||||
// console.log('搜索:', state.selectedDateValue)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -75,4 +71,8 @@ const handleSearch = () => {
|
||||
padding: 20px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<template #content>
|
||||
<main class="p-[35px] max-w-[1800px] mx-auto">
|
||||
<div class="title mb-[20px]">
|
||||
{{ t('events_calendar.title') }}
|
||||
{{ t("events_calendar.title") }}
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<n-date-picker
|
||||
@ -12,12 +12,8 @@
|
||||
type="date"
|
||||
class="search-date-picker"
|
||||
></n-date-picker>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="handleSearch"
|
||||
class="search-button"
|
||||
>
|
||||
{{ t('events_calendar.search.button') }}
|
||||
<n-button @click="handleSearch" class="search-button">
|
||||
{{ t("events_calendar.search.button") }}
|
||||
</n-button>
|
||||
</div>
|
||||
</main>
|
||||
@ -27,21 +23,21 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import customDefaultPage from '@/components/customDefaultPage/index.vue'
|
||||
import { reactive } from 'vue'
|
||||
import { NDatePicker, NButton } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import customDefaultPage from "@/components/customDefaultPage/index.vue";
|
||||
import { reactive } from "vue";
|
||||
import { NDatePicker, NButton } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n()
|
||||
const { t } = useI18n();
|
||||
|
||||
const state = reactive({
|
||||
selectedDateValue: null, //选中值
|
||||
})
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
// 搜索处理逻辑
|
||||
// console.log('搜索:', state.selectedDateValue)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -81,4 +77,8 @@ const handleSearch = () => {
|
||||
padding: 20px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,10 +15,10 @@
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
|
||||
></div>
|
||||
<div class="relative p-8 flex flex-col h-full">
|
||||
<div class="relative p-8 flex flex-col h-full back-line">
|
||||
<div class="flex items-center mb-6 max-h-[3.5rem]">
|
||||
<div
|
||||
class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -36,10 +36,14 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<n-tooltip trigger="hover" :disabled="!item.showTooltip" width="trigger">
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<h1
|
||||
:ref="el => setTitleRef(el, index)"
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
style="
|
||||
font-size: 18px;
|
||||
word-break: break-word;
|
||||
@ -63,9 +67,9 @@
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
target="_blank"
|
||||
style="font-size: 16px; cursor: pointer;"
|
||||
style="font-size: 16px; cursor: pointer"
|
||||
@click="handleViewDocument(item)"
|
||||
>
|
||||
View Document
|
||||
@ -91,16 +95,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref, nextTick, watch } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import { reactive, onMounted, ref, nextTick, watch } from "vue";
|
||||
import axios from "axios";
|
||||
import { NTooltip } from "naive-ui";
|
||||
|
||||
import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
|
||||
import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
|
||||
import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
|
||||
import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
|
||||
|
||||
import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
|
||||
import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
|
||||
|
||||
import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
|
||||
import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
|
||||
|
||||
const state = reactive({
|
||||
list: [
|
||||
@ -133,57 +137,62 @@ const state = reactive({
|
||||
// date: 'May 30, 2025',
|
||||
// },
|
||||
],
|
||||
})
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
state.list.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getGovernanceDisplay()
|
||||
getGovernanceDisplay();
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
watch(() => state.list, () => {
|
||||
watch(
|
||||
() => state.list,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
//获取官网展示文档
|
||||
const getGovernanceDisplay = () => {
|
||||
// let url = 'https://erpapi.fiee.com/api/fiee/fiee/governance/display'
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/governance/display'
|
||||
let params = {}
|
||||
let url = "https://erpapi.fiee.com/api/fiee/governance/display";
|
||||
let params = {};
|
||||
axios
|
||||
.get(url, { params })
|
||||
.then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
state.list = res.data.data.data || []
|
||||
state.list = res.data.data.data || [];
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err)
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 查看文档
|
||||
const handleViewDocument = (item) => {
|
||||
@ -192,9 +201,9 @@ const handleViewDocument = (item) => {
|
||||
`${import.meta.env.VITE_PAGE_URL}/office?url=${
|
||||
item.attachment
|
||||
}&attachmentName=${item.attachmentName}`,
|
||||
'_blank',
|
||||
)
|
||||
}
|
||||
"_blank"
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -210,7 +219,7 @@ const handleViewDocument = (item) => {
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: #895bff;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
@ -263,4 +272,7 @@ const handleViewDocument = (item) => {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
.back-line {
|
||||
background: linear-gradient(to right, #fff0f6, #ffffff);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,10 +15,10 @@
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
|
||||
></div>
|
||||
<div class="relative p-8 flex flex-col h-full">
|
||||
<div class="relative p-8 flex flex-col h-full back-line">
|
||||
<div class="flex items-center mb-6 max-h-[3.5rem]">
|
||||
<div
|
||||
class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -36,10 +36,14 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<n-tooltip trigger="hover" :disabled="!item.showTooltip" width="trigger">
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<h1
|
||||
:ref="el => setTitleRef(el, index)"
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
style="
|
||||
font-size: 18px;
|
||||
word-break: break-word;
|
||||
@ -63,9 +67,9 @@
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
target="_blank"
|
||||
style="font-size: 16px; cursor: pointer;"
|
||||
style="font-size: 16px; cursor: pointer"
|
||||
@click="handleViewDocument(item)"
|
||||
>
|
||||
View Document
|
||||
@ -91,16 +95,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref, nextTick, watch } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import { reactive, onMounted, ref, nextTick, watch } from "vue";
|
||||
import axios from "axios";
|
||||
import { NTooltip } from "naive-ui";
|
||||
|
||||
import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
|
||||
import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
|
||||
import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
|
||||
import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
|
||||
|
||||
import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
|
||||
import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
|
||||
|
||||
import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
|
||||
import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
|
||||
|
||||
const state = reactive({
|
||||
list: [
|
||||
@ -133,57 +137,62 @@ const state = reactive({
|
||||
// date: 'May 30, 2025',
|
||||
// },
|
||||
],
|
||||
})
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
state.list.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getGovernanceDisplay()
|
||||
getGovernanceDisplay();
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
watch(() => state.list, () => {
|
||||
watch(
|
||||
() => state.list,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
//获取官网展示文档
|
||||
const getGovernanceDisplay = () => {
|
||||
// let url = 'https://erpapi.fiee.com/api/fiee/fiee/governance/display'
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/governance/display'
|
||||
let params = {}
|
||||
let url = "https://erpapi.fiee.com/api/fiee/governance/display";
|
||||
let params = {};
|
||||
axios
|
||||
.get(url, { params })
|
||||
.then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
state.list = res.data.data.data || []
|
||||
state.list = res.data.data.data || [];
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err)
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 查看文档
|
||||
const handleViewDocument = (item) => {
|
||||
@ -192,9 +201,9 @@ const handleViewDocument = (item) => {
|
||||
`${import.meta.env.VITE_PAGE_URL}/office?url=${
|
||||
item.attachment
|
||||
}&attachmentName=${item.attachmentName}`,
|
||||
'_blank',
|
||||
)
|
||||
}
|
||||
"_blank"
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -210,7 +219,7 @@ const handleViewDocument = (item) => {
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: #895bff;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
@ -263,4 +272,7 @@ const handleViewDocument = (item) => {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
.back-line {
|
||||
background: linear-gradient(to right, #fff0f6, #ffffff);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,10 +12,10 @@
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
|
||||
></div>
|
||||
<div class="relative p-8 flex flex-col h-full">
|
||||
<div class="relative p-8 flex flex-col h-full back-line">
|
||||
<div class="flex items-center mb-6 max-h-[3.5rem]">
|
||||
<div
|
||||
class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -33,7 +33,11 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<n-tooltip trigger="click" :disabled="!item.showTooltip" width="trigger">
|
||||
<n-tooltip
|
||||
trigger="click"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<h1
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
@ -59,9 +63,9 @@
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
target="_blank"
|
||||
style="cursor: pointer;"
|
||||
style="cursor: pointer"
|
||||
@click="handleViewDocument(item)"
|
||||
>
|
||||
View Document
|
||||
@ -87,16 +91,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref, nextTick, watch } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import { reactive, onMounted, ref, nextTick, watch } from "vue";
|
||||
import axios from "axios";
|
||||
import { NTooltip } from "naive-ui";
|
||||
|
||||
import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
|
||||
import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
|
||||
import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
|
||||
import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
|
||||
|
||||
import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
|
||||
import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
|
||||
|
||||
import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
|
||||
import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
|
||||
|
||||
const state = reactive({
|
||||
list: [
|
||||
@ -129,57 +133,62 @@ const state = reactive({
|
||||
// date: 'May 30, 2025',
|
||||
// },
|
||||
],
|
||||
})
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
state.list.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getGovernanceDisplay()
|
||||
getGovernanceDisplay();
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
watch(() => state.list, () => {
|
||||
watch(
|
||||
() => state.list,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
//获取官网展示文档
|
||||
const getGovernanceDisplay = () => {
|
||||
// let url = 'https://erpapi.fiee.com/api/fiee/fiee/governance/display'
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/governance/display'
|
||||
let params = {}
|
||||
let url = "https://erpapi.fiee.com/api/fiee/governance/display";
|
||||
let params = {};
|
||||
axios
|
||||
.get(url, { params })
|
||||
.then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
state.list = res.data.data.data || []
|
||||
state.list = res.data.data.data || [];
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err)
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 查看文档
|
||||
const handleViewDocument = (item) => {
|
||||
@ -188,9 +197,9 @@ const handleViewDocument = (item) => {
|
||||
`${import.meta.env.VITE_PAGE_URL}/office?url=${
|
||||
item.attachment
|
||||
}&attachmentName=${item.attachmentName}`,
|
||||
'_blank',
|
||||
)
|
||||
}
|
||||
"_blank"
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -206,7 +215,7 @@ const handleViewDocument = (item) => {
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: #895bff;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
@ -259,4 +268,7 @@ const handleViewDocument = (item) => {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
.back-line {
|
||||
background: linear-gradient(to right, #fff0f6, #ffffff);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,10 +12,10 @@
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
|
||||
></div>
|
||||
<div class="relative p-8 flex flex-col h-full">
|
||||
<div class="relative p-8 flex flex-col h-full back-line">
|
||||
<div class="flex items-center mb-6 max-h-[3.5rem]">
|
||||
<div
|
||||
class="bg-[#895bff] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -33,7 +33,11 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<n-tooltip trigger="click" :disabled="!item.showTooltip" width="trigger">
|
||||
<n-tooltip
|
||||
trigger="click"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<h1
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
@ -59,9 +63,9 @@
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#895bff] hover:bg-[#7a4de6] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
|
||||
target="_blank"
|
||||
style="cursor: pointer;"
|
||||
style="cursor: pointer"
|
||||
@click="handleViewDocument(item)"
|
||||
>
|
||||
View Document
|
||||
@ -87,16 +91,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref, nextTick, watch } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import { reactive, onMounted, ref, nextTick, watch } from "vue";
|
||||
import axios from "axios";
|
||||
import { NTooltip } from "naive-ui";
|
||||
|
||||
import quarterlyPdfone from '@/assets/file/FiEE, Inc._Audit Committee Charter.pdf'
|
||||
import quarterlyPdftwo from '@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf'
|
||||
import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
|
||||
import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";
|
||||
|
||||
import quarterlyPdfthree from '@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf'
|
||||
import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";
|
||||
|
||||
import quarterlyPdffour from '@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf'
|
||||
import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
|
||||
|
||||
const state = reactive({
|
||||
list: [
|
||||
@ -129,57 +133,62 @@ const state = reactive({
|
||||
// date: 'May 30, 2025',
|
||||
// },
|
||||
],
|
||||
})
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
state.list.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getGovernanceDisplay()
|
||||
getGovernanceDisplay();
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
watch(() => state.list, () => {
|
||||
watch(
|
||||
() => state.list,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
//获取官网展示文档
|
||||
const getGovernanceDisplay = () => {
|
||||
// let url = 'https://erpapi.fiee.com/api/fiee/fiee/governance/display'
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/governance/display'
|
||||
let params = {}
|
||||
let url = "https://erpapi.fiee.com/api/fiee/governance/display";
|
||||
let params = {};
|
||||
axios
|
||||
.get(url, { params })
|
||||
.then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
state.list = res.data.data.data || []
|
||||
state.list = res.data.data.data || [];
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err)
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 查看文档
|
||||
const handleViewDocument = (item) => {
|
||||
@ -188,9 +197,9 @@ const handleViewDocument = (item) => {
|
||||
`${import.meta.env.VITE_PAGE_URL}/office?url=${
|
||||
item.attachment
|
||||
}&attachmentName=${item.attachmentName}`,
|
||||
'_blank',
|
||||
)
|
||||
}
|
||||
"_blank"
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -206,7 +215,7 @@ const handleViewDocument = (item) => {
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: #895bff;
|
||||
background: #ff7bac;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
@ -259,4 +268,7 @@ const handleViewDocument = (item) => {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
.back-line {
|
||||
background: linear-gradient(to right, #fff0f6, #ffffff);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -99,7 +99,7 @@ const getInitials = (name) => {
|
||||
|
||||
/* 顶部大图区域 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
|
||||
background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
color: white;
|
||||
@ -182,11 +182,12 @@ const getInitials = (name) => {
|
||||
/* 个人资料区 */
|
||||
.card-profile {
|
||||
padding: 2rem;
|
||||
background: linear-gradient(
|
||||
/* background: linear-gradient(
|
||||
135deg,
|
||||
#7a4dff 0%,
|
||||
#895bff 100%
|
||||
); /* 主色调接近 #895bff */
|
||||
); */
|
||||
background: #ff7bac;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -217,7 +218,7 @@ const getInitials = (name) => {
|
||||
justify-content: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #895bff;
|
||||
color: #ffbfd7;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
|
||||
@ -99,7 +99,7 @@ const getInitials = (name) => {
|
||||
|
||||
/* 顶部大图区域 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
|
||||
background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
color: white;
|
||||
@ -182,11 +182,12 @@ const getInitials = (name) => {
|
||||
/* 个人资料区 */
|
||||
.card-profile {
|
||||
padding: 2rem;
|
||||
background: linear-gradient(
|
||||
/* background: linear-gradient(
|
||||
135deg,
|
||||
#7a4dff 0%,
|
||||
#895bff 100%
|
||||
); /* 主色调接近 #895bff */
|
||||
); */
|
||||
background: #ff7bac;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -217,7 +218,7 @@ const getInitials = (name) => {
|
||||
justify-content: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #895bff;
|
||||
color: #ffbfd7;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
|
||||
@ -101,7 +101,7 @@ const getInitials = (name) => {
|
||||
|
||||
/* 顶部大图区域 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
|
||||
background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
color: white;
|
||||
@ -171,7 +171,12 @@ const getInitials = (name) => {
|
||||
/* 个人资料区 */
|
||||
.card-profile {
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(135deg, #7a4dff 0%, #895bff 100%);
|
||||
/* background: linear-gradient(
|
||||
135deg,
|
||||
#7a4dff 0%,
|
||||
#895bff 100%
|
||||
); */
|
||||
background: #ff7bac;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -202,7 +207,7 @@ const getInitials = (name) => {
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #895bff;
|
||||
color: #ffbfd7;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
|
||||
@ -105,7 +105,7 @@ const getInitials = (name) => {
|
||||
|
||||
/* 顶部大图区域 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
|
||||
background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
color: white;
|
||||
@ -173,10 +173,16 @@ const getInitials = (name) => {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/* 个人资料区 */
|
||||
/* 个人资料区 */
|
||||
.card-profile {
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(135deg, #7a4dff 0%, #895bff 100%);
|
||||
/* background: linear-gradient(
|
||||
135deg,
|
||||
#7a4dff 0%,
|
||||
#895bff 100%
|
||||
); */
|
||||
background: #ff7bac;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -207,7 +213,7 @@ const getInitials = (name) => {
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #895bff;
|
||||
color: #ffbfd7;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="font-size: 18px;flex-shrink: 0; margin: 0 0 0 0.6rem;"
|
||||
style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.6rem"
|
||||
class="cursor-pointer"
|
||||
@click="handleLink(item)"
|
||||
>
|
||||
@ -115,11 +115,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="newList.length === 0" class="flex justify-center items-center">
|
||||
<div
|
||||
v-if="newList.length === 0"
|
||||
class="flex justify-center items-center"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/icon/default-empty.png"
|
||||
alt="empty"
|
||||
style="width: 109px; height: 60px;"
|
||||
style="width: 109px; height: 60px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -231,10 +234,10 @@
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, onUnmounted, computed, nextTick, watch } from "vue";
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import { NTooltip } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
|
||||
getStockQuate();
|
||||
@ -258,29 +261,29 @@ const newList = ref([
|
||||
|
||||
// 获取新闻发布(展示在首页的)
|
||||
const getPressReleasesDisplay = () => {
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
display: 2, // 1: 不展示在首页 2: 展示在首页
|
||||
}
|
||||
};
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
newList.value = res.data.data?.data || []
|
||||
item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
newList.value = res.data.data?.data || [];
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (contentRef.value && "IntersectionObserver" in window) {
|
||||
@ -306,35 +309,40 @@ onMounted(() => {
|
||||
// 回退方案：如果不支持IntersectionObserver则直接显示
|
||||
isInView.value = true;
|
||||
}
|
||||
getPressReleasesDisplay()
|
||||
getPressReleasesDisplay();
|
||||
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
newList.value.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
watch(() => newList.value, () => {
|
||||
watch(
|
||||
() => newList.value,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
if (observer) {
|
||||
@ -355,7 +363,6 @@ const handleLink = (item) => {
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -368,7 +375,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
/* 顶部大图区域 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
|
||||
background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
color: white;
|
||||
@ -419,7 +426,7 @@ const handleLink = (item) => {
|
||||
.section-title {
|
||||
font-size: 1.5rem; /* 18px */
|
||||
margin-bottom: 30px;
|
||||
color: #895bff;
|
||||
color: #ff7bac;
|
||||
}
|
||||
.section-titles {
|
||||
font-size: 2.5rem;
|
||||
@ -525,7 +532,7 @@ const handleLink = (item) => {
|
||||
|
||||
/* 股票信息卡片样式 */
|
||||
.stock-card {
|
||||
border-top: 4px solid #895bff;
|
||||
border-top: 4px solid #ff7bac;
|
||||
}
|
||||
|
||||
.stock-data {
|
||||
@ -551,7 +558,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #895bff;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
.stock-chart-placeholder {
|
||||
@ -575,7 +582,7 @@ const handleLink = (item) => {
|
||||
|
||||
/* 活动预告卡片样式 */
|
||||
.events-card {
|
||||
border-top: 4px solid #10b981;
|
||||
border-top: 4px solid #00ffff;
|
||||
}
|
||||
|
||||
.event-item {
|
||||
@ -628,7 +635,7 @@ const handleLink = (item) => {
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
||||
border-left: 4px solid #895bff;
|
||||
border-left: 4px solid #ff7bac;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="font-size: 18px;flex-shrink: 0; margin: 0 0 0 0.6rem;"
|
||||
style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.6rem"
|
||||
class="cursor-pointer"
|
||||
@click="handleLink(item)"
|
||||
>
|
||||
@ -115,11 +115,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="newList.length === 0" class="flex justify-center items-center">
|
||||
<div
|
||||
v-if="newList.length === 0"
|
||||
class="flex justify-center items-center"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/icon/default-empty.png"
|
||||
alt="empty"
|
||||
style="width: 109px; height: 60px;"
|
||||
style="width: 109px; height: 60px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -221,10 +224,10 @@
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, onUnmounted, computed, nextTick, watch } from "vue";
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import { NTooltip } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
getStockQuate();
|
||||
// 示例数据
|
||||
@ -245,29 +248,29 @@ const newList = ref([
|
||||
|
||||
// 获取新闻发布(展示在首页的)
|
||||
const getPressReleasesDisplay = () => {
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
display: 2, // 1: 不展示在首页 2: 展示在首页
|
||||
}
|
||||
};
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
newList.value = res.data.data?.data || []
|
||||
item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
newList.value = res.data.data?.data || [];
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const { t: $t } = useI18n();
|
||||
const contentRef = ref(null);
|
||||
@ -297,35 +300,40 @@ onMounted(() => {
|
||||
// 回退方案：如果不支持IntersectionObserver则直接显示
|
||||
isInView.value = true;
|
||||
}
|
||||
getPressReleasesDisplay()
|
||||
getPressReleasesDisplay();
|
||||
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
newList.value.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
watch(() => newList.value, () => {
|
||||
watch(
|
||||
() => newList.value,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
if (observer) {
|
||||
@ -359,7 +367,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
/* 顶部大图区域 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
|
||||
background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
color: white;
|
||||
@ -410,7 +418,7 @@ const handleLink = (item) => {
|
||||
.section-title {
|
||||
font-size: 1.5rem; /* 18px */
|
||||
margin-bottom: 30px;
|
||||
color: #895bff;
|
||||
color: #ff7bac;
|
||||
}
|
||||
.section-titles {
|
||||
font-size: 2.5rem;
|
||||
@ -516,7 +524,7 @@ const handleLink = (item) => {
|
||||
|
||||
/* 股票信息卡片样式 */
|
||||
.stock-card {
|
||||
border-top: 4px solid #895bff;
|
||||
border-top: 4px solid #ff7bac;
|
||||
}
|
||||
|
||||
.stock-data {
|
||||
@ -542,7 +550,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #895bff;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
.stock-chart-placeholder {
|
||||
@ -566,7 +574,7 @@ const handleLink = (item) => {
|
||||
|
||||
/* 活动预告卡片样式 */
|
||||
.events-card {
|
||||
border-top: 4px solid #10b981;
|
||||
border-top: 4px solid #00ffff;
|
||||
}
|
||||
|
||||
.event-item {
|
||||
@ -619,7 +627,7 @@ const handleLink = (item) => {
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
||||
border-left: 4px solid #895bff;
|
||||
border-left: 4px solid #ff7bac;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="font-size: 18px;flex-shrink: 0;margin: 0 0 0 0.6rem;"
|
||||
style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.6rem"
|
||||
class="cursor-pointer"
|
||||
@click="handleLink(item)"
|
||||
>
|
||||
@ -115,11 +115,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="newList.length === 0" class="flex justify-center items-center">
|
||||
<div
|
||||
v-if="newList.length === 0"
|
||||
class="flex justify-center items-center"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/icon/default-empty.png"
|
||||
alt="empty"
|
||||
style="width: 109px; height: 60px;"
|
||||
style="width: 109px; height: 60px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -231,10 +234,10 @@
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, onUnmounted, computed, nextTick, watch } from "vue";
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import { NTooltip } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
getStockQuate();
|
||||
const { t: $t } = useI18n();
|
||||
@ -256,29 +259,29 @@ const newList = ref([
|
||||
|
||||
// 获取新闻发布(展示在首页的)
|
||||
const getPressReleasesDisplay = () => {
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
display: 2, // 1: 不展示在首页 2: 展示在首页
|
||||
}
|
||||
};
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
newList.value = res.data.data?.data || []
|
||||
item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
newList.value = res.data.data?.data || [];
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (contentRef.value && "IntersectionObserver" in window) {
|
||||
@ -304,35 +307,40 @@ onMounted(() => {
|
||||
// 回退方案：如果不支持IntersectionObserver则直接显示
|
||||
isInView.value = true;
|
||||
}
|
||||
getPressReleasesDisplay()
|
||||
getPressReleasesDisplay();
|
||||
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
newList.value.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
watch(() => newList.value, () => {
|
||||
watch(
|
||||
() => newList.value,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
if (observer) {
|
||||
@ -353,7 +361,6 @@ const handleLink = (item) => {
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -366,7 +373,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
/* 顶部大图区域 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
|
||||
background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
color: white;
|
||||
@ -417,7 +424,7 @@ const handleLink = (item) => {
|
||||
.section-title {
|
||||
font-size: 1.5rem; /* 18px */
|
||||
margin-bottom: 30px;
|
||||
color: #895bff;
|
||||
color: #ff7bac;
|
||||
}
|
||||
.section-titles {
|
||||
font-size: 2.5rem;
|
||||
@ -523,7 +530,7 @@ const handleLink = (item) => {
|
||||
|
||||
/* 股票信息卡片样式 */
|
||||
.stock-card {
|
||||
border-top: 4px solid #895bff;
|
||||
border-top: 4px solid #ff7bac;
|
||||
}
|
||||
|
||||
.stock-data {
|
||||
@ -549,7 +556,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #895bff;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
.stock-chart-placeholder {
|
||||
@ -573,7 +580,7 @@ const handleLink = (item) => {
|
||||
|
||||
/* 活动预告卡片样式 */
|
||||
.events-card {
|
||||
border-top: 4px solid #10b981;
|
||||
border-top: 4px solid #00ffff;
|
||||
}
|
||||
|
||||
.event-item {
|
||||
@ -626,7 +633,7 @@ const handleLink = (item) => {
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
||||
border-left: 4px solid #895bff;
|
||||
border-left: 4px solid #ff7bac;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="font-size: 18px;flex-shrink: 0; margin: 0 0 0 0.9rem;"
|
||||
style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.9rem"
|
||||
class="cursor-pointer"
|
||||
@click="handleLink(item)"
|
||||
>
|
||||
@ -115,11 +115,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="newList.length === 0" class="flex justify-center items-center">
|
||||
<div
|
||||
v-if="newList.length === 0"
|
||||
class="flex justify-center items-center"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/icon/default-empty.png"
|
||||
alt="empty"
|
||||
style="width: 109px; height: 60px;"
|
||||
style="width: 109px; height: 60px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -231,10 +234,10 @@
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, onUnmounted, computed, nextTick, watch } from "vue";
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import { NTooltip } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
|
||||
getStockQuate();
|
||||
@ -281,61 +284,66 @@ onMounted(() => {
|
||||
// 回退方案：如果不支持IntersectionObserver则直接显示
|
||||
isInView.value = true;
|
||||
}
|
||||
getPressReleasesDisplay()
|
||||
getPressReleasesDisplay();
|
||||
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
newList.value.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
watch(() => newList.value, () => {
|
||||
watch(
|
||||
() => newList.value,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 获取新闻发布(展示在首页的)
|
||||
const getPressReleasesDisplay = () => {
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
display: 2, // 1: 不展示在首页 2: 展示在首页
|
||||
}
|
||||
};
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.time = new Date(item.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
newList.value = res.data.data?.data || []
|
||||
item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
newList.value = res.data.data?.data || [];
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
if (observer) {
|
||||
@ -356,7 +364,6 @@ const handleLink = (item) => {
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -369,7 +376,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
/* 顶部大图区域 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
|
||||
background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
color: white;
|
||||
@ -420,7 +427,7 @@ const handleLink = (item) => {
|
||||
.section-title {
|
||||
font-size: 1.5rem; /* 18px */
|
||||
margin-bottom: 30px;
|
||||
color: #895bff;
|
||||
color: #ff7bac;
|
||||
}
|
||||
.section-titles {
|
||||
font-size: 2.5rem;
|
||||
@ -526,7 +533,7 @@ const handleLink = (item) => {
|
||||
|
||||
/* 股票信息卡片样式 */
|
||||
.stock-card {
|
||||
border-top: 4px solid #895bff;
|
||||
border-top: 4px solid #ff7bac;
|
||||
}
|
||||
|
||||
.stock-data {
|
||||
@ -552,7 +559,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #895bff;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
.stock-chart-placeholder {
|
||||
@ -576,7 +583,7 @@ const handleLink = (item) => {
|
||||
|
||||
/* 活动预告卡片样式 */
|
||||
.events-card {
|
||||
border-top: 4px solid #10b981;
|
||||
border-top: 4px solid #00ffff;
|
||||
}
|
||||
|
||||
.event-item {
|
||||
@ -629,7 +636,7 @@ const handleLink = (item) => {
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
||||
border-left: 4px solid #895bff;
|
||||
border-left: 4px solid #ff7bac;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<n-infinite-scroll :distance="0" @load="doLoadMore">
|
||||
<main class="p-[35px] max-w-[1200px] mx-auto">
|
||||
<div class="title mb-[20px]">
|
||||
{{ t('press_releases.title') }}
|
||||
{{ t("press_releases.title") }}
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<n-select
|
||||
@ -17,12 +17,8 @@
|
||||
:placeholder="t('press_releases.search.placeholder')"
|
||||
class="search-input"
|
||||
/>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="handleSearch"
|
||||
class="search-button w-[80px]"
|
||||
>
|
||||
{{ t('press_releases.search.button') }}
|
||||
<n-button @click="handleSearch" class="search-button w-[80px]">
|
||||
{{ t("press_releases.search.button") }}
|
||||
</n-button>
|
||||
</div>
|
||||
<div v-for="(item, idx) in state.filterNewsData" :key="idx">
|
||||
@ -30,7 +26,14 @@
|
||||
<div class="news-item-date">{{ item.date }}</div>
|
||||
<div
|
||||
class="news-item-title text-[#0078d7] cursor-pointer"
|
||||
style="word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"
|
||||
style="
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
@click="handleNewClick(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
@ -53,11 +56,11 @@
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
{{item.summary}}
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</template>
|
||||
<div slot="content">
|
||||
{{item.summary}}
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
@ -72,7 +75,7 @@ import customDefaultPage from "@/components/customDefaultPage/index.vue";
|
||||
import { reactive, onMounted, watch, nextTick, ref } from "vue";
|
||||
import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
@ -117,80 +120,85 @@ const state = reactive({
|
||||
currentPage: 1, //当前页码
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
state.filterNewsData.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// state.filterNewsData = state.newsData;
|
||||
getPressReleasesDisplay()
|
||||
getPressReleasesDisplay();
|
||||
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
watch(() => state.filterNewsData, () => {
|
||||
watch(
|
||||
() => state.filterNewsData,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 获取新闻列表
|
||||
const getPressReleasesDisplay = () => {
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
query: state.inputValue,
|
||||
page: state.currentPage,
|
||||
pageSize: 10,
|
||||
timeStart: state.selectedValue
|
||||
? state.selectedValue === 'all_years'
|
||||
? state.selectedValue === "all_years"
|
||||
? null
|
||||
: new Date(state.selectedValue).getTime()
|
||||
: null,
|
||||
}
|
||||
};
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
if (state.currentPage === 1) {
|
||||
state.filterNewsData = res.data.data?.data || []
|
||||
state.filterNewsData = res.data.data?.data || [];
|
||||
} else {
|
||||
state.filterNewsData = [
|
||||
...state.filterNewsData,
|
||||
...(res.data.data?.data || []),
|
||||
]
|
||||
];
|
||||
}
|
||||
if (state.filterNewsData.length < (res.data.data?.total || 0)) {
|
||||
state.hasMore = true
|
||||
state.hasMore = true;
|
||||
} else {
|
||||
state.hasMore = false
|
||||
state.hasMore = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
// 筛选逻辑
|
||||
@ -227,16 +235,16 @@ watch(
|
||||
() => [state.selectedValue, state.inputValue],
|
||||
() => {
|
||||
// handleFilter();
|
||||
state.currentPage = 1
|
||||
getPressReleasesDisplay()
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
}
|
||||
);
|
||||
|
||||
const handleSearch = () => {
|
||||
// 手动触发筛选（保留这个函数以保持兼容性）
|
||||
// handleFilter();
|
||||
state.currentPage = 1
|
||||
getPressReleasesDisplay()
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
// console.log("筛选结果:", state.filterNewsData);
|
||||
};
|
||||
|
||||
@ -252,15 +260,15 @@ const handleNewClick = (item) => {
|
||||
//加载更多数据
|
||||
const doLoadMore = () => {
|
||||
if (!state.hasMore || state.loading) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
// console.log('触底了')
|
||||
state.loading = true
|
||||
state.currentPage++
|
||||
state.loading = true;
|
||||
state.currentPage++;
|
||||
getPressReleasesDisplay().finally(() => {
|
||||
state.loading = false
|
||||
})
|
||||
}
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -309,4 +317,8 @@ const doLoadMore = () => {
|
||||
padding: 20px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<n-infinite-scroll :distance="0" @load="doLoadMore">
|
||||
<main class="p-[35px] max-w-[1200px] mx-auto">
|
||||
<div class="title mb-[20px]">
|
||||
{{ t('press_releases.title') }}
|
||||
{{ t("press_releases.title") }}
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<n-select
|
||||
@ -17,12 +17,8 @@
|
||||
:placeholder="t('press_releases.search.placeholder')"
|
||||
class="search-input"
|
||||
/>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="handleSearch"
|
||||
class="search-button w-[60px]"
|
||||
>
|
||||
{{ t('press_releases.search.button') }}
|
||||
<n-button @click="handleSearch" class="search-button w-[60px]">
|
||||
{{ t("press_releases.search.button") }}
|
||||
</n-button>
|
||||
</div>
|
||||
<div v-for="(item, idx) in state.filterNewsData" :key="idx">
|
||||
@ -30,7 +26,14 @@
|
||||
<div class="news-item-date">{{ item.date }}</div>
|
||||
<div
|
||||
class="news-item-title text-[#0078d7] cursor-pointer"
|
||||
style="word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"
|
||||
style="
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
@click="handleNewClick(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
@ -53,11 +56,11 @@
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
{{item.summary}}
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</template>
|
||||
<div slot="content">
|
||||
{{item.summary}}
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
@ -72,7 +75,7 @@ import customDefaultPage from "@/components/customDefaultPage/index.vue";
|
||||
import { reactive, onMounted, watch, nextTick, ref } from "vue";
|
||||
import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
@ -117,80 +120,85 @@ const state = reactive({
|
||||
currentPage: 1, //当前页码
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
state.filterNewsData.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// state.filterNewsData = state.newsData;
|
||||
getPressReleasesDisplay()
|
||||
getPressReleasesDisplay();
|
||||
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
watch(() => state.filterNewsData, () => {
|
||||
watch(
|
||||
() => state.filterNewsData,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 获取新闻列表
|
||||
const getPressReleasesDisplay = () => {
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
query: state.inputValue,
|
||||
page: state.currentPage,
|
||||
pageSize: 10,
|
||||
timeStart: state.selectedValue
|
||||
? state.selectedValue === 'all_years'
|
||||
? state.selectedValue === "all_years"
|
||||
? null
|
||||
: new Date(state.selectedValue).getTime()
|
||||
: null,
|
||||
}
|
||||
};
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
if (state.currentPage === 1) {
|
||||
state.filterNewsData = res.data.data?.data || []
|
||||
state.filterNewsData = res.data.data?.data || [];
|
||||
} else {
|
||||
state.filterNewsData = [
|
||||
...state.filterNewsData,
|
||||
...(res.data.data?.data || []),
|
||||
]
|
||||
];
|
||||
}
|
||||
if (state.filterNewsData.length < (res.data.data?.total || 0)) {
|
||||
state.hasMore = true
|
||||
state.hasMore = true;
|
||||
} else {
|
||||
state.hasMore = false
|
||||
state.hasMore = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
// 筛选逻辑
|
||||
@ -227,16 +235,16 @@ watch(
|
||||
() => [state.selectedValue, state.inputValue],
|
||||
() => {
|
||||
// handleFilter();
|
||||
state.currentPage = 1
|
||||
getPressReleasesDisplay()
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
}
|
||||
);
|
||||
|
||||
const handleSearch = () => {
|
||||
// 手动触发筛选（保留这个函数以保持兼容性）
|
||||
// handleFilter();
|
||||
state.currentPage = 1
|
||||
getPressReleasesDisplay()
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
// console.log("筛选结果:", state.filterNewsData);
|
||||
};
|
||||
|
||||
@ -252,15 +260,15 @@ const handleNewClick = (item) => {
|
||||
//加载更多数据
|
||||
const doLoadMore = () => {
|
||||
if (!state.hasMore || state.loading) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
// console.log('触底了')
|
||||
state.loading = true
|
||||
state.currentPage++
|
||||
state.loading = true;
|
||||
state.currentPage++;
|
||||
getPressReleasesDisplay().finally(() => {
|
||||
state.loading = false
|
||||
})
|
||||
}
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -309,4 +317,8 @@ const doLoadMore = () => {
|
||||
padding: 20px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<div class="press-releases-page">
|
||||
<n-infinite-scroll :distance="0" @load="doLoadMore">
|
||||
<main
|
||||
class="p-[80px] mx-auto"
|
||||
style="max-width: 100vw; min-width: 285px;"
|
||||
>
|
||||
<main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 285px">
|
||||
<div class="title mb-[24px]">
|
||||
{{ t('press_releases.title') }}
|
||||
{{ t("press_releases.title") }}
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<n-select
|
||||
@ -23,13 +20,8 @@
|
||||
clearable
|
||||
:font-size="72"
|
||||
/>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="handleSearch"
|
||||
class="search-button"
|
||||
:font-size="72"
|
||||
>
|
||||
{{ t('press_releases.search.button') }}
|
||||
<n-button @click="handleSearch" class="search-button" :font-size="72">
|
||||
{{ t("press_releases.search.button") }}
|
||||
</n-button>
|
||||
</div>
|
||||
<div v-for="(item, idx) in state.filterNewsData" :key="idx">
|
||||
@ -37,7 +29,14 @@
|
||||
<div class="news-item-date">{{ item.date }}</div>
|
||||
<div
|
||||
class="news-item-title text-[#0078d7] cursor-pointer"
|
||||
style="word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"
|
||||
style="
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
@click="handleNewClick(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
@ -60,11 +59,11 @@
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
{{item.summary}}
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</template>
|
||||
<div slot="content">
|
||||
{{item.summary}}
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
@ -79,7 +78,7 @@ import customDefaultPage from "@/components/customDefaultPage/index.vue";
|
||||
import { reactive, onMounted, watch, nextTick, ref } from "vue";
|
||||
import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
@ -124,80 +123,85 @@ const state = reactive({
|
||||
currentPage: 1, //当前页码
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
state.filterNewsData.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// state.filterNewsData = state.newsData;
|
||||
getPressReleasesDisplay()
|
||||
getPressReleasesDisplay();
|
||||
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
watch(() => state.filterNewsData, () => {
|
||||
watch(
|
||||
() => state.filterNewsData,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 获取新闻列表
|
||||
const getPressReleasesDisplay = () => {
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
query: state.inputValue,
|
||||
page: state.currentPage,
|
||||
pageSize: 10,
|
||||
timeStart: state.selectedValue
|
||||
? state.selectedValue === 'all_years'
|
||||
? state.selectedValue === "all_years"
|
||||
? null
|
||||
: new Date(state.selectedValue).getTime()
|
||||
: null,
|
||||
}
|
||||
};
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
if (state.currentPage === 1) {
|
||||
state.filterNewsData = res.data.data?.data || []
|
||||
state.filterNewsData = res.data.data?.data || [];
|
||||
} else {
|
||||
state.filterNewsData = [
|
||||
...state.filterNewsData,
|
||||
...(res.data.data?.data || []),
|
||||
]
|
||||
];
|
||||
}
|
||||
if (state.filterNewsData.length < (res.data.data?.total || 0)) {
|
||||
state.hasMore = true
|
||||
state.hasMore = true;
|
||||
} else {
|
||||
state.hasMore = false
|
||||
state.hasMore = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
// 筛选逻辑
|
||||
@ -234,16 +238,16 @@ watch(
|
||||
() => [state.selectedValue, state.inputValue],
|
||||
() => {
|
||||
// handleFilter();
|
||||
state.currentPage = 1
|
||||
getPressReleasesDisplay()
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
}
|
||||
);
|
||||
|
||||
const handleSearch = () => {
|
||||
// 手动触发筛选（保留这个函数以保持兼容性）
|
||||
// handleFilter();
|
||||
state.currentPage = 1
|
||||
getPressReleasesDisplay()
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
// console.log("筛选结果:", state.filterNewsData);
|
||||
};
|
||||
|
||||
@ -259,15 +263,15 @@ const handleNewClick = (item) => {
|
||||
//加载更多数据
|
||||
const doLoadMore = () => {
|
||||
if (!state.hasMore || state.loading) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
// console.log('触底了')
|
||||
state.loading = true
|
||||
state.currentPage++
|
||||
state.loading = true;
|
||||
state.currentPage++;
|
||||
getPressReleasesDisplay().finally(() => {
|
||||
state.loading = false
|
||||
})
|
||||
}
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -346,4 +350,8 @@ const doLoadMore = () => {
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="press-releases-page">
|
||||
<n-infinite-scroll :distance="0" @load="doLoadMore">
|
||||
<main class="p-[35px] mx-auto" style="max-width: calc(100% - 100px);">
|
||||
<main class="p-[35px] mx-auto" style="max-width: calc(100% - 100px)">
|
||||
<div class="title mb-[20px]">
|
||||
{{ t('press_releases.title') }}
|
||||
{{ t("press_releases.title") }}
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<n-select
|
||||
@ -17,12 +17,8 @@
|
||||
:placeholder="t('press_releases.search.placeholder')"
|
||||
class="search-input"
|
||||
/>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="handleSearch"
|
||||
class="search-button w-[120px]"
|
||||
>
|
||||
{{ t('press_releases.search.button') }}
|
||||
<n-button @click="handleSearch" class="search-button w-[120px]">
|
||||
{{ t("press_releases.search.button") }}
|
||||
</n-button>
|
||||
</div>
|
||||
<div v-for="(item, idx) in state.filterNewsData" :key="idx">
|
||||
@ -30,7 +26,14 @@
|
||||
<div class="news-item-date">{{ item.date }}</div>
|
||||
<div
|
||||
class="news-item-title text-[#0078d7] cursor-pointer"
|
||||
style="word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"
|
||||
style="
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
@click="handleNewClick(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
@ -53,11 +56,11 @@
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
{{item.summary}}
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</template>
|
||||
<div slot="content">
|
||||
{{item.summary}}
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
@ -72,7 +75,7 @@ import customDefaultPage from "@/components/customDefaultPage/index.vue";
|
||||
import { reactive, onMounted, watch, nextTick, ref } from "vue";
|
||||
import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
@ -117,80 +120,85 @@ const state = reactive({
|
||||
currentPage: 1, //当前页码
|
||||
});
|
||||
|
||||
const titleRefs = ref([])
|
||||
const titleRefs = ref([]);
|
||||
|
||||
const setTitleRef = (el, idx) => {
|
||||
if (el) titleRefs.value[idx] = el
|
||||
}
|
||||
if (el) titleRefs.value[idx] = el;
|
||||
};
|
||||
|
||||
const checkAllTitleOverflow = () => {
|
||||
state.filterNewsData.forEach((item, idx) => {
|
||||
const el = titleRefs.value[idx]
|
||||
const el = titleRefs.value[idx];
|
||||
if (!el) {
|
||||
item.showTooltip = false
|
||||
return
|
||||
item.showTooltip = false;
|
||||
return;
|
||||
}
|
||||
item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
item.showTooltip =
|
||||
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// state.filterNewsData = state.newsData;
|
||||
getPressReleasesDisplay()
|
||||
getPressReleasesDisplay();
|
||||
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
})
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
});
|
||||
|
||||
watch(() => state.filterNewsData, () => {
|
||||
watch(
|
||||
() => state.filterNewsData,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
checkAllTitleOverflow()
|
||||
})
|
||||
}, { deep: true })
|
||||
checkAllTitleOverflow();
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 获取新闻列表
|
||||
const getPressReleasesDisplay = () => {
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/pressreleases/display'
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
query: state.inputValue,
|
||||
page: state.currentPage,
|
||||
pageSize: 10,
|
||||
timeStart: state.selectedValue
|
||||
? state.selectedValue === 'all_years'
|
||||
? state.selectedValue === "all_years"
|
||||
? null
|
||||
: new Date(state.selectedValue).getTime()
|
||||
: null,
|
||||
}
|
||||
};
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
if (state.currentPage === 1) {
|
||||
state.filterNewsData = res.data.data?.data || []
|
||||
state.filterNewsData = res.data.data?.data || [];
|
||||
} else {
|
||||
state.filterNewsData = [
|
||||
...state.filterNewsData,
|
||||
...(res.data.data?.data || []),
|
||||
]
|
||||
];
|
||||
}
|
||||
if (state.filterNewsData.length < (res.data.data?.total || 0)) {
|
||||
state.hasMore = true
|
||||
state.hasMore = true;
|
||||
} else {
|
||||
state.hasMore = false
|
||||
state.hasMore = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
// 筛选逻辑
|
||||
@ -227,16 +235,16 @@ watch(
|
||||
() => [state.selectedValue, state.inputValue],
|
||||
() => {
|
||||
// handleFilter();
|
||||
state.currentPage = 1
|
||||
getPressReleasesDisplay()
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
}
|
||||
);
|
||||
|
||||
const handleSearch = () => {
|
||||
// 手动触发筛选（保留这个函数以保持兼容性）
|
||||
// handleFilter();
|
||||
state.currentPage = 1
|
||||
getPressReleasesDisplay()
|
||||
state.currentPage = 1;
|
||||
getPressReleasesDisplay();
|
||||
// console.log("筛选结果:", state.filterNewsData);
|
||||
};
|
||||
|
||||
@ -252,15 +260,15 @@ const handleNewClick = (item) => {
|
||||
//加载更多数据
|
||||
const doLoadMore = () => {
|
||||
if (!state.hasMore || state.loading) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
// console.log('触底了')
|
||||
state.loading = true
|
||||
state.currentPage++
|
||||
state.loading = true;
|
||||
state.currentPage++;
|
||||
getPressReleasesDisplay().finally(() => {
|
||||
state.loading = false
|
||||
})
|
||||
}
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -309,4 +317,8 @@ const doLoadMore = () => {
|
||||
padding: 20px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.search-button {
|
||||
background: #ff7bac;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,19 +1,31 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import {useStockQuote} from '@/store/stock-quote/index.js'
|
||||
const {getStockQuate,stockQuote,formatted}=useStockQuote()
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
|
||||
getStockQuate()
|
||||
getStockQuate();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<main ref="main" class="flex pt-80px flex-col md:flex-row justify-center items-center gap-24 rounded-3xl">
|
||||
<main
|
||||
ref="main"
|
||||
class="flex pt-80px flex-col md:flex-row justify-center items-center gap-24 rounded-3xl"
|
||||
>
|
||||
<!-- 左侧大号价格 -->
|
||||
<section class="flex flex-col items-center justify-center glass-card p-24 rounded-2xl shadow-xl">
|
||||
<div class="text-8xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
|
||||
<div class="mt-8 text-2xl text-gray-500 font-semibold tracking-widest mb-8px">NASDAQ: <span class="text-black">FIEE</span></div>
|
||||
<section
|
||||
class="flex flex-col items-center justify-center glass-card p-24 rounded-2xl shadow-xl"
|
||||
>
|
||||
<div
|
||||
class="text-8xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
|
||||
>
|
||||
${{ stockQuote.price }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-8 text-2xl text-gray-500 font-semibold tracking-widest mb-8px"
|
||||
>
|
||||
NASDAQ: <span class="text-black">FIEE</span>
|
||||
</div>
|
||||
<div class="text-gray-500">{{ formatted }}</div>
|
||||
</section>
|
||||
<!-- 右侧信息卡片 -->
|
||||
@ -24,9 +36,14 @@ getStockQuate()
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-base text-gray-400">% Change</div>
|
||||
<div class="text-3xl font-bold"
|
||||
:class="stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'">
|
||||
{{ stockQuote.change }}</div>
|
||||
<div
|
||||
class="text-3xl font-bold"
|
||||
:class="
|
||||
stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'
|
||||
"
|
||||
>
|
||||
{{ stockQuote.change }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-base text-gray-400">Day's Range</div>
|
||||
@ -46,19 +63,17 @@ getStockQuate()
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
|
||||
.glass-card {
|
||||
backdrop-filter: blur(16px);
|
||||
background: rgba(255,255,255,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
|
||||
}
|
||||
.info-card {
|
||||
@apply glass-card p-5 rounded-xl flex flex-col items-start gap-1 hover:scale-105 transition-transform duration-300;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,19 +1,29 @@
|
||||
<script setup>
|
||||
import {useStockQuote} from '@/store/stock-quote/index.js'
|
||||
const {getStockQuate,stockQuote,formatted}=useStockQuote()
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
|
||||
getStockQuate()
|
||||
getStockQuate();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main
|
||||
ref="main"
|
||||
class="flex pt-100px flex-col md:flex-row justify-center items-center gap-32 rounded-3xl "
|
||||
class="flex pt-100px flex-col md:flex-row justify-center items-center gap-32 rounded-3xl"
|
||||
>
|
||||
<!-- 左侧大号价格 -->
|
||||
<section class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl ">
|
||||
<div class="text-9xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
|
||||
<div class="mt-10 text-3xl text-gray-500 font-semibold tracking-widest mb-10px">NASDAQ: <span class="text-black">FIEE</span></div>
|
||||
<section
|
||||
class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl"
|
||||
>
|
||||
<div
|
||||
class="text-9xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
|
||||
>
|
||||
${{ stockQuote.price }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-10 text-3xl text-gray-500 font-semibold tracking-widest mb-10px"
|
||||
>
|
||||
NASDAQ: <span class="text-black">FIEE</span>
|
||||
</div>
|
||||
<div class="text-gray-500">{{ formatted }}</div>
|
||||
</section>
|
||||
<!-- 右侧信息卡片 -->
|
||||
@ -27,9 +37,14 @@ getStockQuate()
|
||||
<!-- <div class="text-3xl font-bold"
|
||||
:class="stockQuote.change?.[1]?.startsWith('-') ? 'text-red-500' : (stockQuote.change?.[1]?.startsWith('+') ? 'text-green-500' : '')">
|
||||
{{ stockQuote.change?.join('') }}</div> -->
|
||||
<div class="text-3xl font-bold"
|
||||
:class="stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'">
|
||||
{{ stockQuote.change }}</div>
|
||||
<div
|
||||
class="text-3xl font-bold"
|
||||
:class="
|
||||
stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'
|
||||
"
|
||||
>
|
||||
{{ stockQuote.change }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-lg text-gray-400">Day's Range</div>
|
||||
@ -55,9 +70,9 @@ getStockQuate()
|
||||
/* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
|
||||
.glass-card {
|
||||
backdrop-filter: blur(16px);
|
||||
background: rgba(255,255,255,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
|
||||
}
|
||||
.info-card {
|
||||
@apply glass-card p-6 rounded-xl flex flex-col items-start gap-1 hover:scale-105 transition-transform duration-300;
|
||||
|
||||
@ -1,15 +1,27 @@
|
||||
<script setup>
|
||||
import { useStockQuote } from '@/store/stock-quote/index.js';
|
||||
const { getStockQuate, stockQuote ,formatted} = useStockQuote();
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
getStockQuate();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="min-h-60vh flex flex-col items-center justify-start px-2 py-5 pt-500px">
|
||||
<main
|
||||
class="min-h-60vh flex flex-col items-center justify-start px-2 py-5 pt-500px"
|
||||
>
|
||||
<!-- 价格卡片 -->
|
||||
<section class="w-full max-w-90vw flex flex-col items-center justify-center glass-card p-4 rounded-2xl shadow mb-5">
|
||||
<div class="text-4xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
|
||||
<div class="mt-2 text-sm text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">FIEE</span></div>
|
||||
<section
|
||||
class="w-full max-w-90vw flex flex-col items-center justify-center glass-card p-4 rounded-2xl shadow mb-5"
|
||||
>
|
||||
<div
|
||||
class="text-4xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
|
||||
>
|
||||
${{ stockQuote.price }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-2 text-sm text-gray-500 font-semibold tracking-widest mb-0px"
|
||||
>
|
||||
NASDAQ: <span class="text-black">FIEE</span>
|
||||
</div>
|
||||
<div class="text-gray-500 text-60px">{{ formatted }}</div>
|
||||
</section>
|
||||
<!-- 信息卡片列表 -->
|
||||
@ -21,9 +33,14 @@ getStockQuate();
|
||||
<div class="info-card">
|
||||
<div class="text-xs text-gray-400">% Change</div>
|
||||
|
||||
<div class="text-lg font-bold"
|
||||
:class="stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'">
|
||||
{{ stockQuote.change }}</div>
|
||||
<div
|
||||
class="text-lg font-bold"
|
||||
:class="
|
||||
stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'
|
||||
"
|
||||
>
|
||||
{{ stockQuote.change }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-xs text-gray-400">Day's Range</div>
|
||||
@ -48,14 +65,14 @@ getStockQuate();
|
||||
<style scoped>
|
||||
.glass-card {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255,255,255,0.92);
|
||||
border: 1px solid rgba(200,200,255,0.18);
|
||||
box-shadow: 0 2px 8px 0 rgba(31,38,135,0.08);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(200, 200, 255, 0.18);
|
||||
box-shadow: 0 2px 8px 0 rgba(31, 38, 135, 0.08);
|
||||
}
|
||||
.info-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 4px 0 rgba(31,38,135,0.06);
|
||||
box-shadow: 0 1px 4px 0 rgba(31, 38, 135, 0.06);
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,19 +1,30 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import { useStockQuote } from '@/store/stock-quote/index.js';
|
||||
const { getStockQuate, stockQuote ,formatted} = useStockQuote();
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
getStockQuate();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<main ref="main">
|
||||
<main class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px">
|
||||
<main
|
||||
class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px"
|
||||
>
|
||||
<!-- 价格卡片 -->
|
||||
<section class="w-full max-w-80vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow mb-6">
|
||||
<div class="text-5xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
|
||||
<div class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">FIEE</span></div>
|
||||
<section
|
||||
class="w-full max-w-80vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow mb-6"
|
||||
>
|
||||
<div
|
||||
class="text-5xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
|
||||
>
|
||||
${{ stockQuote.price }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px"
|
||||
>
|
||||
NASDAQ: <span class="text-black">FIEE</span>
|
||||
</div>
|
||||
<div class="text-gray-500 text-70px">{{ formatted }}</div>
|
||||
</section>
|
||||
<!-- 信息卡片列表 -->
|
||||
@ -24,9 +35,16 @@ getStockQuate();
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">% Change</div>
|
||||
<div class="text-xl font-bold"
|
||||
:class="stockQuote.change?.includes('-') ? 'text-green-500' : 'text-red-500'">
|
||||
{{ stockQuote.change }}</div>
|
||||
<div
|
||||
class="text-xl font-bold"
|
||||
:class="
|
||||
stockQuote.change?.includes('-')
|
||||
? 'text-green-500'
|
||||
: 'text-red-500'
|
||||
"
|
||||
>
|
||||
{{ stockQuote.change }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">Day's Range</div>
|
||||
@ -52,14 +70,14 @@ getStockQuate();
|
||||
<style scoped lang="scss">
|
||||
.glass-card {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255,255,255,0.92);
|
||||
border: 1px solid rgba(200,200,255,0.18);
|
||||
box-shadow: 0 3px 12px 0 rgba(31,38,135,0.08);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(200, 200, 255, 0.18);
|
||||
box-shadow: 0 3px 12px 0 rgba(31, 38, 135, 0.08);
|
||||
}
|
||||
.info-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 6px 0 rgba(31,38,135,0.06);
|
||||
box-shadow: 0 2px 6px 0 rgba(31, 38, 135, 0.06);
|
||||
padding: 16px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -67,4 +85,3 @@ getStockQuate();
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user