Compare commits
No commits in common. "5c1e7768204ca4a59bdae200b69b6f15391a9e3b" and "3003d33570c3baf6ab95002ab976ac521257012d" have entirely different histories.
5c1e776820
...
3003d33570
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 424 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
@ -201,12 +201,11 @@ const handleToHome = () => {
|
||||
top: 320px;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
background: #fddfea;
|
||||
z-index: 1100;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||||
padding: 40px 0 80px 0;
|
||||
// max-height: 1500px;
|
||||
max-height: 1500px;
|
||||
overflow-y: auto;
|
||||
|
||||
// 设置CSS变量，只影响当前组件的菜单
|
||||
@ -216,16 +215,6 @@ const handleToHome = () => {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 为n-submenu添加上边虚线边框
|
||||
:deep(.mobile-menu > div) {
|
||||
border-top: 3px dashed #e0e0e0;
|
||||
}
|
||||
|
||||
// 为最后一个n-submenu额外添加下边框
|
||||
:deep(.mobile-menu > div:last-child) {
|
||||
border-bottom: 3px dashed #e0e0e0;
|
||||
}
|
||||
|
||||
// // 强制覆盖子菜单激活状态的文字颜色
|
||||
// :deep(
|
||||
// .n-menu
|
||||
|
||||
@ -648,7 +648,7 @@ export default {
|
||||
TWO: "• Signed a merger agreement with e2Companies to broaden its technology and revenue base.",
|
||||
THREE: "",
|
||||
},
|
||||
SUBHEADINGFIVE: "2025: Rebranding & New C-Suite",
|
||||
SUBHEADINGFIVE: "2025 Rebranding & New C-Suite",
|
||||
paragraphFIVE: {
|
||||
ONE: "• Officially rebranded from Minim Inc. to FiEE, Inc.",
|
||||
TWO: "• Appointed Li Wai Chung as CEO and Cao Yu as CFO.",
|
||||
|
||||
@ -1,25 +1,5 @@
|
||||
<template>
|
||||
<div class="home-page relative bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
|
||||
style="width: 920px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="w-[100%] h-[916px] z-[] top-0 absolute">
|
||||
<div class="relative w-[100%] h-[100%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_1.png"
|
||||
alt=""
|
||||
class="w-[100vw] absolute top-[-90px]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/bg_2.png"
|
||||
alt=""
|
||||
class="w-[100vw] absolute bottom-0 lef-0 right-0 z-99"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-page">
|
||||
<div class="business-page">
|
||||
<!-- 渐变背景标题区 - 增加层次感 -->
|
||||
<section class="hero-section">
|
||||
@ -27,7 +7,7 @@
|
||||
<h2 class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h2>
|
||||
<div style="font-size: 16px" class="hero-description">
|
||||
<div style="font-size: 18px" class="hero-description">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||
</div>
|
||||
</div>
|
||||
@ -129,7 +109,7 @@ const solutions = computed(() => [
|
||||
margin: 0 auto;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: #455363;
|
||||
color: black;
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
@ -1,37 +1,16 @@
|
||||
<template>
|
||||
<div class="home-page relative overflow-hidden z-99 bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
|
||||
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="w-[100%] h-[700PX] z-[] top-0 absolute">
|
||||
<div class="relative w-[100%] h-[100%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_6.png"
|
||||
alt=""
|
||||
class="w-[100vw] absolute top-[-90px]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/bg_7.png"
|
||||
alt=""
|
||||
class="w-[100vw] h-[320PX] absolute bottom-0 lef-0 right-0 z-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-page">
|
||||
<div class="company-overview">
|
||||
<!-- 公司概况 -->
|
||||
<section
|
||||
class="company-overview"
|
||||
style="max-width: 900px; margin: 120px auto"
|
||||
style="max-width: 1200px; margin: 60px auto"
|
||||
>
|
||||
<h1 class="">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
||||
</h1>
|
||||
<div class="content-block">
|
||||
<div style="font-size: 16px; color: #455363">
|
||||
<div style="font-size: 18px">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
|
||||
</div>
|
||||
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
||||
@ -41,17 +20,12 @@
|
||||
|
||||
<!-- 使命愿景卡片 -->
|
||||
<section class="mission-section">
|
||||
<!-- <h1 class="section-title">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||
</h1> -->
|
||||
</h1>
|
||||
<div class="mission-cards">
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<div>
|
||||
<h1 class="mt-0">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||
</h1>
|
||||
</div>
|
||||
<n-p style="font-size: 16px; color: #455363" class="card-content">{{
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
@ -60,7 +34,7 @@
|
||||
|
||||
<!-- 里程碑时间轴 -->
|
||||
<!-- 里程碑时间轴 -->
|
||||
<section class="section timeline-section mt-[120PX]">
|
||||
<section class="section timeline-section">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
|
||||
</h1>
|
||||
@ -69,11 +43,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[0] }}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
@ -91,13 +62,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -116,13 +82,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -141,13 +102,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -166,13 +122,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -203,71 +154,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- 成就部分 -->
|
||||
|
||||
<section
|
||||
class="mission-section overflow-hidden relative z-99"
|
||||
style="
|
||||
width: 100vw;
|
||||
/* padding: 0 40px; */
|
||||
/* margin-top: 40px; */
|
||||
background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="height: 190px; width: 880px"
|
||||
class="m-[auto] my-[64px] flex flex-col items-center text-center"
|
||||
>
|
||||
<h1 class="">
|
||||
<section class="mission-section">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
</h1>
|
||||
<!-- <div class="mission-cards">
|
||||
<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> -->
|
||||
<div class="w-100% flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="bg-[#ffffff] rounded-[50%] flex justify-center items-center mr-[8px]"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/content/left.png"
|
||||
alt=""
|
||||
class="w-[94PX] h-[94PX]"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/image/content/arrowhead_left.png"
|
||||
alt=""
|
||||
class="w-[95px]"
|
||||
/>
|
||||
</div>
|
||||
<p style="font-size: 14px; width: 439px" class="my-0 text-[#455363]">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="@/assets/image/content/arrowhead_right.png"
|
||||
alt=""
|
||||
class="w-[95px]"
|
||||
/>
|
||||
<div
|
||||
class="bg-[#ffffff] rounded-[50%] flex justify-center items-center ml-[8px]"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/content/right.png"
|
||||
alt=""
|
||||
class="w-[94PX] h-[94PX]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -284,18 +184,15 @@ const stats = ref([
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.company-overview {
|
||||
width: 900PX;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
/* padding: 0 20px; */
|
||||
}
|
||||
|
||||
@ -324,7 +221,7 @@ const stats = ref([
|
||||
|
||||
/* 通用部分样式 */
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@ -334,16 +231,14 @@ const stats = ref([
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
.section-title:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
bottom: 0;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
// background: linear-gradient(to right, #00ffff, #ff7bac);
|
||||
background-color: #ff7bac;
|
||||
background: linear-gradient(to right, #00ffff, #ff7bac);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@ -356,8 +251,7 @@ const stats = ref([
|
||||
|
||||
/* 使命愿景卡片 */
|
||||
.mission-section {
|
||||
// margin: 80px 0;
|
||||
// margin-top: 160px;
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
.mission-cards {
|
||||
@ -395,18 +289,16 @@ const stats = ref([
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
margin-top: 50px;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
/* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
|
||||
background: #ff7bac;
|
||||
width: 4px;
|
||||
background: linear-gradient(to bottom, #00ffff, #ff7bac);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
@ -414,25 +306,12 @@ const stats = ref([
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
&:last-child:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
left: -40px;
|
||||
height: 110%;
|
||||
width: 2px;
|
||||
/* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
|
||||
background: #E6EAEE;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -50px;
|
||||
top: 5px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #ff7bac;
|
||||
display: flex;
|
||||
@ -440,20 +319,18 @@ const stats = ref([
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 0 7px rgba(255, 123, 172, 0.2);
|
||||
box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 15px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
color: #1a2a6c;
|
||||
}
|
||||
|
||||
.timeline-desc {
|
||||
font-size: 16PX !important;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
color: #455363;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,37 +1,16 @@
|
||||
<template>
|
||||
<div class="home-page relative overflow-hidden z-99 bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
|
||||
style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="w-[100%] h-[700PX] z-[] top-0 absolute">
|
||||
<div class="relative w-[100%] h-[100%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_6.png"
|
||||
alt=""
|
||||
class="w-[100vw] absolute top-[-90px]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/bg_7.png"
|
||||
alt=""
|
||||
class="w-[100vw] h-[320PX] absolute bottom-0 lef-0 right-0 z-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-page">
|
||||
<div class="company-overview">
|
||||
<!-- 公司概况 -->
|
||||
<section
|
||||
class="company-overview"
|
||||
style="max-width: 900px; margin: 120px auto"
|
||||
style="max-width: 1200px; margin: 60px auto"
|
||||
>
|
||||
<h1 class="">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
||||
</h1>
|
||||
<div class="content-block">
|
||||
<div style="font-size: 16px; color: #455363">
|
||||
<div style="font-size: 18px">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
|
||||
</div>
|
||||
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
||||
@ -41,17 +20,12 @@
|
||||
|
||||
<!-- 使命愿景卡片 -->
|
||||
<section class="mission-section">
|
||||
<!-- <h1 class="section-title">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||
</h1> -->
|
||||
</h1>
|
||||
<div class="mission-cards">
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<div>
|
||||
<h1 class="mt-0">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||
</h1>
|
||||
</div>
|
||||
<n-p style="font-size: 16px; color: #455363" class="card-content">{{
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
@ -60,7 +34,7 @@
|
||||
|
||||
<!-- 里程碑时间轴 -->
|
||||
<!-- 里程碑时间轴 -->
|
||||
<section class="section timeline-section mt-[120PX]">
|
||||
<section class="section timeline-section">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
|
||||
</h1>
|
||||
@ -69,11 +43,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[0] }}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
@ -91,13 +62,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -116,13 +82,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -141,13 +102,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -166,13 +122,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -203,71 +154,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- 成就部分 -->
|
||||
|
||||
<section
|
||||
class="mission-section overflow-hidden relative z-99"
|
||||
style="
|
||||
width: 100vw;
|
||||
/* padding: 0 40px; */
|
||||
/* margin-top: 40px; */
|
||||
background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="height: 190px; width: 880px"
|
||||
class="m-[auto] my-[64px] flex flex-col items-center text-center"
|
||||
>
|
||||
<h1 class="">
|
||||
<!-- 成就部分 -->
|
||||
|
||||
<section class="mission-section">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
</h1>
|
||||
<!-- <div class="mission-cards">
|
||||
<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> -->
|
||||
<div class="w-100% flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="bg-[#ffffff] rounded-[50%] flex justify-center items-center mr-[8px]"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/content/left.png"
|
||||
alt=""
|
||||
class="w-[94PX] h-[94PX]"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/image/content/arrowhead_left.png"
|
||||
alt=""
|
||||
class="w-[95px]"
|
||||
/>
|
||||
</div>
|
||||
<p style="font-size: 14px; width: 439px" class="my-0 text-[#455363]">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="@/assets/image/content/arrowhead_right.png"
|
||||
alt=""
|
||||
class="w-[95px]"
|
||||
/>
|
||||
<div
|
||||
class="bg-[#ffffff] rounded-[50%] flex justify-center items-center ml-[8px]"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/content/right.png"
|
||||
alt=""
|
||||
class="w-[94PX] h-[94PX]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -284,18 +186,15 @@ const stats = ref([
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.company-overview {
|
||||
width: 900PX;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
/* padding: 0 20px; */
|
||||
}
|
||||
|
||||
@ -324,7 +223,7 @@ const stats = ref([
|
||||
|
||||
/* 通用部分样式 */
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@ -334,16 +233,14 @@ const stats = ref([
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
.section-title:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
bottom: 0;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
// background: linear-gradient(to right, #00ffff, #ff7bac);
|
||||
background-color: #ff7bac;
|
||||
background: linear-gradient(to right, #00ffff, #ff7bac);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@ -356,8 +253,7 @@ const stats = ref([
|
||||
|
||||
/* 使命愿景卡片 */
|
||||
.mission-section {
|
||||
// margin: 80px 0;
|
||||
// margin-top: 160px;
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
.mission-cards {
|
||||
@ -395,18 +291,16 @@ const stats = ref([
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
margin-top: 50px;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
/* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
|
||||
background: #ff7bac;
|
||||
width: 4px;
|
||||
background: linear-gradient(to bottom, #00ffff, #ff7bac);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
@ -414,25 +308,12 @@ const stats = ref([
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
&:last-child:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
left: -40px;
|
||||
height: 110%;
|
||||
width: 2px;
|
||||
/* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
|
||||
background: #E6EAEE;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -50px;
|
||||
top: 5px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #ff7bac;
|
||||
display: flex;
|
||||
@ -440,20 +321,18 @@ const stats = ref([
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 0 7px rgba(255, 123, 172, 0.2);
|
||||
box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 15px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
color: #1a2a6c;
|
||||
}
|
||||
|
||||
.timeline-desc {
|
||||
font-size: 16PX !important;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
color: #455363;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,37 +1,16 @@
|
||||
<template>
|
||||
<div class="home-page relative overflow-hidden z-99 bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
|
||||
style="width: 586px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="w-[100%] h-[720PX] z-[] top-0 absolute">
|
||||
<div class="relative w-[100%] h-[100%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_10.png"
|
||||
alt=""
|
||||
class="w-[100vw] absolute top-[-90px]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/bg_11.png"
|
||||
alt=""
|
||||
class="w-[100vw] h-[320PX] absolute bottom-0 lef-0 right-0 z-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-page">
|
||||
<div class="company-overview">
|
||||
<!-- 公司概况 -->
|
||||
<section
|
||||
class="company-overview"
|
||||
style="max-width: 586px; margin: 120px auto"
|
||||
style="max-width: 1200px; margin: 60px auto"
|
||||
>
|
||||
<h1 class="">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
|
||||
</h1>
|
||||
<div class="content-block">
|
||||
<div style="font-size: 16px; color: #455363">
|
||||
<div style="font-size: 18px">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
|
||||
</div>
|
||||
<!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
||||
@ -41,17 +20,12 @@
|
||||
|
||||
<!-- 使命愿景卡片 -->
|
||||
<section class="mission-section">
|
||||
<!-- <h1 class="section-title">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||
</h1> -->
|
||||
</h1>
|
||||
<div class="mission-cards">
|
||||
<n-card hoverable class="mission-card" v-motion-pop>
|
||||
<div>
|
||||
<h1 class="mt-0">
|
||||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||||
</h1>
|
||||
</div>
|
||||
<n-p style="font-size: 16px; color: #455363" class="card-content">{{
|
||||
<n-p style="font-size: 18px" class="card-content">{{
|
||||
$t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
|
||||
}}</n-p>
|
||||
</n-card>
|
||||
@ -60,7 +34,7 @@
|
||||
|
||||
<!-- 里程碑时间轴 -->
|
||||
<!-- 里程碑时间轴 -->
|
||||
<section class="section timeline-section mt-[120PX]">
|
||||
<section class="section timeline-section">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
|
||||
</h1>
|
||||
@ -69,11 +43,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[0] }}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
<n-p style="font-size: 18px" class="timeline-desc">{{
|
||||
@ -91,13 +62,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -116,13 +82,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -141,13 +102,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -166,13 +122,8 @@
|
||||
<div class="timeline-item" v-motion-slide-visible-once-bottom>
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="text-[#FF7BAC] text-[16PX]">
|
||||
{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[0]
|
||||
}}
|
||||
</div>
|
||||
<n-h3 class="timeline-year">{{
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[1]
|
||||
$t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
|
||||
}}</n-h3>
|
||||
<br />
|
||||
|
||||
@ -203,71 +154,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- 成就部分 -->
|
||||
|
||||
<section
|
||||
class="mission-section overflow-hidden relative z-99"
|
||||
style="
|
||||
width: 100vw;
|
||||
/* padding: 0 40px; */
|
||||
/* margin-top: 40px; */
|
||||
background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="height: 190px; width: 500px"
|
||||
class="m-[auto] my-[64px] flex flex-col items-center text-center"
|
||||
>
|
||||
<h1 class="">
|
||||
<!-- 成就部分 -->
|
||||
<section class="mission-section">
|
||||
<h1 class="section-title">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
</h1>
|
||||
<!-- <div class="mission-cards">
|
||||
<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> -->
|
||||
<div class="w-100% flex items-center justify-between">
|
||||
<!-- <div class="flex items-center">
|
||||
<div
|
||||
class="bg-[#ffffff] rounded-[50%] flex justify-center items-center mr-[8px]"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/content/left.png"
|
||||
alt=""
|
||||
class="w-[94PX] h-[94PX]"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/image/content/arrowhead_left.png"
|
||||
alt=""
|
||||
class="w-[95px]"
|
||||
/>
|
||||
</div> -->
|
||||
<p style="font-size: 14px;" class="my-0 text-[#455363]">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
|
||||
</p>
|
||||
<!-- <div class="flex items-center">
|
||||
<img
|
||||
src="@/assets/image/content/arrowhead_right.png"
|
||||
alt=""
|
||||
class="w-[95px]"
|
||||
/>
|
||||
<div
|
||||
class="bg-[#ffffff] rounded-[50%] flex justify-center items-center ml-[8px]"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/content/right.png"
|
||||
alt=""
|
||||
class="w-[94PX] h-[94PX]"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -284,19 +185,15 @@ const stats = ref([
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.company-overview {
|
||||
width: 586PX;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
/* padding: 0 20px; */
|
||||
}
|
||||
|
||||
/* 顶部大图区域 */
|
||||
@ -324,7 +221,7 @@ const stats = ref([
|
||||
|
||||
/* 通用部分样式 */
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@ -334,16 +231,14 @@ const stats = ref([
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
.section-title:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
bottom: 0;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
// background: linear-gradient(to right, #00ffff, #ff7bac);
|
||||
background-color: #ff7bac;
|
||||
background: linear-gradient(to right, #00ffff, #ff7bac);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@ -356,8 +251,7 @@ const stats = ref([
|
||||
|
||||
/* 使命愿景卡片 */
|
||||
.mission-section {
|
||||
// margin: 80px 0;
|
||||
// margin-top: 160px;
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
.mission-cards {
|
||||
@ -395,18 +289,16 @@ const stats = ref([
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
margin-top: 50px;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
/* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
|
||||
background: #ff7bac;
|
||||
width: 4px;
|
||||
background: linear-gradient(to bottom, #00ffff, #ff7bac);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
@ -414,25 +306,12 @@ const stats = ref([
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
&:last-child:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
left: -40px;
|
||||
height: 110%;
|
||||
width: 2px;
|
||||
/* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
|
||||
background: #E6EAEE;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -50px;
|
||||
top: 5px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #ff7bac;
|
||||
display: flex;
|
||||
@ -440,20 +319,18 @@ const stats = ref([
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 0 7px rgba(255, 123, 172, 0.2);
|
||||
box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 15px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
color: #1a2a6c;
|
||||
}
|
||||
|
||||
.timeline-desc {
|
||||
font-size: 16PX !important;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
color: #455363;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@ -511,30 +388,30 @@ const stats = ref([
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
// .hero-title {
|
||||
// font-size: 2.5rem;
|
||||
// }
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
// .hero-subtitle {
|
||||
// font-size: 1.2rem;
|
||||
// }
|
||||
.hero-subtitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
// .section-title {
|
||||
// font-size: 1.8rem;
|
||||
// }
|
||||
.section-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
// .timeline {
|
||||
// padding-left: 30px;
|
||||
// }
|
||||
.timeline {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
// .timeline-dot {
|
||||
// left: -30px;
|
||||
// // width: 30px;
|
||||
// // height: 30px;
|
||||
// }
|
||||
.timeline-dot {
|
||||
left: -30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
// .achievement-section {
|
||||
// padding: 40px 20px;
|
||||
// }
|
||||
.achievement-section {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -93,8 +93,7 @@
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="height: 190px; width: 900px"
|
||||
class="m-[auto] my-[64px] flex flex-col items-center text-center"
|
||||
class="w-[900px] m-[auto] my-[64px] flex flex-col items-center h-[190px] text-center"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
@ -116,7 +115,7 @@
|
||||
class="w-[95px]"
|
||||
/>
|
||||
</div>
|
||||
<p style="font-size: 14px; width: 439px" class="my-0 text-[#455363]">
|
||||
<p style="font-size: 18px" class="w-[438px] my-0">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
@ -139,46 +138,9 @@
|
||||
</div>
|
||||
</section>
|
||||
<!-- 新闻模块 -->
|
||||
<section class="news-section relative z-99" style="width: 900px; margin: 60px auto">
|
||||
<div class="flex justify-between">
|
||||
<h2 class="section-titles section-titles1">
|
||||
{{ $t("HOME.CONTAINY.NEWS.TITLE") }}
|
||||
</h2>
|
||||
<div v-if="totalPages > 1">
|
||||
<!-- 左右切换按钮 -->
|
||||
<img
|
||||
v-if="currentPage === 0"
|
||||
disabled
|
||||
class="w-[38px] h-[38px]"
|
||||
src="@/assets/image/content/switch_right.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
@click="prevPage"
|
||||
src="@/assets/image/content/switch_left.png"
|
||||
class="transform rotate-180 w-[38px] h-[38px] cursor-pointer"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="currentPage >= totalPages - 1"
|
||||
class="transform rotate-180 w-[38px] h-[38px] ml-[20px]"
|
||||
disabled
|
||||
src="@/assets/image/content/switch_right.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
@click="nextPage"
|
||||
class="w-[38px] h-[38px] ml-[20px] cursor-pointer"
|
||||
src="@/assets/image/content/switch_left.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="grid grid-cols-2 gap-[15px]">
|
||||
<section class="news-section" style="width: 900px; margin: 60px auto">
|
||||
<h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
|
||||
<div class="grid grid-cols-2 gap-[15px]">
|
||||
<template v-for="(item, index) in newList" :key="index">
|
||||
<div
|
||||
class="h-[246px] news-card flex flex-col justify-between"
|
||||
@ -223,59 +185,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div> -->
|
||||
|
||||
<!-- Grid 布局容器 -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="col-span-2 grid grid-cols-2 gap-4">
|
||||
<template v-for="(item, index) in pages" :key="index">
|
||||
<div
|
||||
class="h-[246px] news-card flex flex-col justify-between"
|
||||
:class="{
|
||||
'col-span-2':
|
||||
pages.length % 2 !== 0 && index === pages.length - 1,
|
||||
}"
|
||||
>
|
||||
<div class="text-[24px] font-600">{{ item.time }}</div>
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<div
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
style="
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="text-[16px] text-[#455363]"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</template>
|
||||
<div slot="content" class="text-[16px] text-[#455363]">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
<div
|
||||
class="text-[16px] text-[#FF7BAC] font-500 flex items-center cursor-pointer"
|
||||
@click="handleLink(item)"
|
||||
>
|
||||
View Press Release
|
||||
<img
|
||||
src="@/assets/image/content/vector.png"
|
||||
alt=""
|
||||
class="ml-[10px] w-[6.5px] h-[13px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="news-card">
|
||||
<div style="margin-bottom: 20px" v-for="(item, index) in newList">
|
||||
@ -354,59 +263,49 @@
|
||||
background-color: #e7407e;
|
||||
"
|
||||
>
|
||||
<div style="width: 900px" class="w-[900px] m-auto">
|
||||
<div class="w-[900px] m-auto">
|
||||
<!-- 股票信息卡片 -->
|
||||
<div class="">
|
||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||
<div class="stock-data">
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label"> Time </span>
|
||||
<span class="data-value">{{ sampleDate }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
}}</span>
|
||||
<span class="data-value">${{ stockQuote.price }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
}}</span>
|
||||
|
||||
<span class="data-value">{{ stockQuote.change || "--" }}</span>
|
||||
<span
|
||||
class="data-value"
|
||||
:class="
|
||||
stockQuote.change?.includes('-')
|
||||
? 'text-green-500'
|
||||
: 'text-red-500'
|
||||
"
|
||||
>{{ stockQuote.change || "--" }}</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
||||
}}</span>
|
||||
<span class="data-value">NASDAQ: FIEE</span>
|
||||
</div>
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
||||
}}</span>
|
||||
<span class="data-value">{{ stockQuote.volume }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
||||
}}</span>
|
||||
@ -462,7 +361,7 @@
|
||||
class="dual-column-section"
|
||||
style="width: 100vw; height: 643px; margin: 60px auto; padding: 0 40px"
|
||||
>
|
||||
<div class="w-[900PX] m-auto">
|
||||
<div class="w-[900px] m-auto">
|
||||
<div class="">
|
||||
<h2 class="card-title1">
|
||||
{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
|
||||
@ -520,42 +419,6 @@ import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
import axios from "axios";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
|
||||
// 每页显示的项目数 - 最多三行，每行最多2个项目，所以每页最多6个项目
|
||||
const itemsPerPage = 6;
|
||||
|
||||
// 当前页码
|
||||
const currentPage = ref(0);
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(newList.value.length / itemsPerPage);
|
||||
});
|
||||
|
||||
// 将数据分页，最多返回6个项目
|
||||
const pages = computed(() => {
|
||||
// 使用slice确保只处理前6个项目
|
||||
const limitedItems = newList.value.slice(
|
||||
currentPage.value * itemsPerPage,
|
||||
(currentPage.value + 1) * itemsPerPage
|
||||
);
|
||||
return limitedItems;
|
||||
});
|
||||
|
||||
// 切换到上一页
|
||||
const prevPage = () => {
|
||||
if (currentPage.value > 0) {
|
||||
currentPage.value--;
|
||||
}
|
||||
};
|
||||
|
||||
// 切换到下一页
|
||||
const nextPage = () => {
|
||||
if (currentPage.value < totalPages.value - 1) {
|
||||
currentPage.value++;
|
||||
}
|
||||
};
|
||||
|
||||
getStockQuate();
|
||||
// 示例数据
|
||||
const sampleDate = ref(formatted);
|
||||
@ -751,16 +614,6 @@ const handleLink = (item) => {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 0;
|
||||
color: black;
|
||||
position: relative;
|
||||
}
|
||||
.section-titles1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: #ff7bac;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.content-block {
|
||||
@ -890,7 +743,8 @@ const handleLink = (item) => {
|
||||
/* justify-content: space-between; */
|
||||
margin: 24px 0;
|
||||
border-left: 2px solid #00ffff;
|
||||
|
||||
transform: translateX(-10px);
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -93,8 +93,7 @@
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="height: 190px; width: 900px"
|
||||
class="m-[auto] my-[64px] flex flex-col items-center text-center"
|
||||
class="w-[900px] m-[auto] my-[64px] flex flex-col items-center h-[190px] text-center"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
@ -116,7 +115,7 @@
|
||||
class="w-[95px]"
|
||||
/>
|
||||
</div>
|
||||
<p style="font-size: 14px; width: 439px" class="my-0 text-[#455363]">
|
||||
<p style="font-size: 18px" class="w-[438px] my-0">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
@ -139,46 +138,9 @@
|
||||
</div>
|
||||
</section>
|
||||
<!-- 新闻模块 -->
|
||||
<section class="news-section relative z-99" style="width: 900px; margin: 60px auto;">
|
||||
<div class="flex justify-between">
|
||||
<h2 class="section-titles section-titles1">
|
||||
{{ $t("HOME.CONTAINY.NEWS.TITLE") }}
|
||||
</h2>
|
||||
<div v-if="totalPages > 1">
|
||||
<!-- 左右切换按钮 -->
|
||||
<img
|
||||
v-if="currentPage === 0"
|
||||
disabled
|
||||
class="w-[38px] h-[38px]"
|
||||
src="@/assets/image/content/switch_right.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
@click="prevPage"
|
||||
src="@/assets/image/content/switch_left.png"
|
||||
class="transform rotate-180 w-[38px] h-[38px] cursor-pointer"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="currentPage >= totalPages - 1"
|
||||
class="transform rotate-180 w-[38px] h-[38px] ml-[20px]"
|
||||
disabled
|
||||
src="@/assets/image/content/switch_right.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
@click="nextPage"
|
||||
class="w-[38px] h-[38px] ml-[20px] cursor-pointer"
|
||||
src="@/assets/image/content/switch_left.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="grid grid-cols-2 gap-[15px]">
|
||||
<section class="news-section" style="width: 900px; margin: 60px auto">
|
||||
<h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
|
||||
<div class="grid grid-cols-2 gap-[15px]">
|
||||
<template v-for="(item, index) in newList" :key="index">
|
||||
<div
|
||||
class="h-[246px] news-card flex flex-col justify-between"
|
||||
@ -223,59 +185,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div> -->
|
||||
|
||||
<!-- Grid 布局容器 -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="col-span-2 grid grid-cols-2 gap-4">
|
||||
<template v-for="(item, index) in pages" :key="index">
|
||||
<div
|
||||
class="h-[246px] news-card flex flex-col justify-between"
|
||||
:class="{
|
||||
'col-span-2':
|
||||
pages.length % 2 !== 0 && index === pages.length - 1,
|
||||
}"
|
||||
>
|
||||
<div class="text-[24px] font-600">{{ item.time }}</div>
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<div
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
style="
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="text-[16px] text-[#455363]"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</template>
|
||||
<div slot="content" class="text-[16px] text-[#455363]">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
<div
|
||||
class="text-[16px] text-[#FF7BAC] font-500 flex items-center cursor-pointer"
|
||||
@click="handleLink(item)"
|
||||
>
|
||||
View Press Release
|
||||
<img
|
||||
src="@/assets/image/content/vector.png"
|
||||
alt=""
|
||||
class="ml-[10px] w-[6.5px] h-[13px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="news-card">
|
||||
<div style="margin-bottom: 20px" v-for="(item, index) in newList">
|
||||
@ -354,59 +263,49 @@
|
||||
background-color: #e7407e;
|
||||
"
|
||||
>
|
||||
<div style="width: 900px" class="w-[900px] m-auto">
|
||||
<div class="w-[900px] m-auto">
|
||||
<!-- 股票信息卡片 -->
|
||||
<div class="">
|
||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||
<div class="stock-data">
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label"> Time </span>
|
||||
<span class="data-value">{{ sampleDate }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
}}</span>
|
||||
<span class="data-value">${{ stockQuote.price }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
}}</span>
|
||||
|
||||
<span class="data-value">{{ stockQuote.change || "--" }}</span>
|
||||
<span
|
||||
class="data-value"
|
||||
:class="
|
||||
stockQuote.change?.includes('-')
|
||||
? 'text-green-500'
|
||||
: 'text-red-500'
|
||||
"
|
||||
>{{ stockQuote.change || "--" }}</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
||||
}}</span>
|
||||
<span class="data-value">NASDAQ: FIEE</span>
|
||||
</div>
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
||||
}}</span>
|
||||
<span class="data-value">{{ stockQuote.volume }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="data-row"
|
||||
style="transform: translateX(-10px); padding-left: 10px"
|
||||
>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
||||
}}</span>
|
||||
@ -462,7 +361,7 @@
|
||||
class="dual-column-section"
|
||||
style="width: 100vw; height: 643px; margin: 60px auto; padding: 0 40px"
|
||||
>
|
||||
<div class="w-[900PX] m-auto">
|
||||
<div class="w-[900px] m-auto">
|
||||
<div class="">
|
||||
<h2 class="card-title1">
|
||||
{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
|
||||
@ -520,42 +419,6 @@ import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
import axios from "axios";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
|
||||
// 每页显示的项目数 - 最多三行，每行最多2个项目，所以每页最多6个项目
|
||||
const itemsPerPage = 6;
|
||||
|
||||
// 当前页码
|
||||
const currentPage = ref(0);
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(newList.value.length / itemsPerPage);
|
||||
});
|
||||
|
||||
// 将数据分页，最多返回6个项目
|
||||
const pages = computed(() => {
|
||||
// 使用slice确保只处理前6个项目
|
||||
const limitedItems = newList.value.slice(
|
||||
currentPage.value * itemsPerPage,
|
||||
(currentPage.value + 1) * itemsPerPage
|
||||
);
|
||||
return limitedItems;
|
||||
});
|
||||
|
||||
// 切换到上一页
|
||||
const prevPage = () => {
|
||||
if (currentPage.value > 0) {
|
||||
currentPage.value--;
|
||||
}
|
||||
};
|
||||
|
||||
// 切换到下一页
|
||||
const nextPage = () => {
|
||||
if (currentPage.value < totalPages.value - 1) {
|
||||
currentPage.value++;
|
||||
}
|
||||
};
|
||||
|
||||
getStockQuate();
|
||||
// 示例数据
|
||||
const sampleDate = ref(formatted);
|
||||
@ -751,16 +614,6 @@ const handleLink = (item) => {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 0;
|
||||
color: black;
|
||||
position: relative;
|
||||
}
|
||||
.section-titles1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: #ff7bac;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.content-block {
|
||||
@ -890,7 +743,8 @@ const handleLink = (item) => {
|
||||
/* justify-content: space-between; */
|
||||
margin: 24px 0;
|
||||
border-left: 2px solid #00ffff;
|
||||
|
||||
transform: translateX(-10px);
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -1,39 +1,8 @@
|
||||
<template>
|
||||
<div class="home-page relative overflow-hidden z-10 bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
|
||||
style="width: 630px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="w-[100%] h-[813PX] z-[] top-0 absolute">
|
||||
<div class="relative w-[100%] h-[100%]">
|
||||
<img
|
||||
src="@/assets/image/content/bg_3.png"
|
||||
alt=""
|
||||
class="w-[100vw] h-[813PX] absolute top-[-90PX]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/bg_4.png"
|
||||
alt=""
|
||||
class="w-[312PX] h-[214PX] absolute top-[108PX] left-[50%] translate-x-[-100%]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/bg_5.png"
|
||||
alt=""
|
||||
class="w-[100vw] absolute bottom-[-80PX] lef-0 right-0 z-99"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-page">
|
||||
<section
|
||||
class="company-overview"
|
||||
style="
|
||||
max-width: 618px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
padding-top: 290px;
|
||||
height: 790px;
|
||||
"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
>
|
||||
<div class="hero-section">
|
||||
<transition name="fade-up" appear>
|
||||
@ -54,14 +23,15 @@
|
||||
<!-- 公司概况 -->
|
||||
<section
|
||||
class="company-overview"
|
||||
style="max-width: 618px; margin: 0 auto; padding: 0;margin-top: 100px;"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
>
|
||||
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
||||
<h1 class="section-titles">Company Profile</h1>
|
||||
<div class="content-block text-[#455363]">
|
||||
|
||||
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
||||
<div class="content-block">
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||
<p>
|
||||
<text class="text-[#455363]">{{
|
||||
<text style="color: black">{{
|
||||
$t("COMPANYOVERVIEW.TITLETWO.CONTENTTWOTITLE")
|
||||
}}</text>
|
||||
|
||||
@ -69,195 +39,31 @@
|
||||
</p>
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 w-[100%]">
|
||||
<img
|
||||
src="@/assets/image/content/profile_1.png"
|
||||
alt=""
|
||||
class="w-[293PX] h-[201PX] mx-auto"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/profile_2.png"
|
||||
alt=""
|
||||
class="w-[293PX] h-[201PX] mx-auto"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/profile_3.png"
|
||||
alt=""
|
||||
class="w-[293PX] h-[201PX] mx-auto"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/profile_4.png"
|
||||
alt=""
|
||||
class="w-[293PX] h-[201PX] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 突出成就 -->
|
||||
<section
|
||||
class="achievements overflow-hidden z-99 relative"
|
||||
class="achievements"
|
||||
style="
|
||||
width: 100vw;
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
margin-top: 40px;
|
||||
background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
|
||||
background: #fff;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="max-width: 618px; height: 260px; padding: 64px 0"
|
||||
class="m-[auto] flex flex-col items-center text-center"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
</h2>
|
||||
<div class="w-100% flex items-center justify-between">
|
||||
<p style="font-size: 14px" class="my-0 text-[#455363]">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="section-titles">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
</h2>
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
|
||||
</p>
|
||||
</section>
|
||||
<!-- 新闻模块 -->
|
||||
<section class="news-section relative z-99" style="width: 618px; margin: 60px auto">
|
||||
<div class="flex justify-between">
|
||||
<h2 class="section-titles section-titles1">
|
||||
{{ $t("HOME.CONTAINY.NEWS.TITLE") }}
|
||||
</h2>
|
||||
<div v-if="totalPages > 1">
|
||||
<!-- 左右切换按钮 -->
|
||||
<img
|
||||
v-if="currentPage === 0"
|
||||
disabled
|
||||
class="w-[38px] h-[38px]"
|
||||
src="@/assets/image/content/switch_right.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
@click="prevPage"
|
||||
src="@/assets/image/content/switch_left.png"
|
||||
class="transform rotate-180 w-[38px] h-[38px] cursor-pointer"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="currentPage >= totalPages - 1"
|
||||
class="transform rotate-180 w-[38px] h-[38px] ml-[20px]"
|
||||
disabled
|
||||
src="@/assets/image/content/switch_right.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
@click="nextPage"
|
||||
class="w-[38px] h-[38px] ml-[20px] cursor-pointer"
|
||||
src="@/assets/image/content/switch_left.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="grid grid-cols-2 gap-[15px]">
|
||||
<template v-for="(item, index) in newList" :key="index">
|
||||
<div
|
||||
class="h-[246px] news-card flex flex-col justify-between"
|
||||
:class="{ 'col-span-2': index === 4 }"
|
||||
>
|
||||
<div class="text-[24px] font-600">{{ item.time }}</div>
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<div
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
style="
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="text-[16px] text-[#455363]"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</template>
|
||||
<div slot="content" class="text-[16px] text-[#455363]">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
<div
|
||||
class="text-[16px] text-[#FF7BAC] font-500 flex items-center cursor-pointer"
|
||||
@click="handleLink(item)"
|
||||
>
|
||||
View Press Release
|
||||
<img
|
||||
src="@/assets/image/content/vector.png"
|
||||
alt=""
|
||||
class="ml-[10px] w-[6.5px] h-[13px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div> -->
|
||||
|
||||
<!-- Grid 布局容器 -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="col-span-2 grid grid-cols-2 gap-4">
|
||||
<template v-for="(item, index) in pages" :key="index">
|
||||
<div
|
||||
style="height: 232px"
|
||||
class="news-card flex flex-col justify-between"
|
||||
:class="{
|
||||
'col-span-2':
|
||||
pages.length % 2 !== 0 && index === pages.length - 1,
|
||||
}"
|
||||
>
|
||||
<div class="text-[24PX] font-600">{{ item.time }}</div>
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
<template #trigger>
|
||||
<div
|
||||
:ref="(el) => setTitleRef(el, index)"
|
||||
style="
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="text-[16PX] text-[#455363]"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</template>
|
||||
<div slot="content" class="text-[16PX] text-[#455363]">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</n-tooltip>
|
||||
<div
|
||||
class="text-[16PX] text-[#FF7BAC] font-500 flex items-center cursor-pointer"
|
||||
@click="handleLink(item)"
|
||||
>
|
||||
View Press Release
|
||||
<img
|
||||
src="@/assets/image/content/vector.png"
|
||||
alt=""
|
||||
class="ml-[10px] w-[6.5px] h-[13px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="news-card">
|
||||
<section
|
||||
class="news-section"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
>
|
||||
<h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
|
||||
<div class="news-card">
|
||||
<div style="margin-bottom: 20px" v-for="(item, index) in newList">
|
||||
<div
|
||||
style="
|
||||
@ -268,9 +74,8 @@
|
||||
>
|
||||
<div>
|
||||
<div style="font-size: 18px">{{ item.time }}</div>
|
||||
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
trigger="click"
|
||||
:disabled="!item.showTooltip"
|
||||
width="trigger"
|
||||
>
|
||||
@ -297,7 +102,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.6rem"
|
||||
style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.9rem"
|
||||
class="cursor-pointer"
|
||||
@click="handleLink(item)"
|
||||
>
|
||||
@ -320,121 +125,81 @@
|
||||
style="width: 109px; height: 60px"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<!-- 新增：股票信息与活动预告双栏模块 -->
|
||||
<section
|
||||
class="dual-column-section bg-[url('@/assets/image/content/information1.png')]"
|
||||
style="
|
||||
width: 100vw;
|
||||
height: 743px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background-size: 100% 100%;
|
||||
background-color: #e7407e;
|
||||
"
|
||||
class="dual-column-section"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
>
|
||||
<div style="width: 618px" class="m-auto">
|
||||
<div class="grid-container">
|
||||
<!-- 股票信息卡片 -->
|
||||
<div class="">
|
||||
<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>
|
||||
<span style="font-size: 18px" class="data-label"> Time </span>
|
||||
<span style="font-size: 18px" class="data-value">{{
|
||||
formatted
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
}}</span>
|
||||
<span class="data-value">${{ stockQuote.price }}</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>${{ stockQuote.price }}</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 class="data-value">{{ stockQuote.change || "--" }}</span>
|
||||
<span
|
||||
style="font-size: 18px"
|
||||
class="data-value"
|
||||
:class="
|
||||
stockQuote.change?.includes('-')
|
||||
? 'text-green-500'
|
||||
: 'text-red-500'
|
||||
"
|
||||
>{{ stockQuote.change || "--" }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">{{
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
||||
}}</span>
|
||||
<span class="data-value">NASDAQ: FIEE</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>NASDAQ: FIEE</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>
|
||||
|
||||
<!-- 活动预告卡片 -->
|
||||
<!-- <div class="">
|
||||
<div class="info-card events-card">
|
||||
<h2 class="card-title">
|
||||
{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
|
||||
</h2>
|
||||
<div class="event-item"> -->
|
||||
<!-- <h3 class="event-name">
|
||||
{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.EVENT_NAME") }}
|
||||
</h3> -->
|
||||
<!-- <div class="event-detail">
|
||||
<div class="detail-row">
|
||||
<i class="icon-calendar"></i>
|
||||
<span
|
||||
>{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.DATE") }}:
|
||||
2025年8月12日(二)-2025年8月14日</span
|
||||
>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<i class="icon-location"></i>
|
||||
<span
|
||||
>{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.VENUE") }}:
|
||||
6号馆B厅</span
|
||||
>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<i class="icon-area"></i>
|
||||
<span
|
||||
>{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.AREA") }}:
|
||||
约10,000m²</span
|
||||
>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<i class="icon-booth"></i>
|
||||
<span
|
||||
>{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.BOOTHS") }}:
|
||||
约500个标准展位</span
|
||||
>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
class="dual-column-section"
|
||||
style="width: 100vw; height: 643px; margin: 60px auto; padding: 0 40px"
|
||||
>
|
||||
<div class="w-[618PX] m-auto">
|
||||
<div class="">
|
||||
<h2 class="card-title1">
|
||||
{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
|
||||
</h2>
|
||||
<div class="event-item">
|
||||
<img
|
||||
src="@/assets/image/content/empty.png"
|
||||
alt=""
|
||||
class="w-[100%] h-[540px]"
|
||||
/>
|
||||
<!-- <h3 class="event-name">
|
||||
{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.EVENT_NAME") }}
|
||||
</h3> -->
|
||||
@ -483,44 +248,12 @@ import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
import axios from "axios";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
|
||||
// 每页显示的项目数 - 最多三行，每行最多2个项目，所以每页最多6个项目
|
||||
const itemsPerPage = 6;
|
||||
|
||||
// 当前页码
|
||||
const currentPage = ref(0);
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(newList.value.length / itemsPerPage);
|
||||
});
|
||||
|
||||
// 将数据分页，最多返回6个项目
|
||||
const pages = computed(() => {
|
||||
// 使用slice确保只处理前6个项目
|
||||
const limitedItems = newList.value.slice(
|
||||
currentPage.value * itemsPerPage,
|
||||
(currentPage.value + 1) * itemsPerPage
|
||||
);
|
||||
return limitedItems;
|
||||
});
|
||||
|
||||
// 切换到上一页
|
||||
const prevPage = () => {
|
||||
if (currentPage.value > 0) {
|
||||
currentPage.value--;
|
||||
}
|
||||
};
|
||||
|
||||
// 切换到下一页
|
||||
const nextPage = () => {
|
||||
if (currentPage.value < totalPages.value - 1) {
|
||||
currentPage.value++;
|
||||
}
|
||||
};
|
||||
|
||||
getStockQuate();
|
||||
// 示例数据
|
||||
const sampleDate = ref(formatted);
|
||||
|
||||
const { t: $t } = useI18n();
|
||||
const contentRef = ref(null);
|
||||
const isInView = ref(false);
|
||||
let observer = null;
|
||||
|
||||
const newList = ref([
|
||||
// {
|
||||
@ -535,36 +268,6 @@ const newList = ref([
|
||||
// },
|
||||
]);
|
||||
|
||||
// 获取新闻发布(展示在首页的)
|
||||
const getPressReleasesDisplay = () => {
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
display: 2, // 1: 不展示在首页 2: 展示在首页
|
||||
};
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
newList.value = res.data.data?.data || [];
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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(
|
||||
@ -624,6 +327,32 @@ watch(
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 获取新闻发布(展示在首页的)
|
||||
const getPressReleasesDisplay = () => {
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
|
||||
let params = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
display: 2, // 1: 不展示在首页 2: 展示在首页
|
||||
};
|
||||
// console.log(params)
|
||||
axios.post(url, params).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
res.data.data?.data?.forEach((item) => {
|
||||
item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
newList.value = res.data.data?.data || [];
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
if (observer) {
|
||||
observer.disconnect();
|
||||
@ -641,7 +370,7 @@ const handleLink = (item) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
@ -655,11 +384,11 @@ const handleLink = (item) => {
|
||||
}
|
||||
/* 顶部大图区域 */
|
||||
.hero-section {
|
||||
/* background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac); */
|
||||
background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
|
||||
background-size: 400% 400%;
|
||||
/* animation: gradientBG 15s ease infinite; */
|
||||
color: #000;
|
||||
padding: 40px 0px;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
color: white;
|
||||
padding: 40px 20px;
|
||||
text-align: left;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 8px;
|
||||
@ -678,7 +407,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
.banner-content {
|
||||
text-align: center;
|
||||
color: #000;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
@ -705,34 +434,24 @@ const handleLink = (item) => {
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem; /* 18px */
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 30px;
|
||||
color: #ff7bac;
|
||||
}
|
||||
.section-titles {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 0;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 30px;
|
||||
color: black;
|
||||
position: relative;
|
||||
}
|
||||
.section-titles1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: #ff7bac;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.content-block {
|
||||
font-size: 0.9rem;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.content-blocks {
|
||||
font-size: 2rem;
|
||||
color: #000;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateX(-200px);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
@ -804,38 +523,20 @@ const handleLink = (item) => {
|
||||
|
||||
.card-title {
|
||||
font-size: 2.5rem;
|
||||
padding-top: 88px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 25px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: #ffffff;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.card-title1 {
|
||||
font-size: 2.5rem;
|
||||
padding-top: 88px;
|
||||
color: #000;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-title1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: #ff7bac;
|
||||
transform: translateY(-20px);
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #121212, #232330);
|
||||
}
|
||||
|
||||
/* 股票信息卡片样式 */
|
||||
@ -849,24 +550,20 @@ const handleLink = (item) => {
|
||||
|
||||
.data-row {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
margin: 24px 0;
|
||||
border-left: 2px solid #00ffff;
|
||||
transform: translateX(-10px);
|
||||
padding-left: 30px;
|
||||
font-size: 14PX;
|
||||
color: #fff;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
// font-weight: 500;
|
||||
width: 150px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
// font-weight: 600;
|
||||
font-family: "PingFang SC";
|
||||
letter-spacing: 0.48px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.positive {
|
||||
@ -947,7 +644,7 @@ const handleLink = (item) => {
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
||||
border-top: 14px solid #ff7bac;
|
||||
border-left: 4px solid #ff7bac;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
|
||||
@ -54,7 +54,7 @@ const getPressReleasesInfo = () => {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
width: 900PX;
|
||||
max-width: 932px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user