万象物语移动端

2018专题/1808万象物语专题-商务/src/_index.html

@@ -48,7 +48,8 @@
                                 </span>
                     </div>
                     <div class="primary-from">
-                        <a href="#" class="icon-xsj" target="_blank"></a>
+                        <a href="//duowan.com" class="icon-xsj" target="_blank"></a>
+                        <a href="#" class="icon-ear" target="_blank"></a>
                     </div>
                     <div :class="['primary-nav','animated delay-1s', isPrimaryEnter ? 'fadeIn' : '']"
                          v-show="isPrimaryEnter">
@@ -77,7 +78,7 @@
                         </div>
                         <div :class="['mobile-bg-reader', isMobileBGPlaying ? 'active' : '']"
                              @click="isMobileBGPlaying = !isMobileBGPlaying">
-                            <audio src="src/audio/mobile-bg.mp3" ref="mobile-bgm" loop autoplay></audio>
+                            <audio src="http://pub.dwstatic.com/zt2018/wxwy1809/audio/mobile-bg.mp3" ref="mobile-bgm" loop autoplay></audio>
                         </div>
                         <div class="black-line" v-if="!isMobile"></div>
                     </div>
@@ -110,7 +111,7 @@
                     <transition name="fade">
                         <div class="primary-mobile-video-wrapper" v-if="isMobile" v-show="mobileVideoVisiable"
                              @click.stop="mobileVideoVisiable = false">
-                            <video src="https://dw-bw6.dwstatic.com/02ccc30870fdf3888c388d9c45c48969/5b99c1ed/88/6/1837/8951715-101-1536655514.mp4"
+                            <video src="https://dw-bw6.dwstatic.com/91e1e68a8c006ec35806c36e0c9d7aec/5b9b1df3/88/6/1837/8951715-101-1536655514.mp4"
                                    ref="primary-mobile-video" class="primary-mobile-video" controls></video>
                         </div>
                     </transition>
@@ -145,7 +146,7 @@
 
             <!-- 场景 s -->
             <div class="swiper-slide page-scene">
-                <div class="content-wrapper">
+                <div class="content-wrapper" style="overflow: hidden">
                     <ul class="scene-list">
                         <li v-for="(item, index) in sceneList"
                             :class="['scene-item item-bg' + (index + 1), currentSceneIndex === index ? 'active' : '']"
@@ -156,7 +157,7 @@
                     <ul class="scene-pic-list" ref='scene-wrapper'>
                         <div data-depth="0.1">
                             <li v-for="(scene, index) in sceneList"
-                                :class="['scene-pic-item animated', currentSceneIndex === index ? 'fadeIn' : 'fadeOut']"
+                                :class="['scene-pic-item']"
                                 v-show="currentSceneIndex === index"
                                 :key="index">
                                 <img  :data-original="'//pub.dwstatic.com/zt2018/qjjx05//img/scene'+ (index + 1) + '.png'" :ref="'scene' + (index + 1)">
@@ -166,7 +167,7 @@
                         <p class="scene-desc">{{sceneList[currentSceneIndex].desc}}</p>
                     </ul>
                     <div :class="['scene-reader', isReading ? 'active' : '']" @click="isReading = !isReading"
-                         v-if="!isMobile">
+                         v-show="!isMobile">
                         <audio :src="resourceAPI + 'audio/scenes/scene1.mp3'" ref="scene-audio-player"></audio>
                     </div>
                 </div>
@@ -301,12 +302,12 @@
             <!-- 评测 s -->
             <div class="swiper-slide" v-show="!isMobile">
                 <div class="page-evaluation">
-                    <video :src="isMobile ? '' : 'https://dw-bw6.dwstatic.com/aec50e5a0a95ca5d649b6b9f3b898f65/5b99c1ed/89/3/1837/8951721-101-1536655547.mp4'"
+                    <video :src="isMobile ? '' : 'https://dw-bw6.dwstatic.com/db9a624fe2168243e8766012ff75e726/5b9b1df3/51/8/1837/8952341-101-1536805115.mp4'"
                            class="evaluation-bg" autoplay loop v-if="!isMobile"></video>
                     <div class="evaluation-video-wrapper">
                         <i class="icon-videoPlay" v-show="!isEvaluationVideoPlaying"
                            @click.stop="isEvaluationVideoPlaying = true"></i>
