feats

index.html

@@ -8,10 +8,10 @@
     <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> -->
+    <script src="./slidePage/slidePage.min.js"></script>
     <!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=IDixtryGuZAFPZLh4r8XCAM054r8LCRs"></script> -->
 
-    <!-- <link rel="stylesheet" href="./slidePage/slidePage.min.css"> -->
+    <link rel="stylesheet" href="./slidePage/slidePage.min.css">
 
     <link rel="stylesheet" href="./fonts/SourceHanSerifCN-Medium/SourceHanSerifCN-Medium.css">
     <title>南京-紫金草行动</title>

public/config.js

@@ -9,5 +9,5 @@ const shareOptTpl = {
 const link1URL = 'http://h5.njyunzhi.com/wenhua818-2/index.html';
 
 // 分享接口地址
-const API_BASE = 'http://api.h5.zijincao.njyunzhi.com';
-// const API_BASE = '';
+// const API_BASE = 'http://api.h5.zijincao.njyunzhi.com';
+const API_BASE = '';

src/App.vue

@@ -3,7 +3,7 @@
   import { useModel } from '@zjxpcyc/vue-tiny-store';
   import wxsdk from '@/utils/wx'
   import track from '@/utils/track'
-  import Loading from './First.vue';
+  import Loading from './pages/Loading.vue';
 
   const { el, play } = useModel('audio');
   const { setUser, contries } = useModel('user');
@@ -51,8 +51,8 @@
 </script>
 
 <template>
-  <!-- <Loading v-if="!show" class="loading" @ready="(show = true)" /> -->
-  <router-view></router-view>
+  <Loading v-if="!show" class="loading" @ready="(show = true)" />
+  <router-view v-else></router-view>
 
   <audio ref="el" src="/audio/audio.mp3" style="max-width: 0" loop preload="auto"></audio>
 </template>

src/pages/Loading.bak.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="page pg-bg loading-pg">
+    <div class="content">
+      <div class="load-main">
+        <img class="main-img" src="/images/loading/main.png" alt="">
+        <div v-if="percent !== '100%'">
+          <div class="process-bar"></div>
+          <div class="process-percent">{{percent}}</div>
+        </div>
+        <div v-else class="select-lan">
+          <div><Btn class="btn" @click="onSelect('zh')">中文版</Btn></div>
+          <div><Btn class="btn" @click="onSelect('en')">English</Btn></div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <img src="/images/loading/allrights.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import Btn from '@/components/Btn.vue';
+  import { useI18n } from 'vue-i18n';
+  import { preload } from '@/utils/preload'
+
+  const emit = defineEmits(['ready']);
+
+  const percent = ref('0%');
+  const { locale } = useI18n();
+  
+  const onSelect = lan => {
+    locale.value = lan;
+    emit('ready');
+  }
+
+  const onProcess = (val) => {
+    
+    const p = Number(val * 100).toFixed(2);
+    console.log('----loading->', p);
+    if (p >= 100) {
+      percent.value = '100%';
+    } else {
+      percent.value = `${p}%`;
+    }
+  }
+
+  onMounted(() => {
+    preload(onProcess)
+  });
+
+</script>
+
+<style lang="less" scoped>
+.loading-pg {
+  display: flex;
+  flex-direction: column;
+
+  &.hidden {
+    display: none;
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .load-main {
+      text-align: center;
+      width: 70vw;
+      flex: none;
+
+      .main-img {
+        width: 80%;
+        margin: auto;
+      }
+
+      .process-bar {
+        position: relative;
+        z-index: 0;
+        margin-top: 36px;
+        width: 100%;
+        height: 2px;
+        background: #b9a58a;
+
+        &::before {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          width: v-bind(percent);
+          height: 100%;
+          left: 0;
+          top: 0;
+          background: #847560;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          z-index: 2;
+          width: 24px;
+          height: 24px;
+          background-image: url(/images/loading/loader.png);
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          left: calc(v-bind(percent) - 12px);
+          top: -11px;
+          animation: loader-cricle 2s linear infinite;
+        }
+      }
+
+      @keyframes loader-cricle {
+        from {
+          transform: rotate(0);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .process-percent {
+        text-align: center;
+        color: #5c4034;
+        font-size: 1.2em;
+        margin-top: 1em;
+      }
+    }
+
+    .select-lan {
+      margin-top: 100px;
+
+      div {
+        & + div {
+          margin-top: 10vw;
+        }
+      }
+    }
+  }
+
+  .footer {
+    box-sizing: border-box;
+    flex: none;
+    height: 100px;
+    padding: 16px 48px;
+  }
+}
+</style>

src/pages/Loading.vue

@@ -1,44 +1,51 @@
 <template>
-  <div class="page pg-bg loading-pg">
+  <div class="page pg-bg loading-pg" @click="onClick">
+    <div class="loading-bg">
+      <img class="fl-bg1 abs" src="/images/fl-bg.png" alt="">
+      <img class="fl-bg2 abs" src="/images/fl-bg.png" alt="">
+    </div>
+    <div class="header abs">
+      <Bell />
+    </div>
     <div class="content">
-      <div class="load-main">
-        <img class="main-img" src="/images/loading/main.png" alt="">
-        <div v-if="percent !== '100%'">
-          <div class="process-bar"></div>
-          <div class="process-percent">{{percent}}</div>
-        </div>
-        <div v-else class="select-lan">
-          <div><Btn class="btn" @click="onSelect('zh')">中文版</Btn></div>
-          <div><Btn class="btn" @click="onSelect('en')">English</Btn></div>
+      <div class="loading-main">
+        <img class="main-img" src="/images/loading/center.png" alt="">
+        <img class="fly1 abs" :class="{'fly-near': !finished, 'fly-away': finished}" src="/images/loading/飞机1.png" alt="">
+        <img class="fly2 abs" :class="{'fly-near': !finished, 'fly-away': finished}" src="/images/loading/飞机2.png" alt="">
+        <img class="fly3 abs" :class="{'fly-near': !finished, 'fly-away': finished}" src="/images/loading/飞机3.png" alt="">
+        <div class="txt loading-text">
+          {{percent}}
         </div>
       </div>
     </div>
-    <div class="footer">
-      <img src="/images/loading/allrights.png" alt="">
+    <DownArrow v-if="percent == '100%'" style="bottom: 120px" />
+    <div class="footer abs txt">
+      主办单位：中共南京市委网信办、共青团南京市委员会、南京广播电视集团、清华日军南京大屠杀遇难同胞纪念馆
     </div>
   </div>
 </template>
 
 <script setup>
   import { onMounted, ref } from 'vue';
-  import Btn from '@/components/Btn.vue';
-  import { useI18n } from 'vue-i18n';
+  import Bell from '@/components/Bell.vue';
+  import DownArrow from '@/components/DownArrow.vue';
   import { preload } from '@/utils/preload'
 
   const emit = defineEmits(['ready']);
+  const finished = ref(false);
 
   const percent = ref('0%');
-  const { locale } = useI18n();
-  
-  const onSelect = lan => {
-    locale.value = lan;
-    emit('ready');
+
+  const onClick = () => {
+    finished.value = true;
+
+    const t = setTimeout(() => {
+      emit('ready');
+    }, 1600);
   }
 
-  const onProcess = (val) => {
-    
+  const onProcess = (val) => {    
     const p = Number(val * 100).toFixed(2);
-    console.log('----loading->', p);
     if (p >= 100) {
       percent.value = '100%';
     } else {
@@ -49,101 +56,135 @@
   onMounted(() => {
     preload(onProcess)
   });
-
 </script>
 
 <style lang="less" scoped>
 .loading-pg {
-  display: flex;
-  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .loading-bg {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    .fl-bg1 {
+      width: 64px;
+      top: 65vh;
+      left: 50vw;
+      animation: fl-skew 4s ease-in-out 300ms infinite alternate;
+    }
+    
+    .fl-bg2 {
+      width: 64px;
+      top: 45vh;
+      right: -32px;
+      animation: fl-skew 4s ease-in-out 100ms infinite alternate;
+    }
 
-  &.hidden {
-    display: none;
+    @keyframes fl-skew {
+      from {
+        transform: rotate(0) skew(0, 0);
+      }
+      to {
+        transform: rotate(5deg) skew(20deg, 25deg);
+      }
+    }
   }
 
+
   .content {
-    flex: 1;
+    position: relative;
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 
-    .load-main {
+    .loading-main {
+      position: relative;
       text-align: center;
-      width: 70vw;
+      width: 80vw;
       flex: none;
 
       .main-img {
-        width: 80%;
+        width: 100%;
         margin: auto;
       }
 
-      .process-bar {
-        position: relative;
-        z-index: 0;
-        margin-top: 36px;
+      .loading-text {
         width: 100%;
-        height: 2px;
-        background: #b9a58a;
-
-        &::before {
-          content: '';
-          position: absolute;
-          z-index: 1;
-          width: v-bind(percent);
-          height: 100%;
-          left: 0;
-          top: 0;
-          background: #847560;
-        }
-
-        &::after {
-          content: '';
-          position: absolute;
-          z-index: 2;
-          width: 24px;
-          height: 24px;
-          background-image: url(/images/loading/loader.png);
-          background-size: 100% 100%;
-          background-repeat: no-repeat;
-          left: calc(v-bind(percent) - 12px);
-          top: -11px;
-          animation: loader-cricle 2s linear infinite;
-        }
+        font-size: 24px;
       }
 
-      @keyframes loader-cricle {
-        from {
-          transform: rotate(0);
-        }
-        to {
-          transform: rotate(360deg);
-        }
+      .fly1 {
+        width: 65vw;
+        top: 0;
+        left: 0;
+        animation-delay: 100ms;
+        animation-duration: 1s;
       }
 
-      .process-percent {
-        text-align: center;
-        color: #5c4034;
-        font-size: 1.2em;
-        margin-top: 1em;
+      .fly2 {
+        width: 30vw;
+        top: -5vh;
+        left: 17vw;
+        animation-delay: 560ms;
+        animation-duration: 1.2s;
+      }
+
+      .fly3 {
+        width: 25vw;
+        top: -12vh;
+        left: 10vw;
+        animation-delay: 350ms;
+        animation-duration: 1.6s;
       }
     }
+  }
 
-    .select-lan {
-      margin-top: 100px;
+  .fly-near {
+    animation: fly-near 1.2s ease-in-out 100ms infinite alternate;
+  }
 
-      div {
-        & + div {
-          margin-top: 10vw;
-        }
-      }
+  @keyframes fly-near {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-10%);
+    }
+  }
+
+  .fly-away {
+    animation: fly-away 1.2s ease-in-out 100ms forwards;
+  }
+
+  @keyframes fly-away {
+    from {
+      transform: translate3D(0, 0, 0);
     }
+    to {
+      transform: translate3D(100vw, -20vh, 0);
+    }
+  }
+
+  .header {
+    top: 24px;
+    right: 24px;
+    width: 40px;
   }
 
   .footer {
-    box-sizing: border-box;
-    flex: none;
-    height: 100px;
-    padding: 16px 48px;
+    font-size: 12px;
+    text-align: center;
+    bottom: 12px;
+    left: 0;
+    padding: 0 16px;
   }
 }
 </style>

src/pages/index.vue

@@ -1,15 +1,29 @@
 <template>
-  <div style="height: 100vh;">
-    <Bell class="bell" />
-    <div class="pages slide-container">
-      <div class="slide-page-2">
-        <Pg1 class="container" />
-      </div>
-      <div class="slide-page-2">
-        <Pg2 class="container" />
-      </div>
-      <div class="slide-page-2">
-        <Pg3 class="container" />
+  <div style="height: 100%;">
+    <div class="first-video" v-if="first">
+      <video
+        webkit-playsinline
+        playsinline
+        src="/video/开始视频.mp4"
+        autoplay="autoplay"
+        ref="vidRef"
+        @play="pause()"
+        @pause="play()"
+        @ended="first = false"
+      />
+    </div>
+    <div v-else style="height: 100%;">
+      <Bell class="bell" />
+      <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>
       </div>
     </div>
   </div>
@@ -22,36 +36,61 @@ import Bell from '@/components/Bell.vue'
 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 parallaxing from '@/utils/parallaxing.js'
 
-const { play } = useModel('audio')
+const { play, pause } = useModel('audio');
+const vidRef = ref();
+const first = ref(true);
+
+watch(first, (val) => {
+  if (!val) {
+    const t = setTimeout(() => {
+      var slidepage = new window.slidePage({
+        slideContainer: '.slide-container',
+        slidePages: '.slide-page',
+        page: 1,
+        refresh: false,
+        dragMode: false,
+        useWheel: true,
+        useSwipe: true,
+        useAnimation : true,
+
+        // Events
+        before: function(origin,direction,target){},
+        after: function(origin,direction,target){},
+    });
+    }, 500);
+  }
+});
 
 onMounted(() => {
-  parallaxing()
+  vidRef.value.play();
+
+  // parallaxing()
   play()
-  //   var slidepage = new window.slidePage({
-  //     slideContainer: '.slide-container',
-  //     slidePages: '.slide-page',
-  //     page: 1,
-  //     refresh: false,
-  //     dragMode: false,
-  //     useWheel: true,
-  //     useSwipe: true,
-  //     useAnimation : true,
-
-  //     // Events
-  //     before: function(origin,direction,target){},
-  //     after: function(origin,direction,target){},
-  //  });
 })
 </script>
 
 <style lang="less">
+.first-video {
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+
+  & > video {
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .bell {
-  right: 30px;
-  top: 30px;
-  z-index: 100;
   position: fixed;
+  z-index: 100;
+  right: 24px;
+  top: 24px
 }
 
 .pages {

src/pages/pg1/index.vue

@@ -54,7 +54,6 @@
     active.value = next;
   }
 
-
 </script>
 
 <style lang="less" scoped>
@@ -91,7 +90,7 @@
     }
 
     .body {
-      margin-top: 20vh;
+      margin-top: 10vh;
     }
 
     .part2 {

src/pages/pg3/Ink.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ink-box">
     <div>
-      <InkEffect class="ink-cover" :src="src" :active="active" />
+      <InkEffect class="ink-cover" :src="src" v-if="active" :active="true" />
       <!-- <img class="ink-back" :src="src" alt="" > -->
     </div>
   </div>

src/pages/pg4/Share.vue

@@ -5,13 +5,17 @@
       <img src="/images/pg4/btn_badge.png" alt="" @click="emit('badge')">
     </div>
     <div class="share-txt txt">
-      目前总种植数量: 35896690
+      目前总种植数量: {{user.num}}
     </div>
   </div>
 </template>
 
 <script setup>
-  const emit = defineEmits(['share', 'badge'])
+  import { useModel } from '@zjxpcyc/vue-tiny-store';
+
+  const emit = defineEmits(['share', 'badge']);
+
+  const { user } = useModel('user');
 </script>
 
 <style lang="less" scoped>

src/utils/resources.js

@@ -10,36 +10,109 @@ export const audios = [
 
 // 预加载资源
 export const resources = [
-  { image: './images/BG.jpg', },
-  { image: './images/loading/main.png', },
-  { image: './images/loading/loader.png', },
-  { image: './images/loading/allrights.png', },
-  { image: './images/pg1/bell.png', },
-  { image: './images/pg1/earth.png', },
-  { image: './images/pg1/honour.png', },
-  { image: './images/pg1/line1.png', },
-  { image: './images/pg1/line2.png', },
-  { image: './images/pg1/logo.png', },
-  { image: './images/pg1/peace.png', },
-  { image: './images/pg1/stele.png', },
-  { image: './images/pg1/wall.png', },
-  { image: './images/pg2/cloud-left.png', },
-  { image: './images/pg2/cloud-right.png', },
-  { image: './images/pg2/mountain.png', },
-  { image: './images/pg2/ruins.png', },
-  { image: './images/pg2/stele.png', },
-  { image: './images/pg2/story.png', },
-  { image: './images/pg2/flower/1-1.png', },
-  { image: './images/pg2/flower/1-2.png', },
-  { image: './images/pg2/flower/1-3.png', },
-  { image: './images/pg2/flower/1-4.png', },
-  { image: './images/pg2/flower/右-小.png', },
-  { image: './images/pg2/flower/左-小.png', },
-  { image: './images/bk1/flip.png', },
-  { image: './images/bk1/flower.png', },
-  { image: './images/bk1/goback.png', },
-  { image: './images/pg2-2/组4.png', },
-  { image: './images/pg2-2/照片4.png', },
-  { image: './images/pg2-2/图.png', },
-  { image: './images/pg2-2/紫金草行动logo拷贝.png', },
+  { image: './images/loading/center.png' },
+  { image: './images/loading/飞机1.png' },
+  { image: './images/loading/飞机2.png' },
+  { image: './images/loading/飞机3.png' },
+
+  // { image: './images/BG.jpg', },
+  { image: './images/close.png' },
+  { image: './images/cloud-texture.png' },
+  { image: './images/down.png' },
+  { image: './images/fl-bg.png' },
+  { image: './images/goback.png' },
+  { image: './images/logo.png' },
+  { image: './images/paper-bg.png' },
+  { image: './images/share.jpg' },
+  { image: './images/广电logo.png' },
+  { image: './images/电视台二维码.png' },
+
+  { image: './images/pg1/2014.png' },
+  { image: './images/pg1/bell.png' },
+  { image: './images/pg1/bg1.png' },
+  { image: './images/pg1/bg2.png' },
+  { image: './images/pg1/earth.png' },
+  { image: './images/pg1/honour.png' },
+  { image: './images/pg1/light-2.png' },
+  { image: './images/pg1/light.png' },
+  { image: './images/pg1/logo.png' },
+  { image: './images/pg1/md1-1.jpg' },
+  { image: './images/pg1/md2-header.png' },
+  { image: './images/pg1/peace.png' },
+
+  { image: './images/pg2/1939年.png' },
+  { image: './images/pg2/content-bg.png' },
+  { image: './images/pg2/flower1.png' },
+  { image: './images/pg2/flower2.png' },
+  { image: './images/pg2/map.png' },
+  { image: './images/pg2/text1.png' },
+  { image: './images/pg2/text2.png' },
+  { image: './images/pg2/废墟.png' },
+  { image: './images/pg2/废墟color.png' },
+  { image: './images/pg2/箭头-右.png' },
+
+  { image: './images/pg2-2/图.png' },
+  { image: './images/pg2-2/照片4.png' },
+  { image: './images/pg2-2/紫金草行动logo拷贝.png' },
+  { image: './images/pg2-2/组4.png' },
+
+  { image: './images/pg3/1.png' },
+  { image: './images/pg3/1937.png' },
+  { image: './images/pg3/2.png' },
+  { image: './images/pg3/3.png' },
+  { image: './images/pg3/4.png' },
+  { image: './images/pg3/5.png' },
+  { image: './images/pg3/arrow.png' },
+  { image: './images/pg3/btn.png' },
+  { image: './images/pg3/jing.png' },
+  { image: './images/pg3/left-bg.png' },
+  { image: './images/pg3/map.png' },
+  { image: './images/pg3/nan.png' },
+  { image: './images/pg3/right-bg.png' },
+  { image: './images/pg3/stele.png' },
+
+  { image: './images/pg4/beijing.png' },
+  { image: './images/pg4/btn_badge.png' },
+  { image: './images/pg4/btn_share.png' },
+  { image: './images/pg4/planting.png' },
+  { image: './images/pg4/播撒种子.png' },
+  { image: './images/pg4/重播.png' },
+
+  { image: './images/pg4/plant/中国-.png' },
+  { image: './images/pg4/plant/中国.png' },
+  { image: './images/pg4/plant/加拿大-.png' },
+  { image: './images/pg4/plant/加拿大.png' },
+  { image: './images/pg4/plant/土耳其-.png' },
+  { image: './images/pg4/plant/土耳其.png' },
+  { image: './images/pg4/plant/德国-.png' },
+  { image: './images/pg4/plant/德国.png' },
+  { image: './images/pg4/plant/新加坡-.png' },
+  { image: './images/pg4/plant/新加坡.png' },
+  { image: './images/pg4/plant/新西兰-.png' },
+  { image: './images/pg4/plant/新西兰.png' },
+  { image: './images/pg4/plant/日本-.png' },
+  { image: './images/pg4/plant/日本.png' },
+  { image: './images/pg4/plant/期待.png' },
+  { image: './images/pg4/plant/澳大利亚-.png' },
+  { image: './images/pg4/plant/澳大利亚.png' },
+  { image: './images/pg4/plant/瑞士-.png' },
+  { image: './images/pg4/plant/瑞士.png' },
+  { image: './images/pg4/plant/美国-.png' },
+  { image: './images/pg4/plant/美国.png' },
+  { image: './images/pg4/plant/芬兰-.png' },
+  { image: './images/pg4/plant/芬兰.png' },
+  { image: './images/pg4/plant/英国-.png' },
+  { image: './images/pg4/plant/英国.png' },
+  { image: './images/pg4/plant/韩国-.png' },
+  { image: './images/pg4/plant/韩国.png' },
+  { image: './images/pg4/plant/马来西亚-.png' },
+  { image: './images/pg4/plant/马来西亚.png' },
+
+  // { image: './images/bk1/flip.png', },
+  // { image: './images/bk1/flower.png', },
+  // { image: './images/bk1/goback.png', },
+  // { image: './images/pg2-2/组4.png', },
+  // { image: './images/pg2-2/照片4.png', },
+  // { image: './images/pg2-2/图.png', },
+  // { image: './images/pg2-2/紫金草行动logo拷贝.png', },
 ];