feats

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 './pages/Loading.vue';
+  import Loading from './pages/loading/index.vue';
 
   const { el, play } = useModel('audio');
   const { setUser, contries } = useModel('user');

src/First.vue

@@ -9,7 +9,7 @@
       loop="loop"
       x5-video-player-type="h5"
       id="firstVideo"
-      src="/video/和平宣言-视频-压缩.mp4"
+      src="/video/和平宣言.mp4"
     ></video>
   </div>
 </template>

src/pages/loading/index.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="page pg-bg loading-pg" @click="onClick" @touchmove="onClick">
+    <div class="header abs">
+      <Bell />
+    </div>
+    <div class="content">
+      <div class="loading-main">
+        <div class="main-img">
+          <div class="img-cover">
+          </div>
+        </div>
+        <div class="txt loading-text">
+          <div>
+            <span class="txt-shine">L</span>
+            <span class="txt-shine">o</span>
+            <span class="txt-shine">a</span>
+            <span class="txt-shine">d</span>
+            <span class="txt-shine">i</span>
+            <span class="txt-shine">n</span>
+            <span class="txt-shine">g</span>
+            <span class="txt-shine">..</span>
+          </div>
+          <div>{{percent}}</div>
+        </div>
+      </div>
+    </div>
+    <DownArrow v-if="percent == '100%'" style="bottom: 120px" />
+    <!-- <div class="footer abs txt">
+      主办单位：中共南京市委网信办、共青团南京市委员会、南京广播电视集团、侵华日军南京大屠杀遇难同胞纪念馆
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+  import { computed, onMounted, ref } from 'vue';
+  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 onClick = () => {
+    if (percent.value !== '100%') return;
+
+    finished.value = true;
+    emit('ready');
+  }
+
+  const onProcess = (val) => {
+    const p = Number(val * 100).toFixed(2);
+    if (p >= 100) {
+      return percent.value = '100%';
+    } else {
+      return percent.value = `${p}%`
+    }
+  }
+
+  onMounted(() => {
+    preload(onProcess)
+  });
+</script>
+
+<style lang="less" scoped>
+.loading-pg {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .loading-main {
+      position: relative;
+      text-align: center;
+      width: 80vw;
+      flex: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .main-img {
+        flex: none;
+        width: 20vw;
+        position: relative;
+
+        .img-cover {
+          position: relative;
+          width: 20vw;
+          height: 20vw;
+          z-index: 4;
+          background: url(/images/loading/flower2.png);
+          background-size: 100% 100%;
+
+          &::before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background: url(/images/loading/flower1.png);
+            background-size: 100% 100%;
+            -webkit-mask: -webkit-linear-gradient(90deg, #000 v-bind(percent), transparent v-bind(percent));
+            -webkit-mask: linear-gradient(0, #000 v-bind(percent), transparent v-bind(percent));
+            mask: linear-gradient(0, #000 v-bind(percent), transparent v-bind(percent));
+          }
+        }
+
+      }
+
+      .loading-text {
+        margin-left: 24px;
+        flex: none;
+        display: inline-block;
+        font-size: 24px;
+
+        span {
+          display: inline-block;
+          padding: 0 2px;
+          color: #434444;
+          opacity: 1;
+
+          &:nth-child(1) {
+            transform: rotate(-10deg);
+            animation-delay: 0;
+          }
+          &:nth-child(2) {
+            transform: rotate(-5deg) translateY(-2px);
+            animation-delay: 600ms;
+          }
+          &:nth-child(3) {
+            transform: rotate(5deg) translateY(-2px);
+            animation-delay: 1200ms;
+          }
+          &:nth-child(4) {
+            transform: rotate(10deg);
+            animation-delay: 1800ms;
+          }
+          &:nth-child(5) {
+            transform: rotate(5deg) translateY(2px);
+            animation-delay: 2400ms;
+          }
+          &:nth-child(6) {
+            transform: rotate(0) translateY(2px);
+            animation-delay: 3000ms;
+          }
+          &:nth-child(7) {
+            transform: rotate(-10deg) translateY(2px);
+            animation-delay: 3600ms;
+          }
+          &:nth-child(8) {
+            transform: rotate(-10deg) translateY(2px);
+            animation-delay: 4200ms;
+          }
+        }
+
+        .txt-shine {
+          // animation: txt-shine 1.2s ease-in-out infinite alternate;
+        }
+
+        @keyframes txt-shine {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+
+      }
+
+    }
+  }
+
+  .header {
+    top: 24px;
+    right: 24px;
+    width: 40px;
+  }
+
+  .footer {
+    font-size: 12px;
+    text-align: center;
+    bottom: 12px;
+    left: 0;
+    padding: 0 16px;
+  }
+}
+</style>

src/pages/pg3/index.vue

@@ -17,7 +17,7 @@
       </p>
     </Animate>
     <div class="nanjing">
-      <div>
+      <div style="position: relative;">
         <Animate
           comp="img"
           src="/images/pg3/nan.png"
@@ -44,16 +44,18 @@
           :ready="show"
         />
       </div>
+      <div>
+        <Animate
+          class="nj-1937"
+          comp="img"
+          src="/images/pg3/1937.png"
+          name="animate__fadeInLeft"
+          delay="1000ms"
+          alt=""
+          :ready="show"
+        />
+      </div>
     </div>
-    <Animate
-      class="nj-1937"
-      comp="img"
-      src="/images/pg3/1937.png"
-      name="animate__zoomIn"
-      delay="500ms"
-      alt=""
-      :ready="show"
-    />
     <div class="content">
       <Animate
         class="txt"
@@ -195,7 +197,7 @@
   }
 
   .nanjing {
-    width: 50vw;
+    width: 70vw;
     margin: auto;
     display: flex;
     align-items: center;
@@ -206,15 +208,15 @@
     }
 
     .stele {
-      width: 8vw;
-      bottom: 2vw;
-      left: 8vw;
+      width: 6vw;
+      bottom: 1vw;
+      left: 6vw;
     }
   }
 
   .nj-1937 {
-    width: 16vw;
-    margin: auto;
+    width: 32vw;
+    margin-top: -5vw;
   }
 
   .content {

src/pages/pg4/video.vue

@@ -4,7 +4,7 @@
       <video
         webkit-playsinline
         playsinline
-        src="/video/和平宣言-视频-压缩.mp4"
+        src="/video/和平宣言.mp4"
         preload="preload"
         autoplay="autoplay"
         :controls="controls"

src/utils/resources.js

@@ -1,7 +1,7 @@
 
 export const videos = [
   // './video/紫金草走向世界010.mp4',
-  // './video/和平宣言-视频-压缩.mp4',
+  // './video/和平宣言.mp4',
 ]
 
 export const audios = [