-                        <video src="https://dw-bw6.dwstatic.com/02ccc30870fdf3888c388d9c45c48969/5b99c1ed/88/6/1837/8951715-101-1536655514.mp4"
+                        <video src="https://dw-bw6.dwstatic.com/91e1e68a8c006ec35806c36e0c9d7aec/5b9b1df3/88/6/1837/8951715-101-1536655514.mp4"
                                class="evaluation-video" loop ref="evaluation-video" v-if="!isMobile"
                                @click.stop="isEvaluationVideoPlaying = false"></video>
                     </div>
@@ -324,9 +325,9 @@
                 <div class="page-subscribe">
                     <img src="src/img/subscribe-logo.png" class="subscribe-logo">
                     <div class="subscribe-button-group">
-                        <a href="javascript: void 0" class="text-bg" target="_blank"
+                        <a class="text-bg" target="_blank"
                            href="http://www.duowan.com/1801/m_380731143157.html">进入官网</a>
-                        <a href="javascript: void 0" class="text-bg" target="_blank"
+                        <a class="text-bg" target="_blank"
                            href="http://www.duowan.com/1801/m_380731143157.html">立即预约</a>
                         <a href="javascript: void 0" class="text-bg" @click="commentVisiable = true">发表评论</a>
                     </div>
@@ -348,7 +349,7 @@
     </div>
         <div :class="['main-navbar','animated delay-1s', isPrimaryEnter && isMobile ? 'fadeIn' : '']"
              v-show="isPrimaryEnter && navbarVisible"
-             :style="{height: mobileNavBarShow && isMobile ? '70% !important' : isMobile ? '0 !important' : ''}">
+             :style="{height: mobileNavBarShow && isMobile ? '0% !important' : isMobile ? '0% !important' : ''}">
             <p class="icon-horizon" v-if="!isMobile"></p>
             <a href="#" class="logo" v-if="!isMobile"></a>
             <i class="icon-mobileMenu" v-if="isMobile" @click="mobileNavBarShow = !mobileNavBarShow"></i>

2018专题/1808万象物语专题-商务/src/modules/page/index.js

@@ -40,6 +40,7 @@ var util = {
                 type: 'get',
                 success(data) {
                     var url = that.deCodeArg(data[vid].c).all.yuanhua.src
+                    console.log(vid, that.deCodeArg(data[vid].c))
                     resolve(url)
                 }
             })
