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