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

Merge branch 'main' of http://172.16.100.91:3000/scout666/fiee-official-website

Browse Source
This commit is contained in:
Phoenix 2025-05-23 16:41:19 +08:00
commit 7c75bab274
29 changed files with 728 additions and 746 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/file/2023 Q1 Quarterly Results.pdf Normal file
View File

Binary file not shown.

BIN
src/assets/file/2023 Q2 Quarterly Results.pdf Normal file
View File

Binary file not shown.

BIN
src/assets/file/2024 Annual Report.pdf Normal file
View File

Binary file not shown.

BIN
src/assets/file/2025 Q1 Quarterly Results.pdf
View File

Binary file not shown.

14
src/components/customDefaultPage/index.vue
View File

@ -3,6 +3,8 @@ import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
import size375 from '@/components/customDefaultPage/size375/index.vue'
import size768 from '@/components/customDefaultPage/size1920/index.vue'
import size1440 from '@/components/customDefaultPage/size1920/index.vue'
import size1920 from '@/components/customDefaultPage/size1920/index.vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
@ -15,13 +17,11 @@ const viewComponent = computed(() => {
const viewWidth = width.value
if (viewWidth <= 450) {
return size375
}
// else if (viewWidth <= 1100) {
// return size768;
// } else if (viewWidth <= 1500) {
// return size1440;
// }
else if (viewWidth <= 1920 || viewWidth > 1920) {
} else if (viewWidth <= 1100) {
return size768
} else if (viewWidth <= 1500) {
return size1440
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920
}
})

14
src/components/customFooter/index.vue
View File

@ -3,6 +3,8 @@ import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
import size375 from '@/components/customFooter/size375/index.vue'
import size768 from '@/components/customFooter/size1920/index.vue'
import size1440 from '@/components/customFooter/size1920/index.vue'
import size1920 from '@/components/customFooter/size1920/index.vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
@ -15,13 +17,11 @@ const viewComponent = computed(() => {
const viewWidth = width.value
if (viewWidth <= 450) {
return size375
}
// else if (viewWidth <= 1100) {
// return size768;
// } else if (viewWidth <= 1500) {
// return size1440;
// }
else if (viewWidth <= 1920 || viewWidth > 1920) {
} else if (viewWidth <= 1100) {
return size768
} else if (viewWidth <= 1500) {
return size1440
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920
}
})

4
src/components/customFooter/size1920/index.vue
View File

@ -13,11 +13,11 @@
text-align: center;
padding: 24px 0;
color: #888;
font-size: 15px;
// font-size: 15px;
font-size: 1.05rem;
background: #f7f8fa;
letter-spacing: 1px;
border-top: 1px solid #ececec;
z-index: 100;
}
</style>

14
src/components/customHeader/index.vue
View File

@ -3,6 +3,8 @@ import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
import size375 from '@/components/customHeader/size375/index.vue'
import size768 from '@/components/customHeader/size375/index.vue'
import size1440 from '@/components/customHeader/size1920/index.vue'
import size1920 from '@/components/customHeader/size1920/index.vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
@ -15,13 +17,11 @@ const viewComponent = computed(() => {
const viewWidth = width.value
if (viewWidth <= 450) {
return size375
}
// else if (viewWidth <= 1100) {
// return size768;
// } else if (viewWidth <= 1500) {
// return size1440;
// }
else if (viewWidth <= 1920 || viewWidth > 1920) {
} else if (viewWidth <= 768) {
return size768
} else if (viewWidth <= 1500) {
return size1440
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920
}
})

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