@@ -53,7 +54,7 @@ var videoMap = {
         'primary-bg': {vid: 8951723},
         'evaluation-video': {vid: 8951715},
         'subscribe-video': {vid: 8951909},
-        'evaluation-bg': {vid: 8951721}
+        'evaluation-bg': {vid: 8952341}
     }
 // 获取视频地址  TODO:上线前删除下方函数
 ;!function () {
@@ -121,6 +122,7 @@ var app = new Vue({
         mobileNavBarShow: false,
         mobileVideoVisiable: false,
         isMobileBGPlaying: true,
+        touchStartY: 0,
         mode: window.innerWidth > window.innerHeight ? 'landscape' : 'portrait',
     },
     mounted: function () {
@@ -130,16 +132,7 @@ var app = new Vue({
         $('.box-mouse').on('click',function(){
             self.mainSwiper.mousewheel.enable();
         })
-        window.addEventListener('resize', function (event) {
-            var orientation = (window.innerWidth > window.innerHeight) ? "landscape" : "portrait";
-            if (orientation === 'portrait') {
-                self.mode = 'portrait'
-            } else {
-                if (self.mode === 'portrait') {
-                    self.mode = 'landscape'
-                }
-            }
-        }, false)
+        this.registerWindowEvent()
         this.initScene()
         this.initEvaluation()
     },
@@ -157,8 +150,8 @@ var app = new Vue({
                 speed: 600,
                 mousewheel: true,
                 threshold: 50,
-                width: self.isMobile ? window.innerHeight : undefined,
-                height: self.isMobile ? window.innerWidth : undefined,
+                width: self.isMobile ? window.innerHeight :window.innerWidth,
+                height: self.isMobile ? window.innerWidth : window.innerHeight,
                 on: {
                     init: function () {
                         self.primaryVideo = self.$refs['primary-video']
@@ -173,6 +166,7 @@ var app = new Vue({
                     slideChangeTransitionStart: function () {
                         self.mainSwiperIndex = this.activeIndex
                         self.navbarVisible = self.isMobile || this.activeIndex >= 1;
+                        this.activeIndex === 2 && self.isMobile ? self.isReading = true : self.isReading = false
                         if(!this.isMobile && this.activeIndex != 0){
                             $('.main-navbar').show();
                             self.isMobileBGPlaying = false
@@ -259,7 +253,7 @@ var app = new Vue({
                                     oldIndex++;
                                     if(oldIndex > 2){
                                         oldIndex = 0;
-                                    }
+                                    }x
                                     $('.scene-role-bgm audio').get(oldIndex).play();
                                     $('.scene-role-bgm audio').eq(oldIndex).addClass('actived').siblings().removeClass('actived');
                                 })
@@ -286,6 +280,27 @@ var app = new Vue({
         mainSwiperSlideTo: function (index, speed, runCallbacks) {
             this.mainSwiper.slideTo(index, speed, runCallbacks)
         },
+        registerWindowEvent(){
+            var self = this
+            var touchStartY
+            window.addEventListener('resize', function (event) {
+                var orientation = (window.innerWidth > window.innerHeight) ? "landscape" : "portrait";
+                if (orientation === 'portrait') {
+                    self.mode = 'portrait'
+                } else {
+                    if (self.mode === 'portrait') {
+                        self.mode = 'landscape'
+                    }
+                }
+            }, false)
+            window.addEventListener('touchstart', function (ev) {
+                touchStartY = ev.touches[0].screenY
+            })
+            window.addEventListener('touchend', function (ev) {
+                ev.changedTouches[0].screenY - touchStartY > 50 && self.mainSwiper.slidePrev()
+                touchStartY - ev.changedTouches[0].screenY > 50 && self.mainSwiper.slideNext()
+            })
+        },
         // 首页灯塔点击事件处理函数
         handleTowerClick() {
             if (this.isPrimaryEnter) {
@@ -321,7 +336,7 @@ var app = new Vue({
             } else {
                 this.$refs['mobile-bg'].src = '//pub.dwstatic.com/zt2018/qjjx05/img/primary-turn-compressed.gif'
                 setTimeout(function () {
-                    that.$refs['mobile-bg'].src = '//pub.dwstatic.com/zt2018/qjjx05/img/primary-bg-compressed.gif'
+                    that.$refs['mobile-bg'].src = '//pub.dwstatic.com/zt2018/wxwy1809/img/primary-bg-static.jpg'
                 }, 800)
                 this.isPrimaryEnter = true
             }
@@ -329,7 +344,7 @@ var app = new Vue({
         },
         // 场景页初始化
         initScene() {
-            new Parallax(this.$refs['scene-wrapper'])
+            !this.isMobile && new Parallax(this.$refs['scene-wrapper'])
         },
         // 加载场景页图片
         loadSceneResources(){
@@ -342,7 +357,7 @@ var app = new Vue({
         },
         // 评测页初始化
         initEvaluation() {
-            new Parallax(this.$refs['charactor-wrapper'])
+            !this.isMobile && new Parallax(this.$refs['charactor-wrapper'])
         },
         getOrientationViewSize(flag){
             var winWidth = window.innerWidth
@@ -390,11 +405,9 @@ var app = new Vue({
             newVal ? this.$refs['scene-audio-player'].play() : this.$refs['scene-audio-player'].pause()
         },
         currentSceneIndex(newVal) {
-            if(this.isMobile){
-                return
-            }
             this.$refs['scene-audio-player'].src = 'http://pub.dwstatic.com/zt2018/wxwy1809/audio/scenes/scene' + (newVal + 1) + '.mp3'
             this.isReading && this.$refs['scene-audio-player'].play()
+            console.log('播放了')
         },
         isEvaluationVideoPlaying(newVal) {
             newVal ? this.$refs['evaluation-video'].play() : this.$refs['evaluation-video'].pause()

2018专题/1808万象物语专题-商务/src/sass/global.scss

@@ -130,12 +130,12 @@ a {
     background: url("../img/nav-bg.jpg") center / auto 100% no-repeat;
     .icon-mobileMenu{
         position: absolute;
-        width: .5rem;
-        height: .5rem;
+        width: 1rem;
+        height: 1rem;
         background: url('src/img/mobile-menu.png') no-repeat center;
         background-size: contain;
         top: -.8rem;
-        left: 0.05rem;
+        left: 0;
     }
     &:before{
         content: '';
@@ -233,19 +233,20 @@ a {
 @media only screen and (max-width: 800px) {
     .main-navbar .menu-wrapper{
         position: relative;
-        top: -15%;
-        height: 3.6rem;
-        transform: rotateZ(90deg);
+        top: 34vw;
+        height: 5.6rem;
+        left: 0;
     }
     .main-navbar:before{
         display: none;
     }
     .main-navbar{
-        top: 15.8rem !important;
-        right: .4rem !important;
+        top: 15rem !important;
+        right: 1.4rem !important;
         width: auto !important;
         background: none !important;
         height: 70% !important;
+        transform: rotateZ(90deg);
     }
     .main-navbar .nav-list{
         flex-direction: column;
@@ -254,15 +255,16 @@ a {
         background-image: url("src/img/mobile-navbar.png") !important;
         background-size: contain !important;
         background-repeat: no-repeat !important;
-        height: 3.2rem;
+        height: 6.2rem;
         position: relative;
-        top: 7%;
+        top: 0;
         &.hide{
             transform: translateY(-100%);
         }
     }
     .main-navbar .nav-list li{
-        width: .6rem !important;
+        width: 1rem !important;
+        height: 1rem;
         display: block;
         i{
             transform: none;
@@ -273,10 +275,11 @@ a {
     }
     .main-navbar .nav-list span{
         line-height: 0.01rem !important;
+        font-size: .25rem;
     }
     .main-navbar .nav-list li i{
-        height: 0.56333rem;
-        width: 0.5555rem;
+        height: 0.8rem;
+        width: 1rem;
         background-size: contain;
     }
 }
@@ -414,22 +417,18 @@ a {
 
 @keyframes upAndDown {
     0% {
-        opacity: 0.4;
         transform: translateY(px2rem(0))
     }
     50% {
-        opacity: 0.8;
         transform: translateY(px2rem(-30))
     }
 }
 
 @keyframes leftAndRight {
     0% {
-        opacity: 0.4;
         transform: translateX(px2rem(0))
     }
     50% {
-        opacity: 0.8;
         transform: translateX(px2rem(-30))
     }
 }

2018专题/1808万象物语专题-商务/src/sass/page/_primary.scss

@@ -89,6 +89,12 @@
                 height: px2rem(118);
                 background: url("src/img/icon-xsj.png") 0 0 /100% auto no-repeat;
             }
+            &.icon-ear{
+                width: px2rem(145);
+                height: px2rem(118);
+                background: url("http://pub.dwstatic.com/zt2018/wxwy1809//img/ear.png") 0 0 /100% auto no-repeat;
+                pointer-events: none;
+            }
         }
     }
     .primary-nav{
@@ -164,7 +170,7 @@
         img{
             display: block;
             margin-bottom: px2rem(20);
-            height: .35rem;
+            height: .3rem;
         }
         i{
             animation: upAndDown infinite 2s ease;
@@ -274,7 +280,7 @@
             content: "";
             display: block;
             position: absolute;
-            background: url("//pub.dwstatic.com/zt2018/qjjx05/img/primary-bg-compressed.gif") no-repeat -10000px -1000px;
+            background: url("//pub.dwstatic.com/zt2018/wxwy1809/img/primary-bg-static.jpg") no-repeat -10000px -1000px;
             width: 0;
             height: 0
         }
@@ -334,10 +340,10 @@
     }
     .mobile-video-play{
         position: absolute;
-        top: 66%;
+        top: 70%;
         left: 50%;
         transform: translateX(-50%);
-        height: 1rem;
+        height: 2rem;
         z-index: 1;
     }
     .primary-mobile-video-wrapper{
@@ -382,10 +388,8 @@
         transform: translate3d(-2.55rem, -.4rem, 0);
     }
     .page-primary .banner-logo{
+        width: 50vh;
+        height: 33.33vh;
         top: 45%;
     }
-    //.mobile-bg-reader{
-    //    width: 0.76667rem;
-    //    height: 0.76667rem;
-    //}
 }

2018专题/1808万象物语专题-商务/src/sass/page/_role.scss

@@ -585,4 +585,16 @@
             height: 100%;
         }
     }
+    .page-role .role-bigList ul li .imgbox{
+        transform: scale(1.2) translate(-36%, 0);
+    }
+    .page-role .role-info .role-info-flex .role-info-right .info-main .info-item .content-list .skill-box .skill-content ul li h2{
+        font-size: .5rem;
+    }
+    .page-role .role-info .role-info-flex .role-info-right .info-main .info-item .content-list .skill-box .skill-content ul li .skill-info p.skill-desc{
+        font-size: .4rem;
+    }
+    .page-role .role-info .role-info-flex .role-info-right .info-main .info-item .content-list .skill-box .skill-content ul li .skill-info p.skill-attr{
+        font-size: .4rem;
+    }
 }

2018专题/1808万象物语专题-商务/src/sass/page/_scene.scss

@@ -61,7 +61,7 @@
             z-index: 1;
             .text-shadow{
                 position: absolute;
-                top: 45vh !important;
+                top: 47vh !important;
             }
             .scene-pic-item{
                 position: relative;
@@ -120,8 +120,8 @@
     .page-scene .content-wrapper .scene-list{
         display: flex;
         flex-direction: column;
-        top: 1.825rem;
-        height: 7.58333rem;
+        top: 8vw;
+        height: 85vw;
     }
     .page-scene .content-wrapper{
         height: 100%;
@@ -129,15 +129,16 @@
     }
     .page-scene .content-wrapper .scene-list .scene-item.active{
         width: 4.5rem;
-        height: 3rem;
+        height: 3.5rem;
     }
     .page-scene .content-wrapper .scene-list .scene-item{
-        height: 4.5rem;
+        height: 19.5vw;
         width: 4rem;
     }
     .page-scene .content-wrapper .scene-pic-list .text-shadow{
-        height: 40%;
-        top: 40vh !important;
+        height: 50%;
+        top: unset !important;
+        bottom: 0;
     }
     .page-scene .scene-reader{
         top: .6rem;
@@ -147,11 +148,17 @@
         padding: 0;
         width:  68vw;
         transform: translateX(-10%);
-        left: 23% !important;
-        top: 50vh !important;
-        font-size: .2rem;
+        left: 22vh !important;
+        top: unset !important;
+        bottom: 17vw;
+        font-size: .3rem;
+        line-height: .3rem;
+    }
+    .page-scene .content-wrapper .scene-pic-list{
+        height: 100%;
+        top: 5%;
+        right: 0;
     }
-    .page-scene .content-wrapper .scene-pic-list{}
     .page-scene .content-wrapper .scene-pic-list .scene-pic-item{
         height: 60vh;
     }
@@ -168,6 +175,6 @@
         width: 5.5rem;
     }
     .page-scene .content-wrapper .scene-list .scene-item{
-        height: 14.5vh;
+        height: 16.5vh;
     }
 }

2018专题/1808万象物语专题-商务/src/sass/page/_subscribe.scss

@@ -115,8 +115,8 @@
 		}
 	}
 	.comment-shadow-cover .comment-wrapper{
-		width: 60%;
-		left: 20%;
+		width: 90%;
+		left: 10%;
 		top: 35%;
 		transform-origin: center;
 		transform: rotateZ(90deg);

2018专题/1808万象物语专题-商务/src/sass/page/_world.scss

@@ -117,7 +117,4 @@
         width: 100%;
         background-size: contain;
     }
-    .page-world .book-paging{
-        height: 5.5rem;
-    }
 }