feat: 代码暂存
This commit is contained in:
parent
cbbd4eed1c
commit
533c24fa8e
BIN
src/assets/image/content/bg_13.png
Normal file
BIN
src/assets/image/content/bg_13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
BIN
src/assets/image/content/bg_14.png
Normal file
BIN
src/assets/image/content/bg_14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/image/content/first.png
Normal file
BIN
src/assets/image/content/first.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/image/content/fourth.png
Normal file
BIN
src/assets/image/content/fourth.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/image/content/second.png
Normal file
BIN
src/assets/image/content/second.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/image/content/third.png
Normal file
BIN
src/assets/image/content/third.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,48 +1,61 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="business-page">
|
||||
<div class="home-page relative 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-[600PX] z-[] top-0 absolute">
|
||||
<div class="relative w-[100%] h-[100%]">
|
||||
<img src="@/assets/image/content/bg_12.png" alt="" class="w-[100vw] h-[570PX] 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">
|
||||
<h1 style="font-size: 40px" class="hero-title">
|
||||
<h2 class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h1>
|
||||
<div style="font-size: 18px" class="hero-description">
|
||||
</h2>
|
||||
<div style="font-size: 16px" class="hero-description">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 业务核心解决方案 -->
|
||||
<main style="margin-top: 40px" class="container">
|
||||
<main style="margin-top: 380px" class="container">
|
||||
<section>
|
||||
<h1 class="hero-title" style="font-size: 22px">
|
||||
<h1 style="font-size: 40px" class="hero-title hero-title1">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<div class="solution-grid">
|
||||
<div class="flex justify-between w-[100%] my-[50PX]">
|
||||
<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>
|
||||
|
||||
<div class="solution-grid grid grid-cols-2 gap-4">
|
||||
<!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
|
||||
<div
|
||||
v-for="(solution, sIndex) in solutions"
|
||||
:key="sIndex"
|
||||
class="featured-solution"
|
||||
>
|
||||
<div
|
||||
class="solution-card"
|
||||
:style="{ '--delay': `${sIndex * 0.2}s` }"
|
||||
>
|
||||
<div v-for="(solution, sIndex) in solutions" :key="sIndex" class="featured-solution mt-[20PX]">
|
||||
<img v-if="sIndex === 0" src="@/assets/image/content/first.png" alt="">
|
||||
<img v-else-if="sIndex === 1" src="@/assets/image/content/second.png" alt="">
|
||||
<img v-else-if="sIndex === 2" src="@/assets/image/content/third.png" alt="">
|
||||
<img v-else src="@/assets/image/content/fourth.png" alt="">
|
||||
<div class="solution-card" :style="{ '--delay': `${sIndex * 0.2}s` }">
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<!-- <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"
|
||||
>
|
||||
<li v-for="(point, pIndex) in solution.points" :key="pIndex" class="content-point">
|
||||
<div class="point-icon">•</div>
|
||||
<div style="font-size: 18px" class="point-text">
|
||||
<div style="font-size: 16px" class="point-text">
|
||||
{{ point }}
|
||||
</div>
|
||||
</li>
|
||||
@ -103,13 +116,25 @@ const solutions = computed(() => [
|
||||
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: 4px;
|
||||
background-color: #ff7bac;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
margin: 0 auto;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: black;
|
||||
color: #455363;
|
||||
}
|
||||
|
||||
:root {
|
||||
@ -129,15 +154,16 @@ const solutions = computed(() => [
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
max-width: 900PX;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
/* padding: 0 2rem; */
|
||||
}
|
||||
|
||||
/* 标题区 - 紫色渐变 */
|
||||
.hero-section {
|
||||
background: var(--primary-gradient);
|
||||
padding: 5rem 0 0rem;
|
||||
/* padding: 5rem 0 0rem; */
|
||||
padding-top: 120PX;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
@ -205,12 +231,12 @@ const solutions = computed(() => [
|
||||
/* 卡片公共样式 */
|
||||
.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;
|
||||
/* padding: 2.5rem; */
|
||||
/* transform: translateY(20px); */
|
||||
/* opacity: 0; */
|
||||
/* animation: cardEnter 0.6s ease forwards; */
|
||||
/* border: 1px solid #fdc8dd; */
|
||||
/* background: #fff8fb; */
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -231,27 +257,46 @@ const solutions = computed(() => [
|
||||
|
||||
.card-title {
|
||||
font-size: 1.3rem;
|
||||
color: #e53073;
|
||||
/* 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;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #fdc8dc;
|
||||
justify-content: flex-start;
|
||||
/* gap: 1rem; */
|
||||
/* padding: 1rem 0; */
|
||||
/* border-bottom: 1px solid #fdc8dc; */
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
color: #e53073;
|
||||
color: #455363;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
margin-right: 5PX;
|
||||
}
|
||||
|
||||
.point-text {
|
||||
color: #e53073;
|
||||
/* color: #e53073; */
|
||||
line-height: 1.6;
|
||||
font-size: 18px;
|
||||
color: #455363;
|
||||
}
|
||||
|
||||
@keyframes cardEnter {
|
||||
|
||||
@ -1,26 +1,16 @@
|
||||
<template>
|
||||
<div class="home-page relative bg-[#ffffff]">
|
||||
<div
|
||||
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
|
||||
style="width: 920px; pointer-events: none; mix-blend-mode: multiply"
|
||||
>
|
||||
<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="w-[100%] h-[600PX] 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"
|
||||
/>
|
||||
<img src="@/assets/image/content/bg_12.png" alt="" class="w-[100vw] h-[570PX] 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">
|
||||
<div class="business-page relative z-99">
|
||||
<!-- 渐变背景标题区 - 增加层次感 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
@ -33,36 +23,39 @@
|
||||
</div>
|
||||
</section>
|
||||
<!-- 业务核心解决方案 -->
|
||||
<main style="margin-top: 40px" class="container">
|
||||
<main style="margin-top: 380px" class="container">
|
||||
<section>
|
||||
<h1 style="font-size: 30px" class="hero-title">
|
||||
<h1 style="font-size: 40px" class="hero-title hero-title1">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<div class="solution-grid">
|
||||
<div class="flex justify-between w-[100%] my-[50PX]">
|
||||
<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>
|
||||
|
||||
<div class="solution-grid grid grid-cols-2 gap-4">
|
||||
<!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
|
||||
<div
|
||||
v-for="(solution, sIndex) in solutions"
|
||||
:key="sIndex"
|
||||
class="featured-solution"
|
||||
>
|
||||
<div
|
||||
class="solution-card"
|
||||
:style="{ '--delay': `${sIndex * 0.2}s` }"
|
||||
>
|
||||
<div v-for="(solution, sIndex) in solutions" :key="sIndex" class="featured-solution mt-[20PX]">
|
||||
<img v-if="sIndex === 0" src="@/assets/image/content/first.png" alt="">
|
||||
<img v-else-if="sIndex === 1" src="@/assets/image/content/second.png" alt="">
|
||||
<img v-else-if="sIndex === 2" src="@/assets/image/content/third.png" alt="">
|
||||
<img v-else src="@/assets/image/content/fourth.png" alt="">
|
||||
<div class="solution-card" :style="{ '--delay': `${sIndex * 0.2}s` }">
|
||||
<div class="card-header">
|
||||
<div class="decorative-line"></div>
|
||||
<!-- <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"
|
||||
>
|
||||
<li v-for="(point, pIndex) in solution.points" :key="pIndex" class="content-point">
|
||||
<div class="point-icon">•</div>
|
||||
<div style="font-size: 18px" class="point-text">
|
||||
<div style="font-size: 16px" class="point-text">
|
||||
{{ point }}
|
||||
</div>
|
||||
</li>
|
||||
@ -123,6 +116,18 @@ const solutions = computed(() => [
|
||||
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: 4px;
|
||||
background-color: #ff7bac;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
@ -149,15 +154,16 @@ const solutions = computed(() => [
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
max-width: 900PX;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
/* padding: 0 2rem; */
|
||||
}
|
||||
|
||||
/* 标题区 - 紫色渐变 */
|
||||
.hero-section {
|
||||
background: var(--primary-gradient);
|
||||
padding: 5rem 0 0rem;
|
||||
/* padding: 5rem 0 0rem; */
|
||||
padding-top: 120PX;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
@ -225,12 +231,12 @@ const solutions = computed(() => [
|
||||
/* 卡片公共样式 */
|
||||
.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;
|
||||
/* padding: 2.5rem; */
|
||||
/* transform: translateY(20px); */
|
||||
/* opacity: 0; */
|
||||
/* animation: cardEnter 0.6s ease forwards; */
|
||||
/* border: 1px solid #fdc8dd; */
|
||||
/* background: #fff8fb; */
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -251,27 +257,46 @@ const solutions = computed(() => [
|
||||
|
||||
.card-title {
|
||||
font-size: 1.3rem;
|
||||
color: #e53073;
|
||||
/* 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;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #fdc8dc;
|
||||
justify-content: flex-start;
|
||||
/* gap: 1rem; */
|
||||
/* padding: 1rem 0; */
|
||||
/* border-bottom: 1px solid #fdc8dc; */
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
color: #e53073;
|
||||
color: #455363;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
margin-right: 5PX;
|
||||
}
|
||||
|
||||
.point-text {
|
||||
color: #e53073;
|
||||
/* color: #e53073; */
|
||||
line-height: 1.6;
|
||||
font-size: 18px;
|
||||
color: #455363;
|
||||
}
|
||||
|
||||
@keyframes cardEnter {
|
||||
|
||||
@ -1,49 +1,72 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="business-page">
|
||||
<!-- 渐变背景标题区 -->
|
||||
<div class="home-page relative bg-[#ffffff]">
|
||||
<div class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
|
||||
style="width: 635px; pointer-events: none; mix-blend-mode: multiply">
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="w-[100%] h-[600PX] z-[] top-0 absolute">
|
||||
<div class="relative w-[100%] h-[100%]">
|
||||
<img src="@/assets/image/content/bg_14.png" alt="" class="w-[100vw] h-[570PX] 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">
|
||||
<h1 style="font-size: 40px" class="hero-title">
|
||||
<h2 class="hero-title">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
|
||||
</h1>
|
||||
<div style="font-size: 18px" class="hero-description">
|
||||
</h2>
|
||||
<div style="font-size: 16px" class="hero-description">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 业务核心解决方案 -->
|
||||
<main style="margin-top: 40px" class="container">
|
||||
<main style="margin-top: 380px" class="container">
|
||||
<section>
|
||||
<h1 style="font-size: 40px" class="hero-title">
|
||||
<h1 style="font-size: 40px" class="hero-title hero-title1">
|
||||
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<!-- 解决方案网格 - 响应式弹性布局 -->
|
||||
<div class="solution-grid">
|
||||
<section>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="solution-grid grid grid-cols-1 gap-4">
|
||||
<!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
|
||||
<div
|
||||
v-for="(solution, sIndex) in solutions"
|
||||
:key="sIndex"
|
||||
class="featured-solution"
|
||||
>
|
||||
<div
|
||||
class="solution-card"
|
||||
:style="{ '--delay': `${sIndex * 0.2}s` }"
|
||||
>
|
||||
<div v-for="(solution, sIndex) in solutions" :key="sIndex" class="featured-solution mt-[20PX]">
|
||||
<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>
|
||||
<!-- <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"
|
||||
>
|
||||
<li v-for="(point, pIndex) in solution.points" :key="pIndex" class="content-point">
|
||||
<div class="point-icon">•</div>
|
||||
<div style="font-size: 18px" class="point-text">
|
||||
<div style="font-size: 16px" class="point-text">
|
||||
{{ point }}
|
||||
</div>
|
||||
</li>
|
||||
@ -97,33 +120,32 @@ const solutions = computed(() => [
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* 标题区 - 紫色渐变 */
|
||||
.hero-section {
|
||||
background: var(--primary-gradient);
|
||||
padding: 5rem 0 0rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
}
|
||||
/* 基础样式 */
|
||||
|
||||
.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: black;
|
||||
color: #455363;
|
||||
}
|
||||
|
||||
:root {
|
||||
@ -136,63 +158,96 @@ const solutions = computed(() => [
|
||||
var(--primary-color) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.home-page {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* 解决方案网格 - 响应式布局 */
|
||||
.solution-grid {
|
||||
padding: 0rem 0 4rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr; /* 默认单列（移动端） */
|
||||
gap: 3rem;
|
||||
.container {
|
||||
max-width: 618PX;
|
||||
margin: 0 auto;
|
||||
/* padding: 0 2rem; */
|
||||
}
|
||||
|
||||
/* 中等屏幕（768px-1439px） - 单列布局 */
|
||||
@media (min-width: 768px) and (max-width: 1439px) {
|
||||
.solution-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕（≥1440px） - 双列布局 */
|
||||
@media (min-width: 1440px) {
|
||||
.solution-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.solution-card {
|
||||
background: #fff8fb;
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 10px 40px rgba(255, 123, 172, 0.1);
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
animation: cardEnter 0.6s ease forwards;
|
||||
/* 标题区 - 紫色渐变 */
|
||||
.hero-section {
|
||||
background: var(--primary-gradient);
|
||||
/* padding: 5rem 0 0rem; */
|
||||
padding-top: 120PX;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #fdc8dd;
|
||||
transition: all 0.3s ease;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.solution-card::before {
|
||||
content: "";
|
||||
.title-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: -15px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
height: 4px;
|
||||
background: var(--primary-gradient);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.solution-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 15px 50px rgba(255, 123, 172, 0.2);
|
||||
.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: 1rem 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 {
|
||||
@ -205,7 +260,6 @@ const solutions = computed(() => [
|
||||
background: var(--primary-gradient);
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.solution-card:hover .decorative-line {
|
||||
@ -214,31 +268,46 @@ const solutions = computed(() => [
|
||||
|
||||
.card-title {
|
||||
font-size: 1.3rem;
|
||||
color: #e53073;
|
||||
/* 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;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #fdc8dc;
|
||||
}
|
||||
|
||||
.content-point:last-child {
|
||||
border-bottom: none;
|
||||
justify-content: flex-start;
|
||||
/* gap: 1rem; */
|
||||
/* padding: 1rem 0; */
|
||||
/* border-bottom: 1px solid #fdc8dc; */
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
color: #e53073;
|
||||
color: #455363;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
margin-right: 5PX;
|
||||
}
|
||||
|
||||
.point-text {
|
||||
color: #e53073;
|
||||
/* color: #e53073; */
|
||||
line-height: 1.6;
|
||||
font-size: 1rem;
|
||||
font-size: 18px;
|
||||
color: #455363;
|
||||
}
|
||||
|
||||
@keyframes cardEnter {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
>
|
||||
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
|
||||
</div>
|
||||
<div class="w-[100%] h-[916px] z-[] top-0 absolute">
|
||||
<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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user