320 lines
7.8 KiB
Vue
320 lines
7.8 KiB
Vue
<template>
|
||
<div class="home-page relative bg-[#ffffff]">
|
||
<div class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
|
||
style="width: 332px; pointer-events: none; mix-blend-mode: multiply">
|
||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||
</div>
|
||
<div class="w-[100%] h-[711PX] z-[] top-0 absolute">
|
||
<div class="relative w-[100%] h-[100%]">
|
||
<img src="@/assets/image/content/bg_20.png" alt="" class="w-[100vw] h-[711PX] absolute" />
|
||
<img src="@/assets/image/content/bg_13.png" alt=""
|
||
class="w-[100vw] h-[80PX] absolute bottom-0 lef-0 right-0 z-99" />
|
||
</div>
|
||
</div>
|
||
<div class="business-page relative z-99">
|
||
<!-- 渐变背景标题区 - 增加层次感 -->
|
||
<section class="hero-section">
|
||
<div class="container">
|
||
<h2 class="hero-title">
|
||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||
</h2>
|
||
<div style="font-size: 16px" class="hero-description">
|
||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 业务核心解决方案 -->
|
||
<main style="margin-top: 250px" class="container">
|
||
<section>
|
||
<h1 style="font-size: 20px" class="hero-title hero-title1">
|
||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||
</h1>
|
||
</section>
|
||
|
||
<section>
|
||
|
||
</section>
|
||
|
||
<div class="solution-grid grid grid-cols-1 gap-4">
|
||
<!-- 统一使用弹性列布局,通过媒体查询控制排列方式 -->
|
||
<div v-for="(solution, sIndex) in solutions" :key="sIndex" class="featured-solution">
|
||
<template v-if="sIndex === 0">
|
||
<img src="@/assets/image/content/profile_1.png" alt="" class="w-[201PX] h-[201PX]" />
|
||
<br />
|
||
<img src="@/assets/image/content/first.png" alt="">
|
||
</template>
|
||
<template v-else-if="sIndex === 1">
|
||
<img src="@/assets/image/content/profile_2.png" alt="" class="w-[201PX] h-[201PX]" />
|
||
<br />
|
||
<img src="@/assets/image/content/second.png" alt="">
|
||
</template>
|
||
<template v-else-if="sIndex === 2">
|
||
<img src="@/assets/image/content/profile_3.png" alt="" class="w-[201PX] h-[201PX]" />
|
||
<br />
|
||
<img src="@/assets/image/content/third.png" alt="">
|
||
</template>
|
||
<template v-else>
|
||
<img src="@/assets/image/content/profile_4.png" alt="" class="w-[201PX] h-[201PX]" />
|
||
<br />
|
||
<img src="@/assets/image/content/fourth.png" alt="">
|
||
</template>
|
||
<div class="solution-card" :style="{ '--delay': `${sIndex * 0.2}s` }">
|
||
<div class="card-header">
|
||
<!-- <div class="decorative-line"></div> -->
|
||
<h2 class="card-title">{{ solution.title }}</h2>
|
||
</div>
|
||
<ul class="card-content">
|
||
<li v-for="(point, pIndex) in solution.points" :key="pIndex" class="content-point">
|
||
<div class="point-icon">•</div>
|
||
<div style="font-size: 16px" class="point-text">
|
||
{{ point }}
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useI18n } from "vue-i18n";
|
||
import { computed } from "vue";
|
||
|
||
const { t } = useI18n();
|
||
|
||
const solutions = computed(() => [
|
||
{
|
||
title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.TITLE"),
|
||
points: [
|
||
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENT"),
|
||
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.ONE.CONTENTTWO"),
|
||
],
|
||
},
|
||
{
|
||
title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.TITLE"),
|
||
points: [
|
||
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENT"),
|
||
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.TWO.CONTENTTWO"),
|
||
],
|
||
},
|
||
{
|
||
title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.TITLE"),
|
||
points: [
|
||
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENT"),
|
||
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTWO"),
|
||
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.THREE.CONTENTTHREE"),
|
||
],
|
||
},
|
||
{
|
||
title: t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.TITLE"),
|
||
points: [
|
||
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENT"),
|
||
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTWO"),
|
||
t("BusinessiIntroduction.CONTAIN.TITLEONE.paragraph.FOUR.CONTENTTHREE"),
|
||
],
|
||
},
|
||
]);
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 基础样式 */
|
||
|
||
.hero-title {
|
||
font-size: 40px;
|
||
color: black;
|
||
margin-bottom: 2rem;
|
||
animation: slideIn 1s ease;
|
||
position: relative;
|
||
}
|
||
.hero-title1::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -10PX;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 60PX;
|
||
height: 6PX;
|
||
background-color: #ff7bac;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.hero-description {
|
||
margin: 0 auto;
|
||
font-size: 1.1rem;
|
||
line-height: 1.8;
|
||
color: #455363;
|
||
}
|
||
|
||
:root {
|
||
--primary-color: #895bff;
|
||
--primary-light: #a07cff;
|
||
--primary-dark: #6a11cb;
|
||
--primary-gradient: linear-gradient(
|
||
135deg,
|
||
var(--primary-light) 0%,
|
||
var(--primary-color) 100%
|
||
);
|
||
}
|
||
.home-page {
|
||
background-size: 100% 100%;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.container {
|
||
max-width: 311PX;
|
||
margin: 0 auto;
|
||
/* padding: 0 2rem; */
|
||
}
|
||
|
||
/* 标题区 - 紫色渐变 */
|
||
.hero-section {
|
||
background: var(--primary-gradient);
|
||
/* padding: 5rem 0 0rem; */
|
||
padding-top: 180PX;
|
||
position: relative;
|
||
overflow: hidden;
|
||
color: white;
|
||
}
|
||
|
||
.title-decoration {
|
||
position: absolute;
|
||
bottom: -15px;
|
||
left: 0;
|
||
width: 80%;
|
||
height: 4px;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.solution-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3rem;
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
/* 桌面端布局(>=768px) */
|
||
@media (min-width: 768px) {
|
||
.solution-group {
|
||
flex-direction: row;
|
||
gap: 4rem;
|
||
}
|
||
|
||
.featured-solution {
|
||
flex: 1;
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
|
||
/* 移动端布局(<768px) */
|
||
@media (max-width: 767px) {
|
||
.home-page {
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.solution-group {
|
||
flex-direction: column;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.featured-solution {
|
||
width: 100% !important; /* 强制占满容器 */
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.solution-card {
|
||
/* padding: 2rem; */
|
||
height: auto;
|
||
}
|
||
|
||
.content-point {
|
||
padding: 5px 0;
|
||
}
|
||
}
|
||
|
||
/* 卡片公共样式 */
|
||
.solution-card {
|
||
border-radius: 16px;
|
||
/* padding: 2.5rem; */
|
||
/* transform: translateY(20px); */
|
||
/* opacity: 0; */
|
||
/* animation: cardEnter 0.6s ease forwards; */
|
||
/* border: 1px solid #fdc8dd; */
|
||
/* background: #fff8fb; */
|
||
}
|
||
|
||
.card-header {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.decorative-line {
|
||
width: 50px;
|
||
height: 3px;
|
||
background: var(--primary-gradient);
|
||
margin-bottom: 1rem;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.solution-card:hover .decorative-line {
|
||
width: 80px;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.3rem;
|
||
/* color: #e53073; */
|
||
font-weight: 600;
|
||
position: relative;
|
||
/* transform: translateX(15px); */
|
||
}
|
||
|
||
.card-title::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 10PX;
|
||
bottom: 0;
|
||
left: -10PX;
|
||
width: 1PX;
|
||
height: 15PX;
|
||
background-color: #ff7bac;
|
||
border-radius: 2px;
|
||
|
||
}
|
||
|
||
|
||
.content-point {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
/* gap: 1rem; */
|
||
/* padding: 1rem 0; */
|
||
/* border-bottom: 1px solid #fdc8dc; */
|
||
}
|
||
|
||
.point-icon {
|
||
color: #455363;
|
||
font-size: 1.2rem;
|
||
flex-shrink: 0;
|
||
margin-right: 5PX;
|
||
}
|
||
|
||
.point-text {
|
||
/* color: #e53073; */
|
||
line-height: 1.6;
|
||
font-size: 18px;
|
||
color: #455363;
|
||
}
|
||
|
||
@keyframes cardEnter {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
</style>
|