refactor(home): 重构首页生态服务布局
- 调整生态服务板块的 HTML 结构,优化布局 - 修改相关 CSS样式,提升视觉效果 - 优化 getUrl 函数,使用环境变量动态生成域名
This commit is contained in:
@@ -3,7 +3,7 @@ import config from '@/config'
|
||||
|
||||
export default function getUrl(url, domainType = 'admin') {
|
||||
let domain = process.env.VUE_APP_ADMIN || ''
|
||||
return 'https://ecotest.happyinsurance.com.cn:4443/api/' + url
|
||||
return domain + url
|
||||
}
|
||||
|
||||
export function getParamsFromUrl(url) {
|
||||
|
||||
@@ -116,26 +116,35 @@ export default {
|
||||
<img :src="require('@/assets/images/sunful/sunful-eco.svg')" alt="生态服务">
|
||||
<div>生态服务</div>
|
||||
</h3>
|
||||
<div class="flex">
|
||||
<div class="service-item health">
|
||||
<h4>健康管理</h4>
|
||||
<p> </p>
|
||||
<button class="go-btn" @click="goEcosystem(1, true)">去看看</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column">
|
||||
<div class="service-item children">
|
||||
<h4>子女教育</h4>
|
||||
<p> </p>
|
||||
<button class="go-btn-v" @click="goEcosystem(38)">去看看</button>
|
||||
</div>
|
||||
<div class="service-item wealth">
|
||||
<h4>财务管理</h4>
|
||||
<p> </p>
|
||||
<button class="go-btn-v" @click="goEcosystem(48)">去看看</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='ecosy-container flex'>
|
||||
<div class='health'>
|
||||
<div class='health-box'>
|
||||
<h4 class='mt85'>健康管理</h4>
|
||||
<p> </p>
|
||||
<button class="go-btn" @click="goEcosystem(1, true)">去看看</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class=''>
|
||||
<div class='children'>
|
||||
<div class="box">
|
||||
<h4>子女教育</h4>
|
||||
<p> </p>
|
||||
<button class="go-btn-v" @click="goEcosystem(38)">去看看</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='wealth mt10'>
|
||||
<div class='box'>
|
||||
<h4>财务管理</h4>
|
||||
<p> </p>
|
||||
<button class="go-btn-v" @click="goEcosystem(48)">去看看</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex service-row">
|
||||
@@ -363,7 +372,7 @@ $bg-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.health {
|
||||
.health {
|
||||
// border-radius: 15px;
|
||||
// border-right: 2px solid #fce4e4;
|
||||
// // border-bottom: 2px solid #fce4e4;
|
||||
@@ -373,11 +382,16 @@ $bg-color: #f5f5f5;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
|
||||
padding: 86px 0 0 11px;
|
||||
width: 37%;
|
||||
//padding: 86px 0 0 11px;
|
||||
width:133px;
|
||||
height: 175px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
.health-box{
|
||||
margin-top: 85px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.children,
|
||||
.wealth {
|
||||
background-image: url("../../assets/images/sunful/hat.webp");
|
||||
@@ -388,7 +402,15 @@ $bg-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
padding: 18px 0 0 77px;
|
||||
//padding: 18px 0 0 77px;
|
||||
width: 211px;
|
||||
height: 82px;
|
||||
|
||||
|
||||
.box{
|
||||
margin-top: 17px;
|
||||
margin-left: 76px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-align: center;
|
||||
@@ -396,7 +418,7 @@ $bg-color: #f5f5f5;
|
||||
|
||||
p {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 7px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
@@ -408,7 +430,7 @@ $bg-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.wealth {
|
||||
transform: translateY(-18px);
|
||||
//transform: translateY(-18px);
|
||||
|
||||
background-image: url("../../assets/images/sunful/treasure.webp");
|
||||
|
||||
@@ -461,9 +483,14 @@ $bg-color: #f5f5f5;
|
||||
|
||||
&.service-row {
|
||||
gap: 10px;
|
||||
margin-top: -20px;
|
||||
margin-top: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ecosy-container{
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user