feat: redoed the rock game

dearDreamWeb · Mar 2, 2024 · a00b0b1 · a00b0b1
1 parent 833f637
commit a00b0b1
Show file tree

Hide file tree

Showing 4 changed files with 292 additions and 161 deletions.
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
@@ -44,7 +44,7 @@ module.exports = {
     // property-no-vendor-prefix
     'property-no-vendor-prefix': true,
     // 禁止小于 1 的小数有一个前导零
-    'number-leading-zero': 'never',
+    'number-leading-zero': null,
     // 禁止空第一行
     'no-empty-first-line': true,
     // 属性的排序

diff --git a/src/components/rockGame/rockGame.module.less b/src/components/rockGame/rockGame.module.less
@@ -1,19 +1,25 @@
 .modalBox {
-  .modal-main {
-    width: 100%;
-    height: 100%;
+  :global {
+    .modal-main {
+      display: flex;
+      flex-direction: column;
+    }
   }
 }
 
 .gameBox {
+  flex: 1;
   padding: 16px 12px;
   width: 100%;
   height: 100%;
-  color: #FFFFFF;
-  background-color: #3C3C3C;
+  color: #ffffff;
+  background-color: #3c3c3c;
 
   .gameMain {
     .gameOpponentBox {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       margin-top: 24px;
 
       title {
@@ -25,25 +31,52 @@
   }
 
   .imgListBox {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    row-gap: 0.5rem;
     margin: 12px 0;
 
     .imgListItem {
+      position: relative;
+      margin: auto;
       width: 100px;
       height: 100px;
       background-repeat: no-repeat;
       background-size: 100% 100%;
+      transition: transform 0.25s ease-in;
       cursor: pointer;
-      transition: transform .25s ease-in;
+
+      .imgListSelected {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        font-size: 2rem;
+        font-weight: bold;
+        color: #333333;
+        background-color: rgb(202 248 206 / 90%);
+      }
 
       &:hover {
         transform: scale(1.2);
       }
     }
   }
 
+  .selectedListItem {
+    transition: transform 0.25s ease-in;
+    cursor: pointer;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+
   .resultBox {
     display: flex;
     justify-content: space-around;
@@ -55,7 +88,7 @@
 
     .resultItemBox {
       .resultItemImg {
-        border: 1px dashed #FFFFFF;
+        border: 1px dashed #ffffff;
         width: 80px;
         height: 80px;
         background-repeat: no-repeat;
@@ -77,7 +110,7 @@
   .resultMain {
     display: flex;
     flex-direction: column;
-    margin: 36px 0 0;
+    // margin: 36px 0 0;
 
     .result0,
     .result1,