537 lines
12 KiB
Vue
537 lines
12 KiB
Vue
<template>
|
||
<div class="home-page">
|
||
<!-- 顶部背景图 Banner -->
|
||
<div class="hero-banner">
|
||
<div class="banner-content">
|
||
<h1 class="main-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h1>
|
||
<p class="sub-title">
|
||
NASDAQ: MINM | {{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}
|
||
</p>
|
||
<!-- <p class="sub-title" style="">
|
||
{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||
</p> -->
|
||
</div>
|
||
</div>
|
||
<section
|
||
class="company-overview"
|
||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||
>
|
||
<h2 class="section-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h2>
|
||
<div class="content-block">
|
||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</p>
|
||
<p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 公司概况 -->
|
||
<section
|
||
class="company-overview"
|
||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||
>
|
||
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h2>
|
||
<div class="content-block">
|
||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
|
||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
|
||
<p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 使命与愿景 -->
|
||
<section
|
||
class="mission-vision"
|
||
style="
|
||
max-width: 1200px;
|
||
margin: 60px auto;
|
||
padding: 0 40px;
|
||
background: #f8fafc;
|
||
"
|
||
>
|
||
<h2 class="section-title">
|
||
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
|
||
</h2>
|
||
<div class="mission-content">
|
||
<ul>
|
||
<li>
|
||
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT").replace("•", "") }}
|
||
</li>
|
||
<li>
|
||
{{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO").replace("•", "") }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 企业里程碑 -->
|
||
<section
|
||
class="milestones"
|
||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||
>
|
||
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}</h2>
|
||
|
||
<div class="milestone-item">
|
||
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
|
||
<ul>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") }}</li>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") }}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="milestone-item">
|
||
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO") }}</h3>
|
||
<ul>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") }}</li>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") }}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="milestone-item">
|
||
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE") }}</h3>
|
||
<ul>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") }}</li>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") }}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="milestone-item">
|
||
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF") }}</h3>
|
||
<ul>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") }}</li>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") }}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="milestone-item">
|
||
<h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE") }}</h3>
|
||
<ul>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") }}</li>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") }}</li>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") }}</li>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") }}</li>
|
||
<li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") }}</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 突出成就 -->
|
||
<section
|
||
class="achievements"
|
||
style="
|
||
max-width: 1200px;
|
||
margin: 60px auto;
|
||
padding: 0 40px;
|
||
background: #f8fafc;
|
||
"
|
||
>
|
||
<h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}</h2>
|
||
<p>{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}</p>
|
||
</section>
|
||
<!-- 新闻模块 -->
|
||
<section
|
||
class="news-section"
|
||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||
>
|
||
<h2 class="section-title">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
|
||
<div class="news-card">
|
||
<div class="news-date">2025-05-15</div>
|
||
<h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3>
|
||
<p class="news-excerpt">
|
||
{{ $t("HOME.CONTAINY.NEWS.LATEST_CONTENT") }}
|
||
</p>
|
||
<!-- <a href="#" class="news-link"
|
||
>{{ $t("HOME.CONTAINY.NEWS.READ_MORE") }} →</a
|
||
> -->
|
||
</div>
|
||
</section>
|
||
<!-- 新增：股票信息与活动预告双栏模块 -->
|
||
<section
|
||
class="dual-column-section"
|
||
style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
|
||
>
|
||
<div class="grid-container">
|
||
<!-- 股票信息卡片 -->
|
||
<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">{{
|
||
$t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
|
||
}}</span>
|
||
<span class="data-value">${{ dataObj.Open }}</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">{{
|
||
$t("HOME.CONTAINY.STOCK_INFO.CHANGE")
|
||
}}</span>
|
||
<span class="data-value positive"
|
||
>{{ dataObj.change[0] }}{{ dataObj.change[1] }}</span
|
||
>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">{{
|
||
$t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
|
||
}}</span>
|
||
<span class="data-value">NASDAQ: MINM</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">{{
|
||
$t("HOME.CONTAINY.STOCK_INFO.VOLUME")
|
||
}}</span>
|
||
<span class="data-value">{{ dataObj.Volume }}</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="data-label">{{
|
||
$t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
|
||
}}</span>
|
||
<span class="data-value">${{ dataObj.MarketCap }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 活动预告卡片 -->
|
||
<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>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref } from "vue";
|
||
|
||
import { useI18n } from "vue-i18n";
|
||
import { getTestData } from "@/config/testRequest";
|
||
const dataObj = ref({
|
||
change: ["0.2", "1111"],
|
||
});
|
||
onMounted(async () => {
|
||
try {
|
||
const data = await getTestData();
|
||
dataObj.value = data;
|
||
} catch (error) {
|
||
console.error("调用接口失败:", error);
|
||
}
|
||
});
|
||
const { t: $t } = useI18n();
|
||
</script>
|
||
|
||
<style scoped>
|
||
.home-page {
|
||
background-image: url("@/assets/image/bg.png");
|
||
background-size: 100% 100%;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.hero-banner {
|
||
height: 600px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.banner-content {
|
||
text-align: center;
|
||
color: white;
|
||
padding: 20px;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.main-title {
|
||
font-size: 3.5rem;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.section-card {
|
||
padding: 40px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.card-content {
|
||
font-size: 1.1rem;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 30px;
|
||
color: #895bff;
|
||
}
|
||
|
||
.content-block {
|
||
font-size: 1.1rem;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.mission-content ul {
|
||
list-style: disc;
|
||
padding-left: 20px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.milestones {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.milestone-item {
|
||
margin-bottom: 40px;
|
||
padding: 20px;
|
||
border-left: 3px solid #895bff;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.milestone-item h3 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 10px;
|
||
color: #895bff;
|
||
}
|
||
|
||
.milestone-item ul {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.milestone-item li {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.achievements {
|
||
padding: 40px;
|
||
border-radius: 12px;
|
||
}
|
||
/* 新增样式 */
|
||
.dual-column-section {
|
||
margin-bottom: 80px;
|
||
}
|
||
|
||
.grid-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30px;
|
||
}
|
||
|
||
.info-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.info-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.8rem;
|
||
margin-bottom: 25px;
|
||
color: #895bff;
|
||
position: relative;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.card-title::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 60px;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, #895bff, #b388ff);
|
||
}
|
||
|
||
/* 股票信息卡片样式 */
|
||
.stock-card {
|
||
border-top: 4px solid #895bff;
|
||
}
|
||
|
||
.stock-data {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.data-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.data-label {
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.data-value {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.positive {
|
||
color: #895bff;
|
||
}
|
||
|
||
.stock-chart-placeholder {
|
||
height: 200px;
|
||
background: #f8fafc;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chart-mock {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 80%;
|
||
background: linear-gradient(90deg, #e0e7ff, #c7d2fe);
|
||
border-radius: 0 0 8px 8px;
|
||
}
|
||
|
||
/* 活动预告卡片样式 */
|
||
.events-card {
|
||
border-top: 4px solid #10b981;
|
||
}
|
||
|
||
.event-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.event-name {
|
||
font-size: 1.4rem;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
color: #555;
|
||
}
|
||
|
||
.detail-row i {
|
||
margin-right: 10px;
|
||
color: #895bff;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.event-button {
|
||
background: linear-gradient(135deg, #895bff, #6a11cb);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
margin-top: 20px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.event-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
|
||
}
|
||
|
||
/* 新闻模块样式 */
|
||
.news-section {
|
||
margin-bottom: 80px;
|
||
}
|
||
|
||
.news-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
||
border-left: 4px solid #895bff;
|
||
}
|
||
|
||
.news-date {
|
||
color: #888;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.news-title {
|
||
font-size: 1.5rem;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.news-excerpt {
|
||
color: #555;
|
||
line-height: 1.7;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.news-link {
|
||
color: #895bff;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.news-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.grid-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.hero-banner {
|
||
height: 400px;
|
||
}
|
||
|
||
.main-title {
|
||
font-size: 2.5rem;
|
||
}
|
||
}
|
||
</style>
|