// html body
html, body, #app {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

body {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #262626;
    background-color: #fff;
    font-size: .14rem;

    // 防止底部被遮挡
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

// 路由切换 动画
.route-enter-active, .route-leave-active {
    transition: opacity .3s;
}
.route-enter, .route-leave-to {
    opacity: 0;
}

// 下拉框 消失隐藏动画
.viewer-fade-enter-active {
    animation: viewer-fade-in .3s;
}
.viewer-fade-leave-active {
    animation: viewer-fade-out .2s;
}
@keyframes viewer-fade-in {
    0% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes viewer-fade-out {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
}

*, :after, :before {
    box-sizing: border-box;
}

// van组件样式调整
// 表单
.screen-form {
    input::placeholder {
        color: #999999;
        opacity: 1;
    }
    .van-cell:after {
        transform: scaleY(1);
    }
    // 为表单最后一个控件添加底部边框
    >.van-field:last-child {
        &::before {
            position: absolute;
            box-sizing: border-box;
            content: " ";
            pointer-events: none;
            right: var(--van-padding-md);
            bottom: 0;
            left: var(--van-padding-md);
            border-bottom: 1px solid var(--van-cell-border-color);
        }
    }

    // 必选标记修改
    .van-field__label--required {
        &::before {
            display: none;
        }
        >label {
            &::after {
                content: "*";
                margin-left: 4px;
                color: var(--van-field-required-mark-color);
                display: inline-block;
                transform: translateY(1px);
            }
        }
    }
    
    // 在table表格中的控件
    .table-field {
        padding: 0;
        // input::placeholder {
        //     float: none;
        // }
        &:after {
            display: none;
        }
    }

}

// 按键形式的单选框
.doc-radio-button {
    height: 27px;
    .radio-item {
        border: 1px solid #BFBFBF;
        border-radius: 4px;
        color: #8C8C8C;
        background: transparent;
        transition: all .2s;
        padding: 0px 16px;
        font-size: 14px;
        display: inline-block;
    }
    .radio-item-active {
        background-color: var(--van-primary-color);
        border: 1px solid var(--van-primary-color);
        color: #fff;
    }
    .van-radio--horizontal {
        margin-right: 0;
        margin-left: var(--van-padding-sm);
    }
}