Scenes:
There are several pages that need to add a bottom logo. Since the height of each page is different, after adding the bottom, the bottom will be displayed in different places on each page, some are on the lower side. When the page is debugged and the model is changed, there will be a situation where it is up and down.
As shown below:
solve:
At this time, it can be fixed by setting z-index+position.
The bottom of footer.vue here is mainly the logo image, and the mobile terminal must test the compatibility display of different models.
Other pages that need to display this logo as the bottom can import this footer.vue component.
The main content of footer.vue, the div wraps a logo image
<div class="logo">
<van-image :src="logo" width="200">
</div>The following is the style setting of the logo. After setting the style according to the following, the various models are kept at the bottom and centered after page debugging.
.logo{
bottom: 1rem;
z-index:1;
position: fixed;
width:100%;
text-align:center;
}