feats

index.html

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./fonts/iconfont.css">
     <script src="./wx/jweixin-1.6.0.js"></script>
-    <script src="./qrcode.min.js"></script>
+    <script src="./jquery.1.9.1.js"></script>
+    <script src="./turn.min.js"></script>
     <script src="./config.js"></script>
+    <script src="./slidePage/slidePage.min.js"></script>
+    <link rel="stylesheet" href="./slidePage/slidePage.min.css">
     <title>南京-紫金草行动</title>
     <!-- <script src="./vconsole.min.js"></script>
     <script>

package.json

   },
   "dependencies": {
     "@zjxpcyc/vue-tiny-store": "^1.0.1",
+    "animate.css": "^4.1.1",
     "html2canvas": "^1.4.1",
     "v-viewer": "^3.0.10",
     "viewerjs": "1.9.0",

public/slidePage/slidePage.min.css

+.slide-container{width:100%;height:100%;overflow:hidden;position:relative}.slide-container .slide-page{position:absolute;top:0;left:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-text-size-adjust:none;-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;background-position:center}.slide-container .slide-page{transform:translate3d(0,100%,0);-webkit-transform:translate3d(0,100%,0)}.slide-container .slide-page.transition{transition:transform .7s cubic-bezier(.55,.085,0,.99);-webkit-transition:transform .7s cubic-bezier(.55,.085,0,.99)}

src/components/Bell.vue

+<template>
+  <div class="bell-box">
+    <div>
+      <div class="center circle abs"><div class="inner" /></div>
+      <div class="center circle abs"><div class="outer" /></div>
+      <div class="center bell-img">
+        <img src="/images/pg1/bell.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+.bell-box {
+  @size: 10vw;
+
+  width: @size;
+  height: @size;
+
+  & > div {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .center {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .circle {
+    top: 2vw;
+    left: 0;
+    z-index: 0;
+
+    & > div {
+      flex: none;
+      width: 50%;
+      height: 50%;
+      border: 2px solid rgba(223, 183, 132, 1);
+      border-radius: 50%;
+      opacity: 0;
+    }
+
+    .inner {
+      animation: bell-circle-show 3s linear infinite;
+    }
+
+    .outer {      
+      animation: bell-circle-show 3s linear 1.5s infinite;
+    }
+
+    @keyframes bell-circle-show {
+      0% {
+        opacity: 0;
+        transform: scale(1);
+      }
+
+      50% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0;
+        transform: scale(2.4);
+      }
+    }
+  }
+
+  .bell-img {
+    position: relative;
+    z-index: 2;
+
+    img {
+      flex: none;
+      width: 80%;
+
+      transform-origin: top center;
+      animation: bell-shake 1.4s ease-in-out infinite alternate;
+    }
+  }
+
+  @keyframes bell-shake {
+    from {
+      transform: rotate(15deg);
+    }
+    to {
+      transform: rotate(-15deg);
+    }
+  }
+}
+</style>

src/components/Erasure.vue

+<template>
+  <div class="erasure">
+    <img :src="img" alt="" v-if="img">
+    <slot v-else />
+    <div class="erasure-mask" :style="style"></div>
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref } from 'vue';
+
+  const props = defineProps({
+    delay: String,
+    img: String,
+    timing: String,
+  })
+
+  const style = computed(() => {
+    let sty = {}
+    if (props.delay) {
+      sty = { animationDelay: props.delay }
+    }
+
+    if (props.timing) {
+      sty = {
+        ...sty,
+        animationTimingFunction: props.timing
+      }
+    }
+
+    return sty;
+  });
+
+</script>
+
+<style lang="less" scoped>
+.erasure {
+  position: relative;
+  
+  .erasure-mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url('/images/BG.jpg');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      transform-origin: bottom center;
+      animation-name: erasure;
+      animation-duration: 1s;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+      z-index: 10;
+    }
+
+  @keyframes erasure {
+    from {
+      transform: scaleY(100%);
+    }
+
+    to {
+      transform: scaleY(0);
+    }
+  }
+}
+</style>

src/components/ImageText.vue

