Home Explore Help
Register Sign In
FED
/
dwweb-pc
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

吸血鬼wap

baichun 6 years ago
parent
1d0256cba1
commit
12bea4855d
6 changed files with 290 additions and 248 deletions
Split View Show Diff Stats
  1. 11 5
      2018专题/1807吸血鬼专题Wap-商务/src/index.html
  2. 31 23
      2018专题/1807吸血鬼专题Wap-商务/src/js/index.js
  3. 13 25
      2018专题/1807吸血鬼专题Wap-商务/src/js/task2.js
  4. 0 1
      2018专题/1807吸血鬼专题Wap-商务/src/sass/global.scss
  5. 222 194
      2018专题/1807吸血鬼专题Wap-商务/src/sass/module/_animation.scss
  6. 13 0
      2018专题/1807吸血鬼专题Wap-商务/src/sass/page/_task-2.scss

+ 11 - 5
2018专题/1807吸血鬼专题Wap-商务/src/index.html
View File 

@@ -19,13 +19,13 @@
 
 
 <body>
 
     <div id="app" v-cloak>
 
-        <div class="view-container" :style="{width:viewWidth+'px',height:viewHeight+'px',transform:viewTransform}">
 
+        <div class="view-container" :style="{width:viewWidth+'px',height:viewHeight+'px',transform:viewTransform}" @click="">
 
 
             <transition name="swiper" mode="out-in">
 
                 <!--首屏 s-->
 
                 <div class="page-primary" v-if="swiperIndex == 0" key="primary">
 
                     <div class="vampyr-logo"></div>
 
-                    <button class="primary-start-btn" @click="slideTo(2)"></button>
 
+                    <button class="primary-start-btn" @click="startGame()"></button>
 
                 </div>
 
                 <!--首屏 e-->
 
 
@@ -54,7 +54,7 @@
 
                     <!-- <button class="btn-restart-simple" @click="taskRestart"></button> -->
 
                     <button class="btn-index" @click="slideTo(0)">返回</button>
 
                     <button class="btn-start" @click="startTask()" v-if="showStartBtn"></button>
 
-                    <button class="btn-restart" @click="startTask()" v-else></button>
 
+                    <button class="btn-restart" @click="restartTask()" v-else></button>
 
                 </div>
 
                 <!--游戏主页面 e-->
 
 
@@ -666,7 +666,7 @@
 
 
                             <!--阁台之上的样子（图片）s-->
 
                             <div class="task-scene task-image image-36" v-show="task2.sceneIndex == 36" key="task2-scene36">
 
-                                <i class="icon-prev" @click="changeTask2Scene(34)"></i>
 
+                                <!-- <i class="icon-prev" @click="changeTask2Scene(34)"></i> -->
 
                                 <img data-src="./img/task/2/scene-33.jpg" alt="">
 
                                 <i class="icon-mark" @click="createDrugSucc"></i>
 
 
@@ -681,6 +681,12 @@
 
                                     </section>
 
                                 </div>
 
                                 <!--触发左边 e-->
 
+
 
+                                <p class="tip-end" v-show="task2.endTipVisible">
 
+                                    <i class="icon-mark-static"></i>
 
+                                    <span>你已完成本章任务内容</span>
 
+                                    <i class="icon-mark-static"></i>
 
+                                </p>
 
                             </div>
 
                             <!--阁台之上的样子（图片）e-->
 
 
@@ -737,7 +743,7 @@
 
                 <div class="comment-mask"></div>
 
                 <div class="comment-cont">
 
                     <i class="close" title="关闭" @click="commentVisible = 0">×</i>
 
-                    <iframe src="//ceshi.duowan.com/1807/m_396961016619.html" frameborder="0"></iframe>
 
+                    <iframe src="//hdzt.duowan.com/1808/m_397579768209.html" frameborder="0"></iframe>
 
                 </div>
 
             </div>
 
         </div>

+ 31 - 23
2018专题/1807吸血鬼专题Wap-商务/src/js/index.js
View File 

