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

/* 渐变显示动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.button {
  position: absolute;
  width: 80%;
  height: 12%;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0; /* 初始为透明 */
  animation: fadeIn 2s ease-in forwards; /* 2秒渐变显示 */
}
</style>
