Auto Commit

src/dice/index.vue

+<template>
+  <div class="content">
+    <ul class="list">
+      <li class="item" v-for="item in 6" :key="item">
+        <aside class="line" v-for="itemJ in 3" :key="itemJ">
+          <div class="dot" v-for="itemK in 2" :key="itemK"></div>
+        </aside>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  .list {
+    width: 700px;
+    height: 480px;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: repeat(3, 1fr);
+    .item {
+      display: flex;
+      $wh: 200px;
+      width: $wh;
+      height: $wh;
+      border-radius: 10px;
+      background-color: antiquewhite;
+      box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.21);
+      .line{
+        // border:1px solid #f00;
+      }
+      // 第一个
+      &:nth-child(1) {
+        justify-content: center;
+        align-items: center;
+        .line {
+          &:not(:first-child) {
+            display: none;
+          }
+          .dot {
+            &:not(:first-child) {
+              display: none;
+            }
+          }
+        }
+      }
+      // 第2个
+      &:nth-child(2) {
+        flex-wrap: wrap;
+        .line {
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          width: 100%;
+          &:last-child {
+            display: none;
+          }
+          &:nth-child(1) {
+            .dot:nth-child(2) {
+              opacity: 0;
+            }
+          }
+          &:nth-child(2) {
+            .dot:nth-child(1) {
+              opacity: 0;
+            }
+          }
+        }
+      }
+      // 第3个
+      &:nth-child(3) {
+        flex-wrap: wrap;
+        .line {
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          width: 100%;
+          height: 33.3333%;
+          
+          &:nth-child(1) {
+            align-items: flex-end;
+            .dot:nth-child(2) {
+              opacity: 0;
+            }
+          }
+          &:nth-child(2) {
+            justify-content: center;
+            .dot:nth-child(1) {
+              display: none;
+            }
+          }
+          &:nth-child(3) {
+            align-items: flex-start;
+            .dot:nth-child(1) {
+              opacity: 0;
+            }
+          }
+        }
+      }
+      // 第4个
+      &:nth-child(4) {
+        flex-direction: column;
+        justify-content: center;
+        .line {
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          width: 100%;
+          height: 38%;
+          &:nth-child(3) {
+            display: none;
+          }
+        }
+      }
+      // 第5个
+      &:nth-child(5) {
+        flex-direction: column;
+        justify-content: center;
+        .line {
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          width: 100%;
+          height: 24%;
+          &:nth-child(1) {
+            align-items: flex-end;
+          }
+          &:nth-child(2) {
+            justify-content: center;
+            .dot:nth-child(1) {
+              display: none;
+            }
+          }
+          &:nth-child(3) {
+            align-items: flex-start;
+          }
+        }
+      }
+      // 第6个
+      &:nth-child(6) {
+        flex-direction: column;
+        justify-content: center;
+        .line {
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          width: 100%;
+          height: 26%;
+        }
+      }
+    }
+    .dot {
+      $wh: 30px;
+      width: $wh;
+      height: $wh;
+      border-radius: 9999px;
+      background-color: #000;
+    }
+  }
+}
+</style>