feats

public/config.js

@@ -9,4 +9,5 @@ const shareOptTpl = {
 const link1URL = 'http://h5.njyunzhi.com/wenhua818-2/index.html';
 
 // 分享接口地址
-const API_BASE = 'http://test-h5.njyunzhi.com/api/wx/jsapi';
+// 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 './pages/Loading.vue';
+  import Loading from './First.vue';
 
   const { el } = useModel('audio');
   const { setUser } = useModel('user');
@@ -38,8 +38,8 @@
 </script>
 
 <template>
-  <Loading v-if="!show" class="loading" @ready="(show = true)" />
-  <router-view v-else></router-view>
+  <!-- <Loading v-if="!show" class="loading" @ready="(show = true)" /> -->
+  <router-view></router-view>
 
   <audio ref="el" src="/audio/audio.mp3" style="max-width: 0"  preload="auto"></audio>
 </template>

src/First.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="page first-pg">
+    <video
+      ref="el"
+      webkit-playsinline
+      playsinline
+      preload="auto"
+      autoplay="autoplay"
+      loop="loop"
+      x5-video-player-type="h5"
+      id="firstVideo"
+      src="/video/和平宣言-视频-压缩.mp4"
+    ></video>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+
+  const el = ref();
+
+  onMounted(() => {
+    const ua = navigator.userAgent;
+    if (ua.toLowerCase().indexOf('android') > -1) {
+      const vid = el.value;
+
+      vid.play();
+
+      if (vid.currentTime) {
+        vid.pause();
+
+        const t = setTimeout(() => {
+          vid.play();
+          clearTimeout(t);
+        }, 500);
+      }
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+.first-pg {
+  position: relative;
+
+  #firstVideo {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    z-index: 0;
+    left: 0;
+    top: 0;
+  }
+}
+</style>

src/components/Bell.vue

@@ -53,7 +53,7 @@ const animate = computed(() => state.value === 1);
       flex: none;
       width: 50%;
       height: 50%;
-      border: 2px solid rgba(223, 183, 132, 1);
+      border: 2px solid rgba(255, 255, 255, 1);
       border-radius: 50%;
       opacity: 0;
     }

src/main.js

@@ -18,6 +18,7 @@ app.mount('#app');
 document.addEventListener('WeixinJSBridgeReady', () => {
   const t = setTimeout(() => {
     const vid = document.querySelector('#firstVideo');
+    console.log('-------------->', vid)
     if (vid) {
       vid.play();
     }

src/pages/pg1/CircleImg.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="light-img-box">
+    <div class="light-img-wrapper">
+      <img class="light-img-bg ani-circle" src="/images/pg1/light.png" alt="" v-if="animate">
+      <img class="light-img-bg" src="/images/pg1/light-2.png" alt="" v-else>
+      <div class="light-img-img">
+        <div>
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    animate: Boolean
+  });
+</script>
+
+<style lang="less" scoped>
+.light-img-box {
+  .light-img-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .light-img-bg {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 0;
+
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
+
+    .light-img-img {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      & > div {
+        flex: none;
+        width: calc(100% - 24px) !important;
+        height: calc(100% - 24px) !important;
+      }
+    }
+  }
+}
+</style>

src/pages/pg1/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-<img src="/images/pg1/logo.png" />
+<img src="/images/广电logo.png" />
 </template>
 
 <script setup>

src/pages/pg1/P1.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="p1-box">
     <div class="content-left">
-      <img
-        class="main-img animate__animated animate__rotateIn"
-        style="animation-delay: 500ms"
-        src="/images/pg1/earth.png"
-        alt=""
-      >
-      <div class="back-line">
-        <img src="/images/pg1/line1.png" alt="">
-      </div>
+      <CircleImg class="main-img" :animate="animate">
+        <img
+          src="/images/pg1/earth.png"
+          alt=""
+        >
+      </CircleImg>
     </div>
     <div class="content-right txt">      
       <p class="animate__animated animate__fadeInRight" style="animation-delay: 100ms">
@@ -22,6 +19,11 @@
 </template>
 
 <script setup>
+  import CircleImg from './CircleImg.vue';
+  
+  const props = defineProps({
+    animate: Boolean
+  });
 </script>
 
 <style lang="less" scoped>
@@ -38,48 +40,6 @@
       z-index: 10;
     }
 
-    .back-line {
-      position: absolute;
-      z-index: 0;
-      left: -4vw;
-      top: 0;
-
-      img {
-        width: auto;
-        height: 40vw;
-        position: relative;
-        z-index: 0;
-      }
-
-      &::after {
-        content: '';
-        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-delay: 1s;
-        animation-timing-function: cubic-bezier(0.07, 0.85, 0.18, 0.96);
-        animation-fill-mode: forwards;
-        z-index: 10;
-      }
-      
-      @keyframes erasure {
-        from {
-          transform: scaleY(100%);
-        }
-
-        to {
-          transform: scaleY(0);
-        }
-      }
-    }
   }
 
   .content-right {

src/pages/pg1/P2.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="p2-box">
     <div class="content-right">
-      <img
-        class="main-img animate__animated animate__rotateIn"
-        style="animation-delay: 1.5s"
-        src="/images/pg1/honour.png"
-        alt=""
-      >
-      <div class="back-line">
-        <img src="/images/pg1/line2.png" alt="">
-      </div>
+      <CircleImg class="main-img" :animate="animate">
+        <img
+          src="/images/pg1/honour.png"
+          alt=""
+        >
+      </CircleImg>
     </div>
     <div class="content-left txt">      
-      <p class="animate__animated animate__fadeInRight" style="text-align: right; animation-delay: 2s">
+      <p class="animate__animated animate__fadeInRight" style="text-align: right; animation-delay: 100ms">
         <strong>近20万枚</strong> <br>
         紫金草徽章 <br>
         佩戴在了人们的心口
@@ -22,6 +19,11 @@
 </template>
 
 <script setup>
+  import CircleImg from './CircleImg.vue';
+
+  const props = defineProps({
+    animate: Boolean
+  });
 </script>
 
 <style lang="less" scoped>
@@ -40,48 +42,6 @@
       z-index: 10;
     }
 
-    .back-line {
-      position: absolute;
-      z-index: 0;
-      right: -4vw;
-      bottom: -10vw;
-
-      img {
-        width: auto;
-        height: 24.7vw;
-        position: relative;
-        z-index: 0;
-      }
-
-      &::after {
-        content: '';
-        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-delay: 2.5s;
-        animation-timing-function: cubic-bezier(0.07, 0.85, 0.18, 0.96);
-        animation-fill-mode: forwards;
-        z-index: 10;
-      }
-      
-      @keyframes erasure {
-        from {
-          transform: scaleY(100%);
-        }
-
-        to {
-          transform: scaleY(0);
-        }
-      }
-    }
   }
 
   .content-left {

src/pages/pg1/P3.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="p3-box">
     <div class="content-left">
-      <img
-        class="main-img animate__animated animate__rotateIn"
-        style="animation-delay: 3s"
-        src="/images/pg1/peace.png"
-        alt=""
-      >
+      <CircleImg class="main-img" :animate="animate">
+        <img
+          src="/images/pg1/peace.png"
+          alt=""
+        >
+      </CircleImg>
     </div>
     <div class="content-right txt">      
-      <p class="animate__animated animate__fadeInLeft" style="animation-delay: 3.5s">
+      <p class="animate__animated animate__fadeInLeft">
         在<strong>2亿人</strong>心中 <br>
         和平愿景被播撒
       </p>
@@ -18,6 +18,11 @@
 </template>
 
 <script setup>
+  import CircleImg from './CircleImg.vue';
+  
+  const props = defineProps({
+    animate: Boolean
+  });
 </script>
 
 <style lang="less" scoped>

src/pages/pg1/index.vue

@@ -1,29 +1,28 @@
 <template>
   <div class="page pg-bg pg1" parallax>
+    <div class="bg">
+      <div>
+        <img src="/images/pg1/bg1.png" alt="">
+      </div>
+    </div>
     <div class="conent">
       <div class="header">        
         <Logo class="logo" />
       </div>
       <div class="body" parallax-offset='-100'>
-        <Part1 class="part1" @click="onClick(1)" />
-        <Part2 class="part2" @click="onClick(2)" />
-        <Part3 class="part3" @click="onClick(3)" />
+        <Part1 class="part1" :animate="active == 1" @click="onClick(1)" />
+        <Part2 class="part2" :animate="active == 2" @click="onClick(2)" />
+        <Part3 class="part3" :animate="active == 3" @click="onClick(3)" />
       </div>
     </div>
-    <div class="footer abs animate__animated animate__fadeInUp" style="animation-delay: 4s">
-      <img src="/images/pg1/stele.png" alt="" parallax-offset='-200'>
-    </div>
-    <div class="footer stele2 animate__animated animate__fadeInUp" style="animation-delay: 4s">
-      <img src="/images/pg1/stele2.png" alt="" parallax-offset='-230'>
-    </div>
-    <div class="footer abs animate__animated animate__fadeInUp" style="animation-delay: 4.5s">
-      <img src="/images/pg1/wall.png" alt="" parallax-offset='-250'>
+    <div class="footer abs animate__animated animate__fadeInUp">
+      <img src="/images/pg1/bg2.png" alt="" parallax-offset='-200'>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { onMounted } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { useRouter } from 'vue-router';
   import Bell from '@/components/Bell.vue';
   import Logo from './Logo.vue';
@@ -37,9 +36,23 @@
     router.push(`/bk1?page=${page}`);
   }
 
+  const active = ref(1);
+
 </script>
 
 <style lang="less" scoped>
+  .bg {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    & > div {
+      position: relative;
+    }
+  }
+
   .conent {
     position: relative;
     height: 100%;
@@ -57,7 +70,7 @@
     }
 
     .body {
-      margin-top: 5vh;
+      margin-top: 20vh;
     }
 
     .part2 {
@@ -75,11 +88,4 @@
     z-index: 10;
   }
 
-  .stele2 {
-    position: absolute;
-    left: auto;
-    right: 0;
-    bottom: 0;
-    width: 32vw;
-  }
 </style>

src/style.less

@@ -39,10 +39,11 @@ img {
   /* background-image: url('/images/BG.jpg');
   background-repeat: repeat; */
 
+  background-color: #F5F5F5;
   
-  background-image: url('/images/BG.jpg');
-  background-size: 100% 100%;
-  background-repeat: repeat-y;
+  // background-image: url('/images/BG.jpg');
+  // background-size: 100% 100%;
+  // background-repeat: repeat-y;
 }
 
 .abs {
@@ -54,7 +55,7 @@ img {
 }
 
 .txt {
-  color: #5f4234;
+  color: #000;
   line-height: 2em;
 
   strong {
@@ -62,8 +63,8 @@ img {
     padding: 0 4px;
     font-size: 1.1em;
     font-weight: 700;
-    color: #b87c58;
-    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, rgba(0, 0, 0, .5) 0 2px 2px;
+    color: #fff;
+    text-shadow: 0 0 2px #8576B3, 0 0 2px #8576B3, 0 0 2px #8576B3, 0 0 2px #8576B3, rgba(0, 0, 0, .5) 0 2px 2px;
     // text-stroke: 1px #fff;
     // -webkit-text-stroke: 1px #fff;
   }
@@ -80,4 +81,18 @@ img {
   to {
     transform: scale(1.2);
   }
+}
+
+
+.ani-circle {
+  animation-name: circle;
+}
+
+@keyframes circle {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

src/utils/request.js

@@ -1,6 +1,7 @@
 import axios from "axios";
 
 const instance = axios.create({
+  baseURL: API_BASE,
   timeout: 10000,
   withCredentials: true, // 跨域
 });

src/utils/wx.js

@@ -28,7 +28,7 @@ function wxsdk() {
     const url = window.location.href;
 
     // 请求后台接口
-    fetch(`${apiBase}?url=${encodeURIComponent(url)}`).then(res => res.json()).then((res) => {
+    fetch(`${apiBase}/api/wx/jsapi?url=${encodeURIComponent(url)}`).then(res => res.json()).then((res) => {
       if (res.code === 1000) {
         const data = res.data;