+<template>
+  <div class="img-txt" :style="style">
+    <img
+      class="animate__animated animate__rotateIn"
+      :class="{step: step}"
+      :src="img"
+      :data-delay="delay"
+      alt=""
+    >
+    <div class="space"></div>
+    <div class="txt"><slot /></div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue"
+
+  const props = defineProps({
+    step: Boolean,
+    delay: Number,
+    img: String,
+    direct: String,
+  })
+
+  const style = computed(() => {
+    if (props.direct === 'right') {
+      return {
+        flexDirection: 'row-reverse'
+      }
+    } else {
+      return {};
+    }
+  });
+</script>
+
+<style lang="less">
+.img-txt {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+
+  img {
+    flex: none;
+    width: 30vw;
+    height: 30vw;
+
+    // animation: img-scroll 600ms linear;
+  }
+
+  .space {
+    flex: none;
+    width: 16px;
+  }
+
+  .txt {
+    flex: 1;
+  }
+}
+
+@keyframes img-scroll {
+  from {
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+</style>

src/main.js

 import { createApp } from 'vue'
-import VueViewer from 'v-viewer'
-import 'viewerjs/dist/viewer.css'
-import './style.css'
+import 'animate.css'
+
 import App from './App.vue'
 import store from './store'
 import wxsdk from './utils/wx'
 import router from './router'
 import i18n from './i18n'
 
+import './style.less'
 // const { share } = wxsdk(location.href)
 
 const app = createApp(App);
-app.use(VueViewer);
 app.use(store);
 app.use(router);
 app.use(i18n);

src/pages/bk1/Dot.vue

+<template>
+  <div class="dot-box">
+    <ul>
+      <li :class="{active: active===1}">&nbsp;</li>
+      <li :class="{active: active===2}">&nbsp;</li>
+      <li :class="{active: active===3}">&nbsp;</li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    active: Number,
+  })
+</script>
+
+<style lang="less" scoped>
+.dot-box {
+  ul {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    li {
+      flex: none;
+      width: .5em;
+      height: .5em;
+      display: inline-block;
+      list-style: none;
+      border-radius: 50%;
+      border: 2px solid #ae61b3;
+      overflow: hidden;
+
+      &.active {
+        background: #ae61b3;
+      }
+
+      & + li {
+        margin-left: 1em;
+      }
+    }
+  }
+}
+</style>

src/pages/bk1/index.vue

+<template>
+  <div id="bk1">
+    <Pg1 />
+    <Pg2 />
+    <Pg3 />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import Pg1 from './pg1.vue';
+import Pg2 from './pg2.vue';
+import Pg3 from './pg3.vue';
+
+onMounted(() => {
+  $("#bk1").turn({
+    width: '100vw',
+    height: '100vh',
+    display: 'single',
+    pages: 3
+  });
+});
+</script>
+
+<style lang="less">
+#bk1 {
+  .bk-pg {
+    background-color: #000000;
+  }
+
+  .bk-pd {
+    box-sizing: border-box;
+    padding: 6px;
+  }
+}
+</style>

src/pages/bk1/pg1.vue

