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

调整样式 修改文字 添加时间

Browse Source
This commit is contained in:
liwenhao 2025-05-26 15:14:44 +08:00
parent 1164d4ef7b
commit 28f6123e93
15 changed files with 454 additions and 1013 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/locales/en.js
View File

@ -632,7 +632,7 @@ export default {
}, },
SUBHEADINGTWO: "2020 : Merger & AI Advancement", SUBHEADINGTWO: "2020 : Merger & AI Advancement",
paragraphTwo: { paragraphTwo: {
ONE: "• November 2020: Merged with Minim Inc.; adopted Minim name/OTCQB ticker", ONE: "• November 2020: Merged with Minim Inc.; adopted Minim name/OTCQB ticker.",
TWO: "• Rolled out AI-driven Wi-Fi management and IoT security platform.", TWO: "• Rolled out AI-driven Wi-Fi management and IoT security platform.",
THREE: "", THREE: "",
}, },
@ -645,17 +645,17 @@ export default {
SUBHEADINGFOREFF: "2023 – 2024: Pivoting to A Software First Model", SUBHEADINGFOREFF: "2023 – 2024: Pivoting to A Software First Model",
paragraphFOUR: { paragraphFOUR: {
ONE: "• Enhanced its MinimOS cloud platform and API suite for ISPs/OEMs, with major deployments like Vox’s AI-driven Wi-Fi Home Manager.", ONE: "• Enhanced its MinimOS cloud platform and API suite for ISPs/OEMs, with major deployments like Vox’s AI-driven Wi-Fi Home Manager.",
TWO: "• Signed a merger agreement with e2Companies to broaden its technology and revenue base", TWO: "• Signed a merger agreement with e2Companies to broaden its technology and revenue base.",
THREE: "", THREE: "",
}, },
SUBHEADINGFIVE: "2025 Rebranding & New C-Suite", SUBHEADINGFIVE: "2025 Rebranding & New C-Suite",
paragraphFIVE: { paragraphFIVE: {
ONE: "• Officially rebranded from Minim Inc. to FiEE Inc.", ONE: "• Officially rebranded from Minim Inc. to FiEE, Inc.",
TWO: "• Appointed Li Wai Chung as CEO and Cao Yu as CFO.", TWO: "• Appointed Li Wai Chung as CEO and Cao Yu as CFO.",
THREE: THREE:
"• Leverage on foundation in IoT, connectivity and AI to pursue new business opportunities.", "• Leverage on foundation in IoT, connectivity and AI to pursue new business opportunities.",
FOUR: "• Launched SaaS product in the market to generate recurring revenue streams", FOUR: "• Launched SaaS product in the market to generate recurring revenue streams.",
FIVE: "• Acquisition of Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC", FIVE: "• Acquisition of Suzhou Yixuntong Network Technology Co., Ltd., a high growth technology service provider in PRC.",
}, },
}, },
TITLEFIVE: { TITLEFIVE: {
@ -676,30 +676,29 @@ export default {
paragraph: { paragraph: {
ONE: { ONE: {
TITLE: "(1)Cloud-Managed Connectivity (WiFi) Platform: ", TITLE: "(1)Cloud-Managed Connectivity (WiFi) Platform: ",
CONTENT: "•SaaS powering OS for consumers and SMBs ", CONTENT: "SaaS powering OS for consumers and SMBs ",
CONTENTTWO: CONTENTTWO: "AI-driven threat protection, and over-the-air updates",
"•AI-driven threat protection, and over-the-air updates",
}, },
TWO: { TWO: {
TITLE: "(2)IoT Hardware Sales & Licensing: ", TITLE: "(2)IoT Hardware Sales & Licensing: ",
CONTENT: CONTENT:
"•IoT products and technologies, including developing VR/AR online sharing technologies", "IoT products and technologies, including developing VR/AR online sharing technologies",
CONTENTTWO: "•IoT data collection, analysis and management", CONTENTTWO: "IoT data collection, analysis and management",
}, },
THREE: { THREE: {
TITLE: "(3)SAAS Solutions", TITLE: "(3)SAAS Solutions",
CONTENT: "•Internet sales and IoT support", CONTENT: "Internet sales and IoT support",
CONTENTTWO: "•KOL branding services", CONTENTTWO: "KOL branding services",
CONTENTTHREE: CONTENTTHREE:
"•AI-enabled content creation and fans habit analysis solutions", "AI-enabled content creation and fans habit analysis solutions",
}, },
FOUR: { FOUR: {
TITLE: "(4)Professional To-C and To-B Services & Support", TITLE: "(4)Professional To-C and To-B Services & Support",
CONTENT: CONTENT:
"•Managed-service agreements with ISPs and enterprise customers for network-support, security monitoring, and custom development", "Managed-service agreements with ISPs and enterprise customers for network-support, security monitoring, and custom development",
CONTENTTWO: "•KOL branding services", CONTENTTWO: "KOL branding services",
CONTENTTHREE: CONTENTTHREE:
"•AI-enabled content creation and fans habit analysis solutions", "AI-enabled content creation and fans habit analysis solutions",
}, },
}, },
}, },
@ -708,11 +707,12 @@ export default {
// 管理 // 管理
MANAGEMENT: { MANAGEMENT: {
ONE: { ONE: {
TITLE: "Wai Chung LI", TITLE: "Wai Chung Li",
TITLETWO: "Chief Executive Officer and President", TITLETWO: "Chief Executive Officer and President",
CONTENT: CONTENT:
"Mr. Li is the Chief Executive Officer and President, with extensive experience in accounting, corporate management and finance management. His role encompasses the oversight of our daily business operations and plays a vital part in the overall management of our Group.With a track record spanning prestigious roles at Deloitte China, Shanghai Prime Machinery Company Limited, Lens Technology Co., Ltd., and more, Mr. Li brings invaluable expertise to lead the team. He chaired Audit Committees for Fulu Holdings and Taizhou Water Group in Hong Kong, and Nedschroef in the Netherlands, showcasing his global leadership. Holding key positions in investment management, business consulting, and directorial roles in listedcompanies, his insights drive strategic decision-making. ", "Mr. Li is the Chief Executive Officer 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.",
CONTENTTWO: "", CONTENTTWO:
"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.",
CONTENTTHREE: "", CONTENTTHREE: "",
}, },
TWO: { TWO: {

171
src/views/BusinessServices/size1440/index.vue
View File

@ -4,115 +4,47 @@
<!-- 渐变背景标题区 - 增加层次感 --> <!-- 渐变背景标题区 - 增加层次感 -->
<section class="hero-section"> <section class="hero-section">
<div class="container"> <div class="container">
<div class="title-wrapper"> <div class="hero-title">
<h1 class="hero-title"> {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</h1>
</div> </div>
<div class="hero-description"> <div style="font-size: 18px" class="hero-description">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div> </div>
</div> </div>
</section> </section>
<!-- 业务核心解决方案 --> <!-- 业务核心解决方案 -->
<main class="container"> <main style="margin-top: 40px" class="container">
<section> <section>
<h1 class="hero-title"> <div class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</h1> </div>
</section> </section>
<!-- 解决方案网格 - 响应式弹性布局 -->
<div class="solution-grid"> <div class="solution-grid">
<!-- 主推解决方案组 --> <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
<div class="solution-group"> <div
<div class="featured-solution"> v-for="(solution, sIndex) in solutions"
<div class="solution-card" :style="{ '--delay': '0s' }"> :key="sIndex"
<div class="card-header"> class="featured-solution"
<div class="decorative-line"></div> >
<h2 class="card-title">{{ solutions[0].title }}</h2> <div
</div> class="solution-card"
<ul class="card-content"> :style="{ '--delay': `${sIndex * 0.2}s` }"
<li >
v-for="(point, pIndex) in solutions[0].points" <div class="card-header">
:key="pIndex" <div class="decorative-line"></div>
class="content-point" <h2 class="card-title">{{ solution.title }}</h2>
>
<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> </div>
<ul class="card-content">
<li
v-for="(point, pIndex) in solution.points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">•</div>
<div class="point-text">{{ point }}</div>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -163,34 +95,10 @@ const solutions = computed(() => [
<style scoped> <style scoped>
/* 基础样式 */ /* 基础样式 */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
/* 标题区样式 */
.hero-section {
background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
padding: 8rem 0 6rem;
position: relative;
overflow: hidden;
}
.hero-section::after {
content: "";
position: absolute;
bottom: -50px;
left: 0;
width: 100%;
height: 100px;
background: white;
transform: skewY(-3deg);
}
.hero-title { .hero-title {
font-size: 40px; font-size: 40px;
color: #2c3e50; color: black;
margin-bottom: 2rem; margin-bottom: 2rem;
animation: slideIn 1s ease; animation: slideIn 1s ease;
} }
@ -199,7 +107,7 @@ const solutions = computed(() => [
margin: 0 auto; margin: 0 auto;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
color: #5a6d80; color: black;
} }
:root { :root {
@ -228,22 +136,12 @@ const solutions = computed(() => [
/* 标题区 - 紫色渐变 */ /* 标题区 - 紫色渐变 */
.hero-section { .hero-section {
background: var(--primary-gradient); background: var(--primary-gradient);
padding: 10rem 0 8rem; padding: 5rem 0 0rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
color: white; color: white;
} }
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
no-repeat bottom/100% 30%;
}
.title-decoration { .title-decoration {
position: absolute; position: absolute;
bottom: -15px; bottom: -15px;
@ -256,7 +154,7 @@ const solutions = computed(() => [
/* 解决方案网格 */ /* 解决方案网格 */
.solution-grid { .solution-grid {
padding: 6rem 0 4rem; padding: 0rem 0 4rem;
} }
.solution-group { .solution-group {
@ -275,6 +173,7 @@ const solutions = computed(() => [
.featured-solution { .featured-solution {
flex: 1; flex: 1;
margin-top: 20px;
} }
.solution-card { .solution-card {
@ -377,7 +276,7 @@ const solutions = computed(() => [
} }
.point-icon { .point-icon {
color: var(--primary-color); color: #4a3a6b;
font-size: 1.2rem; font-size: 1.2rem;
flex-shrink: 0; flex-shrink: 0;
} }

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

@ -4,115 +4,47 @@
<!-- 渐变背景标题区 - 增加层次感 --> <!-- 渐变背景标题区 - 增加层次感 -->
<section class="hero-section"> <section class="hero-section">
<div class="container"> <div class="container">
<div class="title-wrapper"> <div class="hero-title">
<h1 class="hero-title"> {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</h1>
</div> </div>
<div class="hero-description"> <div style="font-size: 18px" class="hero-description">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div> </div>
</div> </div>
</section> </section>
<!-- 业务核心解决方案 --> <!-- 业务核心解决方案 -->
<main class="container"> <main style="margin-top: 40px" class="container">
<section> <section>
<h1 class="hero-title"> <div class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</h1> </div>
</section> </section>
<!-- 解决方案网格 - 响应式弹性布局 -->
<div class="solution-grid"> <div class="solution-grid">
<!-- 主推解决方案组 --> <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
<div class="solution-group"> <div
<div class="featured-solution"> v-for="(solution, sIndex) in solutions"
<div class="solution-card" :style="{ '--delay': '0s' }"> :key="sIndex"
<div class="card-header"> class="featured-solution"
<div class="decorative-line"></div> >
<h2 class="card-title">{{ solutions[0].title }}</h2> <div
</div> class="solution-card"
<ul class="card-content"> :style="{ '--delay': `${sIndex * 0.2}s` }"
<li >
v-for="(point, pIndex) in solutions[0].points" <div class="card-header">
:key="pIndex" <div class="decorative-line"></div>
class="content-point" <h2 class="card-title">{{ solution.title }}</h2>
>
<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> </div>
<ul class="card-content">
<li
v-for="(point, pIndex) in solution.points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">•</div>
<div class="point-text">{{ point }}</div>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -163,34 +95,10 @@ const solutions = computed(() => [
<style scoped> <style scoped>
/* 基础样式 */ /* 基础样式 */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
/* 标题区样式 */
.hero-section {
background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%);
padding: 8rem 0 6rem;
position: relative;
overflow: hidden;
}
.hero-section::after {
content: "";
position: absolute;
bottom: -50px;
left: 0;
width: 100%;
height: 100px;
background: white;
transform: skewY(-3deg);
}
.hero-title { .hero-title {
font-size: 40px; font-size: 40px;
color: #2c3e50; color: black;
margin-bottom: 2rem; margin-bottom: 2rem;
animation: slideIn 1s ease; animation: slideIn 1s ease;
} }
@ -199,7 +107,7 @@ const solutions = computed(() => [
margin: 0 auto; margin: 0 auto;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
color: #5a6d80; color: black;
} }
:root { :root {
@ -228,22 +136,12 @@ const solutions = computed(() => [
/* 标题区 - 紫色渐变 */ /* 标题区 - 紫色渐变 */
.hero-section { .hero-section {
background: var(--primary-gradient); background: var(--primary-gradient);
padding: 10rem 0 8rem; padding: 5rem 0 0rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
color: white; color: white;
} }
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
no-repeat bottom/100% 30%;
}
.title-decoration { .title-decoration {
position: absolute; position: absolute;
bottom: -15px; bottom: -15px;
@ -256,7 +154,7 @@ const solutions = computed(() => [
/* 解决方案网格 */ /* 解决方案网格 */
.solution-grid { .solution-grid {
padding: 6rem 0 4rem; padding: 0rem 0 4rem;
} }
.solution-group { .solution-group {
@ -275,6 +173,7 @@ const solutions = computed(() => [
.featured-solution { .featured-solution {
flex: 1; flex: 1;
margin-top: 20px;
} }
.solution-card { .solution-card {
@ -377,7 +276,7 @@ const solutions = computed(() => [
} }
.point-icon { .point-icon {
color: var(--primary-color); color: #4a3a6b;
font-size: 1.2rem; font-size: 1.2rem;
flex-shrink: 0; flex-shrink: 0;
} }

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

@ -1,118 +1,51 @@
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="business-page"> <div class="business-page">
<!-- 渐变背景标题区 - 增加层次感 --> <!-- 渐变背景标题区 -->
<section class="hero-section"> <section class="hero-section">
<div class="container"> <div class="container">
<div class="title-wrapper"> <div style="font-size: 40px" class="hero-title">
<h1 class="hero-title"> {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</h1>
</div> </div>
<div class="hero-description"> <div style="font-size: 18px" class="hero-description">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div> </div>
</div> </div>
</section> </section>
<!-- 业务核心解决方案 --> <!-- 业务核心解决方案 -->
<main class="container"> <main style="margin-top: 40px" class="container">
<section> <section>
<h1 class="hero-title"> <div style="font-size: 40px" class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</h1> </div>
</section> </section>
<!-- 解决方案网格 - 响应式弹性布局 --> <!-- 解决方案网格 - 响应式弹性布局 -->
<div class="solution-grid"> <div class="solution-grid">
<!-- 主推解决方案组 --> <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
<div class="solution-group"> <div
<div class="featured-solution"> v-for="(solution, sIndex) in solutions"
<div class="solution-card" :style="{ '--delay': '0s' }"> :key="sIndex"
<div class="card-header"> class="featured-solution"
<div class="decorative-line"></div> >
<h2 class="card-title">{{ solutions[0].title }}</h2> <div
</div> class="solution-card"
<ul class="card-content"> :style="{ '--delay': `${sIndex * 0.2}s` }"
<li >
v-for="(point, pIndex) in solutions[0].points" <div class="card-header">
:key="pIndex" <div class="decorative-line"></div>
class="content-point" <h2 class="card-title">{{ solution.title }}</h2>
>
<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> </div>
<ul class="card-content">
<li
v-for="(point, pIndex) in solution.points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">•</div>
<div class="point-text">{{ point }}</div>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -162,34 +95,23 @@ const solutions = computed(() => [
</script> </script>
<style scoped> <style scoped>
/* 基础样式 */
.container { .container {
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; padding: 0 2rem;
} }
/* 标题区样式 */ /* 标题区 - 紫色渐变 */
.hero-section { .hero-section {
background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%); background: var(--primary-gradient);
padding: 8rem 0 6rem; padding: 5rem 0 0rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} color: white;
.hero-section::after {
content: "";
position: absolute;
bottom: -50px;
left: 0;
width: 100%;
height: 100px;
background: white;
transform: skewY(-3deg);
} }
.hero-title { .hero-title {
font-size: 40px; font-size: 40px;
color: #2c3e50; color: black;
margin-bottom: 2rem; margin-bottom: 2rem;
animation: slideIn 1s ease; animation: slideIn 1s ease;
} }
@ -198,7 +120,7 @@ const solutions = computed(() => [
margin: 0 auto; margin: 0 auto;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
color: #5a6d80; color: black;
} }
:root { :root {
@ -211,6 +133,7 @@ const solutions = computed(() => [
var(--primary-color) 100% var(--primary-color) 100%
); );
} }
.home-page { .home-page {
background-image: url("@/assets/image/bg-mobile.png"); background-image: url("@/assets/image/bg-mobile.png");
background-size: 100% 100%; background-size: 100% 100%;
@ -218,99 +141,29 @@ const solutions = computed(() => [
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.container { /* 解决方案网格 - 响应式布局 */
margin: 0 auto;
padding: 0 2rem;
}
/* 标题区 - 紫色渐变 */
.hero-section {
background: var(--primary-gradient);
padding: 10rem 0 8rem;
position: relative;
overflow: hidden;
color: white;
}
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
no-repeat bottom/100% 30%;
}
.title-decoration {
position: absolute;
bottom: -15px;
left: 0;
width: 80%;
height: 4px;
background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
}
/* 解决方案网格 */
.solution-grid { .solution-grid {
padding: 6rem 0 4rem; padding: 0rem 0 4rem;
} display: grid;
grid-template-columns: 1fr; /* 默认单列（移动端） */
.solution-group {
display: flex;
flex-direction: column;
gap: 3rem; gap: 3rem;
margin-bottom: 4rem;
} }
/* 桌面端布局（>=768px） */ /* 中等屏幕（768px-1439px） - 单列布局 */
@media (min-width: 768px) { @media (min-width: 768px) and (max-width: 1439px) {
.solution-group { .solution-grid {
flex-direction: row; grid-template-columns: 1fr;
gap: 4rem;
}
.featured-solution {
flex: 1;
}
.solution-card {
height: 350px;
} }
} }
/* 移动端布局（<768px） */ /* 大屏幕（≥1440px） - 双列布局 */
@media (max-width: 767px) { @media (min-width: 1440px) {
.home-page { .solution-grid {
background-image: url("@/assets/image/bg-mobile.png"); grid-template-columns: 1fr 1fr;
}
.hero-title {
font-size: 1.8rem;
}
.solution-group {
flex-direction: column;
gap: 2rem;
}
.featured-solution {
width: 100% !important; /* 强制占满容器 */
margin-bottom: 2rem;
}
.solution-card {
padding: 2rem;
height: auto;
}
.content-point {
padding: 1rem 0;
} }
} }
/* 卡片公共样式 */ /* 卡片样式 */
.solution-card { .solution-card {
background: white; background: white;
border-radius: 16px; border-radius: 16px;
@ -322,22 +175,17 @@ const solutions = computed(() => [
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(137, 91, 255, 0.2); border: 1px solid rgba(137, 91, 255, 0.2);
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%); transition: all 0.3s ease;
} }
.solution-card::after { .solution-card::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 4px;
background: linear-gradient( background: var(--primary-gradient);
135deg,
rgba(137, 91, 255, 0.03) 0%,
rgba(137, 91, 255, 0) 100%
);
z-index: -1;
} }
.solution-card:hover { .solution-card:hover {
@ -355,6 +203,7 @@ const solutions = computed(() => [
background: var(--primary-gradient); background: var(--primary-gradient);
margin-bottom: 1rem; margin-bottom: 1rem;
border-radius: 3px; border-radius: 3px;
transition: width 0.3s ease;
} }
.solution-card:hover .decorative-line { .solution-card:hover .decorative-line {
@ -374,8 +223,12 @@ const solutions = computed(() => [
border-bottom: 1px solid rgba(137, 91, 255, 0.1); border-bottom: 1px solid rgba(137, 91, 255, 0.1);
} }
.content-point:last-child {
border-bottom: none;
}
.point-icon { .point-icon {
color: var(--primary-color); color: #4a3a6b;
font-size: 1.2rem; font-size: 1.2rem;
flex-shrink: 0; flex-shrink: 0;
} }

62
src/views/BusinessServices/size768/index.vue
View File

@ -4,23 +4,20 @@
<!-- 渐变背景标题区 --> <!-- 渐变背景标题区 -->
<section class="hero-section"> <section class="hero-section">
<div class="container"> <div class="container">
<div class="title-wrapper"> <div style="font-size: 40px" class="hero-title">
<h1 class="hero-title"> {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</h1>
</div> </div>
<div class="hero-description"> <div style="font-size: 18px" class="hero-description">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div> </div>
</div> </div>
</section> </section>
<!-- 业务核心解决方案 --> <!-- 业务核心解决方案 -->
<main class="container"> <main style="margin-top: 40px" class="container">
<section> <section>
<h1 class="hero-title"> <div style="font-size: 40px" class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</h1> </div>
</section> </section>
<!-- 解决方案网格 - 响应式弹性布局 --> <!-- 解决方案网格 - 响应式弹性布局 -->
@ -45,7 +42,7 @@
:key="pIndex" :key="pIndex"
class="content-point" class="content-point"
> >
<div class="point-icon">➤</div> <div class="point-icon">•</div>
<div class="point-text">{{ point }}</div> <div class="point-text">{{ point }}</div>
</li> </li>
</ul> </ul>
@ -98,56 +95,33 @@ const solutions = computed(() => [
</script> </script>
<style scoped> <style scoped>
/* 基础样式 */
.container { .container {
max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; padding: 0 2rem;
max-width: 1600px;
} }
/* 标题区样式 */ /* 标题区 - 紫色渐变 */
.hero-section { .hero-section {
background: linear-gradient(135deg, #f8fbfe 0%, #e6f0ff 100%); background: var(--primary-gradient);
padding: 8rem 0 6rem; padding: 5rem 0 0rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} color: white;
.hero-section::after {
content: "";
position: absolute;
bottom: -50px;
left: 0;
width: 100%;
height: 100px;
background: white;
transform: skewY(-3deg);
} }
.hero-title { .hero-title {
font-size: 2.5rem; font-size: 40px;
color: #2c3e50; color: black;
margin-bottom: 2rem; margin-bottom: 2rem;
position: relative; animation: slideIn 1s ease;
}
.hero-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(135deg, #895bff 0%, #6a11cb 100%);
border-radius: 2px;
} }
.hero-description { .hero-description {
max-width: 1000px;
margin: 0 auto; margin: 0 auto;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
color: #5a6d80; color: black;
} }
:root { :root {
@ -170,7 +144,7 @@ const solutions = computed(() => [
/* 解决方案网格 - 响应式布局 */ /* 解决方案网格 - 响应式布局 */
.solution-grid { .solution-grid {
padding: 6rem 0; padding: 0rem 0 4rem;
display: grid; display: grid;
grid-template-columns: 1fr; /* 默认单列（移动端） */ grid-template-columns: 1fr; /* 默认单列（移动端） */
gap: 3rem; gap: 3rem;
@ -255,7 +229,7 @@ const solutions = computed(() => [
} }
.point-icon { .point-icon {
color: var(--primary-color); color: #4a3a6b;
font-size: 1.2rem; font-size: 1.2rem;
flex-shrink: 0; flex-shrink: 0;
} }

55
src/views/companyoverview/size1440/index.vue
View File

@ -1,26 +1,18 @@
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="company-overview"> <div class="company-overview">
<!-- 顶部大图区域 -->
<div class="hero-section">
<transition name="fade-up" appear>
<n-h1 class="hero-title">{{
$t("COMPANYOVERVIEW.TITLETWO.TITLE")
}}</n-h1>
</transition>
</div>
<!-- 公司简介部分 -->
<!-- 公司概况 --> <!-- 公司概况 -->
<section <section
class="company-overview" class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto"
> >
<h2 class="section-title"> <h2 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }} {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
</h2> </h2>
<div class="content-block"> <div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p> <div style="font-size: 18px">
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
</div>
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p> <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> --> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
</div> </div>
@ -33,16 +25,13 @@
<n-h3 class="card-title">{{ <n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.TITLETHREE.TITLE") $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3> }}</n-h3>
<n-p class="card-content">{{ <br />
<n-p style="font-size: 18px" class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT") $t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
}}</n-p> }}</n-p>
</n-card> <br />
<n-card hoverable class="mission-card" v-motion-pop> <n-p style="font-size: 18px" class="card-content">{{
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3>
<n-p class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO") $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
}}</n-p> }}</n-p>
</n-card> </n-card>
@ -64,12 +53,12 @@
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -84,12 +73,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -104,12 +93,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -124,12 +113,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -144,27 +133,27 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
}}</n-p> }}</n-p>
</div> </div>
@ -179,7 +168,7 @@
}}</n-h2> }}</n-h2>
<br /> <br />
<n-p class="section-content">{{ <n-p style="font-size: 18px" class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT") $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p> }}</n-p>
</section> </section>

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

@ -1,25 +1,15 @@
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="company-overview"> <div class="company-overview">
<!-- 顶部大图区域 -->
<div class="hero-section">
<transition name="fade-up" appear>
<n-h1 class="hero-title">{{
$t("COMPANYOVERVIEW.TITLETWO.TITLE")
}}</n-h1>
</transition>
</div>
<!-- 公司简介部分 -->
<!-- 公司概况 --> <!-- 公司概况 -->
<section <section
class="company-overview" class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto"
> >
<h2 class="section-title"> <h2 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }} {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
</h2> </h2>
<div class=""> <div class="content-block">
<div style="font-size: 18px"> <div style="font-size: 18px">
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }} {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
</div> </div>
@ -35,22 +25,16 @@
<n-h3 class="card-title">{{ <n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.TITLETHREE.TITLE") $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3> }}</n-h3>
<div style="font-size: 18px" class="card-content"> <br />
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT") }} <n-p style="font-size: 18px" class="card-content">{{
</div> $t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
<div style="font-size: 18px" class="card-content"> }}</n-p>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO") }} <br />
</div>
</n-card>
<!-- <n-card hoverable class="mission-card" v-motion-pop> <n-p style="font-size: 18px" class="card-content">{{
<n-h3 class="card-title">{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
$t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}</n-p>
}}</n-h3> </n-card>
<div style="font-size: 18px" class="card-content">
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO") }}
</div>
</n-card> -->
</div> </div>
</section> </section>
@ -69,12 +53,12 @@
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -89,12 +73,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -109,12 +93,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -129,12 +113,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -149,27 +133,27 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
}}</n-p> }}</n-p>
</div> </div>
@ -184,7 +168,7 @@
}}</n-h2> }}</n-h2>
<br /> <br />
<n-p class="section-content">{{ <n-p style="font-size: 18px" class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT") $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p> }}</n-p>
</section> </section>
@ -265,7 +249,7 @@ const stats = ref([
} }
.section-content { .section-content {
font-size: 18px; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--text-color-secondary); color: var(--text-color-secondary);
@ -351,7 +335,7 @@ const stats = ref([
} }
.timeline-desc { .timeline-desc {
font-size: 18px; font-size: 1.05rem;
line-height: 1.7; line-height: 1.7;
margin-bottom: 10px; margin-bottom: 10px;
} }

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

@ -1,26 +1,18 @@
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="company-overview"> <div class="company-overview">
<!-- 顶部大图区域 -->
<div class="hero-section">
<transition name="fade-up" appear>
<n-h1 class="hero-title">{{
$t("COMPANYOVERVIEW.TITLETWO.TITLE")
}}</n-h1>
</transition>
</div>
<!-- 公司简介部分 -->
<!-- 公司概况 --> <!-- 公司概况 -->
<section <section
class="company-overview" class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto"
> >
<h2 class="section-title"> <h2 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }} {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
</h2> </h2>
<div class="content-block"> <div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p> <div style="font-size: 18px">
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
</div>
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p> <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> --> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
</div> </div>
@ -33,16 +25,13 @@
<n-h3 class="card-title">{{ <n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.TITLETHREE.TITLE") $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3> }}</n-h3>
<n-p class="card-content">{{ <br />
<n-p style="font-size: 18px" class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT") $t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
}}</n-p> }}</n-p>
</n-card> <br />
<n-card hoverable class="mission-card" v-motion-pop> <n-p style="font-size: 18px" class="card-content">{{
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3>
<n-p class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO") $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
}}</n-p> }}</n-p>
</n-card> </n-card>
@ -64,12 +53,12 @@
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -84,12 +73,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -104,12 +93,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -124,12 +113,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -144,27 +133,27 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
}}</n-p> }}</n-p>
</div> </div>
@ -179,7 +168,7 @@
}}</n-h2> }}</n-h2>
<br /> <br />
<n-p class="section-content">{{ <n-p style="font-size: 18px" class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT") $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p> }}</n-p>
</section> </section>
@ -209,7 +198,7 @@ const stats = ref([
} }
.company-overview { .company-overview {
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 0 20px;
} }
/* 顶部大图区域 */ /* 顶部大图区域 */

57
src/views/companyoverview/size768/index.vue
View File

@ -1,26 +1,18 @@
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="company-overview"> <div class="company-overview">
<!-- 顶部大图区域 -->
<div class="hero-section">
<transition name="fade-up" appear>
<n-h1 class="hero-title">{{
$t("COMPANYOVERVIEW.TITLETWO.TITLE")
}}</n-h1>
</transition>
</div>
<!-- 公司简介部分 -->
<!-- 公司概况 --> <!-- 公司概况 -->
<section <section
class="company-overview" class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto"
> >
<h2 class="section-title"> <h2 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }} {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
</h2> </h2>
<div class="content-block"> <div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p> <div style="font-size: 18px">
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
</div>
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p> <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> --> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> -->
</div> </div>
@ -33,16 +25,13 @@
<n-h3 class="card-title">{{ <n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.TITLETHREE.TITLE") $t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3> }}</n-h3>
<n-p class="card-content">{{ <br />
<n-p style="font-size: 18px" class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT") $t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
}}</n-p> }}</n-p>
</n-card> <br />
<n-card hoverable class="mission-card" v-motion-pop> <n-p style="font-size: 18px" class="card-content">{{
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3>
<n-p class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO") $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
}}</n-p> }}</n-p>
</n-card> </n-card>
@ -64,12 +53,12 @@
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -84,12 +73,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -104,12 +93,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -124,12 +113,12 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO")
}}</n-p> }}</n-p>
</div> </div>
@ -144,27 +133,27 @@
}}</n-h3> }}</n-h3>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR")
}}</n-p> }}</n-p>
<br /> <br />
<n-p class="timeline-desc">{{ <n-p style="font-size: 18px" class="timeline-desc">{{
$t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE")
}}</n-p> }}</n-p>
</div> </div>
@ -179,7 +168,7 @@
}}</n-h2> }}</n-h2>
<br /> <br />
<n-p class="section-content">{{ <n-p style="font-size: 18px" class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT") $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p> }}</n-p>
</section> </section>
@ -209,7 +198,7 @@ const stats = ref([
} }
.company-overview { .company-overview {
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 0 20px;
} }
/* 顶部大图区域 */ /* 顶部大图区域 */

1
src/views/manage/size1440/index.vue
View File

@ -105,7 +105,6 @@ const getInitials = (name) => {
color: white; color: white;
padding: 120px 0; padding: 120px 0;
text-align: center; text-align: center;
margin-bottom: 60px;
border-radius: 8px; border-radius: 8px;
} }
/* 动画 */ /* 动画 */

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

@ -105,7 +105,6 @@ const getInitials = (name) => {
color: white; color: white;
padding: 120px 0; padding: 120px 0;
text-align: center; text-align: center;
margin-bottom: 60px;
border-radius: 8px; border-radius: 8px;
} }
/* 动画 */ /* 动画 */

130
src/views/myHome/size1440/index.vue
View File

@ -25,7 +25,8 @@
class="company-overview" class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
> >
<h1 class="section-titles">Company profile</h1> <h1 class="section-titles">Company Profile</h1>
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3> <h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
<div class="content-block"> <div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
@ -39,84 +40,6 @@
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
</div> </div>
</section> </section>
<!-- 使命与愿景 -->
<!-- <section
class="mission-vision"
style="
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
"
>
<h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h2>
<div class="mission-content">
<ul>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT").replace("•", "") }}
</li>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO").replace("•", "") }}
</li>
</ul>
</div>
</section> -->
<!-- 企业里程碑 -->
<!-- <section
class="milestones"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
</h2>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") }}</li>
</ul>
</div>
</section> -->
<!-- 突出成就 --> <!-- 突出成就 -->
<section <section
class="achievements" class="achievements"
@ -173,6 +96,12 @@
<div class="info-card stock-card"> <div class="info-card stock-card">
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2> <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
<div class="stock-data"> <div class="stock-data">
<div class="data-row">
<span style="font-size: 18px" class="data-label"> Time </span>
<span style="font-size: 18px" class="data-value">{{
formattedDate
}}</span>
</div>
<div class="data-row"> <div class="data-row">
<span style="font-size: 18px" class="data-label">{{ <span style="font-size: 18px" class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE") $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
@ -263,13 +192,52 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref, onUnmounted } from "vue"; import { onMounted, ref, onUnmounted, computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useStockQuote } from "@/store/stock-quote/index.js"; import { useStockQuote } from "@/store/stock-quote/index.js";
const { getStockQuate, stockQuote } = useStockQuote(); const { getStockQuate, stockQuote, formatted } = useStockQuote();
getStockQuate(); getStockQuate();
const formatCustomDate = (dateString, timeZone = "EDT") => {
const date = new Date(dateString);
// 验证日期有效性
if (isNaN(date.getTime())) {
return "Invalid Date";
}
// 保留原始小时数用于AM/PM判断
const originalHours = date.getHours();
// 转换为12小时制
let displayHours = originalHours % 12;
displayHours = displayHours ? displayHours : 12; // 0应显示为12
// 格式化分钟
const minutes = date.getMinutes().toString().padStart(2, "0");
// 判断AM/PM
const period = originalHours >= 12 ? "PM" : "AM";
// 时间部分 (8:10PM)
const timePart = `${displayHours}:${minutes}${period}`;
// 日期部分 (EDT23/15/25)
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const year = date.getFullYear().toString().slice(2); // 取后两位
const datePart = `${timeZone} ${day}/${month}/${year}`;
// 组合最终结果
return `As of ${timePart} ${datePart}`;
};
// 示例数据
const sampleDate = ref("May 26, 2025, 2:44 AM EDT");
const formattedDate = computed(() => formatCustomDate(sampleDate.value));
const { t: $t } = useI18n(); const { t: $t } = useI18n();
const contentRef = ref(null); const contentRef = ref(null);
const isInView = ref(false); const isInView = ref(false);

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

@ -25,7 +25,7 @@
class="company-overview" class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
> >
<h1 class="section-titles">Company profile</h1> <h1 class="section-titles">Company Profile</h1>
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3> <h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
<div class="content-block"> <div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
@ -39,84 +39,6 @@
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
</div> </div>
</section> </section>
<!-- 使命与愿景 -->
<!-- <section
class="mission-vision"
style="
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
"
>
<h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h2>
<div class="mission-content">
<ul>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT").replace("•", "") }}
</li>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO").replace("•", "") }}
</li>
</ul>
</div>
</section> -->
<!-- 企业里程碑 -->
<!-- <section
class="milestones"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
</h2>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") }}</li>
</ul>
</div>
</section> -->
<!-- 突出成就 --> <!-- 突出成就 -->
<section <section
class="achievements" class="achievements"
@ -173,6 +95,10 @@
<div class="info-card stock-card"> <div class="info-card stock-card">
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2> <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
<div class="stock-data"> <div class="stock-data">
<div class="data-row">
<span class="data-label"> Time </span>
<span class="data-value">{{ formattedDate }}</span>
</div>
<div class="data-row"> <div class="data-row">
<span class="data-label">{{ <span class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE") $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
@ -255,18 +181,55 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref, onUnmounted } from "vue"; import { onMounted, ref, onUnmounted, computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useStockQuote } from "@/store/stock-quote/index.js"; import { useStockQuote } from "@/store/stock-quote/index.js";
const { getStockQuate, stockQuote } = useStockQuote(); const { getStockQuate, stockQuote, formatted } = useStockQuote();
getStockQuate(); getStockQuate();
const formatCustomDate = (dateString, timeZone = "EDT") => {
const date = new Date(dateString);
// 验证日期有效性
if (isNaN(date.getTime())) {
return "Invalid Date";
}
// 保留原始小时数用于AM/PM判断
const originalHours = date.getHours();
// 转换为12小时制
let displayHours = originalHours % 12;
displayHours = displayHours ? displayHours : 12; // 0应显示为12
// 格式化分钟
const minutes = date.getMinutes().toString().padStart(2, "0");
// 判断AM/PM
const period = originalHours >= 12 ? "PM" : "AM";
// 时间部分 (8:10PM)
const timePart = `${displayHours}:${minutes}${period}`;
// 日期部分 (EDT23/15/25)
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const year = date.getFullYear().toString().slice(2); // 取后两位
const datePart = `${timeZone} ${day}/${month}/${year}`;
// 组合最终结果
return `As of ${timePart} ${datePart}`;
};
// 示例数据
const sampleDate = ref("May 26, 2025, 2:44 AM EDT");
const formattedDate = computed(() => formatCustomDate(sampleDate.value));
const { t: $t } = useI18n(); const { t: $t } = useI18n();
const contentRef = ref(null); const contentRef = ref(null);
const isInView = ref(false); const isInView = ref(false);
let observer = null; let observer = null;
onMounted(() => { onMounted(() => {
if (contentRef.value && "IntersectionObserver" in window) { if (contentRef.value && "IntersectionObserver" in window) {
observer = new IntersectionObserver( observer = new IntersectionObserver(

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

@ -25,7 +25,8 @@
class="company-overview" class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
> >
<h1 class="section-titles">Company profile</h1> <h1 class="section-titles">Company Profile</h1>
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3> <h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
<div class="content-block"> <div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
@ -40,83 +41,6 @@
</div> </div>
</section> </section>
<!-- 使命与愿景 -->
<!-- <section
class="mission-vision"
style="
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
"
>
<h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h2>
<div class="mission-content">
<ul>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT").replace("•", "") }}
</li>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO").replace("•", "") }}
</li>
</ul>
</div>
</section> -->
<!-- 企业里程碑 -->
<!-- <section
class="milestones"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
</h2>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") }}</li>
</ul>
</div>
</section> -->
<!-- 突出成就 --> <!-- 突出成就 -->
<section <section
class="achievements" class="achievements"
@ -141,8 +65,6 @@
> >
<h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2> <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
<div class="news-card"> <div class="news-card">
<!-- <div class="news-date">De 15. 2023</div> -->
<!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
<p style="font-size: 18px"> <p style="font-size: 18px">
{{ $t("HOME.CONTAINY.NEWS.TITLETWO") }} {{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
</p> </p>
@ -173,6 +95,12 @@
<div class="info-card stock-card"> <div class="info-card stock-card">
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2> <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
<div class="stock-data"> <div class="stock-data">
<div class="data-row">
<span style="font-size: 18px" class="data-label"> Time </span>
<span style="font-size: 18px" class="data-value">{{
formattedDate
}}</span>
</div>
<div class="data-row"> <div class="data-row">
<span style="font-size: 18px" class="data-label">{{ <span style="font-size: 18px" class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE") $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
@ -263,13 +191,52 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref, onUnmounted } from "vue"; import { onMounted, ref, onUnmounted, computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useStockQuote } from "@/store/stock-quote/index.js"; import { useStockQuote } from "@/store/stock-quote/index.js";
const { getStockQuate, stockQuote } = useStockQuote(); const { getStockQuate, stockQuote, formatted } = useStockQuote();
getStockQuate(); getStockQuate();
const formatCustomDate = (dateString, timeZone = "EDT") => {
const date = new Date(dateString);
// 验证日期有效性
if (isNaN(date.getTime())) {
return "Invalid Date";
}
// 保留原始小时数用于AM/PM判断
const originalHours = date.getHours();
// 转换为12小时制
let displayHours = originalHours % 12;
displayHours = displayHours ? displayHours : 12; // 0应显示为12
// 格式化分钟
const minutes = date.getMinutes().toString().padStart(2, "0");
// 判断AM/PM
const period = originalHours >= 12 ? "PM" : "AM";
// 时间部分 (8:10PM)
const timePart = `${displayHours}:${minutes}${period}`;
// 日期部分 (EDT23/15/25)
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const year = date.getFullYear().toString().slice(2); // 取后两位
const datePart = `${timeZone} ${day}/${month}/${year}`;
// 组合最终结果
return `As of ${timePart} ${datePart}`;
};
// 示例数据
const sampleDate = ref("May 26, 2025, 2:44 AM EDT");
const formattedDate = computed(() => formatCustomDate(sampleDate.value));
const { t: $t } = useI18n(); const { t: $t } = useI18n();
const contentRef = ref(null); const contentRef = ref(null);
const isInView = ref(false); const isInView = ref(false);

129
src/views/myHome/size768/index.vue
View File

@ -25,7 +25,8 @@
class="company-overview" class="company-overview"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px" style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
> >
<h1 class="section-titles">Company profile</h1> <h1 class="section-titles">Company Profile</h1>
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3> <h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
<div class="content-block"> <div class="content-block">
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p> <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
@ -40,83 +41,6 @@
</div> </div>
</section> </section>
<!-- 使命与愿景 -->
<!-- <section
class="mission-vision"
style="
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
"
>
<h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h2>
<div class="mission-content">
<ul>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT").replace("•", "") }}
</li>
<li>
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO").replace("•", "") }}
</li>
</ul>
</div>
</section> -->
<!-- 企业里程碑 -->
<!-- <section
class="milestones"
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
>
<h2 class="section-titles">
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
</h2>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") }}</li>
</ul>
</div>
<div class="milestone-item">
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE") }}</h3>
<ul>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") }}</li>
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") }}</li>
</ul>
</div>
</section> -->
<!-- 突出成就 --> <!-- 突出成就 -->
<section <section
class="achievements" class="achievements"
@ -173,6 +97,12 @@
<div class="info-card stock-card"> <div class="info-card stock-card">
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2> <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
<div class="stock-data"> <div class="stock-data">
<div class="data-row">
<span style="font-size: 18px" class="data-label"> Time </span>
<span style="font-size: 18px" class="data-value">{{
formattedDate
}}</span>
</div>
<div class="data-row"> <div class="data-row">
<span style="font-size: 18px" class="data-label">{{ <span style="font-size: 18px" class="data-label">{{
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE") $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
@ -263,13 +193,52 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref, onUnmounted } from "vue"; import { onMounted, ref, onUnmounted, computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useStockQuote } from "@/store/stock-quote/index.js"; import { useStockQuote } from "@/store/stock-quote/index.js";
const { getStockQuate, stockQuote } = useStockQuote(); const { getStockQuate, stockQuote, formatted } = useStockQuote();
getStockQuate(); getStockQuate();
const formatCustomDate = (dateString, timeZone = "EDT") => {
const date = new Date(dateString);
// 验证日期有效性
if (isNaN(date.getTime())) {
return "Invalid Date";
}
// 保留原始小时数用于AM/PM判断
const originalHours = date.getHours();
// 转换为12小时制
let displayHours = originalHours % 12;
displayHours = displayHours ? displayHours : 12; // 0应显示为12
// 格式化分钟
const minutes = date.getMinutes().toString().padStart(2, "0");
// 判断AM/PM
const period = originalHours >= 12 ? "PM" : "AM";
// 时间部分 (8:10PM)
const timePart = `${displayHours}:${minutes}${period}`;
// 日期部分 (EDT23/15/25)
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const year = date.getFullYear().toString().slice(2); // 取后两位
const datePart = `${timeZone} ${day}/${month}/${year}`;
// 组合最终结果
return `As of ${timePart} ${datePart}`;
};
// 示例数据
const sampleDate = ref("May 26, 2025, 2:44 AM EDT");
const formattedDate = computed(() => formatCustomDate(sampleDate.value));
const { t: $t } = useI18n(); const { t: $t } = useI18n();
const contentRef = ref(null); const contentRef = ref(null);
const isInView = ref(false); const isInView = ref(false);