完成第二个界面和第三个界面

pages/transition/page1/page1.vue

@@ -1,46 +1,53 @@
 <template>
-  <view class="background">
-    <!-- fit journey 文字说明-->
-    <image class="fit_journey_text" src="@/static/transition/page1/pictures/fit_journey_text.png"></image>
-
-    <!--按钮-->
-    <image class="button" @click="click" src="@/static/transition/page1/pictures/button.png"></image>
+  <view class="page1">
+    <!-- 设置图片渐变的效果显示 -->
   </view>
 </template>
 
 <script>
 export default {
+  data() {
+    return {
+      isTransitioning: false, // 控制渐变效果
+    };
+  },
+  mounted() {
+    this.startTransition(); // 在组件加载时开始渐变
+  },
   methods: {
-    click() {
-      uni.navigateTo({
-        url: '/pages/transition/page2/page2' // 跳转到 page2
-      });
-    }
+    startTransition() {
+      this.isTransitioning = true;
+      // 2秒后跳转到 page2
+      setTimeout(() => {
+        uni.navigateTo({
+          url: '/pages/transition/page2/page2'
+        });
+      }, 4000); // 2000毫秒后跳转
+    },
   }
 }
 </script>
 
 <style lang="scss">
-.background {
-  background-image: url('@/static/transition/page1/pictures/background.png');
+.page1 {
+  background-image: url('@/static/transition/page1/pictures/page1.png');
   background-size: cover;
   background-position: center;
   height: 100vh;
+  display: flex;
+  flex-direction: column; /* 纵向排列 */
+  align-items: center; /* 水平居中 */
+  justify-content: center; /* 垂直居中 */
+  opacity: 0; /* 初始透明度 */
+  animation: fadeIn 2s forwards; /* 添加渐变动画 */
 }
 
-.fit_journey_text {
-  position: absolute;
-  width: 285px;
-  height: 167px;
-  left: calc(50% - 285px / 2 + 0.5px);
-  top: 292px;
-}
-
-.button {
-  position: absolute;
-  width: 315px;
-  height: 60px;
-  left: calc(50% - 315px / 2 + 0.5px);
-  top: 772px;
+@keyframes fadeIn {
+  from {
+    opacity: 0; /* 起始透明度 */
+  }
+  to {
+    opacity: 1; /* 结束透明度 */
+  }
 }
 </style>

pages/transition/page2/page2.vue

@@ -1,17 +1,42 @@
 <template>
-  <view>
-
+  <view class="background">
+    <!--按钮-->
+    <image class="button" @click="click" src="@/static/transition/page2/pictures/button.png"></image>
+    <!--按钮-->
   </view>
 </template>
 
 <script>
 export default {
-  data() {
-    return {};
+  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>

pages/transition/page3/page3.vue

@@ -1,17 +1,103 @@
 <template>
-  <view>
-
+  <view class="background">
+    <!-- 人物 -->
+    <image class="human" src="/static/transition/page3/pictures/human.png"></image>
+    <!-- 文字 -->
+    <image class="text" src="/static/transition/page3/pictures/text.png"></image>
+    <!-- 按钮 -->
+    <image class="button" @click="goToPage3" src="/static/transition/page3/pictures/button.png"></image>
   </view>
 </template>
 
 <script>
 export default {
-  data() {
-    return {};
+  methods: {
+    goToPage3() {
+      uni.navigateTo({
+        url: '/pages/transition/page3/page3' // 跳转到 page3
+      });
+    }
   }
 }
 </script>
 
 <style lang="scss">
+.background {
+  background-image: url("/static/transition/page3/pictures/background.png");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Human 动画，从页面中部向上移动 */
+.human {
+  position: absolute;
+  width: 100%;
+  height: 48%;
+
+  object-fit: contain; /* 保持图片比例 */
+  animation: moveUp 2s ease forwards;
+  top: 50%; /* 起始位置 */
+  transform: translateY(-50%); /* 垂直居中 */
+}
+
+/* Text 延迟显示 */
+.text {
+  position: absolute;
+  width: 90%;
+  height: 17%;
 
+  object-fit: contain; /* 保持图片比例 */
+  animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
+  opacity: 0;
+  top: 50%; /* 根据需要调整位置 */
+}
+
+/* Button 延迟显示并加缩放特效，放在右下角 */
+.button {
+  position: absolute;
+  height: 10vh;
+  width: 22vw;
+  animation: fadeInScale 1s ease 2.5s forwards; /* 2.5秒后显示并缩放 */
+  opacity: 0;
+  right: 5%; /* 距右边 5% */
+  bottom: 3%; /* 距底部 5% */
+}
+
+/* 定义 human 上移动画 */
+@keyframes moveUp {
+  from {
+    top: 50%;
+  }
+  to {
+    top: 20%; /* 移动到页面顶部 10% */
+  }
+}
+
+/* Text 和 Button 的渐入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Button 的缩放渐入动画 */
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style>

unpackage/dist/dev/mp-weixin/app.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const common_vendor = require("./common/vendor.js");
 if (!Math) {
-  "./pages/information/information/information.js";
-  "./pages/homepages/self_information/self_information.js";
-  "./pages/homepages/puppy_chat/puppy_chat.js";
-  "./pages/homepages/community/community.js";
-  "./pages/homepages/main/main.js";
-  "./static/homepages/main/main.js";
+  "./pages/transition/page1/page1.js";
+  "./pages/transition/page2/page2.js";
+  "./pages/transition/page3/page3.js";
+  "./pages/transition/page4/page4.js";
 }
 const _sfc_main = {
   onLaunch: function() {

unpackage/dist/dev/mp-weixin/app.json

@@ -1,22 +1,9 @@
 {
   "pages": [
-    "pages/homepages",
-    "pages/phone_code_login/phone_code_login",
-    "pages/phone_login/phone_login",
-    "pages/account_login/account_login",
-    "pages/register/register",
-    "pages/information/information/information",
-    "pages/homepages/self_information/self_information",
-    "pages/homepages/puppy_chat/puppy_chat",
-    "pages/homepages/community/community",
-    "pages/homepages/main/main",
-    "static/homepages/main/main"
+    "pages/transition/page1/page1",
+    "pages/transition/page2/page2",
+    "pages/transition/page3/page3",
+    "pages/transition/page4/page4"
   ],
-  "window": {
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "uni-app",
-    "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8"
-  },
   "usingComponents": {}
 }

unpackage/dist/dev/mp-weixin/app.wxss

@@ -1,3 +1 @@
-
-	/*每个页面公共css */
 page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}[data-c-h="true"]{display: none !important;}

unpackage/dist/dev/mp-weixin/common/assets.js

@@ -0,0 +1,3 @@
+"use strict";
+const _imports_0 = "/static/transition/page1/pictures/button.png";
+exports._imports_0 = _imports_0;

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -6537,6 +6537,96 @@ function getCreateApp() {
     return my[method];
   }
 }
+function vOn(value, key) {
+  const instance = getCurrentInstance();
+  const ctx = instance.ctx;
+  const extraKey = typeof key !== "undefined" && (ctx.$mpPlatform === "mp-weixin" || ctx.$mpPlatform === "mp-qq" || ctx.$mpPlatform === "mp-xhs") && (isString(key) || typeof key === "number") ? "_" + key : "";
+  const name = "e" + instance.$ei++ + extraKey;
+  const mpInstance = ctx.$scope;
+  if (!value) {
+    delete mpInstance[name];
+    return name;
+  }
+  const existingInvoker = mpInstance[name];
+  if (existingInvoker) {
+    existingInvoker.value = value;
+  } else {
+    mpInstance[name] = createInvoker(value, instance);
+  }
+  return name;
+}
+function createInvoker(initialValue, instance) {
+  const invoker = (e2) => {
+    patchMPEvent(e2);
+    let args = [e2];
+    if (e2.detail && e2.detail.__args__) {
+      args = e2.detail.__args__;
+    }
+    const eventValue = invoker.value;
+    const invoke = () => callWithAsyncErrorHandling(patchStopImmediatePropagation(e2, eventValue), instance, 5, args);
+    const eventTarget = e2.target;
+    const eventSync = eventTarget ? eventTarget.dataset ? String(eventTarget.dataset.eventsync) === "true" : false : false;
+    if (bubbles.includes(e2.type) && !eventSync) {
+      setTimeout(invoke);
+    } else {
+      const res = invoke();
+      if (e2.type === "input" && (isArray(res) || isPromise(res))) {
+        return;
+      }
+      return res;
+    }
+  };
+  invoker.value = initialValue;
+  return invoker;
+}
+const bubbles = [
+  // touch事件暂不做延迟，否则在 Android 上会影响性能，比如一些拖拽跟手手势等
+  // 'touchstart',
+  // 'touchmove',
+  // 'touchcancel',
+  // 'touchend',
+  "tap",
+  "longpress",
+  "longtap",
+  "transitionend",
+  "animationstart",
+  "animationiteration",
+  "animationend",
+  "touchforcechange"
+];
+function patchMPEvent(event) {
+  if (event.type && event.target) {
+    event.preventDefault = NOOP;
+    event.stopPropagation = NOOP;
+    event.stopImmediatePropagation = NOOP;
+    if (!hasOwn(event, "detail")) {
+      event.detail = {};
+    }
+    if (hasOwn(event, "markerId")) {
+      event.detail = typeof event.detail === "object" ? event.detail : {};
+      event.detail.markerId = event.markerId;
+    }
+    if (isPlainObject(event.detail) && hasOwn(event.detail, "checked") && !hasOwn(event.detail, "value")) {
+      event.detail.value = event.detail.checked;
+    }
+    if (isPlainObject(event.detail)) {
+      event.target = extend({}, event.target, event.detail);
+    }
+  }
+}
+function patchStopImmediatePropagation(e2, value) {
+  if (isArray(value)) {
+    const originalStop = e2.stopImmediatePropagation;
+    e2.stopImmediatePropagation = () => {
+      originalStop && originalStop.call(e2);
+      e2._stopped = true;
+    };
+    return value.map((fn) => (e3) => !e3._stopped && fn(e3));
+  } else {
+    return value;
+  }
+}
+const o = (value, key) => vOn(value, key);
 function createApp$1(rootComponent, rootProps = null) {
   rootComponent && (rootComponent.mpType = "app");
   return createVueApp(rootComponent, rootProps).use(plugin);
@@ -7370,3 +7460,5 @@ const createSubpackageApp = initCreateSubpackageApp();
 }
 exports._export_sfc = _export_sfc;
 exports.createSSRApp = createSSRApp;
+exports.index = index;
+exports.o = o;

unpackage/dist/dev/mp-weixin/pages/account_login/account_login.json

@@ -1,5 +0,0 @@
-{
-  "navigationBarTitleText": "",
-  "enablePullDownRefresh": false,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/homepages.json

@@ -1,4 +0,0 @@
-{
-  "navigationBarTitleText": "uni-app",
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/homepages/community/community.json

@@ -1,5 +0,0 @@
-{
-  "navigationBarTitleText": "",
-  "enablePullDownRefresh": false,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/homepages/main/main.json

@@ -1,5 +0,0 @@
-{
-  "navigationBarTitleText": "",
-  "enablePullDownRefresh": false,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/homepages/puppy_chat/puppy_chat.js

@@ -1,12 +0,0 @@
-"use strict";
-const common_vendor = require("../../../common/vendor.js");
-const _sfc_main = {
-  data() {
-    return {};
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return {};
-}
-const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
-wx.createPage(MiniProgramPage);

unpackage/dist/dev/mp-weixin/pages/homepages/puppy_chat/puppy_chat.json

@@ -1,5 +0,0 @@
-{
-  "navigationBarTitleText": "",
-  "enablePullDownRefresh": false,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/homepages/puppy_chat/puppy_chat.wxml

@@ -1 +0,0 @@
-<view></view>

unpackage/dist/dev/mp-weixin/pages/homepages/self_information/self_information.js

@@ -1,12 +0,0 @@
-"use strict";
-const common_vendor = require("../../../common/vendor.js");
-const _sfc_main = {
-  data() {
-    return {};
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return {};
-}
-const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
-wx.createPage(MiniProgramPage);

unpackage/dist/dev/mp-weixin/pages/homepages/self_information/self_information.json

@@ -1,5 +0,0 @@
-{
-  "navigationBarTitleText": "",
-  "enablePullDownRefresh": false,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/homepages/self_information/self_information.wxml

@@ -1 +0,0 @@
-<view></view>

unpackage/dist/dev/mp-weixin/pages/index/index.json

@@ -1,4 +0,0 @@
-{
-  "navigationBarTitleText": "uni-app",
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/information/information/information.js

@@ -1,12 +0,0 @@
-"use strict";
-const common_vendor = require("../../../common/vendor.js");
-const _sfc_main = {
-  data() {
-    return {};
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return {};
-}
-const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
-wx.createPage(MiniProgramPage);

unpackage/dist/dev/mp-weixin/pages/information/information/information.json

@@ -1,5 +0,0 @@
-{
-  "navigationBarTitleText": "",
-  "enablePullDownRefresh": false,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/information/information/information.wxml

@@ -1 +0,0 @@
-<view></view>

unpackage/dist/dev/mp-weixin/pages/phone_code_login/phone_code_login.json

@@ -1,5 +0,0 @@
-{
-  "navigationBarTitleText": "",
-  "enablePullDownRefresh": false,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/phone_login/phone_login.json

@@ -1,5 +0,0 @@
-{
-  "navigationBarTitleText": "",
-  "enablePullDownRefresh": false,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/register/register.json

@@ -1,5 +0,0 @@
-{
-  "navigationBarTitleText": "",
-  "enablePullDownRefresh": false,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/pages/transition/page1/page1.js

@@ -0,0 +1,21 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const common_assets = require("../../../common/assets.js");
+const _sfc_main = {
+  methods: {
+    click() {
+      common_vendor.index.navigateTo({
+        url: "/pages/transition/page2/page2"
+        // 跳转到 page2
+      });
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {
+    a: common_vendor.o((...args) => $options.click && $options.click(...args)),
+    b: common_assets._imports_0
+  };
+}
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
+wx.createPage(MiniProgramPage);

unpackage/dist/dev/mp-weixin/pages/transition/page1/page1.json

@@ -0,0 +1,4 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/pages/transition/page1/page1.wxml

@@ -0,0 +1 @@
+<view class="background"><image class="button" bindtap="{{a}}" src="{{b}}"></image></view>

unpackage/dist/dev/mp-weixin/pages/transition/page1/page1.wxss

@@ -0,0 +1,46 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.background {
+  background-image: url("../../../static/transition/page1/pictures/background.png");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  /* 纵向排列 */
+  align-items: center;
+  /* 水平居中 */
+  justify-content: center;
+  /* 垂直居中 */
+}
+.button {
+  /*TODO:这里的定位有问题*/
+  position: absolute;
+  width: 315px;
+  height: 60px;
+  left: calc(50% - 157.5px + 0.5px);
+  top: 759px;
+}

unpackage/dist/dev/mp-weixin/pages/transition/page2/page2.js

@@ -0,0 +1,21 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const common_assets = require("../../../common/assets.js");
+const _sfc_main = {
+  methods: {
+    click() {
+      common_vendor.index.navigateTo({
+        url: "/pages/transition/page3/page3"
+        // 跳转到 page2
+      });
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {
+    a: common_vendor.o((...args) => $options.click && $options.click(...args)),
+    b: common_assets._imports_0
+  };
+}
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
+wx.createPage(MiniProgramPage);

unpackage/dist/dev/mp-weixin/pages/transition/page2/page2.json

@@ -0,0 +1,4 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/pages/transition/page2/page2.wxml

@@ -0,0 +1 @@
+<view class="background"><image class="button" bindtap="{{a}}" src="{{b}}"></image></view>

unpackage/dist/dev/mp-weixin/pages/transition/page2/page2.wxss

@@ -0,0 +1,46 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.background {
+  background-image: url("../../../static/transition/page1/pictures/background.png");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  /* 纵向排列 */
+  align-items: center;
+  /* 水平居中 */
+  justify-content: center;
+  /* 垂直居中 */
+}
+.button {
+  /*TODO:这里的定位有问题*/
+  position: absolute;
+  width: 315px;
+  height: 60px;
+  left: calc(50% - 157.5px + 0.5px);
+  top: 759px;
+}

unpackage/dist/dev/mp-weixin/pages/transition/page3/page3.json

@@ -0,0 +1,4 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/pages/transition/page4/page4.json

@@ -0,0 +1,4 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/static/homepages/main/main.js

@@ -1,12 +0,0 @@
-"use strict";
-const common_vendor = require("../../../common/vendor.js");
-const _sfc_main = {
-  data() {
-    return {};
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return {};
-}
-const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
-wx.createPage(MiniProgramPage);

unpackage/dist/dev/mp-weixin/static/homepages/main/main.json

@@ -1,5 +0,0 @@
-{
-  "navigationBarTitleText": "",
-  "enablePullDownRefresh": false,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/static/homepages/main/main.wxml

@@ -1 +0,0 @@
-<view></view>