scout666/fiee-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 代码暂存

Browse Source
This commit is contained in:
yinkang 2025-10-14 11:01:20 +08:00
parent cbbd4eed1c
commit 533c24fa8e
10 changed files with 323 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/content/bg_13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
src/assets/image/content/bg_14.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/image/content/first.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/image/content/fourth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/image/content/second.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/image/content/third.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

125
src/views/BusinessServices/size1440/index.vue
View File

@ -1,48 +1,61 @@
<template> <template>
<div class="home-page"> <div class="home-page relative bg-[#ffffff]">
<div class="business-page"> <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"> <section class="hero-section">
<div class="container"> <div class="container">
<h1 style="font-size: 40px" class="hero-title"> <h2 class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</h1> </h2>
<div style="font-size: 18px" class="hero-description"> <div style="font-size: 16px" class="hero-description">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div> </div>
</div> </div>
</section> </section>
<!-- 业务核心解决方案 --> <!-- 业务核心解决方案 -->
<main style="margin-top: 40px" class="container"> <main style="margin-top: 380px" class="container">
<section> <section>
<h1 class="hero-title" style="font-size: 22px"> <h1 style="font-size: 40px" class="hero-title hero-title1">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</h1> </h1>
</section> </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 <div v-for="(solution, sIndex) in solutions" :key="sIndex" class="featured-solution mt-[20PX]">
v-for="(solution, sIndex) in solutions" <img v-if="sIndex === 0" src="@/assets/image/content/first.png" alt="">
:key="sIndex" <img v-else-if="sIndex === 1" src="@/assets/image/content/second.png" alt="">
class="featured-solution" <img v-else-if="sIndex === 2" src="@/assets/image/content/third.png" alt="">
> <img v-else src="@/assets/image/content/fourth.png" alt="">
<div <div class="solution-card" :style="{ '--delay': `${sIndex * 0.2}s` }">
class="solution-card"
:style="{ '--delay': `${sIndex * 0.2}s` }"
>
<div class="card-header"> <div class="card-header">
<div class="decorative-line"></div> <!-- <div class="decorative-line"></div> -->
<h2 class="card-title">{{ solution.title }}</h2> <h2 class="card-title">{{ solution.title }}</h2>
</div> </div>
<ul class="card-content"> <ul class="card-content">
<li <li v-for="(point, pIndex) in solution.points" :key="pIndex" class="content-point">
v-for="(point, pIndex) in solution.points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">•</div> <div class="point-icon">•</div>
<div style="font-size: 18px" class="point-text"> <div style="font-size: 16px" class="point-text">
{{ point }} {{ point }}
</div> </div>
</li> </li>
@ -103,13 +116,25 @@ const solutions = computed(() => [
color: black; color: black;
margin-bottom: 2rem; margin-bottom: 2rem;
animation: slideIn 1s ease; 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 { .hero-description {
margin: 0 auto; margin: 0 auto;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
color: black; color: #455363;
} }
:root { :root {
@ -129,15 +154,16 @@ const solutions = computed(() => [
} }
.container { .container {
max-width: 1280px; max-width: 900PX;
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; /* padding: 0 2rem; */
} }
/* 标题区 - 紫色渐变 */ /* 标题区 - 紫色渐变 */
.hero-section { .hero-section {
background: var(--primary-gradient); background: var(--primary-gradient);
padding: 5rem 0 0rem; /* padding: 5rem 0 0rem; */
padding-top: 120PX;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
color: white; color: white;
@ -205,12 +231,12 @@ const solutions = computed(() => [
/* 卡片公共样式 */ /* 卡片公共样式 */
.solution-card { .solution-card {
border-radius: 16px; border-radius: 16px;
padding: 2.5rem; /* padding: 2.5rem; */
transform: translateY(20px); /* transform: translateY(20px); */
opacity: 0; /* opacity: 0; */
animation: cardEnter 0.6s ease forwards; /* animation: cardEnter 0.6s ease forwards; */
border: 1px solid #fdc8dd; /* border: 1px solid #fdc8dd; */
background: #fff8fb; /* background: #fff8fb; */
} }
.card-header { .card-header {
@ -231,27 +257,46 @@ const solutions = computed(() => [
.card-title { .card-title {
font-size: 1.3rem; font-size: 1.3rem;
color: #e53073; /* color: #e53073; */
font-weight: 600; 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 { .content-point {
display: flex; display: flex;
gap: 1rem; justify-content: flex-start;
padding: 1rem 0; /* gap: 1rem; */
border-bottom: 1px solid #fdc8dc; /* padding: 1rem 0; */
/* border-bottom: 1px solid #fdc8dc; */
} }
.point-icon { .point-icon {
color: #e53073; color: #455363;
font-size: 1.2rem; font-size: 1.2rem;
flex-shrink: 0; flex-shrink: 0;
margin-right: 5PX;
} }
.point-text { .point-text {
color: #e53073; /* color: #e53073; */
line-height: 1.6; line-height: 1.6;
font-size: 18px; font-size: 18px;
color: #455363;
} }
@keyframes cardEnter { @keyframes cardEnter {

125
src/views/BusinessServices/size1920/index.vue
View File

@ -1,26 +1,16 @@
<template> <template>
<div class="home-page relative bg-[#ffffff]"> <div class="home-page relative bg-[#ffffff]">
<div <div class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1" style="width: 920px; pointer-events: none; mix-blend-mode: multiply">
style="width: 920px; pointer-events: none; mix-blend-mode: multiply"
>
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" /> <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
</div> </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%]"> <div class="relative w-[100%] h-[100%]">
<img <img src="@/assets/image/content/bg_12.png" alt="" class="w-[100vw] h-[570PX] absolute" />
src="@/assets/image/content/bg_1.png" <img src="@/assets/image/content/bg_13.png" alt="" class="w-[100vw] h-[80PX] absolute bottom-0 lef-0 right-0 z-99" />
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"
/>
</div> </div>
</div> </div>
<div class="business-page"> <div class="business-page relative z-99">
<!-- 渐变背景标题区 - 增加层次感 --> <!-- 渐变背景标题区 - 增加层次感 -->
<section class="hero-section"> <section class="hero-section">
<div class="container"> <div class="container">
@ -33,36 +23,39 @@
</div> </div>
</section> </section>
<!-- 业务核心解决方案 --> <!-- 业务核心解决方案 -->
<main style="margin-top: 40px" class="container"> <main style="margin-top: 380px" class="container">
<section> <section>
<h1 style="font-size: 30px" class="hero-title"> <h1 style="font-size: 40px" class="hero-title hero-title1">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</h1> </h1>
</section> </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 <div v-for="(solution, sIndex) in solutions" :key="sIndex" class="featured-solution mt-[20PX]">
v-for="(solution, sIndex) in solutions" <img v-if="sIndex === 0" src="@/assets/image/content/first.png" alt="">
:key="sIndex" <img v-else-if="sIndex === 1" src="@/assets/image/content/second.png" alt="">
class="featured-solution" <img v-else-if="sIndex === 2" src="@/assets/image/content/third.png" alt="">
> <img v-else src="@/assets/image/content/fourth.png" alt="">
<div <div class="solution-card" :style="{ '--delay': `${sIndex * 0.2}s` }">
class="solution-card"
:style="{ '--delay': `${sIndex * 0.2}s` }"
>
<div class="card-header"> <div class="card-header">
<div class="decorative-line"></div> <!-- <div class="decorative-line"></div> -->
<h2 class="card-title">{{ solution.title }}</h2> <h2 class="card-title">{{ solution.title }}</h2>
</div> </div>
<ul class="card-content"> <ul class="card-content">
<li <li v-for="(point, pIndex) in solution.points" :key="pIndex" class="content-point">
v-for="(point, pIndex) in solution.points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">•</div> <div class="point-icon">•</div>
<div style="font-size: 18px" class="point-text"> <div style="font-size: 16px" class="point-text">
{{ point }} {{ point }}
</div> </div>
</li> </li>
@ -123,6 +116,18 @@ const solutions = computed(() => [
color: black; color: black;
margin-bottom: 2rem; margin-bottom: 2rem;
animation: slideIn 1s ease; 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 { .hero-description {
@ -149,15 +154,16 @@ const solutions = computed(() => [
} }
.container { .container {
max-width: 1280px; max-width: 900PX;
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; /* padding: 0 2rem; */
} }
/* 标题区 - 紫色渐变 */ /* 标题区 - 紫色渐变 */
.hero-section { .hero-section {
background: var(--primary-gradient); background: var(--primary-gradient);
padding: 5rem 0 0rem; /* padding: 5rem 0 0rem; */
padding-top: 120PX;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
color: white; color: white;
@ -225,12 +231,12 @@ const solutions = computed(() => [
/* 卡片公共样式 */ /* 卡片公共样式 */
.solution-card { .solution-card {
border-radius: 16px; border-radius: 16px;
padding: 2.5rem; /* padding: 2.5rem; */
transform: translateY(20px); /* transform: translateY(20px); */
opacity: 0; /* opacity: 0; */
animation: cardEnter 0.6s ease forwards; /* animation: cardEnter 0.6s ease forwards; */
border: 1px solid #fdc8dd; /* border: 1px solid #fdc8dd; */
background: #fff8fb; /* background: #fff8fb; */
} }
.card-header { .card-header {
@ -251,27 +257,46 @@ const solutions = computed(() => [
.card-title { .card-title {
font-size: 1.3rem; font-size: 1.3rem;
color: #e53073; /* color: #e53073; */
font-weight: 600; 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 { .content-point {
display: flex; display: flex;
gap: 1rem; justify-content: flex-start;
padding: 1rem 0; /* gap: 1rem; */
border-bottom: 1px solid #fdc8dc; /* padding: 1rem 0; */
/* border-bottom: 1px solid #fdc8dc; */
} }
.point-icon { .point-icon {
color: #e53073; color: #455363;
font-size: 1.2rem; font-size: 1.2rem;
flex-shrink: 0; flex-shrink: 0;
margin-right: 5PX;
} }
.point-text { .point-text {
color: #e53073; /* color: #e53073; */
line-height: 1.6; line-height: 1.6;
font-size: 18px; font-size: 18px;
color: #455363;
} }
@keyframes cardEnter { @keyframes cardEnter {

255
src/views/BusinessServices/size768/index.vue
View File

@ -1,49 +1,72 @@
<template> <template>
<div class="home-page"> <div class="home-page relative bg-[#ffffff]">
<div class="business-page"> <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"> <section class="hero-section">
<div class="container"> <div class="container">
<h1 style="font-size: 40px" class="hero-title"> <h2 class="hero-title">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
</h1> </h2>
<div style="font-size: 18px" class="hero-description"> <div style="font-size: 16px" class="hero-description">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
</div> </div>
</div> </div>
</section> </section>
<!-- 业务核心解决方案 --> <!-- 业务核心解决方案 -->
<main style="margin-top: 40px" class="container"> <main style="margin-top: 380px" class="container">
<section> <section>
<h1 style="font-size: 40px" class="hero-title"> <h1 style="font-size: 40px" class="hero-title hero-title1">
{{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }} {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENTTWO") }}
</h1> </h1>
</section> </section>
<!-- 解决方案网格 - 响应式弹性布局 --> <section>
<div class="solution-grid">
</section>
<div class="solution-grid grid grid-cols-1 gap-4">
<!-- 统一使用弹性列布局，通过媒体查询控制排列方式 --> <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
<div <div v-for="(solution, sIndex) in solutions" :key="sIndex" class="featured-solution mt-[20PX]">
v-for="(solution, sIndex) in solutions" <template v-if="sIndex === 0">
:key="sIndex" <img src="@/assets/image/content/profile_1.png" alt="" class="w-[201PX] h-[201PX]" />
class="featured-solution" <br />
> <img src="@/assets/image/content/first.png" alt="">
<div </template>
class="solution-card" <template v-else-if="sIndex === 1">
:style="{ '--delay': `${sIndex * 0.2}s` }" <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="card-header">
<div class="decorative-line"></div> <!-- <div class="decorative-line"></div> -->
<h2 class="card-title">{{ solution.title }}</h2> <h2 class="card-title">{{ solution.title }}</h2>
</div> </div>
<ul class="card-content"> <ul class="card-content">
<li <li v-for="(point, pIndex) in solution.points" :key="pIndex" class="content-point">
v-for="(point, pIndex) in solution.points"
:key="pIndex"
class="content-point"
>
<div class="point-icon">•</div> <div class="point-icon">•</div>
<div style="font-size: 18px" class="point-text"> <div style="font-size: 16px" class="point-text">
{{ point }} {{ point }}
</div> </div>
</li> </li>
@ -97,33 +120,32 @@ const solutions = computed(() => [
</script> </script>
<style scoped> <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 { .hero-title {
font-size: 40px; font-size: 40px;
color: black; color: black;
margin-bottom: 2rem; margin-bottom: 2rem;
animation: slideIn 1s ease; 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 { .hero-description {
margin: 0 auto; margin: 0 auto;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
color: black; color: #455363;
} }
:root { :root {
@ -136,63 +158,96 @@ const solutions = computed(() => [
var(--primary-color) 100% var(--primary-color) 100%
); );
} }
.home-page { .home-page {
background-size: 100% 100%; background-size: 100% 100%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* 解决方案网格 - 响应式布局 */ .container {
.solution-grid { max-width: 618PX;
padding: 0rem 0 4rem; margin: 0 auto;
display: grid; /* padding: 0 2rem; */
grid-template-columns: 1fr; /* 默认单列（移动端） */
gap: 3rem;
} }
/* 中等屏幕（768px-1439px） - 单列布局 */ /* 标题区 - 紫色渐变 */
@media (min-width: 768px) and (max-width: 1439px) { .hero-section {
.solution-grid { background: var(--primary-gradient);
grid-template-columns: 1fr; /* padding: 5rem 0 0rem; */
} padding-top: 120PX;
}
/* 大屏幕（≥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;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: 1px solid #fdc8dd; color: white;
transition: all 0.3s ease;
} }
.solution-card::before { .title-decoration {
content: "";
position: absolute; position: absolute;
top: 0; bottom: -15px;
left: 0; left: 0;
width: 100%; width: 80%;
height: 4px; height: 4px;
background: var(--primary-gradient); background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
} }
.solution-card:hover { .solution-group {
transform: translateY(-8px); display: flex;
box-shadow: 0 15px 50px rgba(255, 123, 172, 0.2); 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 { .card-header {
@ -205,7 +260,6 @@ const solutions = computed(() => [
background: var(--primary-gradient); background: var(--primary-gradient);
margin-bottom: 1rem; margin-bottom: 1rem;
border-radius: 3px; border-radius: 3px;
transition: width 0.3s ease;
} }
.solution-card:hover .decorative-line { .solution-card:hover .decorative-line {
@ -214,31 +268,46 @@ const solutions = computed(() => [
.card-title { .card-title {
font-size: 1.3rem; font-size: 1.3rem;
color: #e53073; /* color: #e53073; */
font-weight: 600; 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 { .content-point {
display: flex; display: flex;
gap: 1rem; justify-content: flex-start;
padding: 1rem 0; /* gap: 1rem; */
border-bottom: 1px solid #fdc8dc; /* padding: 1rem 0; */
} /* border-bottom: 1px solid #fdc8dc; */
.content-point:last-child {
border-bottom: none;
} }
.point-icon { .point-icon {
color: #e53073; color: #455363;
font-size: 1.2rem; font-size: 1.2rem;
flex-shrink: 0; flex-shrink: 0;
margin-right: 5PX;
} }
.point-text { .point-text {
color: #e53073; /* color: #e53073; */
line-height: 1.6; line-height: 1.6;
font-size: 1rem; font-size: 18px;
color: #455363;
} }
@keyframes cardEnter { @keyframes cardEnter {

2
src/views/myHome/size1920/index.vue
View File

@ -6,7 +6,7 @@
> >
<img src="@/assets/image/content/line.png" class="w-[100%]" alt="" /> <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
</div> </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%]"> <div class="relative w-[100%] h-[100%]">
<img <img
src="@/assets/image/content/bg_1.png" src="@/assets/image/content/bg_1.png"