i

src/pages/yaotouzi/index/index.scss

@@ -3,14 +3,14 @@
   width: 100%;
   height: 100%;
 
-  .tips {
-    border-radius: 0;
-    width: 100%;
-    height: 60px;
-  }
+  //.tips {
+  //  border-radius: 0;
+  //  width: 100%;
+  //  height: 60px;
+  //}
 
   .userInfo {
-    width: 680px;
+    width: 90%;
     margin: 20px auto;
     //margin: auto;
     padding: 20px;
@@ -73,7 +73,7 @@
   }
 
   .gameInfo {
-    width: 680px;
+    width: 90%;
     margin: 20px auto;
     padding: 20px;
     display: flex;
@@ -90,7 +90,7 @@
 
       .game_box {
         margin-left: 10px;
-        width: 250px;
+        width: 200px;
         // 文字超出显示省略号
         overflow: hidden;
         white-space: nowrap;
@@ -119,6 +119,10 @@
       }
     }
 
+    .center {
+      font-size: 30px;
+    }
+
     .right {
 
       .btn {
@@ -178,25 +182,42 @@
 
   .opt1 {
     display: flex;
-    justify-content: space-evenly;
+    justify-content: space-between;
     flex-wrap: wrap;
     text-align: center;
+    box-sizing: border-box;
+    height: 400px;
+    padding: 10px;
+
+    .optt {
+      width: 27%;
+      height: 100%;
+    }
 
     .item {
-      width: 200px;
+      width: 100%;
       margin-bottom: 10px;
       text-align: center;
-      padding: 31px 0;
       border: 1px dashed #228960;
       position: relative;
+      height: 48%;
 
       .name {
         font-size: 55px;
         font-weight: bold;
+        position: absolute;
+        top: 40%;
+        left: 50%;
+        transform: translate(-50%, -50%);
       }
 
       .odd {
         font-size: 25px;
+        position: absolute;
+        width: 100%;
+        top: 60%;
+        left: 50%;
+        transform: translate(-50%, -10%);
       }
 
       .mask {
@@ -222,8 +243,9 @@
     .base {
       background-image: url("../../../static/cais.png");
       background-size: 100% 100%;
-      width: 300px;
-      height: 400px;
+      //flex: 1;
+      width: 43%;
+      height: 100%;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
@@ -234,8 +256,8 @@
       .qz {
         background-image: url("../../../static/qz.png");
         background-size: 100% 100%;
-        width: 300px;
-        height: 100px;
+        width: 100%;
+        height: 25%;
         margin-bottom: 20px;
         line-height: 100px;
         color: #FBE039;
@@ -318,12 +340,15 @@
 @keyframes flicker {
   0% {
     border: 1px dashed #228960;
+    background-color: #228960;
   }
   50% {
     border: 1px dashed white;
+    background: rgba(225, 225, 225, 0.5);
   }
   100% {
     border: 1px dashed #228960;
+    background-color: #228960;
   }
 }