You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1022 B
44 lines
1022 B
<template>
|
|
<view class="background">
|
|
<!--按钮-->
|
|
<image class="button" @click="click" src="@/static/transition/page2/pictures/button.png"></image>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
click() {
|
|
uni.navigateTo({
|
|
url: '/pages/transition/page3/page3' // 跳转到 page3
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.background {
|
|
background-image: url("@/static/transition/page2/pictures/background.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column; /* 纵向排列 */
|
|
align-items: center; /* 水平居中 */
|
|
justify-content: flex-end; /* 使内容向底部对齐 */
|
|
position: relative; //相对自身位置进行偏移的定位方式
|
|
}
|
|
|
|
.button {
|
|
position: absolute; /* 绝对定位 */
|
|
width: 315px;
|
|
height: 60px;
|
|
bottom: 20%; /* 距离底部 20% 的位置 */
|
|
left: 50%; /* 水平居中 */
|
|
transform: translateX(-50%); /* 通过 translateX 使其居中 */
|
|
}
|
|
</style>
|