.com-donate-key{ width:95%; margin:auto; margin-bottom:10px; border:3px solid #653b18; border-radius: 10px; height:260px; display:flex; flex-direction: column; position:relative; overflow: hidden; z-index:890; margin-bottom:70px; .bg{ width:100%; height:100%; position: absolute; background:#FFF; top:0px; left:0px; opacity: 0.8; z-index:-1; } .current{ height:40px; line-height: 40px; display: flex; justify-content: center; align-items: center; font-size:12px; color:$teacher-main-color; } .press-key{ height:30px; line-height: 30px; display:flex; flex-direction: row; justify-content: center; align-items: center; .sign{ background:#9b7f6a; height:25px; width: 30px; display: flex; justify-content: center; align-items: center; color:#FFF; } .text{ width:50px; height:25px; overflow: hidden; text-align:center; } .left{ border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .right{ border-top-right-radius: 10px; border-bottom-right-radius: 10px; } } .number-key{ display: flex; margin-left: 10px; margin-right: 10px; margin-top:10px; flex-direction:row; .left{ display: flex; width:70%; flex-direction: column; .number{ .key{ float:left; background:#9b7f6a; width:30%; margin-right: 3px; height:40px; margin-bottom:5px; margin-left:3px; display:flex; justify-content: center; align-items: center; color:#FFF; border-radius: 10px; font-size:12px; } } .number1{ display:flex; flex-direction: row; height:30px; .key{ width:40%; display:flex; justify-content: center; align-items: center; color:#FFF; border-radius: 10px; background:#9b7f6a; margin-left:5px; font-size:12px; } .all{ width:60%; display:flex; justify-content: center; align-items: center; color:#FFF; border-radius: 10px; background:#9b7f6a; margin-left:5px; margin-right: 10px; font-size:12px; } } } .right{ width:30%; display: flex; flex-direction: column; .delete{ background:#9b7f6a; // margin-left:5px; margin-right:5px; display: flex; color:#FFF; justify-content: center; align-items: center; height:30%; border-radius: 10px; font-size:12px; } .enter{ background:#9b7f6a; // margin-left:5px; margin-right:5px; display: flex; color:#FFF; justify-content: center; align-items: center; height:65%; border-radius: 10px; margin-top:5px; font-size:12px; } } } }