@ -81,7 +81,7 @@ const handleToHome = () => {
<style scoped lang="scss">
.custom-header {
--header-height: 80px;
--header-height: 5rem;
--primary-color: #8b59f7;
transition: all 0.3s ease;
background: transparent;
@ -133,7 +133,8 @@ const handleToHome = () => {
margin: 0 20px;
transition: all 0.3s ease;
font-weight: 700;
font-size: 16px;
// font-size: 16px;
font-size: 1.05rem;
min-width: 120px;
text-align: center;

10
src/config/headerMenuConfig.js
View File

@ -38,10 +38,10 @@ export const useHeaderMenuConfig = () => {
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",
// },//暂时隐藏本菜单
],
},
{
@ -72,6 +72,7 @@ export const useHeaderMenuConfig = () => {
{
label: t("header_menu.stock_information.historic_stock_price"),
key: "historic_stock_price",
href:'/historic-stock'
},
{
label: t("header_menu.stock_information.investment_calculator"),
@ -92,6 +93,7 @@ export const useHeaderMenuConfig = () => {
{
label: t("header_menu.news_releases.events_calendar"),
key: "events_calendar",
href: "/events-calendar",
},
],
},

17
src/locales/en.js
View File

@ -590,6 +590,14 @@ export default {
LATEST_CONTENT:
"Ucommune Regains Compliance with Nasdag MinimuBid Price Requirement",
READ_MORE: "Read more",
TITLETWO:
"Exhibition Theme: International New Energy and Emerging Industry Technology Exhibition",
TITLETHTEE:
"Exhibition time: August 12, 2025 (Tuesday) ~ August 14, 2025;",
CONTENTTHREE:
"Exhibition venue: Shenzhen International Exhibition Center, Shenzhen, China",
CONTENTFOUR: "Venue: Hall B of Hall 6, with an area of about 10,000m;",
CONTENTFIVE: "Number of booths: about 500 standard booths.",
},
},
},
@ -603,6 +611,7 @@ export default {
'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.",
CONTENTTWOTITLE: "Our services are structured",
},
TITLETHREE: {
TITLE: "Our mission and vision",
@ -618,11 +627,11 @@ export default {
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. ",
TWO: "II.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",
ONE: "I.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: "",
},
@ -640,12 +649,12 @@ export default {
},
SUBHEADINGFIVE: "•2025 Rebranding & New C-Suite",
paragraphFIVE: {
ONE: "Officially rebranded from Minim Inc. to FiEE Inc.",
ONE: "I.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",
FIVE: "V.Acquisition of Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC",
},
},
TITLEFIVE: {

18
src/router/index.js
View File

@ -3,6 +3,10 @@ import { createRouter, createWebHistory } from "vue-router";
import { setupRouterGuards } from "./router-guards";
const routes = [
{
path: "/",
redirect: '/myhome'
},
{
path: "/",
name: "index",
@ -23,16 +27,6 @@ const routes = [
name: "calculator",
component: () => import("@/views/calculator/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",
@ -138,6 +132,10 @@ const routes = [
// name: 'Investorhandbook',
// component: () => import('@/views/investorhandbook/index.vue'),
// },
{
path: '/:pathMatch(.*)*',
redirect: '/myhome'
}
];
const router = createRouter({

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

@ -12,13 +12,15 @@
</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">
<p style="font-size: 18px; font-weight: bold">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</p>
<!-- 解决方案网格 - 新布局 -->
<div class="solution-grid">
<!-- 主推解决方案 -->
@ -114,7 +116,7 @@ const solutions = computed(() => [
<style scoped>
.home-page {
background-image: url("@/assets/image/bg.png");
background-image: url("@/assets/image/bg-mobile.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
@ -244,8 +246,6 @@ const solutions = computed(() => [
transform: translateX(-50%);
width: 80%;
height: 100%;
background: url("@/assets/image/abstract-pattern.png") no-repeat
center/contain;
opacity: 0.03;
z-index: -1;
}

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

@ -1,7 +1,7 @@
<template>
<div class="home-page">
<div class="business-page">
<!-- 渐变背景标题区 - 增加层次感 -->
<!-- 渐变背景标题区 -->
<section class="hero-section">
<div class="hero-content container">
<div class="title-wrapper">
@ -17,14 +17,13 @@
</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>
@ -113,53 +112,7 @@ const solutions = computed(() => [
</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;
@ -169,27 +122,26 @@ const solutions = computed(() => [
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;
--text-primary: #2c0850;
--text-secondary: #4a3a6b;
--text-light: #6c5ce7;
--bg-light: #f9f6ff;
--border-radius: 16px;
--box-shadow: 0 10px 30px rgba(137, 91, 255, 0.15);
}
/* 基础样式 */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
padding: 0 1.25rem;
}
/* 标题区 - 紫色渐变 */
/* 标题区样式 */
.hero-section {
background: var(--primary-gradient);
padding: 10rem 0 8rem;
padding: 6rem 0 4rem;
position: relative;
overflow: hidden;
color: white;
color: #895bff;
}
.hero-section::before {
@ -203,26 +155,36 @@ const solutions = computed(() => [
no-repeat bottom/100% 30%;
}
.hero-section::after {
content: "";
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
height: 40px;
background: white;
transform: skewY(-3deg);
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 2rem;
font-size: clamp(1.8rem, 5vw, 2.5rem);
margin-bottom: 1.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.title-decoration {
position: absolute;
bottom: -15px;
bottom: -10px;
left: 0;
width: 80%;
height: 4px;
width: 60%;
height: 3px;
background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
}
.hero-description {
max-width: 800px;
font-size: 1.1rem;
line-height: 1.8;
font-size: 1rem;
line-height: 1.7;
opacity: 0.9;
}
@ -230,30 +192,17 @@ const solutions = computed(() => [
.solution-grid {
display: flex;
flex-direction: column;
gap: 2.5rem;
padding: 5rem 0;
gap: 1.5rem;
padding: 3rem 0;
position: relative;
z-index: 1;
}
.solution-grid::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 100%;
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);
border-radius: var(--border-radius);
padding: 1.5rem;
box-shadow: var(--box-shadow);
transform: translateY(20px);
opacity: 0;
animation: cardEnter 0.6s ease forwards;
@ -261,7 +210,7 @@ const solutions = computed(() => [
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
position: relative;
overflow: hidden;
border: none;
border: 1px solid rgba(137, 91, 255, 0.1);
}
.solution-card::after {
@ -280,120 +229,64 @@ const solutions = computed(() => [
}
.solution-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(137, 91, 255, 0.2);
}
.featured-solution .solution-card {
background: var(--bg-light);
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;
width: 40px;
height: 3px;
background: var(--primary-gradient);
margin-bottom: 1.5rem;
margin-bottom: 1rem;
border-radius: 3px;
transition: width 0.3s ease;
}
.solution-card:hover .decorative-line {
width: 80px;
width: 60px;
}
.card-title {
font-size: 1.6rem;
color: #2c0850;
margin-bottom: 1.5rem;
font-size: 1.3rem;
color: var(--text-primary);
margin-bottom: 1rem;
font-weight: 600;
}
.content-point {
display: flex;
gap: 1.2rem;
padding: 1.2rem 0;
gap: 0.8rem;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(137, 91, 255, 0.1);
}
.content-point:last-child {
border-bottom: none;
}
.point-icon {
color: var(--primary-color);
font-size: 1.4rem;
font-size: 1.2rem;
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);
color: var(--text-secondary);
line-height: 1.6;
font-size: 0.95rem;
}
/* 布局调整 */
.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;
}
gap: 1.5rem;
}
/* 动画 */

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

@ -145,7 +145,10 @@ const getCommitteeRole = (name, committee) => {
}
.committees-page {
background-color: #faf9ff;
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
}

398
src/views/CommitteeAppointment/size375/index.vue
View File

@ -1,96 +1,59 @@
<template>
<div class="committees-page">
<!-- 标题区 -->
<div class="board-members-page">
<!-- 页面头部 -->
<section class="hero-section">
<div class="container">
<h1>Board Committees</h1>
<p>Expertise Oversight and Corporate Governance</p>
<h1 class="page-title">Board of Directors</h1>
<p class="page-subtitle">Meet our leadership team</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"
class="director-card"
v-for="(director, index) in otherDirectors"
:key="index"
:key="director.name"
:style="{ '--delay': index * 0.1 + 's' }"
>
<!-- 董事姓名 -->
<div class="director-cell">
<div class="card-header">
<div class="director-info">
<div class="avatar"></div>
<div class="avatar">
<span class="initials">{{ getInitials(director.name) }}</span>
</div>
<div>
<router-link :to="'/boarddirectors'" class="director-link">
<router-link
:to="`/boarddirectors/${director.name}`"
class="director-name"
>
{{ director.name }}
</router-link>
<!-- <p class="director-title">{{ director.title }}</p> -->
<p class="director-title">{{ director.title }}</p>
</div>
</div>
</div>
<div class="committee-groups">
<!-- 委员会职位 -->
<div class="committee-cell">
<div
class="committee-group"
v-if="getCommittees(director.name).length > 0"
>
<div class="role-badges">
<template v-if="getCommitteeRole(director.name, 'Audit')">
<template
v-for="(committee, idx) in getCommittees(director.name)"
:key="idx"
>
<div
class="role-badge"
:class="
getCommitteeRole(director.name, 'Audit').toLowerCase()
getCommitteeRole(director.name, committee).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>
<span>{{ getCommitteeRole(director.name, committee) }}</span>
<span class="committee-name">{{
getCommitteeShortName(committee)
}}</span>
</div>
</template>
</div>
@ -102,6 +65,9 @@
</template>
<script setup>
import { ref, computed } from "vue";
// 董事会成员数据
const otherDirectors = [
{
name: "Cao Yu",
@ -113,248 +79,198 @@ const otherDirectors = [
{ name: "Chan Oi Fat", title: "Director" },
];
// 模拟数据 - 实际应从API获取
// 委员会角色数据
const committeeRoles = {
"Cao Yu": {
Audit: "Chair",
Compensation: "Member",
},
"David Lazar": {
Audit: "Member",
Governance: "Chair",
},
"Cao Yu": {},
"David Lazar": {},
"Hu Bin": {
Compensation: "Chair",
Governance: "Member",
},
"David Natan": {
Audit: "Member",
},
"David Natan": {
Compensation: "Member",
Governance: "Chair",
Audit: "Chair",
},
"Chan Oi Fat": {
Compensation: "Member",
Governance: "Member",
Audit: "Member",
},
};
// 获取委员会列表
const getCommittees = (name) => {
return Object.keys(committeeRoles[name] || {});
};
// 获取委员会角色
const getCommitteeRole = (name, committee) => {
return committeeRoles[name]?.[committee] || null;
return committeeRoles[name]?.[committee] || "";
};
// 获取委员会简称
const getCommitteeShortName = (committee) => {
const names = {
Audit: "Audit",
Compensation: "Comp.",
Governance: "Governance",
};
return names[committee] || committee;
};
// 获取姓名首字母
const getInitials = (name) => {
return name
.split(" ")
.map((word) => word[0])
.join("")
.toUpperCase();
};
</script>
<style scoped>
/* 紫色主题变量 */
/* 基础变量 */
:root {
--primary: #895bff;
--primary-light: #a07cff;
--primary-dark: #6a11cb;
--primary-transparent: rgba(137, 91, 255, 0.1);
--text-primary: #333;
--text-secondary: #666;
--bg-light: #f9f6ff;
--border-radius: 12px;
}
.committees-page {
/* 页面样式 */
.board-members-page {
background-color: #faf9ff;
min-height: 100vh;
}
/* 标题区设计 */
.container {
padding: 0 16px;
margin: 0 auto;
max-width: 768px;
}
/* 头部样式 */
.hero-section {
background: linear-gradient(
135deg,
var(--primary-light) 0%,
var(--primary) 100%
);
padding: 6rem 2rem;
padding: 3rem 1rem;
text-align: center;
color: #895bff;
color: white;
margin-bottom: 2rem;
}
.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;
.page-title {
font-size: clamp(1.75rem, 5vw, 2.25rem);
margin-bottom: 0.5rem;
font-weight: 600;
}
.director-cell {
padding: 1.5rem;
border-right: 1px solid #f0f0f0;
.page-subtitle {
font-size: clamp(1rem, 3vw, 1.25rem);
opacity: 0.9;
}
/* 董事卡片 */
.director-card {
background: white;
border-radius: var(--border-radius);
margin-bottom: 1.5rem;
box-shadow: 0 5px 20px rgba(137, 91, 255, 0.08);
overflow: hidden;
transform: translateY(20px);
opacity: 0;
animation: fadeIn 0.5s ease forwards;
animation-delay: var(--delay);
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.card-header {
padding: 1.25rem;
background: var(--bg-light);
border-bottom: 1px solid #f0f0f0;
}
.director-info {
display: flex;
align-items: center;
gap: 1.2rem;
gap: 1rem;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
width: 56px;
height: 56px;
background: var(--primary-transparent);
border-radius: 50%;
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;
.initials {
font-size: 1.25rem;
font-weight: bold;
color: var(--primary);
}
.director-name {
color: var(--text-primary);
text-decoration: none;
font-size: 1.2rem;
font-weight: 500;
display: block;
margin-bottom: 0.25rem;
}
.director-title {
font-size: 0.85rem;
color: #666;
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.3;
}
/* 委员会职位 */
.committee-groups {
padding: 1.25rem;
}
/* 职位徽章设计 */
.role-badges {
display: flex;
flex-direction: column;
gap: 0.8rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.role-badge {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
padding: 0.35rem 0.75rem;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 500;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 80px;
gap: 0.35rem;
background: rgba(137, 91, 255, 0.08);
color: var(--primary);
}
.role-badge.chair {
background: rgba(74, 222, 128, 0.15);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
background: rgba(137, 91, 255, 0.15);
color: var(--primary-dark);
}
.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;
.committee-name {
font-size: 0.75rem;
opacity: 0.8;
}
</style>

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

@ -7,11 +7,14 @@
<div class="directors-list">
<div
v-for="(director, index) in otherDirectors"
:key="index"
:key="director.name"
class="director-item"
v-motion-fade
>
<div class="director-header">
<n-h2 class="director-name">{{ director.name }}</n-h2>
<n-text class="director-title">{{ director.title }}</n-text>
</div>
<n-divider class="divider" />
<n-p class="director-bio">{{ director.contain }}</n-p>
</div>
@ -56,39 +59,40 @@ const otherDirectors = [
</script>
<style scoped>
.home-page {
background-image: url("@/assets/image/bg-mobile.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
/* 基础变量定义 */
:root {
--primary-color: #895bff;
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-light: #666;
--border-color: #f0f0f0;
--mobile-padding: 16px;
--section-spacing: 32px;
}
.directors-page {
width: 100%;
margin: 0 auto;
padding: 40px 20px;
box-sizing: border-box;
padding: 40px var(--mobile-padding);
}
.page-title {
text-align: center;
margin-bottom: 20px;
font-weight: 600;
color: #1a1a1a;
font-size: 28px;
margin-bottom: 12px;
font-weight: 500;
color: var(--text-primary);
font-size: clamp(1.5rem, 5vw, 2rem);
}
.directors-list {
display: flex;
flex-direction: column;
gap: 40px;
margin-top: 30px;
gap: var(--section-spacing);
margin-top: 32px;
}
.director-item {
padding-bottom: 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: var(--section-spacing);
border-bottom: 1px solid var(--border-color);
}
.director-item:last-child {
@ -96,32 +100,47 @@ const otherDirectors = [
padding-bottom: 0;
}
.director-header {
display: flex;
flex-direction: column;
gap: 4px;
}
.director-name {
margin-bottom: 10px;
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.3;
margin-bottom: 0;
font-size: clamp(1.25rem, 4vw, 1.75rem);
font-weight: 500;
color: var(--text-primary);
}
.director-title {
font-size: 18px;
color: #555;
font-size: clamp(0.95rem, 3vw, 1.1rem);
color: var(--text-light);
display: block;
margin-bottom: 20px;
line-height: 1.4;
margin-bottom: 16px;
}
.divider {
margin: 20px 0;
background-color: rgba(0, 0, 0, 0.1);
margin: 12px 0;
background-color: var(--border-color);
}
.director-bio {
line-height: 1.8;
color: #333;
font-size: 16px;
line-height: 1.7;
color: var(--text-secondary);
font-size: clamp(0.9rem, 2.8vw, 1rem);
text-align: justify;
word-break: break-word;
}
/* 动画效果 */
.v-motion-fade {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.v-motion-fade.appear {
opacity: 1;
transform: translateY(0);
}
</style>

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

@ -26,8 +26,8 @@
</h2>
<div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
</div>
</section>
@ -68,9 +68,12 @@
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
}}</n-h3>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
}}</n-p>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
}}</n-p>
@ -84,9 +87,13 @@
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
}}</n-h3>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
}}</n-p>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
}}</n-p>
@ -100,10 +107,13 @@
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
}}</n-h3>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
}}</n-p>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
}}</n-p>
@ -117,9 +127,13 @@
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
}}</n-h3>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
}}</n-p>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
}}</n-p>
@ -133,18 +147,28 @@
<n-h3 class="timeline-year">{{
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
}}</n-h3>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
}}</n-p>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
}}</n-p>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
}}</n-p>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
}}</n-p>
<br />
<n-p class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
}}</n-p>
@ -158,6 +182,8 @@
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
}}</n-h2>
<br />
<n-p class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>

