1

Application/Home/View/default/Index_index.tpl

@@ -200,6 +200,7 @@
         <div class="page-s-c" style="display: none">
             <div class="zhou m-b-zhou-sate"></div>
             <div class="c-d m-b-sate"></div>
+            <img class="b-j-two" src="__CDN__/images/b-j-two.png">
             <img class="h-b" src="">
             <img class="btn-s" src="__CDN__/images/f-h.png">
             <div class="btn">
@@ -263,13 +264,13 @@
 
 <script type="text/javascript" src="__CDN__/js/jquery-2.1.3.min.js"></script>
 <script>
-    if (!/android/i.test(navigator.userAgent)) {
-        var t = window.screen.height;
-        if (t == '812') {
-            $('html').css('height', '1234px');
-            $('body').css('height', '1234px');
-        }
-    }
+//    if (!/android/i.test(navigator.userAgent)) {
+//        var t = window.screen.height;
+//        if (t == '812') {
+//            $('html').css('height', '1234px');
+//            $('body').css('height', '1234px');
+//        }
+//    }
 </script>
 <script type="text/javascript" src="__CDN__/js/konva.min.js"></script>
 <script type="text/javascript" src="__CDN__/js/swiper.min.js"></script>

Public/static/css/main.css

@@ -406,8 +406,16 @@ ul, li {
 }
 
 .page-s-c {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 640px;
-  height: 1238px;
+  height: 100%;
+}
+.page-s-c .b-j-two {
+  display: block;
+  width: 599px;
+  height: 1091px;
 }
 .page-s-c .btn-s {
   position: absolute;
@@ -422,8 +430,8 @@ ul, li {
   justify-content: space-around;
   position: absolute;
   display: inline-block;
-  left: 68px;
-  top: 1025px;
+  left: 130px;
+  top: 1060px;
   background: url("../images/btn.png") left top;
   width: 292px;
   height: 59px;
@@ -431,7 +439,7 @@ ul, li {
 }
 .page-s-c .btn .btn-sate {
   flex: 1;
-  height: 50px;
+  height: 80px;
 }
 
 @-webkit-keyframes planet {

Public/static/css/main.scss

@@ -190,13 +190,14 @@ ul, li {
     height: 224px;
   }
 }
+
 .page-through {
   position: relative;
   height: 1238px;
   overflow: hidden;
   background: #9bc2f6;
   .through-map {
-    @include image_bounds_by_pos("../images/x-k-map.jpg",-271px, -53px);
+    @include image_bounds_by_pos("../images/x-k-map.jpg", -271px, -53px);
     -webkit-transform: scale(0.5);
     animation: planetz_two 6s ease-in 0s infinite forwards;
     -webkit-animation: planetz_two 6s ease-in 0s infinite forwards;
@@ -236,6 +237,7 @@ ul, li {
     -webkit-animation: planet 4s ease-in 2s infinite forwards;
   }
 }
+
 .page-m-b {
   background: url("../images/m-b-bj-1.jpg") no-repeat center;
   width: 640px;
@@ -358,8 +360,17 @@ ul, li {
 }
 
 .page-s-c {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 640px;
-  height: 1238px;
+  height: 100%;
+  //height: 1238px;
+  .b-j-two {
+    display: block;
+    width: 599px;
+    height: 1091px;
+  }
   .btn-s {
 
     @include image_bounds_by_pos("../images/f-h.png", 41px, 98px);
@@ -367,11 +378,11 @@ ul, li {
   }
   .btn {
     justify-content: space-around;
-    @include image_bounds_by_pos("../images/btn.png", 68px, 1025px);
+    @include image_bounds_by_pos("../images/btn.png", 130px, 1060px);
     display: flex;
     .btn-sate {
       flex: 1;
-      height: 50px;
+      height: 80px;
     }
   }
 }
@@ -427,10 +438,12 @@ ul, li {
   height: 782px;
 
 }
-.page_checking{
+
+.page_checking {
 
   width: 100%;
 }
+
 .checking {
   width: 250px;
   height: 250px;
@@ -481,7 +494,7 @@ ul, li {
   overflow-y: scroll;
   background: #72a2e2;
   height: 10194px;
-  .head{
+  .head {
     @include image_bounds_by_pos("../images/head.png", 0px, 0px);
   }
   .word {
@@ -501,13 +514,13 @@ ul, li {
   .map-1 {
     opacity: 0;
     @include image_bounds_by_pos("../images/1.png", 71px, 1222px);
-    -webkit-animation: left 0.5s  linear  1;
+    -webkit-animation: left 0.5s linear 1;
     animation-fill-mode: forwards
   }
   .map-2 {
     opacity: 0;
     @include image_bounds_by_pos("../images/2.png", 116px, 1466px);
-    -webkit-animation: right 0.5s  linear  1;
+    -webkit-animation: right 0.5s linear 1;
     animation-fill-mode: forwards
   }
 
@@ -574,7 +587,7 @@ ul, li {
   .map-35 {
     opacity: 0;
     @include image_bounds_by_pos("../images/35.png", 341px, 4495px);
-    -webkit-animation: right 1.5s 1  linear 1s;
+    -webkit-animation: right 1.5s 1 linear 1s;
     animation-fill-mode: forwards
   }
   .map-13 {
@@ -647,7 +660,7 @@ ul, li {
 
     opacity: 0;
     @include image_bounds_by_pos("../images/32.png", 68px, 6691px);
-    -webkit-animation: left 1s 1 linear ;
+    -webkit-animation: left 1s 1 linear;
     animation-fill-mode: forwards
   }
 
@@ -718,6 +731,7 @@ ul, li {
     animation-fill-mode: forwards
   }
 }
+
 @-webkit-keyframes left {
   from {
     opacity: 0;
@@ -1000,6 +1014,7 @@ ul, li {
     top: 950px;
   }
 }
+
 .page-loading {
   position: relative;
   height: 1238px;
@@ -1035,6 +1050,7 @@ ul, li {
   }
 
 }
+
 @-webkit-keyframes zoomIn {
   0% {
     opacity: 0;
@@ -1048,6 +1064,7 @@ ul, li {
     opacity: 1
   }
 }
+
 @-webkit-keyframes down_two {
   0% {
     -webkit-transform: translate3d(0, -10px, 0)

Public/static/js/index.js

@@ -374,7 +374,7 @@ function mergeImage_two(url) {
     var cover_four = new Image();
     var ceshi=new Image();;
 
-    var url_three = '/Public/static/images/s-c.jpg?t=1';
+    var url_three = '/Public/static/images/s-c.png?t=1';
     var url_two_t = url;
     cover_four.src = url_two_t;
     cover_three.src = url_three;
@@ -391,7 +391,7 @@ function mergeImage_two(url) {
             ctx.drawImage(cover_four, 63, 190);
             setTimeout(function () {
 
-                $('.h-b').attr('src', tmp.toDataURL('image/jpeg', 0.5));
+                $('.h-b').attr('src', tmp.toDataURL('image/png', 0.5));
                 $('.page-x-z').hide();
                 $('.page-s-c').show();
                 $('.page_checking').hide()