jiazhipeng
/
EpicSoul
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat pig

dev_xrcc
1054425342@qq.com 3 months ago
parent
55e376020f
commit
6ad2894823
19 changed files with 4472 additions and 415 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 137
      pages.json
  2. 330
      pig/chapter1/chapter1.vue
  3. 369
      pig/chapter2/chapter2.vue
  4. 83
      pig/chapter3/art.vue
  5. 84
      pig/chapter3/brave.vue
  6. 426
      pig/chapter3/chapter3.vue
  7. 83
      pig/chapter3/humble.vue
  8. 84
      pig/chapter3/sacred.vue
  9. 83
      pig/chapter3/smart.vue
  10. 83
      pig/chapter3/stupid.vue
  11. 644
      pig/chapter4/chapter4.vue
  12. 109
      pig/chapter4/first.vue
  13. 109
      pig/chapter4/fourth.vue
  14. 155
      pig/chapter4/secBuy.vue
  15. 109
      pig/chapter4/second.vue
  16. 109
      pig/chapter4/third.vue
  17. 1005
      pig/home/home.vue
  18. 24
      uni_modules/uni-transition/components/uni-transition/createAnimation.js
  19. 49
      uni_modules/uni-transition/components/uni-transition/uni-transition.vue

137
pages.json
View File

@ -363,6 +363,143 @@
} }
} }
] ]
},
{
"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": { "tabBar": {

330
pig/chapter1/chapter1.vue
View File

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

369
pig/chapter2/chapter2.vue
View File

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

83
pig/chapter3/art.vue
View File

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

84
pig/chapter3/brave.vue
View File

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

426
pig/chapter3/chapter3.vue
View File

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

83
pig/chapter3/humble.vue
View File

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

84
pig/chapter3/sacred.vue
View File

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

83
pig/chapter3/smart.vue
View File

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

83
pig/chapter3/stupid.vue
View File

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

644
pig/chapter4/chapter4.vue
View File

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

109
pig/chapter4/first.vue
View File

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

109
pig/chapter4/fourth.vue
View File

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

155
pig/chapter4/secBuy.vue
View File

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

109
pig/chapter4/second.vue
View File

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

109
pig/chapter4/third.vue
View File

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

1005
pig/home/home.vue
View File

File diff suppressed because it is too large

24
uni_modules/uni-transition/components/uni-transition/createAnimation.js
View File

@ -122,7 +122,29 @@ animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
}) })
export function createAnimation(option, _this) { 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) clearTimeout(_this.timer)
return new MPAnimation(option, _this) return new MPAnimation(option, _this)
} }

49
uni_modules/uni-transition/components/uni-transition/uni-transition.vue
View File

@ -127,7 +127,7 @@ export default {
* @param {Object} obj * @param {Object} obj
*/ */
step(obj, config = {}) { step(obj, config = {}) {
if (!this.animation) return if (!this.animation || typeof this.animation.step !== 'function') return this
for (let i in obj) { for (let i in obj) {
try { try {
if(typeof obj[i] === 'object'){ if(typeof obj[i] === 'object'){
@ -146,7 +146,7 @@ export default {
* ref 触发 执行动画 * ref 触发 执行动画
*/ */
run(fn) { run(fn) {
if (!this.animation) return if (!this.animation || typeof this.animation.run !== 'function') return
this.animation.run(fn) this.animation.run(fn)
}, },
// 开始过度动画 // 开始过度动画
@ -163,9 +163,20 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器 // TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
try {
this.animation = createAnimation(this.config, this) this.animation = createAnimation(this.config, this)
this.tranfromInit(false).step() 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() this.animation.run()
}
}
}
} catch (error) {
console.error('uni-transition animation error:', error)
}
this.$emit('change', { this.$emit('change', {
detail: this.isShow detail: this.isShow
}) })
@ -174,10 +185,13 @@ export default {
}, },
// 关闭过度动画 // 关闭过度动画
close(type) { close(type) {
if (!this.animation) return if (!this.animation || typeof this.animation.step !== 'function' || typeof this.animation.run !== 'function') return
this.tranfromInit(true) try {
.step() const result = this.tranfromInit(true)
.run(() => { if (result && typeof result.step === 'function') {
result.step()
if (typeof result.run === 'function') {
result.run(() => {
this.isShow = false this.isShow = false
this.animationData = null this.animationData = null
this.animation = null this.animation = null
@ -188,6 +202,18 @@ export default {
detail: this.isShow 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) { styleInit(type) {
@ -212,6 +238,10 @@ export default {
}, },
// 处理内置组合动画 // 处理内置组合动画
tranfromInit(type) { tranfromInit(type) {
if (!this.animation) {
console.warn('uni-transition: animation object is not initialized')
return this.animation
}
let buildTranfrom = (type, mode) => { let buildTranfrom = (type, mode) => {
let aniNum = null let aniNum = null
if (mode === 'fade') { if (mode === 'fade') {
@ -231,7 +261,10 @@ export default {
aniNum = type ? '100%' : '0' 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') { if (typeof this.modeClass === 'string') {
buildTranfrom(type, this.modeClass) buildTranfrom(type, this.modeClass)

Write Preview
Loading…
Cancel
Save