From 6ad289482317325c7a1b67425cd05d5c688f5876 Mon Sep 17 00:00:00 2001
From: "1054425342@qq.com" <1054425342@qq.com>
Date: Sat, 2 Aug 2025 14:23:42 +0800
Subject: [PATCH] feat pig

---
 pages.json                                    |  927 ++++++++-------
 pig/chapter1/chapter1.vue                     |  330 ++++++
 pig/chapter2/chapter2.vue                     |  369 ++++++
 pig/chapter3/art.vue                          |   83 ++
 pig/chapter3/brave.vue                        |   84 ++
 pig/chapter3/chapter3.vue                     |  426 +++++++
 pig/chapter3/humble.vue                       |   83 ++
 pig/chapter3/sacred.vue                       |   84 ++
 pig/chapter3/smart.vue                        |   83 ++
 pig/chapter3/stupid.vue                       |   83 ++
 pig/chapter4/chapter4.vue                     |  644 +++++++++++
 pig/chapter4/first.vue                        |  109 ++
 pig/chapter4/fourth.vue                       |  109 ++
 pig/chapter4/secBuy.vue                       |  155 +++
 pig/chapter4/second.vue                       |  109 ++
 pig/chapter4/third.vue                        |  109 ++
 pig/home/home.vue                             | 1005 +++++++++++++++++
 .../uni-transition/createAnimation.js         |   24 +-
 .../uni-transition/uni-transition.vue         |   71 +-
 19 files changed, 4472 insertions(+), 415 deletions(-)
 create mode 100644 pig/chapter1/chapter1.vue
 create mode 100644 pig/chapter2/chapter2.vue
 create mode 100644 pig/chapter3/art.vue
 create mode 100644 pig/chapter3/brave.vue
 create mode 100644 pig/chapter3/chapter3.vue
 create mode 100644 pig/chapter3/humble.vue
 create mode 100644 pig/chapter3/sacred.vue
 create mode 100644 pig/chapter3/smart.vue
 create mode 100644 pig/chapter3/stupid.vue
 create mode 100644 pig/chapter4/chapter4.vue
 create mode 100644 pig/chapter4/first.vue
 create mode 100644 pig/chapter4/fourth.vue
 create mode 100644 pig/chapter4/secBuy.vue
 create mode 100644 pig/chapter4/second.vue
 create mode 100644 pig/chapter4/third.vue
 create mode 100644 pig/home/home.vue

