feat

src/components/IFrame.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="iframe-wrapper">
     <img class="goback abs" src="/images/goback.png" alt="">
-    <iframe src="https://m2.nbs.cn/article/564333.html?id=564333&mid=1" frameborder="0"></iframe>
+    <iframe src="https://mp.weixin.qq.com/s/9d2gPLtuOxs0pKmwvJtu8A" frameborder="0"></iframe>
   </div>
 </template>
 

src/pages/index.vue

@@ -12,6 +12,8 @@
         <Pg3 class="container" />
       </div>
     </div>
+
+    <!-- <IFrame /> -->
   </div>
 </template>
 
@@ -23,6 +25,7 @@ import Pg1 from './pg1/index.vue'
 import Pg2 from './pg2/index.vue'
 import Pg3 from './pg3/index.vue'
 // import parallaxing from '@/utils/parallaxing.js'
+// import IFrame from '@/components/IFrame.vue'
 
 const { play, pause } = useModel('audio');
 

src/pages/pg1/P1.vue

@@ -6,16 +6,14 @@
       </CircleImg>
     </div>
     <div class="content-right txt">
-      <div :class="{pulsatebck:animate}">
-        <p
-          class="animate__animated animate__fadeInRight"
-          style="animation-delay: 100ms"
-        >
-          2014年至今 <br />
-          一朵紫色的小花 <br />
-          在全球<strong>14个国家</strong>被点亮
-        </p>
-      </div>
+      <p
+        class="animate__animated animate__fadeInRight"
+        style="animation-delay: 100ms"
+      >
+        2014年至今 <br />
+        一朵紫色的小花 <br />
+        在全球<strong :class="{pulsatebck:animate}" style="display: inline-block;">14个国家</strong>被点亮
+      </p>
     </div>
   </div>
 </template>

src/pages/pg1/P2.vue

@@ -9,13 +9,11 @@
       </CircleImg>
     </div>
     <div class="content-left txt">    
-      <div :class="{pulsatebck:animate}">
-        <p class="animate__animated animate__fadeInRight" style="text-align: right; animation-delay: 100ms">
-        <strong>近20万枚</strong> <br>
+      <p class="animate__animated animate__fadeInRight" style="text-align: right; animation-delay: 100ms">
+        <strong :class="{pulsatebck:animate}" style="display: inline-block;">近20万枚</strong> <br>
         紫金草徽章 <br>
         佩戴在了人们的心口
       </p>
-      </div>  
     
     </div>
   </div>

src/pages/pg1/P3.vue

@@ -6,12 +6,10 @@
       </CircleImg>
     </div>
     <div class="content-right txt">
-      <div :class="{pulsatebck:animate}">
-        <p class="animate__animated animate__fadeInLeft">
-          在<strong>2亿人</strong>心中 <br />
-          和平愿景被播撒
-        </p>
-      </div>
+      <p class="animate__animated animate__fadeInLeft">
+        在<strong :class="{pulsatebck:animate}" style="display: inline-block;">2亿人</strong>心中 <br />
+        和平愿景被播撒
+      </p>
     </div>
   </div>
 </template>

src/pages/pg1/index.vue

@@ -116,47 +116,16 @@
 <style lang="less">
 
 .pulsatebck {
-	-webkit-animation: pulsate-bck 1.5s ease-in-out 0.5s infinite both;
-	        animation: pulsate-bck 1.5s ease-in-out 0.5s infinite both;
-}
-  /* ----------------------------------------------
- * Generated by Animista on 2022-12-8 19:45:27
- * Licensed under FreeBSD License.
- * See http://animista.net/license for more info. 
- * w: http://animista.net, t: @cssanimista
- * ---------------------------------------------- */
-
-/**
- * ----------------------------------------
- * animation pulsate-bck
- * ----------------------------------------
- */
-@-webkit-keyframes pulsate-bck {
-  0% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-  50% {
-    -webkit-transform: scale(0.9);
-            transform: scale(0.9);
-  }
-  100% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
+	animation: pulsate-bck 800ms ease-in-out 0.5s infinite alternate;
 }
 @keyframes pulsate-bck {
   0% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-  50% {
-    -webkit-transform: scale(0.9);
-            transform: scale(0.9);
+    -webkit-transform: scale(0.8);
+            transform: scale(0.8);
   }
   100% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
+    -webkit-transform: scale(1.1);
+            transform: scale(1.1);
   }
 }
 </style>

src/pages/pg2/index.vue

@@ -72,11 +72,22 @@
       </div>
     </div>
 
-    <div class="footer txt" style="z-index: 2000">
+    <Animate comp="img" class="flower3 animate__slower" src="/images/pg2/flower-sea.png" name="animate__fadeIn" :ready="inkActive"/>
+
+    <!-- <div class="footer txt" style="z-index: 2000">
       <div @click="router.push('/pg2-2')">
         了解故事
         <img src="/images/pg2/箭头-右.png" alt />
       </div>
+    </div> -->
+
+    <div class="footer" style="z-index: 2000">
+      <img
+        @click="router.push('/pg2-2')"
+        src="/images/pg2/getStory.png"
+        alt=""
+        style="width: 30vw; margin: auto; margin-bottom: 3vh"
+      >
     </div>
 
     <DownArrow />
@@ -253,6 +264,15 @@ watch(show, (val) => {
       width: 80px;
     }
   }
+
+  .flower3 {
+    position: absolute;
+    z-index: 2;
+    left: 0;
+    bottom: 0;
+    opacity: 0;
+  }
+
   .footer {
     left: 0;
     bottom: 0;

src/pages/pg4/video.vue

@@ -44,8 +44,6 @@
     // link.href = from;
     // link.click();
     // history.pushState('', '', from);
-    alert(123)
-    router.push(from);
   }
 
   const onReplay = () => {

src/pages/share/index.vue

@@ -13,6 +13,7 @@
       </div>
     </div>
     <img class="img-target" :src="imgData" v-if="imgData" alt="" />
+    <PageLoading class="rendering" v-else :loading="true" text="正在生成..." />
   </div>
 </template>
 
@@ -22,6 +23,7 @@ import html2canvas from "html2canvas";
 import { useModel } from "@zjxpcyc/vue-tiny-store";
 import { useRouter } from "vue-router";
 import GoBack from "@/components/GoBack.vue";
+import PageLoading from "@/components/PageLoading.vue";
 
 const router = useRouter();
 const { user } = useModel("user");
@@ -46,6 +48,15 @@ onMounted(() => {
   overflow: hidden;
   height: 100%;
 
+  .rendering {
+    position: fixed;
+    z-index: 1000;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
   .goback{
     z-index: 100;
     left: 10px;

src/utils/resources.js

@@ -50,6 +50,8 @@ export const resources = [
   { image: './images/pg2/废墟.png' },
   { image: './images/pg2/废墟color.png' },
   { image: './images/pg2/箭头-右.png' },
+  { image: './images/pg2/flower-sea.png' },
+  { image: './images/pg2/getStory.png' },
 
   { image: './images/pg2-2/图.png' },
   { image: './images/pg2-2/照片4.png' },