feats

src/components/IFrame.vue

@@ -1,22 +1,27 @@
 <template>
   <div class="iframe-wrapper">
-    <img class="goback abs" src="/images/goback.png" alt="">
-    <iframe src="https://mp.weixin.qq.com/s/9d2gPLtuOxs0pKmwvJtu8A" frameborder="0"></iframe>
+    <img class="goback abs" src="/images/goback.png" alt="" @click="emit('cancel')">
+    <iframe :src="link" frameborder="0" v-if="link"></iframe>
   </div>
 </template>
 
 <script setup>
-
+  const props = defineProps({
+    link: String,
+  });
+  const emit = defineEmits(['cancel']);
 </script>
 
 <style lang="less" scoped>
 
 .iframe-wrapper {
   position: fixed;
+  background: #f5f5f5;
   width: 100vw;
   height: 100vh;
   top: 0;
   left: 0;
+  z-index: 1200;
 
   .goback {
     position: absolute;

src/pages/index.vue

@@ -12,8 +12,6 @@
         <Pg3 class="container" />
       </div>
     </div>
-
-    <!-- <IFrame /> -->
   </div>
 </template>
 
@@ -25,7 +23,6 @@ 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/loading/index.vue

@@ -49,7 +49,21 @@
     emit('ready');
   }
 
-  const onProcess = (val) => {
+  const throttle = (fn, delay) => {
+    let t = null;
+    return (...args) => {
+      if (!t) {
+        fn(...args);
+        t = setTimeout(() => null, delay);
+        return;
+      } else {
+        clearTimeout(t);
+        t = setTimeout(() => fn(...args), delay);
+      }
+    }
+  }
+
+  const callback = (val) => {
     const p = Number(val * 100).toFixed(2);
     if (p >= 100) {
       return percent.value = '100%';
@@ -59,7 +73,7 @@
   }
 
   onMounted(() => {
-    preload(onProcess)
+    preload(throttle(callback, 10));
   });
 </script>
 

src/pages/pg2-2/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page pg-bg pg2-2">
-    <GoBack class="goback abs" style="z-index: 100" @click="router.go(-1)" />
+    <!-- <GoBack class="goback abs" style="z-index: 100" @click="router.go(-1)" /> -->
     <Bell class="bell" />
     <div class="bk-pd content" >
       <Animate
@@ -121,7 +121,18 @@
           <br />为了深切缅怀惨遭日军屠戮遇难同胞，
           <br />唤起人们对和平的向往和珍视，
           <br />南京广播电视集团发起了“紫金草行动”。<br />九年了，
-          <br />“紫金草行动”再启航,<br />让“和平之花”开得更远。
+          <br />
+          <Animate
+            comp="span"
+            class="animate__infinite"
+            name="animate__headShake"
+            style="display: inline-block; font-size: 1.1em; font-family: sans serif; font-weight: 700;"
+            delay="300ms"
+            :ready="show3"
+            @click="onGoFoward"
+          >
+            “紫金草行动”再启航。
+          </Animate>
         </p>
       </Animate>
     </div>
@@ -161,6 +172,11 @@ const slideOptions = {
 const onSlideChange = (slide, newIndex) => {
   slideIndexRef.value = newIndex;
 };
+
+const onGoFoward = () => {
+  localStorage.setItem("page", 3);
+  router.go(-1);
+}
 </script>
 
 <style lang="less" scoped>

src/pages/pg2/index.vue

@@ -44,15 +44,21 @@
       
       <div class="story" style="z-index: 2000">
         <Animate
-          comp="img"
           name="animate__fadeIn"
-          @click="router.push('/pg2-2')"
-          src="/images/pg2/getStory.png"
-          alt=""
-          style="width: 30vw; margin: auto; margin-bottom: 3vh"     
-          delay="4000ms"     
+          delay="4000ms"
           :ready="show"
-        />
+          @click="router.push('/pg2-2')"
+        >
+          <Animate
+            comp="img"
+            name="animate__heartBeat animate__infinite"
+            src="/images/pg2/getStory.png"
+            alt=""
+            style="width: 30vw; margin: auto; margin-bottom: 3vh"
+            delay="5000ms"
+            :ready="show"
+          />
+        </Animate>
       </div>
     </div>
 

src/pages/pg3/index.vue

@@ -75,23 +75,11 @@
     >
       <div class="ink-slider-wrapper">
         <SplideTrack>
-          <SplideSlide>
-            <Ink class="slide-ink" :active="slideIndexRef == 0" src="./images/pg3/1.png" />
-          </SplideSlide>
-          <SplideSlide>
-            <Ink class="slide-ink" :active="slideIndexRef == 1" src="./images/pg3/2.png" />
-          </SplideSlide>
-          <SplideSlide>
-            <Ink class="slide-ink" :active="slideIndexRef == 2" src="./images/pg3/3.png" />
-          </SplideSlide>
-          <SplideSlide>
-            <Ink class="slide-ink" :active="slideIndexRef == 3" src="./images/pg3/4.png" />
-          </SplideSlide>
-          <SplideSlide>
-            <Ink class="slide-ink" :active="slideIndexRef == 4" src="./images/pg3/5.png" />
-          </SplideSlide>
-          <SplideSlide>
-            <Ink class="slide-ink" :active="slideIndexRef == 5" src="./images/pg3/6.png" />
+          <SplideSlide
+            v-for="(item, inx) in famous"
+            :key="item.image"
+          >
+            <Ink class="slide-ink" :active="slideIndexRef == inx" :src="item.image" @click="onFamous(item)" />
           </SplideSlide>
         </SplideTrack>
         <div class="splide__arrows abs" style="left: 0; top: 0">
@@ -112,6 +100,8 @@
     </div>
 
     <!-- <Persons v-if="showPerson" @cancel="showPerson = false" /> -->
+
+    <IFrame v-if="showPerson" :link="personLink" @cancel="showPerson = false" />
   </div>
 </template>
 
@@ -122,6 +112,7 @@
   import Bell from '@/components/Bell.vue';
   import Btn from '@/components/Btn.vue';
   import Animate from '@/components/Animate.vue';
+  import IFrame from '@/components/IFrame.vue';
   // import Persons from './Persons.vue';
   import Ink from './Ink.vue';
   import usePageShow from '../usePageShow';
@@ -129,6 +120,7 @@
   const router = useRouter();
   const [pgRef, show] = usePageShow(0.3);
   const showPerson = ref(false);
+  const personLink = ref();
   const slideIndexRef = ref(0);
 
   const slideOptions = {
@@ -140,6 +132,38 @@
     interval: 5000,
   }
 
+  const famous = ref([
+    {      
+      image: './images/pg3/1.png',
+      link: 'http://m2.nbs.cn/article/564333.html?id=564333&mid=1',
+    },
+    {      
+      image: './images/pg3/2.png',
+      link: 'http://m2.nbs.cn/article/564367.html?id=564367&mid=1',
+    },
+    {      
+      image: './images/pg3/3.png',
+      link: 'http://m2.nbs.cn/article/564359.html?id=564359&mid=1',
+    },
+    {      
+      image: './images/pg3/4.png',
+      link: 'http://m2.nbs.cn/article/564351.html?id=564351&mid=1',
+    },
+    {      
+      image: './images/pg3/5.png',
+      link: '',
+    },
+    {      
+      image: './images/pg3/6.png',
+      link: '',
+    },
+  ]);
+
+  const onFamous = (famousItem) => {
+    personLink.value = famousItem.link;
+    showPerson.value = true;
+  }
+
   const onVideo = () => {
     router.push('/pg4')
   }
@@ -216,7 +240,6 @@
 
   .nj-1937 {
     width: 32vw;
-    margin-top: -5vw;
   }
 
   .content {

src/pages/pg4/Badge.vue

@@ -9,7 +9,7 @@
       <div class="desc">
         关注“南京广播电视台”回复<br>
         “<span class="keyword">紫金草</span>”<br>
-        领取纪紫金草徽章<br>
+        领取紫金草徽章<br>
         （数量有限，领完即止）
       </div>
     </div>

src/pages/pg4/Rule.vue

@@ -4,7 +4,7 @@
       <h3>参与规则</h3>
       <ul>
         <li>选择要播撒的种子，并进行播种。</li>
-        <li>种植完成后可领取实体资金草徽章一枚。</li>
+        <li>种植完成后，分享海报至“南京广播电视台”微信公众号领取实体徽章一枚。</li>
       </ul>
     </div>
   </Modal>

src/pages/pg4/video.vue

@@ -14,7 +14,7 @@
         @play="pause()"
         @pause="play()"
       ></video>
-      <div class="play-action animate__animated animate__fadeIn" v-if="show">
+      <div class="play-action animate__animated animate__fadeIn">
         <img src="/images/pg4/重播.png" @click="onReplay" alt="" />
         <img src="/images/pg4/播撒种子.png" @click="onNext" alt="" />
       </div>
@@ -34,18 +34,6 @@
   const show = ref(false);
   const controls = ref();
 
-  const { query } = route;
-  const { from } = query;
-
-  if (from) {
-    // window.location.href = decodeURIComponent(from);
-    // const link = document.createElement('a');
-    // link.target = "_blank";
-    // link.href = from;
-    // link.click();
-    // history.pushState('', '', from);
-  }
-
   const onReplay = () => {
     mediaRef.value.play();
     show.value = false;

src/pages/share/index.vue

@@ -4,7 +4,9 @@
     <GoBack class="goback abs" style="z-index: 100" @click="router.go(-1)" />
 
     <div class="will-copy" ref="src">
-      <img class="copy-img" src="/images/share.jpg" alt="" />
+      <div class="copy-img">
+        <img src="/images/share.jpg" alt="" />
+      </div>
       <div class="content txt">
         <div class="name">{{ user.nickname || "朋友" }}</div>
         <div style="line-height: 1.6em">
@@ -74,6 +76,14 @@ onMounted(() => {
     .copy-img {
       width: 100%;
       height: 100%;
+      position: relative;
+
+      img {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
     }
   }