yanghongwei
/
lg_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1、新增主页布局新增主页布局

This commit is contained in:
lankuixing 2024-02-19 18:42:20 +08:00
parent e863e405a2
commit 71c1f897d8
4 changed files with 65 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/peakCoalImages/footer/footer-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 966 KiB

BIN
assets/peakCoalImages/left/left-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 870 KiB

BIN
assets/peakCoalImages/right/right-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 872 KiB

57
pages/visual/PeakCoalView.vue
View File

@ -3,6 +3,21 @@
<div class="header-content">
</div>
<div class="body-content">
</div>
<div class="footer-content">
</div>
<div class="left-icon">
</div>
<div class="right-icon">
</div>
</div>
</template>
@ -60,11 +75,14 @@ body, html, #__nuxt, #__layout {
background-color: #000;
overflow: hidden;
}
.list-enter-active, .list-leave-active {
transition: all 0.5s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
/* .list-leave-active for below version 2.1.8 */
{
opacity: 0;
transform: translateY(30px);
}
@ -76,10 +94,45 @@ body, html, #__nuxt, #__layout {
overflow: hidden;
position: relative;
user-select: none;
.header-content {
position: absolute;
top: 0px;
height: 507px;
background: url("assets/peakCoalImages/header/first-title-bg.png") no-repeat;
width: 100%;
background: url("assets/peakCoalImages/header/first-title-bg.png") no-repeat center center;
}
.left-icon {
position: absolute;
left: 0px;
width: 531px;
height: 100%;
background: url("assets/peakCoalImages/left/left-icon.png") no-repeat center center;
background-size: 100% 100%;
}
.right-icon {
position: absolute;
right: 0px;
width: 531px;
height: 100%;
background: url("assets/peakCoalImages/right/right-icon.png") no-repeat center center;
background-size: 100% 100%;
}
.body-content {
position: absolute;
height: 100%;
width: 100%;
}
.footer-content {
position: absolute;
bottom: 0px;
width: 100%;
height: 220px;
background: url("assets/peakCoalImages/footer/footer-bg.png") no-repeat center center;
}
}
</style>