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

Merge branch 'LiWenHao'

Browse Source 
# Conflicts:
#	src/config/headerMenuConfig.js
#	src/locales/en.js
#	src/router/index.js
This commit is contained in:
liwenhao 2025-05-23 12:10:37 +08:00
commit fe22244f82
31 changed files with 5074 additions and 649 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/file/AUDIT COMMITTEE CHARTER.pdf Normal file
View File

Binary file not shown.

BIN
src/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf Normal file
View File

Binary file not shown.

BIN
src/assets/file/COMPENSATION COMMITTEE CHARTER.pdf Normal file
View File

Binary file not shown.

BIN
src/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf Normal file
View File

Binary file not shown.

BIN
src/assets/image/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

38
src/components/customHeader/size1920/index.vue
View File

@ -22,21 +22,21 @@
</template>
<script setup>
import FiEELogo from '@/assets/image/header/logo.png'
import { ref, onMounted, onUnmounted } from 'vue'
import { NMenu, NLayoutHeader, NImage } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
import FiEELogo from "@/assets/image/header/logo.png";
import { ref, onMounted, onUnmounted } from "vue";
import { NMenu, NLayoutHeader, NImage } from "naive-ui";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
const { t } = useI18n()
const router = useRouter()
const { t } = useI18n();
const router = useRouter();
// 使用统一的菜单配置
const menuOptions = useHeaderMenuConfig()
const selectedKey = ref(null)
const menuOptions = useHeaderMenuConfig();
const selectedKey = ref(null);
const isScrolled = ref(false)
const isScrolled = ref(false);
// 递归查找菜单项
function findMenuOptionByKey(options, key) {
@ -69,20 +69,20 @@ onMounted(() => {
});
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
})
window.removeEventListener("scroll", handleScroll);
});
//点击回到首页
const handleToHome = () => {
router.push('/')
selectedKey.value = null // 重置菜单选中状态
}
router.push("/myhome");
selectedKey.value = null; // 重置菜单选中状态
};
</script>
<style scoped lang="scss">
.custom-header {
--header-height: 80px;
--primary-color: #8B59F7;
--primary-color: #8b59f7;
position: fixed;
top: 0;
left: 0;
@ -143,7 +143,7 @@ const handleToHome = () => {
text-align: center;
&::after {
content: '';
content: "";
position: absolute;
bottom: 0;
left: 50%;
@ -189,7 +189,7 @@ const handleToHome = () => {
overflow: hidden;
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;

108
src/config/headerMenuConfig.js
View File

@ -1,107 +1,111 @@
import { useI18n } from 'vue-i18n'
import { useI18n } from "vue-i18n";
export const useHeaderMenuConfig = () => {
const { t } = useI18n()
const { t } = useI18n();
return [
{
label: t('header_menu.corporate_information.title'),
key: 'corporate_information',
label: t("header_menu.corporate_information.title"),
key: "corporate_information",
children: [
{
label: t('header_menu.corporate_information.company_overview'),
key: 'company_overview',
label: t("header_menu.corporate_information.company_overview"),
key: "company_overview",
href: "/companyoverview",
},
{
label: t('header_menu.corporate_information.business_introduction'),
key: 'business_introduction',
label: t("header_menu.corporate_information.business_introduction"),
key: "business_introduction",
href: "/businessservices",
},
{
label: t('header_menu.corporate_information.management'),
key: 'management',
label: t("header_menu.corporate_information.management"),
key: "management",
href: "/manage",
},
{
label: t('header_menu.corporate_information.board_of_directors'),
key: 'board_of_directors',
label: t("header_menu.corporate_information.board_of_directors"),
key: "board_of_directors",
href: "/boarddirectors",
},
{
label: t('header_menu.corporate_information.committee_appointments'),
key: 'committee_appointments',
label: t("header_menu.corporate_information.committee_appointments"),
key: "committee_appointments",
href: "/committeeappointment",
},
{
label: t('header_menu.corporate_information.governance'),
key: 'governance',
label: t("header_menu.corporate_information.governance"),
key: "governance",
href: "/govern",
},
{
label: t("header_menu.corporate_information.corporate_video"),
key: "corporate_video",
},
// {
// label: t('header_menu.corporate_information.corporate_video'),
// key: 'corporate_video',
// },//现阶段不展示
],
},
{
label: t('header_menu.financial_information.title'),
key: 'financial_information',
label: t("header_menu.financial_information.title"),
key: "financial_information",
children: [
{
label: t('header_menu.financial_information.sec_filings'),
key: 'sec_filings',
label: t("header_menu.financial_information.sec_filings"),
key: "sec_filings",
href: "/secfilings",
},
{
label: t('header_menu.financial_information.quarterly_results'),
key: 'quarterly_results',
label: t("header_menu.financial_information.quarterly_results"),
key: "quarterly_results",
href: "/quarterlyresults",
},
],
},
{
label: t('header_menu.stock_information.title'),
key: 'stock_information',
label: t("header_menu.stock_information.title"),
key: "stock_information",
children: [
{
label: t('header_menu.stock_information.stock_quote'),
key: 'stock_quote',
label: t("header_menu.stock_information.stock_quote"),
key: "stock_quote",
},
{
label: t('header_menu.stock_information.historic_stock_price'),
key: 'historic_stock_price',
href: '/historic-stock',
label: t("header_menu.stock_information.historic_stock_price"),
key: "historic_stock_price",
},
{
label: t('header_menu.stock_information.investment_calculator'),
key: 'investment_calculator',
label: t("header_menu.stock_information.investment_calculator"),
key: "investment_calculator",
},
],
},
{
label: t('header_menu.news_releases.title'),
key: 'news_releases',
label: t("header_menu.news_releases.title"),
key: "news_releases",
children: [
{
label: t('header_menu.news_releases.press_releases'),
key: 'press_releases',
href: '/press-releases',
label: t("header_menu.news_releases.press_releases"),
key: "press_releases",
href: "/press-releases",
},
{
label: t('header_menu.news_releases.events_calendar'),
key: 'events_calendar',
href: '/events-calendar',
label: t("header_menu.news_releases.events_calendar"),
key: "events_calendar",
},
],
},
{
label: t('header_menu.investor_resources.title'),
key: 'investor_resources',
label: t("header_menu.investor_resources.title"),
key: "investor_resources",
children: [
{
label: t('header_menu.investor_resources.ir_contacts'),
key: 'ir_contacts',
label: t("header_menu.investor_resources.ir_contacts"),
key: "ir_contacts",
},
{
label: t('header_menu.investor_resources.email_alerts'),
key: 'email_alerts',
label: t("header_menu.investor_resources.email_alerts"),
key: "email_alerts",
},
],
},
]
}
];
};

14
src/config/testRequest.js Normal file
View File

@ -0,0 +1,14 @@
// src/api/testRequest.js
import axios from "axios";
export const getTestData = async () => {
try {
const response = await axios.get(
"http://saas-test.szjixun.cn/api/chart/forward/test"
);
return response.data;
} catch (error) {
console.error("请求出错:", error);
throw error; // 可选：让调用方处理异常
}
};

713
src/locales/en.js
View File

@ -1,541 +1,206 @@
export default {
common: {
submit: 'Submit',
cancel: 'Cancel',
confirm: 'Confirm'
submit: "Submit",
cancel: "Cancel",
confirm: "Confirm",
},
language: {
zh: 'Simplified Chinese',
zhTW: 'Traditional Chinese',
en: 'English',
ja: 'Japanese',
de: 'German'
},
home: {
nav: {
home: 'Home',
company: 'Company Overview',
businessintroduction: 'Business Introduction',
please_select: 'Please Select',
confirm_select: 'Confirm Selection',
investor: 'Investor Guide'
},
scroll: {
tip: 'Scroll Down'
},
section2: {
title1: 'FiEE with Art Creators',
title2: 'Embarking on Global Impact'
},
section3: {
label: 'Company Profile',
title: 'FiEE',
desc: 'As an innovative pioneer deeply rooted in cutting-edge technology, FiEE continuously researches the application of AI and big data in artistic creation. Through in-depth analysis of artistic concepts and profound insights into creative practices, we precisely grasp the development trends of art. With great passion, we integrate various technologies and resources to provide comprehensive empowerment for art creators, from inspiration to promotion.',
features: {
data: {
title: 'Big Data Anchors Creative Direction',
desc: 'Using self-developed big data models to deeply analyze the global art market, providing forward-looking judgments to help creators clarify direction.'
},
ai: {
title: 'AI Algorithms Break Communication Barriers',
desc: 'Utilizing cutting-edge AI algorithms to build personalized recommendation systems, precisely matching audiences and breaking through art communication limitations.'
},
cloud: {
title: 'Cloud Computing Mines Artistic Value',
desc: 'Leveraging excellent cloud computing capabilities to efficiently process massive data, supporting creators in exploration and expansion.'
},
cooperation: {
title: 'Professional Cooperation Establishes Benchmark Status',
desc: 'Collaborating with professional art institutions and academic platforms to help creators gain recognition and establish professional art benchmarks.'
},
promotion: {
title: 'Diverse Promotion Shapes Global Brands',
desc: 'Utilizing diverse communication and innovative marketing, combined with brand building and promotion, to help creators become global art brands.'
}
}
},
section4: {
label: 'Business Introduction',
title: 'Multi-business Synergy, Driving Artistic Influence to Soar',
title1: 'Multi-business Synergy',
title2: 'Driving Artistic Influence to Soar',
desc: 'FiEE focuses on providing global promotion and professional operation services for art creators. Through precise positioning and multi-platform linkage, we break geographical restrictions to bring works to the international stage. Relying on a strong resource network to connect business opportunities, using AI and big data for precise marketing, efficiently reaching audiences, helping creators achieve breakthroughs in both artistic and commercial value.',
cards1: {
title: 'Global Floral Industry, Suitable for International Art Exchange Center',
desc: 'FiEE upholds the concept of "Art Without Borders", relying on multi-platform linkage to break geographical restrictions, pushing works to the global market, attracting potential consumers, and letting art creators shine on the international stage.'
},
cards2: {
title: 'Professional Operation Team, Precise Audience Targeting',
desc: 'FiEE\'s operation team brings together senior talents from multiple fields, leveraging rich experience and market insights to formulate precise promotion strategies through data analysis, enabling works to accurately reach target audiences and achieve deep resonance.'
},
cards3: {
title: 'Strong Resource Network, Expanding Unlimited Business Opportunities',
desc: 'FiEE establishes deep cooperation with globally renowned art institutions and mainstream media, building a vast resource network, helping art creators connect with high-end resources, and expanding business cooperation opportunities such as artwork licensing and derivative product development.'
},
cards4: {
title: 'Technology-Driven Marketing, Efficiently Reaching Fan Groups',
desc: 'FiEE uses AI algorithms and big data analysis to precisely profile target groups, achieve personalized promotion, quickly reach fan groups, accumulate loyal fan communities, and use intelligent tools to optimize promotion strategies, empowering art creators\' artistic career development.'
}
}
},
vote: {
title: 'Children Art Collection Activity',
voteBtn: 'Vote Now'
},
entry: {
title: 'Registration',
form: {
name: 'Name',
phone: 'Phone Number',
submit: 'Submit Registration'
}
},
companyprofil: {
slogan: {
title1: 'Leading the Full Cycle of Art',
title2: 'Transforming Value to New Heights',
desc: 'FiEE aspires to become the helmsman of the full art creation cycle, deeply participating in every key node from inspiration inception, work refinement completion, to market promotion and cultural dissemination.'
},
intro: {
label: 'Company Introduction',
title1: 'Uniquely Positioned',
title2: 'Full-Cycle Value Empowerment Pioneer',
desc: 'FiEE completely breaks through the limitations of traditional single-service institutions. As an industry transformer, we deeply integrate cutting-edge technology with diverse resources, carefully building a "full-cycle" value empowerment system that spans the entire process of artistic creation from conceptual germination to brilliant blooming. Whether you are a newcomer just entering the art world with dreams, or a mature art worker who has struggled on the artistic path and yearns to break through creative bottlenecks and climb higher artistic peaks, FiEE will be your most solid partner, accompanying you all the way, sheltering you from wind and rain, and pointing the way forward.'
},
team: {
label: 'Team Introduction',
title1: 'Gathering Elite Talents',
title2: 'Igniting Art Innovation Engine',
desc: 'The FiEE team consists of operation experts, technical elites, and international consultants, providing comprehensive support from content planning to global promotion. Through cross-border cooperation and resource integration, FiEE breaks through traditional boundaries and explores new artistic expressions. Relying on cutting-edge technology and precise marketing, we help works achieve both commercial value and social impact breakthroughs, injecting lasting momentum into artistic prosperity.',
features: {
global: {
title: 'Global Reach, Diverse Navigation',
desc: 'Overseas precision marketing, laying multiple channels, shaping international brands. Intelligent management of multilingual platforms, providing localized services.'
},
fans: {
title: 'Deep Fan Cultivation, Building Ecosystem',
desc: 'Fine community operations, providing diverse value-added services. Upgrading community management tools, precisely reaching users. Innovative incentive mechanisms, developing featured derivatives.'
},
talent: {
title: 'Broad Talent Recruitment, Team Advancement',
desc: 'Recruiting technical and marketing elites, injecting innovative vitality. Strengthening internal training, optimizing organizational structure. Introducing advanced concepts, improving management and service efficiency.'
}
}
},
achievement: {
label: 'Outstanding Achievements',
title: 'Pioneering to Art\'s Summit',
title1: 'With a pioneering spirit',
title2: 'Reach the summit of arts and literature',
desc: 'Long-term deep cultivation in the art field, FiEE continues to expand its business map, accumulating deep industry resources and building an extensive cooperation network. Currently, we have deeply partnered with multiple global popular self-media platforms, helping art creators shine on the international stage from multiple dimensions and bloom their unique artistic brilliance.',
certification: {
title1: 'Authoritative Qualification Certification',
title2: 'Building Solid Foundation for Art Career',
desc: 'FiEE provides professional and authoritative qualification certification services, helping art creators obtain widely recognized industry qualifications. This not only significantly enhances the value of art creators\' works but also helps art creators stand out in the fiercely competitive art market, greatly enhancing art workers\' market competitiveness, laying a solid foundation for art creators\' careers.'
},
platform: {
title1: 'Global Platform Matrix',
title2: 'Expanding Art Communication Boundaries',
desc: 'With deep industry resources and extensive cooperation network, FiEE has reached deep strategic partnerships with over 30 global popular self-media platforms. From internationally renowned social platforms to professional media focused on art fields, we carefully create exclusive accounts for art creators and use advanced optimization strategies to make art creators\' accounts stand out among numerous creators.'
}
},
news: {
label: 'Focus on FiEE Frontier Dynamics',
title: 'Insight Trends, Lighting the Beacon for Art\'s Future',
title1: 'Insight into Trends',
title2: 'Lighting the Beacon for Arts and Culture',
desc: 'FiEE remains rooted in the art field, always following global art development trends. Through in-depth case analysis and cross-border discussions, we explore the deep integration of art with technology and business, providing forward-looking insights and inspiration for the future development of art.',
carousel: {
item1: {
title: 'Achieving Technical Breakthrough, Leading Art Creation Technology Innovation',
desc: 'As the digital wave sweeps through the art field with unprecedented momentum, art creation is undergoing profound changes. With the team\'s persistent efforts and innovative spirit, FiEE has achieved milestone breakthroughs in art creation technology. After countless days and nights of hard work, FiEE\'s self-developed new generation intelligent creation assistance system has officially launched, like a rising brilliant star, opening a new development path for art creation and bringing unprecedented changes and opportunities to the entire industry.'
},
item2: {
title: 'Global Strategy Upgrade, FiEE Reaches Strategic Cooperation with 30+ International Platforms, Building New Art Communication Matrix',
desc: 'Against the backdrop of accelerating global cultural integration with unprecedented momentum, the art field has become the frontier of cultural exchange and innovation. As a leader in the art industry, FiEE actively participates in this wave of global cultural exchange with keen strategic vision and decisive action. Recently, FiEE excitingly announced deep strategic cooperation with over 30 international leading self-media platforms including TikTok and Instagram, while officially launching the far-reaching "Art Without Borders Plan", determined to break down cultural barriers between regions.'
},
item3: {
title: 'Empowering Art Creators, FiEE Releases "AI × Short Video" Full-Chain Solution',
desc: 'For art creators, creative bottlenecks and low efficiency are two mountains standing in the way forward. Conceiving an attractive short video script often requires a lot of time and energy, creators not only have to rack their brains to think of unique ideas but also need to consider audience preferences and market trends. The dissemination and promotion after work completion is also a difficult gap to cross.'
},
item4: {
title: 'FiEE Launches 18-Month Art KOL Incubation, Cultivating Tomorrow\'s Stars in Art Field',
desc: 'In the current flourishing development of the art industry, the importance of quality content creators is increasingly prominent. As a pioneer in the industry, FiEE has always focused on talent cultivation and development dynamics in the art field. Today, FiEE officially announces the launch of an 18-month art KOL incubation plan that has been carefully prepared, aiming to cultivate a batch of future stars with strong influence in the art field and promote the innovative development of the entire industry.'
},
item5: {
title: 'Diverse Talents Gathering, FiEE Builds Foundation for Art Innovation Development',
desc: 'In the current golden age of flourishing art industry development, innovation has become the key element leading continuous industry progress and breaking through traditional patterns. Tracing back to the source, talent as the core driving force of innovation is of self-evident importance. FiEE deeply understands this truth and actively recruits talents with an open-minded attitude and far-sighted strategic vision, carefully gathering operation experts, technical elites, and international consultants.'
}
}
}
},
companyprofildetail: {
article1: {
title: 'Achieving Technical Breakthrough, Leading Art Creation Technology Innovation',
date: 'February 7, 2025 12:00',
content: [
'As the digital wave sweeps through the art field with unprecedented momentum, art creation is undergoing profound changes. With persistent efforts and innovative spirit, FiEE has achieved milestone breakthroughs in art creation technology.',
'After countless days and nights of hard work, FiEE\'s self-developed new generation intelligent creation assistance system has officially launched, like a rising brilliant star, opening a new development path for art creation and bringing unprecedented changes and opportunities to the entire industry.',
'During the development process, the technical team encountered numerous challenges. In the data collection phase for massive artistic works, they needed to gather data from different eras, styles, and types of artistic works, covering classical literature, outstanding films, and musical masterpieces from ancient to modern times, both domestic and international. These data sources were diverse and varied in format, making collection extremely challenging. During organization and analysis, they had to ensure data accuracy and completeness while categorizing and integrating different types of data for subsequent deep mining.',
'Optimizing artificial intelligence algorithms was no easy task either. The team needed to continuously adjust algorithm parameters to accurately extract valuable information from massive data. Building big data models was even more complex, considering model stability, scalability, and compatibility with other technologies.',
'Team members reviewed massive domestic and international materials, from cutting-edge academic papers to industry practice cases, not missing any possible source of inspiration. They conducted countless experiments and simulations, facing potential failure in each experiment, but never gave up, continuously optimizing solutions.',
'For example, when dealing with the compatibility of different types of artistic work data, the team innovatively adopted a multi-dimensional data classification algorithm. This algorithm analyzes data from multiple angles such as time dimension, style dimension, and theme dimension, effectively categorizing seemingly chaotic data, ensuring precise data analysis and utilization, laying a solid foundation for subsequent intelligent creation support. The intelligent creation assistance system integrates cutting-edge technologies like artificial intelligence and big data, providing comprehensive, intelligent creation support for creators. Through deep mining and analysis of massive artistic work data, the system can accurately insight into current art creation trends and hotspots.',
'In terms of improving creation efficiency, the system\'s artificial intelligence technology shows powerful capabilities. Traditional creation methods might require months to conceive a framework, but using this system, it only takes a few days to generate an initial framework, creators only need to refine details on this basis, greatly shortening the creation cycle.',
'The company\'s technical R&D team leader could hardly contain his excitement at the press conference: "This technical breakthrough is the crystallization of our team\'s long-term dedicated efforts, and also FiEE\'s bold attempt at art creation technology innovation. We deeply understand that in today\'s rapid technological development, only through continuous innovation can we provide stronger creation tools for art creators, pushing art creation towards high-quality, high-efficiency development."',
'Industry experts commented: "FiEE\'s technical breakthrough has undoubtedly injected new vitality into the art creation field. It not only improves creation efficiency but also brings creators new creative ideas, providing valuable experience and reference for the entire industry\'s digital transformation."',
'This technical breakthrough has significantly enhanced FiEE\'s competitiveness in the art technology field, becoming an industry technology leader. In the future, FiEE will continue to increase investment in technical R&D, broadly recruit talents, continuously explore innovation, committed to providing more and better technical support for the art industry\'s digital transformation, pushing art creation towards new heights.'
]
},
article2: {
title: 'Global Strategy Upgrade, FiEE Reaches Strategic Cooperation with 30+ International Platforms, Building New Art Communication Matrix',
date: 'February 10, 2025 10:30',
content: [
'Against the backdrop of accelerating global cultural integration with unprecedented momentum, the art field has become the frontier of cultural exchange and innovation. As a leader in the art industry, FiEE actively participates in this wave of global cultural exchange with keen strategic vision and decisive action.',
'Recently, FiEE excitingly announced deep strategic cooperation with over 30 international leading self-media platforms including TikTok and Instagram, while officially launching the far-reaching "Art Without Borders Plan", determined to break down cultural barriers between regions, fully helping art creators shine on the vast world stage. This deep collaboration between FiEE and over 30 global top platforms can be called a grand gathering of comprehensive, in-depth resource integration and collaborative innovation.',
'In the social media field, cooperation with TikTok stands out as a highlight. TikTok, with its unique short video ecosystem and powerful algorithm recommendation system, has attracted billions of users globally. Through this platform, FiEE can quickly and precisely push art creators\' excellent works in highly infectious short video format to users interested in art worldwide, easily breaking geographical restrictions, triggering global interaction and attention.',
'Instagram, with its exquisite visual presentation and active social atmosphere, has built an excellent showcase window for various artistic works. Here, creators\' works can receive high-standard display, gaining massive fan attention and likes, greatly increasing work exposure and influence, letting artistic beauty spread widely globally. In terms of vertical communities, cooperation with professional platforms like ArtStation creates a professional, pure exchange and display space for creators in different art fields.',
'To ensure efficient and orderly implementation of the "Art Without Borders Plan", FiEE has formulated a series of detailed and feasible strategies and measures. In the content creation phase, FiEE will invite internationally renowned art experts and creators to conduct combined online and offline professional training and guidance courses, helping creators deeply understand international market aesthetic preferences, cultural needs, and popular trends, thus enhancing works\' international communication power.',
'In terms of promotion and operation, FiEE will integrate various advantageous resources to customize comprehensive, three-dimensional promotion plans for creators. On one hand, actively organizing online creation competitions and other activities to attract global users\' attention, quickly enhancing creators\' fame and influence; on the other hand, fully utilizing social media platforms\' advertising placement, topic marketing, KOL cooperation and other means to precisely push creators\' works, further expanding works\' communication range, letting more people appreciate excellent artistic creations.',
'Predictably, for the broad art creators, this cooperation is undoubtedly a once-in-a-lifetime development opportunity. They will have chances to deeply communicate and cooperate with international top artists and creators, accessing the world\'s most cutting-edge creation concepts and technologies, thus broadening their creative vision and improving creation level. Meanwhile, through diversified platform matrix, their works can gain unprecedented exposure and recognition, maximizing commercial value, opening up broader development space for their artistic careers.',
'Looking forward, FiEE will unswervingly continue to deepen cooperation with international platforms, continuously optimize and improve the "Art Without Borders Plan", continue to provide better, more comprehensive, more efficient services for art creators, helping them shine more brilliantly on the international stage, contributing more wisdom and strength to promoting global cultural exchange, integration and prosperity.'
]
},
article3: {
title: 'Empowering Art Creators, FiEE Releases "AI × Short Video" Full-Chain Solution',
date: 'February 14, 2025 12:30',
content: [
'For art creators, creative bottlenecks and low efficiency are two mountains standing in the way forward. Conceiving an attractive short video script often requires a lot of time and energy, creators not only have to rack their brains to think of unique ideas but also need to consider audience preferences and market trends.',
'The dissemination and promotion after work completion is also a difficult gap to cross. In the era of information explosion, how to make one\'s work stand out among massive content and precisely reach target audiences has become a problem that creators think about day and night.',
'Traditional communication methods are like casting nets to catch fish, severely lacking precision, lots of quality artistic content sinks into the sea during communication, difficult to be discovered by truly interested audiences. Moreover, the lack of user interactivity also makes it difficult for creators to deeply mine user needs, difficult to establish close emotional connections with audiences, works difficult to truly "come alive", seeming isolated and helpless in the wave of communication.',
'In the current rapid development of technology, artificial intelligence and short video industry are changing the pattern of artistic creation and communication at unprecedented speed.',
'As an innovation pioneer in the art field, FiEE closely follows the pace of the times, actively explores deep integration of technology and art, today officially releases the "AI × Short Video" full-chain solution, bringing a revolutionary change to the art industry.',
'This solution integrates multiple cutting-edge AI technologies, having multiple significant advantages. In the content creation phase, AI intelligent script generation tools can quickly generate creative scripts based on key information input by creators such as theme, style, and audience. Through learning from massive excellent short video scripts and artistic works, AI can not only provide novel story frameworks but also precisely match plots and lines fitting the theme, greatly shortening the creation cycle.',
'In terms of content communication and operation, AI big data analysis technology makes short video promotion more precise and effective. Through deep analysis of multi-dimensional data such as users\' browsing history, like and comment behavior, follow lists, the system can precisely insight into users\' interest preferences and needs, pushing art creators\' works to truly interested audience groups. This solution has wide application scenarios, whether professional art creators or amateur enthusiasts with artistic dreams can benefit from it.',
'Professional creators can use AI technology to break through creative bottlenecks, improve creation efficiency, create more innovative and influential works; amateur enthusiasts can lower creation barriers through this solution, easily realize their creative ideas, enjoy the fun of creation. FiEE\'s relevant person in charge stated: "We have been focusing on art creators\' needs and pain points, hoping to provide comprehensive support and help through the \'AI × Short Video\' full-chain solution. This is not only an innovative application of technology but also an important practice in helping art industry development. We believe that with AI technology empowerment, art creators can create more excellent works, letting artistic light illuminate broader horizons."',
'Looking forward, FiEE will continue to invest in R&D efforts, continuously optimize and improve the "AI × Short Video" full-chain solution, explore more AI technology application scenarios in the art field, strengthen cooperation with industry partners, jointly promote innovative development of artistic creation and communication, create better, more efficient creation environment for art creators, help art industry reach new heights.'
]
},
article4: {
title: 'FiEE Launches 18-Month Art KOL Incubation, Cultivating Tomorrow\'s Stars in Art Field',
date: 'February 19, 2025 12:00',
content: [
'In the current flourishing development of the art industry, the importance of quality content creators is increasingly prominent. As a pioneer in the industry, FiEE has always focused on talent cultivation and development dynamics in the art field.',
'Today, FiEE officially announces the launch of an 18-month art KOL incubation plan that has been carefully prepared, aiming to cultivate a batch of future stars with strong influence in the art field and promote the innovative development of the entire industry. With the rise of social media and the revolution of content communication methods, KOLs play a key role in art field communication and promotion. They are not only quality content creators but also bridges connecting artistic works with broad audiences.',
'However, cultivating a mature and widely influential art KOL cannot be achieved overnight, requiring systematic planning, professional guidance, and sufficient practical opportunities. FiEE keenly insights into this market demand, investing massive resources, carefully planning this 18-month incubation plan. This incubation plan has clear goals, aiming to discover and cultivate a batch of potential creators in the art field, helping them grow into art KOLs with high domestic and international fame and influence.',
'Through this plan, it can not only provide broad development space for these creators but also inject fresh blood into the art market, promoting diversified communication of artistic works. In terms of implementation content, the plan covers multiple dimensions, comprehensively helping creators grow. In the professional training phase, the company has invited renowned experts and scholars from different art fields to provide systematic and in-depth course training for creators.',
'These courses are rich in content, including improvement of artistic creation skills such as color use in painting and melody arrangement in music creation, also covering new media operation knowledge such as social media marketing strategies and fan interaction skills, as well as business management courses, helping creators understand art market operation rules and realize works\' commercial value transformation. Meanwhile, to ensure each creator receives personalized guidance, the company has also equipped them with one-on-one mentors who will provide targeted advice and help based on creators\' characteristics and needs.',
'Resource connection is also an important part of the incubation plan. FiEE leverages years of accumulated deep industry resources and broad partnership relationships to build bridges connecting creators with brands, media, platforms, etc. Creators have opportunities to cooperate with famous brands, creating promotional content with artistic value; cooperate with media, participating in art special reports and program production; cooperate with major art platforms, publishing their works, expanding works\' communication range.',
'FiEE\'s art KOL incubation project leader stated at the launch ceremony: "We firmly believe that every creator participating in the incubation plan has unlimited potential. These 18 months will be their key growth period. FiEE will fully provide support and help, letting them go further on the path of artistic creation, becoming pillars of the art field."',
'Looking forward, the implementation of this 18-month art KOL incubation plan is expected to cultivate a batch of KOLs with unique styles and broad influence for the art field.',
'They will attract more attention to art through their works and influence, promote artistic works\' communication and innovation, contributing important strength to art industry\'s prosperous development. FiEE will also continue to focus on creators\' growth, continuously optimize the incubation plan, exploring more effective modes for art field talent cultivation.'
]
},
article5: {
title: 'Diverse Talents Gathering, FiEE Builds Foundation for Art Innovation Development',
date: 'February 20, 2025 12:00',
content: [
'In the current golden age of flourishing art industry development with hundred flowers blooming, innovation has apparently become the key element leading industry\'s continuous progress and breaking through traditional patterns. Tracing back to the source, talent as the core driving force of innovation is of self-evident importance.',
'FiEE deeply understands this truth and actively recruits talents with an open-minded attitude and far-sighted strategic vision, carefully gathering operation experts, technical elites, and international consultants, successfully building an excellent team with solid professional quality and diverse knowledge structure, laying an unshakeable development foundation for the company\'s innovation journey in the art field.',
'The operation expert team can be called the lighthouse guiding FiEE\'s steady progress in the art field. They have deeply cultivated in the vast territory of art industry for many years, with rich practical experience and deep market understanding, developing keen ability to capture market dynamics, and extremely precise grasp of audience preferences.',
'They use big data analysis and field market research to deeply study cultural backgrounds and interest preferences of audiences from different age groups and regions, precisely positioning target audiences, providing highly targeted creation directions for art creators. They deeply analyze current social hotspots and audience spiritual needs, cleverly integrating era elements, making works both deep and attractive. Through unique creative planning, successfully attracting audience attention from project start phase, laying solid foundation for subsequent success.',
'As the integration trend of technology and art becomes increasingly prominent, technical elites have become FiEE\'s strong engine for innovative development.',
'The company actively recruits professional talents mastering cutting-edge technologies like artificial intelligence, big data, virtual reality, injecting technological vitality into artistic creation. In the content creation process, these technical elites fully utilize advantages of AI-assisted creation tools, providing continuous inspiration for art creators. Using virtual reality (VR) and augmented reality (AR) technologies to let works deeply interact with audiences, greatly expanding artistic works\' expression forms and communication range.',
'Under the wave of globalization era, the international consultant team brings FiEE broad global vision and diverse cultural perspectives. They come from around the world, having deep understanding of different countries and regions\' art market rules, aesthetic preferences, and cultural differences. The international consultant team plays a key role in FiEE\'s process of pushing local excellent artistic works to the world. This not only brings new creative ideas and inspiration for local art creators but also enhances FiEE\'s influence in international art field.',
'It is precisely because of the gathering of diverse talents like operation experts, technical elites, and international consultants that FiEE can break through traditional art boundaries and explore new artistic expressions through cross-border cooperation and resource integration. FiEE develops broad cooperation with technology companies, fashion brands, educational institutions, etc., deeply integrating art with technology, fashion, education and other fields, creating a series of novel artistic products and services. Relying on cutting-edge technology and precise marketing, FiEE helps numerous artistic works achieve both commercial value and social influence breakthroughs, injecting lasting momentum into art\'s prosperous development.',
'Looking forward, FiEE will continue to uphold open and inclusive talent concept, continuously improve talent strategy, attract more excellent talents to join. We firmly believe that under the joint efforts of diverse talents, FiEE will continue to advance on the path of art innovation development, making greater contributions to promoting global art career\'s prosperity.'
]
}
},
businessintroduction: {
hero: {
title1: 'AI × Short Video',
title2: 'Leading the New Vision of Cultural Creation',
desc: 'Deeply integrating cutting-edge AI technology with the unique advantages of short video platforms, pioneering an exploratory journey, standing at the forefront to lead the cultural creation field into an unprecedented new horizon'
},
industry: {
label: 'Industry Status',
title: 'Cultural Creation Meets Obstacles, Short Video Unlocks New Growth Code',
desc: 'As the cultural creation field faces challenges of content homogenization and creative exhaustion, short videos, with their unique immersive experience and powerful social fission properties, break through constraints, injecting new vitality like spring rain, becoming a powerful engine driving growth.',
challenges: {
title: 'Art Market Dilemma',
items: [
{
title: 'Artistic Value Obscured',
desc: 'Lack of brand building and market operations causes artistic value to remain hidden, making it difficult for the public to understand and recognize.'
},
{
title: 'Promotion Path Bottleneck',
desc: 'Personal social platforms and traditional exhibition forms are outdated, unable to achieve broad and quality exposure, severely constraining dissemination.'
},
{
title: 'Single Channel Limitation',
desc: 'Over-reliance on offline galleries and individual exhibitions leads to narrow promotion scope, resulting in unstable and singular income structure.'
},
{
title: 'Traditional Marketing Constraints',
desc: 'Traditional advertising channels are expensive, beyond art creators\' financial capacity, greatly limiting promotion scope.'
}
]
},
opportunity: {
title: 'Short Video Self-Media: Surging New Force, Harboring Boundless Business Opportunities',
desc: 'Currently, the short video market is experiencing explosive growth with rapidly expanding advertising scale. As a vital force in internet content, short video\'s user base and usage duration are soaring, opening vast possibilities for advertising and monetization, with user engagement time ratio continuously rising, user stickiness increasing daily, harboring unlimited potential and opportunities.'
}
},
solution: {
label: 'Industry Status',
title: 'Cultural Creation Meets Obstacles, Short Video Unlocks New Growth Code',
features: {
precision: {
title: 'Precise Distribution Ignites Fan Growth Engine',
desc: 'Utilizing big data analysis and AI algorithms to deeply analyze user browsing habits, search preferences, and behavioral data, building precise user profiles to accurately push art creators\' works to potential audiences, transforming undirected demand into loyal fans, laying the foundation for creators\' influence spread.'
},
monetization: {
title: 'Diverse Monetization Activates Commercial Value Chain',
desc: 'Building a fan economy operation system to tap into artistic creation\'s commercial value. Through convenient tipping mechanisms, fans can instantly express appreciation for creators; providing physical and digital artwork sales channels to meet fans\' collection needs; launching subscription services offering exclusive content and priority event participation rights to enhance fan stickiness. These channels promote fans\' transformation into consumers, achieving income growth for both creators and platform.'
},
interaction: {
title: 'Interactive Sharing Builds Art Ecosystem Loop',
desc: 'Leveraging intelligent social recommendation technology to promote deep fan interaction and communication, sharing insights and creative inspiration, exploring mutual potential needs, achieving natural fan group fission. Meanwhile, using data analysis to insight into consumer group characteristics and needs, precisely expanding consumption circles, discovering new business opportunities. This interactive sharing mechanism builds a sustainable art creation ecosystem, continuously enhancing creators\' influence while achieving steady development and revenue growth for the company, reaching win-win outcomes.'
}
}
},
vision: {
label: 'Market Vision',
title: 'Crafting New Blueprint for Art Market',
desc: 'In the ever-changing art wave, FiEE uses innovation as pen and precise insight as ink, redefining the future of art industry with innovative thinking and global vision. Deeply tapping artistic potential, integrating diverse cultural elements, breaking traditional barriers, building online traffic communities, reshaping art ecosystem, stimulating market vitality, leading new directions of artistic value, opening a new era for the art market.',
community: {
title: 'Building Billion-User Traffic Community, Establishing Global Art Exchange Platform',
desc: 'Using cutting-edge big data and AI technology to create billion-level traffic community, gathering global art enthusiasts. Leveraging intelligent algorithms to achieve precise content push and interest matching, promoting exchange and interaction, building efficient communication bridges between art creators and fans, constructing cornerstone for art ecosystem traffic.'
}
},
cooperation: {
title: 'Global Cooperation Expansion, Drawing Multi-Integration Map',
timeline: {
year2025: {
title: '2025',
desc: 'Achieving deep cooperation with 1500+ art institutions and tech enterprises, integrating resources, jointly exploring art-tech fusion projects, promoting innovation in artistic creation and communication models.'
},
year2026: {
title: '2026',
desc: 'Global partners exceeding 5000+, establishing extensive cooperation network, expanding business coverage areas, implementing projects in major global art markets, enhancing brand international recognition.'
},
year2027: {
title: '2027',
desc: 'Strategic partners surpassing 10000+, forming solid global strategic alliance, fully connecting art industry chain, achieving resource sharing and mutual benefits.'
}
}
},
incubation: {
title: '18-Month Zero-Base Art KOL Incubation',
subtitle: 'Unleashing Artistic Business Potential',
desc: '18 months marks a journey of deep artistic potential exploration and business transformation. From painting techniques to aesthetic construction, from content creation to traffic operation, providing comprehensive empowerment. FiEE customizes growth paths for zero-base individuals, helping you bridge art and business, becoming trend-leading art KOLs, embarking on an artistic journey of unlimited possibilities.',
features: {
fans: {
title: 'Fan Growth',
desc: 'By 2027, through precise marketing strategies, helping each artist exceed 100,000 fans, reaching 1 billion community members, strengthening art creators\' fan base, enhancing work influence.'
},
kol: {
title: 'KOL Incubation',
desc: 'Relying on billion-user traffic community, using precise data analysis, transforming ordinary art creators or commercial brands into internationally renowned KOLs within 18 months, achieving efficient conversion between artistic and commercial value.'
}
}
},
exposure: {
title: 'Market Vision',
desc: 'With cutting-edge communication strategies, precisely targeting global audience mindshare. Deeply integrating top media resources, achieving exponential breakthrough in exposure, comprehensively shaping global brand influence, leading art trends to the center of world stage.',
timeline: {
year2025: {
title: '2025',
desc: 'Self-media platform exposure breaking through 500 million+, enhancing brand and creator exposure through multi-platform linkage and creative content marketing.'
},
year2026: {
title: '2026',
desc: 'Exposure reaching 1 billion+, deepening brand communication, attracting more potential users and partners.'
},
year2027: {
title: '2027',
desc: 'Achieving 5 billion+ cross-dimensional breakthrough, breaking industry and cultural boundaries, comprehensively enhancing brand international influence, promoting deep integration of culture, art and technology, shaping new industry development trends.'
}
}
}
},
investor: {
title: 'Investor Relations',
subtitle: 'Minim (NASDAQ: MINM) Financial Status',
latest_news: {
title: 'Latest News',
financial: {
title: 'Latest Financials',
date: 'March 29, 2023',
content: '2022 Q4 and Full Year 2022 Earnings Results',
link: 'Earnings Release'
},
events: {
title: 'Recent Events',
date: 'March 13, 2024',
content: 'Minim Announces Merger Agreement with e2Companies',
link: 'Merger Agreement - Final Press Release December 3, 2024'
},
stock: {
title: 'Stock Quote',
content: 'MINM Quote on TradingView',
link: 'MINM Quote'
}
},
financial_data: {
title: 'Financial Data',
years: {
year2023: '2023',
year2022: '2022',
year2021: '2021'
},
reports: {
profit_report: 'Profit Report',
earnings_report: 'Earnings Report',
earnings_call: 'Earnings Call',
sec_filings: '10-Q/10-K',
annual_report: 'Annual Report',
annual_meeting: 'Annual Meeting',
special_meeting: 'Special Shareholder Meeting',
proxy_statement: 'Proxy Statement'
},
investor_guide: 'Investor Guide'
},
market_trends: {
title: 'Market Trends',
sec_description1: 'SEC filings are documents submitted to the U.S. Securities and Exchange Commission (SEC). Public companies and certain insiders are required to file regularly with the SEC. These documents are available through the SEC\'s online database.',
sec_description2: 'By selecting below, you will leave the Minim website. Minim makes no representations regarding any other websites you may access through this site. When you access a non-Minim website, even one that may contain the Minim logo, please understand that it is independent of Minim, and Minim has no control over the content of that website. Additionally, a link to a non-Minim website does not mean that Minim endorses or accepts any responsibility for the content or use of such website.',
view_all_sec: 'View All SEC Filings'
},
board_of_directors: {
title: 'Board of Directors',
directors: {
patrick: {
name: 'Patrick Rivard',
position: 'Board Director, Partner & CFO at U.S. Wealth Protection',
position1: 'Board Director',
position2: 'Partner & CFO at U.S. Wealth Protection'
},
andrew: {
name: 'Andrew Papanikolaou',
position: 'Board Director, Finance Manager at Raytheon',
position1: 'Board Director',
position2: 'Finance Manager at Raytheon'
}
}
},
governance: {
title: 'Governance, Diversity, and Committee Charters',
documents: {
ethics_code: 'Code of Ethics for Senior Financial Officers',
conflict_minerals: 'Conflict Minerals Statement',
business_conduct: 'Code of Ethics and Business Conduct',
audit_committee: 'Audit Committee Charter',
whistleblower: 'Whistleblower Policy',
compensation_committee: 'Compensation Committee Charter',
related_party: 'Related Party Transactions Policy',
nomination_committee: 'Nominating&Governance Committee Charter',
diversity_matrix_2022: '2022 Diversity Matrix',
diversity_matrix_2023: '2023 Diversity Matrix'
}
}
},
investorhandbook: {
title: 'Minimum Communication Guidelines with the Investor Community',
authorized_speakers: {
title: 'Authorized Speakers',
desc: 'The following Minim representatives are authorized to communicate with the investment community, including analysts, stockbrokers, and individual and institutional shareholders:',
items: [
'President',
'President and Chief Marketing Officer',
'Chief Financial Officer'
],
note: 'In this guide, these representatives are referred to as "Authorized IR Contacts".'
},
quarterly_communications: {
title: 'Quarter-End Communications and Meetings',
items: [
'1. Quiet Period — The company observes a "Quiet Period" starting from the quarter-end date until the earnings release. During this period, company management will not conduct 1:1 meetings with analysts or investors. However, upon request, factual public information may be provided to investors and analyzed by authorized Investor Relations contacts.',
'2. Analyst Meetings/Conference Calls — All analyst meetings or calls discussing quarterly or annual financial and business information should be broadcast simultaneously to all interested members of the public via the internet or conference call. Appropriate advance notice and simultaneous broadcast of the meeting should be provided via press release or other communication methods compliant with Regulation FD.',
'3. Earnings Press Release — The earnings press release will be issued on the wire service at the beginning or prior to the meeting or conference call, as determined by the Investor Relations department and the Chief Financial Officer, in accordance with applicable SEC and NASDAQ rules. It will also be filed with the SEC on Form 8-K and posted on the company website.',
'4. Annual guidance on initial subscription revenue and EPS range may be provided in the earnings press release, and if necessary, updates to the guidance may be provided in each quarter\'s earnings press release. Generally, the company will not update this guidance or provide additional guidance during the quarter unless deemed necessary by the VP of Finance/CFO, and only in a public forum compliant with Regulation FD.'
],
note: 'Minim representatives (other than authorized speakers) who receive inquiries from the media, market professionals, or shareholders should not respond to such inquiries but should refer the inquirer to an authorized speaker. However, Minim representatives assigned to the Investor Relations and Marketing teams may respond to routine inquiries about public information in accordance with guidelines established by authorized speakers from time to time.'
}
},
financialinformation: {
secfilings: {
title: 'Financials',
overview: {
title: 'Company Financial Overview',
desc: 'This page offers access to our <strong>Annual Reports</strong> and <strong>SEC Filings</strong>. These sections provide key financial data and regulatory documents, keeping you informed about our financial performance and compliance.'
},
annual_reports: {
title: 'Annual Reports',
file_name: 'File Name',
view: 'View'
},
sec: {
title: 'SEC Filings',
desc: 'To Access All Of Our Fillings With Sec Sites, Please',
click_here: 'Click Here'
}
},
quarterlyresults: {
title: 'Quarterly Results',
search: {
placeholder: 'Search',
button: 'Go'
},
download: 'Download'
}
zh: "Simplified Chinese",
zhTW: "Traditional Chinese",
en: "English",
ja: "Japanese",
de: "German",
},
header_menu: {
corporate_information: {
title: 'Corporate Information',
company_overview: 'Company Overview',
business_introduction: 'Business Introduction',
management: 'Management',
board_of_directors: 'Board of Directors',
committee_appointments: 'Committee Appointments',
governance: 'Governance',
corporate_video: 'Corporate Video'
title: "Corporate Information",
company_overview: "Company Overview",
business_introduction: "Business Introduction",
management: "Management",
board_of_directors: "Board of Directors",
committee_appointments: "Committee Appointments",
governance: "Governance",
corporate_video: "Corporate Video",
},
financial_information: {
title: 'Financial Information',
sec_filings: 'SEC Filings',
quarterly_results: 'Quarterly Results',
title: "Financial Information",
sec_filings: "SEC Filings",
quarterly_results: "Quarterly Results",
},
stock_information: {
title: 'Stock Information',
stock_quote: 'Stock Quote',
historic_stock_price: 'Historic Stock Price',
investment_calculator: 'Investment Calculator'
title: "Stock Information",
stock_quote: "Stock Quote",
historic_stock_price: "Historic Stock Price",
investment_calculator: "Investment Calculator",
},
news_releases: {
title: 'News Releases',
press_releases: 'Press Releases',
events_calendar: 'Events Calendar'
title: "News Releases",
press_releases: "Press Releases",
events_calendar: "Events Calendar",
},
investor_resources: {
title: 'Investor Resources',
ir_contacts: 'IR Contacts',
email_alerts: 'Email Alerts'
}
title: "Investor Resources",
ir_contacts: "IR Contacts",
email_alerts: "Email Alerts",
},
},
press_releases: {
title: 'Press Releases',
search: {
placeholder: 'Search',
button: 'Go'
}
HOME: {
CONTAIN: {
TITLEONE: {
TITLE: "Company positioning",
CONTENT:
"To empower global talents through innovative technology solutions",
CONTENTTWO:
"Leveraging IoT, connectivity, and artificial intelligence to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
},
},
CONTAINY: {
STOCK_INFO: {
TITLE: "Stock Information",
LAST_PRICE: "Last Price",
CHANGE: "Change",
STOCK_CODE: "Stock Code",
VOLUME: "Volume",
MARKET_CAP: "Market Cap",
},
UPCOMING_EVENTS: {
TITLE: "Upcoming Events",
EVENT_NAME: "International New Energy & Emerging Industries Tech Expo",
DATE: "Date",
VENUE: "Venue",
AREA: "Area",
BOOTHS: "Booths",
LEARN_MORE: "Learn More",
},
NEWS: {
TITLE: "Latest News",
LATEST_TITLE: "Company Announces Breakthrough in AI Technology",
LATEST_CONTENT:
"Our research team has achieved significant progress in natural language processing, which will enhance our global content delivery platform...",
READ_MORE: "Read more",
},
},
},
events_calendar: {
title: 'Events Calendar',
search: {
button: 'Go'
}
}
}
// 公司概括
COMPANYOVERVIEW: {
TITLETWO: {
TITLE: "About FiEE, Inc.",
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.',
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.',
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.",
},
TITLETHREE: {
TITLE: "Our mission and vision",
CONTENT:
"•To empower global talents through innovative technology solutions",
CONTENTTWO:
"•Leveraging IoT, connectivity, and artificial intelligence to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
},
TITLEFOUR: {
CONTENT: "",
TITLE: "Corporate Milestone",
SUBHEADING: "•1977 – 2015 : Founding & Licensing",
paragraph: {
ONE: "I.Founded as Zoom Telephonics in 1977. ",
TWO: "Secured a five-year Motorola home-network license effective 1 Jan, 2016. ",
},
SUBHEADINGTWO: "•2020 : Merger & AI Advancement",
paragraphTwo: {
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.",
THREE: "",
},
SUBHEADINGTHREE: "•2021: NASDAQ Listing",
paragraphTHREE: {
ONE: "I.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.",
THREE: "",
},
SUBHEADINGFOREFF: "•2023 – 2024: Pivoting to A Software First Model",
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.",
TWO: "II.Signed a merger agreement with e2Companies to broaden its technology and revenue base",
THREE: "",
},
SUBHEADINGFIVE: "•2025 Rebranding & New C-Suite",
paragraphFIVE: {
ONE: "Officially rebranded from Minim Inc. to FiEE Inc.",
TWO: "II.Appointed Li Wai Chung as CEO and Cao Yu as CFO.",
THREE:
"III.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",
FIVE: "Acquisition of Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC",
},
},
TITLEFIVE: {
CONTENT:
"•We developed our own AI-driven cloud software platform and applications, providing efficient and high quality network management and security solutions for home and business users, as well as the service providers that assisted them.",
TITLE: "Outstanding Achievements",
},
},
// 业务介绍
BusinessiIntroduction: {
CONTAIN: {
TITLEONE: {
TITLE: "Business Introduction",
CONTENT:
"We provide digital content management solutions and brand growth strategies primarily through digital account management, content operations and growth analytics, and community engagement and creator partnerships. These services are structured to support clients at varying stages of digital development, from initial account setup to multi-platform brand promotion.",
CONTENTTWO:
"FiEE, Inc.’s core solutions encompass the following four major categories.",
paragraph: {
ONE: {
TITLE: "(1)Cloud-Managed Connectivity (WiFi) Platform: ",
CONTENT: "•SaaS powering OS for consumers and SMBs ",
CONTENTTWO:
"•AI-driven threat protection, and over-the-air updates",
},
TWO: {
TITLE: "(2)IoT Hardware Sales & Licensing: ",
CONTENT:
"•IoT products and technologies, including developing VR/AR online sharing technologies",
CONTENTTWO: "•IoT data collection, analysis and management",
},
THREE: {
TITLE: "(3)SAAS Solutions",
CONTENT: "•Internet sales and IoT support",
CONTENTTWO: "•KOL branding services",
CONTENTTHREE:
"•AI-enabled content creation and fans habit analysis solutions",
},
FOUR: {
TITLE: "(4)Professional To-C and To-B Services & Support",
CONTENT:
"•Managed-service agreements with ISPs and enterprise customers for network-support, security monitoring, and custom development",
CONTENTTWO: "•KOL branding services",
CONTENTTHREE:
"•AI-enabled content creation and fans habit analysis solutions",
},
},
},
},
},
// 管理
MANAGEMENT: {
ONE: {
TITLE: "Wai Chung LI",
TITLETWO: "Chief Executive Officer and President",
CONTENT:
"Mr. Li is the Chief Executive Officer and President, with extensive experience in accounting, corporate management and finance management. His role encompasses the oversight of our daily business operations and plays a vital part in the overall management of our Group.With a track record spanning prestigious roles at Deloitte China, Shanghai Prime Machinery Company Limited, Lens Technology Co., Ltd., and more, Mr. Li brings invaluable expertise to lead the team. He chaired Audit Committees for Fulu Holdings and Taizhou Water Group in Hong Kong, and Nedschroef in the Netherlands, showcasing his global leadership. Holding key positions in investment management, business consulting, and directorial roles in listedcompanies, his insights drive strategic decision-making. ",
CONTENTTWO: "•KOL branding services",
CONTENTTHREE:
"•AI-enabled content creation and fans habit analysis solutions",
},
TWO: {
TITLE: "Cao Yu",
TITLETWO: "Chief Financial Officer, Secretary, Treasurer and Director",
CONTENTONE:
"Ms. Cao is the Chief Financial Officer, Secretary, Treasurer and Director, with a wealth of experience in financial management. She oversees financial operations, strategic planning, risk management, and reporting to ensure the company's financial health and compliance with regulations.",
CONTENTTWO:
"Ms. Cao was previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters from November 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 to October 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida Plastic Profile Products Co., Ltd.",
},
},
};