+<template>
+  <div class="page pg-bg bk-pg">
+    <div class="bk-pd">
+      <video src="/video/紫金草走向世界010.mp4" autoplay="autoplay"></video>
+    </div>
+    <div class="bk-pd content">
+      <img class="map-serial" src="/images/bk1/map/地图散开0001.png" alt="">
+      <!-- <img v-if="show[1]" class="map-serial" src="/images/bk1/map/地图散开0002.png" alt="">
+      <img v-if="show[2]" class="map-serial" src="/images/bk1/map/地图散开0003.png" alt="">
+      <img v-if="show[3]" class="map-serial" src="/images/bk1/map/地图散开0004.png" alt="">
+      <img v-if="show[4]" class="map-serial" src="/images/bk1/map/地图散开0005.png" alt="">
+      <img v-if="show[5]" class="map-serial" src="/images/bk1/map/地图散开0006.png" alt="">
+      <img v-if="show[6]" class="map-serial" src="/images/bk1/map/地图散开0007.png" alt="">
+      <img v-if="show[7]" class="map-serial" src="/images/bk1/map/地图散开0008.png" alt="">
+      <img v-if="show[8]" class="map-serial" src="/images/bk1/map/地图散开0009.png" alt="">
+      <img v-if="show[9]" class="map-serial" src="/images/bk1/map/地图散开0010.png" alt="">
+      <img v-if="show[10]" class="map-serial" src="/images/bk1/map/地图散开0011.png" alt="">
+      <img v-if="show[11]" class="map-serial" src="/images/bk1/map/地图散开0012.png" alt="">
+      <img v-if="show[12]" class="map-serial" src="/images/bk1/map/地图散开0013.png" alt="">
+      <img v-if="show[13]" class="map-serial" src="/images/bk1/map/地图散开0014.png" alt="">
+      <img v-if="show[14]" class="map-serial" src="/images/bk1/map/地图散开0015.png" alt="">
+      <img v-if="show[15]" class="map-serial" src="/images/bk1/map/地图散开0016.png" alt="">
+      <img v-if="show[16]" class="map-serial" src="/images/bk1/map/地图散开0017.png" alt="">
+      <img v-if="show[17]" class="map-serial" src="/images/bk1/map/地图散开0018.png" alt="">
+      <img v-if="show[18]" class="map-serial" src="/images/bk1/map/地图散开0019.png" alt="">
+      <img v-if="show[19]" class="map-serial" src="/images/bk1/map/地图散开0020.png" alt="">
+      <img v-if="show[20]" class="map-serial" src="/images/bk1/map/地图散开0021.png" alt="">
+      <img v-if="show[21]" class="map-serial" src="/images/bk1/map/地图散开0022.png" alt="">
+      <img v-if="show[22]" class="map-serial" src="/images/bk1/map/地图散开0023.png" alt="">
+      <img v-if="show[23]" class="map-serial" src="/images/bk1/map/地图散开0024.png" alt="">
+      <img v-if="show[24]" class="map-serial" src="/images/bk1/map/地图散开0025.png" alt=""> -->
+    </div>
+    <div class="bk-pd content">
+      <p class="txt animate__animated animate__fadeInUp" style="margin-top: 0">
+        紫金草已成为和平的语言 <br>
+        从南京向世界传递出和平的呼唤。<br>
+        中国、芬兰、土耳其、德国、英国、瑞士、美国、<br>
+        加拿大、日本、韩国、马拉西亚、澳大利亚、<br>
+        新西兰、新加坡，紫金草在14个国家被点亮，<br>
+        播撒和平的种子。<br>
+        近20万枚紫金草徽章佩戴在了人们的心口。
+      </p>
+    </div>
+
+    <Dot class="dot abs" :active="1" />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import Dot from './Dot.vue';
+
+  // const show = ref([true]);
+
+  let cur = 0;
+  let req = null;
+  const showMap = (img) => {
+    cur += 1;
+    const no = cur > 9 ? cur : `0${cur}`;
+    img.src = `/images/bk1/map/地图散开00${no}.png`;
+
+    // req = window.requestAnimationFrame(() => showMap(img));
+
+    // if (cur >= 24) {
+    //   window.cancelAnimationFrame(req);
+    // }
+  }
+
+  onMounted(() => {
+    // let cur = 0;
+    // const t = setInterval(() => {
+    //   show.value[cur] = false;
+    //   show.value[cur + 1] = true;
+    //   cur += 1;
+
+    //   if (cur >= 24) {
+    //     clearInterval(t);
+    //   }
+    // }, 1000 / 60)
+
+    const t = setTimeout(() => {
+      const img = document.querySelector('.map-serial');
+      // showMap(img);
+
+      const i = setInterval(() => {
+        showMap(img);
+        if (cur >= 24) {
+          clearInterval(i);
+        }
+      }, 1000 / 25);
+    }, 300);
+  })
+</script>
+
+<style lang="less" scoped>
+.bk-pg {
+  video {
+    width: 100%;
+    height: auto;
+  }
+
+  .content {
+    position: relative;
+    // padding-top: 16px;
+    text-align: center;
+    line-height: 1.6em;
+  }
+
+  .map-serial {
+    // position: absolute;
+    // top: 0;
+    // left: 0;
+    // width: 100%;
+  }
+
+  .dot {
+    width: 100vw;
+    bottom: 12px;
+  }
+}
+</style>

src/pages/bk1/pg2.vue

+<template>
+  <div class="page pg-bg bk-pg2">
+    <div class="content">
+      <img class="header-img" src="/images/bk1/pg2/header.png" alt="">
+      <br>
+      <img class="badge-img" src="/images/bk1/pg2/badge.png" alt="">
+
+      <p class="txt animate__animated animate__rubberBand">
+        2014年，<br>
+        南京广电集团以“紫金草”为原型，<br>
+        制作紫金草徽章发放给市民。<br>
+        9年来，20万人加入“紫金草行动”，<br>
+        把紫金草徽章佩戴在离心脏最近的地方。<br>
+        在2亿人心中，和平的愿景被播撒。<br>
+      </p>
+    </div>
+
+    <Dot class="abs dot" :active="2" />
+  </div>
+</template>
+
+<script setup>
+  import Dot from './Dot.vue';
+</script>
+
+<style lang="less" scoped>
+.bk-pg2 {
+  .content {
+    padding: 1em;
+    text-align: center;
+
+    .header-img {
+      width: 90%;
+      display: inline-block;
+    }
+
+    .badge-img {
+      margin: 1em auto;
+      width: 36px;
+      display: inline-block;
+    }
+  }
+
+  .dot {
+    width: 100vw;
+    bottom: 12px;
+  }
+}
+</style>

src/pages/bk1/pg3.vue

+<template>
+  <div class="page pg-bg">789</div>
+</template>
+
+<script setup>
+
+</script>

src/pages/first.vue

