MP-zxs/components/authorizeBox/authorizeBox.wxss

/* components/authorizeBox/authorizeBox.wxss */
.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.35s;
}

.showAuthorizeBox {
    opacity: 1;
}

.containers {
    width: 600rpx;
    height: 750rpx;
    border-radius: 30rpx;
}

.content {
    padding: 30rpx;
    width: 100%;
    height: calc(100% - 130rpx);
    border-radius: 30rpx;
    background: #f7f7f7;
    box-sizing: border-box;
    box-shadow: 0px 0px 20rpx 0px #515151;
}

.title {
    width: 100%;
    text-align: center;
    height: 80rpx;
    font-family: "苹方M";
    font-size: 32rpx;
    color: #313131;
}

.introduce-box {
    width: 100%;
    height: calc(100% - 180rpx);
}

.introduce {
    padding-bottom: 50rpx;
    width: 100%;
    font-family: "苹方R";
    font-size: 28rpx;
    line-height: 45rpx;
    color: #313131;
}

.item {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
}

.label {
    width: 160rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-family: "苹方R";
    font-size: 28rpx;
    color: #515151;
    text-align: left;
}

.value {
    width: 0;
    flex: 1;
    height: 100%;
    color: #313131;
    font-family: "苹方M";
    font-size: 28rpx;
}

.value>input {
    width: 100%;
    height: 100%;
}

.button-box {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-box>button {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    background: #4686F6;
}

.close {
    margin: auto;
    margin-top: 50rpx;
    position: relative;
    width: 80rpx;
    height: 80rpx;
    background: rgba(255, 255, 255, .5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 20rpx 0px #515151;
}

.close::after {
    position: absolute;
    content: "";
    width: 60rpx;
    height: 8rpx;
    border-radius: 4rpx;
    background: #ffffff;
    rotate: 45deg;
}

.close::before {
    position: absolute;
    content: "";
    width: 60rpx;
    height: 8rpx;
    border-radius: 4rpx;
    background: #ffffff;
    rotate: -45deg;
}