143
src/router/index.js
View File

@ -1,12 +1,12 @@
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { setupRouterGuards } from './router-guards'
import { createRouter, createWebHistory } from "vue-router";
import { setupRouterGuards } from "./router-guards";
const routes = [
{
path: '/',
name: 'index',
component: () => import('@/views/index/index.vue'),
path: "/",
name: "index",
component: () => import("@/views/index/index.vue"),
// beforeEnter: (to, from, next) => {
// localStorage.clear()
@ -14,70 +14,105 @@ const routes = [
// }
children: [
{
path: '/contacts',
name: 'contacts',
component: () => import('@/views/contacts/index.vue'),
path: "/contacts",
name: "contacts",
component: () => import("@/views/contacts/index.vue"),
},
{
path: '/calculator',
name: 'calculator',
component: () => import('@/views/calculator/index.vue'),
path: "/calculator",
name: "calculator",
component: () => import("@/views/calculator/index.vue"),
},
{
path: '/home',
name: 'home',
component: () => import('@/views/home/index.vue'),
path: "/home",
name: "home",
component: () => import("@/views/home/index.vue"),
// beforeEnter: (to, from, next) => {
// localStorage.clear()
// next()
// }
},
{
path: '/stock-quote',
name: 'stock-quote',
component: () => import('@/views/stock-quote/index.vue'),
},
{
path: '/historic-stock',
name: 'historic-stock',
component: () => import('@/views/historic-stock/index.vue'),
},
{
path: '/contacts',
name: 'contacts',
component: () => import('@/views/contacts/index.vue'),
},
{
path: '/email-alerts',
name: 'email-alerts',
component: () => import('@/views/email-alerts/index.vue'),
},
{
path: '/quarterlyresults',
name: 'QuarterlyResults',
path: "/stock-quote",
name: "stock-quote",
component: () => import("@/views/stock-quote/index.vue"),
},
{
path: "/historic-stock",
name: "historic-stock",
component: () => import("@/views/historic-stock/index.vue"),
},
{
path: "/contacts",
name: "contacts",
component: () => import("@/views/contacts/index.vue"),
},
{
path: "/email-alerts",
name: "email-alerts",
component: () => import("@/views/email-alerts/index.vue"),
},
{
path: "/quarterlyresults",
name: "QuarterlyResults",
component: () =>
import('@/views/financialinformation/quarterlyresults/index.vue'),
import("@/views/financialinformation/quarterlyresults/index.vue"),
},
{
path: '/secfilings',
name: 'SecFilings',
path: "/secfilings",
name: "SecFilings",
component: () =>
import('@/views/financialinformation/secfilings/index.vue'),
import("@/views/financialinformation/secfilings/index.vue"),
},
{
path: '/press-releases',
name: 'press-releases',
component: () => import('@/views/press-releases/index.vue'),
path: "/press-releases",
name: "press-releases",
component: () => import("@/views/press-releases/index.vue"),
},
{
path: '/events-calendar',
name: 'events-calendar',
component: () => import('@/views/events-calendar/index.vue'),
path: "/events-calendar",
name: "events-calendar",
component: () => import("@/views/events-calendar/index.vue"),
},
{
path: "/companyoverview",
name: "companyoverview",
component: () => import("@/views/companyoverview/index.vue"),
},
{
path: "myhome",
name: "myHome",
component: () => import("@/views/myHome/index.vue"),
},
{
path: "/businessservices",
name: "BusinessServices",
component: () => import("@/views/BusinessServices/index.vue"),
},
{
path: "/manage",
name: "manage",
component: () => import("@/views/manage/index.vue"),
},
{
path: "/boarddirectors",
name: "boarddirectors",
component: () => import("@/views/boarddirectors/index.vue"),
},
{
path: "/committeeappointment",
name: "CommitteeAppointment",
component: () => import("@/views/CommitteeAppointment/index.vue"),
},
{
path: "/govern",
name: "govern",
component: () => import("@/views/govern/index.vue"),
},
],
},
// {
// path: '/companyprofil',
// name: 'Companyprofil',
@ -103,17 +138,17 @@ const routes = [
// name: 'Investorhandbook',
// component: () => import('@/views/investorhandbook/index.vue'),
// },
]
];
const router = createRouter({
history: createWebHistory(),
routes,
})
});
router.beforeEach((to, from, next) => {
if (to.meta?.title) {
document.title = to.meta.title
document.title = to.meta.title;
}
next()
})
setupRouterGuards(router)
export default router
next();
});
setupRouterGuards(router);
export default router;

