<template> <view class="background"> <!--按钮--> <image class="button" @click="goToLoginPage" src="@/static/transition/page7/pictures/button.png"></image> </view> </template> <script> export default { methods: { goToLoginPage() { uni.navigateTo({ url: '/pages/login/account_login/account_login' // 跳转到 page3 }); } } } </script> <style lang="scss"> .background { background-image: url("@/static/transition/page7/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: 80%; height: 12%; bottom: 5%; /* 距离底部 20% 的位置 */ left: 50%; /* 水平居中 */ transform: translateX(-50%); /* 通过 translateX 使其居中 */ } </style>