Compare commits
30 Commits
24c27d5efb
...
60590596b7
| Author | SHA1 | Date | |
|---|---|---|---|
| 60590596b7 | |||
| 5d0f85ba9b | |||
| 7c6a61b99f | |||
|
de8617321d | ||
|
|
786740cdfa | ||
| caf62145a0 | |||
| f33003eb04 | |||
|
|
c4b11ec76a | ||
| 39deb7bd70 | |||
| 946652acae | |||
|
99ec5382bf | ||
|
|
d4df67bd76 | ||
| 75c377eafe | |||
| 614ae9fce4 | |||
| af91764f94 | |||
|
|
b06317e581 | ||
|
|
44d3555e06 | ||
| 97fc7d966b | |||
| 7c741962d4 | |||
| 9cba09c2fb | |||
| 91485a72b4 | |||
|
|
22e9b74173 | ||
| b184eba64d | |||
| 28f6123e93 | |||
|
c4a8271816 | ||
|
|
f72dd8ad9d | ||
|
|
82711a9645 | ||
|
|
b4a3a5b72e | ||
|
|
ce58c9886e | ||
| 1164d4ef7b |
@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/src/assets/image/icon.png" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<title>FiEE</title>
|
<title>FiEE</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@ -18,6 +18,7 @@
|
|||||||
"axios": "^1.7.3",
|
"axios": "^1.7.3",
|
||||||
"cnjm-postcss-px-to-viewport": "^1.0.1",
|
"cnjm-postcss-px-to-viewport": "^1.0.1",
|
||||||
"countup.js": "^2.8.2",
|
"countup.js": "^2.8.2",
|
||||||
|
"dayjs": "^1.11.13",
|
||||||
"echarts": "^5.6.0",
|
"echarts": "^5.6.0",
|
||||||
"gsap": "^3.12.5",
|
"gsap": "^3.12.5",
|
||||||
"jsdom": "^24.0.0",
|
"jsdom": "^24.0.0",
|
||||||
|
|||||||
@ -29,6 +29,9 @@ importers:
|
|||||||
countup.js:
|
countup.js:
|
||||||
specifier: ^2.8.2
|
specifier: ^2.8.2
|
||||||
version: 2.8.2
|
version: 2.8.2
|
||||||
|
dayjs:
|
||||||
|
specifier: ^1.11.13
|
||||||
|
version: 1.11.13
|
||||||
echarts:
|
echarts:
|
||||||
specifier: ^5.6.0
|
specifier: ^5.6.0
|
||||||
version: 5.6.0
|
version: 5.6.0
|
||||||
@ -2068,6 +2071,9 @@ packages:
|
|||||||
date-fns@3.6.0:
|
date-fns@3.6.0:
|
||||||
resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
|
resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
|
||||||
|
|
||||||
|
dayjs@1.11.13:
|
||||||
|
resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
|
||||||
|
|
||||||
debug@4.3.6:
|
debug@4.3.6:
|
||||||
resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
|
resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
|
||||||
engines: {node: '>=6.0'}
|
engines: {node: '>=6.0'}
|
||||||
@ -6478,6 +6484,8 @@ snapshots:
|
|||||||
|
|
||||||
date-fns@3.6.0: {}
|
date-fns@3.6.0: {}
|
||||||
|
|
||||||
|
dayjs@1.11.13: {}
|
||||||
|
|
||||||
debug@4.3.6:
|
debug@4.3.6:
|
||||||
dependencies:
|
dependencies:
|
||||||
ms: 2.1.2
|
ms: 2.1.2
|
||||||
|
|||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
public/icon.png
BIN
public/icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
@ -560,16 +560,16 @@ export default {
|
|||||||
HOME: {
|
HOME: {
|
||||||
CONTAIN: {
|
CONTAIN: {
|
||||||
TITLEONE: {
|
TITLEONE: {
|
||||||
TITLE: "Company positioning",
|
TITLE: "Company Positioning",
|
||||||
CONTENT:
|
CONTENT:
|
||||||
"To empower global talents through innovative technology solutions",
|
"To empower global talents through innovative technology solutions",
|
||||||
CONTENTTWO:
|
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",
|
"Leveraging IoT, connectivity, and Al 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: {
|
CONTAINY: {
|
||||||
STOCK_INFO: {
|
STOCK_INFO: {
|
||||||
TITLE: "Stock Info",
|
TITLE: "Stock Information",
|
||||||
LAST_PRICE: "Last Price",
|
LAST_PRICE: "Last Price",
|
||||||
CHANGE: "Change",
|
CHANGE: "Change",
|
||||||
STOCK_CODE: "Stock Code",
|
STOCK_CODE: "Stock Code",
|
||||||
@ -607,7 +607,7 @@ export default {
|
|||||||
TITLETWO: {
|
TITLETWO: {
|
||||||
TITLE: "About FiEE, Inc.",
|
TITLE: "About FiEE, Inc.",
|
||||||
CONTENT:
|
CONTENT:
|
||||||
'FiEE, Inc. (NASDAQ: MINM) was formerly Minim, Inc. founded in 1977. We have a historical track record of delivering a comprehensive WiFi/Software as a Service platform in the market. After years of development, we made the strategic decision to transition to a Software First Model in 2023 to expand our technology portfolio and revenue streams. By 2025, we have rebranded ourselves as a technology company leveraging our expertise in IoT, connectivity, and artificial intelligence ("AI") to explore new business prospects and extend our global footprint.',
|
'FiEE, Inc. (NASDAQ: MINM) formerly Minim, Inc. was 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. in 2025, we rebranded ourselves as a technology company leveraging our expertise in IoT, connectivity, and artificial intelligence ("AI") to explore new business prospects and extend our global footprint.',
|
||||||
CONTENTTWO:
|
CONTENTTWO:
|
||||||
'into four key categories: Cloud-Managed Connectivity (WiFi) Platform, IoT Hardware Sales & Licensing, SAAS Solutions, and Professional To-C and To-B Services & Support. Notably, we have introduced our innovative Software as a Service ("SaaS") solutions, which integrate our AI and data analytics capabilities into content creation and brand management. This initiative has led to the nurturing of a robust pool of Key Opinion Leaders (KOLs) on major social media platforms worldwide, assisting them in developing, managing, and optimizing their digital presence across global platforms. Our services include customized graphics and posts, short videos, and editorial calendars tailored to align with brand objectives.',
|
'into four key categories: Cloud-Managed Connectivity (WiFi) Platform, IoT Hardware Sales & Licensing, SAAS Solutions, and Professional To-C and To-B Services & Support. Notably, we have introduced our innovative Software as a Service ("SaaS") solutions, which integrate our AI and data analytics capabilities into content creation and brand management. This initiative has led to the nurturing of a robust pool of Key Opinion Leaders (KOLs) on major social media platforms worldwide, assisting them in developing, managing, and optimizing their digital presence across global platforms. Our services include customized graphics and posts, short videos, and editorial calendars tailored to align with brand objectives.',
|
||||||
CONTENTTHREE:
|
CONTENTTHREE:
|
||||||
@ -615,16 +615,16 @@ export default {
|
|||||||
CONTENTTWOTITLE: "Our services are structured",
|
CONTENTTWOTITLE: "Our services are structured",
|
||||||
},
|
},
|
||||||
TITLETHREE: {
|
TITLETHREE: {
|
||||||
TITLE: "Our mission and vision",
|
TITLE: "Our Mission and Vision",
|
||||||
CONTENT:
|
CONTENT:
|
||||||
"•To empower global talents through innovative technology solutions",
|
"• To empower global talents through innovative technology solutions",
|
||||||
CONTENTTWO:
|
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",
|
"• 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: {
|
TITLEFOUR: {
|
||||||
CONTENT: "",
|
CONTENT: "",
|
||||||
|
|
||||||
TITLE: "Corporate Milestone",
|
TITLE: "Corporate Milestones",
|
||||||
SUBHEADING: "1977 – 2015 : Founding & Licensing",
|
SUBHEADING: "1977 – 2015 : Founding & Licensing",
|
||||||
paragraph: {
|
paragraph: {
|
||||||
ONE: "• Founded as Zoom Telephonics in 1977. ",
|
ONE: "• Founded as Zoom Telephonics in 1977. ",
|
||||||
@ -632,7 +632,7 @@ export default {
|
|||||||
},
|
},
|
||||||
SUBHEADINGTWO: "2020 : Merger & AI Advancement",
|
SUBHEADINGTWO: "2020 : Merger & AI Advancement",
|
||||||
paragraphTwo: {
|
paragraphTwo: {
|
||||||
ONE: "• November 2020: Merged with Minim Inc.; adopted Minim name/OTCQB ticker",
|
ONE: "• November 2020: Merged with Minim Inc.; adopted Minim name/OTCQB ticker.",
|
||||||
TWO: "• Rolled out AI-driven Wi-Fi management and IoT security platform.",
|
TWO: "• Rolled out AI-driven Wi-Fi management and IoT security platform.",
|
||||||
THREE: "",
|
THREE: "",
|
||||||
},
|
},
|
||||||
@ -645,22 +645,22 @@ export default {
|
|||||||
SUBHEADINGFOREFF: "2023 – 2024: Pivoting to A Software First Model",
|
SUBHEADINGFOREFF: "2023 – 2024: Pivoting to A Software First Model",
|
||||||
paragraphFOUR: {
|
paragraphFOUR: {
|
||||||
ONE: "• Enhanced its MinimOS cloud platform and API suite for ISPs/OEMs, with major deployments like Vox’s AI-driven Wi-Fi Home Manager.",
|
ONE: "• Enhanced its MinimOS cloud platform and API suite for ISPs/OEMs, with major deployments like Vox’s AI-driven Wi-Fi Home Manager.",
|
||||||
TWO: "• Signed a merger agreement with e2Companies to broaden its technology and revenue base",
|
TWO: "• Signed a merger agreement with e2Companies to broaden its technology and revenue base.",
|
||||||
THREE: "",
|
THREE: "",
|
||||||
},
|
},
|
||||||
SUBHEADINGFIVE: "2025 Rebranding & New C-Suite",
|
SUBHEADINGFIVE: "2025 Rebranding & New C-Suite",
|
||||||
paragraphFIVE: {
|
paragraphFIVE: {
|
||||||
ONE: "• Officially rebranded from Minim Inc. to FiEE Inc.",
|
ONE: "• Officially rebranded from Minim Inc. to FiEE, Inc.",
|
||||||
TWO: "• Appointed Li Wai Chung as CEO and Cao Yu as CFO.",
|
TWO: "• Appointed Li Wai Chung as CEO and Cao Yu as CFO.",
|
||||||
THREE:
|
THREE:
|
||||||
"• Leverage on foundation in IoT, connectivity and AI to pursue new business opportunities.",
|
"• Leverage on foundation in IoT, connectivity and AI to pursue new business opportunities.",
|
||||||
FOUR: "• Launched SaaS product in the market to generate recurring revenue streams",
|
FOUR: "• 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: "• Acquisition of Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC.",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
TITLEFIVE: {
|
TITLEFIVE: {
|
||||||
CONTENT:
|
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.",
|
"•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",
|
TITLE: "Outstanding Achievements",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -676,30 +676,29 @@ export default {
|
|||||||
paragraph: {
|
paragraph: {
|
||||||
ONE: {
|
ONE: {
|
||||||
TITLE: "(1)Cloud-Managed Connectivity (WiFi) Platform: ",
|
TITLE: "(1)Cloud-Managed Connectivity (WiFi) Platform: ",
|
||||||
CONTENT: "•SaaS powering OS for consumers and SMBs ",
|
CONTENT: "SaaS powering OS for consumers and SMBs ",
|
||||||
CONTENTTWO:
|
CONTENTTWO: "AI-driven threat protection, and over-the-air updates",
|
||||||
"•AI-driven threat protection, and over-the-air updates",
|
|
||||||
},
|
},
|
||||||
TWO: {
|
TWO: {
|
||||||
TITLE: "(2)IoT Hardware Sales & Licensing: ",
|
TITLE: "(2)IoT Hardware Sales & Licensing: ",
|
||||||
CONTENT:
|
CONTENT:
|
||||||
"•IoT products and technologies, including developing VR/AR online sharing technologies",
|
"IoT products and technologies, including developing VR/AR online sharing technologies",
|
||||||
CONTENTTWO: "•IoT data collection, analysis and management",
|
CONTENTTWO: "IoT data collection, analysis and management",
|
||||||
},
|
},
|
||||||
THREE: {
|
THREE: {
|
||||||
TITLE: "(3)SAAS Solutions",
|
TITLE: "(3)SAAS Solutions",
|
||||||
CONTENT: "•Internet sales and IoT support",
|
CONTENT: "Internet sales and IoT support",
|
||||||
CONTENTTWO: "•KOL branding services",
|
CONTENTTWO: "KOL branding services",
|
||||||
CONTENTTHREE:
|
CONTENTTHREE:
|
||||||
"•AI-enabled content creation and fans habit analysis solutions",
|
"AI-enabled content creation and fans habit analysis solutions",
|
||||||
},
|
},
|
||||||
FOUR: {
|
FOUR: {
|
||||||
TITLE: "(4)Professional To-C and To-B Services & Support",
|
TITLE: "(4)Professional To-C and To-B Services & Support",
|
||||||
CONTENT:
|
CONTENT:
|
||||||
"•Managed-service agreements with ISPs and enterprise customers for network-support, security monitoring, and custom development",
|
"Managed-service agreements with ISPs and enterprise customers for network-support, security monitoring, and custom development",
|
||||||
CONTENTTWO: "•KOL branding services",
|
CONTENTTWO: "KOL branding services",
|
||||||
CONTENTTHREE:
|
CONTENTTHREE:
|
||||||
"•AI-enabled content creation and fans habit analysis solutions",
|
"AI-enabled content creation and fans habit analysis solutions",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -708,20 +707,21 @@ export default {
|
|||||||
// 管理
|
// 管理
|
||||||
MANAGEMENT: {
|
MANAGEMENT: {
|
||||||
ONE: {
|
ONE: {
|
||||||
TITLE: "Wai Chung LI",
|
TITLE: "Wai Chung Li",
|
||||||
TITLETWO: "Chief Executive Officer and President",
|
TITLETWO: "Chief Executive Officer",
|
||||||
CONTENT:
|
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. ",
|
"Mr. Li is the Chief Executive Officer, Mr. Li has 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 our team.",
|
||||||
CONTENTTWO: "",
|
CONTENTTWO:
|
||||||
|
"He served as chair of the 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 publicly listed companies.",
|
||||||
CONTENTTHREE: "",
|
CONTENTTHREE: "",
|
||||||
},
|
},
|
||||||
TWO: {
|
TWO: {
|
||||||
TITLE: "Cao Yu",
|
TITLE: "Cao Yu",
|
||||||
TITLETWO: "Chief Financial Officer, Secretary, Treasurer and Director",
|
TITLETWO: "Chief Financial Officer, Secretary, Treasurer and Director",
|
||||||
CONTENTONE:
|
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.",
|
"Ms. Cao is our Chief Financial Officer, Secretary, Treasurer and Director, Ms. Cao has a wealth of experience in financial management. She oversees financial operations, strategic planning, risk management, and reporting to ensure our financial health and compliance with regulations.",
|
||||||
CONTENTTWO:
|
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.",
|
"Ms. Cao was previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversaw 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.",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { createGlobalState, useLocalStorage } from '@vueuse/core'
|
import { createGlobalState, useLocalStorage } from '@vueuse/core'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import utc from 'dayjs/plugin/utc'
|
||||||
|
import timezone from 'dayjs/plugin/timezone'
|
||||||
|
|
||||||
export const useStockQuote = createGlobalState(() => {
|
export const useStockQuote = createGlobalState(() => {
|
||||||
const stockQuote = useLocalStorage('stockQuote', {
|
const stockQuote = useLocalStorage('stockQuote', {
|
||||||
@ -26,9 +29,45 @@ const options = {
|
|||||||
timeZoneName: 'short'
|
timeZoneName: 'short'
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatted = ref(date.toLocaleString('en-US', options))
|
dayjs.extend(utc)
|
||||||
|
dayjs.extend(timezone)
|
||||||
|
/*
|
||||||
|
美股的常规发行日（交易日）为周一至周五，遇到法定假日则顺延。
|
||||||
|
如果你只需要“上一个交易日”（不考虑法定假日）的情况下
|
||||||
|
获取当前美东时间。
|
||||||
|
如果今天是周一，则上一个交易日为上周五。
|
||||||
|
如果今天是周日，则上一个交易日为上周五。
|
||||||
|
如果今天是周六，则上一个交易日为周五。
|
||||||
|
其他情况，上一个交易日为昨天。
|
||||||
|
*/
|
||||||
|
const getLastTradingDay = () => {
|
||||||
|
const now = dayjs().tz('America/New_York')
|
||||||
|
let lastTradingDay
|
||||||
|
const dayOfWeek = now.day() // 0:周日, 1:周一, ..., 5:周五, 6:周六
|
||||||
|
const isBeforeClose = now.hour() < 16 || (now.hour() === 16 && now.minute() === 0 && now.second() === 0)
|
||||||
|
|
||||||
|
if (dayOfWeek === 0) { // 周日
|
||||||
|
// 返回本周五16:00
|
||||||
|
lastTradingDay = now.day(-2).hour(16).minute(0).second(0).millisecond(0)
|
||||||
|
} else if (dayOfWeek === 6) { // 周六
|
||||||
|
// 返回本周五16:00
|
||||||
|
lastTradingDay = now.day(-1).hour(16).minute(0).second(0).millisecond(0)
|
||||||
|
} else if (dayOfWeek === 1 && isBeforeClose) { // 周一16:00前
|
||||||
|
// 返回上周五16:00
|
||||||
|
lastTradingDay = now.day(-2).hour(16).minute(0).second(0).millisecond(0)
|
||||||
|
} else if (isBeforeClose) { // 工作日16:00前
|
||||||
|
// 返回前一天16:00
|
||||||
|
lastTradingDay = now.subtract(1, 'day').hour(16).minute(0).second(0).millisecond(0)
|
||||||
|
} else {
|
||||||
|
// 工作日16:00后，返回今天16:00
|
||||||
|
lastTradingDay = now.hour(16).minute(0).second(0).millisecond(0)
|
||||||
|
}
|
||||||
|
return lastTradingDay.format('MMM D, YYYY, h:mm A [EDT]')
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatted = ref(getLastTradingDay())
|
||||||
const getStockQuate= async()=>{
|
const getStockQuate= async()=>{
|
||||||
const res = await axios.get('https://saas-test.szjixun.cn/api/chart/forward/test')
|
const res = await axios.get('https://saas-test.szjixun.cn/api/fiee/chart/forward/test')
|
||||||
stockQuote.value=res.data
|
stockQuote.value=res.data
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -4,118 +4,52 @@
|
|||||||
<!-- 渐变背景标题区 - 增加层次感 -->
|
<!-- 渐变背景标题区 - 增加层次感 -->
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="title-wrapper">
|
<h1 style="font-size: 40px" class="hero-title">
|
||||||
<h1 class="hero-title">
|
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
<div style="font-size: 18px" class="hero-description">
|
||||||
<div class="hero-description">
|
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 业务核心解决方案 -->
|
<!-- 业务核心解决方案 -->
|
||||||
<main class="container">
|
<main style="margin-top: 40px" class="container">
|
||||||
<section>
|
<section>
|
||||||
<h1 class="hero-title">
|
<h1 class="hero-title" style="font-size: 22px">
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||||
</h1>
|
</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 解决方案网格 - 响应式弹性布局 -->
|
|
||||||
<div class="solution-grid">
|
<div class="solution-grid">
|
||||||
<!-- 主推解决方案组 -->
|
<!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
|
||||||
<div class="solution-group">
|
<div
|
||||||
<div class="featured-solution">
|
v-for="(solution, sIndex) in solutions"
|
||||||
<div class="solution-card" :style="{ '--delay': '0s' }">
|
:key="sIndex"
|
||||||
<div class="card-header">
|
class="featured-solution"
|
||||||
<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="featured-solution">
|
|
||||||
<div class="solution-card" :style="{ '--delay': '0.2s' }">
|
|
||||||
<div class="card-header">
|
|
||||||
<div class="decorative-line"></div>
|
|
||||||
<h2 class="card-title">{{ solutions[1].title }}</h2>
|
|
||||||
</div>
|
|
||||||
<ul class="card-content">
|
|
||||||
<li
|
|
||||||
v-for="(point, pIndex) in solutions[1].points"
|
|
||||||
:key="pIndex"
|
|
||||||
class="content-point"
|
|
||||||
>
|
|
||||||
<div class="point-icon">➤</div>
|
|
||||||
<div class="point-text">{{ point }}</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 次推解决方案组 -->
|
|
||||||
<div class="solution-group">
|
|
||||||
<div class="featured-solution">
|
|
||||||
<div
|
<div
|
||||||
class="solution-card"
|
class="solution-card"
|
||||||
style="height: auto"
|
:style="{ '--delay': `${sIndex * 0.2}s` }"
|
||||||
:style="{ '--delay': '0.4s' }"
|
|
||||||
>
|
>
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="decorative-line"></div>
|
<div class="decorative-line"></div>
|
||||||
<h2 class="card-title">{{ solutions[2].title }}</h2>
|
<h2 class="card-title">{{ solution.title }}</h2>
|
||||||
</div>
|
</div>
|
||||||
<ul class="card-content">
|
<ul class="card-content">
|
||||||
<li
|
<li
|
||||||
v-for="(point, pIndex) in solutions[2].points"
|
v-for="(point, pIndex) in solution.points"
|
||||||
:key="pIndex"
|
:key="pIndex"
|
||||||
class="content-point"
|
class="content-point"
|
||||||
>
|
>
|
||||||
<div class="point-icon">➤</div>
|
<div class="point-icon">•</div>
|
||||||
<div class="point-text">{{ point }}</div>
|
<div style="font-size: 18px" class="point-text">
|
||||||
</li>
|
{{ point }}
|
||||||
<li style="padding-bottom: 105px"></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="featured-solution">
|
|
||||||
<div
|
|
||||||
class="solution-card"
|
|
||||||
style="height: auto"
|
|
||||||
:style="{ '--delay': '0.6s' }"
|
|
||||||
>
|
|
||||||
<div class="card-header">
|
|
||||||
<div class="decorative-line"></div>
|
|
||||||
<h2 class="card-title">{{ solutions[3].title }}</h2>
|
|
||||||
</div>
|
|
||||||
<ul class="card-content">
|
|
||||||
<li
|
|
||||||
v-for="(point, pIndex) in solutions[3].points"
|
|
||||||
:key="pIndex"
|
|
||||||
class="content-point"
|
|
||||||
>
|
|
||||||
<div class="point-icon">➤</div>
|
|
||||||
<div class="point-text">{{ point }}</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -163,34 +97,10 @@ const solutions = computed(() => [
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 基础样式 */
|
/* 基础样式 */
|
||||||
.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 {
|
.hero-title {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
color: #2c3e50;
|
color: black;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
animation: slideIn 1s ease;
|
animation: slideIn 1s ease;
|
||||||
}
|
}
|
||||||
@ -199,7 +109,7 @@ const solutions = computed(() => [
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
color: #5a6d80;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@ -228,22 +138,12 @@ const solutions = computed(() => [
|
|||||||
/* 标题区 - 紫色渐变 */
|
/* 标题区 - 紫色渐变 */
|
||||||
.hero-section {
|
.hero-section {
|
||||||
background: var(--primary-gradient);
|
background: var(--primary-gradient);
|
||||||
padding: 10rem 0 8rem;
|
padding: 5rem 0 0rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: white;
|
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%;
|
|
||||||
}
|
|
||||||
.title-decoration {
|
.title-decoration {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -15px;
|
bottom: -15px;
|
||||||
@ -254,11 +154,6 @@ const solutions = computed(() => [
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 解决方案网格 */
|
|
||||||
.solution-grid {
|
|
||||||
padding: 6rem 0 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-group {
|
.solution-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -275,10 +170,7 @@ const solutions = computed(() => [
|
|||||||
|
|
||||||
.featured-solution {
|
.featured-solution {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
margin-top: 20px;
|
||||||
|
|
||||||
.solution-card {
|
|
||||||
height: 350px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -314,39 +206,15 @@ const solutions = computed(() => [
|
|||||||
|
|
||||||
/* 卡片公共样式 */
|
/* 卡片公共样式 */
|
||||||
.solution-card {
|
.solution-card {
|
||||||
background: white;
|
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
|
|
||||||
transform: translateY(20px);
|
transform: translateY(20px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation: cardEnter 0.6s ease forwards;
|
animation: cardEnter 0.6s ease forwards;
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid rgba(137, 91, 255, 0.2);
|
border: 1px solid rgba(137, 91, 255, 0.2);
|
||||||
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
|
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
@ -377,7 +245,7 @@ const solutions = computed(() => [
|
|||||||
}
|
}
|
||||||
|
|
||||||
.point-icon {
|
.point-icon {
|
||||||
color: var(--primary-color);
|
color: #4a3a6b;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
@ -385,7 +253,7 @@ const solutions = computed(() => [
|
|||||||
.point-text {
|
.point-text {
|
||||||
color: #4a3a6b;
|
color: #4a3a6b;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-size: 1rem;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes cardEnter {
|
@keyframes cardEnter {
|
||||||
|
|||||||
@ -4,118 +4,52 @@
|
|||||||
<!-- 渐变背景标题区 - 增加层次感 -->
|
<!-- 渐变背景标题区 - 增加层次感 -->
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="title-wrapper">
|
<h2 class="hero-title">
|
||||||
<h1 class="hero-title">
|
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||||
</h1>
|
</h2>
|
||||||
</div>
|
<div style="font-size: 18px" class="hero-description">
|
||||||
<div class="hero-description">
|
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 业务核心解决方案 -->
|
<!-- 业务核心解决方案 -->
|
||||||
<main class="container">
|
<main style="margin-top: 40px" class="container">
|
||||||
<section>
|
<section>
|
||||||
<h1 class="hero-title">
|
<h1 style="font-size: 30px" class="hero-title">
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||||
</h1>
|
</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 解决方案网格 - 响应式弹性布局 -->
|
|
||||||
<div class="solution-grid">
|
<div class="solution-grid">
|
||||||
<!-- 主推解决方案组 -->
|
<!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
|
||||||
<div class="solution-group">
|
<div
|
||||||
<div class="featured-solution">
|
v-for="(solution, sIndex) in solutions"
|
||||||
<div class="solution-card" :style="{ '--delay': '0s' }">
|
:key="sIndex"
|
||||||
<div class="card-header">
|
class="featured-solution"
|
||||||
<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="featured-solution">
|
|
||||||
<div class="solution-card" :style="{ '--delay': '0.2s' }">
|
|
||||||
<div class="card-header">
|
|
||||||
<div class="decorative-line"></div>
|
|
||||||
<h2 class="card-title">{{ solutions[1].title }}</h2>
|
|
||||||
</div>
|
|
||||||
<ul class="card-content">
|
|
||||||
<li
|
|
||||||
v-for="(point, pIndex) in solutions[1].points"
|
|
||||||
:key="pIndex"
|
|
||||||
class="content-point"
|
|
||||||
>
|
|
||||||
<div class="point-icon">➤</div>
|
|
||||||
<div class="point-text">{{ point }}</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 次推解决方案组 -->
|
|
||||||
<div class="solution-group">
|
|
||||||
<div class="featured-solution">
|
|
||||||
<div
|
<div
|
||||||
class="solution-card"
|
class="solution-card"
|
||||||
style="height: auto"
|
:style="{ '--delay': `${sIndex * 0.2}s` }"
|
||||||
:style="{ '--delay': '0.4s' }"
|
|
||||||
>
|
>
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="decorative-line"></div>
|
<div class="decorative-line"></div>
|
||||||
<h2 class="card-title">{{ solutions[2].title }}</h2>
|
<h2 class="card-title">{{ solution.title }}</h2>
|
||||||
</div>
|
</div>
|
||||||
<ul class="card-content">
|
<ul class="card-content">
|
||||||
<li
|
<li
|
||||||
v-for="(point, pIndex) in solutions[2].points"
|
v-for="(point, pIndex) in solution.points"
|
||||||
:key="pIndex"
|
:key="pIndex"
|
||||||
class="content-point"
|
class="content-point"
|
||||||
>
|
>
|
||||||
<div class="point-icon">➤</div>
|
<div class="point-icon">•</div>
|
||||||
<div class="point-text">{{ point }}</div>
|
<div style="font-size: 18px" class="point-text">
|
||||||
</li>
|
{{ point }}
|
||||||
<li style="padding-bottom: 45px"></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="featured-solution">
|
|
||||||
<div
|
|
||||||
class="solution-card"
|
|
||||||
style="height: auto"
|
|
||||||
:style="{ '--delay': '0.6s' }"
|
|
||||||
>
|
|
||||||
<div class="card-header">
|
|
||||||
<div class="decorative-line"></div>
|
|
||||||
<h2 class="card-title">{{ solutions[3].title }}</h2>
|
|
||||||
</div>
|
|
||||||
<ul class="card-content">
|
|
||||||
<li
|
|
||||||
v-for="(point, pIndex) in solutions[3].points"
|
|
||||||
:key="pIndex"
|
|
||||||
class="content-point"
|
|
||||||
>
|
|
||||||
<div class="point-icon">➤</div>
|
|
||||||
<div class="point-text">{{ point }}</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -163,34 +97,10 @@ const solutions = computed(() => [
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 基础样式 */
|
/* 基础样式 */
|
||||||
.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 {
|
.hero-title {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
color: #2c3e50;
|
color: black;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
animation: slideIn 1s ease;
|
animation: slideIn 1s ease;
|
||||||
}
|
}
|
||||||
@ -199,7 +109,7 @@ const solutions = computed(() => [
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
color: #5a6d80;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@ -228,22 +138,12 @@ const solutions = computed(() => [
|
|||||||
/* 标题区 - 紫色渐变 */
|
/* 标题区 - 紫色渐变 */
|
||||||
.hero-section {
|
.hero-section {
|
||||||
background: var(--primary-gradient);
|
background: var(--primary-gradient);
|
||||||
padding: 10rem 0 8rem;
|
padding: 5rem 0 0rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: white;
|
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%;
|
|
||||||
}
|
|
||||||
.title-decoration {
|
.title-decoration {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -15px;
|
bottom: -15px;
|
||||||
@ -254,11 +154,6 @@ const solutions = computed(() => [
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 解决方案网格 */
|
|
||||||
.solution-grid {
|
|
||||||
padding: 6rem 0 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-group {
|
.solution-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -275,10 +170,7 @@ const solutions = computed(() => [
|
|||||||
|
|
||||||
.featured-solution {
|
.featured-solution {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
margin-top: 20px;
|
||||||
|
|
||||||
.solution-card {
|
|
||||||
height: 350px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -314,39 +206,15 @@ const solutions = computed(() => [
|
|||||||
|
|
||||||
/* 卡片公共样式 */
|
/* 卡片公共样式 */
|
||||||
.solution-card {
|
.solution-card {
|
||||||
background: white;
|
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
|
|
||||||
transform: translateY(20px);
|
transform: translateY(20px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation: cardEnter 0.6s ease forwards;
|
animation: cardEnter 0.6s ease forwards;
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid rgba(137, 91, 255, 0.2);
|
border: 1px solid rgba(137, 91, 255, 0.2);
|
||||||
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
|
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
@ -377,7 +245,7 @@ const solutions = computed(() => [
|
|||||||
}
|
}
|
||||||
|
|
||||||
.point-icon {
|
.point-icon {
|
||||||
color: var(--primary-color);
|
color: #4a3a6b;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
@ -385,7 +253,7 @@ const solutions = computed(() => [
|
|||||||
.point-text {
|
.point-text {
|
||||||
color: #4a3a6b;
|
color: #4a3a6b;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-size: 1rem;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes cardEnter {
|
@keyframes cardEnter {
|
||||||
|
|||||||
@ -1,121 +1,56 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<div class="business-page">
|
<div class="business-page">
|
||||||
<!-- 渐变背景标题区 - 增加层次感 -->
|
<!-- 渐变背景标题区 -->
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="title-wrapper">
|
<h1 style="font-size: 40px" class="hero-title">
|
||||||
<h1 class="hero-title">
|
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
<div style="font-size: 18px" class="hero-description">
|
||||||
<div class="hero-description">
|
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 业务核心解决方案 -->
|
<!-- 业务核心解决方案 -->
|
||||||
<main class="container">
|
<main style="margin-top: 40px" class="container">
|
||||||
<section>
|
<section>
|
||||||
<h1 class="hero-title">
|
<h1 style="font-size: 40px" class="hero-title">
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||||
</h1>
|
</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 解决方案网格 - 响应式弹性布局 -->
|
<!-- 解决方案网格 - 响应式弹性布局 -->
|
||||||
<div class="solution-grid">
|
<div class="solution-grid">
|
||||||
<!-- 主推解决方案组 -->
|
<!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
|
||||||
<div class="solution-group">
|
<div
|
||||||
<div class="featured-solution">
|
v-for="(solution, sIndex) in solutions"
|
||||||
<div class="solution-card" :style="{ '--delay': '0s' }">
|
:key="sIndex"
|
||||||
<div class="card-header">
|
class="featured-solution"
|
||||||
<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="featured-solution">
|
|
||||||
<div class="solution-card" :style="{ '--delay': '0.2s' }">
|
|
||||||
<div class="card-header">
|
|
||||||
<div class="decorative-line"></div>
|
|
||||||
<h2 class="card-title">{{ solutions[1].title }}</h2>
|
|
||||||
</div>
|
|
||||||
<ul class="card-content">
|
|
||||||
<li
|
|
||||||
v-for="(point, pIndex) in solutions[1].points"
|
|
||||||
:key="pIndex"
|
|
||||||
class="content-point"
|
|
||||||
>
|
|
||||||
<div class="point-icon">➤</div>
|
|
||||||
<div class="point-text">{{ point }}</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 次推解决方案组 -->
|
|
||||||
<div class="solution-group">
|
|
||||||
<div class="featured-solution">
|
|
||||||
<div
|
<div
|
||||||
class="solution-card"
|
class="solution-card"
|
||||||
style="height: auto"
|
:style="{ '--delay': `${sIndex * 0.2}s` }"
|
||||||
:style="{ '--delay': '0.4s' }"
|
|
||||||
>
|
>
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="decorative-line"></div>
|
<div class="decorative-line"></div>
|
||||||
<h2 class="card-title">{{ solutions[2].title }}</h2>
|
<h2 class="card-title">{{ solution.title }}</h2>
|
||||||
</div>
|
</div>
|
||||||
<ul class="card-content">
|
<ul class="card-content">
|
||||||
<li
|
<li
|
||||||
v-for="(point, pIndex) in solutions[2].points"
|
v-for="(point, pIndex) in solution.points"
|
||||||
:key="pIndex"
|
:key="pIndex"
|
||||||
class="content-point"
|
class="content-point"
|
||||||
>
|
>
|
||||||
<div class="point-icon">➤</div>
|
<div class="point-icon">•</div>
|
||||||
<div class="point-text">{{ point }}</div>
|
<div style="font-size: 18px" class="point-text">
|
||||||
</li>
|
{{ point }}
|
||||||
<li style="padding-bottom: 45px"></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="featured-solution">
|
|
||||||
<div
|
|
||||||
class="solution-card"
|
|
||||||
style="height: auto"
|
|
||||||
:style="{ '--delay': '0.6s' }"
|
|
||||||
>
|
|
||||||
<div class="card-header">
|
|
||||||
<div class="decorative-line"></div>
|
|
||||||
<h2 class="card-title">{{ solutions[3].title }}</h2>
|
|
||||||
</div>
|
|
||||||
<ul class="card-content">
|
|
||||||
<li
|
|
||||||
v-for="(point, pIndex) in solutions[3].points"
|
|
||||||
:key="pIndex"
|
|
||||||
class="content-point"
|
|
||||||
>
|
|
||||||
<div class="point-icon">➤</div>
|
|
||||||
<div class="point-text">{{ point }}</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -162,34 +97,23 @@ const solutions = computed(() => [
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 基础样式 */
|
|
||||||
.container {
|
.container {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 标题区样式 */
|
/* 标题区 - 紫色渐变 */
|
||||||
.hero-section {
|
.hero-section {
|
||||||
background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
|
background: var(--primary-gradient);
|
||||||
padding: 8rem 0 6rem;
|
padding: 5rem 0 0rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
color: white;
|
||||||
|
|
||||||
.hero-section::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
bottom: -50px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
background: white;
|
|
||||||
transform: skewY(-3deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-title {
|
.hero-title {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
color: #2c3e50;
|
color: black;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
animation: slideIn 1s ease;
|
animation: slideIn 1s ease;
|
||||||
}
|
}
|
||||||
@ -198,7 +122,7 @@ const solutions = computed(() => [
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
color: #5a6d80;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@ -211,6 +135,7 @@ const solutions = computed(() => [
|
|||||||
var(--primary-color) 100%
|
var(--primary-color) 100%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-page {
|
.home-page {
|
||||||
background-image: url("@/assets/image/bg-mobile.png");
|
background-image: url("@/assets/image/bg-mobile.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
@ -218,99 +143,29 @@ const solutions = computed(() => [
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
/* 解决方案网格 - 响应式布局 */
|
||||||
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%;
|
|
||||||
}
|
|
||||||
.title-decoration {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -15px;
|
|
||||||
left: 0;
|
|
||||||
width: 80%;
|
|
||||||
height: 4px;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 解决方案网格 */
|
|
||||||
.solution-grid {
|
.solution-grid {
|
||||||
padding: 6rem 0 4rem;
|
padding: 0rem 0 4rem;
|
||||||
}
|
display: grid;
|
||||||
|
grid-template-columns: 1fr; /* 默认单列（移动端） */
|
||||||
.solution-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 桌面端布局（>=768px） */
|
/* 中等屏幕（768px-1439px） - 单列布局 */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) and (max-width: 1439px) {
|
||||||
.solution-group {
|
.solution-grid {
|
||||||
flex-direction: row;
|
grid-template-columns: 1fr;
|
||||||
gap: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-solution {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card {
|
|
||||||
height: 350px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端布局（<768px） */
|
/* 大屏幕（≥1440px） - 双列布局 */
|
||||||
@media (max-width: 767px) {
|
@media (min-width: 1440px) {
|
||||||
.home-page {
|
.solution-grid {
|
||||||
background-image: url("@/assets/image/bg-mobile.png");
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-group {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featured-solution {
|
|
||||||
width: 100% !important; /* 强制占满容器 */
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-card {
|
|
||||||
padding: 2rem;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-point {
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片公共样式 */
|
/* 卡片样式 */
|
||||||
.solution-card {
|
.solution-card {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
@ -322,22 +177,17 @@ const solutions = computed(() => [
|
|||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid rgba(137, 91, 255, 0.2);
|
border: 1px solid rgba(137, 91, 255, 0.2);
|
||||||
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.solution-card::after {
|
.solution-card::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 4px;
|
||||||
background: linear-gradient(
|
background: var(--primary-gradient);
|
||||||
135deg,
|
|
||||||
rgba(137, 91, 255, 0.03) 0%,
|
|
||||||
rgba(137, 91, 255, 0) 100%
|
|
||||||
);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.solution-card:hover {
|
.solution-card:hover {
|
||||||
@ -355,6 +205,7 @@ const solutions = computed(() => [
|
|||||||
background: var(--primary-gradient);
|
background: var(--primary-gradient);
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.solution-card:hover .decorative-line {
|
.solution-card:hover .decorative-line {
|
||||||
@ -374,8 +225,12 @@ const solutions = computed(() => [
|
|||||||
border-bottom: 1px solid rgba(137, 91, 255, 0.1);
|
border-bottom: 1px solid rgba(137, 91, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content-point:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
.point-icon {
|
.point-icon {
|
||||||
color: var(--primary-color);
|
color: #4a3a6b;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,21 +4,18 @@
|
|||||||
<!-- 渐变背景标题区 -->
|
<!-- 渐变背景标题区 -->
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="title-wrapper">
|
<h1 style="font-size: 40px" class="hero-title">
|
||||||
<h1 class="hero-title">
|
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
<div style="font-size: 18px" class="hero-description">
|
||||||
<div class="hero-description">
|
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 业务核心解决方案 -->
|
<!-- 业务核心解决方案 -->
|
||||||
<main class="container">
|
<main style="margin-top: 40px" class="container">
|
||||||
<section>
|
<section>
|
||||||
<h1 class="hero-title">
|
<h1 style="font-size: 40px" class="hero-title">
|
||||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||||
</h1>
|
</h1>
|
||||||
</section>
|
</section>
|
||||||
@ -45,8 +42,10 @@
|
|||||||
:key="pIndex"
|
:key="pIndex"
|
||||||
class="content-point"
|
class="content-point"
|
||||||
>
|
>
|
||||||
<div class="point-icon">➤</div>
|
<div class="point-icon">•</div>
|
||||||
<div class="point-text">{{ point }}</div>
|
<div style="font-size: 18px" class="point-text">
|
||||||
|
{{ point }}
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -98,56 +97,33 @@ const solutions = computed(() => [
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 基础样式 */
|
|
||||||
.container {
|
.container {
|
||||||
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
max-width: 1600px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 标题区样式 */
|
/* 标题区 - 紫色渐变 */
|
||||||
.hero-section {
|
.hero-section {
|
||||||
background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
|
background: var(--primary-gradient);
|
||||||
padding: 8rem 0 6rem;
|
padding: 5rem 0 0rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
color: white;
|
||||||
|
|
||||||
.hero-section::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
bottom: -50px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
background: white;
|
|
||||||
transform: skewY(-3deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-title {
|
.hero-title {
|
||||||
font-size: 2.5rem;
|
font-size: 40px;
|
||||||
color: #2c3e50;
|
color: black;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
position: relative;
|
animation: slideIn 1s ease;
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
bottom: -10px;
|
|
||||||
left: 0;
|
|
||||||
width: 80px;
|
|
||||||
height: 4px;
|
|
||||||
background: linear-gradient(135deg, #895bff 0%, #6a11cb 100%);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-description {
|
.hero-description {
|
||||||
max-width: 1000px;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
color: #5a6d80;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@ -170,7 +146,7 @@ const solutions = computed(() => [
|
|||||||
|
|
||||||
/* 解决方案网格 - 响应式布局 */
|
/* 解决方案网格 - 响应式布局 */
|
||||||
.solution-grid {
|
.solution-grid {
|
||||||
padding: 6rem 0;
|
padding: 0rem 0 4rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr; /* 默认单列（移动端） */
|
grid-template-columns: 1fr; /* 默认单列（移动端） */
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
@ -255,7 +231,7 @@ const solutions = computed(() => [
|
|||||||
}
|
}
|
||||||
|
|
||||||
.point-icon {
|
.point-icon {
|
||||||
color: var(--primary-color);
|
color: #4a3a6b;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,11 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="committees-page">
|
<div class="committees-page">
|
||||||
<!-- 标题区 -->
|
<!-- 标题区 -->
|
||||||
<section class="hero-section">
|
|
||||||
<div class="container">
|
<div class="title mb-[50px] text-center">
|
||||||
<h1 style="font-size: 40px">Committee Composition</h1>
|
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 委员会表格 -->
|
<!-- 委员会表格 -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -35,7 +34,11 @@
|
|||||||
<div class="director-info">
|
<div class="director-info">
|
||||||
<div class="avatar"></div>
|
<div class="avatar"></div>
|
||||||
<div>
|
<div>
|
||||||
<router-link :to="'/boarddirectors'" class="director-link">
|
<router-link
|
||||||
|
:to="'/boarddirectors'"
|
||||||
|
style="font-size: 18px"
|
||||||
|
class="director-link"
|
||||||
|
>
|
||||||
{{ director.name }}
|
{{ director.name }}
|
||||||
</router-link>
|
</router-link>
|
||||||
<!-- <p class="director-title">{{ director.title }}</p> -->
|
<!-- <p class="director-title">{{ director.title }}</p> -->
|
||||||
@ -136,6 +139,26 @@ const getCommitteeRole = (name, committee) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.title h1 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
/* 紫色主题变量 */
|
/* 紫色主题变量 */
|
||||||
:root {
|
:root {
|
||||||
--primary: #895bff;
|
--primary: #895bff;
|
||||||
|
|||||||
@ -1,11 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="committees-page">
|
<div class="committees-page">
|
||||||
<!-- 标题区 -->
|
<!-- 标题区 -->
|
||||||
<section class="hero-section">
|
|
||||||
<div class="container">
|
<div class="title mb-[50px] text-center">
|
||||||
<h1 style="font-size: 40px">Committee Composition</h1>
|
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 委员会表格 -->
|
<!-- 委员会表格 -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -35,7 +34,11 @@
|
|||||||
<div class="director-info">
|
<div class="director-info">
|
||||||
<div class="avatar"></div>
|
<div class="avatar"></div>
|
||||||
<div>
|
<div>
|
||||||
<router-link :to="'/boarddirectors'" class="director-link">
|
<router-link
|
||||||
|
:to="'/boarddirectors'"
|
||||||
|
style="font-size: 18px"
|
||||||
|
class="director-link"
|
||||||
|
>
|
||||||
{{ director.name }}
|
{{ director.name }}
|
||||||
</router-link>
|
</router-link>
|
||||||
<!-- <p class="director-title">{{ director.title }}</p> -->
|
<!-- <p class="director-title">{{ director.title }}</p> -->
|
||||||
@ -151,7 +154,26 @@ const getCommitteeRole = (name, committee) => {
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
.title h1 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
/* 标题区设计 */
|
/* 标题区设计 */
|
||||||
.hero-section {
|
.hero-section {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
|
|||||||
@ -1,12 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="board-members-page">
|
<div class="board-members-page">
|
||||||
<!-- 页面头部 -->
|
<!-- 页面头部 -->
|
||||||
<section class="hero-section">
|
<div class="title mb-[50px] text-center">
|
||||||
<div class="container">
|
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||||
<h1 class="page-title">Committee Composition</h1>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 移动端视图 -->
|
<!-- 移动端视图 -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div
|
||||||
@ -128,6 +125,26 @@ const getInitials = (name) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.title h1 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
/* 基础变量 */
|
/* 基础变量 */
|
||||||
:root {
|
:root {
|
||||||
--primary: #895bff;
|
--primary: #895bff;
|
||||||
|
|||||||
@ -1,12 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="board-members-page">
|
<div class="board-members-page">
|
||||||
<!-- 页面头部 -->
|
<!-- 页面头部 -->
|
||||||
<section class="hero-section">
|
<div class="title mb-[50px] text-center">
|
||||||
<div class="container">
|
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||||
<h1 class="page-title">Committee Composition</h1>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 移动端视图 -->
|
<!-- 移动端视图 -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div
|
||||||
@ -128,6 +125,26 @@ const getInitials = (name) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.title h1 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
/* 基础变量 */
|
/* 基础变量 */
|
||||||
:root {
|
:root {
|
||||||
--primary: #895bff;
|
--primary: #895bff;
|
||||||
|
|||||||
@ -1,22 +1,132 @@
|
|||||||
<script setup>
|
|
||||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
|
||||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header className="header">
|
<div class="home-page">
|
||||||
1440
|
<div class="directors-page">
|
||||||
</header>
|
<h1 class="page-title">Board of Directors</h1>
|
||||||
<main ref="main">
|
<n-divider />
|
||||||
|
|
||||||
</main>
|
<div class="directors-list">
|
||||||
<footer>
|
<div
|
||||||
|
v-for="(director, index) in otherDirectors"
|
||||||
</footer>
|
:key="index"
|
||||||
|
class="director-item"
|
||||||
|
>
|
||||||
|
<n-h2 class="director-name">{{ director.name }}</n-h2>
|
||||||
|
<n-text class="director-title">{{ director.title }}</n-text>
|
||||||
|
<n-divider class="divider" />
|
||||||
|
<!-- <n-p class="director-bio">{{ director.contain }}</n-p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<script setup>
|
||||||
|
const otherDirectors = [
|
||||||
|
{
|
||||||
|
name: "Cao Yu",
|
||||||
|
title: "Chief Financial Officer, Secretary, Treasurer and Director",
|
||||||
|
contain:
|
||||||
|
"Cao Yu, age 34, previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters fromNovember 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 toOctober 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida PlasticProfile Products Co., Ltd.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "David Lazar",
|
||||||
|
title: "Director",
|
||||||
|
contain:
|
||||||
|
"David E. Lazar, age 34, has served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of TitanPharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman fromAugust 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed publiccompanies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018.Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his roleas Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a widerange of industries.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Hu Bin",
|
||||||
|
title: "Director",
|
||||||
|
contain:
|
||||||
|
"Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "David Natan",
|
||||||
|
title: "Director",
|
||||||
|
contain:
|
||||||
|
"David Natan,age 72, currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financialofficer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company fromNovember 2023 to February 2025. From February 2010 to May 2020, Mr. Natan served as Chief Executive Officer of ForceField Energy, Inc.(OTCMKTS: FNRG), a company focused on the solar industry and LED lighting products. From February 2002 to November 2007, Mr. Natan served asExecutive Vice President of Reporting and Chief Financial Officer of PharmaNet Development Group, Inc., a drug development services company, and,from June 1995 to February 2002, as Chief Financial Officer and Vice President of Global Technovations, Inc., a manufacturer and marketer of oil analysisinstruments and speakers and speaker components. Prior to that, Mr. Natan served in various roles of increasing responsibility with Deloitte & Touche LLP,a global consulting firm. Mr. Natan currently serves as a member of the Board of Directors and Chair of the Audit Committee of Sunshine Biopharma, Inc.(Nasdaq: SBFM), a pharmaceutical and nutritional supplement company, since February 2022. Previously, Mr. Natan has served as a director for thefollowing public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrandsCorp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Chan Oi Fat",
|
||||||
|
title: "Director",
|
||||||
|
contain:
|
||||||
|
"Chan Oi Fat, age 46, has served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China LeonInspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) sinceNovember 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoTHolding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower InternationalHolding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) fromJune 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of theAssociation of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.home-page {
|
||||||
|
background-image: url("@/assets/image/bg.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.directors-page {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 60px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 2.5rem; /* 18px */
|
||||||
|
margin-bottom: 30px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.directors-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 48px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-item {
|
||||||
|
padding-bottom: 48px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-name {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-title {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 16px 0;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-bio {
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #4a4a4a;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.directors-page {
|
||||||
|
padding: 80px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-name {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-title {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<div class="directors-page">
|
<div class="directors-page">
|
||||||
<n-h1 class="page-title">Board of Directors</n-h1>
|
<h1 class="page-title">Board of Directors</h1>
|
||||||
<n-divider />
|
<n-divider />
|
||||||
|
|
||||||
<div class="directors-list">
|
<div class="directors-list">
|
||||||
|
|||||||
@ -1,7 +1,139 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<div class="directors-page">
|
<div class="directors-page">
|
||||||
<n-h1 class="page-title">Board of Directors</n-h1>
|
<template>
|
||||||
|
<div class="home-page">
|
||||||
|
<div class="directors-page">
|
||||||
|
<h1 class="page-title">Board of Directors</h1>
|
||||||
|
<n-divider />
|
||||||
|
|
||||||
|
<div class="directors-list">
|
||||||
|
<div
|
||||||
|
v-for="(director, index) in otherDirectors"
|
||||||
|
:key="index"
|
||||||
|
class="director-item"
|
||||||
|
>
|
||||||
|
<n-h2 class="director-name">{{ director.name }}</n-h2>
|
||||||
|
<n-text class="director-title">{{ director.title }}</n-text>
|
||||||
|
<n-divider class="divider" />
|
||||||
|
<!-- <n-p class="director-bio">{{ director.contain }}</n-p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const otherDirectors = [
|
||||||
|
{
|
||||||
|
name: "Cao Yu",
|
||||||
|
title: "Chief Financial Officer, Secretary, Treasurer and Director",
|
||||||
|
contain:
|
||||||
|
"Cao Yu, age 34, previously served as the treasury director of Taifeng Cultural Communication Co., Ltd where she oversees its financial matters fromNovember 2018 to November 2024. Prior to that, Ms. Cao served as a business manager of Yangfeng Art Exchange Co., Ltd from February 2016 toOctober 2018. From March 2011 to January 2016, she served as the treasury officer of financial department of Suzhou Industrial Park Xinfushida PlasticProfile Products Co., Ltd.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "David Lazar",
|
||||||
|
title: "Director",
|
||||||
|
contain:
|
||||||
|
"David E. Lazar, age 34, has served as the Chief Executive Officer of OpGen, Inc., a precision medicine company listed on the Nasdaq (OPGN) since April11, 2024, where he also servs as a director and board chairman, beginning on March 25, 2024. Mr. Lazar served as the Chief Executive Officer of TitanPharmaceuticals Inc. listed on the Nasdaq (TTNP) from August 2022 through April 11, 2024, where he also served as a director and board chairman fromAugust 2022 until October 2023. He has also served as the CEO of Custodian Ventures LLC, a company which specializes in assisting distressed publiccompanies through custodianship, since February 2018, and Activist Investing LLC, an actively managed private investment fund, since March 2018.Previously, Mr. Lazar served as Managing Partner at Zenith Partners International Inc., a boutique consulting firm, from July 2012 to April 2018. In his roleas Chief Eecutive Officer of Custodian Ventures LLC, Mr. Lazar has successfully served as a custodian to numerous public companies across a widerange of industries.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Hu Bin",
|
||||||
|
title: "Director",
|
||||||
|
contain:
|
||||||
|
"Hu Bin,age 55, has served as a director of DC International Service Trade GmbH since December 2024. Prior to that, Mr. Hu worked as a freelancer in thetourism industry from April 2001 to October 2024. From April 1994 to October 2000, he served as the general manager of Suzhou Wintime AdvertisingCo., Ltd. Before that, he served as the general manager of Suzhou Bauhaus Advertising Design Co., Ltd. from August 1992 to April 1994, where he wasengaged in computer-aided design and 3D computer animation production. Mr. Hu began his career at Suzhou Advertising Company in October 1989,where he worked as a designer responsible for graphic design, platemaking, printing, and interior decoration. Mr. Hu graduated from Suzhou Academy of Arts in 1989.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "David Natan",
|
||||||
|
title: "Director",
|
||||||
|
contain:
|
||||||
|
"David Natan,age 72, currently serves as President and Chief Executive Officer of Natan & Associates, LLC, a consulting firm offering chief financialofficer services to public and private companies in a variety of industries, since 2007. Mr. Natan previously served as a Director of the Company fromNovember 2023 to February 2025. From February 2010 to May 2020, Mr. Natan served as Chief Executive Officer of ForceField Energy, Inc.(OTCMKTS: FNRG), a company focused on the solar industry and LED lighting products. From February 2002 to November 2007, Mr. Natan served asExecutive Vice President of Reporting and Chief Financial Officer of PharmaNet Development Group, Inc., a drug development services company, and,from June 1995 to February 2002, as Chief Financial Officer and Vice President of Global Technovations, Inc., a manufacturer and marketer of oil analysisinstruments and speakers and speaker components. Prior to that, Mr. Natan served in various roles of increasing responsibility with Deloitte & Touche LLP,a global consulting firm. Mr. Natan currently serves as a member of the Board of Directors and Chair of the Audit Committee of Sunshine Biopharma, Inc.(Nasdaq: SBFM), a pharmaceutical and nutritional supplement company, since February 2022. Previously, Mr. Natan has served as a director for thefollowing public companies: Global Technovations, Forcefield Energy, Titan Pharmaceuticals (Nasdaq: TTNP), Vivakor Inc. (Nasdaq: VIVK), NetBrandsCorp. (OTC: NBND), and OpGen Inc. (OTC: OPGN), and Cyclacel Pharmaceuticals (Nasdaq: CYCC). Mr. Natan holds a B.A. in Economics from Boston University.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Chan Oi Fat",
|
||||||
|
title: "Director",
|
||||||
|
contain:
|
||||||
|
"Chan Oi Fat, age 46, has served as Vice President – Finance of SML Group Corporation since March 2018 and as Company Secretary of China LeonInspection Holding Limited (HKEX: 1586) since February 2018 and of Raily Aesthetic Medicine International Holdings Limited (HKEX: 2135) sinceNovember 2020. He is an independent non-executive director of Huajin International Holdings Limited (HKEX: 2738) (since March 2025) and UBoTHolding Limited (HKEX GEM: 8529) (since May 2024) and previously served as an independent non-executive director of China Saftower InternationalHolding Group Limited (HKEX GEM: 8623) from June 2020 to December 2023 and Shanghai Prime Machinery Company Limited (HKEX: 2345) fromJune 2014 to January 2021. Mr. Chan holds a B.B.A. (Hons) in Accountancy from the City University of Hong Kong (2000) and is a member of theAssociation of Chartered Certified Accountants (since 2003) and the Hong Kong Institute of Certified Public Accountants (since 2004).",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.home-page {
|
||||||
|
background-image: url("@/assets/image/bg.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.directors-page {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 60px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 2.5rem; /* 18px */
|
||||||
|
margin-bottom: 30px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.directors-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 48px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-item {
|
||||||
|
padding-bottom: 48px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-name {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-title {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 16px 0;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-bio {
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #4a4a4a;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.directors-page {
|
||||||
|
padding: 80px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-name {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.director-title {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<n-divider />
|
<n-divider />
|
||||||
|
|
||||||
<div class="directors-list">
|
<div class="directors-list">
|
||||||
|
|||||||
@ -1,26 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<div class="company-overview">
|
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 公司简介部分 -->
|
|
||||||
<!-- 公司概况 -->
|
<!-- 公司概况 -->
|
||||||
<section
|
<section
|
||||||
class="company-overview"
|
class="company-overview"
|
||||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
style="max-width: 1200px; margin: 60px auto"
|
||||||
>
|
>
|
||||||
<h2 class="section-title">
|
<h1 class="section-title">
|
||||||
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
||||||
</h2>
|
</h1>
|
||||||
<div class="content-block">
|
<div class="content-block">
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
<div style="font-size: 18px">
|
||||||
|
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
|
||||||
|
</div>
|
||||||
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
|
||||||
</div>
|
</div>
|
||||||
@ -28,21 +20,17 @@
|
|||||||
|
|
||||||
<!-- 使命愿景卡片 -->
|
<!-- 使命愿景卡片 -->
|
||||||
<section class="mission-section">
|
<section class="mission-section">
|
||||||
|
<h1 class="section-title">
|
||||||
|
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||||
|
</h1>
|
||||||
<div class="mission-cards">
|
<div class="mission-cards">
|
||||||
<n-card hoverable class="mission-card" v-motion-pop>
|
<n-card hoverable class="mission-card" v-motion-pop>
|
||||||
<n-h3 class="card-title">{{
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
|
||||||
}}</n-h3>
|
|
||||||
<n-p class="card-content">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</n-card>
|
<br />
|
||||||
|
|
||||||
<n-card hoverable class="mission-card" v-motion-pop>
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
<n-h3 class="card-title">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
|
||||||
}}</n-h3>
|
|
||||||
<n-p class="card-content">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</n-card>
|
</n-card>
|
||||||
@ -52,9 +40,9 @@
|
|||||||
<!-- 里程碑时间轴 -->
|
<!-- 里程碑时间轴 -->
|
||||||
<!-- 里程碑时间轴 -->
|
<!-- 里程碑时间轴 -->
|
||||||
<section class="section timeline-section">
|
<section class="section timeline-section">
|
||||||
<n-h2 class="section-title">{{
|
<h1 class="section-title">
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
|
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
|
||||||
}}</n-h2>
|
</h1>
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<!-- 1977-2015 -->
|
<!-- 1977-2015 -->
|
||||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||||
@ -64,12 +52,12 @@
|
|||||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -84,12 +72,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -104,12 +92,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -124,12 +112,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -144,27 +132,27 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -172,16 +160,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 成就部分 -->
|
<section class="mission-section">
|
||||||
<section class="achievement-section" v-motion-fade>
|
<h1 class="section-title">
|
||||||
<n-h2 class="section-title">{{
|
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||||
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
|
</h1>
|
||||||
}}</n-h2>
|
<div class="mission-cards">
|
||||||
<br />
|
<n-card hoverable class="mission-card" v-motion-pop>
|
||||||
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
<n-p class="section-content">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -210,7 +199,7 @@ const stats = ref([
|
|||||||
.company-overview {
|
.company-overview {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 20px;
|
/* padding: 0 20px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部大图区域 */
|
/* 顶部大图区域 */
|
||||||
@ -242,7 +231,7 @@ const stats = ref([
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 2.2rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@ -1,26 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<div class="company-overview">
|
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 公司简介部分 -->
|
|
||||||
<!-- 公司概况 -->
|
<!-- 公司概况 -->
|
||||||
<section
|
<section
|
||||||
class="company-overview"
|
class="company-overview"
|
||||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
style="max-width: 1200px; margin: 60px auto"
|
||||||
>
|
>
|
||||||
<h2 class="section-title">
|
<h1 class="section-title">
|
||||||
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
||||||
</h2>
|
</h1>
|
||||||
<div class="content-block">
|
<div class="content-block">
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
<div style="font-size: 18px">
|
||||||
|
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
|
||||||
|
</div>
|
||||||
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
|
||||||
</div>
|
</div>
|
||||||
@ -28,21 +20,17 @@
|
|||||||
|
|
||||||
<!-- 使命愿景卡片 -->
|
<!-- 使命愿景卡片 -->
|
||||||
<section class="mission-section">
|
<section class="mission-section">
|
||||||
|
<h1 class="section-title">
|
||||||
|
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||||
|
</h1>
|
||||||
<div class="mission-cards">
|
<div class="mission-cards">
|
||||||
<n-card hoverable class="mission-card" v-motion-pop>
|
<n-card hoverable class="mission-card" v-motion-pop>
|
||||||
<n-h3 class="card-title">{{
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
|
||||||
}}</n-h3>
|
|
||||||
<n-p class="card-content">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</n-card>
|
<br />
|
||||||
|
|
||||||
<n-card hoverable class="mission-card" v-motion-pop>
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
<n-h3 class="card-title">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
|
||||||
}}</n-h3>
|
|
||||||
<n-p class="card-content">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</n-card>
|
</n-card>
|
||||||
@ -52,9 +40,9 @@
|
|||||||
<!-- 里程碑时间轴 -->
|
<!-- 里程碑时间轴 -->
|
||||||
<!-- 里程碑时间轴 -->
|
<!-- 里程碑时间轴 -->
|
||||||
<section class="section timeline-section">
|
<section class="section timeline-section">
|
||||||
<n-h2 class="section-title">{{
|
<h1 class="section-title">
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
|
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
|
||||||
}}</n-h2>
|
</h1>
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<!-- 1977-2015 -->
|
<!-- 1977-2015 -->
|
||||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||||
@ -64,12 +52,12 @@
|
|||||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -84,12 +72,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -104,12 +92,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -124,12 +112,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -144,27 +132,27 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -173,15 +161,18 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 成就部分 -->
|
<!-- 成就部分 -->
|
||||||
<section class="achievement-section" v-motion-fade>
|
|
||||||
<n-h2 class="section-title">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
|
|
||||||
}}</n-h2>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<n-p class="section-content">{{
|
<section class="mission-section">
|
||||||
|
<h1 class="section-title">
|
||||||
|
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||||
|
</h1>
|
||||||
|
<div class="mission-cards">
|
||||||
|
<n-card hoverable class="mission-card" v-motion-pop>
|
||||||
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -210,7 +201,7 @@ const stats = ref([
|
|||||||
.company-overview {
|
.company-overview {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 20px;
|
/* padding: 0 20px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部大图区域 */
|
/* 顶部大图区域 */
|
||||||
@ -242,7 +233,7 @@ const stats = ref([
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 2.2rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@ -1,26 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<div class="company-overview">
|
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 公司简介部分 -->
|
|
||||||
<!-- 公司概况 -->
|
<!-- 公司概况 -->
|
||||||
<section
|
<section
|
||||||
class="company-overview"
|
class="company-overview"
|
||||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
style="max-width: 1200px; margin: 60px auto"
|
||||||
>
|
>
|
||||||
<h2 class="section-title">
|
<h1 class="section-title">
|
||||||
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
||||||
</h2>
|
</h1>
|
||||||
<div class="content-block">
|
<div class="content-block">
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
<div style="font-size: 18px">
|
||||||
|
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
|
||||||
|
</div>
|
||||||
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
|
||||||
</div>
|
</div>
|
||||||
@ -30,19 +22,16 @@
|
|||||||
<section class="mission-section">
|
<section class="mission-section">
|
||||||
<div class="mission-cards">
|
<div class="mission-cards">
|
||||||
<n-card hoverable class="mission-card" v-motion-pop>
|
<n-card hoverable class="mission-card" v-motion-pop>
|
||||||
<n-h3 class="card-title">{{
|
<h1 class="section-title">
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||||
}}</n-h3>
|
</h1>
|
||||||
<n-p class="card-content">{{
|
<br />
|
||||||
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</n-card>
|
<br />
|
||||||
|
|
||||||
<n-card hoverable class="mission-card" v-motion-pop>
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
<n-h3 class="card-title">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
|
||||||
}}</n-h3>
|
|
||||||
<n-p class="card-content">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</n-card>
|
</n-card>
|
||||||
@ -64,12 +53,12 @@
|
|||||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -84,12 +73,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -104,12 +93,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -124,12 +113,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -144,27 +133,27 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -173,15 +162,17 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 成就部分 -->
|
<!-- 成就部分 -->
|
||||||
<section class="achievement-section" v-motion-fade>
|
<section class="mission-section">
|
||||||
<n-h2 class="section-title">{{
|
<h1 class="section-title">
|
||||||
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
|
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||||
}}</n-h2>
|
</h1>
|
||||||
<br />
|
<div class="mission-cards">
|
||||||
|
<n-card hoverable class="mission-card" v-motion-pop>
|
||||||
<n-p class="section-content">{{
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -209,7 +200,7 @@ const stats = ref([
|
|||||||
}
|
}
|
||||||
.company-overview {
|
.company-overview {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部大图区域 */
|
/* 顶部大图区域 */
|
||||||
@ -241,7 +232,7 @@ const stats = ref([
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 2.2rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@ -1,26 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<div class="company-overview">
|
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 公司简介部分 -->
|
|
||||||
<!-- 公司概况 -->
|
<!-- 公司概况 -->
|
||||||
<section
|
<section
|
||||||
class="company-overview"
|
class="company-overview"
|
||||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
style="max-width: 1200px; margin: 60px auto"
|
||||||
>
|
>
|
||||||
<h2 class="section-title">
|
<h1 class="section-title">
|
||||||
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
||||||
</h2>
|
</h1>
|
||||||
<div class="content-block">
|
<div class="content-block">
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
<div style="font-size: 18px">
|
||||||
|
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
|
||||||
|
</div>
|
||||||
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
|
||||||
</div>
|
</div>
|
||||||
@ -28,21 +20,17 @@
|
|||||||
|
|
||||||
<!-- 使命愿景卡片 -->
|
<!-- 使命愿景卡片 -->
|
||||||
<section class="mission-section">
|
<section class="mission-section">
|
||||||
|
<h1 class="section-title">
|
||||||
|
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||||
|
</h1>
|
||||||
<div class="mission-cards">
|
<div class="mission-cards">
|
||||||
<n-card hoverable class="mission-card" v-motion-pop>
|
<n-card hoverable class="mission-card" v-motion-pop>
|
||||||
<n-h3 class="card-title">{{
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
|
||||||
}}</n-h3>
|
|
||||||
<n-p class="card-content">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</n-card>
|
<br />
|
||||||
|
|
||||||
<n-card hoverable class="mission-card" v-motion-pop>
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
<n-h3 class="card-title">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
|
||||||
}}</n-h3>
|
|
||||||
<n-p class="card-content">{{
|
|
||||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</n-card>
|
</n-card>
|
||||||
@ -52,9 +40,9 @@
|
|||||||
<!-- 里程碑时间轴 -->
|
<!-- 里程碑时间轴 -->
|
||||||
<!-- 里程碑时间轴 -->
|
<!-- 里程碑时间轴 -->
|
||||||
<section class="section timeline-section">
|
<section class="section timeline-section">
|
||||||
<n-h2 class="section-title">{{
|
<h1 class="section-title">
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
|
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
|
||||||
}}</n-h2>
|
</h1>
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<!-- 1977-2015 -->
|
<!-- 1977-2015 -->
|
||||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||||
@ -64,12 +52,12 @@
|
|||||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -84,12 +72,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -104,12 +92,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -124,12 +112,12 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -144,27 +132,27 @@
|
|||||||
}}</n-h3>
|
}}</n-h3>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<n-p class="timeline-desc">{{
|
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
</div>
|
</div>
|
||||||
@ -173,15 +161,17 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 成就部分 -->
|
<!-- 成就部分 -->
|
||||||
<section class="achievement-section" v-motion-fade>
|
<section class="mission-section">
|
||||||
<n-h2 class="section-title">{{
|
<h1 class="section-title">
|
||||||
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
|
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||||
}}</n-h2>
|
</h1>
|
||||||
<br />
|
<div class="mission-cards">
|
||||||
|
<n-card hoverable class="mission-card" v-motion-pop>
|
||||||
<n-p class="section-content">{{
|
<n-p style="font-size: 18px" class="card-content">{{
|
||||||
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
||||||
}}</n-p>
|
}}</n-p>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -202,14 +192,14 @@ const stats = ref([
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.home-page {
|
.home-page {
|
||||||
background-image: url("@/assets/image/bg-mobile.png");
|
background-image: url("@/assets/image/bg.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
.company-overview {
|
.company-overview {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 20px;
|
/* padding: 0 20px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部大图区域 */
|
/* 顶部大图区域 */
|
||||||
@ -241,7 +231,7 @@ const stats = ref([
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 2.2rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@ -25,13 +25,17 @@
|
|||||||
class="result-item"
|
class="result-item"
|
||||||
>
|
>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<a :href="item.url" class="result-title subtitle">{{ item.title }}</a>
|
<p class="result-title subtitle">{{ item.title }}</p>
|
||||||
<p class="result-description content-text">{{ item.description }}</p>
|
<p class="result-description content-text">{{ item.description }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="pdf-icon">
|
|
||||||
<a :href="item.url" target="_blank">
|
<div
|
||||||
|
class="pdf-icon"
|
||||||
|
@click="downloadPdf(item.url)"
|
||||||
|
style="color: #2979ff; cursor: pointer"
|
||||||
|
>
|
||||||
<img src="@/assets/image/pdf.png" alt="PDF" />
|
<img src="@/assets/image/pdf.png" alt="PDF" />
|
||||||
</a>
|
{{ t("financialinformation.quarterlyresults.download") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -341,6 +345,31 @@ const handleSearch = () => {
|
|||||||
// 搜索处理逻辑
|
// 搜索处理逻辑
|
||||||
console.log("搜索:", searchQuery.value);
|
console.log("搜索:", searchQuery.value);
|
||||||
};
|
};
|
||||||
|
const downloadPdf = async (pdfResource, filename = "") => {
|
||||||
|
try {
|
||||||
|
// 获取PDF文件
|
||||||
|
const response = await fetch(pdfResource);
|
||||||
|
const blob = await response.blob();
|
||||||
|
|
||||||
|
// 创建Blob URL
|
||||||
|
const blobUrl = URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
// 创建下载链接
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = blobUrl;
|
||||||
|
a.download = filename || pdfResource.split("/").pop() || "download.pdf";
|
||||||
|
|
||||||
|
// 触发下载
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
|
||||||
|
// 释放Blob URL
|
||||||
|
URL.revokeObjectURL(blobUrl);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("下载PDF文件失败:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.title {
|
.title {
|
||||||
@ -387,7 +416,7 @@ const handleSearch = () => {
|
|||||||
.result-item {
|
.result-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
padding: 15px 0;
|
padding: 15px 0;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
@ -401,10 +430,6 @@ const handleSearch = () => {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-description {
|
.result-description {
|
||||||
|
|||||||
@ -25,13 +25,16 @@
|
|||||||
class="result-item"
|
class="result-item"
|
||||||
>
|
>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<a :href="item.url" class="result-title subtitle">{{ item.title }}</a>
|
<p class="result-title subtitle">{{ item.title }}</p>
|
||||||
<p class="result-description content-text">{{ item.description }}</p>
|
<p class="result-description content-text">{{ item.description }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="pdf-icon">
|
<div
|
||||||
<a :href="item.url" target="_blank">
|
class="pdf-icon"
|
||||||
|
@click="downloadPdf(item.url)"
|
||||||
|
style="color: #2979ff; cursor: pointer"
|
||||||
|
>
|
||||||
<img src="@/assets/image/pdf.png" alt="PDF" />
|
<img src="@/assets/image/pdf.png" alt="PDF" />
|
||||||
</a>
|
{{ t("financialinformation.quarterlyresults.download") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -341,6 +344,32 @@ const handleSearch = () => {
|
|||||||
// 搜索处理逻辑
|
// 搜索处理逻辑
|
||||||
console.log("搜索:", searchQuery.value);
|
console.log("搜索:", searchQuery.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const downloadPdf = async (pdfResource, filename = "") => {
|
||||||
|
try {
|
||||||
|
// 获取PDF文件
|
||||||
|
const response = await fetch(pdfResource);
|
||||||
|
const blob = await response.blob();
|
||||||
|
|
||||||
|
// 创建Blob URL
|
||||||
|
const blobUrl = URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
// 创建下载链接
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = blobUrl;
|
||||||
|
a.download = filename || pdfResource.split("/").pop() || "download.pdf";
|
||||||
|
|
||||||
|
// 触发下载
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
|
||||||
|
// 释放Blob URL
|
||||||
|
URL.revokeObjectURL(blobUrl);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("下载PDF文件失败:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.title {
|
.title {
|
||||||
@ -387,7 +416,7 @@ const handleSearch = () => {
|
|||||||
.result-item {
|
.result-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
padding: 15px 0;
|
padding: 15px 0;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
@ -401,10 +430,6 @@ const handleSearch = () => {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-description {
|
.result-description {
|
||||||
|
|||||||
@ -36,7 +36,7 @@
|
|||||||
<img
|
<img
|
||||||
src="@/assets/image/download.svg"
|
src="@/assets/image/download.svg"
|
||||||
style="width: 20px; height: 20px"
|
style="width: 20px; height: 20px"
|
||||||
@click="handleDownload(item.url)"
|
@click="downloadPdf(item.url)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -345,10 +345,7 @@ const handleSearch = () => {
|
|||||||
console.log("搜索:", searchQuery.value);
|
console.log("搜索:", searchQuery.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDownload = (url) => {
|
const downloadPdf = (url) => {
|
||||||
// 下载处理逻辑
|
|
||||||
console.log("下载:", url);
|
|
||||||
|
|
||||||
// 创建一个隐藏的a元素
|
// 创建一个隐藏的a元素
|
||||||
const link = document.createElement("a");
|
const link = document.createElement("a");
|
||||||
link.href = url;
|
link.href = url;
|
||||||
@ -360,7 +357,6 @@ const handleDownload = (url) => {
|
|||||||
fileName = fileName.split(/[?_]/)[0];
|
fileName = fileName.split(/[?_]/)[0];
|
||||||
}
|
}
|
||||||
link.download = fileName;
|
link.download = fileName;
|
||||||
link.target = "_blank";
|
|
||||||
|
|
||||||
// 对于移动设备，我们需要特殊处理
|
// 对于移动设备，我们需要特殊处理
|
||||||
const isMobile =
|
const isMobile =
|
||||||
@ -369,12 +365,15 @@ const handleDownload = (url) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (isMobile) {
|
if (isMobile) {
|
||||||
// 在移动设备上，可能需要使用fetch下载文件并创建blob
|
// 在移动设备上，使用fetch下载文件并直接触发下载，不使用blob URL进行预览
|
||||||
fetch(url)
|
fetch(url)
|
||||||
.then((response) => response.blob())
|
.then((response) => response.blob())
|
||||||
.then((blob) => {
|
.then((blob) => {
|
||||||
const objectUrl = URL.createObjectURL(blob);
|
const objectUrl = URL.createObjectURL(blob);
|
||||||
link.href = objectUrl;
|
link.href = objectUrl;
|
||||||
|
// 确保设置download属性并且不设置target="_blank"以避免预览
|
||||||
|
link.download = fileName;
|
||||||
|
link.target = "_self"; // 避免在新窗口打开
|
||||||
document.body.appendChild(link);
|
document.body.appendChild(link);
|
||||||
link.click();
|
link.click();
|
||||||
|
|
||||||
@ -386,11 +385,16 @@ const handleDownload = (url) => {
|
|||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error("下载文件时出错:", error);
|
console.error("下载文件时出错:", error);
|
||||||
// 如果fetch失败，回退到window.open
|
// 如果fetch失败，尝试直接下载
|
||||||
window.open(url, "_blank");
|
link.href = url;
|
||||||
|
link.download = fileName;
|
||||||
|
link.target = "_self";
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// 桌面设备上直接点击链接
|
// 桌面设备上直接点击链接下载
|
||||||
document.body.appendChild(link);
|
document.body.appendChild(link);
|
||||||
link.click();
|
link.click();
|
||||||
document.body.removeChild(link);
|
document.body.removeChild(link);
|
||||||
@ -475,10 +479,6 @@ const handleDownload = (url) => {
|
|||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-size: 92px;
|
font-size: 92px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-description {
|
.result-description {
|
||||||
|
|||||||
@ -36,7 +36,7 @@
|
|||||||
<img
|
<img
|
||||||
src="@/assets/image/download.svg"
|
src="@/assets/image/download.svg"
|
||||||
style="width: 20px; height: 20px"
|
style="width: 20px; height: 20px"
|
||||||
@click="handleDownload(item.url)"
|
@click="downloadPdf(item.url)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -345,10 +345,7 @@ const handleSearch = () => {
|
|||||||
console.log("搜索:", searchQuery.value);
|
console.log("搜索:", searchQuery.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDownload = (url) => {
|
const downloadPdf = (url) => {
|
||||||
// 下载处理逻辑
|
|
||||||
console.log("下载:", url);
|
|
||||||
|
|
||||||
// 创建一个隐藏的a元素
|
// 创建一个隐藏的a元素
|
||||||
const link = document.createElement("a");
|
const link = document.createElement("a");
|
||||||
link.href = url;
|
link.href = url;
|
||||||
@ -360,7 +357,6 @@ const handleDownload = (url) => {
|
|||||||
fileName = fileName.split(/[?_]/)[0];
|
fileName = fileName.split(/[?_]/)[0];
|
||||||
}
|
}
|
||||||
link.download = fileName;
|
link.download = fileName;
|
||||||
link.target = "_blank";
|
|
||||||
|
|
||||||
// 对于移动设备，我们需要特殊处理
|
// 对于移动设备，我们需要特殊处理
|
||||||
const isMobile =
|
const isMobile =
|
||||||
@ -369,12 +365,15 @@ const handleDownload = (url) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (isMobile) {
|
if (isMobile) {
|
||||||
// 在移动设备上，可能需要使用fetch下载文件并创建blob
|
// 在移动设备上，使用fetch下载文件并直接触发下载，不使用blob URL进行预览
|
||||||
fetch(url)
|
fetch(url)
|
||||||
.then((response) => response.blob())
|
.then((response) => response.blob())
|
||||||
.then((blob) => {
|
.then((blob) => {
|
||||||
const objectUrl = URL.createObjectURL(blob);
|
const objectUrl = URL.createObjectURL(blob);
|
||||||
link.href = objectUrl;
|
link.href = objectUrl;
|
||||||
|
// 确保设置download属性并且不设置target="_blank"以避免预览
|
||||||
|
link.download = fileName;
|
||||||
|
link.target = "_self"; // 避免在新窗口打开
|
||||||
document.body.appendChild(link);
|
document.body.appendChild(link);
|
||||||
link.click();
|
link.click();
|
||||||
|
|
||||||
@ -386,11 +385,16 @@ const handleDownload = (url) => {
|
|||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error("下载文件时出错:", error);
|
console.error("下载文件时出错:", error);
|
||||||
// 如果fetch失败，回退到window.open
|
// 如果fetch失败，尝试直接下载
|
||||||
window.open(url, "_blank");
|
link.href = url;
|
||||||
|
link.download = fileName;
|
||||||
|
link.target = "_self";
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// 桌面设备上直接点击链接
|
// 桌面设备上直接点击链接下载
|
||||||
document.body.appendChild(link);
|
document.body.appendChild(link);
|
||||||
link.click();
|
link.click();
|
||||||
document.body.removeChild(link);
|
document.body.removeChild(link);
|
||||||
@ -475,10 +479,6 @@ const handleDownload = (url) => {
|
|||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-description {
|
.result-description {
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="title mb-[50px] text-center">
|
<div class="title mb-[50px] text-center">
|
||||||
<div style="font-size: 40px; margin-top: 60px">Corporate Governance</div>
|
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||||
<div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@ -117,7 +116,6 @@ const state = reactive({
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
/* 标题样式 */
|
/* 标题样式 */
|
||||||
.title h1 {
|
.title h1 {
|
||||||
font-family: "Georgia", serif;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="title mb-[50px] text-center">
|
<div class="title mb-[50px] text-center">
|
||||||
<div style="font-size: 40px; margin-top: 60px">Corporate Governance</div>
|
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||||
<div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@ -117,7 +116,6 @@ const state = reactive({
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
/* 标题样式 */
|
/* 标题样式 */
|
||||||
.title h1 {
|
.title h1 {
|
||||||
font-family: "Georgia", serif;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|||||||
@ -1,9 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="title mb-[50px] text-center">
|
<div class="title mb-[50px] text-center">
|
||||||
<h1 class="text-5xl font-light text-gray-800 mb-4 tracking-tight">
|
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||||
Corporate Governance
|
|
||||||
</h1>
|
|
||||||
<div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
@ -115,7 +112,6 @@ const state = reactive({
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
/* 标题样式 */
|
/* 标题样式 */
|
||||||
.title h1 {
|
.title h1 {
|
||||||
font-family: "Georgia", serif;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|||||||
@ -1,9 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="title mb-[50px] text-center">
|
<div class="title mb-[50px] text-center">
|
||||||
<h1 class="text-5xl font-light text-gray-800 mb-4 tracking-tight">
|
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||||
Corporate Governance
|
|
||||||
</h1>
|
|
||||||
<div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
@ -115,7 +112,6 @@ const state = reactive({
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
/* 标题样式 */
|
/* 标题样式 */
|
||||||
.title h1 {
|
.title h1 {
|
||||||
font-family: "Georgia", serif;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|||||||
@ -249,7 +249,7 @@ const scrollToTop = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPageDefaultData();
|
getPageData();
|
||||||
});
|
});
|
||||||
|
|
||||||
const getPageDefaultData = async () => {
|
const getPageDefaultData = async () => {
|
||||||
|
|||||||
@ -249,13 +249,13 @@ const scrollToTop = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPageDefaultData();
|
getPageData();
|
||||||
});
|
});
|
||||||
|
|
||||||
const getPageDefaultData = async () => {
|
const getPageDefaultData = async () => {
|
||||||
try {
|
try {
|
||||||
let url =
|
let url =
|
||||||
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
|
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
|
||||||
const res = await axios.get(url);
|
const res = await axios.get(url);
|
||||||
let originalData = res.data.data;
|
let originalData = res.data.data;
|
||||||
|
|
||||||
|
|||||||
@ -248,7 +248,7 @@ const scrollToTop = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPageDefaultData();
|
getPageData();
|
||||||
});
|
});
|
||||||
|
|
||||||
const getPageDefaultData = async () => {
|
const getPageDefaultData = async () => {
|
||||||
|
|||||||
@ -249,7 +249,7 @@ const scrollToTop = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPageDefaultData();
|
getPageData();
|
||||||
});
|
});
|
||||||
|
|
||||||
const getPageDefaultData = async () => {
|
const getPageDefaultData = async () => {
|
||||||
|
|||||||
@ -105,7 +105,6 @@ const getInitials = (name) => {
|
|||||||
color: white;
|
color: white;
|
||||||
padding: 120px 0;
|
padding: 120px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 60px;
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
/* 动画 */
|
/* 动画 */
|
||||||
|
|||||||
@ -105,7 +105,6 @@ const getInitials = (name) => {
|
|||||||
color: white;
|
color: white;
|
||||||
padding: 120px 0;
|
padding: 120px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 60px;
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
/* 动画 */
|
/* 动画 */
|
||||||
|
|||||||
@ -25,7 +25,8 @@
|
|||||||
class="company-overview"
|
class="company-overview"
|
||||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||||
>
|
>
|
||||||
<h1 class="section-titles">Company profile</h1>
|
<h1 class="section-titles">Company Profile</h1>
|
||||||
|
|
||||||
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
||||||
<div class="content-block">
|
<div class="content-block">
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||||
@ -39,84 +40,6 @@
|
|||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 使命与愿景 -->
|
|
||||||
<!-- <section
|
|
||||||
class="mission-vision"
|
|
||||||
style="
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 60px auto;
|
|
||||||
padding: 0 40px;
|
|
||||||
background: #f8fafc;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<h2 class="section-titles">
|
|
||||||
{{ $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-titles">
|
|
||||||
{{ $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
|
<section
|
||||||
class="achievements"
|
class="achievements"
|
||||||
@ -124,7 +47,7 @@
|
|||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 60px auto;
|
margin: 60px auto;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
background: #f8fafc;
|
background: #fff;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<h2 class="section-titles">
|
<h2 class="section-titles">
|
||||||
@ -143,19 +66,19 @@
|
|||||||
<div class="news-card">
|
<div class="news-card">
|
||||||
<!-- <div class="news-date">De 15. 2023</div> -->
|
<!-- <div class="news-date">De 15. 2023</div> -->
|
||||||
<!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
|
<!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
|
{{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
|
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
|
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
|
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
|
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
|
||||||
</p>
|
</p>
|
||||||
<!-- <a href="#" class="news-link"
|
<!-- <a href="#" class="news-link"
|
||||||
@ -174,36 +97,51 @@
|
|||||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||||
<div class="stock-data">
|
<div class="stock-data">
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label"> Time </span>
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
<span style="font-size: 18px" class="data-value">{{
|
||||||
|
formatted
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">${{ stockQuote.Open }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value positive"
|
<span style="font-size: 18px" class="data-value"
|
||||||
>{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
|
>${{ stockQuote.Open }}</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
|
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||||
|
}}</span>
|
||||||
|
<span style="font-size: 18px" class="data-value positive"
|
||||||
|
>{{ stockQuote.change?.[0] || "--" }}
|
||||||
|
{{ stockQuote.change?.[1] || "--" }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">NASDAQ: MINM</span>
|
<span style="font-size: 18px" class="data-value"
|
||||||
|
>NASDAQ: MINM</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">{{ stockQuote.Volume }}</span>
|
<span style="font-size: 18px" class="data-value">{{
|
||||||
|
stockQuote.Volume
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">${{ stockQuote.MarketCap }}</span>
|
<span style="font-size: 18px" class="data-value"
|
||||||
|
>${{ stockQuote.MarketCap }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -255,10 +193,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref, onUnmounted } from "vue";
|
import { onMounted, ref, onUnmounted, computed } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||||
const { getStockQuate, stockQuote } = useStockQuote();
|
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||||
|
|
||||||
getStockQuate();
|
getStockQuate();
|
||||||
|
|
||||||
@ -302,7 +240,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.home-page {
|
.home-page {
|
||||||
background-image: url("@/assets/image/bg.png");
|
background-image: url("@/assets/image/bg-mobile.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
class="company-overview"
|
class="company-overview"
|
||||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||||
>
|
>
|
||||||
<h1 class="section-titles">Company profile</h1>
|
<h1 class="section-titles">Company Profile</h1>
|
||||||
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
||||||
<div class="content-block">
|
<div class="content-block">
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||||
@ -39,84 +39,6 @@
|
|||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 使命与愿景 -->
|
|
||||||
<!-- <section
|
|
||||||
class="mission-vision"
|
|
||||||
style="
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 60px auto;
|
|
||||||
padding: 0 40px;
|
|
||||||
background: #f8fafc;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<h2 class="section-titles">
|
|
||||||
{{ $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-titles">
|
|
||||||
{{ $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
|
<section
|
||||||
class="achievements"
|
class="achievements"
|
||||||
@ -124,7 +46,7 @@
|
|||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 60px auto;
|
margin: 60px auto;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
background: #f8fafc;
|
background: #fff;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<h2 class="section-titles">
|
<h2 class="section-titles">
|
||||||
@ -173,6 +95,10 @@
|
|||||||
<div class="info-card stock-card">
|
<div class="info-card stock-card">
|
||||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||||
<div class="stock-data">
|
<div class="stock-data">
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="data-label"> Time </span>
|
||||||
|
<span class="data-value">{{ sampleDate }}</span>
|
||||||
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||||
@ -184,7 +110,8 @@
|
|||||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value positive"
|
<span class="data-value positive"
|
||||||
>{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
|
>{{ stockQuote.change?.[0] || "--" }}
|
||||||
|
{{ stockQuote.change?.[1] || "--" }}</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
@ -255,18 +182,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref, onUnmounted } from "vue";
|
import { onMounted, ref, onUnmounted, computed } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||||
const { getStockQuate, stockQuote } = useStockQuote();
|
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||||
|
|
||||||
getStockQuate();
|
getStockQuate();
|
||||||
|
// 示例数据
|
||||||
|
const sampleDate = ref(formatted);
|
||||||
|
|
||||||
const { t: $t } = useI18n();
|
const { t: $t } = useI18n();
|
||||||
const contentRef = ref(null);
|
const contentRef = ref(null);
|
||||||
const isInView = ref(false);
|
const isInView = ref(false);
|
||||||
let observer = null;
|
let observer = null;
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (contentRef.value && "IntersectionObserver" in window) {
|
if (contentRef.value && "IntersectionObserver" in window) {
|
||||||
observer = new IntersectionObserver(
|
observer = new IntersectionObserver(
|
||||||
|
|||||||
@ -25,7 +25,8 @@
|
|||||||
class="company-overview"
|
class="company-overview"
|
||||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||||
>
|
>
|
||||||
<h1 class="section-titles">Company profile</h1>
|
<h1 class="section-titles">Company Profile</h1>
|
||||||
|
|
||||||
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
||||||
<div class="content-block">
|
<div class="content-block">
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||||
@ -39,84 +40,6 @@
|
|||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 使命与愿景 -->
|
|
||||||
<!-- <section
|
|
||||||
class="mission-vision"
|
|
||||||
style="
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 60px auto;
|
|
||||||
padding: 0 40px;
|
|
||||||
background: #f8fafc;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<h2 class="section-titles">
|
|
||||||
{{ $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-titles">
|
|
||||||
{{ $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
|
<section
|
||||||
class="achievements"
|
class="achievements"
|
||||||
@ -124,7 +47,7 @@
|
|||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 60px auto;
|
margin: 60px auto;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
background: #f8fafc;
|
background: #fff;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<h2 class="section-titles">
|
<h2 class="section-titles">
|
||||||
@ -143,19 +66,19 @@
|
|||||||
<div class="news-card">
|
<div class="news-card">
|
||||||
<!-- <div class="news-date">De 15. 2023</div> -->
|
<!-- <div class="news-date">De 15. 2023</div> -->
|
||||||
<!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
|
<!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
|
{{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
|
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
|
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
|
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
|
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
|
||||||
</p>
|
</p>
|
||||||
<!-- <a href="#" class="news-link"
|
<!-- <a href="#" class="news-link"
|
||||||
@ -174,36 +97,51 @@
|
|||||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||||
<div class="stock-data">
|
<div class="stock-data">
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label"> Time </span>
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
<span style="font-size: 18px" class="data-value">{{
|
||||||
|
formatted
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">${{ stockQuote.Open }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value positive"
|
<span style="font-size: 18px" class="data-value"
|
||||||
>{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
|
>${{ stockQuote.Open }}</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
|
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||||
|
}}</span>
|
||||||
|
<span style="font-size: 18px" class="data-value positive"
|
||||||
|
>{{ stockQuote.change?.[0] || "--" }}
|
||||||
|
{{ stockQuote.change?.[1] || "--" }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">NASDAQ: MINM</span>
|
<span style="font-size: 18px" class="data-value"
|
||||||
|
>NASDAQ: MINM</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">{{ stockQuote.Volume }}</span>
|
<span style="font-size: 18px" class="data-value">{{
|
||||||
|
stockQuote.Volume
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">${{ stockQuote.MarketCap }}</span>
|
<span style="font-size: 18px" class="data-value"
|
||||||
|
>${{ stockQuote.MarketCap }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -255,13 +193,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref, onUnmounted } from "vue";
|
import { onMounted, ref, onUnmounted, computed } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||||
const { getStockQuate, stockQuote } = useStockQuote();
|
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||||
|
|
||||||
getStockQuate();
|
getStockQuate();
|
||||||
|
|
||||||
const { t: $t } = useI18n();
|
const { t: $t } = useI18n();
|
||||||
const contentRef = ref(null);
|
const contentRef = ref(null);
|
||||||
const isInView = ref(false);
|
const isInView = ref(false);
|
||||||
|
|||||||
@ -25,7 +25,8 @@
|
|||||||
class="company-overview"
|
class="company-overview"
|
||||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||||
>
|
>
|
||||||
<h1 class="section-titles">Company profile</h1>
|
<h1 class="section-titles">Company Profile</h1>
|
||||||
|
|
||||||
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
||||||
<div class="content-block">
|
<div class="content-block">
|
||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||||
@ -39,84 +40,6 @@
|
|||||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 使命与愿景 -->
|
|
||||||
<!-- <section
|
|
||||||
class="mission-vision"
|
|
||||||
style="
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 60px auto;
|
|
||||||
padding: 0 40px;
|
|
||||||
background: #f8fafc;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<h2 class="section-titles">
|
|
||||||
{{ $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-titles">
|
|
||||||
{{ $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
|
<section
|
||||||
class="achievements"
|
class="achievements"
|
||||||
@ -124,7 +47,7 @@
|
|||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 60px auto;
|
margin: 60px auto;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
background: #f8fafc;
|
background: #fff;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<h2 class="section-titles">
|
<h2 class="section-titles">
|
||||||
@ -143,19 +66,19 @@
|
|||||||
<div class="news-card">
|
<div class="news-card">
|
||||||
<!-- <div class="news-date">De 15. 2023</div> -->
|
<!-- <div class="news-date">De 15. 2023</div> -->
|
||||||
<!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
|
<!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
|
{{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
|
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
|
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
|
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="news-excerpt">
|
<p style="font-size: 18px">
|
||||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
|
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
|
||||||
</p>
|
</p>
|
||||||
<!-- <a href="#" class="news-link"
|
<!-- <a href="#" class="news-link"
|
||||||
@ -174,36 +97,51 @@
|
|||||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||||
<div class="stock-data">
|
<div class="stock-data">
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label"> Time </span>
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
<span style="font-size: 18px" class="data-value">{{
|
||||||
|
formatted
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">${{ stockQuote.Open }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value positive"
|
<span style="font-size: 18px" class="data-value"
|
||||||
>{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
|
>${{ stockQuote.Open }}</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
|
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||||
|
}}</span>
|
||||||
|
<span style="font-size: 18px" class="data-value positive"
|
||||||
|
>{{ stockQuote.change?.[0] || "--" }}
|
||||||
|
{{ stockQuote.change?.[1] || "--" }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">NASDAQ: MINM</span>
|
<span style="font-size: 18px" class="data-value"
|
||||||
|
>NASDAQ: MINM</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">{{ stockQuote.Volume }}</span>
|
<span style="font-size: 18px" class="data-value">{{
|
||||||
|
stockQuote.Volume
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-row">
|
<div class="data-row">
|
||||||
<span class="data-label">{{
|
<span style="font-size: 18px" class="data-label">{{
|
||||||
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="data-value">${{ stockQuote.MarketCap }}</span>
|
<span style="font-size: 18px" class="data-value"
|
||||||
|
>${{ stockQuote.MarketCap }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -255,10 +193,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref, onUnmounted } from "vue";
|
import { onMounted, ref, onUnmounted, computed } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||||
const { getStockQuate, stockQuote } = useStockQuote();
|
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||||
|
|
||||||
getStockQuate();
|
getStockQuate();
|
||||||
|
|
||||||
|
|||||||
@ -24,7 +24,9 @@ getStockQuate()
|
|||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-base text-gray-400">Change</div>
|
<div class="text-base text-gray-400">Change</div>
|
||||||
<div class="text-2xl font-bold text-red-500">{{ stockQuote.change?.join('') }}</div>
|
<div class="text-3xl font-bold"
|
||||||
|
:class="stockQuote.change?.[1]?.startsWith('-') ? 'text-red-500' : (stockQuote.change?.[1]?.startsWith('+') ? 'text-green-500' : '')">
|
||||||
|
{{ stockQuote.change?.join('') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-base text-gray-400">Day's Range</div>
|
<div class="text-base text-gray-400">Day's Range</div>
|
||||||
|
|||||||
@ -24,7 +24,9 @@ getStockQuate()
|
|||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-lg text-gray-400">Change</div>
|
<div class="text-lg text-gray-400">Change</div>
|
||||||
<div class="text-3xl font-bold text-red-500 ">{{ stockQuote.change?.join('') }}</div>
|
<div class="text-3xl font-bold"
|
||||||
|
:class="stockQuote.change?.[1]?.startsWith('-') ? 'text-red-500' : (stockQuote.change?.[1]?.startsWith('+') ? 'text-green-500' : '')">
|
||||||
|
{{ stockQuote.change?.join('') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-lg text-gray-400">Day's Range</div>
|
<div class="text-lg text-gray-400">Day's Range</div>
|
||||||
|
|||||||
@ -20,7 +20,10 @@ getStockQuate();
|
|||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-xs text-gray-400">Change</div>
|
<div class="text-xs text-gray-400">Change</div>
|
||||||
<div class="text-lg font-bold text-red-500">{{ stockQuote.change?.join('') }}</div>
|
|
||||||
|
<div class="text-lg font-bold"
|
||||||
|
:class="stockQuote.change?.[1]?.startsWith('-') ? 'text-red-500' : (stockQuote.change?.[1]?.startsWith('+') ? 'text-green-500' : '')">
|
||||||
|
{{ stockQuote.change?.join('') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-xs text-gray-400">Day's Range</div>
|
<div class="text-xs text-gray-400">Day's Range</div>
|
||||||
|
|||||||
@ -24,7 +24,9 @@ getStockQuate();
|
|||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-sm text-gray-400">Change</div>
|
<div class="text-sm text-gray-400">Change</div>
|
||||||
<div class="text-xl font-bold text-red-500">{{ stockQuote.change?.join('') }}</div>
|
<div class="text-xl font-bold"
|
||||||
|
:class="stockQuote.change?.[1]?.startsWith('-') ? 'text-red-500' : (stockQuote.change?.[1]?.startsWith('+') ? 'text-green-500' : '')">
|
||||||
|
{{ stockQuote.change?.join('') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-sm text-gray-400">Day's Range</div>
|
<div class="text-sm text-gray-400">Day's Range</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user