22
src/views/BusinessServices/index.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup>
import size1920 from "@/views/BusinessServices/size1920/index.vue";
import size375 from "@/views/BusinessServices/size375/index.vue";
import { computed } from "vue";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();
const viewComponent = computed(() => {
const viewWidth = width.value;
if (viewWidth <= 450) {
return size375;
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920;
}
});
</script>
<template>
<component :is="viewComponent" />
</template>
<style scoped lang="scss"></style>

408
src/views/BusinessServices/size1920/index.vue Normal file
View File

@ -0,0 +1,408 @@
<template>
<div class="home-page">
<div class="business-page">
<!-- 渐变背景标题区 - 增加层次感 -->
<section class="hero-section">
<div class="hero-content container">
<div class="title-wrapper">
<h1 class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</h1>
<div class="title-decoration"></div>
</div>
<div class="hero-description">
<p>{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}</p>
<p>{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
</div>
</div>
</section>
<!-- 业务核心解决方案 - 重新设计布局 -->
<main class="container">
<!-- 解决方案网格 - 新布局 -->
<div class="solution-grid">
<!-- 主推解决方案 -->
<div class="featured-solution">
<div class="solution-card" :style="{ '--delay': '0s' }">
<!-- <div class="card-badge">旗舰方案</div> -->
<div class="card-header">
<div class="decorative-line"></div>
<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 class="secondary-solutions">
<div
v-for="(item, index) in solutions.slice(1)"
:key="index + 1"
class="solution-card"
:style="{ '--delay': (index + 1) * 0.1 + 's' }"
>
<div class="card-header">
<div class="decorative-line"></div>
<h2 class="card-title">{{ item.title }}</h2>
</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>
</main>
</div>
</div>
</template>
<script setup>
import { useI18n } from "vue-i18n";
import { computed } from "vue";
const { t } = useI18n();
const solutions = computed(() => [
{
title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.TITLE"),
points: [
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENT"),
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENTTWO"),
],
},
{
title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.TITLE"),
points: [
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENT"),
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENTTWO"),
],
},
{
title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.TITLE"),
points: [
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENT"),
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTWO"),
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTHREE"),
],
},
{
title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.TITLE"),
points: [
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENT"),
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTWO"),
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTHREE"),
],
},
]);
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
/* 基础样式 */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
/* 标题区样式 */
.hero-section {
background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
padding: 8rem 0 6rem;
position: relative;
overflow: hidden;
}
.hero-section::after {
content: "";
position: absolute;
bottom: -50px;
left: 0;
width: 100%;
height: 100px;
background: white;
transform: skewY(-3deg);
}
.hero-title {
font-size: 3.5rem;
color: #2c3e50;
margin-bottom: 2rem;
animation: slideIn 1s ease;
}
.hero-description {
max-width: 800px;
margin: 0 auto;
font-size: 1.1rem;
line-height: 1.8;
color: #5a6d80;
}
:root {
--primary-color: #895bff;
--primary-light: #a07cff;
--primary-dark: #6a11cb;
--primary-gradient: linear-gradient(
135deg,
var(--primary-light) 0%,
var(--primary-color) 100%
);
}
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
/* 标题区 - 紫色渐变 */
.hero-section {
background: var(--primary-gradient);
padding: 10rem 0 8rem;
position: relative;
overflow: hidden;
color: white;
}
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
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%;
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 2rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.title-decoration {
position: absolute;
bottom: -15px;
left: 0;
width: 80%;
height: 4px;
background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
}
.hero-description {
max-width: 800px;
font-size: 1.1rem;
line-height: 1.8;
opacity: 0.9;
}
/* 解决方案网格 */
.solution-grid {
display: flex;
flex-direction: column;
gap: 2.5rem;
padding: 5rem 0;
position: relative;
z-index: 1;
}
.solution-grid::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 100%;
background: url("@/assets/image/abstract-pattern.png") no-repeat
center/contain;
opacity: 0.03;
z-index: -1;
}
/* 卡片设计 */
.solution-card {
background: white;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
transform: translateY(20px);
opacity: 0;
animation: cardEnter 0.6s ease forwards;
animation-delay: var(--delay);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
position: relative;
overflow: hidden;
border: none;
}
.solution-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(137, 91, 255, 0.03) 0%,
rgba(137, 91, 255, 0) 100%
);
z-index: -1;
}
.solution-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
}
.featured-solution .solution-card {
border: 1px solid rgba(137, 91, 255, 0.2);
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
}
.card-badge {
position: absolute;
top: 20px;
right: 20px;
background: var(--primary-gradient);
color: white;
padding: 0.3rem 1.2rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
box-shadow: 0 4px 12px rgba(137, 91, 255, 0.3);
}
.decorative-line {
width: 50px;
height: 3px;
background: var(--primary-gradient);
margin-bottom: 1.5rem;
border-radius: 3px;
transition: width 0.3s ease;
}
.solution-card:hover .decorative-line {
width: 80px;
}
.card-title {
font-size: 1.6rem;
color: #2c0850;
margin-bottom: 1.5rem;
font-weight: 600;
}
.content-point {
display: flex;
gap: 1.2rem;
padding: 1.2rem 0;
border-bottom: 1px solid rgba(137, 91, 255, 0.1);
}
.point-icon {
color: var(--primary-color);
font-size: 1.4rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
.point-text {
color: #4a3a6b;
line-height: 1.7;
font-size: 1.05rem;
}
.card-button {
background: var(--primary-gradient);
color: white;
border: none;
padding: 0.8rem 1.8rem;
border-radius: 8px;
font-weight: 500;
margin-top: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(137, 91, 255, 0.3);
}
.card-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(137, 91, 255, 0.4);
}
/* 布局调整 */
.secondary-solutions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.secondary-solutions {
grid-template-columns: repeat(2, 1fr);
}
.featured-solution {
margin-bottom: 2rem;
}
}
@media (max-width: 768px) {
.hero-section {
padding: 7rem 0 5rem;
}
.hero-title {
font-size: 2.5rem;
}
.secondary-solutions {
grid-template-columns: 1fr;
}
.solution-card {
padding: 2rem;
}
}
/* 动画 */
@keyframes cardEnter {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>

225
src/views/BusinessServices/size375/index.vue Normal file
View File

@ -0,0 +1,225 @@
<template>
<div class="home-page">
<!-- 顶部背景图 Banner -->
<div class="hero-banner">
<div class="banner-content">
<h1 class="main-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h1>
<p class="sub-title">
NASDAQ: MINM | {{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}
</p>
<!-- <p class="sub-title" style="">
{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}
</p> -->
</div>
</div>
<section
class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h2>
<div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</p>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
</div>
</section>
<!-- 公司概况 -->
<section
class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h2>
<div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
</div>
</section>
<!-- 使命与愿景 -->
<section
class="mission-vision"
style="
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
"
>
<h2 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h2>
<div class="mission-content">
<ul>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT").replace("•", "") }}
</li>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO").replace("•", "") }}
</li>
</ul>
</div>
</section>
<!-- 企业里程碑 -->
<section
class="milestones"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}</h2>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") }}</li>
</ul>
</div>
</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>
</div>
</template>
<script setup>
import { useI18n } from "vue-i18n";
const { t: $t } = useI18n();
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.hero-banner {
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.banner-content {
text-align: center;
color: white;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
.main-title {
font-size: 3.5rem;
margin-bottom: 20px;
}
.sub-title {
font-size: 1.5rem;
}
.section-card {
padding: 40px;
border-radius: 12px;
}
.card-content {
font-size: 1.1rem;
line-height: 1.8;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 30px;
color: #895bff;
}
.content-block {
font-size: 1.1rem;
line-height: 1.8;
}
.mission-content ul {
list-style: disc;
padding-left: 20px;
font-size: 1.1rem;
}
.milestones {
font-size: 1.1rem;
}
.milestone-item {
margin-bottom: 40px;
padding: 20px;
border-left: 3px solid #ddf6e0;
background: #f8fafc;
}
.milestone-item h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #895bff;
}
.milestone-item ul {
list-style: none;
padding-left: 0;
}
.milestone-item li {
margin-bottom: 10px;
}
.achievements {
padding: 40px;
border-radius: 12px;
}
</style>

22
src/views/CommitteeAppointment/index.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup>
import size1920 from "@/views/CommitteeAppointment/size1920/index.vue";
import size375 from "@/views/CommitteeAppointment/size375/index.vue";
import { computed } from "vue";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();
const viewComponent = computed(() => {
const viewWidth = width.value;
if (viewWidth <= 450) {
return size375;
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920;
}
});
</script>
<template>
<component :is="viewComponent" />
</template>
<style scoped lang="scss"></style>

360
src/views/CommitteeAppointment/size1920/index.vue Normal file
View File

@ -0,0 +1,360 @@
<template>
<div class="committees-page">
<!-- 标题区 -->
<section class="hero-section">
<div class="container">
<h1>Board Committees</h1>
<p>Expertise Oversight and Corporate Governance</p>
</div>
</section>
<!-- 委员会表格 -->
<div class="container">
<div class="committees-table">
<!-- 表头 - 委员会名称 -->
<div class="table-header">
<div class="director-cell"></div>
<div class="committee-cell">
<h3>Audit Committee</h3>
</div>
<div class="committee-cell">
<h3>Compensation Committee</h3>
</div>
<div class="committee-cell">
<h3>Nominating and Corporate Governance Committee</h3>
</div>
</div>
<!-- 表格内容 - 每位董事 -->
<div
class="table-row"
v-for="(director, index) in otherDirectors"
:key="index"
>
<!-- 董事姓名 -->
<div class="director-cell">
<div class="director-info">
<div class="avatar"></div>
<div>
<router-link :to="'/boarddirectors'" class="director-link">
{{ director.name }}
</router-link>
<!-- <p class="director-title">{{ director.title }}</p> -->
</div>
</div>
</div>
<!-- 委员会职位 -->
<div class="committee-cell">
<div class="role-badges">
<template v-if="getCommitteeRole(director.name, 'Audit')">
<div
class="role-badge"
:class="
getCommitteeRole(director.name, 'Audit').toLowerCase()
"
>
{{ getCommitteeRole(director.name, "Audit") }}
<span class="badge-icon"></span>
</div>
</template>
</div>
</div>
<div class="committee-cell">
<div class="role-badges">
<template v-if="getCommitteeRole(director.name, 'Compensation')">
<div
class="role-badge"
:class="
getCommitteeRole(
director.name,
'Compensation'
).toLowerCase()
"
>
{{ getCommitteeRole(director.name, "Compensation") }}
<span class="badge-icon"></span>
</div>
</template>
</div>
</div>
<div class="committee-cell">
<div class="role-badges">
<template v-if="getCommitteeRole(director.name, 'Governance')">
<div
class="role-badge"
:class="
getCommitteeRole(director.name, 'Governance').toLowerCase()
"
>
{{ getCommitteeRole(director.name, "Governance") }}
<span class="badge-icon"></span>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const otherDirectors = [
{
name: "Cao Yu",
title: "Chief Financial Officer, Secretary, Treasurer and Director",
},
{ name: "David Lazar", title: "Director" },
{ name: "Hu Bin", title: "Director" },
{ name: "David Natan", title: "Director" },
{ name: "Chan Oi Fat", title: "Director" },
];
// 模拟数据 - 实际应从API获取
const committeeRoles = {
"Cao Yu": {
Audit: "Chair",
Compensation: "Member",
},
"David Lazar": {
Audit: "Member",
Governance: "Chair",
},
"Hu Bin": {
Compensation: "Chair",
Governance: "Member",
},
"David Natan": {
Audit: "Member",
},
"Chan Oi Fat": {
Governance: "Member",
},
};
const getCommitteeRole = (name, committee) => {
return committeeRoles[name]?.[committee] || null;
};
</script>
<style scoped>
/* 紫色主题变量 */
:root {
--primary: #895bff;
--primary-light: #a07cff;
--primary-dark: #6a11cb;
--primary-transparent: rgba(137, 91, 255, 0.1);
}
.committees-page {
background-color: #faf9ff;
min-height: 100vh;
}
/* 标题区设计 */
.hero-section {
background: linear-gradient(
135deg,
var(--primary-light) 0%,
var(--primary) 100%
);
padding: 6rem 2rem;
text-align: center;
color: #895bff;
}
.hero-section h1 {
font-size: 2.8rem;
margin-bottom: 1rem;
}
.hero-section p {
font-size: 1.2rem;
opacity: 0.9;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* 表格设计 */
.committees-table {
margin: 4rem 0;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(137, 91, 255, 0.08);
}
.table-header,
.table-row {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
border-bottom: 1px solid #f0f0f0;
}
.table-header {
background: #f9f6ff;
position: sticky;
top: 0;
z-index: 2;
}
.committee-cell {
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-right: 1px solid #f0f0f0;
}
.committee-cell:last-child {
border-right: none;
}
.committee-cell h3 {
color: var(--primary-dark);
font-size: 1.1rem;
font-weight: 600;
}
.director-cell {
padding: 1.5rem;
border-right: 1px solid #f0f0f0;
}
.director-info {
display: flex;
align-items: center;
gap: 1.2rem;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--primary-transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-weight: bold;
flex-shrink: 0;
}
.director-info h4 {
font-size: 1.1rem;
color: #333;
margin-bottom: 0.3rem;
}
.director-title {
font-size: 0.85rem;
color: #666;
}
/* 职位徽章设计 */
.role-badges {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.role-badge {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 80px;
}
.role-badge.chair {
background: rgba(74, 222, 128, 0.15);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.role-badge.member {
background: rgba(96, 165, 250, 0.15);
color: #3b82f6;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-icon {
width: 16px;
height: 16px;
margin-left: 0.5rem;
background: currentColor;
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>')
no-repeat center;
}
/* 悬停效果 */
.table-row {
transition: all 0.3s ease;
}
.table-row:hover {
background: #fdfcff;
transform: translateY(-1px);
box-shadow: 0 5px 15px rgba(137, 91, 255, 0.05);
}
/* 响应式设计 */
@media (max-width: 1024px) {
.committees-table {
overflow-x: auto;
}
.table-header,
.table-row {
grid-template-columns: 250px repeat(3, 200px);
width: max-content;
min-width: 100%;
}
}
@media (max-width: 768px) {
.hero-section {
padding: 4rem 1rem;
}
.hero-section h1 {
font-size: 2.2rem;
}
.director-info {
flex-direction: column;
text-align: center;
gap: 0.8rem;
}
.director-cell {
padding: 1rem;
}
.committee-cell {
padding: 1rem 0.5rem;
}
}
.director-link {
color: #895bff;
text-decoration: none;
transition: color 0.3s ease;
}
.director-link:hover {
color: var(--primary);
text-decoration: underline;
}
</style>

379
src/views/CommitteeAppointment/size375/index.vue Normal file
View File

@ -0,0 +1,379 @@
<template>
<div class="home-page">
<div class="board-page">
<!-- 紫色渐变标题区 -->
<section class="hero-board">
<div class="hero-content">
<h1 class="hero-title">Board of Directors</h1>
<div class="hero-subtitle">Leadership Driving Innovation</div>
</div>
<div class="hero-wave"></div>
</section>
<!-- 董事会成员展示 -->
<main class="board-container">
<div class="directors-grid">
<!-- CEO卡片 - 特殊强调 -->
<div class="director-card ceo-card">
<div class="card-inner">
<div class="card-front">
<div class="avatar-placeholder"></div>
<h2 class="director-name">Li Wai Chung</h2>
<div class="director-title">
Chief Executive Officer and President
</div>
<div class="card-flip-hint">▲ View Profile</div>
</div>
<div class="card-back">
<div class="profile-content">
<h3>Executive Profile</h3>
<div class="divider"></div>
<p>
Extensive experience in leadership roles with a proven track
record of driving growth and operational excellence
</p>
<div class="accent-line"></div>
</div>
</div>
</div>
<div class="card-glow"></div>
</div>
<!-- 其他董事成员 -->
<div
class="director-card"
v-for="(director, index) in otherDirectors"
:key="index"
>
<div class="card-inner">
<div class="card-front">
<div
class="avatar-placeholder"
:style="{ '--delay': index * 0.1 + 's' }"
></div>
<h2 class="director-name">{{ director.name }}</h2>
<div class="director-title">{{ director.title }}</div>
</div>
<div class="card-back">
<div class="profile-content">
<h3>Director Profile</h3>
<div class="divider"></div>
<p>
Extensive experience in corporate governance and strategic
leadership
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</template>
<script setup>
const otherDirectors = [
{
name: "Cao Yu",
title: "Chief Financial Officer, Secretary, Treasurer and Director",
},
{ name: "David Lazar", title: "Director" },
{ name: "Hu Bin", title: "Director" },
{ name: "David Natan", title: "Director" },
{ name: "Chan Oi Fat", title: "Director" },
];
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
/* 紫色主题变量 */
:root {
--primary: #895bff;
--primary-light: #a07cff;
--primary-dark: #6a11cb;
--primary-gradient: linear-gradient(
135deg,
var(--primary-light) 0%,
var(--primary) 100%
);
--primary-transparent: rgba(137, 91, 255, 0.1);
}
/* 标题区设计 */
.hero-board {
background: var(--primary-gradient);
padding: 8rem 2rem 6rem;
position: relative;
text-align: center;
color: #895bff;
overflow: hidden;
}
.hero-board::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><circle fill="rgba(255,255,255,0.05)" cx="20" cy="20" r="15"/><circle fill="rgba(255,255,255,0.05)" cx="80" cy="40" r="20"/><circle fill="rgba(255,255,255,0.05)" cx="50" cy="80" r="10"/></svg>');
opacity: 0.3;
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 1rem;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
animation: fadeInDown 1s ease;
}
.hero-subtitle {
font-size: 1.2rem;
letter-spacing: 0.1em;
opacity: 0.9;
animation: fadeIn 1.5s ease;
}
.hero-wave {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 100px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23faf9ff" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23faf9ff" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%23faf9ff"/></svg>');
background-size: cover;
}
/* 董事会成员网格 */
.board-container {
max-width: 1200px;
margin: 0 auto;
padding: 4rem 2rem;
}
.directors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
position: relative;
}
/* 董事卡片设计 */
.director-card {
perspective: 1000px;
height: 380px;
position: relative;
}
.director-card .card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(137, 91, 255, 0.1);
}
.director-card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 16px;
overflow: hidden;
}
.card-front {
background: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
}
.card-back {
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
transform: rotateY(180deg);
padding: 2rem;
display: flex;
align-items: center;
}
/* CEO特殊卡片 */
.ceo-card .card-front {
border: 2px solid var(--primary);
}
.ceo-card .card-back {
background: linear-gradient(135deg, #f3eeff 0%, #e8ddff 100%);
}
.ceo-card::after {
content: "CEO";
position: absolute;
top: 20px;
right: 20px;
background: var(--primary-gradient);
color: white;
padding: 0.3rem 1rem;
border-radius: 20px;
font-weight: 600;
z-index: 3;
}
.card-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 16px;
box-shadow: 0 0 30px rgba(137, 91, 255, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
}
.ceo-card:hover .card-glow {
opacity: 1;
}
/* 卡片内容样式 */
.avatar-placeholder {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--primary-transparent);
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
animation: fadeIn 0.5s ease var(--delay, 0s) forwards;
opacity: 0;
}
.avatar-placeholder::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23895bff"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>')
no-repeat center/contain;
opacity: 0.3;
}
.director-name {
font-size: 1.5rem;
color: #2c0850;
margin-bottom: 0.5rem;
font-weight: 600;
}
.director-title {
color: var(--primary);
font-size: 0.95rem;
line-height: 1.6;
max-width: 80%;
}
.card-flip-hint {
position: absolute;
bottom: 20px;
color: var(--primary);
font-size: 0.8rem;
opacity: 0.7;
animation: pulse 2s infinite;
}
.profile-content {
width: 100%;
}
.profile-content h3 {
color: var(--primary-dark);
margin-bottom: 1rem;
}
.divider {
width: 40px;
height: 2px;
background: var(--primary-gradient);
margin: 1rem 0;
}
.accent-line {
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--primary-transparent),
transparent
);
margin: 1.5rem 0;
}
/* 动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.directors-grid {
grid-template-columns: 1fr;
}
.director-card {
height: 350px;
}
}
</style>

22
src/views/boarddirectors/index.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup>
import size1920 from "@/views/boarddirectors/size1920/index.vue";
import size375 from "@/views/boarddirectors/size375/index.vue";
import { computed } from "vue";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();
const viewComponent = computed(() => {
const viewWidth = width.value;
if (viewWidth <= 450) {
return size375;
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920;
}
});
</script>
<template>
<component :is="viewComponent" />
</template>
<style scoped lang="scss"></style>

379
src/views/boarddirectors/size1920/index.vue Normal file
View File

@ -0,0 +1,379 @@
<template>
<div class="home-page">
<div class="board-page">
<!-- 紫色渐变标题区 -->
<section class="hero-board">
<div class="hero-content">
<h1 class="hero-title">Board of Directors</h1>
<div class="hero-subtitle">Leadership Driving Innovation</div>
</div>
<div class="hero-wave"></div>
</section>
<!-- 董事会成员展示 -->
<main class="board-container">
<div class="directors-grid">
<!-- CEO卡片 - 特殊强调 -->
<div class="director-card ceo-card">
<div class="card-inner">
<div class="card-front">
<div class="avatar-placeholder"></div>
<h2 class="director-name">Li Wai Chung</h2>
<div class="director-title">
Chief Executive Officer and President
</div>
<div class="card-flip-hint">▲ View Profile</div>
</div>
<div class="card-back">
<div class="profile-content">
<h3>Executive Profile</h3>
<div class="divider"></div>
<p>
Extensive experience in leadership roles with a proven track
record of driving growth and operational excellence
</p>
<div class="accent-line"></div>
</div>
</div>
</div>
<div class="card-glow"></div>
</div>
<!-- 其他董事成员 -->
<div
class="director-card"
v-for="(director, index) in otherDirectors"
:key="index"
>
<div class="card-inner">
<div class="card-front">
<div
class="avatar-placeholder"
:style="{ '--delay': index * 0.1 + 's' }"
></div>
<h2 class="director-name">{{ director.name }}</h2>
<div class="director-title">{{ director.title }}</div>
</div>
<div class="card-back">
<div class="profile-content">
<h3>Director Profile</h3>
<div class="divider"></div>
<p>
Extensive experience in corporate governance and strategic
leadership
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</template>
<script setup>
const otherDirectors = [
{
name: "Cao Yu",
title: "Chief Financial Officer, Secretary, Treasurer and Director",
},
{ name: "David Lazar", title: "Director" },
{ name: "Hu Bin", title: "Director" },
{ name: "David Natan", title: "Director" },
{ name: "Chan Oi Fat", title: "Director" },
];
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
/* 紫色主题变量 */
:root {
--primary: #895bff;
--primary-light: #a07cff;
--primary-dark: #6a11cb;
--primary-gradient: linear-gradient(
135deg,
var(--primary-light) 0%,
var(--primary) 100%
);
--primary-transparent: rgba(137, 91, 255, 0.1);
}
/* 标题区设计 */
.hero-board {
background: var(--primary-gradient);
padding: 8rem 2rem 6rem;
position: relative;
text-align: center;
color: #895bff;
overflow: hidden;
}
.hero-board::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><circle fill="rgba(255,255,255,0.05)" cx="20" cy="20" r="15"/><circle fill="rgba(255,255,255,0.05)" cx="80" cy="40" r="20"/><circle fill="rgba(255,255,255,0.05)" cx="50" cy="80" r="10"/></svg>');
opacity: 0.3;
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 1rem;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
animation: fadeInDown 1s ease;
}
.hero-subtitle {
font-size: 1.2rem;
letter-spacing: 0.1em;
opacity: 0.9;
animation: fadeIn 1.5s ease;
}
.hero-wave {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 100px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23faf9ff" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23faf9ff" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%23faf9ff"/></svg>');
background-size: cover;
}
/* 董事会成员网格 */
.board-container {
max-width: 1200px;
margin: 0 auto;
padding: 4rem 2rem;
}
.directors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
position: relative;
}
/* 董事卡片设计 */
.director-card {
perspective: 1000px;
height: 380px;
position: relative;
}
.director-card .card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(137, 91, 255, 0.1);
}
.director-card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 16px;
overflow: hidden;
}
.card-front {
background: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
}
.card-back {
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
transform: rotateY(180deg);
padding: 2rem;
display: flex;
align-items: center;
}
/* CEO特殊卡片 */
.ceo-card .card-front {
border: 2px solid var(--primary);
}
.ceo-card .card-back {
background: linear-gradient(135deg, #f3eeff 0%, #e8ddff 100%);
}
.ceo-card::after {
content: "CEO";
position: absolute;
top: 20px;
right: 20px;
background: var(--primary-gradient);
color: white;
padding: 0.3rem 1rem;
border-radius: 20px;
font-weight: 600;
z-index: 3;
}
.card-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 16px;
box-shadow: 0 0 30px rgba(137, 91, 255, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
}
.ceo-card:hover .card-glow {
opacity: 1;
}
/* 卡片内容样式 */
.avatar-placeholder {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--primary-transparent);
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
animation: fadeIn 0.5s ease var(--delay, 0s) forwards;
opacity: 0;
}
.avatar-placeholder::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23895bff"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>')
no-repeat center/contain;
opacity: 0.3;
}
.director-name {
font-size: 1.5rem;
color: #2c0850;
margin-bottom: 0.5rem;
font-weight: 600;
}
.director-title {
color: var(--primary);
font-size: 0.95rem;
line-height: 1.6;
max-width: 80%;
}
.card-flip-hint {
position: absolute;
bottom: 20px;
color: var(--primary);
font-size: 0.8rem;
opacity: 0.7;
animation: pulse 2s infinite;
}
.profile-content {
width: 100%;
}
.profile-content h3 {
color: var(--primary-dark);
margin-bottom: 1rem;
}
.divider {
width: 40px;
height: 2px;
background: var(--primary-gradient);
margin: 1rem 0;
}
.accent-line {
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--primary-transparent),
transparent
);
margin: 1.5rem 0;
}
/* 动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.directors-grid {
grid-template-columns: 1fr;
}
.director-card {
height: 350px;
}
}
</style>

379
src/views/boarddirectors/size375/index.vue Normal file
View File

@ -0,0 +1,379 @@
<template>
<div class="home-page">
<div class="board-page">
<!-- 紫色渐变标题区 -->
<section class="hero-board">
<div class="hero-content">
<h1 class="hero-title">Board of Directors</h1>
<div class="hero-subtitle">Leadership Driving Innovation</div>
</div>
<div class="hero-wave"></div>
</section>
<!-- 董事会成员展示 -->
<main class="board-container">
<div class="directors-grid">
<!-- CEO卡片 - 特殊强调 -->
<div class="director-card ceo-card">
<div class="card-inner">
<div class="card-front">
<div class="avatar-placeholder"></div>
<h2 class="director-name">Li Wai Chung</h2>
<div class="director-title">
Chief Executive Officer and President
</div>
<div class="card-flip-hint">▲ View Profile</div>
</div>
<div class="card-back">
<div class="profile-content">
<h3>Executive Profile</h3>
<div class="divider"></div>
<p>
Extensive experience in leadership roles with a proven track
record of driving growth and operational excellence
</p>
<div class="accent-line"></div>
</div>
</div>
</div>
<div class="card-glow"></div>
</div>
<!-- 其他董事成员 -->
<div
class="director-card"
v-for="(director, index) in otherDirectors"
:key="index"
>
<div class="card-inner">
<div class="card-front">
<div
class="avatar-placeholder"
:style="{ '--delay': index * 0.1 + 's' }"
></div>
<h2 class="director-name">{{ director.name }}</h2>
<div class="director-title">{{ director.title }}</div>
</div>
<div class="card-back">
<div class="profile-content">
<h3>Director Profile</h3>
<div class="divider"></div>
<p>
Extensive experience in corporate governance and strategic
leadership
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</template>
<script setup>
const otherDirectors = [
{
name: "Cao Yu",
title: "Chief Financial Officer, Secretary, Treasurer and Director",
},
{ name: "David Lazar", title: "Director" },
{ name: "Hu Bin", title: "Director" },
{ name: "David Natan", title: "Director" },
{ name: "Chan Oi Fat", title: "Director" },
];
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
/* 紫色主题变量 */
:root {
--primary: #895bff;
--primary-light: #a07cff;
--primary-dark: #6a11cb;
--primary-gradient: linear-gradient(
135deg,
var(--primary-light) 0%,
var(--primary) 100%
);
--primary-transparent: rgba(137, 91, 255, 0.1);
}
/* 标题区设计 */
.hero-board {
background: var(--primary-gradient);
padding: 8rem 2rem 6rem;
position: relative;
text-align: center;
color: #895bff;
overflow: hidden;
}
.hero-board::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><circle fill="rgba(255,255,255,0.05)" cx="20" cy="20" r="15"/><circle fill="rgba(255,255,255,0.05)" cx="80" cy="40" r="20"/><circle fill="rgba(255,255,255,0.05)" cx="50" cy="80" r="10"/></svg>');
opacity: 0.3;
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 1rem;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
animation: fadeInDown 1s ease;
}
.hero-subtitle {
font-size: 1.2rem;
letter-spacing: 0.1em;
opacity: 0.9;
animation: fadeIn 1.5s ease;
}
.hero-wave {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 100px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23faf9ff" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23faf9ff" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%23faf9ff"/></svg>');
background-size: cover;
}
/* 董事会成员网格 */
.board-container {
max-width: 1200px;
margin: 0 auto;
padding: 4rem 2rem;
}
.directors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
position: relative;
}
/* 董事卡片设计 */
.director-card {
perspective: 1000px;
height: 380px;
position: relative;
}
.director-card .card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(137, 91, 255, 0.1);
}
.director-card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 16px;
overflow: hidden;
}
.card-front {
background: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
}
.card-back {
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
transform: rotateY(180deg);
padding: 2rem;
display: flex;
align-items: center;
}
/* CEO特殊卡片 */
.ceo-card .card-front {
border: 2px solid var(--primary);
}
.ceo-card .card-back {
background: linear-gradient(135deg, #f3eeff 0%, #e8ddff 100%);
}
.ceo-card::after {
content: "CEO";
position: absolute;
top: 20px;
right: 20px;
background: var(--primary-gradient);
color: white;
padding: 0.3rem 1rem;
border-radius: 20px;
font-weight: 600;
z-index: 3;
}
.card-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 16px;
box-shadow: 0 0 30px rgba(137, 91, 255, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
}
.ceo-card:hover .card-glow {
opacity: 1;
}
/* 卡片内容样式 */
.avatar-placeholder {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--primary-transparent);
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
animation: fadeIn 0.5s ease var(--delay, 0s) forwards;
opacity: 0;
}
.avatar-placeholder::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23895bff"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>')
no-repeat center/contain;
opacity: 0.3;
}
.director-name {
font-size: 1.5rem;
color: #2c0850;
margin-bottom: 0.5rem;
font-weight: 600;
}
.director-title {
color: var(--primary);
font-size: 0.95rem;
line-height: 1.6;
max-width: 80%;
}
.card-flip-hint {
position: absolute;
bottom: 20px;
color: var(--primary);
font-size: 0.8rem;
opacity: 0.7;
animation: pulse 2s infinite;
}
.profile-content {
width: 100%;
}
.profile-content h3 {
color: var(--primary-dark);
margin-bottom: 1rem;
}
.divider {
width: 40px;
height: 2px;
background: var(--primary-gradient);
margin: 1rem 0;
}
.accent-line {
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--primary-transparent),
transparent
);
margin: 1.5rem 0;
}
/* 动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.directors-grid {
grid-template-columns: 1fr;
}
.director-card {
height: 350px;
}
}
</style>

22
src/views/companyoverview/index.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup>
import size1920 from "@/views/companyoverview/size1920/index.vue";
import size375 from "@/views/companyoverview/size375/index.vue";
import { computed } from "vue";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();
const viewComponent = computed(() => {
const viewWidth = width.value;
if (viewWidth <= 450) {
return size375;
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920;
}
});
</script>
<template>
<component :is="viewComponent" />
</template>
<style scoped lang="scss"></style>

426
src/views/companyoverview/size1920/index.vue Normal file
View File

@ -0,0 +1,426 @@
<template>
<div class="home-page">
<div class="company-overview">
<!-- 顶部大图区域 -->
<div class="hero-section">
<transition name="fade-up" appear>
<n-h1 class="hero-title">{{
$t("COMPANYOVERVIEW.TITLETWO.TITLE")
}}</n-h1>
</transition>
<transition name="fade-up" appear>
<n-p class="hero-subtitle">
{{ $t("COMPANYOVERVIEW.HERO_SUBTITLE") }}
</n-p>
</transition>
</div>
<!-- 公司简介部分 -->
<section class="section intro-section">
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.INTRO_TITLE")
}}</n-h2>
<n-p class="section-content">{{
$t("COMPANYOVERVIEW.TITLETWO.CONTENT")
}}</n-p>
<n-p class="section-content">{{
$t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO")
}}</n-p>
<n-p class="section-content">{{
$t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE")
}}</n-p>
</section>
<!-- 使命愿景卡片 -->
<section class="mission-section">
<div class="mission-cards">
<n-card hoverable class="mission-card" v-motion-pop>
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.MISSION_TITLE")
}}</n-h3>
<n-p class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
}}</n-p>
</n-card>
<n-card hoverable class="mission-card" v-motion-pop>
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.VISION_TITLE")
}}</n-h3>
<n-p class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
}}</n-p>
</n-card>
</div>
</section>
<!-- 里程碑时间轴 -->
<!-- 里程碑时间轴 -->
<section class="section timeline-section">
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
}}</n-h2>
<div class="timeline">
<!-- 1977-2015 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
<div class="timeline-dot"></div>
<div class="timeline-content">
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
}}</n-h3>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
}}</n-p>
</div>
</div>
<!-- 2020 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
<div class="timeline-dot"></div>
<div class="timeline-content">
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
}}</n-h3>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
}}</n-p>
</div>
</div>
<!-- 2021 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
<div class="timeline-dot"></div>
<div class="timeline-content">
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
}}</n-h3>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
}}</n-p>
</div>
</div>
<!-- 2023-2024 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
<div class="timeline-dot"></div>
<div class="timeline-content">
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
}}</n-h3>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
}}</n-p>
</div>
</div>
<!-- 2025 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
<div class="timeline-dot"></div>
<div class="timeline-content">
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
}}</n-h3>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
}}</n-p>
</div>
</div>
</div>
</section>
<!-- 成就部分 -->
<section class="achievement-section" v-motion-fade>
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
}}</n-h2>
<n-p class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>
<div class="achievement-stats">
<n-statistic
v-for="(stat, index) in stats"
:key="index"
class="stat-item"
v-motion-slide-visible-once-bottom
:style="{ '--delay': index * 0.1 + 's' }"
>
<template #label>{{ $t(stat.labelKey) }}</template>
{{ stat.number }}
</n-statistic>
</div>
</section>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
const { t: $t } = useI18n();
const stats = ref([
{ number: "48+", labelKey: "COMPANYOVERVIEW.STATS.YEARS_IN_BUSINESS" },
{ number: "100+", labelKey: "COMPANYOVERVIEW.STATS.PATENTS" },
{ number: "Global", labelKey: "COMPANYOVERVIEW.STATS.FOOTPRINT" },
{ number: "NASDAQ", labelKey: "COMPANYOVERVIEW.STATS.LISTED_SINCE" },
]);
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
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;
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 20px;
font-weight: 700;
}
.hero-subtitle {
font-size: 1.5rem;
opacity: 0.9;
}
/* 通用部分样式 */
.section {
margin-bottom: 80px;
}
.section-title {
font-size: 2.2rem;
margin-bottom: 30px;
position: relative;
display: inline-block;
}
.section-title:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(to right, #1a2a6c, #fdbb2d);
border-radius: 2px;
}
.section-content {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 20px;
color: var(--text-color-secondary);
}
/* 使命愿景卡片 */
.mission-section {
margin: 80px 0;
}
.mission-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.mission-card {
background: white;
padding: 40px 30px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mission-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.card-title {
font-size: 1.5rem;
margin-bottom: 20px;
color: #895bff;
}
.card-content {
font-size: 1.05rem;
line-height: 1.7;
}
/* 时间轴样式 */
.timeline {
position: relative;
padding-left: 50px;
margin-top: 50px;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 20px;
height: 100%;
width: 4px;
background: linear-gradient(to bottom, #895bff, #fdbb2d);
}
.timeline-item {
position: relative;
margin-bottom: 50px;
}
.timeline-dot {
position: absolute;
left: -50px;
top: 5px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #895bff;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
box-shadow: 0 0 0 6px rgba(26, 42, 108, 0.2);
}
.timeline-year {
font-size: 1.4rem;
margin-bottom: 15px;
color: #1a2a6c;
}
.timeline-desc {
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 10px;
}
/* 成就部分 */
.achievement-section {
background: #f9fafc;
padding: 60px;
border-radius: 12px;
margin: 80px 0;
}
.achievement-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 50px;
}
.stat-item {
text-align: center;
padding: 30px 20px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-number {
font-size: 2.5rem;
color: #1a2a6c;
margin-bottom: 10px;
}
.stat-label {
font-size: 1.1rem;
color: var(--text-color-secondary);
}
/* 动画 */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.section-title {
font-size: 1.8rem;
}
.timeline {
padding-left: 30px;
}
.timeline-dot {
left: -30px;
width: 30px;
height: 30px;
}
.achievement-section {
padding: 40px 20px;
}
}
</style>

426
src/views/companyoverview/size375/index.vue Normal file
View File

@ -0,0 +1,426 @@
<template>
<div class="home-page">
<div class="company-overview">
<!-- 顶部大图区域 -->
<div class="hero-section">
<transition name="fade-up" appear>
<n-h1 class="hero-title">{{
$t("COMPANYOVERVIEW.TITLETWO.TITLE")
}}</n-h1>
</transition>
<transition name="fade-up" appear>
<n-p class="hero-subtitle">
{{ $t("COMPANYOVERVIEW.HERO_SUBTITLE") }}
</n-p>
</transition>
</div>
<!-- 公司简介部分 -->
<section class="section intro-section">
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.INTRO_TITLE")
}}</n-h2>
<n-p class="section-content">{{
$t("COMPANYOVERVIEW.TITLETWO.CONTENT")
}}</n-p>
<n-p class="section-content">{{
$t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO")
}}</n-p>
<n-p class="section-content">{{
$t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE")
}}</n-p>
</section>
<!-- 使命愿景卡片 -->
<section class="mission-section">
<div class="mission-cards">
<n-card hoverable class="mission-card" v-motion-pop>
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.MISSION_TITLE")
}}</n-h3>
<n-p class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
}}</n-p>
</n-card>
<n-card hoverable class="mission-card" v-motion-pop>
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.VISION_TITLE")
}}</n-h3>
<n-p class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
}}</n-p>
</n-card>
</div>
</section>
<!-- 里程碑时间轴 -->
<!-- 里程碑时间轴 -->
<section class="section timeline-section">
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
}}</n-h2>
<div class="timeline">
<!-- 1977-2015 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
<div class="timeline-dot"></div>
<div class="timeline-content">
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
}}</n-h3>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
}}</n-p>
</div>
</div>
<!-- 2020 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
<div class="timeline-dot"></div>
<div class="timeline-content">
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
}}</n-h3>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
}}</n-p>
</div>
</div>
<!-- 2021 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
<div class="timeline-dot"></div>
<div class="timeline-content">
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
}}</n-h3>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
}}</n-p>
</div>
</div>
<!-- 2023-2024 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
<div class="timeline-dot"></div>
<div class="timeline-content">
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
}}</n-h3>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
}}</n-p>
</div>
</div>
<!-- 2025 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
<div class="timeline-dot"></div>
<div class="timeline-content">
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
}}</n-h3>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
}}</n-p>
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
}}</n-p>
</div>
</div>
</div>
</section>
<!-- 成就部分 -->
<section class="achievement-section" v-motion-fade>
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
}}</n-h2>
<n-p class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>
<div class="achievement-stats">
<n-statistic
v-for="(stat, index) in stats"
:key="index"
class="stat-item"
v-motion-slide-visible-once-bottom
:style="{ '--delay': index * 0.1 + 's' }"
>
<template #label>{{ $t(stat.labelKey) }}</template>
{{ stat.number }}
</n-statistic>
</div>
</section>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
const { t: $t } = useI18n();
const stats = ref([
{ number: "48+", labelKey: "COMPANYOVERVIEW.STATS.YEARS_IN_BUSINESS" },
{ number: "100+", labelKey: "COMPANYOVERVIEW.STATS.PATENTS" },
{ number: "Global", labelKey: "COMPANYOVERVIEW.STATS.FOOTPRINT" },
{ number: "NASDAQ", labelKey: "COMPANYOVERVIEW.STATS.LISTED_SINCE" },
]);
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
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;
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 20px;
font-weight: 700;
}
.hero-subtitle {
font-size: 1.5rem;
opacity: 0.9;
}
/* 通用部分样式 */
.section {
margin-bottom: 80px;
}
.section-title {
font-size: 2.2rem;
margin-bottom: 30px;
position: relative;
display: inline-block;
}
.section-title:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(to right, #1a2a6c, #fdbb2d);
border-radius: 2px;
}
.section-content {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 20px;
color: var(--text-color-secondary);
}
/* 使命愿景卡片 */
.mission-section {
margin: 80px 0;
}
.mission-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.mission-card {
background: white;
padding: 40px 30px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mission-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.card-title {
font-size: 1.5rem;
margin-bottom: 20px;
color: #895bff;
}
.card-content {
font-size: 1.05rem;
line-height: 1.7;
}
/* 时间轴样式 */
.timeline {
position: relative;
padding-left: 50px;
margin-top: 50px;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 20px;
height: 100%;
width: 4px;
background: linear-gradient(to bottom, #895bff, #fdbb2d);
}
.timeline-item {
position: relative;
margin-bottom: 50px;
}
.timeline-dot {
position: absolute;
left: -50px;
top: 5px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #895bff;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
box-shadow: 0 0 0 6px rgba(26, 42, 108, 0.2);
}
.timeline-year {
font-size: 1.4rem;
margin-bottom: 15px;
color: #1a2a6c;
}
.timeline-desc {
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 10px;
}
/* 成就部分 */
.achievement-section {
background: #f9fafc;
padding: 60px;
border-radius: 12px;
margin: 80px 0;
}
.achievement-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 50px;
}
.stat-item {
text-align: center;
padding: 30px 20px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-number {
font-size: 2.5rem;
color: #1a2a6c;
margin-bottom: 10px;
}
.stat-label {
font-size: 1.1rem;
color: var(--text-color-secondary);
}
/* 动画 */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.section-title {
font-size: 1.8rem;
}
.timeline {
padding-left: 30px;
}
.timeline-dot {
left: -30px;
width: 30px;
height: 30px;
}
.achievement-section {
padding: 40px 20px;
}
}
</style>

22
src/views/govern/index.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup>
import size1920 from "@/views/govern/size1920/index.vue";
import size375 from "@/views/govern/size375/index.vue";
import { computed } from "vue";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();
const viewComponent = computed(() => {
const viewWidth = width.value;
if (viewWidth <= 450) {
return size375;
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920;
}
});
</script>
<template>
<component :is="viewComponent" />
</template>
<style scoped lang="scss"></style>

178
src/views/govern/size1920/index.vue Normal file
View File

@ -0,0 +1,178 @@
<template>
<div class="title mb-[50px] text-center">
<h1 class="text-5xl font-light text-gray-800 mb-4 tracking-tight">
Corporate Governance
</h1>
<div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div
v-for="(item, index) in state.list"
:key="index"
class="governance-card relative overflow-hidden bg-white rounded-lg shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 transform hover:-translate-y-2"
>
<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="flex items-start mb-6">
<div
class="bg-[#895bff] 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"
class="h-8 w-8 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div>
<div>
<h2 class="text-2xl font-medium text-gray-800 mb-2">
{{ item.title }}
</h2>
<p class="text-gray-600">{{ item.date }}</p>
</div>
</div>
<p class="text-gray-700 mb-8 flex-grow">{{ item.description }}</p>
<div class="mt-auto">
<a
:href="item.url"
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"
target="_blank"
>
View Document
<svg
xmlns="http://www.w3.org/2000/svg"
class="ml-3 -mr-1 h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</a>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive } from "vue";
const state = reactive({
list: [
{
title: "Audit Committee Charter",
description:
"Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
url: "/src/assets/file/AUDIT COMMITTEE CHARTER.pdf",
date: "Last updated: March 2025",
},
{
title: "Code of Business Conduct",
description:
"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",
date: "Last updated: January 2025",
},
{
title: "Compensation Committee Charter",
description:
"Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
url: "/src/assets/file/COMPENSATION COMMITTEE CHARTER.pdf",
date: "Last updated: February 2025",
},
{
title: "Nominating & Governance Charter",
description:
"Provides the framework for director nominations and corporate governance matters.",
url: "/src/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf",
date: "Last updated: April 2025",
},
],
});
</script>
<style scoped lang="scss">
/* 标题样式 */
.title h1 {
font-family: "Georgia", serif;
position: relative;
&::after {
content: "";
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: #895bff;
border-radius: 3px;
transition: width 0.3s ease;
}
&:hover::after {
width: 120px;
}
}
/* 卡片图标动画 */
.governance-icon {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.governance-card:hover .governance-icon {
animation: float 2s ease-in-out infinite;
box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
}
/* 卡片背景渐变效果 */
.governance-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(137, 91, 255, 0.1) 0%,
rgba(0, 0, 0, 0) 50%
);
opacity: 0;
transition: opacity 0.3s ease;
}
.governance-card:hover::before {
opacity: 1;
}
/* 浮动动画 */
@keyframes float {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-5px) rotate(3deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
</style>

178
src/views/govern/size375/index.vue Normal file
View File

@ -0,0 +1,178 @@
<template>
<div class="title mb-[50px] text-center">
<h1 class="text-5xl font-light text-gray-800 mb-4 tracking-tight">
Corporate Governance
</h1>
<div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div
v-for="(item, index) in state.list"
:key="index"
class="governance-card relative overflow-hidden bg-white rounded-lg shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 transform hover:-translate-y-2"
>
<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="flex items-start mb-6">
<div
class="bg-[#895bff] 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"
class="h-8 w-8 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div>
<div>
<h2 class="text-2xl font-medium text-gray-800 mb-2">
{{ item.title }}
</h2>
<p class="text-gray-600">{{ item.date }}</p>
</div>
</div>
<p class="text-gray-700 mb-8 flex-grow">{{ item.description }}</p>
<div class="mt-auto">
<a
:href="item.url"
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"
target="_blank"
>
View Document
<svg
xmlns="http://www.w3.org/2000/svg"
class="ml-3 -mr-1 h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</a>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive } from "vue";
const state = reactive({
list: [
{
title: "Audit Committee Charter",
description:
"Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.",
url: "/src/assets/file/AUDIT COMMITTEE CHARTER.pdf",
date: "Last updated: March 2025",
},
{
title: "Code of Business Conduct",
description:
"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",
date: "Last updated: January 2025",
},
{
title: "Compensation Committee Charter",
description:
"Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.",
url: "/src/assets/file/COMPENSATION COMMITTEE CHARTER.pdf",
date: "Last updated: February 2025",
},
{
title: "Nominating & Governance Charter",
description:
"Provides the framework for director nominations and corporate governance matters.",
url: "/src/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf",
date: "Last updated: April 2025",
},
],
});
</script>
<style scoped lang="scss">
/* 标题样式 */
.title h1 {
font-family: "Georgia", serif;
position: relative;
&::after {
content: "";
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: #895bff;
border-radius: 3px;
transition: width 0.3s ease;
}
&:hover::after {
width: 120px;
}
}
/* 卡片图标动画 */
.governance-icon {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.governance-card:hover .governance-icon {
animation: float 2s ease-in-out infinite;
box-shadow: 0 10px 20px rgba(137, 91, 255, 0.3) !important;
}
/* 卡片背景渐变效果 */
.governance-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(137, 91, 255, 0.1) 0%,
rgba(0, 0, 0, 0) 50%
);
opacity: 0;
transition: opacity 0.3s ease;
}
.governance-card:hover::before {
opacity: 1;
}
/* 浮动动画 */
@keyframes float {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-5px) rotate(3deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
</style>

22
src/views/manage/index.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup>
import size1920 from "@/views/manage/size1920/index.vue";
import size375 from "@/views/manage/size375/index.vue";
import { computed } from "vue";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();
const viewComponent = computed(() => {
const viewWidth = width.value;
if (viewWidth <= 450) {
return size375;
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920;
}
});
</script>
<template>
<component :is="viewComponent" />
</template>
<style scoped lang="scss"></style>

229
src/views/manage/size1920/index.vue Normal file
View File

@ -0,0 +1,229 @@
<template>
<div class="home-page">
<div class="management-page">
<!-- 标题区 -->
<section class="leadership-header">
<div class="container">
<h1 class="page-title">Executive Leadership</h1>
<p class="page-subtitle">
Driving Innovation and Operational Excellence
</p>
</div>
</section>
<!-- 管理团队列表 -->
<main class="container">
<div class="leadership-grid">
<!-- 每个高管卡片 -->
<div
v-for="(leader, index) in leadershipTeam"
:key="index"
class="leader-card"
:style="{ '--delay': index * 0.2 + 's' }"
>
<!-- 卡片上半部 -->
<div class="card-profile">
<div class="avatar-wrapper">
<div class="decorative-dot"></div>
<div class="initials">{{ getInitials(leader.name) }}</div>
</div>
<div class="profile-info">
<h2 class="leader-name">{{ leader.name }}</h2>
<p class="leader-position">{{ leader.position }}</p>
</div>
</div>
<!-- 卡片下半部 -->
<div class="card-content">
<div
class="content-section"
v-for="(content, cIndex) in leader.content"
:key="cIndex"
>
<p>{{ content }}</p>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</template>
<script setup>
import { useI18n } from "vue-i18n";
import { computed } from "vue";
const { t } = useI18n();
const leadershipTeam = computed(() => [
{
name: t("MANAGEMENT.ONE.TITLE"),
position: t("MANAGEMENT.ONE.TITLETWO"),
content: [
t("MANAGEMENT.ONE.CONTENT"),
t("MANAGEMENT.ONE.CONTENTTWO"),
t("MANAGEMENT.ONE.CONTENTTHREE"),
],
},
{
name: t("MANAGEMENT.TWO.TITLE"),
position: t("MANAGEMENT.TWO.TITLETWO"),
content: [t("MANAGEMENT.TWO.CONTENTONE"), t("MANAGEMENT.TWO.CONTENTTWO")],
},
]);
const getInitials = (name) => {
return name
.split(" ")
.map((n) => n[0])
.join("");
};
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
/* 基础样式 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* 标题区 */
.leadership-header {
background: linear-gradient(135deg, #f9fbfe 0%, #e8f2ff 100%);
padding: 6rem 0 4rem;
text-align: center;
}
.page-title {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 1rem;
}
.page-subtitle {
color: #6b7c93;
font-size: 1.1rem;
}
/* 管理团队网格 */
.leadership-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
padding: 4rem 0;
}
/* 高管卡片 */
.leader-card {
background: white;
border-radius: 20px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
overflow: hidden;
transform: translateY(20px);
opacity: 0;
animation: cardEnter 0.6s ease forwards;
animation-delay: var(--delay);
transition: transform 0.3s ease;
}
.leader-card:hover {
transform: translateY(-5px);
}
/* 个人资料区 */
.card-profile {
padding: 2rem;
background: linear-gradient(
135deg,
#7a4dff 0%,
#895bff 100%
); /* 主色调接近 #895bff */
position: relative;
}
.avatar-wrapper {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
}
.decorative-dot {
position: absolute;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
top: -10px;
right: -10px;
}
.initials {
width: 100%;
height: 100%;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: bold;
color: #895bff;
}
.profile-info {
color: white;
}
.leader-name {
font-size: 1.6rem;
margin-bottom: 0.5rem;
}
.leader-position {
font-size: 1rem;
opacity: 0.9;
}
/* 内容区 */
.card-content {
padding: 2rem;
}
.content-section {
margin-bottom: 1.5rem;
}
.content-section p {
color: #5a6d80;
line-height: 1.7;
font-size: 0.95rem;
}
/* 动画 */
@keyframes cardEnter {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式 */
@media (max-width: 768px) {
.leadership-grid {
grid-template-columns: 1fr;
}
.leader-card {
margin: 0 1rem;
}
}
</style>

225
src/views/manage/size375/index.vue Normal file
View File

@ -0,0 +1,225 @@
<template>
<div class="home-page">
<!-- 顶部背景图 Banner -->
<div class="hero-banner">
<div class="banner-content">
<h1 class="main-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h1>
<p class="sub-title">
NASDAQ: MINM | {{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}
</p>
<!-- <p class="sub-title" style="">
{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}
</p> -->
</div>
</div>
<section
class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h2>
<div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</p>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
</div>
</section>
<!-- 公司概况 -->
<section
class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h2>
<div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
</div>
</section>
<!-- 使命与愿景 -->
<section
class="mission-vision"
style="
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
"
>
<h2 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h2>
<div class="mission-content">
<ul>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT").replace("•", "") }}
</li>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO").replace("•", "") }}
</li>
</ul>
</div>
</section>
<!-- 企业里程碑 -->
<section
class="milestones"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}</h2>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") }}</li>
</ul>
</div>
</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>
</div>
</template>
<script setup>
import { useI18n } from "vue-i18n";
const { t: $t } = useI18n();
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.hero-banner {
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.banner-content {
text-align: center;
color: white;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
.main-title {
font-size: 3.5rem;
margin-bottom: 20px;
}
.sub-title {
font-size: 1.5rem;
}
.section-card {
padding: 40px;
border-radius: 12px;
}
.card-content {
font-size: 1.1rem;
line-height: 1.8;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 30px;
color: #895bff;
}
.content-block {
font-size: 1.1rem;
line-height: 1.8;
}
.mission-content ul {
list-style: disc;
padding-left: 20px;
font-size: 1.1rem;
}
.milestones {
font-size: 1.1rem;
}
.milestone-item {
margin-bottom: 40px;
padding: 20px;
border-left: 3px solid #ddf6e0;
background: #f8fafc;
}
.milestone-item h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #895bff;
}
.milestone-item ul {
list-style: none;
padding-left: 0;
}
.milestone-item li {
margin-bottom: 10px;
}
.achievements {
padding: 40px;
border-radius: 12px;
}
</style>

22
src/views/myHome/index.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup>
import size1920 from "@/views/myHome/size1920/index.vue";
import size375 from "@/views/myHome/size375/index.vue";
import { computed } from "vue";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();
const viewComponent = computed(() => {
const viewWidth = width.value;
if (viewWidth <= 450) {
return size375;
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920;
}
});
</script>
<template>
<component :is="viewComponent" />
</template>
<style scoped lang="scss"></style>

536
src/views/myHome/size1920/index.vue Normal file
View File

@ -0,0 +1,536 @@
<template>
<div class="home-page">
<!-- 顶部背景图 Banner -->
<div class="hero-banner">
<div class="banner-content">
<h1 class="main-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h1>
<p class="sub-title">
NASDAQ: MINM | {{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}
</p>
<!-- <p class="sub-title" style="">
{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}
</p> -->
</div>
</div>
<section
class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h2>
<div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</p>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
</div>
</section>
<!-- 公司概况 -->
<section
class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h2>
<div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
</div>
</section>
<!-- 使命与愿景 -->
<section
class="mission-vision"
style="
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
"
>
<h2 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h2>
<div class="mission-content">
<ul>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT").replace("•", "") }}
</li>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO").replace("•", "") }}
</li>
</ul>
</div>
</section>
<!-- 企业里程碑 -->
<section
class="milestones"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}</h2>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") }}</li>
</ul>
</div>
</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
class="news-section"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
<div class="news-card">
<div class="news-date">2025-05-15</div>
<h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3>
<p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.LATEST_CONTENT") }}
</p>
<!-- <a href="#" class="news-link"
>{{ $t("HOME.CONTAINY.NEWS.READ_MORE") }} →</a
> -->
</div>
</section>
<!-- 新增：股票信息与活动预告双栏模块 -->
<section
class="dual-column-section"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<div class="grid-container">
<!-- 股票信息卡片 -->
<div class="info-card stock-card">
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
<div class="stock-data">
<div class="data-row">
<span class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
}}</span>
<span class="data-value">${{ dataObj.Open }}</span>
</div>
<div class="data-row">
<span class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
}}</span>
<span class="data-value positive"
>{{ dataObj.change[0] }}{{ dataObj.change[1] }}</span
>
</div>
<div class="data-row">
<span class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
}}</span>
<span class="data-value">NASDAQ: MINM</span>
</div>
<div class="data-row">
<span class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
}}</span>
<span class="data-value">{{ dataObj.Volume }}</span>
</div>
<div class="data-row">
<span class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
}}</span>
<span class="data-value">${{ dataObj.MarketCap }}</span>
</div>
</div>
</div>
<!-- 活动预告卡片 -->
<div class="info-card events-card">
<h2 class="card-title">
{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
</h2>
<div class="event-item">
<h3 class="event-name">
{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.EVENT_NAME") }}
</h3>
<!-- <div class="event-detail">
<div class="detail-row">
<i class="icon-calendar"></i>
<span
>{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.DATE") }}:
2025年8月12日(二)-2025年8月14日</span
>
</div>
<div class="detail-row">
<i class="icon-location"></i>
<span
>{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.VENUE") }}:
6号馆B厅</span
>
</div>
<div class="detail-row">
<i class="icon-area"></i>
<span
>{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.AREA") }}:
约10,000m²</span
>
</div>
<div class="detail-row">
<i class="icon-booth"></i>
<span
>{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.BOOTHS") }}:
约500个标准展位</span
>
</div>
</div> -->
</div>
</div>
</div>
</section>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { getTestData } from "@/config/testRequest";
const dataObj = ref({
change: ["0.2", "1111"],
});
onMounted(async () => {
try {
const data = await getTestData();
dataObj.value = data;
} catch (error) {
console.error("调用接口失败:", error);
}
});
const { t: $t } = useI18n();
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.hero-banner {
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.banner-content {
text-align: center;
color: white;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
.main-title {
font-size: 3.5rem;
margin-bottom: 20px;
}
.sub-title {
font-size: 1.5rem;
}
.section-card {
padding: 40px;
border-radius: 12px;
}
.card-content {
font-size: 1.1rem;
line-height: 1.8;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 30px;
color: #895bff;
}
.content-block {
font-size: 1.1rem;
line-height: 1.8;
}
.mission-content ul {
list-style: disc;
padding-left: 20px;
font-size: 1.1rem;
}
.milestones {
font-size: 1.1rem;
}
.milestone-item {
margin-bottom: 40px;
padding: 20px;
border-left: 3px solid #895bff;
background: #f8fafc;
}
.milestone-item h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #895bff;
}
.milestone-item ul {
list-style: none;
padding-left: 0;
}
.milestone-item li {
margin-bottom: 10px;
}
.achievements {
padding: 40px;
border-radius: 12px;
}
/* 新增样式 */
.dual-column-section {
margin-bottom: 80px;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.info-card {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.card-title {
font-size: 1.8rem;
margin-bottom: 25px;
color: #895bff;
position: relative;
padding-bottom: 10px;
}
.card-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #895bff, #b388ff);
}
/* 股票信息卡片样式 */
.stock-card {
border-top: 4px solid #895bff;
}
.stock-data {
margin-bottom: 25px;
}
.data-row {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.data-label {
color: #666;
font-weight: 500;
}
.data-value {
font-weight: 600;
}
.positive {
color: #895bff;
}
.stock-chart-placeholder {
height: 200px;
background: #f8fafc;
border-radius: 8px;
margin-top: 20px;
position: relative;
overflow: hidden;
}
.chart-mock {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80%;
background: linear-gradient(90deg, #e0e7ff, #c7d2fe);
border-radius: 0 0 8px 8px;
}
/* 活动预告卡片样式 */
.events-card {
border-top: 4px solid #10b981;
}
.event-item {
margin-bottom: 20px;
}
.event-name {
font-size: 1.4rem;
color: #333;
margin-bottom: 15px;
}
.detail-row {
display: flex;
align-items: center;
margin-bottom: 12px;
color: #555;
}
.detail-row i {
margin-right: 10px;
color: #895bff;
font-size: 1.2rem;
}
.event-button {
background: linear-gradient(135deg, #895bff, #6a11cb);
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
}
.event-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
}
/* 新闻模块样式 */
.news-section {
margin-bottom: 80px;
}
.news-card {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
border-left: 4px solid #895bff;
}
.news-date {
color: #888;
font-size: 0.9rem;
margin-bottom: 10px;
}
.news-title {
font-size: 1.5rem;
color: #333;
margin-bottom: 15px;
}
.news-excerpt {
color: #555;
line-height: 1.7;
margin-bottom: 20px;
}
.news-link {
color: #895bff;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.news-link:hover {
text-decoration: underline;
}
/* 响应式设计 */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
.hero-banner {
height: 400px;
}
.main-title {
font-size: 2.5rem;
}
}
</style>

225
src/views/myHome/size375/index.vue Normal file
View File

@ -0,0 +1,225 @@
<template>
<div class="home-page">
<!-- 顶部背景图 Banner -->
<div class="hero-banner">
<div class="banner-content">
<h1 class="main-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h1>
<p class="sub-title">
NASDAQ: MINM | {{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}
</p>
<!-- <p class="sub-title" style="">
{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}
</p> -->
</div>
</div>
<section
class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h2>
<div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</p>
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
</div>
</section>
<!-- 公司概况 -->
<section
class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h2>
<div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
</div>
</section>
<!-- 使命与愿景 -->
<section
class="mission-vision"
style="
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
"
>
<h2 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h2>
<div class="mission-content">
<ul>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT").replace("•", "") }}
</li>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO").replace("•", "") }}
</li>
</ul>
</div>
</section>
<!-- 企业里程碑 -->
<section
class="milestones"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}</h2>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") }}</li>
</ul>
</div>
</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>
</div>
</template>
<script setup>
import { useI18n } from "vue-i18n";
const { t: $t } = useI18n();
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.hero-banner {
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.banner-content {
text-align: center;
color: white;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
.main-title {
font-size: 3.5rem;
margin-bottom: 20px;
}
.sub-title {
font-size: 1.5rem;
}
.section-card {
padding: 40px;
border-radius: 12px;
}
.card-content {
font-size: 1.1rem;
line-height: 1.8;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 30px;
color: #895bff;
}
.content-block {
font-size: 1.1rem;
line-height: 1.8;
}
.mission-content ul {
list-style: disc;
padding-left: 20px;
font-size: 1.1rem;
}
.milestones {
font-size: 1.1rem;
}
.milestone-item {
margin-bottom: 40px;
padding: 20px;
border-left: 3px solid #ddf6e0;
background: #f8fafc;
}
.milestone-item h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #895bff;
}
.milestone-item ul {
list-style: none;
padding-left: 0;
}
.milestone-item li {
margin-bottom: 10px;
}
.achievements {
padding: 40px;
border-radius: 12px;
}
</style>