| 1 |
- body{background-color:#fff}.container{display:flex;flex-direction:column;align-items:center;padding-top:3.125rem}.signboard-container{position:relative;width:12.5rem;height:9.375rem;display:flex;justify-content:center;margin-bottom:1.875rem}.rope{position:absolute;top:0;width:6.25rem;height:3.125rem;border-top:.125rem solid #FFC107;border-radius:50% 50% 0 0/100% 100% 0 0;z-index:1}.nail{position:absolute;top:-.3125rem;width:.75rem;height:.75rem;background-color:#ffc107;border-radius:50%;z-index:2;box-shadow:0 .0625rem .125rem rgba(0,0,0,.2)}.board{position:absolute;top:2.5rem;width:11.25rem;height:6.25rem;background-color:#ff7043;border-radius:.625rem;display:flex;justify-content:center;align-items:center;box-shadow:0 .3125rem #e64a19;transition:all .3s}.board.resting{background-color:#bdbdbd;box-shadow:0 .3125rem #9e9e9e}.board-inner{width:8.75rem;height:3.75rem;background-color:#fff;border-radius:.3125rem;display:flex;justify-content:center;align-items:center;transform:rotate(-2deg)}.status-text{font-size:1.5rem;font-weight:700;color:#ff5722}.board.resting .status-text{color:#757575}.screw{position:absolute;width:.5rem;height:.5rem;background-color:#fff;border-radius:50%;opacity:.8}.top-left{top:.625rem;left:.625rem}.top-right{top:.625rem;right:.625rem}.bottom-left{bottom:.625rem;left:.625rem}.bottom-right{bottom:.625rem;right:.625rem}.status-desc{margin-bottom:3.125rem;color:#333;font-size:.9375rem;font-weight:500}.action-area{width:80%;display:flex;flex-direction:column;align-items:center}.action-btn{width:100%;height:2.75rem;line-height:2.75rem;border-radius:1.375rem;color:#fff;font-size:1rem;font-weight:700;margin-bottom:.9375rem;border:none}.action-btn:after{border:none}.action-btn.stop{background:linear-gradient(90deg,#ff9800,#ff5722);box-shadow:0 .3125rem .625rem rgba(255,87,34,.3)}.action-btn.start{background:linear-gradient(90deg,#4caf50,#2e7d32);box-shadow:0 .3125rem .625rem rgba(76,175,80,.3)}.tips{font-size:.75rem;color:#999;text-align:center;line-height:1.5}
|
