From b3b696f13dbf842c63c498fa652ba47bb5fb7007 Mon Sep 17 00:00:00 2001
From: Gary <3489015381@qq.com>
Date: Thu, 31 Oct 2024 11:50:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BF=87=E6=B8=A1=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E5=8A=A8=E7=94=BB=E6=98=BE=E7=A4=BA=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/transition/page7/page7.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/pages/transition/page7/page7.vue b/pages/transition/page7/page7.vue
index 03dda92..bedb338 100644
--- a/pages/transition/page7/page7.vue
+++ b/pages/transition/page7/page7.vue
@@ -2,7 +2,6 @@
   <view class="background">
     <!--按钮-->
     <image class="button" @click="goToLoginPage" src="@/static/transition/page7/pictures/button.png"></image>
-
   </view>
 </template>
 
@@ -25,18 +24,30 @@ export default {
   background-position: center;
   height: 100vh;
   display: flex;
-  flex-direction: column; /* 纵向排列 */
-  align-items: center; /* 水平居中 */
-  justify-content: flex-end; /* 使内容向底部对齐 */
-  position: relative; /* 为绝对定位子元素提供相对定位的上下文 */
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+}
+
+/* 渐变显示动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .button {
-  position: absolute; /* 绝对定位 */
+  position: absolute;
   width: 80%;
   height: 12%;
-  bottom: 5%; /* 距离底部 20% 的位置 */
-  left: 50%; /* 水平居中 */
-  transform: translateX(-50%); /* 通过 translateX 使其居中 */
+  bottom: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0; /* 初始为透明 */
+  animation: fadeIn 2s ease-in forwards; /* 2秒渐变显示 */
 }
 </style>