H5
/
njDaTuSha
Слідкувати 4
Зірка 0
Відгалуження 0
Код Питання 0 Запити до злиття 0 Релізи 1 Wiki Activity
Browse Source

Merge branch 'master' of http://git.ycjcjy.com/H5/njDaTuSha

Yansen 1 year ago
parent
7f73892871 bc14abf49e
commit
ab2d593d3b
19 changed files with 166 additions and 89 deletions
Split View Show Diff Stats
  1. 37
    2
      index.html
  2. BIN
      public/audio/audio2.mp3
  3. 4
    3
      public/config.js
  4. BIN
      public/images/down.png
  5. BIN
      public/images/down1.png
  6. BIN
      public/images/pg1/videocover.jpg
  7. BIN
      public/images/pg2-2/紫金草跳转按钮.gif
  8. BIN
      public/images/share.jpg
  9. BIN
      public/video/9年活动.mp4
  10. 8
    4
      src/components/DownArrow.vue
  11. 1
    0
      src/main.js
  12. 1
    1
      src/pages/bk1/pg1.vue
  13. 1
    2
      src/pages/pg1/Md1.vue
  14. 82
    56
      src/pages/pg1/video.vue
  15. 10
    13
      src/pages/pg2-2/index.vue
  16. 1
    1
      src/pages/pg3/index.vue
  17. 1
    1
      src/pages/share/index.vue
  18. 2
    0
      src/utils/resources.js
  19. 18
    6
      src/utils/wx.js

+ 37
- 2
index.html View File 

@@ -4,7 +4,9 @@
4 4 
     <meta charset="UTF-8" />
5 5 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6 6 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
7 
-    <script src="./wx/jweixin-1.6.0.js"></script>
7 
+    <meta name="screen-orientation" content="portrait">
8 
+    <!-- <script src="./wx/jweixin-1.6.0.js"></script> -->
9 
+    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
8 10 
     <script src="./jquery.1.9.1.js"></script>
9 11 
     <script src="./turn.min.js"></script>
10 12 
     <script src="./config.js"></script>
 
@@ -19,14 +21,47 @@
19 21 
       type="text/css"
20 22 
     /> -->
21 23 
     <link rel="stylesheet" href="./fonts/SourceHanSerifCN-Medium/SourceHanSerifCN-Medium.css">
22 
-    <title>向世界讲述——南京1937</title>
24 
+    <title>让和平的“种子”，在全世界生根发芽</title>
23 25 
     <!-- <script src="./vconsole.min.js"></script>
24 26 
     <script>
25 27 
       const vConsole = new VConsole();
26 28 
     </script> -->
29 
+    <style>
30 
+      #vid-cover {
31 
+        position: relative;
32 
+        z-index: 20000;
33 
+      }
34 
+
35 
+      #vid-cover .goback {
36 
+        position: fixed;
37 
+        top: 10px;
38 
+        width: 50px;
39 
+        height: 50px;
40 
+      }
41 
+
42 
+      /* 横屏 */
43 
+      @media all and (orientation : landscape) {
44 
+        #vid-cover .goback {
45 
+          left: 10px;
46 
+        }
47 
+      }
48 
+      /* 竖屏 */
49 
+      @media all and (orientation : portrait) {
50 
+        #vid-cover .goback {
51 
+          right: 10px;
52 
+          transform: rotate(90deg);
53 
+        }
54 
+      }
55 
+    </style>
27 56 
   </head>
28 57 
   <body>
58 
+    <img src="/share.jpg" style="display: none;" />
29 59 
     <div id="app"></div>
30 60 
     <script type="module" src="/src/main.js"></script>
31 61 
   </body>
62 
+  <script>
63 
+    var el = document.createElement('div');
64 
+    el.id = 'vid-cover'
65 
+    document.documentElement.appendChild(el);
66 
+  </script>
32 67 
 </html>

BIN
public/audio/audio2.mp3 View File


