This commit is contained in:
张 元山 2025-05-26 16:03:52 +08:00
commit b06317e581
12 changed files with 112 additions and 165 deletions

View File

@ -4,9 +4,9 @@
<!-- 渐变背景标题区 - 增加层次感 -->
<section class="hero-section">
<div class="container">
<div class="hero-title">
<h1 class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</div>
</h1>
<div style="font-size: 18px" class="hero-description">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div>
@ -15,9 +15,9 @@
<!-- 业务核心解决方案 -->
<main style="margin-top: 40px" class="container">
<section>
<div class="hero-title">
<h1 class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</div>
</h1>
</section>
<div class="solution-grid">
@ -42,7 +42,9 @@
class="content-point"
>
<div class="point-icon"></div>
<div class="point-text">{{ point }}</div>
<div style="font-size: 18px" class="point-text">
{{ point }}
</div>
</li>
</ul>
</div>
@ -152,11 +154,6 @@ const solutions = computed(() => [
border-radius: 2px;
}
/* 解决方案网格 */
.solution-grid {
padding: 0rem 0 4rem;
}
.solution-group {
display: flex;
flex-direction: column;
@ -175,10 +172,6 @@ const solutions = computed(() => [
flex: 1;
margin-top: 20px;
}
.solution-card {
height: 350px;
}
}
/* 移动端布局(<768px */
@ -213,39 +206,15 @@ const solutions = computed(() => [
/* 卡片公共样式 */
.solution-card {
background: white;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
transform: translateY(20px);
opacity: 0;
animation: cardEnter 0.6s ease forwards;
position: relative;
overflow: hidden;
border: 1px solid rgba(137, 91, 255, 0.2);
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
}
.solution-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(137, 91, 255, 0.03) 0%,
rgba(137, 91, 255, 0) 100%
);
z-index: -1;
}
.solution-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
}
.card-header {
margin-bottom: 2rem;
}
@ -284,7 +253,7 @@ const solutions = computed(() => [
.point-text {
color: #4a3a6b;
line-height: 1.6;
font-size: 1rem;
font-size: 18px;
}
@keyframes cardEnter {

View File

@ -4,9 +4,9 @@
<!-- 渐变背景标题区 - 增加层次感 -->
<section class="hero-section">
<div class="container">
<div class="hero-title">
<h1 class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</div>
</h1>
<div style="font-size: 18px" class="hero-description">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div>
@ -15,9 +15,9 @@
<!-- 业务核心解决方案 -->
<main style="margin-top: 40px" class="container">
<section>
<div class="hero-title">
<h1 class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</div>
</h1>
</section>
<div class="solution-grid">
@ -42,7 +42,9 @@
class="content-point"
>
<div class="point-icon"></div>
<div class="point-text">{{ point }}</div>
<div style="font-size: 18px" class="point-text">
{{ point }}
</div>
</li>
</ul>
</div>
@ -152,11 +154,6 @@ const solutions = computed(() => [
border-radius: 2px;
}
/* 解决方案网格 */
.solution-grid {
padding: 0rem 0 4rem;
}
.solution-group {
display: flex;
flex-direction: column;
@ -175,10 +172,6 @@ const solutions = computed(() => [
flex: 1;
margin-top: 20px;
}
.solution-card {
height: 350px;
}
}
/* 移动端布局(<768px */
@ -213,39 +206,15 @@ const solutions = computed(() => [
/* 卡片公共样式 */
.solution-card {
background: white;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(137, 91, 255, 0.1);
transform: translateY(20px);
opacity: 0;
animation: cardEnter 0.6s ease forwards;
position: relative;
overflow: hidden;
border: 1px solid rgba(137, 91, 255, 0.2);
background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
}
.solution-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(137, 91, 255, 0.03) 0%,
rgba(137, 91, 255, 0) 100%
);
z-index: -1;
}
.solution-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(137, 91, 255, 0.2);
}
.card-header {
margin-bottom: 2rem;
}
@ -284,7 +253,7 @@ const solutions = computed(() => [
.point-text {
color: #4a3a6b;
line-height: 1.6;
font-size: 1rem;
font-size: 18px;
}
@keyframes cardEnter {

View File

@ -4,9 +4,9 @@
<!-- 渐变背景标题区 -->
<section class="hero-section">
<div class="container">
<div style="font-size: 40px" class="hero-title">
<h1 style="font-size: 40px" class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</div>
</h1>
<div style="font-size: 18px" class="hero-description">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div>
@ -15,9 +15,9 @@
<!-- 业务核心解决方案 -->
<main style="margin-top: 40px" class="container">
<section>
<div style="font-size: 40px" class="hero-title">
<h1 style="font-size: 40px" class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</div>
</h1>
</section>
<!-- 解决方案网格 - 响应式弹性布局 -->
@ -43,7 +43,9 @@
class="content-point"
>
<div class="point-icon"></div>
<div class="point-text">{{ point }}</div>
<div style="font-size: 18px" class="point-text">
{{ point }}
</div>
</li>
</ul>
</div>

View File

@ -4,9 +4,9 @@
<!-- 渐变背景标题区 -->
<section class="hero-section">
<div class="container">
<div style="font-size: 40px" class="hero-title">
<h1 style="font-size: 40px" class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</div>
</h1>
<div style="font-size: 18px" class="hero-description">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div>
@ -15,9 +15,9 @@
<!-- 业务核心解决方案 -->
<main style="margin-top: 40px" class="container">
<section>
<div style="font-size: 40px" class="hero-title">
<h1 style="font-size: 40px" class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</div>
</h1>
</section>
<!-- 解决方案网格 - 响应式弹性布局 -->
@ -43,7 +43,9 @@
class="content-point"
>
<div class="point-icon"></div>
<div class="point-text">{{ point }}</div>
<div style="font-size: 18px" class="point-text">
{{ point }}
</div>
</li>
</ul>
</div>

View File

@ -6,9 +6,9 @@
class="company-overview"
style="max-width: 1200px; margin: 60px auto"
>
<h2 class="section-title">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
</h2>
</h1>
<div class="content-block">
<div style="font-size: 18px">
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
@ -20,12 +20,11 @@
<!-- 使命愿景卡片 -->
<section class="mission-section">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h1>
<div class="mission-cards">
<n-card hoverable class="mission-card" v-motion-pop>
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3>
<br />
<n-p style="font-size: 18px" class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
}}</n-p>
@ -41,9 +40,9 @@
<!-- 里程碑时间轴 -->
<!-- 里程碑时间轴 -->
<section class="section timeline-section">
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
}}</n-h2>
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
</h1>
<div class="timeline">
<!-- 1977-2015 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
@ -161,16 +160,17 @@
</div>
</section>
<!-- 成就部分 -->
<section class="achievement-section" v-motion-fade>
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
}}</n-h2>
<br />
<n-p style="font-size: 18px" class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>
<section class="mission-section">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
</h1>
<div class="mission-cards">
<n-card hoverable class="mission-card" v-motion-pop>
<n-p style="font-size: 18px" class="card-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>
</n-card>
</div>
</section>
</div>
</div>
@ -199,7 +199,7 @@ const stats = ref([
.company-overview {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
/* padding: 0 20px; */
}
/* 顶部大图区域 */
@ -231,7 +231,7 @@ const stats = ref([
}
.section-title {
font-size: 2.2rem;
font-size: 2.5rem;
margin-bottom: 30px;
position: relative;
display: inline-block;

View File

@ -6,9 +6,9 @@
class="company-overview"
style="max-width: 1200px; margin: 60px auto"
>
<h2 class="section-title">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
</h2>
</h1>
<div class="content-block">
<div style="font-size: 18px">
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
@ -20,12 +20,11 @@
<!-- 使命愿景卡片 -->
<section class="mission-section">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h1>
<div class="mission-cards">
<n-card hoverable class="mission-card" v-motion-pop>
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3>
<br />
<n-p style="font-size: 18px" class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
}}</n-p>
@ -41,9 +40,9 @@
<!-- 里程碑时间轴 -->
<!-- 里程碑时间轴 -->
<section class="section timeline-section">
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
}}</n-h2>
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
</h1>
<div class="timeline">
<!-- 1977-2015 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
@ -162,15 +161,18 @@
</section>
<!-- 成就部分 -->
<section class="achievement-section" v-motion-fade>
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
}}</n-h2>
<br />
<n-p style="font-size: 18px" class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>
<section class="mission-section">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
</h1>
<div class="mission-cards">
<n-card hoverable class="mission-card" v-motion-pop>
<n-p style="font-size: 18px" class="card-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>
</n-card>
</div>
</section>
</div>
</div>
@ -199,7 +201,7 @@ const stats = ref([
.company-overview {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
/* padding: 0 20px; */
}
/* 顶部大图区域 */
@ -231,7 +233,7 @@ const stats = ref([
}
.section-title {
font-size: 2.2rem;
font-size: 2.5rem;
margin-bottom: 30px;
position: relative;
display: inline-block;

View File

@ -6,9 +6,9 @@
class="company-overview"
style="max-width: 1200px; margin: 60px auto"
>
<h2 class="section-title">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
</h2>
</h1>
<div class="content-block">
<div style="font-size: 18px">
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
@ -162,15 +162,17 @@
</section>
<!-- 成就部分 -->
<section class="achievement-section" v-motion-fade>
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
}}</n-h2>
<br />
<n-p style="font-size: 18px" class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>
<section class="mission-section">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
</h1>
<div class="mission-cards">
<n-card hoverable class="mission-card" v-motion-pop>
<n-p style="font-size: 18px" class="card-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>
</n-card>
</div>
</section>
</div>
</div>
@ -230,7 +232,7 @@ const stats = ref([
}
.section-title {
font-size: 2.2rem;
font-size: 2.5rem;
margin-bottom: 30px;
position: relative;
display: inline-block;

View File

@ -6,9 +6,9 @@
class="company-overview"
style="max-width: 1200px; margin: 60px auto"
>
<h2 class="section-title">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
</h2>
</h1>
<div class="content-block">
<div style="font-size: 18px">
{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
@ -20,12 +20,11 @@
<!-- 使命愿景卡片 -->
<section class="mission-section">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
</h1>
<div class="mission-cards">
<n-card hoverable class="mission-card" v-motion-pop>
<n-h3 class="card-title">{{
$t("COMPANYOVERVIEW.TITLETHREE.TITLE")
}}</n-h3>
<br />
<n-p style="font-size: 18px" class="card-content">{{
$t("COMPANYOVERVIEW.TITLETHREE.CONTENT")
}}</n-p>
@ -41,9 +40,9 @@
<!-- 里程碑时间轴 -->
<!-- 里程碑时间轴 -->
<section class="section timeline-section">
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFOUR.TITLE")
}}</n-h2>
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
</h1>
<div class="timeline">
<!-- 1977-2015 -->
<div class="timeline-item" v-motion-slide-visible-once-bottom>
@ -162,15 +161,17 @@
</section>
<!-- 成就部分 -->
<section class="achievement-section" v-motion-fade>
<n-h2 class="section-title">{{
$t("COMPANYOVERVIEW.TITLEFIVE.TITLE")
}}</n-h2>
<br />
<n-p style="font-size: 18px" class="section-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>
<section class="mission-section">
<h1 class="section-title">
{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
</h1>
<div class="mission-cards">
<n-card hoverable class="mission-card" v-motion-pop>
<n-p style="font-size: 18px" class="card-content">{{
$t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
}}</n-p>
</n-card>
</div>
</section>
</div>
</div>
@ -191,14 +192,14 @@ const stats = ref([
<style scoped>
.home-page {
background-image: url("@/assets/image/bg-mobile.png");
background-image: url("@/assets/image/bg.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.company-overview {
margin: 0 auto;
padding: 0 20px;
/* padding: 0 20px; */
}
/* 顶部大图区域 */
@ -230,7 +231,7 @@ const stats = ref([
}
.section-title {
font-size: 2.2rem;
font-size: 2.5rem;
margin-bottom: 30px;
position: relative;
display: inline-block;

View File

@ -47,7 +47,7 @@
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
background: #fff;
"
>
<h2 class="section-titles">

View File

@ -46,7 +46,7 @@
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
background: #fff;
"
>
<h2 class="section-titles">

View File

@ -48,7 +48,7 @@
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
background: #fff;
"
>
<h2 class="section-titles">

View File

@ -48,7 +48,7 @@
max-width: 1200px;
margin: 60px auto;
padding: 0 40px;
background: #f8fafc;
background: #fff;
"
>
<h2 class="section-titles">