2023.9.19

src/views/page/MidAutumnLotteryDraw.vue

@@ -324,21 +324,30 @@ export default {
       flex: 1;
       overflow: hidden;
 
-      //position: relative;
       .numbers {
-        display: grid;
+        height: 100%;
-        grid-template-columns: repeat(6, 1fr);
+        display: flex;
-        //grid-template-rows: repeat(6, 1fr);
+        flex-wrap: wrap;
-        grid-column-gap: 2.8em;
-        grid-row-gap: 0.93vh;
-        justify-content: center;
         align-content: center;
+        align-items: center;
+        justify-content: center;
+        & > div {
+          height: calc(100% / 6);
+          zoom: .95;
+          flex: 0 1 calc(100% / 6);
+
+          &:nth-child(6n) {
+            margin-right: 0;
+          }
+        }
+        //display: grid;
+        //grid-template-columns: repeat(6, 1fr);
+        ////grid-template-rows: repeat(6, 1fr);
+        //grid-column-gap: 2.8em;
+        //grid-row-gap: 0.93vh;
+        //justify-content: center;
+        //align-content: center;
 
-        //transform: translateY(-50%);
-        //position: absolute;
-        //top: 50%;
-        //left: 0;
-        //right: 0;
         &-active {
           & > div:nth-child(2n + 1) {
             animation: blur 0.15s infinite linear;
@@ -364,14 +373,19 @@ export default {
           color: #ebd1a8;
           text-align: center;
           font-size: 3.4em;
+          height: 16.66%;
           font-family: PingFang SC, sans-serif;
           font-weight: 800;
           border-radius: 2.8em;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           transition: all 0.3s ease-out;
 
           position: relative;
           & > span {
             position: relative;
+
           }
           &--active {
             color: #a9262c;
@@ -391,7 +405,7 @@ export default {
 
               z-index: 0;
               position: absolute;
-              inset: 0 0 0 0;
+              inset: 5px .4em 5px .4em;
             }
           }
         }