@@ -10,6 +10,7 @@ import { Task1,Task1Vue } from './task1'
 
 import { Task2,Task2Vue } from './task2'
 
 import bgm from '../audio/primary-bgm.mp3'
 
 const util = require('./util.js')
 
+const isWX = navigator.userAgent.toLowerCase().match(/micromessenger/i) == "micromessenger"
 
 
 let app = new Vue({
 
     el: '#app',
 
@@ -22,7 +23,8 @@ let app = new Vue({
 
             vidsSource: [],
 
             swiperIndex : 0,//页面下标 [Int]
 
             sound: null,//背景音乐 [DOM]
 
-            stopSound: 0,//背景音乐停止 [Enum]
 
+            stopSound: 1,//背景音乐停止 [Enum]
 
+            isInitSound : false,
 
 
             introIndex : 0,//任务下标
 
             task1: Object.assign({}, Task1),
 
@@ -47,18 +49,26 @@ let app = new Vue({
 
 
     },
 
     beforeMount() {
 
-        this.sound = new Howl({
 
-            src: [bgm],
 
-            loop: true,
 
-            volume: 1
 
-        })
 
-        mediaCtrl.play(this.sound)
 
+        //微信  
+        document.addEventListener("WeixinJSBridgeReady",  () =>{
 
+            this.initSound();
 
+        }, false);
 
     },
 
     mounted() {
 
         this.loaderVideoSource()
 
         this.checkOrientation()
 
     },
 
     methods: Object.assign({}, {
 
+        initSound(){
 
+            this.stopSound = 0
 
+            this.isInitSound = true
 
+            this.sound = new Howl({
 
+                src: [bgm],
 
+                loop: true,
 
+                volume: 1
 
+            })
 
+            mediaCtrl.play(this.sound)
 
+        },
 
         getVideoSource(videoRef, vids) {
 
             return axios.get(`//video.duowan.com/jsapi/playPageVideoInfo/?vids=${vids.join(',')}`)
 
                 .then(({ data }) => {
 
@@ -94,6 +104,14 @@ let app = new Vue({
 
             await this.getVideoSource(videoRef2, vids2)
 
             await this.getVideoSource(videoRef3, vids3)
 
         },
 
+        startGame(){
 
+            console.log(!isWX && !this.isInitSound)
 
+            if(!isWX && !this.isInitSound) {
 
+                this.initSound()
 
+            }
 
+
 
+            this.slideTo(2)
 
+        },
 
         startTask() {
 
             this.slideTo(this.introIndex+3)
 
         },
 
@@ -131,9 +149,6 @@ let app = new Vue({
 
                 })
 
             })
 
         },
 
-        /**初始化首屏 */
 
-        initPregame() {
 
-        },
 
         /**
 
          * 更改video状态 play | pause
 
         */
 
@@ -175,7 +190,7 @@ let app = new Vue({
 
             if (this.stopSound) return
 
             if (bgmCtrl[newVal] == 0) {
 
                 mediaCtrl.pause(this.sound)
 
-            } else {
 
+            } else if (mediaCtrl.media != this.sound) {
 
                 this.transitionEnd(() => {
 
                     mediaCtrl.play(this.sound)
 
                 })
 
@@ -286,6 +301,10 @@ let app = new Vue({
 
                 this.swiperIndex = 5
 
             }
 
         },
 
+        resetTaskData(index) {
 
+            var Task = [null, Task1, Task2]
 
+            this[`task${index}`] = Object.assign({}, Task[index])
 
+        },
 
         //返回游戏主页
 
         toGamePage() {
 
             let curSwiperIndex = this.swiperIndex
 
@@ -341,15 +360,6 @@ let app = new Vue({
 
                 },
 
             })
 
         },
 
-        checkTask1NavBar(index) {
 
-            const showNavBar = [0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0]
 
-
 
-            if (this.swiperIndex <= 2) {
 
-                this.showNavBar = 1
 
-            } else {
 
-                this.showNavBar = showNavBar[index]
 
-            }
 
-        },
 
         checkTask2NavBar(index) {
 
             const showNavBar = [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
 
 
@@ -378,10 +388,8 @@ let app = new Vue({
 
     },
 
     watch: {
 
         swiperIndex(newVal, oldVal) {
 
-            const showNavBar = [1, 0, 1, 0]
 
+            const showNavBar = [1, 0, 1, 0, 0, 0,1]
 
             switch (newVal) {
 
-                case 1: this.initPregame()
 
-                    break
 
             }
 
             this.handleBgm(newVal)

+ 13 - 25
2018专题/1807吸血鬼专题Wap-商务/src/js/task2.js
View File 

@@ -43,6 +43,8 @@ const Task2 = {
 
 
     markPopupVisible: 0, //物品寻找重复提示
 
     markPopupIndex: 0, //物品寻找重复提示-物品索引
 
+
 
+    endTipVisible: false, //任务结束语
 
 }
 
 
 const Task2Vue = {
 
@@ -92,27 +94,6 @@ const Task2Vue = {
 
             this.task2.markPopupIndex = index
 
             this.task2.markPopupVisible = true
 
             this.fadeIn('task2', 'markPopupVisible')
 
-
 
-            // switch(index){
 
-            //     case 7 :
 
-            //         this.task2.image7Popup = 0
 
-            //         break;
 
-            //     case 8 :
 
-            //         this.task2.image8Popup = 0
 
-            //         break;
 
-            //     case 10 :
 
-            //         this.task2.image10Popup = 0
 
-            //         break;
 
-            //     case 11 :
 
-            //         this.task2.image11Popup = 0
 
-            //         break;
 
-            //     case 13 :
 
-            //         this.task2.image13Popup = 0
 
-            //         break;
 
-            //     case 33 :
 
-            //         this.task2.image33Popup = 0
 
-            //         break;
 
-            // }
 
         },
 
         toGetGoods(attr,attrIndex){
 
             if (this.task2[attr]) {
 
@@ -261,10 +242,17 @@ const Task2Vue = {
 
             mediaCtrl.pause(this.$refs['task2-4'])
 
             this.changeTask2Scene(36)
 
         },
 
-        createDrugSucc() {
 
-            this.fadeIn('task2', 'image36Popup', () => {
 
-                this.taskFinish(1)
 
-            })
 
+        async createDrugSucc() {
 
+            this.fadeIn('task2', 'image36Popup')
 
+            Vue.set(this.progress, 1, 1)
 
+
 
+            await setTimeout(()=>{
 
+                this.task2.endTipVisible = true
 
+            },500)
 
+
 
+            await setTimeout(()=>{
 
+                this.swiperIndex = 5
 
+            },2000)
 
         }
 
     }
 
 }

+ 0 - 1
2018专题/1807吸血鬼专题Wap-商务/src/sass/global.scss
View File 

@@ -21,7 +21,6 @@ body {
 
     font-size: $bfz;
 
     font-family: $pingfan, $yahei, Helvetica, Arial, sans-serif;
 
     color: #333333;
 
-    -webkit-overflow-scrolling: touch;
 
 }
 
 
 a {

+ 222 - 194
2018专题/1807吸血鬼专题Wap-商务/src/sass/module/_animation.scss
View File 

@@ -152,6 +152,34 @@
 
     }
 
 }
 
 
+@keyframes bounceInRight {
 
+    0%,60%,75%,90%,to {
 
+        animation-timing-function: cubic-bezier(.215,.61,.355,1)
 
+    }
 
+
 
+    0% {
 
+        opacity: 0;
 
+        transform: translate3d(3000px,0,0)
 
+    }
 
+
 
+    60% {
 
+        opacity: 1;
 
+        transform: translate3d(-25px,0,0)
 
+    }
 
+
 
+    75% {
 
+        transform: translate3d(10px,0,0)
 
+    }
 
+
 
+    90% {
 
+        transform: translate3d(-5px,0,0)
 
+    }
 
+
 
+    to {
 
+        transform: none
 
+    }
 
+}
 
+
 
 @keyframes light {
 
     from,2% {
 
         width: 4px;
 
@@ -409,197 +437,197 @@
 
     }
 
 }
 
 
-@keyframes icon {
 
-    from,
 
-    2.63% {
 
-        width: 52px;
 
-        height: 72px;
 
-        background-position: -458px -316px;
 
-    }
 
-    5.26% {
 
-        width: 52px;
 
-        height: 72px;
 
-        background-position: -404px -316px;
 
-    }
 
-    7.89% {
 
-        width: 52px;
 
-        height: 72px;
 
-        background-position: -350px -414px;
 
-    }
 
-    10.52% {
 
-        width: 54px;
 
-        height: 74px;
 
-        background-position: -412px -240px;
 
-    }
 
-    13.15% {
 
-        width: 54px;
 
-        height: 74px;
 
-        background-position: -296px -264px;
 
-    }
 
-    15.78% {
 
-        width: 56px;
 
-        height: 76px;
 
-        background-position: -418px -162px;
 
-    }
 
-    18.41% {
 
-        width: 58px;
 
-        height: 76px;
 
-        background-position: -296px -80px;
 
-    }
 
-    21.04% {
 
-        width: 60px;
 
-        height: 80px;
 
-        background-position: -418px -2px;
 
-    }
 
-    23.67% {
 
-        width: 62px;
 
-        height: 82px;
 
-        background-position: -292px -180px;
 
-    }
 
-    26.30% {
 
-        width: 64px;
 
-        height: 84px;
 
-        background-position: -230px -2px;
 
-    }
 
-    28.93% {
 
-        width: 66px;
 
-        height: 84px;
 
-        background-position: -228px -94px;
 
-    }
 
-    31.56% {
 
-        width: 68px;
 
-        height: 86px;
 
-        background-position: -226px -278px;
 
-    }
 
-    34.19% {
 
-        width: 70px;
 
-        height: 90px;
 
-        background-position: -158px -2px;
 
-    }
 
-    36.82% {
 
-        width: 72px;
 
-        height: 92px;
 
-        background-position: -154px -382px;
 
-    }
 
-    39.45% {
 
-        width: 74px;
 
-        height: 92px;
 
-        background-position: -80px -288px;
 
-    }
 
-    42.08% {
 
-        width: 74px;
 
-        height: 92px;
 
-        background-position: -80px -194px;
 
-    }
 
-    44.71% {
 
-        width: 76px;
 
-        height: 94px;
 
-        background-position: -2px -388px;
 
-    }
 
-    47.34% {
 
-        width: 76px;
 
-        height: 94px;
 
-        background-position: -2px -292px;
 
-    }
 
-    49.97% {
 
-        width: 78px;
 
-        height: 96px;
 
-        background-position: -2px -2px;
 
-    }
 
-    52.60% {
 
-        width: 76px;
 
-        height: 94px;
 
-        background-position: -2px -196px;
 
-    }
 
-    55.23% {
 
-        width: 76px;
 
-        height: 94px;
 
-        background-position: -2px -100px;
 
-    }
 
-    57.86% {
 
-        width: 74px;
 
-        height: 92px;
 
-        background-position: -82px -2px;
 
-    }
 
-    60.49% {
 
-        width: 74px;
 
-        height: 92px;
 
-        background-position: -80px -100px;
 
-    }
 
-    63.12% {
 
-        width: 72px;
 
-        height: 92px;
 
-        background-position: -80px -382px;
 
-    }
 
-    65.75% {
 
-        width: 70px;
 
-        height: 90px;
 
-        background-position: -156px -96px;
 
-    }
 
-    68.38% {
 
-        width: 70px;
 
-        height: 88px;
 
-        background-position: -156px -188px;
 
-    }
 
-    71.01% {
 
-        width: 68px;
 
-        height: 86px;
 
-        background-position: -156px -278px;
 
-    }
 
-    73.64% {
 
-        width: 66px;
 
-        height: 84px;
 
-        background-position: -228px -366px;
 
-    }
 
-    76.27% {
 
-        width: 62px;
 
-        height: 82px;
 
-        background-position: -228px -180px;
 
-    }
 
-    78.90% {
 
-        width: 60px;
 
-        height: 80px;
 
-        background-position: -356px -2px;
 
-    }
 
-    81.53% {
 
-        width: 60px;
 
-        height: 78px;
 
-        background-position: -356px -84px;
 
-    }
 
-    84.16% {
 
-        width: 58px;
 
-        height: 76px;
 
-        background-position: -296px -2px;
 
-    }
 
-    86.79% {
 
-        width: 56px;
 
-        height: 76px;
 
-        background-position: -418px -84px;
 
-    }
 
-    89.42% {
 
-        width: 54px;
 
-        height: 74px;
 
-        background-position: -356px -240px;
 
-    }
 
-    92.05% {
 
-        width: 54px;
 
-        height: 74px;
 
-        background-position: -356px -164px;
 
-    }
 
-    94.68% {
 
-        width: 52px;
 
-        height: 72px;
 
-        background-position: -350px -340px;
 
-    }
 
-    97.31% {
 
-        width: 52px;
 
-        height: 72px;
 
-        background-position: -296px -414px;
 
-    }
 
-    99.94%,
 
-    to {
 
-        width: 52px;
 
-        height: 72px;
 
-        background-position: -296px -340px;
 
-    }
 
-}
 
+// @keyframes icon {
 
+//     from,
 
+//     2.63% {
 
+//         width: 52px;
 
+//         height: 72px;
 
+//         background-position: -458px -316px;
 
+//     }
 
+//     5.26% {
 
+//         width: 52px;
 
+//         height: 72px;
 
+//         background-position: -404px -316px;
 
+//     }
 
+//     7.89% {
 
+//         width: 52px;
 
+//         height: 72px;
 
+//         background-position: -350px -414px;
 
+//     }
 
+//     10.52% {
 
+//         width: 54px;
 
+//         height: 74px;
 
+//         background-position: -412px -240px;
 
+//     }
 
+//     13.15% {
 
+//         width: 54px;
 
+//         height: 74px;
 
+//         background-position: -296px -264px;
 
+//     }
 
+//     15.78% {
 
+//         width: 56px;
 
+//         height: 76px;
 
+//         background-position: -418px -162px;
 
+//     }
 
+//     18.41% {
 
+//         width: 58px;
 
+//         height: 76px;
 
+//         background-position: -296px -80px;
 
+//     }
 
+//     21.04% {
 
+//         width: 60px;
 
+//         height: 80px;
 
+//         background-position: -418px -2px;
 
+//     }
 
+//     23.67% {
 
+//         width: 62px;
 
+//         height: 82px;
 
+//         background-position: -292px -180px;
 
+//     }
 
+//     26.30% {
 
+//         width: 64px;
 
+//         height: 84px;
 
+//         background-position: -230px -2px;
 
+//     }
 
+//     28.93% {
 
+//         width: 66px;
 
+//         height: 84px;
 
+//         background-position: -228px -94px;
 
+//     }
 
+//     31.56% {
 
+//         width: 68px;
 
+//         height: 86px;
 
+//         background-position: -226px -278px;
 
+//     }
 
+//     34.19% {
 
+//         width: 70px;
 
+//         height: 90px;
 
+//         background-position: -158px -2px;
 
+//     }
 
+//     36.82% {
 
+//         width: 72px;
 
+//         height: 92px;
 
+//         background-position: -154px -382px;
 
+//     }
 
+//     39.45% {
 
+//         width: 74px;
 
+//         height: 92px;
 
+//         background-position: -80px -288px;
 
+//     }
 
+//     42.08% {
 
+//         width: 74px;
 
+//         height: 92px;
 
+//         background-position: -80px -194px;
 
+//     }
 
+//     44.71% {
 
+//         width: 76px;
 
+//         height: 94px;
 
+//         background-position: -2px -388px;
 
+//     }
 
+//     47.34% {
 
+//         width: 76px;
 
+//         height: 94px;
 
+//         background-position: -2px -292px;
 
+//     }
 
+//     49.97% {
 
+//         width: 78px;
 
+//         height: 96px;
 
+//         background-position: -2px -2px;
 
+//     }
 
+//     52.60% {
 
+//         width: 76px;
 
+//         height: 94px;
 
+//         background-position: -2px -196px;
 
+//     }
 
+//     55.23% {
 
+//         width: 76px;
 
+//         height: 94px;
 
+//         background-position: -2px -100px;
 
+//     }
 
+//     57.86% {
 
+//         width: 74px;
 
+//         height: 92px;
 
+//         background-position: -82px -2px;
 
+//     }
 
+//     60.49% {
 
+//         width: 74px;
 
+//         height: 92px;
 
+//         background-position: -80px -100px;
 
+//     }
 
+//     63.12% {
 
+//         width: 72px;
 
+//         height: 92px;
 
+//         background-position: -80px -382px;
 
+//     }
 
+//     65.75% {
 
+//         width: 70px;
 
+//         height: 90px;
 
+//         background-position: -156px -96px;
 
+//     }
 
+//     68.38% {
 
+//         width: 70px;
 
+//         height: 88px;
 
+//         background-position: -156px -188px;
 
+//     }
 
+//     71.01% {
 
+//         width: 68px;
 
+//         height: 86px;
 
+//         background-position: -156px -278px;
 
+//     }
 
+//     73.64% {
 
+//         width: 66px;
 
+//         height: 84px;
 
+//         background-position: -228px -366px;
 
+//     }
 
+//     76.27% {
 
+//         width: 62px;
 
+//         height: 82px;
 
+//         background-position: -228px -180px;
 
+//     }
 
+//     78.90% {
 
+//         width: 60px;
 
+//         height: 80px;
 
+//         background-position: -356px -2px;
 
+//     }
 
+//     81.53% {
 
+//         width: 60px;
 
+//         height: 78px;
 
+//         background-position: -356px -84px;
 
+//     }
 
+//     84.16% {
 
+//         width: 58px;
 
+//         height: 76px;
 
+//         background-position: -296px -2px;
 
+//     }
 
+//     86.79% {
 
+//         width: 56px;
 
+//         height: 76px;
 
+//         background-position: -418px -84px;
 
+//     }
 
+//     89.42% {
 
+//         width: 54px;
 
+//         height: 74px;
 
+//         background-position: -356px -240px;
 
+//     }
 
+//     92.05% {
 
+//         width: 54px;
 
+//         height: 74px;
 
+//         background-position: -356px -164px;
 
+//     }
 
+//     94.68% {
 
+//         width: 52px;
 
+//         height: 72px;
 
+//         background-position: -350px -340px;
 
+//     }
 
+//     97.31% {
 
+//         width: 52px;
 
+//         height: 72px;
 
+//         background-position: -296px -414px;
 
+//     }
 
+//     99.94%,
 
+//     to {
 
+//         width: 52px;
 
+//         height: 72px;
 
+//         background-position: -296px -340px;
 
+//     }
 
+// }

+ 13 - 0
2018专题/1807吸血鬼专题Wap-商务/src/sass/page/_task-2.scss
View File 

@@ -425,6 +425,19 @@
 
             left: px2rem(1002);
 
             top: px2rem(411);
 
         }
 
+        .tip-end{
 
+            position: absolute;
 
+            width: 100%;
 
+            top: px2rem(150);
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            color: #FFF;
 
+            animation: bounceInRight 1s ease ;
 
+            span{
 
+                margin: 0 px2rem(30);
 
+            }
 
+        }
 
     }
 
     .icon-prev {
 
         position: absolute;