代码暂存
This commit is contained in:
parent
eeabddcf11
commit
885e95dba0
BIN
src/assets/image/content/arrowhead_left.png
Normal file
BIN
src/assets/image/content/arrowhead_left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 564 B |
BIN
src/assets/image/content/arrowhead_right.png
Normal file
BIN
src/assets/image/content/arrowhead_right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
BIN
src/assets/image/content/bg_1.png
Normal file
BIN
src/assets/image/content/bg_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/image/content/bg_2.png
Normal file
BIN
src/assets/image/content/bg_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
src/assets/image/content/bg_gradient.png
Normal file
BIN
src/assets/image/content/bg_gradient.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
BIN
src/assets/image/content/bg_line.png
Normal file
BIN
src/assets/image/content/bg_line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/image/content/empty.png
Normal file
BIN
src/assets/image/content/empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/image/content/information.png
Normal file
BIN
src/assets/image/content/information.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
src/assets/image/content/left.png
Normal file
BIN
src/assets/image/content/left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/image/content/line.png
Normal file
BIN
src/assets/image/content/line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
src/assets/image/content/profile_1.png
Normal file
BIN
src/assets/image/content/profile_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/image/content/profile_2.png
Normal file
BIN
src/assets/image/content/profile_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/image/content/profile_3.png
Normal file
BIN
src/assets/image/content/profile_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/image/content/profile_4.png
Normal file
BIN
src/assets/image/content/profile_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/image/content/right.png
Normal file
BIN
src/assets/image/content/right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/image/content/vector.png
Normal file
BIN
src/assets/image/content/vector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 308 B |
@ -1,8 +1,28 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<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: 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>
|
||||
<section
|
||||
class="company-overview"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
class="company-overview h-[916px]"
|
||||
style="max-width: 900px; margin: 0 auto; padding: 0; padding-top: 190px"
|
||||
>
|
||||
<div class="hero-section">
|
||||
<transition name="fade-up" appear>
|
||||
@ -23,15 +43,14 @@
|
||||
<!-- 公司概况 -->
|
||||
<section
|
||||
class="company-overview"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
style="max-width: 900px; margin: 0 auto; padding: 0"
|
||||
>
|
||||
<h1 class="section-titles">Company Profile</h1>
|
||||
|
||||
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
||||
<div class="content-block">
|
||||
<h1 class="section-titles">Company Profile</h1>
|
||||
<div class="content-block text-[#455363]">
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||
<p>
|
||||
<text style="color: black">{{
|
||||
<text class="text-[#455363]">{{
|
||||
$t("COMPANYOVERVIEW.TITLETWO.CONTENTTWOTITLE")
|
||||
}}</text>
|
||||
|
||||
@ -39,31 +58,135 @@
|
||||
</p>
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between w-[100%]">
|
||||
<img
|
||||
src="@/assets/image/content/profile_1.png"
|
||||
alt=""
|
||||
class="w-[201px] h-[201px]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/profile_2.png"
|
||||
alt=""
|
||||
class="w-[201px] h-[201px]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/profile_3.png"
|
||||
alt=""
|
||||
class="w-[201px] h-[201px]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/profile_4.png"
|
||||
alt=""
|
||||
class="w-[201px] h-[201px]"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 突出成就 -->
|
||||
<section
|
||||
class="achievements"
|
||||
class="achievements overflow-hidden z-99 relative"
|
||||
style="
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
width: 100vw;
|
||||
padding: 0 40px;
|
||||
background: #fff;
|
||||
margin-top: 40px;
|
||||
background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
|
||||
"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
</h2>
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
|
||||
</p>
|
||||
<div
|
||||
class="w-[900px] m-[auto] my-[64px] flex flex-col items-center h-[190px] text-center"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
</h2>
|
||||
<div class="w-100% flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="bg-[#ffffff] w-[108px] h-[108px] 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: 18px" class="w-[438px] my-0">
|
||||
{{ $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] w-[108px] h-[108px] 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
|
||||
class="news-section"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
>
|
||||
<section class="news-section" style="width: 900px; margin: 60px auto">
|
||||
<h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
|
||||
<div class="news-card">
|
||||
<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>
|
||||
<!-- <div class="news-card">
|
||||
<div style="margin-bottom: 20px" v-for="(item, index) in newList">
|
||||
<div
|
||||
style="
|
||||
@ -74,6 +197,7 @@
|
||||
>
|
||||
<div>
|
||||
<div style="font-size: 18px">{{ item.time }}</div>
|
||||
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
:disabled="!item.showTooltip"
|
||||
@ -125,38 +249,41 @@
|
||||
style="width: 109px; height: 60px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</section>
|
||||
<!-- 新增：股票信息与活动预告双栏模块 -->
|
||||
<section
|
||||
class="dual-column-section"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
class="dual-column-section bg-[url('@/assets/image/content/information.png')]"
|
||||
style="
|
||||
width: 100vw;
|
||||
height: 643px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background-size: 100% 100%;
|
||||
background-color: #e7407e;
|
||||
"
|
||||
>
|
||||
<div class="grid-container">
|
||||
<div class="w-[900px] m-auto">
|
||||
<!-- 股票信息卡片 -->
|
||||
<div class="info-card stock-card">
|
||||
<div class="">
|
||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||
<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">{{
|
||||
formatted
|
||||
}}</span>
|
||||
<span class="data-label"> Time </span>
|
||||
<span class="data-value">{{ sampleDate }}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||||
}}</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>${{ stockQuote.price }}</span
|
||||
>
|
||||
<span class="data-value">${{ stockQuote.price }}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||||
}}</span>
|
||||
|
||||
<span
|
||||
style="font-size: 18px"
|
||||
class="data-value"
|
||||
:class="
|
||||
stockQuote.change?.includes('-')
|
||||
@ -167,38 +294,84 @@
|
||||
>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
||||
}}</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>NASDAQ: FIEE</span
|
||||
>
|
||||
<span class="data-value">NASDAQ: FIEE</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
||||
}}</span>
|
||||
<span style="font-size: 18px" class="data-value">{{
|
||||
stockQuote.volume
|
||||
}}</span>
|
||||
<span class="data-value">{{ stockQuote.volume }}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span style="font-size: 18px" class="data-label">{{
|
||||
<span class="data-label">{{
|
||||
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
||||
}}</span>
|
||||
<span style="font-size: 18px" class="data-value"
|
||||
>${{ stockQuote.marketCap }}</span
|
||||
>
|
||||
<span class="data-value">${{ stockQuote.marketCap }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动预告卡片 -->
|
||||
<div class="info-card events-card">
|
||||
<!-- <div class="">
|
||||
<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-[900px] 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> -->
|
||||
@ -246,13 +419,10 @@ import { useI18n } from "vue-i18n";
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
import axios from "axios";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
|
||||
getStockQuate();
|
||||
// 示例数据
|
||||
const sampleDate = ref(formatted);
|
||||
|
||||
const { t: $t } = useI18n();
|
||||
const contentRef = ref(null);
|
||||
const isInView = ref(false);
|
||||
let observer = null;
|
||||
const newList = ref([
|
||||
// {
|
||||
// time: "June 3, 2025",
|
||||
@ -292,6 +462,10 @@ const getPressReleasesDisplay = () => {
|
||||
});
|
||||
};
|
||||
|
||||
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(
|
||||
@ -368,7 +542,7 @@ const handleLink = (item) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.home-page {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
@ -382,11 +556,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: white;
|
||||
padding: 40px 20px;
|
||||
/* animation: gradientBG 15s ease infinite; */
|
||||
color: #000;
|
||||
padding: 40px 0px;
|
||||
text-align: left;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 8px;
|
||||
@ -405,7 +579,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
.banner-content {
|
||||
text-align: center;
|
||||
color: white;
|
||||
color: #000;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
@ -432,24 +606,24 @@ const handleLink = (item) => {
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem; /* 18px */
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 0;
|
||||
color: #ff7bac;
|
||||
}
|
||||
.section-titles {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.content-block {
|
||||
font-size: 1.1rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.content-blocks {
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateX(-200px);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
@ -521,20 +695,38 @@ const handleLink = (item) => {
|
||||
|
||||
.card-title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 25px;
|
||||
color: #333;
|
||||
padding-top: 88px;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #121212, #232330);
|
||||
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);
|
||||
}
|
||||
|
||||
/* 股票信息卡片样式 */
|
||||
@ -548,20 +740,24 @@ const handleLink = (item) => {
|
||||
|
||||
.data-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
/* justify-content: space-between; */
|
||||
margin: 24px 0;
|
||||
border-left: 2px solid #00ffff;
|
||||
transform: translateX(-10px);
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
// font-weight: 500;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
// font-weight: 600;
|
||||
font-family: "PingFang SC";
|
||||
letter-spacing: 0.48px;
|
||||
}
|
||||
|
||||
.positive {
|
||||
@ -642,7 +838,7 @@ const handleLink = (item) => {
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
||||
border-left: 4px solid #ff7bac;
|
||||
border-top: 14px solid #ff7bac;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
@ -657,6 +853,13 @@ const handleLink = (item) => {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.news-excerpt {
|
||||
color: black;
|
||||
line-height: 0.8;
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.news-link {
|
||||
color: #895bff;
|
||||
font-weight: 600;
|
||||
|
||||
@ -1,8 +1,28 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<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: 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>
|
||||
<section
|
||||
class="company-overview"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
class="company-overview h-[916px]"
|
||||
style="max-width: 900px; margin: 0 auto; padding: 0; padding-top: 190px"
|
||||
>
|
||||
<div class="hero-section">
|
||||
<transition name="fade-up" appear>
|
||||
@ -23,14 +43,14 @@
|
||||
<!-- 公司概况 -->
|
||||
<section
|
||||
class="company-overview"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
style="max-width: 900px; margin: 0 auto; padding: 0"
|
||||
>
|
||||
<h1 class="section-titles">Company Profile</h1>
|
||||
<h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
|
||||
<div class="content-block">
|
||||
<h1 class="section-titles">Company Profile</h1>
|
||||
<div class="content-block text-[#455363]">
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||||
<p>
|
||||
<text style="color: black">{{
|
||||
<text class="text-[#455363]">{{
|
||||
$t("COMPANYOVERVIEW.TITLETWO.CONTENTTWOTITLE")
|
||||
}}</text>
|
||||
|
||||
@ -38,31 +58,135 @@
|
||||
</p>
|
||||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between w-[100%]">
|
||||
<img
|
||||
src="@/assets/image/content/profile_1.png"
|
||||
alt=""
|
||||
class="w-[201px] h-[201px]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/profile_2.png"
|
||||
alt=""
|
||||
class="w-[201px] h-[201px]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/profile_3.png"
|
||||
alt=""
|
||||
class="w-[201px] h-[201px]"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/content/profile_4.png"
|
||||
alt=""
|
||||
class="w-[201px] h-[201px]"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 突出成就 -->
|
||||
<section
|
||||
class="achievements"
|
||||
class="achievements overflow-hidden z-99 relative"
|
||||
style="
|
||||
max-width: 1200px;
|
||||
margin: 60px auto;
|
||||
width: 100vw;
|
||||
padding: 0 40px;
|
||||
background: #fff;
|
||||
margin-top: 40px;
|
||||
background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
|
||||
"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
</h2>
|
||||
<p style="font-size: 18px">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
|
||||
</p>
|
||||
<div
|
||||
class="w-[900px] m-[auto] my-[64px] flex flex-col items-center h-[190px] text-center"
|
||||
>
|
||||
<h2 class="section-titles">
|
||||
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
|
||||
</h2>
|
||||
<div class="w-100% flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="bg-[#ffffff] w-[108px] h-[108px] 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: 18px" class="w-[438px] my-0">
|
||||
{{ $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] w-[108px] h-[108px] 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
|
||||
class="news-section"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
>
|
||||
<section class="news-section" style="width: 900px; margin: 60px auto">
|
||||
<h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
|
||||
<div class="news-card">
|
||||
<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>
|
||||
<!-- <div class="news-card">
|
||||
<div style="margin-bottom: 20px" v-for="(item, index) in newList">
|
||||
<div
|
||||
style="
|
||||
@ -125,16 +249,23 @@
|
||||
style="width: 109px; height: 60px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</section>
|
||||
<!-- 新增：股票信息与活动预告双栏模块 -->
|
||||
<section
|
||||
class="dual-column-section"
|
||||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||||
class="dual-column-section bg-[url('@/assets/image/content/information.png')]"
|
||||
style="
|
||||
width: 100vw;
|
||||
height: 643px;
|
||||
margin: 60px auto;
|
||||
padding: 0 40px;
|
||||
background-size: 100% 100%;
|
||||
background-color: #e7407e;
|
||||
"
|
||||
>
|
||||
<div class="grid-container">
|
||||
<div class="w-[900px] m-auto">
|
||||
<!-- 股票信息卡片 -->
|
||||
<div class="info-card stock-card">
|
||||
<div class="">
|
||||
<h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
|
||||
<div class="stock-data">
|
||||
<div class="data-row">
|
||||
@ -184,11 +315,63 @@
|
||||
</div>
|
||||
|
||||
<!-- 活动预告卡片 -->
|
||||
<div class="info-card events-card">
|
||||
<!-- <div class="">
|
||||
<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-[900px] 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> -->
|
||||
@ -359,7 +542,7 @@ const handleLink = (item) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.home-page {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
@ -373,11 +556,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: white;
|
||||
padding: 40px 20px;
|
||||
/* animation: gradientBG 15s ease infinite; */
|
||||
color: #000;
|
||||
padding: 40px 0px;
|
||||
text-align: left;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 8px;
|
||||
@ -396,7 +579,7 @@ const handleLink = (item) => {
|
||||
}
|
||||
.banner-content {
|
||||
text-align: center;
|
||||
color: white;
|
||||
color: #000;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
@ -423,24 +606,24 @@ const handleLink = (item) => {
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem; /* 18px */
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 0;
|
||||
color: #ff7bac;
|
||||
}
|
||||
.section-titles {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.content-block {
|
||||
font-size: 1.1rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.content-blocks {
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateX(-200px);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
@ -512,20 +695,38 @@ const handleLink = (item) => {
|
||||
|
||||
.card-title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 25px;
|
||||
color: #333;
|
||||
padding-top: 88px;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #121212, #232330);
|
||||
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);
|
||||
}
|
||||
|
||||
/* 股票信息卡片样式 */
|
||||
@ -539,20 +740,24 @@ const handleLink = (item) => {
|
||||
|
||||
.data-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
/* justify-content: space-between; */
|
||||
margin: 24px 0;
|
||||
border-left: 2px solid #00ffff;
|
||||
transform: translateX(-10px);
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
// font-weight: 500;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
// font-weight: 600;
|
||||
font-family: "PingFang SC";
|
||||
letter-spacing: 0.48px;
|
||||
}
|
||||
|
||||
.positive {
|
||||
@ -633,7 +838,7 @@ const handleLink = (item) => {
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
||||
border-left: 4px solid #ff7bac;
|
||||
border-top: 14px solid #ff7bac;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
|
||||
@ -1,6 +1,20 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div id="my-richText"></div>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="w-[100vw] bg-[#ffffff] z-[1] top-0 left-0 bottom-0 right-0 absolute"
|
||||
></div>
|
||||
<div
|
||||
class="page-container overflow-hidden z-10 relative"
|
||||
style="width: 900px"
|
||||
>
|
||||
<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 id="my-richText"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -12,7 +26,7 @@ import { useI18n } from "vue-i18n";
|
||||
const { t } = useI18n();
|
||||
import { useRoute } from "vue-router";
|
||||
const route = useRoute();
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
|
||||
const state = reactive({
|
||||
id: "", // 新闻id
|
||||
@ -26,23 +40,22 @@ onMounted(() => {
|
||||
|
||||
//获取新闻信息
|
||||
const getPressReleasesInfo = () => {
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/pressreleases?id=' + state.id
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases?id=" + state.id;
|
||||
axios.get(url).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
const myRichText = document.getElementById('my-richText')
|
||||
myRichText.innerHTML = res.data.data.content
|
||||
const myRichText = document.getElementById("my-richText");
|
||||
myRichText.innerHTML = res.data.data.content;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
max-width: 1200px;
|
||||
// max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
// padding: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,20 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div id="my-richText"></div>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="w-[100vw] bg-[#ffffff] z-[1] top-0 left-0 bottom-0 right-0 absolute"
|
||||
></div>
|
||||
<div
|
||||
class="page-container overflow-hidden z-10 relative"
|
||||
style="width: 900px"
|
||||
>
|
||||
<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 id="my-richText"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -12,7 +26,7 @@ import { useI18n } from "vue-i18n";
|
||||
const { t } = useI18n();
|
||||
import { useRoute } from "vue-router";
|
||||
const route = useRoute();
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
|
||||
const state = reactive({
|
||||
id: "", // 新闻id
|
||||
@ -26,22 +40,22 @@ onMounted(() => {
|
||||
|
||||
//获取新闻信息
|
||||
const getPressReleasesInfo = () => {
|
||||
let url = 'https://erpapi.fiee.com/api/fiee/pressreleases?id=' + state.id
|
||||
let url = "https://erpapi.fiee.com/api/fiee/pressreleases?id=" + state.id;
|
||||
axios.get(url).then((res) => {
|
||||
// console.log(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
const myRichText = document.getElementById('my-richText')
|
||||
myRichText.innerHTML = res.data.data.content
|
||||
const myRichText = document.getElementById("my-richText");
|
||||
myRichText.innerHTML = res.data.data.content;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
max-width: 1200px;
|
||||
// max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
// padding: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user