mashangyoujiu/Public/vip/css/password.css

[v-cloak] {
    display: none;
}

.password-box {
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.53);
    position: fixed;
    top: 0;
    left: 0;
}

.password-top-box {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-top {
    width: 80vw;
    background-color: white;
    border-radius: 2vw;
    position: relative;
    padding: 5.5vw;
    box-sizing: border-box;
}

.password-close {
    width: 3vw;
    height: 3.2vw;
    position: absolute;
    top: 5vw;
    left: 5vw;
}

.password-top-title, .password-top-tag {
    width: 100%;
    height: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vw;
    color: #1a1a1a;
}

.password-top-tag {
    font-size: 4.3vw;
    color: #000;
    margin: 8vw 0 3vw;
}

.password-top-price, .password-top-integral {
    width: 100%;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #000;
}

.password-top-price > span:nth-child(1) {
    font-size: 4.5vw;
}

.password-top-price > span:nth-child(2) {
    margin-left: 0.1vw;
    font-size: 8vw;
}

.password-top-integral > span:nth-child(1) {
    font-size: 8vw;
}

.password-top-integral > span:nth-child(2) {
    margin-left: 0.1vw;
    font-size: 3.5vw;
}

.password-show {
    width: 100%;
    height: 11.5vw;
    box-sizing: border-box;
    border: 1px solid #d1d1d1;
    display: flex;
    align-items: center;
    margin-top: 6vw;
}

.password-list {
    border-left: 1px solid #eeeeee;
    width: 16.666%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}


.password-list:nth-child(1) {
    border-left: 0;
}

.password-bottom {
    width: 100%;
    height: 59vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #f5f5f5;
}

.password-btn {
    width: 33.33%;
    height: 25%;
    font-size: 7vw;
    color: #333;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e2e2e2;
}
.password-btn:active {
    background-color: #eaeaea;
}

.password-btn:nth-child(3n-1) {
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
}

.password-btn:nth-child(3n-2) {
    border-left: 1px solid #e2e2e2;
}

.password-btn:nth-child(3n) {
    border-right: 1px solid #e2e2e2;
}

.password-disabled {
    background-color: #e0e0e0;
}

.password-del {
    background-image: url("/Public/vip/images/del-password.png");
    background-size: 100% 100%;
    background-repeat: repeat;
}

.password-md {
    background-image: url("/Public/vip/images/password-md.png");
    background-size: 100% 100%;
    background-repeat: repeat;
}