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/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', },
 ];