+ 4
- 3
public/config.js View File 

@@ -1,8 +1,9 @@
1 1 
 // 微信分享
2 2 
 const shareOptTpl = {
3 
-  title: '向世界讲述——南京1937',
4 
-  desc: '',
5 
-  imgUrl: location.origin + location.pathname.replace('index.html', '') + 'share.jpg',
3 
+  title: '让和平的“种子”，在全世界生根发芽',
4 
+  desc: '紫金草行动：向世界讲述南京1937',
5 
+  link: 'http://zjc.nbs.cn/index.html',
6 
+  imgUrl: 'http://zjc.nbs.cn/share.jpg',
6 7 
 }
7 8
8 9 
 // 跳转链接

BIN
public/images/down.png View File


BIN
public/images/down1.png View File


BIN
public/images/pg1/videocover.jpg View File


BIN
public/images/pg2-2/紫金草跳转按钮.gif View File


BIN
public/images/share.jpg View File


BIN
public/video/9年活动.mp4 View File


+ 8
- 4
src/components/DownArrow.vue View File 

@@ -17,14 +17,18 @@
17 17 
   }
18 18
19 19 
   @keyframes mv-down {
20 
-    from {
20 
+    0% {
21 21 
       transform: translateY(0);
22 22 
       opacity: 1;
23 23 
     }
24 24
25 
-    to {
26 
-      transform: translateY(2vh);
27 
-      opacity: 0;
25 
+    60% {
26 
+      opacity: 1;
27 
+    }
28 
+
29 
+    100% {
30 
+      transform: translateY(4vh);
31 
+      opacity: .1;
28 32 
     }
29 33 
   }
30 34 
 </style>

+ 1
- 0
src/main.js View File 

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
2 2 
 import VueSplide from '@splidejs/vue-splide';
3 3 
 import 'animate.css'
4 4 
 import '@splidejs/vue-splide/css/core';
5 
+
5 6 
 import { getCode, redirect } from '@/utils/wx';
6 7
7 8 
 import App from './App.vue'

+ 1
- 1
src/pages/bk1/pg1.vue View File 

@@ -45,7 +45,7 @@
45 45 
         加拿大、日本、韩国、马拉西亚、澳大利亚、<br>
46 46 
         新西兰、新加坡，紫金草在14个国家被点亮，<br>
47 47 
         播撒和平的种子。<br>
48 
-        近20万枚紫金草徽章佩戴在了人们的心口。
48 
+        近20万枚紫金草徽章佩戴在了人们的胸前。
49 49 
       </p>
50 50 
     </div>
51 51

+ 1
- 2
src/pages/pg1/Md1.vue View File 

@@ -11,8 +11,7 @@
11 11 
           中国、芬兰、土耳其、德国、英国、瑞士、美国、<br>
12 12 
           加拿大、日本、韩国、马拉西亚、澳大利亚、<br>
13 13 
           新西兰、新加坡，紫金草在14个国家被点亮，<br>
14 
-          播撒和平的种子。<br>
15 
-          近20万枚紫金草徽章佩戴在了人们的心口。
14 
+          播撒和平的种子。
16 15 
         </p>
17 16 
         <!-- <div class="map-img" ref="mapRef" /> -->
18 17 
         <!-- <img class="map-img" src="/images/pg2/map.gif" alt=""> -->

+ 82
- 56
src/pages/pg1/video.vue View File 

@@ -1,22 +1,30 @@
1 1 
 <template>
2 
-  <div class="page pg-bg video-pg">
3 
-    <GoBack class="goback abs" @click.stop="router.go(-1)" />
4 
-    <div class="content">
2 
+  <div class="page pg-bg video-pg" @click="onPageClick">
3 
+    <Teleport to="#vid-cover">
4 
+      <div class="goback" @click="router.go(-1)">
5 
+        <GoBack />
6 
+      </div>
7 
+    </Teleport>
8 
+    <div class="video-wrapper">
5 9 
       <video
6 10 
         webkit-playsinline
7 11 
         playsinline
8 12 
         preload="auto"
9 
-        autoplay="autoplay"
10 13 
         controls="controls"
14 
+        x5-video-player-type="h5"
15 
+        x5-video-orientation="landscape"
16 
+        x5-video-player-fullscreen="false"
17 
+        poster="/images/pg1/videocover.jpg"
11 18 
         ref="mediaRef"
12 19 
         src="/video/9年活动.mp4"
13 
-      ></video>
20 
+        @click="onVidClick"
21 
+      >not support</video>
14 22 
     </div>
15 23 
   </div>
16 24 
 </template>
17 25
18 26 
 <script setup>
19 
-import { onMounted, ref } from "vue";
27 
+import { onBeforeUnmount, onMounted, ref } from "vue";
20 28 
 import { useRouter } from "vue-router";
21 29 
 import { useModel } from "@zjxpcyc/vue-tiny-store";
22 30 
 import GoBack from "@/components/GoBack.vue";
 
@@ -25,76 +33,94 @@ const { pause } = useModel('audio');
25 33
26 34 
 const router = useRouter();
27 35 
 const mediaRef = ref();
28 
-const show = ref(false);
29 36 
 const controls = ref();
30 37
31 38 
 onMounted(() => {
32 39 
   pause();
33 40
34 
-  // 自动播放
35 
-  try {
36 
-    const t = setTimeout(() => {
37 
-      clearTimeout(t);
38 
-
39 
-      // 可能抛出异步异常
40 
-      const p = mediaRef.value.play();
41 
-      if (p) {
42 
-        p.then(() => {
43 
-          mediaRef.value.play();
44 
-        }).catch((err) => {
45 
-          console.log("--play-err---", err);
46 
-          controls.value = "controls";
47 
-        });
48 
-      }
49 
-    }, 300);
50 
-  } catch (err) {
51 
-    console.log("---err---", err);
52 
-    controls.value = "controls";
53 
-  }
41 
+  // // 自动播放
42 
+  // try {
43 
+  //   const t = setTimeout(() => {
44 
+  //     clearTimeout(t);
45 
+
46 
+  //     // 可能抛出异步异常
47 
+  //     const p = mediaRef.value.play();
48 
+  //     if (p) {
49 
+  //       p.then(() => {
50 
+  //         mediaRef.value.play();
51 
+  //       }).catch((err) => {
52 
+  //         console.log("--play-err---", err);
53 
+  //         controls.value = "controls";
54 
+  //       });
55 
+  //     }
56 
+  //   }, 300);
57 
+  // } catch (err) {
58 
+  //   console.log("---err---", err);
59 
+  //   controls.value = "controls";
60 
+  // }
61 
+
62 
+
63 
+  // // 自动全屏
64 
+  // function launchFullscreen(element) {
65 
+  //   if(element.requestFullscreen) {
66 
+  //     element.requestFullscreen();
67 
+  //   } else if(element.mozRequestFullScreen) {
68 
+  //     element.mozRequestFullScreen();
69 
+  //   } else if(element.webkitRequestFullscreen) {
70 
+  //     element.webkitRequestFullscreen();
71 
+  //   } else if(element.msRequestFullscreen) {
72 
+  //     element.msRequestFullscreen();
73 
+  // }}
74 
+
75 
+  // launchFullscreen(mediaRef.value);
54 76 
 });
77 
+
55 78 
 </script>
56 79
57 80 
 <style lang="less" scoped>
81 
+
82 
+/* 横屏 */
83 
+@media all and (orientation : landscape) {
84 
+  .video-pg {
85 
+    width: 100vw;
86 
+    height: 100vh;
87 
+  }
88 
+}
89 
+
90 
+/* 竖屏 */
91 
+@media all and (orientation : portrait) {
92 
+  .video-pg {
93 
+    width: 100vh;
94 
+    height: 100vw;
95 
+    transform-origin: center left;
96 
+    transform: rotate(90deg) translate3d(-50vw, -50vw, 0);
97 
+  }
98 
+}
99 
+
58 100 
 .video-pg {
59 101 
   position: relative;
60 102 
   background-color: #000;
103 
+  overflow: hidden;
61 104 
   display: flex;
62 105 
   align-items: center;
106 
+  justify-content: center;
63 107
64 108 
   .goback {
65 
-    z-index: 100;
109 
+    position: fixed;
110 
+    z-index: 20001;
66 111 
     left: 10px;
67 112 
     top: 10px;
68 113 
   }
69 
-  .content {
114 
+
115 
+  .video-wrapper {
70 116 
     position: relative;
71 
-    video {
72 
-      // width: 100%;
73 
-      width: 100vw;
74 
-      z-index: 1;
75 
-    }
76 
-    .play-action {
77 
-      position: absolute;
78 
-      z-index: 2;
79 
-      bottom: -80px;
80 
-      width: 100%;
81 
-      height: 80px;
82 
-      display: flex;
83 
-      align-items: center;
84 
-      justify-content: center;
85 
-
86 
-      img {
87 
-        width: 100px;
88 
-        width: 30vw;
89 
-        height: 10vw;
90 
-      }
91 
-      img:first-child {
92 
-        margin-right: 20px;
93 
-      }
94 
-      img:last-child {
95 
-        margin-left: 20px;
96 
-      }
97 
-    }
117 
+    flex: none;
118 
+    width: 90%;
119 
+    height: 90%;
120 
+  }
121 
+
122 
+  video {
123 
+    width: 100%;
98 124 
   }
99 125 
 }
100 126 
 </style>

+ 10
- 13
src/pages/pg2-2/index.vue View File 

@@ -122,22 +122,13 @@
122 122 
           <br />唤起人们对和平的向往和珍视，
123 123 
           <br />南京广播电视集团发起了“紫金草行动”。<br />九年了，
124 124 
           <br />
125 
-          <Animate
126 
-            comp="span"
127 
-            class="animate__infinite"
128 
-            name="animate__headShake"
129 
-            style="display: inline-block; width: 50vw; margin-top: 10px;"
130 
-            delay="300ms"
131 
-            :ready="show3"
132 
-            @click="onGoFoward"
133 
-          >
134 
-            <img src="/images/pg2-2/goAgain.png" alt="">
135 
-          </Animate>
125 
+          <!-- 这个动效不要了 -->
126 
+          <img class="" src="/images/pg2-2/goAgain.png" alt="" @click="onGoFoward">
136 127 
         </p>
137 128 
       </Animate>
138 129 
     </div>
139 130 
     <div class="bk-pd content">
140 
-      <img class="zjclogo-img" src="/images/pg2-2/紫金草行动logo拷贝.png" />
131 
+      <img class="zjclogo-img" src="/images/pg2-2/紫金草跳转按钮.gif" @click="onGoFoward" />
141 132 
     </div>
142 133 
   </div>
143 134 
 </template>

@@ -272,12 +263,18 @@ const onGoFoward = () => {
272 263 
   .content {
273 264 
     .topbottom {
274 265 
       margin: 0 auto;
266 
+
267 
+      img {
268 
+        width: 50vw;
269 
+        margin: auto;
270 
+        margin-top: 16px;
271 
+      }
275 272 
     }
276 273 
   }
277 274 
   .content {
278 275 
     .zjclogo-img {
279 276 
       margin: 1em auto;
280 
-      width: 38%;
277 
+      width: 60%;
281 278 
       display: inline-block;
282 279 
     }
283 280 
   }

+ 1
- 1
src/pages/pg3/index.vue View File 

@@ -64,7 +64,7 @@
64 64 
         delay="1s"
65 65 
         :ready="show"
66 66 
       >
67 
-        正如“紫金草行动”初衷一样，我们身边越来越多人，用自己的方式向世界讲述1937，他们不同年龄、不同肤色、不同国家、不同职业，但他们讲述的是全人类共同的心愿。
67 
+        正如“紫金草行动”初衷一样，我们身边越来越多人，用自己的方式向世界讲述南京1937，他们不同年龄、不同肤色、不同国家、不同职业，但他们讲述的是全人类共同的心愿。
68 68 
       </Animate>
69 69 
     </div>
70 70

+ 1
- 1
src/pages/share/index.vue View File 

@@ -10,7 +10,7 @@
10 10 
       <div class="content txt">
11 11 
         <div class="name">{{ user.nickname || "朋友" }}</div>
12 12 
         <div style="line-height: 1.6em">
13 
-          您是第{{user.num}}位“紫金草行动”参与者。播撒紫金草种子，让和平之花开满全城。
13 
+          您是第{{user.num}}位“紫金草行动”参与者。播撒紫金草种子，让和平之花开满全世界。
14 14 
         </div>
15 15 
       </div>
16 16 
     </div>

+ 2
- 0
src/utils/resources.js View File 

@@ -63,6 +63,7 @@ export const resources = [
63 63 
   { image: './images/pg2-2/图.png' },
64 64 
   { image: './images/pg2-2/照片4.png' },
65 65 
   { image: './images/pg2-2/紫金草行动logo拷贝.png' },
66 
+  { image: './images/pg2-2/紫金草跳转按钮.gif' },
66 67 
   { image: './images/pg2-2/组4.png' },
67 68
68 69 
   { image: './images/pg3/1.png' },
 
@@ -88,6 +89,7 @@ export const resources = [
88 89 
   { image: './images/pg4/播撒种子.png' },
89 90 
   { image: './images/pg4/重播.png' },
90 91 
   { image: './images/pg4/vid-poster.png' },
92 
+  { image: './images/pg1/videocover.jpg' },
91 93
92 94 
   { image: './images/pg4/plant/中国-.png' },
93 95 
   { image: './images/pg4/plant/中国.png' },

+ 18
- 6
src/utils/wx.js View File 

@@ -32,7 +32,6 @@ function wxsdk() {
32 32 
   // API_BASE 来源 public/config.js
33 33 
   const apiBase = API_BASE // import.meta.env.VITE_APP_API_BASE
34 34
35 
-
36 35 
   // 分享接口
37 36 
   const shareAPIs = [
38 37 
     // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
 
@@ -51,6 +50,8 @@ function wxsdk() {
51 50 
     'onMenuShareQZone',
52 51 
   ]
53 52
53 
+  let inited = false;
54 
+
54 55 
   function init() {
55 56 
     if (isDev) return;
56 57 
     const url = window.location.href;
 
@@ -77,12 +78,13 @@ function wxsdk() {
77 78 
     })
78 79 
   }
79 80
80 
-  // 立即执行
81 
-  init();
82 
-
83 81 
   function share(params = {}) {
84 82 
     if (isDev) return;
85 83
84 
+    if (!inited) {
85 
+      init();
86 
+    }
87 
+
86 88 
     wx.ready(() => {
87 89
88 90 
       const shareData = {
 
@@ -93,10 +95,20 @@ function wxsdk() {
93 95 
       console.log('---分享参数-->', shareData);
94 96
95 97 
       for (let api of shareAPIs) {
96 
-        if (typeof wx[api] === 'function') continue;
97 
-        wx[api](shareData);
98 
+        wx[api]({
99 
+          ...shareData,
100 
+          success: () => {
101 
+            console.log('分享成功: ', api)
102 
+          },
103 
+        });
98 104 
       }
99 105 
     });
106 
+
107 
+    wx.error(function(res){
108 
+      console.error('wx js-sdk error');
109 
+      console.error(res);
110 
+      console.error('<==============');
111 
+    });
100 112 
   }
101 113
102 114 
   return {