.zui-platenumber { box-sizing: border-box; width: 100%; background: #FFF; } .zui-platenumber .button { border: none; padding: 0; margin: 0; border-radius: 0; line-height: 1; outline: none; } .zui-platenumber .button::after { border: none; } .zui-platenumber__head { display: flex; align-items: center; padding: 0.75rem 1rem 0 1rem; } .zui-platenumber__head .button { display: flex; justify-content: center; align-items: center; height: 2.5rem; color: #000; margin-right: 0.5rem; background-color: #fff; border-radius: 0.5rem; font-size: 0.875rem; padding: 0.75rem 1rem; box-sizing: border-box; position: relative; } .zui-platenumber__head .button::after { content: ""; pointer-events: none; /* 防止点击触发 */ box-sizing: border-box; position: absolute; width: 200%; height: 200%; left: 0; top: 0; border: 1px solid rgba(151, 151, 151, 0.2); border-radius: 1rem; transform: scale(0.5); transform-origin: 0 0; } .zui-platenumber__head .button.checked { color: #fff; background-color: #FCD404; } .zui-platenumber__head .button:active { background-color: #eec803; } .zui-platenumber__body { box-sizing: border-box; padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; } .zui-platenumber__body .split-dot { width: 0.25rem; height: 0.25rem; background: rgba(151, 151, 151, 0.8); border-radius: 50%; } .zui-platenumber__body .input-box { border-radius: 0.25rem; height: 2.25rem; width: 2.25rem; min-width: 2.25rem; box-sizing: border-box; position: relative; } .zui-platenumber__body .input-box::after { content: ""; pointer-events: none; /* 防止点击触发 */ box-sizing: border-box; position: absolute; width: 200%; height: 200%; left: 0; top: 0; border: 1px solid rgba(151, 151, 151, 0.2); border-radius: 0.5rem; transform: scale(0.5); transform-origin: 0 0; } .zui-platenumber__body .input-box.active::after { border-color: #FCD404; } .zui-platenumber__body .input-box .text { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-weight: 600; font-size: 1.25rem; } .zui-platenumber__keyboard { padding: 0.5rem; box-sizing: border-box; transition: all 0.3s; display: flex; flex-wrap: wrap; justify-content: flex-start; ; background-color: rgba(151, 151, 151, 0.1); } .zui-platenumber__keyboard .key-text { display: block; background: #fff; border-radius: 0.25rem; width: 2.35rem; min-width: 2.35rem; height: 2.35rem; margin: 0.5rem 0.25rem; font-size: 1rem; display: flex; align-items: center; justify-content: center; position: relative; } .zui-platenumber__keyboard .key-text:active { background: #e5e5e5; } .zui-platenumber__keyboard .key-text::after { border: none; } .zui-platenumber__btn-group { display: flex; justify-content: space-between; background: #fff; box-sizing: border-box; padding: 0.75rem 1rem; } .zui-platenumber__btn-group .left, .zui-platenumber__btn-group .right { display: flex; align-items: center; } .zui-platenumber__btn-group .left .button { margin-right: 0.25rem; } .zui-platenumber__btn-group .right .button { margin-left: 0.25rem; } .zui-platenumber__btn-group .button { display: flex; justify-content: center; align-items: center; height: 2.5rem; color: #000; background-color: #fff; border-radius: 0.25rem; font-size: 0.875rem; padding: 0.75rem 1rem; position: relative; box-sizing: border-box; } .zui-platenumber__btn-group .button::after { content: ""; pointer-events: none; /* 防止点击触发 */ box-sizing: border-box; position: absolute; width: 200%; height: 200%; left: 0; top: 0; border: 1px solid rgba(151, 151, 151, 0.2); border-radius: 0.5rem; transform: scale(0.5); transform-origin: 0 0; } .zui-platenumber__btn-group .button:active { background-color: #f7f7f7; } .zui-platenumber__btn-group .btn-confirm { color: #fff; background-color: #FCD404; } .zui-platenumber__btn-group .btn-confirm:active { background-color: #eec803; }