+<template>
+  <div class="page firstpg">
+    <video src="/video/first.mp4" loop="loop" autoplay="autoplay"></video>
+    <div class="i18n-change">
+      <div class="btn" @click="emit('change', 'zh')">中文版</div>
+      <div class="btn" @click="emit('change', 'en')">English</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  const emit = defineEmits(['change']);
+
+</script>
+
+<style lang="less" scoped>
+.firstpg {
+  video {
+    position: fixed;//视频定位方式设为固定
+    right: 0;
+    bottom: 0;//视频位置
+    min-width: 100%;
+    min-height: 100%; //不会因视频尺寸造成页面需要滚动
+    width: auto;
+    height: auto; //尺寸保持原视频大小
+    // z-index: -100; //z轴定位，小于0即可
+  }
+
+  .i18n-change {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding-bottom: 20vh;
+    box-sizing: border-box;
+    z-index: 2;
+    width: 100%;
+
+    .btn {
+
+      @color: rgba(255, 255, 255, .4);
+
+      position: relative;
+      width: 30vw;
+      height: 10vw;
+      display: block;
+      margin: auto;
+      color: #fff;
+      background: @color;
+      text-align: center;
+      line-height: 10vw;
+
+      &::after {
+        content: '';
+        width: 100%;
+        height: 100%;
+        border-bottom: 2px solid @color;
+        border-right: 2px solid @color;
+        position: absolute;
+        bottom: -4px;
+        right: -4px;
+      }
+
+      & + .btn {
+        margin-top: 10vw;
+      }
+    }
+  }
+}
+</style>

src/pages/index.vue

 <template>
-  <div class="container">
-    <div class="aud abs"></div>
-    <Pg1 />
-    <Pg2 />
-    <Pg3 />
+  <!-- <First @change="onLanChange" /> -->
+  <div class="pages slide-container">
+    <div class="slide-page">
+      <Pg1 class="container"/>
+    </div>
+    <div class="slide-page">
+      <Pg2 class="container"/>
+    </div>
+    <div class="slide-page">
+      <Pg3 class="container"/>
+    </div>
+
+    <!-- <Bk1 /> -->
   </div>
 </template>
 
 <script setup>
 import { onMounted } from 'vue';
-import parallaxing from '@/utils/parallaxing.js';
-
+import { useI18n } from 'vue-i18n';
+import First from './first.vue';
 import Pg1 from './pg1/index.vue';
 import Pg2 from './pg2/index.vue';
 import Pg3 from './pg3/index.vue';
+import Bk1 from './bk1/index.vue';
+// import parallaxing from '@/utils/parallaxing.js';
+
+
+const { locale } = useI18n();
+
+const onLanChange = (val) => {
+  locale.value = val;
+  console.log(val)
+}
 
 onMounted(() => {
-  parallaxing()
+  // parallaxing()
+  var slidepage = new window.slidePage({
+    slideContainer: '.slide-container',
+    slidePages: '.slide-page',
+    page: 1,
+    refresh: true,
+    dragMode: false,
+    useWheel: true,
+    useSwipe: true,
+    useAnimation : true,
+
+    // Events
+    before: function(origin,direction,target){},
+    after: function(origin,direction,target){},
+ });
 })
 
 </script>
 
 <style lang="less">
-.container {
-  width: 100vw;
-  height: 100vh;
-  position: relative;
-  overflow-y: auto;
-  
-  .aud {
-    top: 20px;
-    right: 20px;
-    width: 36px;
-    height: 36px;
-    background-image: url('/images/pg1/音乐按钮.png');
-    background-size:100% 100%;
-    z-index: 100;
-  }
-
-  .abs {
-    position: absolute;
-  }
-
-  .pg {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
+.pages {
 }
 </style>

src/pages/pg1/Logo.vue

+<template>
+<img src="/images/pg1/logo.png" />
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+img {
+  width: 35vw;
+}
+</style>

src/pages/pg1/Part1.vue

+<template>
+  <div class="part1-box">
+    <div class="content">
+      <div class="header">
+        <ImageText img="/images/pg1/earth.png" step :delay="500">
+          <p class="step animate__animated animate__fadeInRight" data-delay="100">
+            2014年至今 <br>
+            一朵紫色的小花 <br>
+            在全球<strong>14个国家</strong>被点亮
+          </p>
+        </ImageText>
+      </div>
+    </div>
+    <div class="abs" style="top: 0;width: 70%; z-index: 0;">
+      <Erasure delay="1s" timing="cubic-bezier(0.07, 0.85, 0.18, 0.96)">
+        <img src="/images/pg1/line1.png" alt="">
+      </Erasure>
+    </div>
+  </div> 
+</template>
+
+<script setup>
+  import ImageText from '@/components/ImageText.vue';
+  import Erasure from '@/components/Erasure.vue';
+</script>
+
+<style lang="less" scoped>
+.part1-box {
+  position: relative;
+
+  .content {
+    box-sizing: border-box;
+    padding-left: 16px;
+    position: relative;
+    z-index: 2;
+  }
+}
+</style>