fiee-official-website/src/views/BusinessServices/size375/index.vue
2025-10-20 11:09:18 +08:00

320 lines
7.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>