.wux-keyboard { display: block; width: 100%; color: rgba(0,0,0,.85); background-color: #f7f7f7 } .wux-keyboard__hd { height: 80rpx; display: flex; justify-content: center; align-items: center; color: #1f2324; font-size: 30rpx; position: relative } .wux-keyboard__hd::after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1PX; border-bottom: 1PX solid #d9d9d9; color: #d9d9d9; transform-origin: 0 100%; transform: scaleY(.5) } .wux-keyboard__bd { margin: 30rpx 80rpx; display: flex; position: relative; background-color: #fff } .wux-keyboard__input { width: 100%; padding: 8rpx; height: 80rpx; min-height: 80rpx; text-align: center; box-sizing: border-box } .wux-keyboard__label { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; height: 100rpx } .wux-keyboard__label:not(:last-child)::after { content: ""; width: 1px; height: 50%; position: absolute; right: 0; top: 25%; background-color: #d9d9d9; transform: scaleX(.5) } .wux-keyboard__password { width: auto; height: auto; display: none } .wux-keyboard__password--dot { width: 6px; height: 6px; border-radius: 50%; background-color: #000 } .wux-keyboard__password--active { display: block } .wux-keyboard__ft { background-color: #fff; position: relative } .wux-keyboard__ft::before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1PX; border-top: 1PX solid #d9d9d9; color: #d9d9d9; transform-origin: 0 0; transform: scaleY(.5) } .wux-keyboard__title { overflow: hidden; padding: 10px 0 6px; color: #222; margin-bottom: 1px; font-size: 12px; text-align: center; background-color: #fff } .wux-keyboard__title::before { font-size: 13px; color: #ff2424; line-height: 1; margin-right: 3px } .wux-keyboard__numbers { font-size: 24px; background-color: #fff } .wux-keyboard__number { display: flex; width: 100% } .wux-keyboard__text { display: flex; width: 1%; flex: 1; color: #222; height: 50px; position: relative; justify-content: center; align-items: center; overflow: hidden } .wux-keyboard__text::before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1PX; border-top: 1PX solid #d9d9d9; color: #d9d9d9; transform-origin: 0 0; transform: scaleY(.5) } .wux-keyboard__text:not(:last-child)::after { content: " "; position: absolute; right: 0; top: 0; width: 1PX; bottom: 0; border-right: 1PX solid #d9d9d9; color: #d9d9d9; transform-origin: 100% 0; transform: scaleX(.5) } .wux-keyboard__text--hover { background-color: #dedede; color: rgba(0,0,0,.6) } .wux-keyboard__number:last-child .wux-keyboard__text:last-child, .wux-keyboard__number:last-child .wux-keyboard__text:nth-last-child(3) { background-color: #f7f7f7; font-size: 30rpx; color: #686868 }