.wux-keyboard { display: block; width: 100%; color: #333; background-color: #f7f7f7 } .wux-keyboard__hd { height: 80rpx; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: 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: 2rpx; border-bottom: 2rpx solid #d9d9d9; color: #d9d9d9; transform-origin: 0 100%; transform: scaleY(.5) } .wux-keyboard__bd { margin: 30rpx 80rpx; display: -ms-flexbox; 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 { -ms-flex: 1; flex: 1; position: relative; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; height: 100rpx } .wux-keyboard__label:not(:last-child):after { content: ""; width: 2rpx; 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: 12rpx; height: 12rpx; 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: 2rpx; border-top: 2rpx solid #d9d9d9; color: #d9d9d9; transform-origin: 0 0; transform: scaleY(.5) } .wux-keyboard__title { overflow: hidden; padding: 20rpx 0 12rpx; color: #222; margin-bottom: 2rpx; font-size: 24rpx; text-align: center; background-color: #fff } .wux-keyboard__title:before { font-size: 26rpx; color: #ff2424; line-height: 1; margin-right: 6rpx } .wux-keyboard__numbers { font-size: 48rpx; background-color: #fff } .wux-keyboard__number { display: -ms-flexbox; display: flex; width: 100% } .wux-keyboard__text { display: -ms-flexbox; display: flex; width: 1%; -ms-flex: 1; flex: 1; color: #222; height: 100rpx; position: relative; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; overflow: hidden } .wux-keyboard__text:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 2rpx; border-top: 2rpx 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: 2rpx; bottom: 0; border-right: 2rpx 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 }