feats

src/pages/bk1/FlipIcon.vue

@@ -0,0 +1,35 @@
+<template>
+  <img
+    v-show="show"
+    class="flip"
+    src="/images/bk1/flip.png"
+    alt=""
+    @touchmove="onTouch"
+  >
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const show = ref(true);
+
+  const onTouch = () => {
+    show.value = false;
+
+    const t = setTimeout(() => {
+      show.value = true;
+      clearTimeout(t);
+    }, 1000);
+  }
+</script>
+
+<style lang="less" scoped>
+.flip {
+  position: fixed;
+  z-index: 100;
+  bottom: 0;
+  right: 0;
+  display: block;
+  width: 20vw;
+}
+</style>

src/pages/bk1/index.vue

@@ -11,16 +11,21 @@
 
 <script setup>
 import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import GoBack from './GoBack.vue'
 import Pg1 from './pg1.vue'
 import Pg2 from './pg2.vue'
 import Pg3 from './pg3.vue'
 
+const { query } = useRoute()
+const { page = 1 } = query || {}
+
 onMounted(() => {
   $('#bk1').turn({
     width: '100vw',
     height: '100vh',
     display: 'single',
+    page,
     pages: 3
   })
 })

src/pages/bk1/pg1.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="page pg-bg bk-pg">
     <div class="bk-pd">
-      <video src="/video/紫金草走向世界010.mp4" autoplay="autoplay"></video>
+      <video
+        src="/video/紫金草走向世界010.mp4"
+        poster="/images/bk1/poster.png"
+        controls="controls"
+        autoplay="autoplay"
+      />
     </div>
     <div class="bk-pd content">
       <img class="map-serial" src="/images/bk1/map/地图散开0001.png" alt="">
@@ -43,12 +48,14 @@
     </div>
 
     <Dot class="dot abs" :active="1" />
+    <FlipIcon />
   </div>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue';
 import Dot from './Dot.vue';
+import FlipIcon from './FlipIcon.vue';
 
   // const show = ref([true]);
 

src/pages/bk1/pg2.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="page pg-bg bk-pg2">
     <div class="content">
-      <img class="header-img" src="/images/bk1/pg2/header.png" alt="">
+      <div class="header-img">
+        <img src="/images/bk1/pg2/header.png" alt="">
+        <div id="flower" class="flower" />
+      </div>
       <br>
       <img class="badge-img" src="/images/bk1/pg2/badge.png" alt="">
 
@@ -16,11 +19,40 @@
     </div>
 
     <Dot class="abs dot" :active="2" />
+    <FlipIcon />
   </div>
 </template>
 
 <script setup>
+  import { onMounted } from 'vue';
   import Dot from './Dot.vue';
+  import FlipIcon from './FlipIcon.vue';
+  import useSerial from './useSerial';
+
+  const flowerImg = {
+    maxHeight: 11200,
+    height: 700,
+    renderHeight: 150,
+    percent: 150 / 700,
+  }
+
+  onMounted(() => {
+    const maxHeight = 11200;
+    const rawHeight = 700;
+    const flower = document.querySelector('#flower');
+    const height = flower.offsetHeight;
+
+    useSerial((t) => {
+      const pos = t * flowerImg.height;
+
+      const backgroundPosition = `0 -${pos * height / rawHeight}px`;
+      flower.style.backgroundPosition = backgroundPosition;
+
+      if (pos >= (maxHeight - rawHeight)) {
+        return true;
+      }
+    })
+  });
 </script>
 
 <style lang="less" scoped>
