├── style.css ├── index.html └── js ├── app.js └── vue.min.js /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | #app { 6 | max-width: 300px; 7 | background: #2196F3; 8 | margin: 0px auto; 9 | text-align: center; 10 | padding: 50px 20px; 11 | color: white; 12 | font-family: Verdana, Geneva, Tahoma, sans-serif; 13 | } 14 | 15 | #game-box { 16 | width: 240px; 17 | display: inline-block; 18 | margin: 50px auto 0px; 19 | padding: 0px; 20 | } 21 | 22 | .mode-panel, 23 | .sign-panel { 24 | font-size: 0px; 25 | } 26 | 27 | hr { 28 | margin: 0px; 29 | color: white; 30 | height: 0px; 31 | border: none; 32 | border-bottom: 1px solid white; 33 | } 34 | 35 | label { 36 | display: inline-block; 37 | width: 50%; 38 | height: 40px; 39 | line-height: 40px; 40 | font-size: 16px; 41 | cursor: pointer; 42 | } 43 | 44 | label.selected { 45 | background: #2089dd; 46 | } 47 | 48 | input[type="radio"], 49 | input[type="checkbox"] { 50 | display: none; 51 | } 52 | 53 | .grid-item { 54 | float: left; 55 | width: 33.333%; 56 | font-size: 50px; 57 | height: 80px; 58 | line-height: 80px; 59 | border: 1px solid white; 60 | margin: 0px; 61 | text-align: center; 62 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 |