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">
|
||||
<head>
|
||||
<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">
|
||||
<title>FiEE</title>
|
||||
</head>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"axios": "^1.7.3",
|
||||
"cnjm-postcss-px-to-viewport": "^1.0.1",
|
||||
"countup.js": "^2.8.2",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.6.0",
|
||||
"gsap": "^3.12.5",
|
||||
"jsdom": "^24.0.0",
|
||||
|
||||
@ -29,6 +29,9 @@ importers:
|
||||
countup.js:
|
||||
specifier: ^2.8.2
|
||||
version: 2.8.2
|
||||
dayjs:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
echarts:
|
||||
specifier: ^5.6.0
|
||||
version: 5.6.0
|
||||
@ -2068,6 +2071,9 @@ packages:
|
||||
date-fns@3.6.0:
|
||||
resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
|
||||
|
||||
dayjs@1.11.13:
|
||||
resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
|
||||
|
||||
debug@4.3.6:
|
||||
resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
|
||||
engines: {node: '>=6.0'}
|
||||
@ -6478,6 +6484,8 @@ snapshots:
|
||||
|
||||
date-fns@3.6.0: {}
|
||||
|
||||
dayjs@1.11.13: {}
|
||||
|
||||
debug@4.3.6:
|
||||
dependencies:
|
||||
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: {
|
||||
CONTAIN: {
|
||||
TITLEONE: {
|
||||
TITLE: "Company positioning",
|
||||
TITLE: "Company Positioning",
|
||||
CONTENT:
|
||||
"To empower global talents through innovative technology solutions",
|
||||
CONTENTTWO:
|
||||
"Leveraging IoT, connectivity, and artificial intelligence to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
|
||||
"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: {
|
||||
STOCK_INFO: {
|
||||
TITLE: "Stock Info",
|
||||
TITLE: "Stock Information",
|
||||
LAST_PRICE: "Last Price",
|
||||
CHANGE: "Change",
|
||||
STOCK_CODE: "Stock Code",
|
||||
@ -607,7 +607,7 @@ export default {
|
||||
TITLETWO: {
|
||||
TITLE: "About FiEE, Inc.",
|
||||
CONTENT:
|
||||
'FiEE, Inc. (NASDAQ: MINM) was formerly Minim, Inc. founded in 1977. We have a historical track record of delivering a comprehensive WiFi/Software as a Service platform in the market. After years of development, we made the strategic decision to transition to a Software First Model in 2023 to expand our technology portfolio and revenue streams. By 2025, we have rebranded ourselves as a technology company leveraging our expertise in IoT, connectivity, and artificial intelligence ("AI") to explore new business prospects and extend our global footprint.',
|
||||
'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:
|
||||
'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:
|
||||
@ -615,16 +615,16 @@ export default {
|
||||
CONTENTTWOTITLE: "Our services are structured",
|
||||
},
|
||||
TITLETHREE: {
|
||||
TITLE: "Our mission and vision",
|
||||
TITLE: "Our Mission and Vision",
|
||||
CONTENT:
|
||||
"•To empower global talents through innovative technology solutions",
|
||||
"• To empower global talents through innovative technology solutions",
|
||||
CONTENTTWO:
|
||||
"•Leveraging IoT, connectivity, and artificial intelligence to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
|
||||
"• Leveraging IoT, connectivity, and artificial intelligence to create targeted, multilingual digital brands, fostering a global community of Key Opinion Leaders and providing unparalleled value throughout the digital content lifecycle",
|
||||
},
|
||||
TITLEFOUR: {
|
||||
CONTENT: "",
|
||||
|
||||
TITLE: "Corporate Milestone",
|
||||
TITLE: "Corporate Milestones",
|
||||
SUBHEADING: "1977 – 2015 : Founding & Licensing",
|
||||
paragraph: {
|
||||
ONE: "• Founded as Zoom Telephonics in 1977. ",
|
||||
@ -632,7 +632,7 @@ export default {
|
||||
},
|
||||
SUBHEADINGTWO: "2020 : Merger & AI Advancement",
|
||||
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.",
|
||||
THREE: "",
|
||||
},
|
||||
@ -645,22 +645,22 @@ export default {
|
||||
SUBHEADINGFOREFF: "2023 – 2024: Pivoting to A Software First Model",
|
||||
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.",
|
||||
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: "",
|
||||
},
|
||||
SUBHEADINGFIVE: "2025 Rebranding & New C-Suite",
|
||||
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.",
|
||||
THREE:
|
||||
"• 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",
|
||||
FIVE: "• Acquisition of Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC",
|
||||
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.",
|
||||
},
|
||||
},
|
||||
TITLEFIVE: {
|
||||
CONTENT:
|
||||
"•We developed our own AI-driven cloud software platform and applications, providing efficient and high quality network management and security solutions for home and business users, as well as the service providers that assisted them.",
|
||||
"•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",
|
||||
},
|
||||
},
|
||||
@ -676,30 +676,29 @@ export default {
|
||||
paragraph: {
|
||||
ONE: {
|
||||
TITLE: "(1)Cloud-Managed Connectivity (WiFi) Platform: ",
|
||||
CONTENT: "•SaaS powering OS for consumers and SMBs ",
|
||||
CONTENTTWO:
|
||||
"•AI-driven threat protection, and over-the-air updates",
|
||||
CONTENT: "SaaS powering OS for consumers and SMBs ",
|
||||
CONTENTTWO: "AI-driven threat protection, and over-the-air updates",
|
||||
},
|
||||
TWO: {
|
||||
TITLE: "(2)IoT Hardware Sales & Licensing: ",
|
||||
CONTENT:
|
||||
"•IoT products and technologies, including developing VR/AR online sharing technologies",
|
||||
CONTENTTWO: "•IoT data collection, analysis and management",
|
||||
"IoT products and technologies, including developing VR/AR online sharing technologies",
|
||||
CONTENTTWO: "IoT data collection, analysis and management",
|
||||
},
|
||||
THREE: {
|
||||
TITLE: "(3)SAAS Solutions",
|
||||
CONTENT: "•Internet sales and IoT support",
|
||||
CONTENTTWO: "•KOL branding services",
|
||||
CONTENT: "Internet sales and IoT support",
|
||||
CONTENTTWO: "KOL branding services",
|
||||
CONTENTTHREE:
|
||||
"•AI-enabled content creation and fans habit analysis solutions",
|
||||
"AI-enabled content creation and fans habit analysis solutions",
|
||||
},
|
||||
FOUR: {
|
||||
TITLE: "(4)Professional To-C and To-B Services & Support",
|
||||
CONTENT:
|
||||
"•Managed-service agreements with ISPs and enterprise customers for network-support, security monitoring, and custom development",
|
||||
CONTENTTWO: "•KOL branding services",
|
||||
"Managed-service agreements with ISPs and enterprise customers for network-support, security monitoring, and custom development",
|
||||
CONTENTTWO: "KOL branding services",
|
||||
CONTENTTHREE:
|
||||
"•AI-enabled content creation and fans habit analysis solutions",
|
||||
"AI-enabled content creation and fans habit analysis solutions",
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -708,20 +707,21 @@ export default {
|
||||
// 管理
|
||||
MANAGEMENT: {
|
||||
ONE: {
|
||||
TITLE: "Wai Chung LI",
|
||||
TITLETWO: "Chief Executive Officer and President",
|
||||
TITLE: "Wai Chung Li",
|
||||
TITLETWO: "Chief Executive Officer",
|
||||
CONTENT:
|
||||
"Mr. Li is the Chief Executive Officer and President, with extensive experience in accounting, corporate management and finance management. His role encompasses the oversight of our daily business operations and plays a vital part in the overall management of our Group.With a track record spanning prestigious roles at Deloitte China, Shanghai Prime Machinery Company Limited, Lens Technology Co., Ltd., and more, Mr. Li brings invaluable expertise to lead the team. He chaired Audit Committees for Fulu Holdings and Taizhou Water Group in Hong Kong, and Nedschroef in the Netherlands, showcasing his global leadership. Holding key positions in investment management, business consulting, and directorial roles in listedcompanies, his insights drive strategic decision-making. ",
|
||||
CONTENTTWO: "",
|
||||
"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:
|
||||
"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: "",
|
||||
},
|
||||
TWO: {
|
||||
TITLE: "Cao Yu",
|
||||
TITLETWO: "Chief Financial Officer, Secretary, Treasurer and Director",
|
||||
CONTENTONE:
|
||||
"Ms. Cao is the Chief Financial Officer, Secretary, Treasurer and Director, with a wealth of experience in financial management. She oversees financial operations, strategic planning, risk management, and reporting to ensure the company's financial health and compliance with regulations.",
|
||||
"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:
|
||||
"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 { createGlobalState, useLocalStorage } from '@vueuse/core'
|
||||
import axios from 'axios'
|
||||
import dayjs from 'dayjs'
|
||||
import utc from 'dayjs/plugin/utc'
|
||||
import timezone from 'dayjs/plugin/timezone'
|
||||
|
||||
export const useStockQuote = createGlobalState(() => {
|
||||
const stockQuote = useLocalStorage('stockQuote', {
|
||||
@ -26,9 +29,45 @@ const options = {
|
||||
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 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
|
||||
}
|
||||
return {
|
||||
|
||||
@ -4,115 +4,49 @@
|
||||
<!-- 渐变背景标题区 - 增加层次感 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="title-wrapper">
|
||||
<h1 class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="hero-description">
|
||||
<h1 style="font-size: 40px" class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h1>
|
||||
<div style="font-size: 18px" class="hero-description">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 业务核心解决方案 -->
|
||||
<main class="container">
|
||||
<main style="margin-top: 40px" class="container">
|
||||
<section>
|
||||
<h1 class="hero-title">
|
||||
<h1 class="hero-title" style="font-size: 22px">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<!-- 解决方案网格 - 响应式弹性布局 -->
|
||||
<div class="solution-grid">
|
||||
<!-- 主推解决方案组 -->
|
||||
<div class="solution-group">
|
||||
<div class="featured-solution">
|
||||
<div class="solution-card" :style="{ '--delay': '0s' }">
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<h2 class="card-title">{{ solutions[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
|
||||
class="solution-card"
|
||||
style="height: auto"
|
||||
:style="{ '--delay': '0.4s' }"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<h2 class="card-title">{{ solutions[2].title }}</h2>
|
||||
</div>
|
||||
<ul class="card-content">
|
||||
<li
|
||||
v-for="(point, pIndex) in solutions[2].points"
|
||||
:key="pIndex"
|
||||
class="content-point"
|
||||
>
|
||||
<div class="point-icon">➤</div>
|
||||
<div class="point-text">{{ point }}</div>
|
||||
</li>
|
||||
<li style="padding-bottom: 105px"></li>
|
||||
</ul>
|
||||
</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>
|
||||
</ul>
|
||||
<!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
|
||||
<div
|
||||
v-for="(solution, sIndex) in solutions"
|
||||
:key="sIndex"
|
||||
class="featured-solution"
|
||||
>
|
||||
<div
|
||||
class="solution-card"
|
||||
:style="{ '--delay': `${sIndex * 0.2}s` }"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<h2 class="card-title">{{ solution.title }}</h2>
|
||||
</div>
|
||||
<ul class="card-content">
|
||||
<li
|
||||
v-for="(point, pIndex) in solution.points"
|
||||
:key="pIndex"
|
||||
class="content-point"
|
||||
>
|
||||
<div class="point-icon">•</div>
|
||||
<div style="font-size: 18px" class="point-text">
|
||||
{{ point }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -163,34 +97,10 @@ const solutions = computed(() => [
|
||||
|
||||
<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 {
|
||||
font-size: 40px;
|
||||
color: #2c3e50;
|
||||
color: black;
|
||||
margin-bottom: 2rem;
|
||||
animation: slideIn 1s ease;
|
||||
}
|
||||
@ -199,7 +109,7 @@ const solutions = computed(() => [
|
||||
margin: 0 auto;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: #5a6d80;
|
||||
color: black;
|
||||
}
|
||||
|
||||
:root {
|
||||
@ -228,22 +138,12 @@ const solutions = computed(() => [
|
||||
/* 标题区 - 紫色渐变 */
|
||||
.hero-section {
|
||||
background: var(--primary-gradient);
|
||||
padding: 10rem 0 8rem;
|
||||
padding: 5rem 0 0rem;
|
||||
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;
|
||||
@ -254,11 +154,6 @@ const solutions = computed(() => [
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* 解决方案网格 */
|
||||
.solution-grid {
|
||||
padding: 6rem 0 4rem;
|
||||
}
|
||||
|
||||
.solution-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -275,10 +170,7 @@ const solutions = computed(() => [
|
||||
|
||||
.featured-solution {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.solution-card {
|
||||
height: 350px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -314,39 +206,15 @@ const solutions = computed(() => [
|
||||
|
||||
/* 卡片公共样式 */
|
||||
.solution-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
animation: cardEnter 0.6s ease forwards;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(137, 91, 255, 0.2);
|
||||
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 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@ -377,7 +245,7 @@ const solutions = computed(() => [
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
color: var(--primary-color);
|
||||
color: #4a3a6b;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -385,7 +253,7 @@ const solutions = computed(() => [
|
||||
.point-text {
|
||||
color: #4a3a6b;
|
||||
line-height: 1.6;
|
||||
font-size: 1rem;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@keyframes cardEnter {
|
||||
|
||||
@ -4,115 +4,49 @@
|
||||
<!-- 渐变背景标题区 - 增加层次感 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="title-wrapper">
|
||||
<h1 class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="hero-description">
|
||||
<h2 class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h2>
|
||||
<div style="font-size: 18px" class="hero-description">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 业务核心解决方案 -->
|
||||
<main class="container">
|
||||
<main style="margin-top: 40px" class="container">
|
||||
<section>
|
||||
<h1 class="hero-title">
|
||||
<h1 style="font-size: 30px" class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<!-- 解决方案网格 - 响应式弹性布局 -->
|
||||
<div class="solution-grid">
|
||||
<!-- 主推解决方案组 -->
|
||||
<div class="solution-group">
|
||||
<div class="featured-solution">
|
||||
<div class="solution-card" :style="{ '--delay': '0s' }">
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<h2 class="card-title">{{ solutions[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
|
||||
class="solution-card"
|
||||
style="height: auto"
|
||||
:style="{ '--delay': '0.4s' }"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<h2 class="card-title">{{ solutions[2].title }}</h2>
|
||||
</div>
|
||||
<ul class="card-content">
|
||||
<li
|
||||
v-for="(point, pIndex) in solutions[2].points"
|
||||
:key="pIndex"
|
||||
class="content-point"
|
||||
>
|
||||
<div class="point-icon">➤</div>
|
||||
<div class="point-text">{{ point }}</div>
|
||||
</li>
|
||||
<li style="padding-bottom: 45px"></li>
|
||||
</ul>
|
||||
</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>
|
||||
</ul>
|
||||
<!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
|
||||
<div
|
||||
v-for="(solution, sIndex) in solutions"
|
||||
:key="sIndex"
|
||||
class="featured-solution"
|
||||
>
|
||||
<div
|
||||
class="solution-card"
|
||||
:style="{ '--delay': `${sIndex * 0.2}s` }"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<h2 class="card-title">{{ solution.title }}</h2>
|
||||
</div>
|
||||
<ul class="card-content">
|
||||
<li
|
||||
v-for="(point, pIndex) in solution.points"
|
||||
:key="pIndex"
|
||||
class="content-point"
|
||||
>
|
||||
<div class="point-icon">•</div>
|
||||
<div style="font-size: 18px" class="point-text">
|
||||
{{ point }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -163,34 +97,10 @@ const solutions = computed(() => [
|
||||
|
||||
<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 {
|
||||
font-size: 40px;
|
||||
color: #2c3e50;
|
||||
color: black;
|
||||
margin-bottom: 2rem;
|
||||
animation: slideIn 1s ease;
|
||||
}
|
||||
@ -199,7 +109,7 @@ const solutions = computed(() => [
|
||||
margin: 0 auto;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: #5a6d80;
|
||||
color: black;
|
||||
}
|
||||
|
||||
:root {
|
||||
@ -228,22 +138,12 @@ const solutions = computed(() => [
|
||||
/* 标题区 - 紫色渐变 */
|
||||
.hero-section {
|
||||
background: var(--primary-gradient);
|
||||
padding: 10rem 0 8rem;
|
||||
padding: 5rem 0 0rem;
|
||||
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;
|
||||
@ -254,11 +154,6 @@ const solutions = computed(() => [
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* 解决方案网格 */
|
||||
.solution-grid {
|
||||
padding: 6rem 0 4rem;
|
||||
}
|
||||
|
||||
.solution-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -275,10 +170,7 @@ const solutions = computed(() => [
|
||||
|
||||
.featured-solution {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.solution-card {
|
||||
height: 350px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -314,39 +206,15 @@ const solutions = computed(() => [
|
||||
|
||||
/* 卡片公共样式 */
|
||||
.solution-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
animation: cardEnter 0.6s ease forwards;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(137, 91, 255, 0.2);
|
||||
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 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@ -377,7 +245,7 @@ const solutions = computed(() => [
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
color: var(--primary-color);
|
||||
color: #4a3a6b;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -385,7 +253,7 @@ const solutions = computed(() => [
|
||||
.point-text {
|
||||
color: #4a3a6b;
|
||||
line-height: 1.6;
|
||||
font-size: 1rem;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@keyframes cardEnter {
|
||||
|
||||
@ -1,118 +1,53 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="business-page">
|
||||
<!-- 渐变背景标题区 - 增加层次感 -->
|
||||
<!-- 渐变背景标题区 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="title-wrapper">
|
||||
<h1 class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="hero-description">
|
||||
<h1 style="font-size: 40px" class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h1>
|
||||
<div style="font-size: 18px" class="hero-description">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 业务核心解决方案 -->
|
||||
<main class="container">
|
||||
<main style="margin-top: 40px" class="container">
|
||||
<section>
|
||||
<h1 class="hero-title">
|
||||
<h1 style="font-size: 40px" class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<!-- 解决方案网格 - 响应式弹性布局 -->
|
||||
<div class="solution-grid">
|
||||
<!-- 主推解决方案组 -->
|
||||
<div class="solution-group">
|
||||
<div class="featured-solution">
|
||||
<div class="solution-card" :style="{ '--delay': '0s' }">
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<h2 class="card-title">{{ solutions[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
|
||||
class="solution-card"
|
||||
style="height: auto"
|
||||
:style="{ '--delay': '0.4s' }"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<h2 class="card-title">{{ solutions[2].title }}</h2>
|
||||
</div>
|
||||
<ul class="card-content">
|
||||
<li
|
||||
v-for="(point, pIndex) in solutions[2].points"
|
||||
:key="pIndex"
|
||||
class="content-point"
|
||||
>
|
||||
<div class="point-icon">➤</div>
|
||||
<div class="point-text">{{ point }}</div>
|
||||
</li>
|
||||
<li style="padding-bottom: 45px"></li>
|
||||
</ul>
|
||||
</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>
|
||||
</ul>
|
||||
<!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
|
||||
<div
|
||||
v-for="(solution, sIndex) in solutions"
|
||||
:key="sIndex"
|
||||
class="featured-solution"
|
||||
>
|
||||
<div
|
||||
class="solution-card"
|
||||
:style="{ '--delay': `${sIndex * 0.2}s` }"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<h2 class="card-title">{{ solution.title }}</h2>
|
||||
</div>
|
||||
<ul class="card-content">
|
||||
<li
|
||||
v-for="(point, pIndex) in solution.points"
|
||||
:key="pIndex"
|
||||
class="content-point"
|
||||
>
|
||||
<div class="point-icon">•</div>
|
||||
<div style="font-size: 18px" class="point-text">
|
||||
{{ point }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -162,34 +97,23 @@ const solutions = computed(() => [
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 基础样式 */
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* 标题区样式 */
|
||||
/* 标题区 - 紫色渐变 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
|
||||
padding: 8rem 0 6rem;
|
||||
background: var(--primary-gradient);
|
||||
padding: 5rem 0 0rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-section::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: white;
|
||||
transform: skewY(-3deg);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 40px;
|
||||
color: #2c3e50;
|
||||
color: black;
|
||||
margin-bottom: 2rem;
|
||||
animation: slideIn 1s ease;
|
||||
}
|
||||
@ -198,7 +122,7 @@ const solutions = computed(() => [
|
||||
margin: 0 auto;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: #5a6d80;
|
||||
color: black;
|
||||
}
|
||||
|
||||
:root {
|
||||
@ -211,6 +135,7 @@ const solutions = computed(() => [
|
||||
var(--primary-color) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
background-size: 100% 100%;
|
||||
@ -218,99 +143,29 @@ const solutions = computed(() => [
|
||||
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 {
|
||||
padding: 6rem 0 4rem;
|
||||
}
|
||||
|
||||
.solution-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0rem 0 4rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr; /* 默认单列（移动端） */
|
||||
gap: 3rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
/* 桌面端布局（>=768px） */
|
||||
@media (min-width: 768px) {
|
||||
.solution-group {
|
||||
flex-direction: row;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.featured-solution {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.solution-card {
|
||||
height: 350px;
|
||||
/* 中等屏幕（768px-1439px） - 单列布局 */
|
||||
@media (min-width: 768px) and (max-width: 1439px) {
|
||||
.solution-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端布局（<768px） */
|
||||
@media (max-width: 767px) {
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
}
|
||||
|
||||
.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;
|
||||
/* 大屏幕（≥1440px） - 双列布局 */
|
||||
@media (min-width: 1440px) {
|
||||
.solution-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片公共样式 */
|
||||
/* 卡片样式 */
|
||||
.solution-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
@ -322,22 +177,17 @@ const solutions = computed(() => [
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
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: "";
|
||||
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;
|
||||
height: 4px;
|
||||
background: var(--primary-gradient);
|
||||
}
|
||||
|
||||
.solution-card:hover {
|
||||
@ -355,6 +205,7 @@ const solutions = computed(() => [
|
||||
background: var(--primary-gradient);
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.solution-card:hover .decorative-line {
|
||||
@ -374,8 +225,12 @@ const solutions = computed(() => [
|
||||
border-bottom: 1px solid rgba(137, 91, 255, 0.1);
|
||||
}
|
||||
|
||||
.content-point:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
color: var(--primary-color);
|
||||
color: #4a3a6b;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@ -4,21 +4,18 @@
|
||||
<!-- 渐变背景标题区 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="title-wrapper">
|
||||
<h1 class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="hero-description">
|
||||
<h1 style="font-size: 40px" class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h1>
|
||||
<div style="font-size: 18px" class="hero-description">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 业务核心解决方案 -->
|
||||
<main class="container">
|
||||
<main style="margin-top: 40px" class="container">
|
||||
<section>
|
||||
<h1 class="hero-title">
|
||||
<h1 style="font-size: 40px" class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||
</h1>
|
||||
</section>
|
||||
@ -45,8 +42,10 @@
|
||||
:key="pIndex"
|
||||
class="content-point"
|
||||
>
|
||||
<div class="point-icon">➤</div>
|
||||
<div class="point-text">{{ point }}</div>
|
||||
<div class="point-icon">•</div>
|
||||
<div style="font-size: 18px" class="point-text">
|
||||
{{ point }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -98,56 +97,33 @@ const solutions = computed(() => [
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 基础样式 */
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
max-width: 1600px;
|
||||
}
|
||||
|
||||
/* 标题区样式 */
|
||||
/* 标题区 - 紫色渐变 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
|
||||
padding: 8rem 0 6rem;
|
||||
background: var(--primary-gradient);
|
||||
padding: 5rem 0 0rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-section::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: white;
|
||||
transform: skewY(-3deg);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
color: #2c3e50;
|
||||
font-size: 40px;
|
||||
color: black;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
animation: slideIn 1s ease;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: #5a6d80;
|
||||
color: black;
|
||||
}
|
||||
|
||||
:root {
|
||||
@ -170,7 +146,7 @@ const solutions = computed(() => [
|
||||
|
||||
/* 解决方案网格 - 响应式布局 */
|
||||
.solution-grid {
|
||||
padding: 6rem 0;
|
||||
padding: 0rem 0 4rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr; /* 默认单列（移动端） */
|
||||
gap: 3rem;
|
||||
@ -255,7 +231,7 @@ const solutions = computed(() => [
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
color: var(--primary-color);
|
||||
color: #4a3a6b;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<div class="committees-page">
|
||||
<!-- 标题区 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<h1 style="font-size: 40px">Committee Composition</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||
</div>
|
||||
|
||||
<!-- 委员会表格 -->
|
||||
<div class="container">
|
||||
@ -35,7 +34,11 @@
|
||||
<div class="director-info">
|
||||
<div class="avatar"></div>
|
||||
<div>
|
||||
<router-link :to="'/boarddirectors'" class="director-link">
|
||||
<router-link
|
||||
:to="'/boarddirectors'"
|
||||
style="font-size: 18px"
|
||||
class="director-link"
|
||||
>
|
||||
{{ director.name }}
|
||||
</router-link>
|
||||
<!-- <p class="director-title">{{ director.title }}</p> -->
|
||||
@ -136,6 +139,26 @@ const getCommitteeRole = (name, committee) => {
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
--primary: #895bff;
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<div class="committees-page">
|
||||
<!-- 标题区 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<h1 style="font-size: 40px">Committee Composition</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||
</div>
|
||||
|
||||
<!-- 委员会表格 -->
|
||||
<div class="container">
|
||||
@ -35,7 +34,11 @@
|
||||
<div class="director-info">
|
||||
<div class="avatar"></div>
|
||||
<div>
|
||||
<router-link :to="'/boarddirectors'" class="director-link">
|
||||
<router-link
|
||||
:to="'/boarddirectors'"
|
||||
style="font-size: 18px"
|
||||
class="director-link"
|
||||
>
|
||||
{{ director.name }}
|
||||
</router-link>
|
||||
<!-- <p class="director-title">{{ director.title }}</p> -->
|
||||
@ -151,7 +154,26 @@ const getCommitteeRole = (name, committee) => {
|
||||
background-repeat: no-repeat;
|
||||
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 {
|
||||
background: linear-gradient(
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<div class="board-members-page">
|
||||
<!-- 页面头部 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<h1 class="page-title">Committee Composition</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||
</div>
|
||||
<!-- 移动端视图 -->
|
||||
<div class="container">
|
||||
<div
|
||||
@ -128,6 +125,26 @@ const getInitials = (name) => {
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
--primary: #895bff;
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<div class="board-members-page">
|
||||
<!-- 页面头部 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<h1 class="page-title">Committee Composition</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Committee Composition</h1>
|
||||
</div>
|
||||
<!-- 移动端视图 -->
|
||||
<div class="container">
|
||||
<div
|
||||
@ -128,6 +125,26 @@ const getInitials = (name) => {
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
--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>
|
||||
<header className="header">
|
||||
1440
|
||||
</header>
|
||||
<main ref="main">
|
||||
<div class="home-page">
|
||||
<div class="directors-page">
|
||||
<h1 class="page-title">Board of Directors</h1>
|
||||
<n-divider />
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="home-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 />
|
||||
|
||||
<div class="directors-list">
|
||||
|
||||
@ -1,7 +1,139 @@
|
||||
<template>
|
||||
<div class="home-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 />
|
||||
|
||||
<div class="directors-list">
|
||||
|
||||
@ -1,26 +1,18 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="company-overview">
|
||||
<!-- 顶部大图区域 -->
|
||||
<div class="hero-section">
|
||||
<transition name="fade-up" appear>
|
||||
<n-h1 class="hero-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETWO.TITLE")
|
||||
}}</n-h1>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- 公司简介部分 -->
|
||||
<!-- 公司概况 -->
|
||||
<section
|
||||
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") }}
|
||||
</h2>
|
||||
</h1>
|
||||
<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.CONTENTTHREE") }}</p> -->
|
||||
</div>
|
||||
@ -28,21 +20,17 @@
|
||||
|
||||
<!-- 使命愿景卡片 -->
|
||||
<section class="mission-section">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||
</h1>
|
||||
<div class="mission-cards">
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<n-h3 class="card-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
||||
}}</n-h3>
|
||||
<n-p class="card-content">{{
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
<br />
|
||||
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<n-h3 class="card-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
||||
}}</n-h3>
|
||||
<n-p class="card-content">{{
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
@ -52,9 +40,9 @@
|
||||
<!-- 里程碑时间轴 -->
|
||||
<!-- 里程碑时间轴 -->
|
||||
<section class="section timeline-section">
|
||||
<n-h2 class="section-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
|
||||
}}</n-h2>
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
|
||||
</h1>
|
||||
<div class="timeline">
|
||||
<!-- 1977-2015 -->
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
@ -64,12 +52,12 @@
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -84,12 +72,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -104,12 +92,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -124,12 +112,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -144,27 +132,27 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -172,16 +160,17 @@
|
||||
</div>
|
||||
</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">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
||||
}}</n-p>
|
||||
<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")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@ -210,7 +199,7 @@ const stats = ref([
|
||||
.company-overview {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
/* padding: 0 20px; */
|
||||
}
|
||||
|
||||
/* 顶部大图区域 */
|
||||
@ -242,7 +231,7 @@ const stats = ref([
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.2rem;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@ -1,26 +1,18 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="company-overview">
|
||||
<!-- 顶部大图区域 -->
|
||||
<div class="hero-section">
|
||||
<transition name="fade-up" appear>
|
||||
<n-h1 class="hero-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETWO.TITLE")
|
||||
}}</n-h1>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- 公司简介部分 -->
|
||||
<!-- 公司概况 -->
|
||||
<section
|
||||
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") }}
|
||||
</h2>
|
||||
</h1>
|
||||
<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.CONTENTTHREE") }}</p> -->
|
||||
</div>
|
||||
@ -28,21 +20,17 @@
|
||||
|
||||
<!-- 使命愿景卡片 -->
|
||||
<section class="mission-section">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||
</h1>
|
||||
<div class="mission-cards">
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<n-h3 class="card-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
||||
}}</n-h3>
|
||||
<n-p class="card-content">{{
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
<br />
|
||||
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<n-h3 class="card-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
||||
}}</n-h3>
|
||||
<n-p class="card-content">{{
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
@ -52,9 +40,9 @@
|
||||
<!-- 里程碑时间轴 -->
|
||||
<!-- 里程碑时间轴 -->
|
||||
<section class="section timeline-section">
|
||||
<n-h2 class="section-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
|
||||
}}</n-h2>
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
|
||||
</h1>
|
||||
<div class="timeline">
|
||||
<!-- 1977-2015 -->
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
@ -64,12 +52,12 @@
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -84,12 +72,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -104,12 +92,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -124,12 +112,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -144,27 +132,27 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -173,15 +161,18 @@
|
||||
</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">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
||||
}}</n-p>
|
||||
<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")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@ -210,7 +201,7 @@ const stats = ref([
|
||||
.company-overview {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
/* padding: 0 20px; */
|
||||
}
|
||||
|
||||
/* 顶部大图区域 */
|
||||
@ -242,7 +233,7 @@ const stats = ref([
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.2rem;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@ -1,26 +1,18 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="company-overview">
|
||||
<!-- 顶部大图区域 -->
|
||||
<div class="hero-section">
|
||||
<transition name="fade-up" appear>
|
||||
<n-h1 class="hero-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETWO.TITLE")
|
||||
}}</n-h1>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- 公司简介部分 -->
|
||||
<!-- 公司概况 -->
|
||||
<section
|
||||
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") }}
|
||||
</h2>
|
||||
</h1>
|
||||
<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.CONTENTTHREE") }}</p> -->
|
||||
</div>
|
||||
@ -30,19 +22,16 @@
|
||||
<section class="mission-section">
|
||||
<div class="mission-cards">
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<n-h3 class="card-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
||||
}}</n-h3>
|
||||
<n-p class="card-content">{{
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||
</h1>
|
||||
<br />
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
<br />
|
||||
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<n-h3 class="card-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
||||
}}</n-h3>
|
||||
<n-p class="card-content">{{
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
@ -64,12 +53,12 @@
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -84,12 +73,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -104,12 +93,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -124,12 +113,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -144,27 +133,27 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -173,15 +162,17 @@
|
||||
</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">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
||||
}}</n-p>
|
||||
<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")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@ -209,7 +200,7 @@ const stats = ref([
|
||||
}
|
||||
.company-overview {
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 顶部大图区域 */
|
||||
@ -241,7 +232,7 @@ const stats = ref([
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.2rem;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@ -1,26 +1,18 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="company-overview">
|
||||
<!-- 顶部大图区域 -->
|
||||
<div class="hero-section">
|
||||
<transition name="fade-up" appear>
|
||||
<n-h1 class="hero-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETWO.TITLE")
|
||||
}}</n-h1>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- 公司简介部分 -->
|
||||
<!-- 公司概况 -->
|
||||
<section
|
||||
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") }}
|
||||
</h2>
|
||||
</h1>
|
||||
<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.CONTENTTHREE") }}</p> -->
|
||||
</div>
|
||||
@ -28,21 +20,17 @@
|
||||
|
||||
<!-- 使命愿景卡片 -->
|
||||
<section class="mission-section">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||
</h1>
|
||||
<div class="mission-cards">
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<n-h3 class="card-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
||||
}}</n-h3>
|
||||
<n-p class="card-content">{{
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
<br />
|
||||
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<n-h3 class="card-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
|
||||
}}</n-h3>
|
||||
<n-p class="card-content">{{
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
@ -52,9 +40,9 @@
|
||||
<!-- 里程碑时间轴 -->
|
||||
<!-- 里程碑时间轴 -->
|
||||
<section class="section timeline-section">
|
||||
<n-h2 class="section-title">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
|
||||
}}</n-h2>
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
|
||||
</h1>
|
||||
<div class="timeline">
|
||||
<!-- 1977-2015 -->
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
@ -64,12 +52,12 @@
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -84,12 +72,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -104,12 +92,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -124,12 +112,12 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -144,27 +132,27 @@
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
|
||||
}}</n-p>
|
||||
<br />
|
||||
|
||||
<n-p class="timeline-desc">{{
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
|
||||
}}</n-p>
|
||||
</div>
|
||||
@ -173,15 +161,17 @@
|
||||
</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">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
|
||||
}}</n-p>
|
||||
<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")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@ -202,14 +192,14 @@ const stats = ref([
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
background-image: url("@/assets/image/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.company-overview {
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
/* padding: 0 20px; */
|
||||
}
|
||||
|
||||
/* 顶部大图区域 */
|
||||
@ -241,7 +231,7 @@ const stats = ref([
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.2rem;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@ -25,13 +25,17 @@
|
||||
class="result-item"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div class="pdf-icon">
|
||||
<a :href="item.url" target="_blank">
|
||||
<img src="@/assets/image/pdf.png" alt="PDF" />
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="pdf-icon"
|
||||
@click="downloadPdf(item.url)"
|
||||
style="color: #2979ff; cursor: pointer"
|
||||
>
|
||||
<img src="@/assets/image/pdf.png" alt="PDF" />
|
||||
{{ t("financialinformation.quarterlyresults.download") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -341,6 +345,31 @@ const handleSearch = () => {
|
||||
// 搜索处理逻辑
|
||||
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>
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
@ -387,7 +416,7 @@ const handleSearch = () => {
|
||||
.result-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
@ -401,10 +430,6 @@ const handleSearch = () => {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.result-description {
|
||||
|
||||
@ -25,13 +25,16 @@
|
||||
class="result-item"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div class="pdf-icon">
|
||||
<a :href="item.url" target="_blank">
|
||||
<img src="@/assets/image/pdf.png" alt="PDF" />
|
||||
</a>
|
||||
<div
|
||||
class="pdf-icon"
|
||||
@click="downloadPdf(item.url)"
|
||||
style="color: #2979ff; cursor: pointer"
|
||||
>
|
||||
<img src="@/assets/image/pdf.png" alt="PDF" />
|
||||
{{ t("financialinformation.quarterlyresults.download") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -341,6 +344,32 @@ const handleSearch = () => {
|
||||
// 搜索处理逻辑
|
||||
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>
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
@ -387,7 +416,7 @@ const handleSearch = () => {
|
||||
.result-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
@ -401,10 +430,6 @@ const handleSearch = () => {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.result-description {
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<img
|
||||
src="@/assets/image/download.svg"
|
||||
style="width: 20px; height: 20px"
|
||||
@click="handleDownload(item.url)"
|
||||
@click="downloadPdf(item.url)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -345,10 +345,7 @@ const handleSearch = () => {
|
||||
console.log("搜索:", searchQuery.value);
|
||||
};
|
||||
|
||||
const handleDownload = (url) => {
|
||||
// 下载处理逻辑
|
||||
console.log("下载:", url);
|
||||
|
||||
const downloadPdf = (url) => {
|
||||
// 创建一个隐藏的a元素
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
@ -360,7 +357,6 @@ const handleDownload = (url) => {
|
||||
fileName = fileName.split(/[?_]/)[0];
|
||||
}
|
||||
link.download = fileName;
|
||||
link.target = "_blank";
|
||||
|
||||
// 对于移动设备，我们需要特殊处理
|
||||
const isMobile =
|
||||
@ -369,12 +365,15 @@ const handleDownload = (url) => {
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
// 在移动设备上，可能需要使用fetch下载文件并创建blob
|
||||
// 在移动设备上，使用fetch下载文件并直接触发下载，不使用blob URL进行预览
|
||||
fetch(url)
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
link.href = objectUrl;
|
||||
// 确保设置download属性并且不设置target="_blank"以避免预览
|
||||
link.download = fileName;
|
||||
link.target = "_self"; // 避免在新窗口打开
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
@ -386,11 +385,16 @@ const handleDownload = (url) => {
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("下载文件时出错:", error);
|
||||
// 如果fetch失败，回退到window.open
|
||||
window.open(url, "_blank");
|
||||
// 如果fetch失败，尝试直接下载
|
||||
link.href = url;
|
||||
link.download = fileName;
|
||||
link.target = "_self";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
});
|
||||
} else {
|
||||
// 桌面设备上直接点击链接
|
||||
// 桌面设备上直接点击链接下载
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
@ -475,10 +479,6 @@ const handleDownload = (url) => {
|
||||
margin-bottom: 8px;
|
||||
font-size: 92px;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.result-description {
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<img
|
||||
src="@/assets/image/download.svg"
|
||||
style="width: 20px; height: 20px"
|
||||
@click="handleDownload(item.url)"
|
||||
@click="downloadPdf(item.url)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -345,10 +345,7 @@ const handleSearch = () => {
|
||||
console.log("搜索:", searchQuery.value);
|
||||
};
|
||||
|
||||
const handleDownload = (url) => {
|
||||
// 下载处理逻辑
|
||||
console.log("下载:", url);
|
||||
|
||||
const downloadPdf = (url) => {
|
||||
// 创建一个隐藏的a元素
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
@ -360,7 +357,6 @@ const handleDownload = (url) => {
|
||||
fileName = fileName.split(/[?_]/)[0];
|
||||
}
|
||||
link.download = fileName;
|
||||
link.target = "_blank";
|
||||
|
||||
// 对于移动设备，我们需要特殊处理
|
||||
const isMobile =
|
||||
@ -369,12 +365,15 @@ const handleDownload = (url) => {
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
// 在移动设备上，可能需要使用fetch下载文件并创建blob
|
||||
// 在移动设备上，使用fetch下载文件并直接触发下载，不使用blob URL进行预览
|
||||
fetch(url)
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
link.href = objectUrl;
|
||||
// 确保设置download属性并且不设置target="_blank"以避免预览
|
||||
link.download = fileName;
|
||||
link.target = "_self"; // 避免在新窗口打开
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
@ -386,11 +385,16 @@ const handleDownload = (url) => {
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("下载文件时出错:", error);
|
||||
// 如果fetch失败，回退到window.open
|
||||
window.open(url, "_blank");
|
||||
// 如果fetch失败，尝试直接下载
|
||||
link.href = url;
|
||||
link.download = fileName;
|
||||
link.target = "_self";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
});
|
||||
} else {
|
||||
// 桌面设备上直接点击链接
|
||||
// 桌面设备上直接点击链接下载
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
@ -475,10 +479,6 @@ const handleDownload = (url) => {
|
||||
margin-bottom: 8px;
|
||||
font-size: 50px;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.result-description {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="title mb-[50px] text-center">
|
||||
<div style="font-size: 40px; margin-top: 60px">Corporate Governance</div>
|
||||
<div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@ -117,7 +116,6 @@ const state = reactive({
|
||||
<style scoped lang="scss">
|
||||
/* 标题样式 */
|
||||
.title h1 {
|
||||
font-family: "Georgia", serif;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="title mb-[50px] text-center">
|
||||
<div style="font-size: 40px; margin-top: 60px">Corporate Governance</div>
|
||||
<div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@ -117,7 +116,6 @@ const state = reactive({
|
||||
<style scoped lang="scss">
|
||||
/* 标题样式 */
|
||||
.title h1 {
|
||||
font-family: "Georgia", serif;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 class="text-5xl font-light text-gray-800 mb-4 tracking-tight">
|
||||
Corporate Governance
|
||||
</h1>
|
||||
<div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
@ -115,7 +112,6 @@ const state = reactive({
|
||||
<style scoped lang="scss">
|
||||
/* 标题样式 */
|
||||
.title h1 {
|
||||
font-family: "Georgia", serif;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<div class="title mb-[50px] text-center">
|
||||
<h1 class="text-5xl font-light text-gray-800 mb-4 tracking-tight">
|
||||
Corporate Governance
|
||||
</h1>
|
||||
<div class="w-24 h-1 bg-[#895bff] mx-auto"></div>
|
||||
<h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
@ -115,7 +112,6 @@ const state = reactive({
|
||||
<style scoped lang="scss">
|
||||
/* 标题样式 */
|
||||
.title h1 {
|
||||
font-family: "Georgia", serif;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
|
||||
@ -249,7 +249,7 @@ const scrollToTop = () => {
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getPageDefaultData();
|
||||
getPageData();
|
||||
});
|
||||
|
||||
const getPageDefaultData = async () => {
|
||||
|
||||
@ -249,13 +249,13 @@ const scrollToTop = () => {
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getPageDefaultData();
|
||||
getPageData();
|
||||
});
|
||||
|
||||
const getPageDefaultData = async () => {
|
||||
try {
|
||||
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);
|
||||
let originalData = res.data.data;
|
||||
|
||||
|
||||
@ -248,7 +248,7 @@ const scrollToTop = () => {
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getPageDefaultData();
|
||||
getPageData();
|
||||
});
|
||||
|
||||
const getPageDefaultData = async () => {
|
||||
|
||||
@ -249,7 +249,7 @@ const scrollToTop = () => {
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getPageDefaultData();
|
||||
getPageData();
|
||||
});
|
||||
|
||||
const getPageDefaultData = async () => {
|
||||
|
||||
@ -105,7 +105,6 @@ const getInitials = (name) => {
|
||||
color: white;
|
||||
padding: 120px 0;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
/* 动画 */
|
||||
|
||||
@ -105,7 +105,6 @@ const getInitials = (name) => {
|
||||
color: white;
|
||||
padding: 120px 0;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
/* 动画 */
|
||||
|
||||
@ -25,7 +25,8 @@
|
||||
class="company-overview"
|
||||
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>
|
||||
<div class="content-block">
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||
@ -39,84 +40,6 @@
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 使命与愿景 -->
|
||||
<!-- <section
|
||||
class="mission-vision"
|
||||
style="
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background: #f8fafc;
|
||||
"
|
||||
>
|
||||
<h2 class="section-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
|
||||
class="achievements"
|
||||
@ -124,7 +47,7 @@
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background: #f8fafc;
|
||||
background: #fff;
|
||||
"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
@ -143,19 +66,19 @@
|
||||
<div class="news-card">
|
||||
<!-- <div class="news-date">De 15. 2023</div> -->
|
||||
<!-- <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") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
|
||||
</p>
|
||||
<!-- <a href="#" class="news-link"
|
||||
@ -174,36 +97,51 @@
|
||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||
<div class="stock-data">
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
<span style="font-size: 18px" class="data-label"> Time </span>
|
||||
<span style="font-size: 18px" class="data-value">{{
|
||||
formatted
|
||||
}}</span>
|
||||
<span class="data-value">${{ stockQuote.Open }}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
}}</span>
|
||||
<span class="data-value positive"
|
||||
>{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>${{ stockQuote.Open }}</span
|
||||
>
|
||||
</div>
|
||||
<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")
|
||||
}}</span>
|
||||
<span class="data-value">NASDAQ: MINM</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>NASDAQ: MINM</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
||||
}}</span>
|
||||
<span class="data-value">{{ stockQuote.Volume }}</span>
|
||||
<span style="font-size: 18px" class="data-value">{{
|
||||
stockQuote.Volume
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
||||
}}</span>
|
||||
<span class="data-value">${{ stockQuote.MarketCap }}</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>${{ stockQuote.MarketCap }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -255,10 +193,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, onUnmounted } from "vue";
|
||||
import { onMounted, ref, onUnmounted, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote } = useStockQuote();
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
|
||||
getStockQuate();
|
||||
|
||||
@ -302,7 +240,7 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background-image: url("@/assets/image/bg.png");
|
||||
background-image: url("@/assets/image/bg-mobile.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
class="company-overview"
|
||||
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>
|
||||
<div class="content-block">
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||
@ -39,84 +39,6 @@
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 使命与愿景 -->
|
||||
<!-- <section
|
||||
class="mission-vision"
|
||||
style="
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background: #f8fafc;
|
||||
"
|
||||
>
|
||||
<h2 class="section-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
|
||||
class="achievements"
|
||||
@ -124,7 +46,7 @@
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background: #f8fafc;
|
||||
background: #fff;
|
||||
"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
@ -173,6 +95,10 @@
|
||||
<div class="info-card stock-card">
|
||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||
<div class="stock-data">
|
||||
<div class="data-row">
|
||||
<span class="data-label"> Time </span>
|
||||
<span class="data-value">{{ sampleDate }}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
@ -184,7 +110,8 @@
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
}}</span>
|
||||
<span class="data-value positive"
|
||||
>{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
|
||||
>{{ stockQuote.change?.[0] || "--" }}
|
||||
{{ stockQuote.change?.[1] || "--" }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
@ -255,18 +182,18 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, onUnmounted } from "vue";
|
||||
import { onMounted, ref, onUnmounted, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote } = useStockQuote();
|
||||
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
getStockQuate();
|
||||
// 示例数据
|
||||
const sampleDate = ref(formatted);
|
||||
|
||||
const { t: $t } = useI18n();
|
||||
const contentRef = ref(null);
|
||||
const isInView = ref(false);
|
||||
let observer = null;
|
||||
|
||||
onMounted(() => {
|
||||
if (contentRef.value && "IntersectionObserver" in window) {
|
||||
observer = new IntersectionObserver(
|
||||
|
||||
@ -25,7 +25,8 @@
|
||||
class="company-overview"
|
||||
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>
|
||||
<div class="content-block">
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||
@ -39,84 +40,6 @@
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 使命与愿景 -->
|
||||
<!-- <section
|
||||
class="mission-vision"
|
||||
style="
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background: #f8fafc;
|
||||
"
|
||||
>
|
||||
<h2 class="section-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
|
||||
class="achievements"
|
||||
@ -124,7 +47,7 @@
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background: #f8fafc;
|
||||
background: #fff;
|
||||
"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
@ -143,19 +66,19 @@
|
||||
<div class="news-card">
|
||||
<!-- <div class="news-date">De 15. 2023</div> -->
|
||||
<!-- <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") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
|
||||
</p>
|
||||
<!-- <a href="#" class="news-link"
|
||||
@ -174,36 +97,51 @@
|
||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||
<div class="stock-data">
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
<span style="font-size: 18px" class="data-label"> Time </span>
|
||||
<span style="font-size: 18px" class="data-value">{{
|
||||
formatted
|
||||
}}</span>
|
||||
<span class="data-value">${{ stockQuote.Open }}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
}}</span>
|
||||
<span class="data-value positive"
|
||||
>{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>${{ stockQuote.Open }}</span
|
||||
>
|
||||
</div>
|
||||
<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")
|
||||
}}</span>
|
||||
<span class="data-value">NASDAQ: MINM</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>NASDAQ: MINM</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
||||
}}</span>
|
||||
<span class="data-value">{{ stockQuote.Volume }}</span>
|
||||
<span style="font-size: 18px" class="data-value">{{
|
||||
stockQuote.Volume
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
||||
}}</span>
|
||||
<span class="data-value">${{ stockQuote.MarketCap }}</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>${{ stockQuote.MarketCap }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -255,13 +193,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, onUnmounted } from "vue";
|
||||
import { onMounted, ref, onUnmounted, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote } = useStockQuote();
|
||||
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
getStockQuate();
|
||||
|
||||
const { t: $t } = useI18n();
|
||||
const contentRef = ref(null);
|
||||
const isInView = ref(false);
|
||||
|
||||
@ -25,7 +25,8 @@
|
||||
class="company-overview"
|
||||
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>
|
||||
<div class="content-block">
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||
@ -39,84 +40,6 @@
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 使命与愿景 -->
|
||||
<!-- <section
|
||||
class="mission-vision"
|
||||
style="
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background: #f8fafc;
|
||||
"
|
||||
>
|
||||
<h2 class="section-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
|
||||
class="achievements"
|
||||
@ -124,7 +47,7 @@
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background: #f8fafc;
|
||||
background: #fff;
|
||||
"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
@ -143,19 +66,19 @@
|
||||
<div class="news-card">
|
||||
<!-- <div class="news-date">De 15. 2023</div> -->
|
||||
<!-- <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") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
|
||||
</p>
|
||||
<p class="news-excerpt">
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
|
||||
</p>
|
||||
<!-- <a href="#" class="news-link"
|
||||
@ -174,36 +97,51 @@
|
||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||
<div class="stock-data">
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
<span style="font-size: 18px" class="data-label"> Time </span>
|
||||
<span style="font-size: 18px" class="data-value">{{
|
||||
formatted
|
||||
}}</span>
|
||||
<span class="data-value">${{ stockQuote.Open }}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
}}</span>
|
||||
<span class="data-value positive"
|
||||
>{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>${{ stockQuote.Open }}</span
|
||||
>
|
||||
</div>
|
||||
<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")
|
||||
}}</span>
|
||||
<span class="data-value">NASDAQ: MINM</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>NASDAQ: MINM</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
||||
}}</span>
|
||||
<span class="data-value">{{ stockQuote.Volume }}</span>
|
||||
<span style="font-size: 18px" class="data-value">{{
|
||||
stockQuote.Volume
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
||||
}}</span>
|
||||
<span class="data-value">${{ stockQuote.MarketCap }}</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>${{ stockQuote.MarketCap }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -255,10 +193,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, onUnmounted } from "vue";
|
||||
import { onMounted, ref, onUnmounted, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote } = useStockQuote();
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
|
||||
getStockQuate();
|
||||
|
||||
|
||||
@ -24,7 +24,9 @@ getStockQuate()
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<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 class="info-card">
|
||||
<div class="text-base text-gray-400">Day's Range</div>
|
||||
|
||||
@ -24,7 +24,9 @@ getStockQuate()
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<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 class="info-card">
|
||||
<div class="text-lg text-gray-400">Day's Range</div>
|
||||
|
||||
@ -20,7 +20,10 @@ getStockQuate();
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<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 class="info-card">
|
||||
<div class="text-xs text-gray-400">Day's Range</div>
|
||||
|
||||
@ -24,7 +24,9 @@ getStockQuate();
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<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 class="info-card">
|
||||
<div class="text-sm text-gray-400">Day's Range</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user