* { box-sizing: border-box; padding: 0; margin: 0; } .virtualkeyboard { font-family: "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial; position: absolute; width: 10rem; /* border: 1px solid #999; */ z-index: 99999; /* top: 50%; left: 50%; transform: translate(-50%, -50%); */ bottom: 0; user-select: none; } .inputZone { background: #f3f3f3; display: flex; flex-direction: column; align-items: center; padding: .0185rem 0; } .inputZone > div { display: flex; } /* .inputZone span { font-size: 32px; width: 64px; border-radius: 4px; height: 60px; text-align: center; line-height: 60px; background: white; display: inline-block; border: 1px solid #DBDBDB; cursor: pointer; } */ .inputZone span { float: left; font-size: .2778rem; width: .7778rem; border-radius: .0926rem; height: .8333rem; text-align: center; line-height: .8333rem; border: .0093rem solid #ccc; margin: .0463rem; background: white; cursor: pointer; box-shadow: .0093rem .0093rem .0278rem .0185rem rgba(0,0,0,0.1); font-weight: bold; } /* .inputZone span:active { background: #eee; } */ .inputZone .func:active,.inputZone .blank:active { background: #eee; } .inputZone .letter:active,.inputZone .number:active,.inputZone .symbol:active { background: #eee; line-height: .5556rem; font-weight: bolder; font-size: .5556rem; } /* .keyboardOp { height: 44px; line-height: 44px; font-size: 20px; cursor: move; background-color: white; } */ .keyboardOp { height: .5926rem; line-height: .5926rem; font-size: .3704rem; cursor: move; background-color: white; /* background: transparent; */ } .keyboardOp > .slideDown { float: right; font-weight: bold; color: darkviolet; cursor: pointer; padding: 0 .1852rem; border-left: .0093rem solid #DBDBDB; } .keyboardOp > .slideDown:active { background-color: #DBDBDB; color: red; } .outputZone { display: none; position: absolute; width: 6.9444rem; height: .3704rem; left: -0.0093rem; top: -0.3704rem; border: .0093rem solid #999; box-sizing: border-box; background-color: white; } .outputZone .zh-pinyin-letter { font-size: .2778rem; font-weight: bold; color: #dc4f42; margin-left: .1481rem; } .outputZoneOp { float: right; height: .3704rem; line-height: .3704rem; } .outputZoneOp > span { display: inline-block; height: 100%; padding: 0 .0741rem; font-size: .2222rem; cursor: pointer; } .outputZoneOp > span:active { color: red; background-color: #cccccc; } .outputZoneOp .unclick { color: #999; cursor: not-allowed; } .output-ZH{ padding-left: 0px !important; margin-bottom: 0px !important;; } /* .output-ZH > li { padding: 0 12px; cursor: pointer; float: left; list-style: none; } */ .output-ZH > li { padding: 0 .1481rem; cursor: pointer; float: left; list-style: none; font-weight: bold; } .output-ZH > li:active { color: red; background-color: #cccccc; } .virtualkeyboard .hide { display: none; } /* .virtualkeyboard .blank { width: 260px; font-size: 20px; } */ .virtualkeyboard .blank { width: 2.63333rem; font-size: .1852rem; } .virtualkeyboard .symbol { font-size: .1667rem; } .virtualkeyboard .func { font-size: .1852rem; color: #0a90fd; }