@@ -32,6 +64,23 @@
     .header-img {
       width: 90%;
       display: inline-block;
+      position: relative;
+
+      @width: 30vw;
+      @height: (@width / 400 * 700);
+
+      .flower {
+        position: absolute;
+        z-index: 2;
+        width: @width;
+        height: @height;
+        left: calc(50% - 20vw);
+        top: 0;
+        background-image: url(/images/bk1/flower.png);
+        background-repeat:no-repeat;
+        background-position: 0 0;
+        background-size: 100% auto;
+      }
     }
 
     .badge-img {

src/pages/bk1/pg3.vue

@@ -1,7 +1,209 @@
 <template>
-  <div class="page pg-bg">789</div>
+  <div class="page pg-bg">
+    <div class="header">
+      <img
+        class="header1 animate__animated animate__rotateIn"
+        src="/images/bk1/pg3/header1.png"
+        style="animation-delay: 100ms"
+        alt=""
+      >
+      <img
+        class="header2 animate__animated animate__rotateIn abs"
+        src="/images/bk1/pg3/header2.png"
+        style="animation-delay: 300ms"
+        alt=""
+      >
+      <img
+        class="header3 animate__animated animate__fadeIn"
+        src="/images/bk1/pg3/header3.png"
+        style="animation-delay: 600ms"
+        alt=""
+      >
+    </div>
+    <div class="content">
+      <section class="animate__animated animate__fadeInDown" style="animation-delay: 1s">
+        <div class="title txt right">
+          <strong>2014年</strong>
+          <img src="/images/logo.png" alt="">
+        </div>
+        <p class="txt right pr16">
+          我们第一次以“紫金草”的名字，来到大家身边。我们寻访丛葬地，开设“紫色的哀思”公祭网页，发放紫金草徽章，播撒和平的种子
+        </p>
+        <img class="abs line1" src="/images/bk1/pg2/虚线1.png" alt="">
+      </section>
+      <section class="animate__animated animate__fadeInDown" style="animation-delay: 2s">
+        <div class="title txt">
+          <img src="/images/logo.png" alt="">
+          <strong>2015年</strong>
+        </div>
+        <p class="txt pl16">
+          “家脉1937”家史故事征集，3000多个家史故事讲述历史
+        </p>
+        <img class="abs line2" src="/images/bk1/pg2/虚线2.png" alt="">
+      </section>
+      <section class="animate__animated animate__fadeInDown" style="animation-delay: 3s">
+        <div class="title txt right">
+          <strong>2016年</strong>
+          <img src="/images/logo.png" alt="">
+        </div>
+        <p class="txt right pr16">
+          200万人线上种植紫金草、更换紫金草头像、手写家史故事
+        </p>
+        <img class="abs line1" src="/images/bk1/pg2/虚线1.png" alt="">
+      </section>
+      <section class="animate__animated animate__fadeInDown" style="animation-delay: 4s">
+        <div class="title txt">
+          <img src="/images/logo.png" alt="">
+          <strong>2017年</strong>
+        </div>
+        <p class="txt pl16">
+          5处丛葬地，12.13公里接力骑行，让和平理念在这座经历过伤痛的城市扎根、传播
+        </p>
+        <img class="abs line2" src="/images/bk1/pg2/虚线2.png" alt="">
+      </section>
+      <section class="animate__animated animate__fadeInDown" style="animation-delay: 5s">
+        <div class="title txt right">
+          <strong>2018年</strong>
+          <img src="/images/logo.png" alt="">
+        </div>
+        <p class="txt right pr16">
+          线上紫金草活动在全球十多个城市开展，世界个各个角落，都有紫金草的身影。
+        </p>
+        <img class="abs line1" src="/images/bk1/pg2/虚线1.png" alt="">
+      </section>
+      <section class="animate__animated animate__fadeInDown" style="animation-delay: 6s">
+        <div class="title txt">
+          <img src="/images/logo.png" alt="">
+          <strong>2019年</strong>
+        </div>
+        <p class="txt pl16">
+          5处丛葬地，12.13公里接力骑行，让和平理念在这座经历过伤痛的城市扎根、传播
+        </p>
+        <img class="abs line2" src="/images/bk1/pg2/虚线2.png" alt="">
+      </section>
+      <section class="animate__animated animate__fadeInDown" style="animation-delay: 7s">
+        <div class="title txt right">
+          <strong>2020年</strong>
+          <img src="/images/logo.png" alt="">
+        </div>
+        <p class="txt right pr16">
+          紫金草行动抖音话题播放量超3000万
+        </p>
+        <img class="abs line1" src="/images/bk1/pg2/虚线1.png" alt="">
+      </section>
+      <section class="animate__animated animate__fadeInDown" style="animation-delay: 8s">
+        <div class="title txt">
+          <img src="/images/logo.png" alt="">
+          <strong>2021年</strong>
+        </div>
+        <p class="txt pl16">
+          2000多幅公益海报，承载着孩子们对历史的铭记，对和平的祈愿。
+        </p>
+        <img class="abs line99" src="/images/bk1/pg2/虚线8.png" alt="">
+      </section>
+    </div>
+    <Dot class="dot" :active="3" />
+  </div>
 </template>
 
 <script setup>
+import Dot from './Dot.vue';
 
 </script>
+
+<style lang="less" scoped>
+.header {
+  box-sizing: border-box;
+  padding: 24px;
+  padding-bottom: 0;
+
+  .header1 {
+    width: 50vw;
+    left: 0;
+  }
+
+  .header2 {
+    width: 36vw;
+    right: 5vw;
+    top: 5vw
+  }
+
+  .header3 {
+    margin-top: -20vw;
+  }
+}
+
+.dot {
+  position: fixed;
+  width: 100vw;
+  bottom: 12px;
+}
+
+.content {
+  box-sizing: border-box;
+  padding: 0 48px 150px;
+
+  section {
+    position: relative;
+
+    & + section {
+      margin-top: 24px;
+    }
+  }
+
+  .pr16 {
+    padding-right: 16px;
+  }
+
+  .pl16 {
+    padding-left: 16px;
+  }
+
+  p {
+    margin: 0;
+    box-sizing: border-box;
+    font-size: 12px;
+  }
+
+  .title {
+    & > * {
+      vertical-align: middle;
+    }
+
+    img {
+      display: inline-block;
+      width: 1em;
+      vertical-align: middle;
+    }
+  }
+
+  .right {
+    text-align: right;
+  }
+
+  .left {
+    text-align: left;
+  }
+
+  .line1 {
+    top: 20px;
+    right: -24px;
+    width: 70%;
+    height: calc(100% + 24px);
+  }
+
+  .line2 {
+    top: 20px;
+    left: -32px;
+    width: 70%;
+    height: calc(100% + 24px);
+  }
+
+  .line99 {
+    top: 20px;
+    left: -32px;
+    width: 70%;
+    height: calc(100% + 90px);
+  }
+}
+</style>

src/pages/bk1/useSerial.js

@@ -0,0 +1,13 @@
+
+export default function useSerial(callback) {
+  let times = 0;
+
+  const i = setInterval(() => {
+    const isOver = callback(times);
+    times += 1;
+
+    if (isOver) {
+      clearInterval(i);
+    }
+  }, 2000 / 16);
+}

src/pages/pg1/P1.vue

@@ -6,7 +6,6 @@
         style="animation-delay: 500ms"
         src="/images/pg1/earth.png"
         alt=""
-        @click="emit('clickImg', $event)"
       >
       <div class="back-line">
         <img src="/images/pg1/line1.png" alt="">
@@ -23,7 +22,6 @@
 </template>
 
 <script setup>
-const emit = defineEmits(['clickImg']);
 </script>
 
 <style lang="less" scoped>

src/pages/pg1/P2.vue

@@ -6,7 +6,6 @@
         style="animation-delay: 1.5s"
         src="/images/pg1/honour.png"
         alt=""
-        @click="emit('clickImg', $event)"
       >
       <div class="back-line">
         <img src="/images/pg1/line2.png" alt="">
@@ -23,7 +22,6 @@
 </template>
 
 <script setup>
-const emit = defineEmits(['clickImg']);
 </script>
 
 <style lang="less" scoped>

src/pages/pg1/P3.vue

@@ -6,7 +6,6 @@
         style="animation-delay: 3s"
         src="/images/pg1/peace.png"
         alt=""
-        @click="emit('clickImg', $event)"
       >
     </div>
     <div class="content-right txt">      
@@ -19,7 +18,6 @@
 </template>
 
 <script setup>
-const emit = defineEmits(['clickImg']);
 </script>
 
 <style lang="less" scoped>

src/pages/pg1/index.vue

@@ -5,9 +5,9 @@
         <Logo class="logo" />
       </div>
       <div class="body" parallax-offset='-100'>
-        <Part1 class="part1" @clickImg="onClickImg" />
-        <Part2 class="part2" />
-        <Part3 class="part3" />
+        <Part1 class="part1" @click="onClick(1)" />
+        <Part2 class="part2" @click="onClick(2)" />
+        <Part3 class="part3" @click="onClick(3)" />
       </div>
     </div>
     <div class="footer abs animate__animated animate__fadeInUp" style="animation-delay: 4s">
@@ -33,8 +33,8 @@
 
   const router = useRouter();
 
-  const onClickImg = () => {
-    router.push('/bk1');
+  const onClick = (page) => {
+    router.push(`/bk1?page=${page}`);
   }
 
 </script>

src/pages/pg2/index.vue

@@ -2,42 +2,39 @@
   <div class="page pg-bg pg2" parallax ref="pgRef">
     <Cloud class="cloud abs" />
     <div class="content txt">
-      <Animate
-        comp="p"
-        name="animate__lightSpeedInRight"
-        delay="100ms"
-        :ready="show"
-      >
-        1939年 <br >
+      <Animate comp="p" name="animate__lightSpeedInRight" delay="100ms" :ready="show">
+        1939年
+        <br />
         <strong>一抹紫色</strong>在战争的废墟中……
       </Animate>
       <Animate
+        @click="onClick"
         class="story"
         comp="img"
         name="animate__fadeInDown"
         delay="600ms"
         src="/images/pg2/story.png"
-        alt=""
+        alt
         :ready="show"
       />
     </div>
 
     <div class="hill abs">
-      <img class="" src="/images/pg2/mountain.png" alt="" parallax-offset="-100">
+      <img class src="/images/pg2/mountain.png" alt parallax-offset="-100" />
     </div>
-    
+
     <div class="groups abs">
       <div>
-        <img class="stele" src="/images/pg2/stele.png" alt="" parallax-offset="-150">
-        <div parallax-offset="-300" >
-          <img class="ruins" src="/images/pg2/ruins.png" alt="">
+        <img class="stele" src="/images/pg2/stele.png" alt parallax-offset="-150" />
+        <div parallax-offset="-300">
+          <img class="ruins" src="/images/pg2/ruins.png" alt />
           <!-- <Smoke class="smoke abs" /> -->
         </div>
-        <img class="persons" src="/images/pg2/persons.png" alt="" parallax-offset="-500">
+        <img class="persons" src="/images/pg2/persons.png" alt parallax-offset="-500" />
       </div>
     </div>
 
-    <img class="footer abs" src="/images/pg2/footer.png" alt="">
+    <img class="footer abs" src="/images/pg2/footer.png" alt />
 
     <div class="flower abs">
       <Animate class="flower1 abs" :comp="Flower1" :name="flowerAnimate.left" :ready="show" />
@@ -48,40 +45,47 @@
 </template>
 
 <script setup>
-  import { reactive, ref } from 'vue';
-  import Bell from '@/components/Bell.vue';
-  import Animate from '@/components/Animate.vue';
-  import Cloud from './Cloud.vue';
-  import Smoke from './smoke.vue';
-  import Flower1 from './flower/Flower1.vue';
-  import Flower2 from './flower/Flower2.vue';
-  import Flower3 from './flower/Flower3.vue';
-  import usePageShow from '../usePageShow';
-
-  const flowerAnimate = reactive({
-    left: '',
-    right: '',
-  });
-
-  let lastRatio = 0;
-  const flowShow = ({ intersectionRatio }) => {
-    console.log(intersectionRatio)
-    const isIn = intersectionRatio > 0.5 && intersectionRatio > lastRatio;
-    const isOut = intersectionRatio < 0.9 && intersectionRatio < lastRatio;
-
-    if (isIn) {
-      flowerAnimate.left = 'animate__fadeInLeft';
-      flowerAnimate.right = 'animate__fadeInRight';
-    }
-    if (isOut) {
-      flowerAnimate.left = 'animate__fadeOutLeft';
-      flowerAnimate.right = 'animate__fadeOutRight';
-    }
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import Bell from '@/components/Bell.vue'
+import Animate from '@/components/Animate.vue'
+import Cloud from './Cloud.vue'
+import Smoke from './smoke.vue'
+import Flower1 from './flower/Flower1.vue'
+import Flower2 from './flower/Flower2.vue'
+import Flower3 from './flower/Flower3.vue'
+import usePageShow from '../usePageShow'
+
+const router = useRouter()
+
+const onClick = (page) => {
+  router.push(`/pg2-2?page=${page}`)
+}
+
+const flowerAnimate = reactive({
+  left: '',
+  right: ''
+})
+
+let lastRatio = 0
+const flowShow = ({ intersectionRatio }) => {
+  console.log(intersectionRatio)
+  const isIn = intersectionRatio > 0.5 && intersectionRatio > lastRatio
+  const isOut = intersectionRatio < 0.9 && intersectionRatio < lastRatio
 
-    lastRatio = intersectionRatio;
+  if (isIn) {
+    flowerAnimate.left = 'animate__fadeInLeft'
+    flowerAnimate.right = 'animate__fadeInRight'
   }
+  if (isOut) {
+    flowerAnimate.left = 'animate__fadeOutLeft'
+    flowerAnimate.right = 'animate__fadeOutRight'
+  }
+
+  lastRatio = intersectionRatio
+}
 
-  const [pgRef, show] = usePageShow(flowShow);
+const [pgRef, show] = usePageShow(flowShow)
 </script>
 
 <style lang="less" scoped>
@@ -92,7 +96,7 @@
     top: 30px;
     right: 30px;
   }
-  
+
   .cloud {
     top: 0;
     left: 0;
@@ -119,7 +123,6 @@
     }
   }
 
-
   .groups {
     top: 50vh;
     left: 0;
@@ -140,7 +143,7 @@
       z-index: 2;
       position: relative;
     }
-      
+
     .smoke {
       bottom: 0;
       left: 55%;
@@ -155,7 +158,6 @@
       right: 0;
       top: -60%;
     }
-
   }
 
   .footer {
@@ -189,7 +191,9 @@
     bottom: 0;
   }
 
-  .hill, .wall, .flower {
+  .hill,
+  .wall,
+  .flower {
     img {
       width: 100%;
       display: block;

src/utils/resources.js

@@ -30,4 +30,8 @@ export const resources = [
   { image: './images/pg2/flower/1-4.png', },
   { image: './images/pg2/flower/右-小.png', },
   { image: './images/pg2/flower/左-小.png', },
+  { image: './images/bk1/flower/左-小.png', },
+  { image: './images/bk1/flip.png', },
+  { image: './images/bk1/flower.png', },
+  { image: './images/bk1/goback.png', },
 ];