diff --git a/pages.json b/pages.json
index 2e70951..df17124 100644
--- a/pages.json
+++ b/pages.json
@@ -1,412 +1,549 @@
 {
-    "pages": [
+  "pages": [
+    {
+      "path": "pages/stratIndex",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationStyle": "custom"
+        // "navigationBarTitleText": "CGC-ICH"
+      }
+    },
+    {
+      "path": "pages/index/readingBody",
+      "style": {
+        "navigationStyle": "custom"
+        // "navigationBarTitleText": "阅读体"
+      }
+    },
+    {
+      "path": "pages/index/sensoryStore",
+      "style": {
+        "navigationStyle": "custom"
+        // "navigationBarTitleText": "有感商店"
+      }
+    },
+    {
+      "path": "pages/index/intelligentAgent",
+      "style": {
+        "navigationStyle": "custom"
+        // "navigationBarTitleText": "智能体"
+      }
+    },
+    {
+      "path": "pages/index/iSoul",
+      "style": {
+        "navigationStyle": "custom"
+        // "navigationBarTitleText": "iSoul"
+      }
+    },
+    {
+      "path": "pages/login/login",
+      "style": {
+        "navigationBarTitleText": "登录",
+        "navigationStyle": "custom"
+      }
+    }
+  ],
+  "subPackages": [
+    {
+      "root": "subPackages",
+      "pages": [
+        {
+          "path": "order/trades",
+          "style": {
+            "navigationBarTitleText": "全部订单"
+          }
+        },
+        {
+          "path": "order/detail",
+          "style": {
+            "navigationBarTitleText": "订单详情",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "techan/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "techan/detail",
+          "style": {
+            "navigationBarTitleText": ""
+          }
+        },
+        {
+          "path": "techan/order",
+          "style": {
+            "navigationBarTitleText": "确认订单"
+          }
+        },
+        {
+          "path": "webPage/webPage",
+          "style": {
+            "navigationBarTitleText": ""
+          }
+        },
+        {
+          "path": "video/video",
+          "style": {
+            "navigationBarTitleText": ""
+          }
+        },
+        {
+          "path": "readingBody/index",
+          "style": {
+            "navigationBarTitleText": "阅读体",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "haveFeeling/shopDetail",
+          "style": {
+            "navigationBarTitleText": "有感商店详情页",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "haveFeeling/detailXiang",
+          "style": {
+            "navigationBarTitleText": "有感商店"
+          }
+        },
+        {
+          "path": "letter/detail",
+          "style": {
+            "navigationBarTitleText": "文章详情"
+          }
+        },
+        {
+          "path": "user/privacy",
+          "style": {
+            "navigationBarTitleText": "详情"
+          }
+        },
+        {
+          "path": "user/privacyInfo",
+          "style": {
+            "navigationBarTitleText": "详情"
+          }
+        },
+        {
+          "path": "user/travelerList",
+          "style": {
+            "navigationBarTitleText": "收货地址"
+          }
+        },
+        {
+          "path": "user/myAddressAdd",
+          "style": {
+            "navigationBarTitleText": "收货地址"
+          }
+        },
+        {
+          "path": "user/gwc",
+          "style": {
+            "navigationBarTitleText": "购物车"
+          }
+        },
+        {
+          "path": "order/gwcOrder",
+          "style": {
+            "navigationBarTitleText": "下单"
+          }
+        },
+        {
+          "path": "user/profile",
+          "style": {
+            "navigationBarTitleText": "个人信息"
+          }
+        },
+        {
+          "path": "user/changeNickname",
+          "style": {
+            "navigationBarTitleText": "修改昵称"
+          }
+        },
+        {
+          "path": "search/search",
+          "style": {
+            "navigationBarTitleText": "搜索"
+          }
+        }
+      ]
+    },
+    {
+      "root": "xxdf",
+      "pages": [
+        {
+          "path": "home/home",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter1/cover1",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter1/detail1",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter1/detail2",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter1/detail3",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
         {
-            "path": "pages/stratIndex",
-            "style": {
-                "navigationStyle": "custom"
-            }
+          "path": "chapter1/detail4",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
         },
         {
-            "path": "pages/index/index",
-            "style": {
-                "navigationStyle": "custom"
-                // "navigationBarTitleText": "CGC-ICH"
-            }
+          "path": "chapter1/detail5",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
         },
         {
-            "path": "pages/index/readingBody",
-            "style": {
-                "navigationStyle": "custom"
-                // "navigationBarTitleText": "阅读体"
-            }
+          "path": "chapter2/cover",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
         },
         {
-            "path": "pages/index/sensoryStore",
-            "style": {
-                "navigationStyle": "custom"
-                // "navigationBarTitleText": "有感商店"
-            }
+          "path": "chapter3/cover",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
         },
         {
-            "path": "pages/index/intelligentAgent",
-            "style": {
-                "navigationStyle": "custom"
-                // "navigationBarTitleText": "智能体"
-            }
+          "path": "chapter3/randomImage",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
         },
         {
-            "path": "pages/index/iSoul",
-            "style": {
-                "navigationStyle": "custom"
-                // "navigationBarTitleText": "iSoul"
-            }
+          "path": "chapter4/cover",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "enableShareAppMessage": true,
+            "enableShareTimeline": true
+          }
+        }
+      ]
+    },
+    {
+      "root": "taozi",
+      "pages": [
+        {
+          "path": "home/home",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter1/chapter1",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter2/chapter2",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
         },
         {
-            "path": "pages/login/login",
-            "style": {
-                "navigationBarTitleText": "登录",
-                "navigationStyle": "custom"
-            }
+          "path": "chapter3/chapter3",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter4/chapter4",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
         }
-    ],
-    "subPackages": [
-        {
-            "root": "subPackages",
-            "pages": [
-                {
-                    "path": "order/trades",
-                    "style": {
-                        "navigationBarTitleText": "全部订单"
-                    }
-                },
-                {
-                    "path": "order/detail",
-                    "style": {
-                        "navigationBarTitleText": "订单详情",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "techan/index",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "techan/detail",
-                    "style": {
-                        "navigationBarTitleText": ""
-                    }
-                },
-                {
-                    "path": "techan/order",
-                    "style": {
-                        "navigationBarTitleText": "确认订单"
-                    }
-                },
-                {
-                    "path": "webPage/webPage",
-                    "style": {
-                        "navigationBarTitleText": ""
-                    }
-                },
-                {
-                    "path": "video/video",
-                    "style": {
-                        "navigationBarTitleText": ""
-                    }
-                },
-                {
-                    "path": "readingBody/index",
-                    "style": {
-                        "navigationBarTitleText": "阅读体",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "haveFeeling/shopDetail",
-                    "style": {
-                        "navigationBarTitleText": "有感商店详情页",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "haveFeeling/detailXiang",
-                    "style": {
-                        "navigationBarTitleText": "有感商店"
-                    }
-                },
-                {
-                    "path": "letter/detail",
-                    "style": {
-                        "navigationBarTitleText": "文章详情"
-                    }
-                },
-                {
-                    "path": "user/privacy",
-                    "style": {
-                        "navigationBarTitleText": "详情"
-                    }
-                },
-                {
-                    "path": "user/privacyInfo",
-                    "style": {
-                        "navigationBarTitleText": "详情"
-                    }
-                },
-                {
-                    "path": "user/travelerList",
-                    "style": {
-                        "navigationBarTitleText": "收货地址"
-                    }
-                },
-                {
-                    "path": "user/myAddressAdd",
-                    "style": {
-                        "navigationBarTitleText": "收货地址"
-                    }
-                },
-                {
-                    "path": "user/gwc",
-                    "style": {
-                        "navigationBarTitleText": "购物车"
-                    }
-                },
-				{
-					"path" : "order/gwcOrder",
-					"style" : {
-						"navigationBarTitleText" : "下单"
-					}
-				},
-                {
-                    "path": "user/profile",
-                    "style": {
-                        "navigationBarTitleText": "个人信息"
-                    }
-                },
-                {
-                    "path": "user/changeNickname",
-                    "style": {
-                        "navigationBarTitleText": "修改昵称"
-                    }
-                },
-                {
-                    "path": "search/search",
-                    "style": {
-                        "navigationBarTitleText": "搜索"
-                    }
-                }
-            ]
-        },
-        {
-            "root": "xxdf",
-            "pages": [
-                {
-                    "path": "home/home",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "chapter1/cover1",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "chapter1/detail1",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "chapter1/detail2",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "chapter1/detail3",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "chapter1/detail4",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "chapter1/detail5",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "chapter2/cover",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "chapter3/cover",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "chapter3/randomImage",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "chapter4/cover",
-                    "style": {
-                        "navigationBarTitleText": "",
-                        "navigationStyle": "custom",
-                        "enableShareAppMessage": true,
-                        "enableShareTimeline": true
-                    }
-                }
-            ]
-        },
-		{
-		    "root": "taozi",
-		    "pages": [
-		        {
-		            "path": "home/home",
-		            "style": {
-		                "navigationBarTitleText": "",
-		                "navigationStyle": "custom"
-		            }
-		        },
-				{
-				    "path": "chapter1/chapter1",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				},
-				{
-				    "path": "chapter2/chapter2",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				},
-				{
-				    "path": "chapter3/chapter3",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				},
-				{
-				    "path": "chapter4/chapter4",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				}
-			]
-		},
-		{
-		    "root": "bmzm",
-		    "pages": [
-		        {
-		            "path": "home/home",
-		            "style": {
-		                "navigationBarTitleText": "",
-		                "navigationStyle": "custom"
-		            }
-		        },
-				{
-				    "path": "chapter1/index",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				},
-				{
-				    "path": "chapter2/index",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				},
-				{
-				    "path": "chapter3/index",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				},
-				{
-				    "path": "chapter4/index",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				},
-				{
-				    "path": "chapter5/index",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				},
-				{
-				    "path": "chapter6/index",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				},
-				{
-				    "path": "chapter7/index",
-				    "style": {
-				        "navigationBarTitleText": "",
-				        "navigationStyle": "custom"
-				    }
-				}
-			]
-		}
-    ],
-    "tabBar": {
-        "custom": true,
-        "color": "#333333",
-        "selectedColor": "#6CA5AA",
-        "borderStyle": "black",
-        "backgroundColor": "#ffffff",
-        "fontSize": "24rpx",
-        "height": "123rpx",
-        "iconWidth": "40rpx",
-        "list": [
-            {
-                "pagePath": "pages/index/index",
-                "text": "首页",
-                "visible": false
-            },
-            {
-                "pagePath": "pages/index/readingBody",
-                "text": "阅读体",
-                "visible": false
-            },
-            {
-                "pagePath": "pages/index/sensoryStore",
-                "text": "有感商店",
-                "visible": false
-            },
-            {
-                "pagePath": "pages/index/intelligentAgent",
-                "text": "智能体",
-                "visible": false
-            },
-            {
-                "pagePath": "pages/index/iSoul",
-                "text": "iSoul",
-                "visible": false
-            }
-        ]
+      ]
     },
-    "globalStyle": {
-        "navigationBarTextStyle": "black",
-        "navigationBarTitleText": "uni-app",
-        "navigationBarBackgroundColor": "#F8F8F8",
-        "backgroundColor": "#F8F8F8"
+    {
+      "root": "bmzm",
+      "pages": [
+        {
+          "path": "home/home",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter1/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter2/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter3/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter4/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter5/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter6/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter7/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        }
+      ]
     },
-    "uniIdRouter": {}
-}
\ No newline at end of file
+    {
+      "root": "pig",
+      "pages": [
+        {
+          "path": "home/home",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationBarTextStyle": "white",
+
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter1/chapter1",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationBarTextStyle": "white",
+
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter2/chapter2",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationBarTextStyle": "white",
+
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter3/chapter3",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter3/brave",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter3/sacred",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter3/humble",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter3/art",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter3/smart",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter3/stupid",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter4/chapter4",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+
+        {
+          "path": "chapter4/secBuy",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter4/first",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter4/second",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter4/third",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "chapter4/fourth",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
+        }
+      ]
+    }
+  ],
+  "tabBar": {
+    "custom": true,
+    "color": "#333333",
+    "selectedColor": "#6CA5AA",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "fontSize": "24rpx",
+    "height": "123rpx",
+    "iconWidth": "40rpx",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页",
+        "visible": false
+      },
+      {
+        "pagePath": "pages/index/readingBody",
+        "text": "阅读体",
+        "visible": false
+      },
+      {
+        "pagePath": "pages/index/sensoryStore",
+        "text": "有感商店",
+        "visible": false
+      },
+      {
+        "pagePath": "pages/index/intelligentAgent",
+        "text": "智能体",
+        "visible": false
+      },
+      {
+        "pagePath": "pages/index/iSoul",
+        "text": "iSoul",
+        "visible": false
+      }
+    ]
+  },
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  },
+  "uniIdRouter": {}
+}
diff --git a/pig/chapter1/chapter1.vue b/pig/chapter1/chapter1.vue
new file mode 100644
index 0000000..58345e6
--- /dev/null
+++ b/pig/chapter1/chapter1.vue
@@ -0,0 +1,330 @@
+<template>
+  <view>
+    <swiper
+      class="main-swiper"
+      :vertical="true"
+      :current="currentIndex"
+      @change="handleSwiperChange"
+      :duration="300"
+      :style="{ height: '100vh' }"
+    >
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[0]">
+            <image
+              v-show="shouldShowContent(0)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/e2e3e00841d713937d938ae45835d016.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[1]">
+            <image
+              v-show="shouldShowContent(1)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/8cab90fe198b18b85637e21f726e75c2.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[2]">
+            <image
+              v-show="shouldShowContent(2)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/2946a97006765d53d3d74cedf0999b3c.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view class="content-layer" v-show="shouldShowContent(2)">
+              <image
+                class="layer-img3"
+                :class="{
+                  hidden: !animationStates[2],
+                  blink: animationStates[2],
+                }"
+                :src="
+                  showImg(
+                    '/uploads/20250802/ff96e22b3da7d3eb558552227edb24a5.png'
+                  )
+                "
+                :lazy-load="true"
+                mode="widthFix"
+              ></image>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <image
+            style="width: 100%; height: 100%"
+            :src="
+              showImg('/uploads/20250802/dee49f1aa510d85c368aafc889e24cc0.png')
+            "
+            mode="aspectFill"
+          ></image>
+          <image
+            @click="goChapter"
+            style="
+              width: 137rpx;
+              height: 108rpx;
+              position: absolute;
+              bottom: 125rpx;
+              left: 307rpx;
+            "
+            :src="
+              showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png')
+            "
+            mode="aspectFill"
+          ></image>
+        </view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+import TitleHeader from "@/components/TitleHeader.vue";
+export default {
+  components: {
+    TitleHeader,
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      loadedPages: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+      },
+      animationStates: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+      },
+      preloadBuffer: 1,
+      titleHeight: 0,
+    };
+  },
+  watch: {
+    currentIndex(newIndex) {
+      for (
+        let i = Math.max(0, newIndex - this.preloadBuffer);
+        i <= Math.min(9, newIndex + this.preloadBuffer);
+        i++
+      ) {
+        this.loadedPages[i] = true;
+      }
+    },
+  },
+  mounted() {
+    this.titleHeight = uni.getStorageSync("titleHeight");
+    for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 9); i++) {
+      this.loadedPages[i] = true;
+    }
+    setTimeout(() => {
+      this.animationStates[this.currentIndex] = true;
+    }, 50);
+  },
+  methods: {
+    goChapter() {
+      uni.navigateTo({
+        url: "/pig/chapter2/chapter2",
+      });
+    },
+    handleSwiperChange(e) {
+      const newIndex = e.detail.current;
+      this.currentIndex = newIndex;
+      this.animationStates[newIndex] = false;
+      setTimeout(() => {
+        this.animationStates[newIndex] = true;
+      }, 50);
+    },
+    shouldShowContent(index) {
+      return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+    },
+    goBack() {
+      uni.navigateTo({
+        url: "/taozi/home/home?targetIndex=5",
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.main-swiper {
+  width: 100%;
+  height: 100vh;
+}
+
+.page-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.bg-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.layer-img1 {
+  width: 500rpx;
+  z-index: 2;
+  margin-right: 180rpx;
+  margin-top: 50rpx;
+}
+
+.layer-img2 {
+  z-index: 2;
+  position: absolute;
+  bottom: 18%;
+  left: 0;
+  width: 100%;
+  height: 350rpx;
+}
+
+.content-layer {
+  margin: 130rpx 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.layer-img3 {
+  width: 118rpx;
+  height: 69rpx;
+  z-index: 2;
+  position: absolute;
+  top: 238rpx;
+  right: 58rpx;
+}
+
+.layer-img4 {
+  z-index: 2;
+  width: 400rpx;
+  height: 400rpx;
+  margin-top: 400rpx;
+  margin-left: 80rpx;
+}
+
+.layer-img5 {
+  z-index: 2;
+  position: absolute;
+  bottom: 90rpx;
+  right: 30rpx;
+  width: 320rpx;
+  height: 500rpx;
+}
+
+.back-btn {
+  position: absolute;
+  top: 50rpx;
+  left: 50rpx;
+  z-index: 2;
+  background-color: rgb(0 0 0 / 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.slide-in-from-left {
+  animation: slideInLeft 1.2s ease-out forwards;
+}
+
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.slide-in-from-right {
+  animation: slideInRight 1.2s ease-out forwards;
+}
+
+.blink {
+  animation: blink 1.5s infinite;
+}
+
+@keyframes slideInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0.3;
+  }
+}
+</style>
diff --git a/pig/chapter2/chapter2.vue b/pig/chapter2/chapter2.vue
new file mode 100644
index 0000000..165e061
--- /dev/null
+++ b/pig/chapter2/chapter2.vue
@@ -0,0 +1,369 @@
+<template>
+  <view>
+    <swiper
+      class="main-swiper"
+      :vertical="true"
+      :current="currentIndex"
+      @change="handleSwiperChange"
+      :duration="300"
+      :style="{ height: '100vh' }"
+    >
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[0]">
+            <image
+              v-show="shouldShowContent(0)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/1b7efb30e20fc563d82b6b5c9c2ee3d1.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[1]">
+            <image
+              v-show="shouldShowContent(1)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/d2d830cd1171e194e427c0782fb77c1b.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view class="content-layer" v-show="shouldShowContent(1)">
+              <image
+                class="layer-img2"
+                :class="{
+                  hidden: !animationStates[1],
+                  'fade-in': animationStates[1],
+                }"
+                :src="
+                  showImg(
+                    '/uploads/20250802/70cb6f2efde536bdde781ae387529a5c.png'
+                  )
+                "
+                :lazy-load="true"
+                mode="widthFix"
+              ></image>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[2]">
+            <image
+              v-show="shouldShowContent(2)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/6f74f39c254998394f11b081220b60bc.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[3]">
+            <image
+              v-show="shouldShowContent(3)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/a85fad872bcdb3c1312ef9e799eb7863.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <image
+            style="width: 100%; height: 100%"
+            :src="
+              showImg('/uploads/20250802/c25deec8a6e4f84c8229718312c6ff02.png')
+            "
+            mode="aspectFill"
+          ></image>
+          <image
+            @click="goChapter"
+            style="
+              width: 137rpx;
+              height: 108rpx;
+              position: absolute;
+              bottom: 125rpx;
+              left: 307rpx;
+            "
+            :src="
+              showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png')
+            "
+            mode="aspectFill"
+          ></image>
+        </view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+import TitleHeader from "@/components/TitleHeader.vue";
+export default {
+  components: {
+    TitleHeader,
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      loadedPages: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+      },
+      animationStates: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+      },
+      preloadBuffer: 1,
+      titleHeight: 0,
+    };
+  },
+  watch: {
+    currentIndex(newIndex) {
+      for (
+        let i = Math.max(0, newIndex - this.preloadBuffer);
+        i <= Math.min(9, newIndex + this.preloadBuffer);
+        i++
+      ) {
+        this.loadedPages[i] = true;
+      }
+    },
+  },
+  mounted() {
+    this.titleHeight = uni.getStorageSync("titleHeight");
+    for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 9); i++) {
+      this.loadedPages[i] = true;
+    }
+    setTimeout(() => {
+      this.animationStates[this.currentIndex] = true;
+    }, 50);
+  },
+  methods: {
+    goChapter() {
+      uni.navigateTo({
+        url: "/pig/chapter3/chapter3",
+      });
+    },
+    handleSwiperChange(e) {
+      const newIndex = e.detail.current;
+      this.currentIndex = newIndex;
+      this.animationStates[newIndex] = false;
+      setTimeout(() => {
+        this.animationStates[newIndex] = true;
+      }, 50);
+    },
+    shouldShowContent(index) {
+      return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+    },
+    goBack() {
+      uni.navigateTo({
+        url: "/taozi/home/home?targetIndex=5",
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.main-swiper {
+  width: 100%;
+  height: 100vh;
+}
+
+.page-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.bg-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.layer-img1 {
+  width: 500rpx;
+  z-index: 2;
+  margin-right: 180rpx;
+  margin-top: 50rpx;
+}
+
+.layer-img2 {
+  z-index: 2;
+  position: absolute;
+  bottom: 18%;
+  left: 0;
+  width: 100%;
+  height: 350rpx;
+}
+
+.content-layer {
+  margin: 130rpx 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.layer-img3 {
+  width: 118rpx;
+  height: 69rpx;
+  z-index: 2;
+  position: absolute;
+  top: 238rpx;
+  right: 58rpx;
+}
+.layer-img2 {
+  width: 696rpx;
+  height: 302rpx;
+  z-index: 2;
+  position: absolute;
+  top: 200rpx;
+  left: 35rpx;
+}
+
+.layer-img4 {
+  z-index: 2;
+  width: 400rpx;
+  height: 400rpx;
+  margin-top: 400rpx;
+  margin-left: 80rpx;
+}
+
+.layer-img5 {
+  z-index: 2;
+  position: absolute;
+  bottom: 90rpx;
+  right: 30rpx;
+  width: 320rpx;
+  height: 500rpx;
+}
+
+.back-btn {
+  position: absolute;
+  top: 50rpx;
+  left: 50rpx;
+  z-index: 2;
+  background-color: rgb(0 0 0 / 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.slide-in-from-left {
+  animation: slideInLeft 1.2s ease-out forwards;
+}
+
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.slide-in-from-right {
+  animation: slideInRight 1.2s ease-out forwards;
+}
+
+.blink {
+  animation: blink 1.5s infinite;
+}
+
+@keyframes slideInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0.3;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 1s ease-in forwards;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/pig/chapter3/art.vue b/pig/chapter3/art.vue
new file mode 100644
index 0000000..0688a1a
--- /dev/null
+++ b/pig/chapter3/art.vue
@@ -0,0 +1,83 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+        <image
+          class="tag-image"
+          :src="showImg('/uploads/20250802/1f89c03f361dbcfe3f195f1cb14a92d3.png')"
+          mode="aspectFill"
+        ></image>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
\ No newline at end of file
diff --git a/pig/chapter3/brave.vue b/pig/chapter3/brave.vue
new file mode 100644
index 0000000..2501452
--- /dev/null
+++ b/pig/chapter3/brave.vue
@@ -0,0 +1,84 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+        <image
+          class="tag-image"
+          :src="showImg('/uploads/20250802/aa1669fbcb9177b4be1c8eed12fb4de0.png')"
+          mode="aspectFill"
+        ></image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
\ No newline at end of file
diff --git a/pig/chapter3/chapter3.vue b/pig/chapter3/chapter3.vue
new file mode 100644
index 0000000..168ce3b
--- /dev/null
+++ b/pig/chapter3/chapter3.vue
@@ -0,0 +1,426 @@
+<template>
+  <view>
+    <swiper
+      class="main-swiper"
+      :vertical="true"
+      :current="currentIndex"
+      @change="handleSwiperChange"
+      :duration="300"
+      :style="{ height: '100vh' }"
+    >
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[0]">
+            <image
+              v-show="shouldShowContent(0)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/62434ca7ee6b6457ea158b1860527085.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+			<!-- 勇敢 -->
+			<view class="content-layer" v-show="shouldShowContent(0)">
+			  <image
+			    @click="navigateToTag('brave')"
+			    :class="{
+			      hidden: !animationStates[0],
+			      'fade-in': animationStates[0],
+			      breathe: animationStates[0],
+			    }"
+				style="width: 84rpx;height: 125rpx;"
+			    :src="
+			      showImg(
+			        '/uploads/20250802/053baeec3ce0c8e9908571b0fc890348.png'
+			      )
+			    "
+			    :lazy-load="true"
+			    mode="widthFix"
+			  ></image>
+			  <!-- 神圣 -->
+			  <image
+			    @click="navigateToTag('sacred')"
+			    :class="{
+			      hidden: !animationStates[0],
+			      'fade-in': animationStates[0],
+			      breathe: animationStates[0],
+			    }"
+			  								style="width: 84rpx;height: 125rpx;position: absolute;top: 70rpx;left: 400rpx;"
+			    :src="
+			      showImg(
+			        '/uploads/20250802/39ce1cd11557c7e66ffa840fbc985d54.png'
+			      )
+			    "
+			    :lazy-load="true"
+			    mode="widthFix"
+			  ></image>
+			  <!-- 卑微 -->
+			  <image
+			    @click="navigateToTag('humble')"
+			    :class="{
+			      hidden: !animationStates[0],
+			      'fade-in': animationStates[0],
+			      breathe: animationStates[0],
+			    }"
+			  	style="width: 84rpx;height: 125rpx;position: absolute;top: 230rpx;left: 200rpx;"
+			    :src="
+			      showImg(
+			        '/uploads/20250802/ab5045d22d549c688e084096c85b9d05.png'
+			      )
+			    "
+			    :lazy-load="true"
+			    mode="widthFix"
+			  ></image>
+			  <!-- 艺术 -->
+			  <image
+			    @click="navigateToTag('art')"
+			    :class="{
+			      hidden: !animationStates[0],
+			      'fade-in': animationStates[0],
+			      breathe: animationStates[0],
+			    }"
+			  						  	style="width: 84rpx;height: 125rpx;position: absolute;top: 430rpx;left: 420rpx;"
+			    :src="
+			      showImg(
+			        '/uploads/20250802/a77fd06f3d03fa1254321b9549922875.png'
+			      )
+			    "
+			    :lazy-load="true"
+			    mode="widthFix"
+			  ></image>
+			  <!-- 聪明 -->
+			  <image
+			    @click="navigateToTag('smart')"
+			    :class="{
+			      hidden: !animationStates[0],
+			      'fade-in': animationStates[0],
+			      breathe: animationStates[0],
+			    }"
+			  	style="width: 84rpx;height: 125rpx;position: absolute;top: 630rpx;left: -20rpx;"
+			    :src="
+			      showImg(
+			        '/uploads/20250802/d6e520506579d431daebccd8563c8750.png'
+			      )
+			    "
+			    :lazy-load="true"
+			    mode="widthFix"
+			  ></image>
+			<!-- 笨 -->
+			  <image
+			    @click="navigateToTag('stupid')"
+			    :class="{
+			      hidden: !animationStates[0],
+			      'fade-in': animationStates[0],
+			      breathe: animationStates[0],
+			    }"
+			  	style="width: 84rpx;height: 125rpx;position: absolute;top: 760rpx;left: 220rpx;"
+			    :src="
+			      showImg(
+			        '/uploads/20250802/2ee7e6be3e5115fa0da7eb66fbcb54c8.png'
+			      )
+			    "
+			    :lazy-load="true"
+			    mode="widthFix"
+			  ></image>
+			</view>
+          </template>
+        </view>
+      </swiper-item>
+	  <swiper-item>
+	    <view class="page-container">
+	      <image
+	        style="width: 100%; height: 100%"
+	        :src="
+	          showImg('/uploads/20250802/c21b01fea9610f8069a768f03a173b66.png')
+	        "
+	        mode="aspectFill"
+	      ></image>
+	      <image
+	        @click="goChapter"
+	        style="
+	          width: 137rpx;
+	          height: 108rpx;
+	          position: absolute;
+	          bottom: 125rpx;
+	          left: 307rpx;
+	        "
+	        :src="
+	          showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png')
+	        "
+	        mode="aspectFill"
+	      ></image>
+	    </view>
+	  </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+import TitleHeader from "@/components/TitleHeader.vue";
+export default {
+  components: {
+    TitleHeader,
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      loadedPages: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+      },
+      animationStates: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+      },
+      preloadBuffer: 1,
+      titleHeight: 0,
+    };
+  },
+  watch: {
+    currentIndex(newIndex) {
+      for (
+        let i = Math.max(0, newIndex - this.preloadBuffer);
+        i <= Math.min(9, newIndex + this.preloadBuffer);
+        i++
+      ) {
+        this.loadedPages[i] = true;
+      }
+    },
+  },
+  mounted() {
+    this.titleHeight = uni.getStorageSync("titleHeight");
+    for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 9); i++) {
+      this.loadedPages[i] = true;
+    }
+    setTimeout(() => {
+      this.animationStates[this.currentIndex] = true;
+    }, 50);
+  },
+  methods: {
+    goChapter() {
+      uni.navigateTo({
+        url: "/pig/chapter4/chapter4",
+      });
+    },
+    handleSwiperChange(e) {
+      const newIndex = e.detail.current;
+      this.currentIndex = newIndex;
+      this.animationStates[newIndex] = false;
+      setTimeout(() => {
+        this.animationStates[newIndex] = true;
+      }, 50);
+    },
+    shouldShowContent(index) {
+      return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+    },
+    goBack() {
+      uni.navigateTo({
+        url: "/taozi/home/home?targetIndex=5",
+      });
+    },
+    navigateToTag(tagName) {
+      uni.navigateTo({
+        url: `/pig/chapter3/${tagName}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.main-swiper {
+  width: 100%;
+  height: 100vh;
+}
+
+.page-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.bg-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.layer-img1 {
+  width: 500rpx;
+  z-index: 2;
+  margin-right: 180rpx;
+  margin-top: 50rpx;
+}
+
+.layer-img2 {
+  z-index: 2;
+  position: absolute;
+  bottom: 18%;
+  left: 0;
+  width: 100%;
+  height: 350rpx;
+}
+
+.content-layer {
+  position: absolute;
+  top: 245rpx;
+  left: 115rpx;
+  z-index: 9;
+}
+
+.layer-img3 {
+  width: 118rpx;
+  height: 69rpx;
+  z-index: 2;
+  position: absolute;
+  top: 238rpx;
+  right: 58rpx;
+}
+.layer-img2 {
+  width: 696rpx;
+  height: 302rpx;
+  z-index: 2;
+  position: absolute;
+  top: 200rpx;
+  left: 35rpx;
+}
+
+.layer-img4 {
+  z-index: 2;
+  width: 400rpx;
+  height: 400rpx;
+  margin-top: 400rpx;
+  margin-left: 80rpx;
+}
+
+.layer-img5 {
+  z-index: 2;
+  position: absolute;
+  bottom: 90rpx;
+  right: 30rpx;
+  width: 320rpx;
+  height: 500rpx;
+}
+
+.back-btn {
+  position: absolute;
+  top: 50rpx;
+  left: 50rpx;
+  z-index: 2;
+  background-color: rgb(0 0 0 / 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.slide-in-from-left {
+  animation: slideInLeft 1.2s ease-out forwards;
+}
+
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.slide-in-from-right {
+  animation: slideInRight 1.2s ease-out forwards;
+}
+
+.blink {
+  animation: blink 1.5s infinite;
+}
+
+@keyframes slideInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0.3;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 1s ease-in forwards;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.breathe {
+  animation: breathe 3s ease-in-out infinite;
+}
+
+@keyframes breathe {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/pig/chapter3/humble.vue b/pig/chapter3/humble.vue
new file mode 100644
index 0000000..ad8894a
--- /dev/null
+++ b/pig/chapter3/humble.vue
@@ -0,0 +1,83 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+        <image
+          class="tag-image"
+          :src="showImg('/uploads/20250802/4acd9c894c2a464100ef21dae4d85652.png')"
+          mode="aspectFill"
+        ></image>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
\ No newline at end of file
diff --git a/pig/chapter3/sacred.vue b/pig/chapter3/sacred.vue
new file mode 100644
index 0000000..da7de4a
--- /dev/null
+++ b/pig/chapter3/sacred.vue
@@ -0,0 +1,84 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+        <image
+          class="tag-image"
+          :src="showImg('/uploads/20250802/590d1fc5594c8c2700eaf9e901af2cad.png')"
+          mode="aspectFill"
+        ></image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
\ No newline at end of file
diff --git a/pig/chapter3/smart.vue b/pig/chapter3/smart.vue
new file mode 100644
index 0000000..f0724ab
--- /dev/null
+++ b/pig/chapter3/smart.vue
@@ -0,0 +1,83 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+        <image
+          class="tag-image"
+          :src="showImg('/uploads/20250802/1459fab5f195fa3ed6b17be8591a592d.png')"
+          mode="aspectFill"
+        ></image>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
\ No newline at end of file
diff --git a/pig/chapter3/stupid.vue b/pig/chapter3/stupid.vue
new file mode 100644
index 0000000..410bf22
--- /dev/null
+++ b/pig/chapter3/stupid.vue
@@ -0,0 +1,83 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+        <image
+          class="tag-image"
+          :src="showImg('/uploads/20250802/c3d19d8a0b35d6acbcfd0a9748806951.png')"
+          mode="aspectFill"
+        ></image>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
\ No newline at end of file
diff --git a/pig/chapter4/chapter4.vue b/pig/chapter4/chapter4.vue
new file mode 100644
index 0000000..ffe34af
--- /dev/null
+++ b/pig/chapter4/chapter4.vue
@@ -0,0 +1,644 @@
+<template>
+  <view>
+    <swiper
+      class="main-swiper"
+      :vertical="true"
+      :current="currentIndex"
+      @change="handleSwiperChange"
+      :duration="300"
+      :style="{ height: '100vh' }"
+    >
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[0]">
+            <image
+              v-show="shouldShowContent(0)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/85bba0ce5a8113fe6331f335a4cfd7f7.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[1]">
+            <image
+              v-show="shouldShowContent(1)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/0bd899a27fdbaf8a2c314faaefd7c320.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view class="content-layer" v-show="shouldShowContent(1)">
+              <image
+                class="layer-img2"
+                :class="{
+                  hidden: !animationStates[1],
+                  'fade-in': animationStates[1],
+                }"
+                :src="
+                  showImg(
+                    '/uploads/20250802/70cb6f2efde536bdde781ae387529a5c.png'
+                  )
+                "
+                :lazy-load="true"
+                mode="widthFix"
+              ></image>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[2]">
+            <image
+              v-show="shouldShowContent(2)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/cbe3db0c55a871383f86e34b781b5d33.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[3]">
+            <image
+              v-show="shouldShowContent(3)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/8499c31b1ed10693debd6e3eba37a841.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[4]">
+            <image
+              v-show="shouldShowContent(4)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/23fc62e1cd91bc373dbf7eb9e741721e.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[5]">
+            <image
+              v-show="shouldShowContent(5)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/863382a549c2d4e029c93eba5d040e96.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[6]">
+            <image
+              v-show="shouldShowContent(6)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/7a6bbf6e4d9cd869b94502bf9025caf1.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[7]">
+            <image
+              v-show="shouldShowContent(7)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/6f865d358eb9faf565bb0e63dd252a94.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view class="content-layer" v-show="shouldShowContent(7)">
+              <image
+                class="layer-img3"
+                :class="{
+                  hidden: !animationStates[7],
+                  'fade-in': animationStates[7],
+                }"
+                :src="
+                  showImg(
+                    '/uploads/20250802/13d7d6ad68f7171d48ef271c699fa333.png'
+                  )
+                "
+                :lazy-load="true"
+                mode="widthFix"
+              ></image>
+              <image
+                class="layer-img4"
+                :class="{
+                  hidden: !animationStates[7],
+                  'fade-in': animationStates[7],
+                }"
+                :src="
+                  showImg(
+                    '/uploads/20250802/dd49237235965bc83759e54ec895ce34.png'
+                  )
+                "
+                :lazy-load="true"
+                mode="widthFix"
+              ></image>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[8]">
+            <image
+              v-show="shouldShowContent(8)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/c4ef978fd763848b01c5dec92c032bdb.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view class="content-layer" v-show="shouldShowContent(8)">
+              <image
+                class="layer-img5"
+                :class="{
+                  hidden: !animationStates[8],
+                  'fade-in': animationStates[8],
+                }"
+                :src="
+                  showImg(
+                    '/uploads/20250802/c3a669862cca14212b130d6eb90380d6.png'
+                  )
+                "
+                :lazy-load="true"
+                mode="widthFix"
+              ></image>
+              <image
+                class="layer-img6"
+                :class="{
+                  hidden: !animationStates[8],
+                  'fade-in': animationStates[8],
+                }"
+                :src="
+                  showImg(
+                    '/uploads/20250802/afbc088293603b16fa99b2c0c10ff275.png'
+                  )
+                "
+                :lazy-load="true"
+                mode="widthFix"
+              ></image>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[9]">
+            <image
+              v-show="shouldShowContent(9)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/4b2090a566500b5d633448d8607b464c.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template>
+            <image
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/703df90d52ea3461b0e9743f1ca2c942.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template>
+            <image
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250802/8448d3d99435377157000780017a9540.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template>
+            <view
+              class=""
+              style="width: 750rpx; height: 1400rpx; position: relative"
+            >
+              <image
+                class="bg-image"
+                :src="
+                  showImg(
+                    '/uploads/20250802/c6cec7ca05b3804d0d26b701b40ff9d6.png'
+                  )
+                "
+                :lazy-load="true"
+                mode="aspectFit"
+              ></image>
+              <view
+                class=""
+                style="
+                  position: absolute;
+                  bottom: 120rpx;
+                  width: 546rpx;
+                  left: 104rpx;
+                  z-index: 9;
+                "
+              >
+                <image
+                  @click="navigateToPage('first')"
+                  style="width: 260rpx; height: 50rpx"
+                  :src="
+                    showImg(
+                      '/uploads/20250802/22d4d2a0b442aa8269b3c393cc1bc0fd.png'
+                    )
+                  "
+                  :lazy-load="true"
+                  mode="aspectFill"
+                ></image>
+                <image
+                  @click="navigateToPage('second')"
+                  style="width: 260rpx; height: 50rpx; margin-left: 26rpx"
+                  :src="
+                    showImg(
+                      '/uploads/20250802/6579d29fbfc61c355bfee74775d9404f.png'
+                    )
+                  "
+                  :lazy-load="true"
+                  mode="aspectFill"
+                ></image>
+                <image
+                  @click="navigateToPage('third')"
+                  style="width: 260rpx; height: 50rpx; margin-top: 30rpx"
+                  :src="
+                    showImg(
+                      '/uploads/20250802/19946ac0a0c6bdeae627d0d3a6fb3dbc.png'
+                    )
+                  "
+                  :lazy-load="true"
+                  mode="aspectFill"
+                ></image>
+                <image
+                  @click="navigateToPage('fourth')"
+                  style="
+                    width: 260rpx;
+                    height: 50rpx;
+                    margin-left: 26rpx;
+                    margin-top: 30rpx;
+                  "
+                  :src="
+                    showImg(
+                      '/uploads/20250802/7e0ce35e13fa118deaf70240357faf14.png'
+                    )
+                  "
+                  :lazy-load="true"
+                  mode="aspectFill"
+                ></image>
+              </view>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+import TitleHeader from "@/components/TitleHeader.vue";
+export default {
+  components: {
+    TitleHeader,
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      loadedPages: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+        7: false,
+        8: false,
+        9: false,
+        10: false,
+      },
+      animationStates: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+        7: false,
+        8: false,
+        9: false,
+        10: false,
+      },
+      preloadBuffer: 1,
+      titleHeight: 0,
+    };
+  },
+  watch: {
+    currentIndex(newIndex) {
+      for (
+        let i = Math.max(0, newIndex - this.preloadBuffer);
+        i <= Math.min(9, newIndex + this.preloadBuffer);
+        i++
+      ) {
+        this.loadedPages[i] = true;
+      }
+    },
+  },
+  mounted() {
+    this.titleHeight = uni.getStorageSync("titleHeight");
+    for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 9); i++) {
+      this.loadedPages[i] = true;
+    }
+    setTimeout(() => {
+      this.animationStates[this.currentIndex] = true;
+    }, 50);
+  },
+  methods: {
+    goChapter() {
+      uni.navigateTo({
+        url: "/pig/chapter3/chapter3",
+      });
+    },
+    handleSwiperChange(e) {
+      const newIndex = e.detail.current;
+      this.currentIndex = newIndex;
+      this.animationStates[newIndex] = false;
+      setTimeout(() => {
+        this.animationStates[newIndex] = true;
+      }, 50);
+    },
+    shouldShowContent(index) {
+      return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+    },
+    goBack() {
+      uni.navigateTo({
+        url: "/taozi/home/home?targetIndex=5",
+      });
+    },
+    navigateToPage(pageName) {
+      uni.navigateTo({
+        url: `/pig/chapter4/${pageName}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.main-swiper {
+  width: 100%;
+  height: 100vh;
+}
+
+.page-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  background-color: #efefef;
+}
+
+.bg-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.layer-img1 {
+  width: 500rpx;
+  z-index: 2;
+  margin-right: 180rpx;
+  margin-top: 50rpx;
+}
+
+.layer-img2 {
+  z-index: 2;
+  position: absolute;
+  bottom: 18%;
+  left: 0;
+  width: 100%;
+  height: 350rpx;
+}
+
+.content-layer {
+  margin: 130rpx 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.layer-img3 {
+  width: 327rpx;
+  height: 270rpx;
+  z-index: 2;
+  position: absolute;
+  top: 114rpx;
+  left: 82rpx;
+}
+
+.layer-img2 {
+  width: 696rpx;
+  height: 302rpx;
+  z-index: 2;
+  position: absolute;
+  top: 200rpx;
+  left: 35rpx;
+}
+
+.layer-img4 {
+  z-index: 2;
+  width: 530rpx;
+  height: 409rpx;
+  bottom: 130rpx;
+  left: 91rpx;
+  position: absolute;
+}
+
+.layer-img5 {
+  z-index: 2;
+  position: absolute;
+  top: 151rpx;
+  left: 95rpx;
+  width: 382rpx;
+  height: 452rpx;
+}
+
+.layer-img6 {
+  z-index: 2;
+  position: absolute;
+  bottom: 163rpx;
+  left: 95rpx;
+  width: 261rpx;
+  height: 268rpx;
+}
+
+.back-btn {
+  position: absolute;
+  top: 50rpx;
+  left: 50rpx;
+  z-index: 2;
+  background-color: rgb(0 0 0 / 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.slide-in-from-left {
+  animation: slideInLeft 1.2s ease-out forwards;
+}
+
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.slide-in-from-right {
+  animation: slideInRight 1.2s ease-out forwards;
+}
+
+.blink {
+  animation: blink 1.5s infinite;
+}
+
+@keyframes slideInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0.3;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 1s ease-in forwards;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/pig/chapter4/first.vue b/pig/chapter4/first.vue
new file mode 100644
index 0000000..c7bd40d
--- /dev/null
+++ b/pig/chapter4/first.vue
@@ -0,0 +1,109 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+    <image
+      class="tag-image"
+      :src="showImg('/uploads/20250802/4855b66aeecba79f1f404a015c727955.png')"
+      mode="aspectFill"
+    ></image>
+    <image
+      style="
+        width: 361rpx;
+        position: absolute;
+        z-index: 2;
+        top: 355rpx;
+        left: 190rpx;
+      "
+      :src="showImg('/uploads/20250802/88de82efaf2c8f886b831a0766236ffa.png')"
+      mode="widthFix"
+    ></image>
+    <image
+      @click="toBuy"
+      style="
+        position: absolute;
+        bottom: 217rpx;
+        width: 456rpx;
+        left: 146rpx;
+        z-index: 9;
+      "
+      :src="showImg('/uploads/20250802/bc8c6d0f121669388d93ccf5494c7f47.png')"
+      mode="widthFix"
+    ></image>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    toBuy() {
+      uni.navigateTo({
+        url: "./secBuy?type=1",
+      });
+    },
+    goBack() {
+      uni.navigateBack();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
diff --git a/pig/chapter4/fourth.vue b/pig/chapter4/fourth.vue
new file mode 100644
index 0000000..c367f38
--- /dev/null
+++ b/pig/chapter4/fourth.vue
@@ -0,0 +1,109 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+    <image
+      class="tag-image"
+      :src="showImg('/uploads/20250802/7ae3b8496972e4786109ea94c8495458.png')"
+      mode="aspectFill"
+    ></image>
+    <image
+      style="
+        width: 361rpx;
+        position: absolute;
+        z-index: 2;
+        top: 355rpx;
+        left: 190rpx;
+      "
+      :src="showImg('/uploads/20250802/43e0745f7aa490c80dee88d6394ef35b.png')"
+      mode="widthFix"
+    ></image>
+    <image
+      @click="toBuy"
+      style="
+        position: absolute;
+        bottom: 217rpx;
+        width: 456rpx;
+        left: 146rpx;
+        z-index: 9;
+      "
+      :src="showImg('/uploads/20250802/a0c7c45de62ec0d5bd6163b30932e1e3.png')"
+      mode="widthFix"
+    ></image>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    toBuy() {
+      uni.navigateTo({
+        url: "./secBuy?type=4",
+      });
+    },
+    goBack() {
+      uni.navigateBack();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
diff --git a/pig/chapter4/secBuy.vue b/pig/chapter4/secBuy.vue
new file mode 100644
index 0000000..14d1762
--- /dev/null
+++ b/pig/chapter4/secBuy.vue
@@ -0,0 +1,155 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+    <image
+      v-if="type"
+      class="tag-image"
+      :src="showImg(imgMap[type].bg)"
+      mode="aspectFill"
+    ></image>
+
+    <image
+      v-if="type"
+      style="position: absolute; z-index: 9; bottom: 521rpx"
+      :style="{
+        width: imgMap[type].width,
+        left: imgMap[type].left,
+      }"
+      :src="showImg(imgMap[type].title)"
+      mode="widthFix"
+    ></image>
+    <image
+      style="
+        position: absolute;
+        z-index: 9;
+        left: 72rpx;
+        bottom: 178rpx;
+        width: 605rpx;
+        height: 66rpx;
+      "
+      :src="showImg('/uploads/20250802/1b853d1f8d147368ef9d0ba35df9e5c3.png')"
+      mode="aspectFill"
+    ></image>
+    <image
+      @click="goBackChange"
+      style="
+        position: absolute;
+        z-index: 9;
+        left: 72rpx;
+        bottom: 84rpx;
+        width: 605rpx;
+        height: 66rpx;
+      "
+      :src="showImg('/uploads/20250802/b458d05790345ec9ae9a3bea23495b46.png')"
+      mode="aspectFill"
+    ></image>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      type: 1,
+      imgMap: {
+        1: {
+          bg: "/uploads/20250802/7ff759d15338ba690573602be45a72d2.png",
+          title: "/uploads/20250802/152dc5b77ad0af50f92c4cb0dbd7aef5.png",
+          width: "467rpx",
+          left: "140rpx",
+        },
+        2: {
+          bg: "/uploads/20250802/98cf261fb1e09be491e084a67b939dbe.png",
+          title: "/uploads/20250802/798a5053842969643caee2f482ce6c09.png",
+          width: "511rpx",
+          left: "119rpx",
+        },
+        3: {
+          bg: "/uploads/20250802/b04ffee53c537e35aa5f7ad98d21b297.png",
+          title: "/uploads/20250802/0a90c67dc32bf30caaca5e85039df174.png",
+          width: "441rpx",
+          left: "154rpx",
+        },
+        4: {
+          bg: "/uploads/20250802/b7ce92c7d9d7d1349fa82ac81625d2cf.png",
+          title: "/uploads/20250802/e66ab85e23d2d9a03efc5d9cdd0735ba.png",
+          width: "597rpx",
+          left: "77rpx",
+        },
+      },
+    };
+  },
+  onLoad(options) {
+    this.type = Number(options.type);
+    console.log(this.imgMap[this.type], "---");
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack();
+    },
+    goBackChange() {
+      uni.navigateBack({
+        delta: 2,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
diff --git a/pig/chapter4/second.vue b/pig/chapter4/second.vue
new file mode 100644
index 0000000..54a1abb
--- /dev/null
+++ b/pig/chapter4/second.vue
@@ -0,0 +1,109 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+    <image
+      class="tag-image"
+      :src="showImg('/uploads/20250802/7f125fdb8a2c2ab9c881d6f8fc6f2041.png')"
+      mode="aspectFill"
+    ></image>
+    <image
+      style="
+        width: 361rpx;
+        position: absolute;
+        z-index: 2;
+        top: 355rpx;
+        left: 190rpx;
+      "
+      :src="showImg('/uploads/20250802/928796306484f1fa101ec113f7e94453.png')"
+      mode="widthFix"
+    ></image>
+    <image
+      @click="toBuy"
+      style="
+        position: absolute;
+        bottom: 217rpx;
+        width: 456rpx;
+        left: 146rpx;
+        z-index: 9;
+      "
+      :src="showImg('/uploads/20250802/92779fd82f7c0c0358ca453fd3071e7b.png')"
+      mode="widthFix"
+    ></image>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    toBuy() {
+      uni.navigateTo({
+        url: "./secBuy?type=2",
+      });
+    },
+    goBack() {
+      uni.navigateBack();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
diff --git a/pig/chapter4/third.vue b/pig/chapter4/third.vue
new file mode 100644
index 0000000..61effa3
--- /dev/null
+++ b/pig/chapter4/third.vue
@@ -0,0 +1,109 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <view @click="goBack" class="back-btn">
+        <image
+          class="back-icon"
+          src="https://static.ticket.sz-trip.com/epicSoul/taozi/back.png"
+          mode="aspectFill"
+        ></image>
+      </view>
+    </view>
+    <image
+      class="tag-image"
+      :src="showImg('/uploads/20250802/4ebbbcdd49f7ee5add822d22e4071b1c.png')"
+      mode="aspectFill"
+    ></image>
+    <image
+      style="
+        width: 561rpx;
+        position: absolute;
+        z-index: 2;
+        bottom: 463rpx;
+        left: 97rpx;
+      "
+      :src="showImg('/uploads/20250802/74e49ad04e83921783fcc2072677da88.png')"
+      mode="widthFix"
+    ></image>
+    <image
+      @click="toBuy"
+      style="
+        position: absolute;
+        bottom: 217rpx;
+        width: 456rpx;
+        left: 146rpx;
+        z-index: 9;
+      "
+      :src="showImg('/uploads/20250802/bc5905a9ddebeb3833429c95b9b0d967.png')"
+      mode="widthFix"
+    ></image>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    toBuy() {
+      uni.navigateTo({
+        url: "./secBuy?type=3",
+      });
+    },
+    goBack() {
+      uni.navigateBack();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 50rpx 30rpx 30rpx;
+  position: relative;
+}
+
+.back-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.tag-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+}
+
+.description {
+  text-align: center;
+}
+
+.desc-text {
+  font-size: 36rpx;
+  color: white;
+  line-height: 1.6;
+}
+</style>
diff --git a/pig/home/home.vue b/pig/home/home.vue
new file mode 100644
index 0000000..c8043a4
--- /dev/null
+++ b/pig/home/home.vue
@@ -0,0 +1,1005 @@
+<template>
+  <view>
+    <swiper
+      class="main-swiper"
+      :vertical="true"
+      :current="currentIndex"
+      @change="handleSwiperChange"
+      :duration="300"
+      :style="{ height: `100vh` }"
+    >
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[0]">
+            <image
+              v-show="shouldShowContent(0)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250801/fe2e7779e0c438ea36308390cba55ef1.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view v-show="shouldShowContent(0)" class="content-layer">
+              <image
+                class="layer-img"
+                :class="{
+                  'blur-to-clear': animationStates[0],
+                  hidden: !animationStates[0],
+                }"
+                :src="
+                  showImg(
+                    '/uploads/20250801/4059157496ea8a1ce3ef9610a63858a7.png'
+                  )
+                "
+                :lazy-load="true"
+                mode="aspectFit"
+              >
+              </image>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[1]">
+            <image
+              v-show="shouldShowContent(1)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250801/9bdda955f86ad07b745c3095431ca38e.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <template v-if="loadedPages[2]">
+            <image
+              v-show="shouldShowContent(2)"
+              style="
+                position: absolute;
+                width: 32.67%;
+                height: 4.2%;
+                top: 33.73%;
+                left: 16%;
+                z-index: 9999;
+              "
+              :src="
+                showImg(
+                  '/uploads/20250801/01f02fc938da66f4da5019da6f98a664.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <image
+              v-show="shouldShowContent(2)"
+              class="bg-image"
+              :src="
+                showImg(
+                  '/uploads/20250801/d4efcdff86a15f7feb28d3662ee055ca.png'
+                )
+              "
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <template v-if="loadedPages[3]">
+          <view class="loadedPages-three">
+            <view
+              class=""
+              style="width: 750rpx; height: 1400rpx; position: relative"
+            >
+              <image
+                style="width: 100%; height: 100%"
+                :src="
+                  showImg(
+                    '/uploads/20250802/95daa339dce3ccd25acfc1e0fa031a01.png'
+                  )
+                "
+                mode="widthFix"
+              ></image>
+              <view
+                class="loadedPages-three-content"
+                style="position: absolute; top: 375rpx; left: 100rpx"
+              >
+                <image
+                  style="width: 286rpx"
+                  :src="
+                    showImg(
+                      '/uploads/20250802/4eaea258b31e3d7a62a9b2511465261f.png'
+                    )
+                  "
+                  mode="widthFix"
+                  @click="showPopupImage"
+                ></image>
+              </view>
+            </view>
+          </view>
+        </template>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <image
+            style="width: 100%; height: 100%"
+            :src="
+              showImg('/uploads/20250802/2e287bc4a678a5b47565556d23c31f4f.png')
+            "
+            mode="aspectFill"
+          ></image>
+          <image
+            @click="goChapter"
+            style="
+              width: 137rpx;
+              height: 108rpx;
+              position: absolute;
+              bottom: 125rpx;
+              left: 307rpx;
+            "
+            :src="
+              showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png')
+            "
+            mode="aspectFill"
+          ></image>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <image
+            style="width: 100%; height: 100%"
+            :src="
+              showImg('/uploads/20250802/dee49f1aa510d85c368aafc889e24cc0.png')
+            "
+            mode="aspectFill"
+          ></image>
+          <image
+            @click="goChapter"
+            style="
+              width: 137rpx;
+              height: 108rpx;
+              position: absolute;
+              bottom: 125rpx;
+              left: 307rpx;
+            "
+            :src="
+              showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png')
+            "
+            mode="aspectFill"
+          ></image>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <image
+            style="width: 100%; height: 100%"
+            :src="
+              showImg('/uploads/20250802/c25deec8a6e4f84c8229718312c6ff02.png')
+            "
+            mode="aspectFill"
+          ></image>
+          <image
+            @click="goChapter"
+            style="
+              width: 137rpx;
+              height: 108rpx;
+              position: absolute;
+              bottom: 125rpx;
+              left: 307rpx;
+            "
+            :src="
+              showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png')
+            "
+            mode="aspectFill"
+          ></image>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <image
+            style="width: 100%; height: 100%"
+            :src="
+              showImg('/uploads/20250802/c21b01fea9610f8069a768f03a173b66.png')
+            "
+            mode="aspectFill"
+          ></image>
+          <image
+            @click="goChapter"
+            style="
+              width: 137rpx;
+              height: 108rpx;
+              position: absolute;
+              bottom: 125rpx;
+              left: 307rpx;
+            "
+            :src="
+              showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png')
+            "
+            mode="aspectFill"
+          ></image>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="page-container">
+          <image
+            style="width: 100%; height: 100%"
+            :src="
+              showImg('/uploads/20250802/bb670192ddcc2bf81aad4eb030ca6cbf.png')
+            "
+            mode="aspectFill"
+          ></image>
+        </view>
+      </swiper-item>
+
+      <swiper-item>
+        <view class="page-container home-page">
+          <template>
+            <image
+              class="bg-image"
+              src="https://static.ticket.sz-trip.com/epicSoul/footers.png"
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <image
+              class="qrCode-image"
+              src="https://static.ticket.sz-trip.com/epicSoul/qrCode.png"
+              :lazy-load="true"
+              mode="widthFix"
+              :show-menu-by-longpress="true"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+    </swiper>
+    <view class="overlay" v-if="showMenu" @click="closeMenu"></view>
+    <view class="fixed-nav" :class="{ hidden: showMenu }" @click="showNavMenu">
+      <image
+        class="nav-icon"
+        :class="{ rotated: iconRotated, 'bounce-back': iconBounceBack }"
+        src="https://static.ticket.sz-trip.com/epicSoul/taozi/nav-icon.png"
+        mode="aspectFill"
+      ></image>
+    </view>
+    <view class="nav-menu" :class="{ show: showMenu }">
+      <view
+        class="nav-item"
+        :class="{ 'item-active': isItemActive(item) }"
+        v-for="item in menuItems"
+        :key="item.targetIndex"
+        @click="() => jumpToPage(item.targetIndex)"
+      >
+        <view v-if="item.text.includes('#Chapter')" class="chapter-text">
+          <text class="chapter-title">#Chapter</text>
+          <text :class="{ active: isItemActive(item) }" class="chapter-number">
+            {{ item.text.replace("#Chapter", "") }}
+          </text>
+        </view>
+        <text v-else :class="{ active: isItemActive(item) }">{{
+          item.text
+        }}</text>
+      </view>
+    </view>
+    <!-- <BuyPeaches /> -->
+    <!-- <BackgroundMusic /> -->
+    <MusicControl />
+
+    <!-- 图片弹窗 -->
+    <view
+      class="image-popup-overlay"
+      v-if="showImagePopup"
+      @click="hidePopupImage"
+    >
+      <view class="image-popup-container" @click.stop>
+        <image
+          class="popup-image"
+          :src="
+            showImg('/uploads/20250802/a2245bbeba155410fd765439a18774f7.png')
+          "
+          mode="widthFix"
+        ></image>
+        <image
+          class="popup-image"
+          :src="
+            showImg('/uploads/20250802/6a740ec7fc10dd0f6ddcc65faca3b3c8.png')
+          "
+          mode="widthFix"
+        ></image>
+        <image
+          class="popup-image"
+          :src="
+            showImg('/uploads/20250802/4e89bbb52de311cfae7ef1b59ee2f2c8.png')
+          "
+          mode="widthFix"
+        ></image>
+        <image
+          class="popup-image"
+          :src="
+            showImg('/uploads/20250802/76b84f3dd91bfebaec35aadc086410b8.png')
+          "
+          mode="widthFix"
+        ></image>
+        <view class="close-btn" @click="hidePopupImage">×</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import BuyPeaches from "@/components/BuyPeaches.vue";
+import messagePop from "@/components/messagePop.vue";
+// import BackgroundMusic from '@/components/BackgroundMusic.vue';
+import messageBoard from "@/components/messageBoard.vue";
+import MusicControl from "@/components/MusicControl.vue";
+import TitleHeader from "@/components/TitleHeader.vue";
+
+export default {
+  components: {
+    BuyPeaches,
+    messagePop,
+    // BackgroundMusic,
+    messageBoard,
+    MusicControl,
+    TitleHeader,
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      loadedPages: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+        7: false,
+        8: false,
+        9: false,
+        10: false,
+      },
+      animationStates: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+        7: false,
+        8: false,
+        9: false,
+      },
+      preloadBuffer: 1,
+      isFirstSwipe: true,
+      showMenu: false,
+      iconRotated: false,
+      iconBounceBack: false,
+      showImagePopup: false,
+      menuItems: [
+        {
+          text: "Intro序曲",
+          targetIndex: 0,
+        },
+        {
+          text: "#Chapter 壹",
+          targetIndex: 4,
+        },
+        {
+          text: "#Chapter 贰",
+          targetIndex: 5,
+        },
+        {
+          text: "#Chapter 叁",
+          targetIndex: 6,
+        },
+        {
+          text: "#Chapter 肆",
+          targetIndex: 7,
+        },
+        // {
+        //   text: "GuestBook",
+        //   targetIndex: 10,
+        // },
+      ],
+      chapterPaths: {
+        4: "/pig/chapter1/chapter1",
+        5: "/pig/chapter2/chapter2",
+        6: "/pig/chapter3/chapter3",
+        7: "/pig/chapter4/chapter4",
+      },
+      titleHeight: 0,
+    };
+  },
+  computed: {
+    shouldShowContent() {
+      return (index) => {
+        return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+      };
+    },
+  },
+  watch: {
+    currentIndex(newIndex) {
+      for (
+        let i = Math.max(0, newIndex - this.preloadBuffer);
+        i <= Math.min(10, newIndex + this.preloadBuffer);
+        i++
+      ) {
+        this.loadedPages[i] = true;
+      }
+    },
+  },
+  methods: {
+    handleSwiperChange(e) {
+      const newIndex = e.detail.current;
+      this.currentIndex = newIndex;
+      this.animationStates[newIndex] = false;
+      setTimeout(() => {
+        this.animationStates[newIndex] = true;
+      }, 50);
+      return;
+      if (this.isFirstSwipe && newIndex > 0) {
+        this.isFirstSwipe = false;
+        uni.$emit("playBackgroundMusic");
+      }
+    },
+    goChapter() {
+      const path = this.chapterPaths[this.currentIndex];
+      uni.navigateTo({
+        url: path,
+      });
+    },
+    showNavMenu() {
+      this.iconRotated = true;
+      setTimeout(() => {
+        this.showMenu = true;
+      }, 300);
+    },
+    closeMenu() {
+      this.showMenu = false;
+      setTimeout(() => {
+        this.iconBounceBack = true;
+        this.iconRotated = false;
+        setTimeout(() => {
+          this.iconBounceBack = false;
+        }, 500);
+      }, 300);
+    },
+    jumpToPage(idx) {
+      const targetIndex = idx;
+      this.currentIndex = targetIndex;
+      this.closeMenu();
+      this.animationStates[targetIndex] = false;
+      setTimeout(() => {
+        this.animationStates[targetIndex] = true;
+      }, 50);
+    },
+    isItemActive(item) {
+      return this.currentIndex === item.targetIndex;
+    },
+    showPopupImage() {
+      this.showImagePopup = true;
+    },
+    hidePopupImage() {
+      this.showImagePopup = false;
+    },
+  },
+  mounted() {
+    this.titleHeight = uni.getStorageSync("titleHeight");
+    console.log(this.titleHeight);
+    const app = getApp();
+    app.updateMusicSrc(
+      "https://static.ticket.sz-trip.com/epicSoul/taozi/bg.m4a"
+    );
+    app.initBackgroundMusic(); // 初始化背景音乐
+    uni.$bgMusic.play(); // 播放音乐
+    for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 6); i++) {
+      this.loadedPages[i] = true;
+    }
+    for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 10); i++) {
+      this.loadedPages[i] = true;
+    }
+    setTimeout(() => {
+      this.animationStates[this.currentIndex] = true;
+    }, 50);
+  },
+  onUnload() {
+    uni.$bgMusic.pause(); // 停止音乐
+  },
+  onLoad(options) {
+    if (options && options.targetIndex) {
+      const targetIndex = parseInt(options.targetIndex);
+      this.currentIndex = targetIndex;
+      for (
+        let i = Math.max(0, targetIndex - this.preloadBuffer);
+        i <= Math.min(10, targetIndex + this.preloadBuffer);
+        i++
+      ) {
+        this.loadedPages[i] = true;
+      }
+      this.animationStates[targetIndex] = false;
+      setTimeout(() => {
+        this.animationStates[targetIndex] = true;
+      }, 50);
+    }
+  },
+  // #ifdef MP-WEIXIN
+  onShareAppMessage() {
+    return {
+      title: "三个桃子·时间里的约定｜「Epic Soul」阅读体 issue01",
+      mpId: "wx8954209bb3ad489e",
+      path: "/taozi/home/home",
+      imageUrl:
+        "https://static.ticket.sz-trip.com/epicSoul/taozi/home/taoziShare.png",
+    };
+  },
+  onShareTimeline() {
+    return {
+      title: "三个桃子·时间里的约定｜「Epic Soul」阅读体 issue01",
+      query: "",
+      imageUrl:
+        "https://static.ticket.sz-trip.com/epicSoul/taozi/home/taoziShare.png",
+    };
+  },
+  // #endif
+};
+</script>
+
+<style lang="scss" scoped>
+@font-face {
+  font-family: "SourceHanSerif-Regular";
+  src: url(/static/fonts/SourceHanSerifSC-Regular.otf);
+}
+
+.main-swiper {
+  width: 100%;
+  height: 100vh;
+}
+
+.page-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.loadedPages-three {
+  height: 100%;
+  position: relative;
+  background: #efefef;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.loadedPages-three-content {
+  height: 100%;
+
+  .loadedPages-three-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 30rpx;
+
+    .txt {
+      font-size: 24rpx;
+      color: #333;
+      font-family: SourceHanSerif-Regular;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      text {
+        display: block;
+      }
+    }
+
+    .txt:first-child {
+      margin-left: 30rpx;
+    }
+
+    .txt:last-child {
+      margin-right: 30rpx;
+    }
+  }
+
+  .loadedPages-three-center {
+    position: relative;
+
+    .desc {
+      display: flex;
+      flex-direction: column;
+      font-family: SourceHanSerif-Regular;
+      font-size: 90rpx;
+      color: #ec4899;
+
+      text {
+        display: block;
+      }
+    }
+
+    .en-desc {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translate(-25%, -50%);
+      font-size: 24rpx;
+      font-style: italic;
+      color: #4b5563;
+
+      text {
+        display: block;
+      }
+    }
+  }
+
+  .loadedPages-three-bottom {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 30rpx;
+
+    .bottom-img {
+      width: 400rpx;
+      height: 120rpx;
+    }
+
+    .bottom-tit {
+      font-size: 38rpx;
+    }
+
+    .bottom-txt {
+      font-size: 24rpx;
+      font-style: italic;
+      color: #4b5563;
+    }
+  }
+}
+
+.bg-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.content-layer {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.content-layer2 {
+  z-index: 2;
+  position: absolute;
+  bottom: 5%;
+  right: 5%;
+}
+
+.layer-img {
+  width: 541rpx;
+  height: 100%;
+}
+
+.arrow-down {
+  width: 100rpx;
+  height: 40rpx;
+  animation: bounce 1.5s infinite;
+}
+
+.layer-icon {
+  width: 100rpx;
+  height: 100rpx;
+  animation: bounce 1.5s infinite;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 10;
+}
+
+.fixed-nav {
+  width: 80rpx;
+  height: 80rpx;
+  background-color: rgb(0 0 0 / 0.7);
+  border-radius: 10rpx 0 0 10rpx;
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.fixed-nav.hidden {
+  transform: translateX(100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.nav-icon {
+  width: 35rpx;
+  height: 35rpx;
+  transition: transform 0.3s ease;
+}
+
+.nav-icon.rotated {
+  transform: rotate(180deg);
+}
+
+.nav-icon.bounce-back {
+  animation: bounceRotation 0.5s ease;
+}
+
+@keyframes bounceRotation {
+  0% {
+    transform: rotate(180deg);
+  }
+
+  50% {
+    transform: rotate(-20deg);
+  }
+
+  75% {
+    transform: rotate(10deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.nav-menu {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translate(100%, -50%);
+  z-index: 11;
+  background-color: rgb(0 0 0 / 0.5);
+  border-radius: 16rpx 0 0 16rpx;
+  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.nav-menu.show {
+  transform: translate(0, -50%);
+}
+
+.nav-item {
+  padding: 20rpx;
+  text-align: center;
+
+  text {
+    color: #fff;
+    opacity: 0.7;
+    font-size: 28rpx;
+  }
+}
+
+.item-active {
+  background-color: rgba(0, 0, 0, 0.718);
+}
+
+.nav-item .active {
+  color: #fff;
+  opacity: 1;
+}
+
+.chapter-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.3;
+}
+
+.chapter-title {
+  color: #fff;
+  opacity: 0.7;
+  font-size: 24rpx;
+}
+
+.chapter-number {
+  color: #fff;
+  opacity: 0.7;
+  font-size: 28rpx;
+  margin-top: 8rpx;
+}
+
+.item-active .chapter-title,
+.item-active .chapter-number.active {
+  opacity: 1;
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-20rpx);
+  }
+
+  60% {
+    transform: translateY(-10rpx);
+  }
+}
+
+.blur-to-clear {
+  animation: blurToClear 1.5s ease-out forwards;
+}
+
+@keyframes blurToClear {
+  0% {
+    filter: blur(10px);
+    opacity: 0.3;
+  }
+
+  100% {
+    filter: blur(0);
+    opacity: 1;
+  }
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.bounce-in {
+  animation: bounceIn 1s ease forwards;
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3) translateY(100px);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.05) translateY(-10px);
+  }
+
+  70% {
+    transform: scale(0.9) translateY(5px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.fade-slide-up {
+  animation: fadeSlideUp 1s ease-out forwards;
+}
+
+@keyframes fadeSlideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.chapterCover-btn {
+  position: absolute;
+  left: 50%;
+  bottom: 10%;
+  transform: translate(-50%, -50%);
+  width: 300rpx;
+  height: 100rpx;
+  z-index: 2;
+}
+
+.qrcode-txt {
+  width: 30vw;
+  z-index: 2;
+  position: fixed;
+  left: 0;
+  right: 0;
+  margin: 100rpx auto 0;
+}
+.qrcode-txts {
+  width: 28vw;
+  z-index: 2;
+  position: fixed;
+  left: 0;
+  right: 0;
+  margin: 335rpx auto 0;
+}
+
+.message-board {
+  width: 100%;
+}
+
+.qrCode-image {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 192rpx;
+  margin: 0 auto;
+  z-index: 2;
+  width: 30vw;
+}
+
+.image-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-popup-container {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+}
+
+.popup-image {
+  width: 750rpx;
+  height: 654rpx;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.close-btn {
+  position: absolute;
+  top: -20rpx;
+  right: -20rpx;
+  width: 60rpx;
+  height: 60rpx;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  color: #333;
+  cursor: pointer;
+}
+</style>
diff --git a/uni_modules/uni-transition/components/uni-transition/createAnimation.js b/uni_modules/uni-transition/components/uni-transition/createAnimation.js
index 5f54365..6935b5b 100644
--- a/uni_modules/uni-transition/components/uni-transition/createAnimation.js
+++ b/uni_modules/uni-transition/components/uni-transition/createAnimation.js
@@ -122,7 +122,29 @@ animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
 })
 
 export function createAnimation(option, _this) {
-	if(!_this) return
+	if(!_this) {
+		console.warn('uni-transition: _this parameter is undefined, returning empty animation object')
+		// 创建一个完整的空动画对象，确保所有方法都返回自身以支持链式调用
+		const emptyAnimation = {}
+		// 添加step和run方法
+		emptyAnimation.step = function(config = {}) {
+			return emptyAnimation
+		}
+		emptyAnimation.run = function(fn) {
+			typeof fn === 'function' && fn()
+			return emptyAnimation
+		}
+		// 添加所有动画类型方法
+		const allAnimateTypes = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
+			'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
+			'translateZ', 'opacity', 'backgroundColor', 'width', 'height', 'left', 'right', 'top', 'bottom']
+		allAnimateTypes.forEach(type => {
+			emptyAnimation[type] = function(...args) {
+				return emptyAnimation
+			}
+		})
+		return emptyAnimation
+	}
 	clearTimeout(_this.timer)
 	return new MPAnimation(option, _this)
 }
diff --git a/uni_modules/uni-transition/components/uni-transition/uni-transition.vue b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
index 0d739bd..7c29a23 100644
--- a/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
+++ b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
@@ -127,7 +127,7 @@ export default {
 		 * @param {Object} obj
 		 */
 		step(obj, config = {}) {
-			if (!this.animation) return
+			if (!this.animation || typeof this.animation.step !== 'function') return this
 			for (let i in obj) {
 				try {
 					if(typeof obj[i] === 'object'){
@@ -146,7 +146,7 @@ export default {
 		 *  ref 触发 执行动画
 		 */
 		run(fn) {
-			if (!this.animation) return
+			if (!this.animation || typeof this.animation.run !== 'function') return
 			this.animation.run(fn)
 		},
 		// 开始过度动画
@@ -163,9 +163,20 @@ export default {
 			this.$nextTick(() => {
 				// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
 				this.timer = setTimeout(() => {
-					this.animation = createAnimation(this.config, this)
-					this.tranfromInit(false).step()
-					this.animation.run()
+					try {
+						this.animation = createAnimation(this.config, this)
+						if (this.animation && typeof this.animation.step === 'function' && typeof this.animation.run === 'function') {
+							const result = this.tranfromInit(false)
+							if (result && typeof result.step === 'function') {
+								result.step()
+								if (typeof this.animation.run === 'function') {
+									this.animation.run()
+								}
+							}
+						}
+					} catch (error) {
+						console.error('uni-transition animation error:', error)
+					}
 					this.$emit('change', {
 						detail: this.isShow
 					})
@@ -174,20 +185,35 @@ export default {
 		},
 		// 关闭过度动画
 		close(type) {
-			if (!this.animation) return
-			this.tranfromInit(true)
-				.step()
-				.run(() => {
-					this.isShow = false
-					this.animationData = null
-					this.animation = null
-					let { opacity, transform } = this.styleInit(false)
-					this.opacity = opacity || 1
-					this.transform = transform
-					this.$emit('change', {
-						detail: this.isShow
-					})
+			if (!this.animation || typeof this.animation.step !== 'function' || typeof this.animation.run !== 'function') return
+			try {
+				const result = this.tranfromInit(true)
+				if (result && typeof result.step === 'function') {
+					result.step()
+					if (typeof result.run === 'function') {
+						result.run(() => {
+							this.isShow = false
+							this.animationData = null
+							this.animation = null
+							let { opacity, transform } = this.styleInit(false)
+							this.opacity = opacity || 1
+							this.transform = transform
+							this.$emit('change', {
+								detail: this.isShow
+							})
+						})
+					}
+				}
+			} catch (error) {
+				console.error('uni-transition close animation error:', error)
+				// 发生错误时直接关闭
+				this.isShow = false
+				this.animationData = null
+				this.animation = null
+				this.$emit('change', {
+					detail: this.isShow
 				})
+			}
 		},
 		// 处理动画开始前的默认样式
 		styleInit(type) {
@@ -212,6 +238,10 @@ export default {
 		},
 		// 处理内置组合动画
 		tranfromInit(type) {
+			if (!this.animation) {
+				console.warn('uni-transition: animation object is not initialized')
+				return this.animation
+			}
 			let buildTranfrom = (type, mode) => {
 				let aniNum = null
 				if (mode === 'fade') {
@@ -231,7 +261,10 @@ export default {
 						aniNum = type ? '100%' : '0'
 					}
 				}
-				this.animation[this.animationMode()[mode]](aniNum)
+				const animationMethod = this.animationMode()[mode]
+				if (this.animation && typeof this.animation[animationMethod] === 'function') {
+					this.animation[animationMethod](aniNum)
+				}
 			}
 			if (typeof this.modeClass === 'string') {
 				buildTranfrom(type, this.modeClass)