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

修改bug

Browse Source
This commit is contained in:
liwenhao 2025-05-23 20:02:35 +08:00
parent f3ce08a945
commit 8252812dfb
11 changed files with 408 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/locales/en.js
View File

@ -608,7 +608,7 @@ export default {
CONTENT: CONTENT:
'FiEE Inc., (NASDAQ: MINM) was formerly Minim, Inc. founded in 1977. We have a historical track record of delivering a comprehensive WiFi/Software as a Service platform in the market. After years of development, we made the strategic decision to transition to a Software First Model in 2023 to expand our technology portfolio and revenue streams. By 2025, we have rebranded ourselves as a technology company leveraging our expertise in IoT, connectivity, and artificial intelligence ("AI") to explore new business prospects and extend our global footprint.', 'FiEE Inc., (NASDAQ: MINM) was formerly Minim, Inc. founded in 1977. We have a historical track record of delivering a comprehensive WiFi/Software as a Service platform in the market. After years of development, we made the strategic decision to transition to a Software First Model in 2023 to expand our technology portfolio and revenue streams. By 2025, we have rebranded ourselves as a technology company leveraging our expertise in IoT, connectivity, and artificial intelligence ("AI") to explore new business prospects and extend our global footprint.',
CONTENTTWO: CONTENTTWO:
'Our services are structured into four key categories: Cloud-Managed Connectivity (WiFi) Platform, IoT Hardware Sales & Licensing, SAAS Solutions, and Professional To-C and To-B Services & Support. Notably, we have introduced our innovative Software as a Service ("SaaS") solutions, which integrate our AI and data analytics capabilities into content creation and brand management. This initiative has led to the nurturing of a robust pool of Key Opinion Leaders (KOLs) on major social media platforms worldwide, assisting them in developing, managing, and optimizing their digital presence across global platforms. Our services include customized graphics and posts, short videos, and editorial calendars tailored to align with brand objectives.', 'into four key categories: Cloud-Managed Connectivity (WiFi) Platform, IoT Hardware Sales & Licensing, SAAS Solutions, and Professional To-C and To-B Services & Support. Notably, we have introduced our innovative Software as a Service ("SaaS") solutions, which integrate our AI and data analytics capabilities into content creation and brand management. This initiative has led to the nurturing of a robust pool of Key Opinion Leaders (KOLs) on major social media platforms worldwide, assisting them in developing, managing, and optimizing their digital presence across global platforms. Our services include customized graphics and posts, short videos, and editorial calendars tailored to align with brand objectives.',
CONTENTTHREE: CONTENTTHREE:
"Powered by IoT-enabled Connectivity Solutions, we are empowering talents with value throughout the entire lifecycle. We are committed to ongoing investments in AI technology for data analysis and fan behavior insights to develop highly targeted multimedia and multilingual content. Our goal is to expand our solutions and services to reach a broader global audience.", "Powered by IoT-enabled Connectivity Solutions, we are empowering talents with value throughout the entire lifecycle. We are committed to ongoing investments in AI technology for data analysis and fan behavior insights to develop highly targeted multimedia and multilingual content. Our goal is to expand our solutions and services to reach a broader global audience.",
CONTENTTWOTITLE: "Our services are structured", CONTENTTWOTITLE: "Our services are structured",
@ -624,37 +624,37 @@ export default {
CONTENT: "", CONTENT: "",
TITLE: "Corporate Milestone", TITLE: "Corporate Milestone",
SUBHEADING: "•1977 – 2015 : Founding & Licensing", SUBHEADING: "1977 – 2015 : Founding & Licensing",
paragraph: { paragraph: {
ONE: "I.Founded as Zoom Telephonics in 1977. ", ONE: "• Founded as Zoom Telephonics in 1977. ",
TWO: "II.Secured a five-year Motorola home-network license effective 1 Jan, 2016. ", TWO: "• Secured a five-year Motorola home-network license effective 1 Jan, 2016. ",
}, },
SUBHEADINGTWO: "•2020 : Merger & AI Advancement", SUBHEADINGTWO: "2020 : Merger & AI Advancement",
paragraphTwo: { paragraphTwo: {
ONE: "I.November 2020: Merged with Minim Inc.; adopted Minim name/OTCQB ticker", ONE: "• November 2020: Merged with Minim Inc.; adopted Minim name/OTCQB ticker",
TWO: "II.Rolled out AI-driven Wi-Fi management and IoT security platform.", TWO: "• Rolled out AI-driven Wi-Fi management and IoT security platform.",
THREE: "", THREE: "",
}, },
SUBHEADINGTHREE: "•2021: NASDAQ Listing", SUBHEADINGTHREE: "2021: NASDAQ Listing",
paragraphTHREE: { paragraphTHREE: {
ONE: "I.Transitioned from OTCQB to NASDAQ Capital Market on 7 July, 2021, under ticker MINM.", ONE: "• Transitioned from OTCQB to NASDAQ Capital Market on 7 July, 2021, under ticker MINM.",
TWO: "II.Raised $25 M in a public offering to fund expansion.", TWO: "• Raised $25 M in a public offering to fund expansion.",
THREE: "", THREE: "",
}, },
SUBHEADINGFOREFF: "•2023 – 2024: Pivoting to A Software First Model", SUBHEADINGFOREFF: "2023 – 2024: Pivoting to A Software First Model",
paragraphFOUR: { paragraphFOUR: {
ONE: "I.Enhanced its MinimOS cloud platform and API suite for ISPs/OEMs, with major deployments like Vox’s AI-driven Wi-Fi Home Manager.", ONE: "• Enhanced its MinimOS cloud platform and API suite for ISPs/OEMs, with major deployments like Vox’s AI-driven Wi-Fi Home Manager.",
TWO: "II.Signed a merger agreement with e2Companies to broaden its technology and revenue base", TWO: "• Signed a merger agreement with e2Companies to broaden its technology and revenue base",
THREE: "", THREE: "",
}, },
SUBHEADINGFIVE: "•2025 Rebranding & New C-Suite", SUBHEADINGFIVE: "2025 Rebranding & New C-Suite",
paragraphFIVE: { paragraphFIVE: {
ONE: "I.Officially rebranded from Minim Inc. to FiEE Inc.", ONE: "• Officially rebranded from Minim Inc. to FiEE Inc.",
TWO: "II.Appointed Li Wai Chung as CEO and Cao Yu as CFO.", TWO: "• Appointed Li Wai Chung as CEO and Cao Yu as CFO.",
THREE: THREE:
"III.Leverage on foundation in IoT, connectivity and AI to pursue new business opportunities.", "• Leverage on foundation in IoT, connectivity and AI to pursue new business opportunities.",
FOUR: "IV.Launched SaaS product in the market to generate recurring revenue streams", FOUR: "• Launched SaaS product in the market to generate recurring revenue streams",
FIVE: "V.Acquisition of Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC", FIVE: "• Acquisition of Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC",
}, },
}, },
TITLEFIVE: { TITLEFIVE: {

151
src/views/BusinessServices/size1920/index.vue
View File

@ -3,69 +3,113 @@
<div class="business-page"> <div class="business-page">
<!-- 渐变背景标题区 - 增加层次感 --> <!-- 渐变背景标题区 - 增加层次感 -->
<section class="hero-section"> <section class="hero-section">
<div class="hero-content container"> <div class="container">
<div class="title-wrapper"> <div class="title-wrapper">
<h1 class="hero-title"> <h1 class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</h1> </h1>
<div class="title-decoration"></div>
</div> </div>
<div class="hero-description"> <div class="hero-description">
<p>{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}</p> {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div> </div>
</div> </div>
</section> </section>
<!-- 业务核心解决方案 - 重新设计布局 --> <!-- 业务核心解决方案 - 重新设计布局 -->
<main class="container"> <main class="container">
<p style="font-size: 18px; font-weight: bold"> <section>
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }} <h1 class="hero-title">
</p> {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</h1>
</section>
<!-- 解决方案网格 - 新布局 --> <!-- 解决方案网格 - 新布局 -->
<div class="solution-grid"> <div class="solution-grid">
<!-- 主推解决方案 --> <!-- 主推解决方案 -->
<div class="featured-solution"> <div style="display: flex">
<div class="solution-card" :style="{ '--delay': '0s' }"> <div class="featured-solution">
<!-- <div class="card-badge">旗舰方案</div> --> <div class="solution-card" :style="{ '--delay': '0s' }">
<div class="card-header"> <div class="card-header">
<div class="decorative-line"></div> <div class="decorative-line"></div>
<h2 class="card-title">{{ solutions[0].title }}</h2> <h2 class="card-title">{{ solutions[0].title }}</h2>
</div>
<ul class="card-content">
<li
v-for="(point, pIndex) in solutions[0].points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">➤</div>
<div class="point-text">{{ point }}</div>
</li>
</ul>
</div>
</div>
<div style="width: 50px"></div>
<div class="featured-solution">
<div class="solution-card" :style="{ '--delay': '0s' }">
<div class="card-header">
<div class="decorative-line"></div>
<h2 class="card-title">{{ solutions[1].title }}</h2>
</div>
<ul class="card-content">
<li
v-for="(point, pIndex) in solutions[1].points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">➤</div>
<div class="point-text">{{ point }}</div>
</li>
</ul>
</div> </div>
<ul class="card-content">
<li
v-for="(point, pIndex) in solutions[0].points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">➤</div>
<div class="point-text">{{ point }}</div>
</li>
</ul>
</div> </div>
</div> </div>
<!-- 次要解决方案组 --> <div style="display: flex">
<div class="secondary-solutions"> <div class="featured-solution">
<div <div
v-for="(item, index) in solutions.slice(1)" class="solution-card"
:key="index + 1" style="height: 400px"
class="solution-card" :style="{ '--delay': '0s' }"
:style="{ '--delay': (index + 1) * 0.1 + 's' }" >
> <div class="card-header">
<div class="card-header"> <div class="decorative-line"></div>
<div class="decorative-line"></div> <h2 class="card-title">{{ solutions[2].title }}</h2>
<h2 class="card-title">{{ item.title }}</h2> </div>
<ul class="card-content">
<li
v-for="(point, pIndex) in solutions[2].points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">➤</div>
<div class="point-text">{{ point }}</div>
</li>
</ul>
</div>
</div>
<div style="width: 50px"></div>
<div class="featured-solution" style="width: 680px">
<div
class="solution-card"
style="height: 400px"
:style="{ '--delay': '0s' }"
>
<div class="card-header">
<div class="decorative-line"></div>
<h2 class="card-title">{{ solutions[3].title }}</h2>
</div>
<ul class="card-content">
<li
v-for="(point, pIndex) in solutions[3].points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">➤</div>
<div class="point-text">{{ point }}</div>
</li>
</ul>
</div> </div>
<ul class="card-content">
<li
v-for="(point, pIndex) in item.points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">➤</div>
<div class="point-text">{{ point }}</div>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -148,14 +192,13 @@ const solutions = computed(() => [
} }
.hero-title { .hero-title {
font-size: 3.5rem; font-size: 40px;
color: #2c3e50; color: #2c3e50;
margin-bottom: 2rem; margin-bottom: 2rem;
animation: slideIn 1s ease; animation: slideIn 1s ease;
} }
.hero-description { .hero-description {
max-width: 800px;
margin: 0 auto; margin: 0 auto;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
@ -204,13 +247,6 @@ const solutions = computed(() => [
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>') background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
no-repeat bottom/100% 30%; no-repeat bottom/100% 30%;
} }
.hero-title {
font-size: 3.5rem;
margin-bottom: 2rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.title-decoration { .title-decoration {
position: absolute; position: absolute;
bottom: -15px; bottom: -15px;
@ -221,13 +257,6 @@ const solutions = computed(() => [
border-radius: 2px; border-radius: 2px;
} }
.hero-description {
max-width: 800px;
font-size: 1.1rem;
line-height: 1.8;
opacity: 0.9;
}
/* 解决方案网格 */ /* 解决方案网格 */
.solution-grid { .solution-grid {
display: flex; display: flex;
@ -254,7 +283,8 @@ const solutions = computed(() => [
.solution-card { .solution-card {
background: white; background: white;
border-radius: 16px; border-radius: 16px;
padding: 2.5rem; padding: 0 2.5rem;
height: 350px;
box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1); box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
transform: translateY(20px); transform: translateY(20px);
opacity: 0; opacity: 0;
@ -365,6 +395,7 @@ const solutions = computed(() => [
/* 布局调整 */ /* 布局调整 */
.secondary-solutions { .secondary-solutions {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 2rem; gap: 2rem;
} }

2
src/views/CommitteeAppointment/size1920/index.vue
View File

@ -3,7 +3,7 @@
<!-- 标题区 --> <!-- 标题区 -->
<section class="hero-section"> <section class="hero-section">
<div class="container"> <div class="container">
<h1>Committee Composition</h1> <h1 style="font-size: 40px">Committee Composition</h1>
</div> </div>
</section> </section>

9
src/views/boarddirectors/size1920/index.vue
View File

@ -13,7 +13,7 @@
<n-h2 class="director-name">{{ director.name }}</n-h2> <n-h2 class="director-name">{{ director.name }}</n-h2>
<n-text class="director-title">{{ director.title }}</n-text> <n-text class="director-title">{{ director.title }}</n-text>
<n-divider class="divider" /> <n-divider class="divider" />
<n-p class="director-bio">{{ director.contain }}</n-p> <!-- <n-p class="director-bio">{{ director.contain }}</n-p> -->
</div> </div>
</div> </div>
</div> </div>
@ -69,10 +69,9 @@ const otherDirectors = [
} }
.page-title { .page-title {
text-align: center; font-size: 2.5rem; /* 18px */
margin-bottom: 16px; margin-bottom: 30px;
font-weight: 500; color: #333;
color: #1a1a1a;
} }
.directors-list { .directors-list {

5
src/views/boarddirectors/size375/index.vue
View File

@ -16,7 +16,7 @@
<n-text class="director-title">{{ director.title }}</n-text> <n-text class="director-title">{{ director.title }}</n-text>
</div> </div>
<n-divider class="divider" /> <n-divider class="divider" />
<n-p class="director-bio">{{ director.contain }}</n-p> <!-- <n-p class="director-bio">{{ director.contain }}</n-p> -->
</div> </div>
</div> </div>
</div> </div>
@ -71,8 +71,7 @@ const otherDirectors = [
} }
.directors-page { .directors-page {
margin: 0 auto; padding: 40px;
padding: 40px var(--mobile-padding);
} }
.page-title { .page-title {

8
src/views/companyoverview/size1920/index.vue
View File

@ -8,11 +8,6 @@
$t("COMPANYOVERVIEW.TITLETWO.TITLE") $t("COMPANYOVERVIEW.TITLETWO.TITLE")
}}</n-h1> }}</n-h1>
</transition> </transition>
<!-- <transition name="fade-up" appear>
<n-p class="hero-subtitle">
{{ $t("COMPANYOVERVIEW.HERO_SUBTITLE") }}
</n-p>
</transition> -->
</div> </div>
<!-- 公司简介部分 --> <!-- 公司简介部分 -->
@ -216,7 +211,6 @@ const stats = ref([
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
color: var(--text-color);
} }
/* 顶部大图区域 */ /* 顶部大图区域 */
@ -232,7 +226,7 @@ const stats = ref([
} }
.hero-title { .hero-title {
font-size: 3.5rem; font-size: 40px;
margin-bottom: 20px; margin-bottom: 20px;
font-weight: 700; font-weight: 700;
} }

12
src/views/govern/size1920/index.vue
View File

@ -36,9 +36,9 @@
</svg> </svg>
</div> </div>
<div> <div>
<h2 class="text-2xl font-medium text-gray-800 mb-2"> <h1 class="text-2xl font-medium text-gray-800 mb-2">
{{ item.title }} {{ item.title }}
</h2> </h1>
</div> </div>
</div> </div>
<div class="mt-auto"> <div class="mt-auto">
@ -81,28 +81,28 @@ import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE
const state = reactive({ const state = reactive({
list: [ list: [
{ {
title: "Audit Committee Charter", title: "AUDIT COMMITTEE CHARTER",
description: description:
"Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.", "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
url: quarterlyPdfone, url: quarterlyPdfone,
date: "Last updated: March 2025", date: "Last updated: March 2025",
}, },
{ {
title: "Code of Business Conduct", title: "CODE OF BUSINESS CONDUCT AND ETHICS",
description: description:
"Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.", "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
url: quarterlyPdftwo, url: quarterlyPdftwo,
date: "Last updated: January 2025", date: "Last updated: January 2025",
}, },
{ {
title: "Compensation Committee Charter", title: "COMPENSATION COMMITTEE CHARTER",
description: description:
"Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.", "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
url: quarterlyPdfthree, url: quarterlyPdfthree,
date: "Last updated: February 2025", date: "Last updated: February 2025",
}, },
{ {
title: "Nominating & Governance Charter", title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
description: description:
"Provides the framework for director nominations and corporate governance matters.", "Provides the framework for director nominations and corporate governance matters.",
url: quarterlyPdffour, url: quarterlyPdffour,

26
src/views/govern/size375/index.vue
View File

@ -36,9 +36,9 @@
</svg> </svg>
</div> </div>
<div> <div>
<h2 class="text-2xl font-medium text-gray-800 mb-2"> <h1 class="text-2xl font-medium text-gray-800 mb-2">
{{ item.title }} {{ item.title }}
</h2> </h1>
</div> </div>
</div> </div>
<div class="mt-auto"> <div class="mt-auto">
@ -71,35 +71,41 @@
<script setup> <script setup>
import { reactive } from "vue"; import { reactive } from "vue";
import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
const state = reactive({ const state = reactive({
list: [ list: [
{ {
title: "Audit Committee Charter", title: "AUDIT COMMITTEE CHARTER",
description: description:
"Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.", "Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
url: "/src/assets/file/AUDIT COMMITTEE CHARTER.pdf", url: quarterlyPdfone,
date: "Last updated: March 2025", date: "Last updated: March 2025",
}, },
{ {
title: "Code of Business Conduct", title: "CODE OF BUSINESS CONDUCT AND ETHICS",
description: description:
"Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.", "Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.",
url: "/src/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf", url: quarterlyPdftwo,
date: "Last updated: January 2025", date: "Last updated: January 2025",
}, },
{ {
title: "Compensation Committee Charter", title: "COMPENSATION COMMITTEE CHARTER",
description: description:
"Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.", "Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
url: "/src/assets/file/COMPENSATION COMMITTEE CHARTER.pdf", url: quarterlyPdfthree,
date: "Last updated: February 2025", date: "Last updated: February 2025",
}, },
{ {
title: "Nominating & Governance Charter", title: "NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER",
description: description:
"Provides the framework for director nominations and corporate governance matters.", "Provides the framework for director nominations and corporate governance matters.",
url: "/src/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf", url: quarterlyPdffour,
date: "Last updated: April 2025", date: "Last updated: April 2025",
}, },
], ],

58
src/views/manage/size1920/index.vue
View File

@ -1,15 +1,17 @@
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="management-page"> <div class="">
<!-- 标题区 --> <!-- 标题区 -->
<section class="leadership-header"> <div class="company-overview">
<div class="container"> <div class="hero-section">
<h1 class="page-title"> <transition name="fade-up" appear>
FiEE, Inc. has a team of capable senior management with extensive <n-h1 class="hero-title"
professional experience >FiEE, Inc. has a team of capable senior management with extensive
</h1> professional experience</n-h1
>
</transition>
</div> </div>
</section> </div>
<!-- 管理团队列表 --> <!-- 管理团队列表 -->
<main class="container"> <main class="container">
@ -88,6 +90,46 @@ const getInitials = (name) => {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.company-overview {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
color: var(--text-color);
}
/* 顶部大图区域 */
.hero-section {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: white;
padding: 120px 0;
text-align: center;
margin-bottom: 60px;
border-radius: 8px;
}
/* 动画 */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.hero-title {
font-size: 40px;
margin-bottom: 20px;
font-weight: 700;
}
.hero-subtitle {
font-size: 1.5rem;
opacity: 0.9;
}
/* 基础样式 */ /* 基础样式 */
.container { .container {
max-width: 1200px; max-width: 1200px;

121
src/views/myHome/size1920/index.vue
View File

@ -4,10 +4,19 @@
class="company-overview" class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
> >
<h2 class="section-titles">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h2> <div class="hero-section">
<div class="content-block"> <transition name="fade-up" appear>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</p> <n-h1 class="hero-title">
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p> <div
class="content-blocks"
:class="{ 'slide-in': isInView }"
ref="contentRef"
>
<text>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</text>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
</div>
</n-h1>
</transition>
</div> </div>
</section> </section>
@ -41,7 +50,7 @@
background: #f8fafc; background: #f8fafc;
" "
> >
<h2 class="section-title"> <h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }} {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h2> </h2>
<div class="mission-content"> <div class="mission-content">
@ -61,7 +70,9 @@
class="milestones" class="milestones"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
> >
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}</h2> <h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
</h2>
<div class="milestone-item"> <div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3> <h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
@ -106,26 +117,12 @@
</ul> </ul>
</div> </div>
</section> </section>
<!-- 突出成就 -->
<section
class="achievements"
style="
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
"
>
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}</h2>
<p>{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}</p>
</section>
<!-- 新闻模块 --> <!-- 新闻模块 -->
<section <section
class="news-section" class="news-section"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
> >
<h2 class="section-title">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2> <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
<div class="news-card"> <div class="news-card">
<!-- <div class="news-date">De 15. 2023</div> --> <!-- <div class="news-date">De 15. 2023</div> -->
<!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> --> <!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
@ -241,7 +238,7 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref } from "vue"; import { onMounted, ref, onUnmounted } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const dataObj = ref({ const dataObj = ref({
change: ["0.2", "1111"], change: ["0.2", "1111"],
@ -252,6 +249,41 @@ const { getStockQuate, stockQuote } = useStockQuote();
getStockQuate(); getStockQuate();
const { t: $t } = useI18n(); const { t: $t } = useI18n();
const contentRef = ref(null);
const isInView = ref(false);
let observer = null;
onMounted(() => {
if (contentRef.value && "IntersectionObserver" in window) {
observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
isInView.value = true;
// 可选：只触发一次动画
// observer.unobserve(entry.target);
}
});
},
{
root: null,
threshold: 0.1, // 元素进入视口10%时触发
rootMargin: "0px 0px -50px 0px", // 提前50px触发
}
);
observer.observe(contentRef.value);
} else {
// 回退方案：如果不支持IntersectionObserver则直接显示
isInView.value = true;
}
});
onUnmounted(() => {
if (observer) {
observer.disconnect();
}
});
</script> </script>
<style scoped> <style scoped>
@ -267,7 +299,29 @@ const { t: $t } = useI18n();
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* 顶部大图区域 */
.hero-section {
background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: white;
padding: 40px 20px;
text-align: left;
margin-bottom: 60px;
border-radius: 8px;
}
/* 动画 */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.banner-content { .banner-content {
text-align: center; text-align: center;
color: white; color: white;
@ -301,16 +355,29 @@ const { t: $t } = useI18n();
color: #895bff; color: #895bff;
} }
.section-titles { .section-titles {
font-size: 2.5rem; /* 18px */ font-size: 2.5rem;
margin-bottom: 30px; margin-bottom: 30px;
color: #333; color: black;
} }
.content-block { .content-block {
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
} }
.content-blocks {
font-size: 2rem;
color: #fff;
font-weight: bold;
opacity: 0;
transform: translateX(-200px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.content-blocks.slide-in {
opacity: 1;
transform: translateX(0);
}
.mission-content ul { .mission-content ul {
list-style: disc; list-style: disc;
padding-left: 20px; padding-left: 20px;
@ -374,7 +441,7 @@ const { t: $t } = useI18n();
.card-title { .card-title {
font-size: 1.8rem; font-size: 1.8rem;
margin-bottom: 25px; margin-bottom: 25px;
color: #895bff; color: #333;
position: relative; position: relative;
padding-bottom: 10px; padding-bottom: 10px;
} }
@ -386,7 +453,7 @@ const { t: $t } = useI18n();
left: 0; left: 0;
width: 60px; width: 60px;
height: 3px; height: 3px;
background: linear-gradient(90deg, #895bff, #b388ff); background: linear-gradient(90deg, #121212, #232330);
} }
/* 股票信息卡片样式 */ /* 股票信息卡片样式 */

168
src/views/myHome/size375/index.vue
View File

@ -4,10 +4,19 @@
class="company-overview" class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
> >
<h2 class="section-titles">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h2> <div class="hero-section">
<div class="content-block"> <transition name="fade-up" appear>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</p> <n-h1 class="hero-title">
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p> <div
class="content-blocks"
:class="{ 'slide-in': isInView }"
ref="contentRef"
>
<text>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</text>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
</div>
</n-h1>
</transition>
</div> </div>
</section> </section>
@ -20,7 +29,13 @@
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h2> <h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h2>
<div class="content-block"> <div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p> <p>
<text style="color: #895bff">{{
$t("COMPANYOVERVIEW.TITLETWO.CONTENTTWOTITLE")
}}</text>
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}
</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
</div> </div>
</section> </section>
@ -35,7 +50,7 @@
background: #f8fafc; background: #f8fafc;
" "
> >
<h2 class="section-title"> <h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }} {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h2> </h2>
<div class="mission-content"> <div class="mission-content">
@ -55,7 +70,9 @@
class="milestones" class="milestones"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
> >
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}</h2> <h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
</h2>
<div class="milestone-item"> <div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3> <h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
@ -100,31 +117,29 @@
</ul> </ul>
</div> </div>
</section> </section>
<!-- 突出成就 -->
<section
class="achievements"
style="
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
"
>
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}</h2>
<p>{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}</p>
</section>
<!-- 新闻模块 --> <!-- 新闻模块 -->
<section <section
class="news-section" class="news-section"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
> >
<h2 class="section-title">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2> <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
<div class="news-card"> <div class="news-card">
<div class="news-date">De 15. 2023</div> <!-- <div class="news-date">De 15. 2023</div> -->
<h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> <!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
<p class="news-excerpt"> <p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.LATEST_CONTENT") }} {{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
</p>
<p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
</p>
<p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
</p>
<p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
</p>
<p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
</p> </p>
<!-- <a href="#" class="news-link" <!-- <a href="#" class="news-link"
>{{ $t("HOME.CONTAINY.NEWS.READ_MORE") }} →</a >{{ $t("HOME.CONTAINY.NEWS.READ_MORE") }} →</a
@ -145,14 +160,14 @@
<span class="data-label">{{ <span class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE") $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
}}</span> }}</span>
<span class="data-value">${{ dataObj.Open }}</span> <span class="data-value">${{ stockQuote.Open }}</span>
</div> </div>
<div class="data-row"> <div class="data-row">
<span class="data-label">{{ <span class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.CHANGE") $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
}}</span> }}</span>
<span class="data-value positive" <span class="data-value positive"
>{{ dataObj.change[0] }}{{ dataObj.change[1] }}</span >{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
> >
</div> </div>
<div class="data-row"> <div class="data-row">
@ -165,13 +180,13 @@
<span class="data-label">{{ <span class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.VOLUME") $t("HOME.CONTAINY.STOCK_INFO.VOLUME")
}}</span> }}</span>
<span class="data-value">{{ dataObj.Volume }}</span> <span class="data-value">{{ stockQuote.Volume }}</span>
</div> </div>
<div class="data-row"> <div class="data-row">
<span class="data-label">{{ <span class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP") $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
}}</span> }}</span>
<span class="data-value">${{ dataObj.MarketCap }}</span> <span class="data-value">${{ stockQuote.MarketCap }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -223,22 +238,52 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref } from "vue"; import { onMounted, ref, onUnmounted } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { getTestData } from "@/config/testRequest";
const dataObj = ref({ const dataObj = ref({
change: ["0.2", "1111"], change: ["0.2", "1111"],
}); });
onMounted(async () => { import { useStockQuote } from "@/store/stock-quote/index.js";
try { const { getStockQuate, stockQuote } = useStockQuote();
const data = await getTestData();
dataObj.value = data; getStockQuate();
} catch (error) {
console.error("调用接口失败:", error); const { t: $t } = useI18n();
const contentRef = ref(null);
const isInView = ref(false);
let observer = null;
onMounted(() => {
if (contentRef.value && "IntersectionObserver" in window) {
observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
isInView.value = true;
// 可选：只触发一次动画
// observer.unobserve(entry.target);
}
});
},
{
root: null,
threshold: 0.1, // 元素进入视口10%时触发
rootMargin: "0px 0px -50px 0px", // 提前50px触发
}
);
observer.observe(contentRef.value);
} else {
// 回退方案：如果不支持IntersectionObserver则直接显示
isInView.value = true;
}
});
onUnmounted(() => {
if (observer) {
observer.disconnect();
} }
}); });
const { t: $t } = useI18n();
</script> </script>
<style scoped> <style scoped>
@ -254,7 +299,29 @@ const { t: $t } = useI18n();
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* 顶部大图区域 */
.hero-section {
background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: white;
padding: 40px 20px;
text-align: left;
margin-bottom: 60px;
border-radius: 8px;
}
/* 动画 */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.banner-content { .banner-content {
text-align: center; text-align: center;
color: white; color: white;
@ -288,16 +355,29 @@ const { t: $t } = useI18n();
color: #895bff; color: #895bff;
} }
.section-titles { .section-titles {
font-size: 2.5rem; /* 18px */ font-size: 2.5rem;
margin-bottom: 30px; margin-bottom: 30px;
color: #333; color: black;
} }
.content-block { .content-block {
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
} }
.content-blocks {
font-size: 2rem;
color: #fff;
font-weight: bold;
opacity: 0;
transform: translateX(-200px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.content-blocks.slide-in {
opacity: 1;
transform: translateX(0);
}
.mission-content ul { .mission-content ul {
list-style: disc; list-style: disc;
padding-left: 20px; padding-left: 20px;
@ -361,7 +441,7 @@ const { t: $t } = useI18n();
.card-title { .card-title {
font-size: 1.8rem; font-size: 1.8rem;
margin-bottom: 25px; margin-bottom: 25px;
color: #895bff; color: #333;
position: relative; position: relative;
padding-bottom: 10px; padding-bottom: 10px;
} }
@ -373,7 +453,7 @@ const { t: $t } = useI18n();
left: 0; left: 0;
width: 60px; width: 60px;
height: 3px; height: 3px;
background: linear-gradient(90deg, #895bff, #b388ff); background: linear-gradient(90deg, #121212, #232330);
} }
/* 股票信息卡片样式 */ /* 股票信息卡片样式 */