主要思路：
- 使用 input 用于输入，宽高刚好等于六个密码框就行
- 使用六个 div 用于展示输入的密码使用 * 号代替也可
- 每个密码块里写一个用于展示提示符的 div 根据 place 匹配提示符应该出现的格子
- input 的层级需要高于六个密码展示块，设置 opacity: 0; 把 input 隐藏起来，这样用户就看不到 input 框，点击密码块的时候其实是点击的 input 框进行输入
- 密码块遍历密码数组做对应的展示就行
{{item}}@keyframes fade { //闪烁的动画
from {
opacity: 1.0;
}
50% {
opacity: 0.2;
}
to {
opacity: 1.0;
}
}
.dialog{
width: 100vw;
height: 100vh;
z-index: 999;
background-color: rgba(0,0,0, .6);
display: flex;
justify-content: center;
align-items: center;
.box-border{
width: 500px;
height: 200px;
background-color: #fff;
border: 1px solid #fff;
box-shadow: 0px 0px 10px rgba(0,0,0, .6) inset;
display: flex;
justify-content: center;
align-items: center;
.box{
position: relative;
display: flex;
.enter{
width: 50px;
height: 50px;
border: 1px solid #000;
margin: 0 5px 0 0;
z-index: 100;
display: flex;
font-size: 30px;
justify-content: center;
align-items: center;
//跳跃的指示符
.tips{
height: 30px;
width: 1px;
background-color: #000;
animation: fade 1000ms infinite;
}
}
.int{
border: none;
display: inline-block;
width: 100%;
height: 50px;
position: absolute;
z-index: 999;
opacity: 0;
}
}}
}.salary-container{
padding:30px;
}【写了一个密码输入框【pc】】效果图：
文章图片
