update: 2026-03-28 20:59

InfoGenie-frontend/public/smallgame/别踩白方块/styles/asset/reset.css

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+
+body,
+html {
+  height: 100%
+}
+
+body {
+  font-family: '微软雅黑', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  font-size: .24rem;
+  width: 100%;
+  overflow: hidden
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-decoration: none;
+  box-sizing: border-box;
+  border: 0;
+  outline: 0;
+  font-style: normal
+}
+
+a {
+  -webkit-tap-highlight-color: transparent
+}
+
+input {
+  outline: 0
+}
+
+textarea {
+  resize: none
+}

InfoGenie-frontend/public/smallgame/别踩白方块/styles/basic.css

@@ -0,0 +1,281 @@
+@charset "UTF-8";
+
+body,
+html {
+  height: 100%
+}
+
+body {
+  font-family: '微软雅黑', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  font-size: 24px;
+  width: 100%;
+  overflow: hidden
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-decoration: none;
+  box-sizing: border-box;
+  border: 0;
+  outline: 0;
+  font-style: normal
+}
+
+a {
+  -webkit-tap-highlight-color: transparent
+}
+
+input {
+  outline: 0
+}
+
+textarea {
+  resize: none
+}
+
+body {
+  position: relative;
+  max-width: 7.5rem;
+  margin: 0 auto;
+  background: #fff
+}
+
+@media screen and (min-width:7.5rem) {
+  html {
+    background: #444
+  }
+}
+
+* {
+  -webkit-tap-highlight-color: transparent
+}
+
+.topspeed-container {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  position: relative;
+  z-index: 10
+}
+
+.topspeed-container.hide {
+  visibility: hidden;
+  z-index: -1
+}
+
+.container.topspeed {
+  height: 24%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  z-index: 2
+}
+
+.container.topspeed .row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  border-bottom: 1px solid #333;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1
+}
+
+.classics-container.hide {
+  visibility: hidden;
+  z-index: -1
+}
+
+.container.classics {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 2
+}
+
+.container.classics .row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  border-bottom: 1px solid #333;
+  height: 24%;
+  width: 100%;
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  transition: all .1s
+}
+
+.container.classics .row:nth-of-type(2) {
+  border-bottom: 0
+}
+
+.container.classics .row:nth-of-type(1) {
+  transform: translateY(100%)
+}
+
+.container.classics .row:nth-of-type(2) {
+  transform: translateY(0%)
+}
+
+.container.classics .row:nth-of-type(3) {
+  transform: translateY(-100%)
+}
+
+.container.classics .row:nth-of-type(4) {
+  transform: translateY(-200%)
+}
+
+.container.classics .row:nth-of-type(5) {
+  transform: translateY(-300%)
+}
+
+.container.classics .row:nth-of-type(6) {
+  transform: translateY(-400%)
+}
+
+.container.classics .row:nth-of-type(7) {
+  transform: translateY(-500%)
+}
+
+.cube {
+  width: 25%;
+  height: 100%;
+  cursor: pointer;
+  background: #fff;
+  transition: all .3s
+}
+
+.cube:not(:last-of-type) {
+  border-right: 1px solid #333
+}
+
+.cube.black {
+  background: #333
+}
+
+.cube.toGray {
+  background: #ddd
+}
+
+.toggle-btn {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 100%;
+  background: red;
+  position: fixed;
+  right: .2rem;
+  bottom: .2rem;
+  z-index: 100000
+}
+
+.score-container {
+  position: absolute;
+  top: .15rem;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: .54rem;
+  color: #cd4545;
+  z-index: 999;
+  font-weight: 700
+}
+
+.score-container.classics {
+  display: flex;
+  justify-content: center;
+  align-items: center
+}
+
+.modal {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center
+}
+
+.modal.white-bg {
+  background: #fff
+}
+
+.modal.dim-bg {
+  background: rgba(225, 225, 225, .7)
+}
+
+.modal a {
+  color: #00adb5;
+  display: block
+}
+
+.modal .init-modal-content {
+  height: 100%;
+  width: 100%;
+  padding: .6rem 0;
+  text-align: center;
+  line-height: 1.9rem
+}
+
+.modal .init-modal-content .title {
+  font-size: .64rem
+}
+
+.modal .init-modal-content .modal-btn {
+  font-size: .54rem;
+  height: 1.9rem
+}
+
+.modal .init-modal-content .modal-btn:nth-child(odd) {
+  background: #333;
+  color: #fff
+}
+
+.modal .modal-content {
+  width: 80%;
+  padding: .15rem;
+  border: 1px solid #333;
+  text-align: center;
+  border-radius: 4px;
+  background: #fff
+}
+
+.modal .modal-content .title {
+  font-size: .44rem;
+  margin-bottom: .25rem
+}
+
+.modal .modal-content .content {
+  font-size: .34rem;
+  line-height: 1.5
+}
+
+.modal .modal-content .content:last-of-type {
+  margin-bottom: .15rem
+}
+
+.modal .modal-content .modal-btn {
+  width: 80%;
+  padding: .1rem;
+  margin: 0 auto .15rem;
+  font-size: .32rem;
+  border: 1px solid #333;
+  cursor: pointer
+}
+
+.modal .modal-content .modal-btn.disable {
+  background: #ddd;
+  border-color: #999
+}