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: 0.125rem solid #FFC107; /* Yellow rope */ border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 1; } .nail { position: absolute; top: -0.3125rem; width: 0.75rem; height: 0.75rem; background-color: #FFC107; border-radius: 50%; z-index: 2; box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,0.2); } .board { position: absolute; top: 2.5rem; width: 11.25rem; height: 6.25rem; background-color: #FF7043; /* Orange for working */ border-radius: 0.625rem; display: flex; justify-content: center; align-items: center; box-shadow: 0 0.3125rem 0 #E64A19; transition: all 0.3s; } .board.resting { background-color: #BDBDBD; /* Gray for resting */ box-shadow: 0 0.3125rem 0 #9E9E9E; } .board-inner { width: 8.75rem; height: 3.75rem; background-color: #fff; border-radius: 0.3125rem; display: flex; justify-content: center; align-items: center; transform: rotate(-2deg); /* Slightly tilted inner paper */ } .status-text { font-size: 1.5rem; font-weight: bold; color: #FF5722; } .board.resting .status-text { color: #757575; } .screw { position: absolute; width: 0.5rem; height: 0.5rem; background-color: #fff; border-radius: 50%; opacity: 0.8; } .top-left { top: 0.625rem; left: 0.625rem; } .top-right { top: 0.625rem; right: 0.625rem; } .bottom-left { bottom: 0.625rem; left: 0.625rem; } .bottom-right { bottom: 0.625rem; right: 0.625rem; } /* 文本描述 */ .status-desc { margin-bottom: 3.125rem; color: #333; font-size: 0.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: bold; margin-bottom: 0.9375rem; border: none; } .action-btn::after { border: none; } .action-btn.stop { background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%); box-shadow: 0 0.3125rem 0.625rem rgba(255, 87, 34, 0.3); } .action-btn.stopped { background-color: #E0E0E0; color: #999; box-shadow: none; } .tips { font-size: 0.75rem; color: #999; text-align: center; line-height: 1.5; }