296
src/views/companyoverview/size375/index.vue
View File

@ -8,35 +8,26 @@
$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 class="company-overview content-section">
<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-section">
<section class="mission-section content-section">
<div class="mission-cards">
<n-card hoverable class="mission-card" v-motion-pop>
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.MISSION_TITLE")
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3>
<n-p class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
@ -45,7 +36,7 @@
<n-card hoverable class="mission-card" v-motion-pop>
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.VISION_TITLE")
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3>
<n-p class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
@ -55,8 +46,7 @@
</section>
<!-- 里程碑时间轴 -->
<!-- 里程碑时间轴 -->
<section class="section timeline-section">
<section class="section timeline-section content-section">
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
}}</n-h2>
@ -154,25 +144,13 @@
</section>
<!-- 成就部分 -->
<section class="achievement-section" v-motion-fade>
<section class="achievement-section content-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>
@ -192,17 +170,50 @@ const stats = ref([
</script>
<style scoped>
/* 基础变量定义 */
:root {
--primary-color: #895bff;
--secondary-color: #fdbb2d;
--text-color: #333;
--text-color-secondary: #666;
--bg-color: #f9fafc;
--mobile-breakpoint: 768px;
}
.home-page {
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.company-overview {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
color: var(--text-color);
/* 内容区块通用样式 */
.content-section {
padding: 0 16px;
margin-bottom: 48px;
}
.section-title {
font-size: clamp(1.5rem, 5vw, 2.2rem);
margin-bottom: 24px;
position: relative;
display: inline-block;
}
.section-title:after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(
to right,
var(--primary-color),
var(--secondary-color)
);
border-radius: 2px;
}
/* 顶部大图区域 */
@ -211,175 +222,168 @@ const stats = ref([
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: white;
padding: 120px 0;
padding: 80px 16px;
text-align: center;
margin-bottom: 60px;
border-radius: 8px;
margin-bottom: 48px;
border-radius: 0 0 16px 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 20px;
font-size: clamp(2rem, 6vw, 3.5rem);
margin-bottom: 16px;
font-weight: 700;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.hero-subtitle {
font-size: 1.5rem;
opacity: 0.9;
}
/* 通用部分样式 */
.section {
margin-bottom: 80px;
}
.section-title {
font-size: 2.2rem;
margin-bottom: 30px;
/* 公司简介部分 */
.company-overview.content-section {
margin-top: -24px;
background-color: white;
border-radius: 16px;
padding: 32px 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
position: relative;
display: inline-block;
z-index: 10;
}
.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;
.content-block p {
margin-bottom: 16px;
line-height: 1.8;
margin-bottom: 20px;
color: var(--text-color-secondary);
text-align: justify;
}
/* 使命愿景卡片 */
.mission-section {
margin: 80px 0;
}
.mission-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
grid-template-columns: 1fr;
gap: 24px;
}
.mission-card {
background: white;
padding: 40px 30px;
padding: 28px 24px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #eee;
}
.mission-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.card-title {
font-size: 1.5rem;
margin-bottom: 20px;
color: #895bff;
font-size: 1.3rem;
margin-bottom: 16px;
color: var(--primary-color);
font-weight: 600;
}
.card-content {
font-size: 1.05rem;
font-size: 1rem;
line-height: 1.7;
color: var(--text-color-secondary);
}
/* 时间轴样式 */
.timeline {
position: relative;
padding-left: 50px;
margin-top: 50px;
padding-left: 36px;
margin-top: 32px;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 20px;
left: 16px;
height: 100%;
width: 4px;
background: linear-gradient(to bottom, #895bff, #fdbb2d);
width: 2px;
background: linear-gradient(
to bottom,
var(--primary-color),
var(--secondary-color)
);
}
.timeline-item {
position: relative;
margin-bottom: 50px;
margin-bottom: 36px;
}
.timeline-dot {
position: absolute;
left: -50px;
left: -36px;
top: 5px;
width: 40px;
height: 40px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #895bff;
background: var(--primary-color);
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);
box-shadow: 0 0 0 4px rgba(137, 91, 255, 0.15);
font-size: 0.9rem;
}
.timeline-year {
font-size: 1.4rem;
margin-bottom: 15px;
color: #1a2a6c;
font-size: 1.2rem;
margin-bottom: 12px;
color: var(--primary-color);
font-weight: 600;
}
.timeline-desc {
font-size: 1.05rem;
font-size: 1rem;
line-height: 1.7;
margin-bottom: 10px;
margin-bottom: 8px;
color: var(--text-color-secondary);
}
/* 成就部分 */
.achievement-section {
background: #f9fafc;
padding: 60px;
border-radius: 12px;
margin: 80px 0;
background: var(--bg-color);
padding: 32px 24px;
border-radius: 16px;
margin-top: 48px;
}
.achievement-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 50px;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 32px;
}
.stat-item {
text-align: center;
padding: 30px 20px;
padding: 24px 16px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
border: 1px solid #f0f0f0;
}
.stat-item:hover {
transform: translateY(-5px);
transform: translateY(-3px);
}
.stat-number {
font-size: 2.5rem;
color: #1a2a6c;
margin-bottom: 10px;
font-size: 1.8rem;
color: var(--primary-color);
margin-bottom: 8px;
font-weight: 600;
}
.stat-label {
font-size: 1.1rem;
font-size: 0.95rem;
color: var(--text-color-secondary);
line-height: 1.4;
}
/* 动画 */
@ -395,32 +399,54 @@ const stats = ref([
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
/* 响应式设计 - 针对平板和桌面端的优化 */
@media (min-width: 768px) {
.content-section {
padding: 0 32px;
margin-bottom: 64px;
}
.hero-subtitle {
font-size: 1.2rem;
.hero-section {
padding: 120px 32px;
margin-bottom: 64px;
}
.section-title {
font-size: 1.8rem;
.company-overview.content-section {
margin-top: -32px;
padding: 40px 32px;
}
.mission-cards {
grid-template-columns: repeat(2, 1fr);
}
.achievement-stats {
grid-template-columns: repeat(4, 1fr);
}
.timeline {
padding-left: 30px;
padding-left: 50px;
}
.timeline:before {
left: 20px;
width: 4px;
}
.timeline-dot {
left: -30px;
width: 30px;
height: 30px;
left: -50px;
width: 40px;
height: 40px;
font-size: 1rem;
}
}
.achievement-section {
padding: 40px 20px;
/* 针对更大屏幕的优化 */
@media (min-width: 1024px) {
.content-section {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
}
</style>

8
src/views/events-calendar/index.vue
View File

@ -4,8 +4,10 @@
</div>
</template>
<script setup>
import size1920 from '@/views/events-calendar/size1920/index.vue'
import size375 from '@/views/events-calendar/size375/index.vue'
import size768 from '@/views/events-calendar/size375/index.vue'
import size1440 from '@/views/events-calendar/size1920/index.vue'
import size1920 from '@/views/events-calendar/size1920/index.vue'
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
@ -14,6 +16,10 @@ const viewComponent = computed(() => {
const viewWidth = width.value
if (viewWidth <= 450) {
return size375
} else if (viewWidth <= 768) {
return size768
} else if (viewWidth <= 1500) {
return size1440
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920
}

23
src/views/financialinformation/quarterlyresults/size1920/index.vue
View File

@ -41,8 +41,10 @@
<script setup>
import { ref, watch, onMounted, computed, reactive } from "vue";
import { useI18n } from "vue-i18n";
import quarterlyPdf from "@/assets/file/2025 Q1 Quarterly Results.pdf";
import quarterlyPdf2025Q1 from "@/assets/file/2025 Q1 Quarterly Results.pdf";
import annualPdf2024 from "@/assets/file/2024 Annual Report.pdf";
import quarterlyPdf2023Q1 from "@/assets/file/2023 Q1 Quarterly Results.pdf";
import quarterlyPdf2023Q2 from "@/assets/file/2023 Q2 Quarterly Results.pdf";
const { t } = useI18n();
const searchQuery = ref("");
@ -52,7 +54,22 @@ const state = reactive({
title: "2025 Q1 Quarterly Results",
description:
"Unaudited First Quarter and Full Year 2025 Financial Results",
url: quarterlyPdf,
url: quarterlyPdf2025Q1,
},
{
title: "2024 Annual Report",
description: "Annual Report for the year ended December 31, 2024",
url: annualPdf2024,
},
{
title: "2023 Q1 Quarterly Results",
description: "First Quarter and Full Year 2023 Financial Results",
url: quarterlyPdf2023Q1,
},
{
title: "2023 Q2 Quarterly Results",
description: "Second Quarter and Full Year 2023 Financial Results",
url: quarterlyPdf2023Q2,
},
],
});

30
src/views/financialinformation/quarterlyresults/size375/index.vue
View File

@ -53,6 +53,10 @@ import { ref, watch, onMounted, computed, reactive } from "vue";
import { NButton, NInput, NTooltip } from "naive-ui";
import { useI18n } from "vue-i18n";
import quarterlyPdf2025Q1 from "@/assets/file/2025 Q1 Quarterly Results.pdf";
import annualPdf2024 from "@/assets/file/2024 Annual Report.pdf";
import quarterlyPdf2023Q1 from "@/assets/file/2023 Q1 Quarterly Results.pdf";
import quarterlyPdf2023Q2 from "@/assets/file/2023 Q2 Quarterly Results.pdf";
const { t } = useI18n();
const searchQuery = ref("");
@ -62,7 +66,22 @@ const state = reactive({
title: "2025 Q1 Quarterly Results",
description:
"Unaudited First Quarter and Full Year 2025 Financial Results",
url: "/src/assets/file/2025 Q1 Quarterly Results.pdf",
url: quarterlyPdf2025Q1,
},
{
title: "2024 Annual Report",
description: "Annual Report for the year ended December 31, 2024",
url: annualPdf2024,
},
{
title: "2023 Q1 Quarterly Results",
description: "First Quarter and Full Year 2023 Financial Results",
url: quarterlyPdf2023Q1,
},
{
title: "2023 Q2 Quarterly Results",
description: "Second Quarter and Full Year 2023 Financial Results",
url: quarterlyPdf2023Q2,
},
],
});
@ -90,7 +109,14 @@ const handleDownload = (url) => {
// 创建一个隐藏的a元素
const link = document.createElement("a");
link.href = url;
link.download = url.split("/").pop(); // 从URL提取文件名
// 修复文件名提取逻辑
let fileName = url.split("/").pop();
// 移除可能存在的查询参数
if (fileName.includes("?") || fileName.includes("_t=")) {
fileName = fileName.split(/[?_]/)[0];
}
link.download = fileName;
link.target = "_blank";
// 对于移动设备，我们需要特殊处理

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

@ -71,6 +71,12 @@
<script setup>
import { reactive } from "vue";
import quarterlyPdfone from "@/assets/file/AUDIT COMMITTEE CHARTER.pdf";
import quarterlyPdftwo from "@/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf";
import quarterlyPdfthree from "@/assets/file/COMPENSATION COMMITTEE CHARTER.pdf";
import quarterlyPdffour from "@/assets/file/NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER.pdf";
const state = reactive({
list: [
@ -78,28 +84,28 @@ const state = reactive({
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",
url: quarterlyPdfone,
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",
url: quarterlyPdftwo,
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",
url: quarterlyPdfthree,
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",
url: quarterlyPdffour,
date: "Last updated: April 2025",
},
],

13
src/views/historic-stock/size1920/index.vue
View File

@ -237,12 +237,17 @@ const handlePageSizeChange = (size) => {
// 回到顶部
const scrollToTop = () => {
window.scrollTo({
top: 0,
// 尝试多种方法
// 1. 使用document.body
document.body.scrollTop = 0;
// 2. 使用document.documentElement (HTML元素)
document.documentElement.scrollTop = 0;
// 3. 使用scrollIntoView
document.querySelector(".historic-data-container").scrollIntoView({
behavior: "smooth",
block: "start",
});
};
onMounted(() => {
getPageDefaultData();
});
@ -308,7 +313,6 @@ const getPageData = async () => {
let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
const res = await axios.get(url);
if (res.data.status === 200) {
console.error(res.data.data);
// 转换为日期格式："Nov 26, 2024"
let resultData = res.data.data.map((item) => {
return {
@ -326,7 +330,6 @@ const getPageData = async () => {
volume: item.v,
};
});
console.error(resultData, "resultData");
state.tableData = resultData;
}
};

13
src/views/historic-stock/size375/index.vue
View File

@ -236,12 +236,17 @@ const handlePageSizeChange = (size) => {
// 回到顶部
const scrollToTop = () => {
window.scrollTo({
top: 0,
// 尝试多种方法
// 1. 使用document.body
document.body.scrollTop = 0;
// 2. 使用document.documentElement (HTML元素)
document.documentElement.scrollTop = 0;
// 3. 使用scrollIntoView
document.querySelector(".historic-data-container").scrollIntoView({
behavior: "smooth",
block: "start",
});
};
onMounted(() => {
getPageDefaultData();
});
@ -307,7 +312,6 @@ const getPageData = async () => {
let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
const res = await axios.get(url);
if (res.data.status === 200) {
console.error(res.data.data);
// 转换为日期格式："Nov 26, 2024"
let resultData = res.data.data.map((item) => {
return {
@ -325,7 +329,6 @@ const getPageData = async () => {
volume: item.v,
};
});
console.error(resultData, "resultData");
state.tableData = resultData;
}
};

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

@ -1,6 +1,8 @@
<script setup>
import size1920 from '@/views/index/size1920/index.vue'
import size375 from '@/views/index/size375/index.vue'
import size768 from '@/views/index/size1920/index.vue'
import size1440 from '@/views/index/size1920/index.vue'
import size1920 from '@/views/index/size1920/index.vue'
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
@ -9,6 +11,10 @@ const viewComponent = computed(() => {
const viewWidth = width.value
if (viewWidth <= 450) {
return size375
} else if (viewWidth <= 1100) {
return size768
} else if (viewWidth <= 1500) {
return size1440
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920
}

114
src/views/manage/size375/index.vue
View File

@ -17,15 +17,16 @@
<!-- 每个高管卡片 -->
<div
v-for="(leader, index) in leadershipTeam"
:key="index"
:key="leader.name"
class="leader-card"
:style="{ '--delay': index * 0.2 + 's' }"
:style="{ '--delay': index * 0.15 + 's' }"
>
<!-- 卡片上半部 -->
<div class="card-profile">
<div class="avatar-wrapper">
<div class="decorative-dot"></div>
<div class="initials">{{ getInitials(leader.name) }}</div>
<div></div>
</div>
<div class="profile-info">
<h2 class="leader-name">{{ leader.name }}</h2>
@ -82,101 +83,102 @@ const getInitials = (name) => {
</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-color: #895bff;
--primary-gradient: linear-gradient(135deg, #7a4dff 0%, #895bff 100%);
--text-primary: #2c3e50;
--text-secondary: #5a6d80;
--bg-light: #f9fbfe;
--border-radius: 16px;
--box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
/* 基础样式 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
padding: 0 1.25rem;
}
/* 标题区 */
.leadership-header {
background: linear-gradient(135deg, #f9fbfe 0%, #e8f2ff 100%);
padding: 6rem 0 4rem;
background: linear-gradient(135deg, var(--bg-light) 0%, #e8f2ff 100%);
/* padding: 4rem 0 3rem; */
text-align: center;
/* margin-bottom: 2rem; */
}
.page-title {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 1rem;
font-size: clamp(1.75rem, 5vw, 2.25rem);
color: var(--text-primary);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.page-subtitle {
color: #6b7c93;
font-size: 1.1rem;
font-size: 1rem;
}
/* 管理团队网格 */
.leadership-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
padding: 4rem 0;
grid-template-columns: 1fr;
gap: 1.5rem;
/* padding: 2rem 0; */
}
/* 高管卡片 */
.leader-card {
background: white;
border-radius: 20px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
transform: translateY(20px);
opacity: 0;
animation: cardEnter 0.6s ease forwards;
animation: cardEnter 0.5s ease forwards;
animation-delay: var(--delay);
transition: transform 0.3s ease;
}
.leader-card:hover {
transform: translateY(-5px);
transform: translateY(-4px);
}
/* 个人资料区 */
.card-profile {
padding: 2rem;
background: linear-gradient(
135deg,
#7a4dff 0%,
#895bff 100%
); /* 主色调接近 #895bff */
padding: 1.75rem;
background: var(--primary-gradient);
position: relative;
}
.avatar-wrapper {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
width: 65px;
height: 65px;
/* margin-bottom: 1.25rem; */
}
.decorative-dot {
position: absolute;
width: 20px;
height: 20px;
width: 16px;
height: 16px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
top: -10px;
right: -10px;
/* top: -8px; */
right: -8px;
}
.initials {
width: 100%;
height: 100%;
/* height: 100%; */
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-size: 1.5rem;
font-weight: bold;
color: #895bff;
color: var(--primary-color);
}
.profile-info {
@ -184,28 +186,35 @@ const getInitials = (name) => {
}
.leader-name {
font-size: 1.6rem;
margin-bottom: 0.5rem;
font-size: 1.35rem;
/* margin-bottom: 0.35rem; */
margin-top: -30px;
}
.leader-position {
font-size: 1rem;
font-size: 0.95rem;
opacity: 0.9;
color: #895bff;
}
/* 内容区 */
.card-content {
padding: 2rem;
padding: 1.5rem;
margin-top: -200px;
}
.content-section {
margin-bottom: 1.5rem;
margin-bottom: 1.25rem;
}
.content-section:last-child {
margin-bottom: 0;
}
.content-section p {
color: #5a6d80;
line-height: 1.7;
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.65;
font-size: 0.9rem;
}
/* 动画 */
@ -215,15 +224,4 @@ const getInitials = (name) => {
transform: translateY(0);
}
}
/* 响应式 */
@media (max-width: 768px) {
.leadership-grid {
grid-template-columns: 1fr;
}
.leader-card {
margin: 0 1rem;
}
}
</style>

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

@ -20,7 +20,13 @@
<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>
<text style="color: #895bff">{{
$t("COMPANYOVERVIEW.TITLETWO.CONTENTTWOTITLE")
}}</text>
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}
</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
</div>
</section>
@ -121,10 +127,22 @@
>
<h2 class="section-title">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
<div class="news-card">
<div class="news-date">De 15. 2023</div>
<!-- <div class="news-date">De 15. 2023</div> -->
<!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
<p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.LATEST_CONTENT") }}
{{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
</p>
<p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
</p>
<p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
</p>
<p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
</p>
<p class="news-excerpt">
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
</p>
<!-- <a href="#" class="news-link"
>{{ $t("HOME.CONTAINY.NEWS.READ_MORE") }} →</a

8
src/views/press-releases/index.vue
View File

@ -4,8 +4,10 @@
</div>
</template>
<script setup>
import size1920 from '@/views/press-releases/size1920/index.vue'
import size375 from '@/views/press-releases/size375/index.vue'
import size768 from '@/views/press-releases/size375/index.vue'
import size1440 from '@/views/press-releases/size1920/index.vue'
import size1920 from '@/views/press-releases/size1920/index.vue'
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
@ -14,6 +16,10 @@ const viewComponent = computed(() => {
const viewWidth = width.value
if (viewWidth <= 450) {
return size375
} else if (viewWidth <= 768) {
return size768
} else if (viewWidth <= 1500) {
return size1440
} else if (viewWidth <= 1920 || viewWidth > 1920) {
return size1920
}