.cell_b { margin: 2px; border-radius: 3px; background-color: white; } .key-container { width: 100%; display: flex; flex-direction: column; } .keyboard { flex: 1; position: fixed; bottom: 0; left: 0; height: 40vh; width: 100%; background: #f7f7f7; } .keyboard .key-row { display: flex; display: -webkit-flex; position: relative; height: 10vh; line-height: 10vh; } .keyboard .key-cell { flex: 1; -webkit-box-flex: 1; font-size: 60upx; display: flex; justify-content: center; align-items: center; } .keyboard .key-confirm { position: absolute; text-align: center; height: 30vh; width: 25%; line-height: 30vh; color: #ffffff; z-index: 5; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; border-top-left-radius: 2px; border-top-right-radius: 2px; } .keyboard .longConfirmBtn { width: 80%; border-radius: 25rpx; font-size: xx-large; height: 15vh; font-weight: bold; left: 10%; top:1%; } .keyboard .key-confirm2 { position: absolute; height: 10vh; width: 25%; line-height: 10vh; z-index: 9999; right: 0; top: 0; display: flex; justify-content: center; align-items: center; } .key-zero-and-point { display: flex; height: 10vh; justify-content: center; align-items: center; width: 75%; font-size: 60upx; } .key-zero-and-point .zero { display: flex; justify-content: center; align-items: center; width: 66.66%; font-size: 60upx; text-align: center; height: 100%; } .key-zero-and-point .point { display: flex; justify-content: center; align-items: center; width: 33.33%; font-size: 60upx; text-align: center; height: 100%; } .key-cell:active { color: white; background: black; opacity: 0.1; } .a:active, .key-confirm2:active { color: white; background: black; opacity: 0.1; } .jian-btn { font-size: 55rpx; font-weight: bold; } .bottom-key { display: flex; flex-direction: column; justify-content: center; align-items: center; } .hide-btn { position: absolute; top: 56vh; width: 50rpx; opacity: 0.5; height: 50rpx; }