j

Application/Home/View/default/Index_index.tpl

@@ -43,7 +43,7 @@
         //        })(document, window);
     </script>
     <title>谁是桃源幸运锦鲤</title>
-    <link href="__CDN__/css/main.css?t=1.93" rel="stylesheet">
+    <link href="__CDN__/css/main.css?t=1.94" rel="stylesheet">
     <style>
 
     </style>

Public/static/css/main.css

@@ -158,7 +158,7 @@ ul, li {
   height: 100%;
 }
 
-.flex, #container, #container .btn-prize {
+.flex, #container .btn-prize {
   display: -webkit-box;
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;
@@ -172,12 +172,11 @@ ul, li {
 }
 
 #container {
+  position: relative;
   background: url("../images/bj.jpg") no-repeat center;
   background-size: 100% 100%;
   width: 640px;
   height: 1238px;
-  justify-content: space-around;
-  flex-direction: column-reverse;
 }
 #container .btn-prize {
   justify-content: center;
@@ -187,16 +186,11 @@ ul, li {
   border: 1px solid red;
 }
 #container .prize-type {
+  position: absolute;
   width: 300px;
   height: 300px;
   opacity: 0;
 }
-#container .prize-type .bounceInDown {
-  -webkit-animation: bounceInDown 1s ease 0s 1;
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-  opacity: 0;
-}
 #container .word {
   font-size: 40px;
 }

Public/static/css/main.scss

@@ -194,14 +194,11 @@ ul, li {
 }
 
 #container {
-
-  background:url("../images/bj.jpg")no-repeat center;
+  position: relative;
+  background: url("../images/bj.jpg") no-repeat center;
   background-size: 100% 100%;
   width: 640px;
-  @extend .flex;
   height: 1238px;
- justify-content: space-around;
-flex-direction: column-reverse;
   .btn-prize {
     @extend .flex;
     justify-content: center;
@@ -210,20 +207,22 @@ flex-direction: column-reverse;
     font-size: 27px;
     border: 1px solid red;
   }
-  .prize-type{
+  .prize-type {
+    position: absolute;
     width: 300px;
     height: 300px;
     opacity: 0;
-    .bounceInDown {
-      -webkit-animation: bounceInDown 1s ease 0s 1;
-      @include animate_forwards;
-      opacity: 0;
-    }
+    //.bounceInDown {
+    //  -webkit-animation: bounceInDown 1s ease 0s 1;
+    //  @include animate_forwards;
+    //  opacity: 0;
+    //}
   }
-  .word{
+  .word {
     font-size: 40px;
   }
 }
+
 @-webkit-keyframes bounceInDown {
   0%, 100%, 60%, 75%, 90% {
     -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);