style(home): 优化首页生态模块样式

- 添加健康管理、子女教育、财富管理、养老服务、生活娱乐等生态模块的描述文字
- 调整生态模块的布局和样式,提升视觉效果
- 优化按钮位置和样式,增加页面的可交互性
This commit is contained in:
陈昱达
2025-07-15 12:10:12 +08:00
parent 5d0ed9c3fc
commit ac438c201e
4 changed files with 31 additions and 19 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 KiB

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 50 KiB

View File

@@ -121,23 +121,24 @@ export default {
<div class='health'>
<div class='health-box'>
<h4 class='mt85'>健康管理</h4>
<p>&nbsp;</p>
<p>专业保障健康无忧
</p>
<button class="go-btn" @click="goEcosystem(1, true)">去看看</button>
</div>
</div>
<div class=''>
<div class='children'>
<div class="box">
<div class='text-left'>
<div class='children text-left'>
<div class="box text-left">
<h4>子女教育</h4>
<p>&nbsp;</p>
<p>智慧规划全程守护</p>
<button class="go-btn-v" @click="goEcosystem(38)">去看看</button>
</div>
</div>
<div class='wealth mt10'>
<div class='box'>
<h4>财富管理</h4>
<p>&nbsp;</p>
<p>稳健增值从容人生</p>
<button class="go-btn-v" @click="goEcosystem(48)">去看看</button>
</div>
</div>
@@ -151,14 +152,16 @@ export default {
<div class="service-item old">
<div>
<h4>养老服务</h4>
<p>&nbsp;</p>
<p>暖心相伴</p>
<p>颐养天年</p>
</div>
<button class="go-btn" @click="goEcosystem(28)">去看看</button>
</div>
<div class="service-item life">
<div>
<h4>生活娱乐</h4>
<p>&nbsp;</p>
<p>丰富体验</p>
<p>乐享时光</p>
</div>
<button class="go-btn" @click="goEcosystem(55)">去看看</button>
</div>
@@ -306,7 +309,7 @@ $bg-color: #f5f5f5;
border-radius: 13px;
border: none;
padding: 5px 8px;
margin-bottom: 19px;
//margin-bottom: 19px;
font-family: PingFangSC;
font-size: 11px;
@@ -327,8 +330,8 @@ $bg-color: #f5f5f5;
}
p {
margin-top: 10px;
margin-bottom: 19px;
//margin-top: 10px;
//margin-bottom: 19px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
@@ -384,18 +387,23 @@ $bg-color: #f5f5f5;
//padding: 86px 0 0 11px;
width:133px;
height: 175px;
min-height: 175px;
margin-right: 10px;
}
.health-box{
margin-top: 85px;
margin-left: 20px;
margin-left: 18px;
p{
margin-top: 10px;
margin-bottom: 19px;
}
}
.children,
.wealth {
background-image: url("../../assets/images/sunful/hat.webp");
background-size: 100%;
background-size:contain;
background-repeat: no-repeat;
background-position: left top;
@@ -404,16 +412,19 @@ margin-top: 85px;
align-items: flex-start;
//padding: 18px 0 0 77px;
width: 211px;
height: 82px;
min-height: 82px;
.box{
margin-top: 17px;
margin-left: 76px;
p{
margin: 7px 0 7px 0 ;
}
}
h4 {
text-align: center;
text-align: left;
}
p {
@@ -446,15 +457,16 @@ margin-top: 85px;
background-position: left top;
padding: 21px 0 0 15px;
width: 53%;
width: 175px;
min-height: 157px;
p {
margin-bottom: 46px;
//margin-bottom: 46px;
margin-top: 10px;
}
button {
margin-bottom: 30px;
margin-top: 30px;
}
}