<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>