app.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    background-color: #f5f5f5;
    font-size: 100px;
    font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
    height: 100%;
 }
@media screen and (max-width: 360px) {
    html {
        font-size: 90px;
    }
}

swan-wrapper {
    height: 100%;
}

swan-button {
    margin: 0 .23rem;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: space-between;
    font-size: .16rem;
}

.ensp {
    white-space: normal;
}

.page-body {
    margin-top: .42rem;
}

.title {
    font-size: .15rem;
    color: #666;
    padding: .3rem .22rem .18rem .22rem;
}

.input {
    box-sizing: content-box;
    margin: 0 22.67px .15rem;
    height: .38rem;
    line-height: .38rem;
    font-size: .18rem;
    padding-left: .1rem;
}

.page-title {
    margin: 1rem 0 .3rem 0;
    text-align: center;
}

.page-title-line {
    margin: 0 auto;
    width: .83rem;
    height: .02rem;
    background-color: #E6E6E6;
}
.page-top {
    text-align: center;
    margin-top: .36rem;
}
.page-top-line {
    margin: 0 auto;
    width: .54rem;
    height: .01rem;
    background-color: #979797;
    border: 0;
    position: relative;
}
.page-top-text {
    margin-bottom: .1rem;
    color: #999;
}
.page-title-text {
    margin-top: .07rem;
    color: #ccc;
}

.border-top {
    border: 0;
    position: relative;
}

.border-top:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: 0;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    background: #e6e6e6;
}

.border-right {
    position: relative;
}

.border-right:after {
    content: "";
    width: 1px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    background: #e6e6e6;
}

.border-bottom {
    border: 0;
    position: relative;
}

.border-bottom:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    background: #e6e6e6;
}

.border-left {
    border: 0;
    position: relative;
}

.border-left:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    left: 0;
    top: 0;
    -webkit-transform-origin: left center;
            transform-origin: left center;
    background: #e6e6e6;
}

.border-all {
    border: 0;
    position: relative;
}

.border-all:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 0;
    line-height: 0;
    border-radius: 0;
    border: 1px solid #e6e6e6;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    background: 0 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
not all {
    .border-top:before,
    .border-bottom:after {
        -webkit-transform: scaleY(0.66666667);
                transform: scaleY(0.66666667);
    }

    .border-right:after,
    .border-left:before {
        -webkit-transform: scaleX(0.66666667);
                transform: scaleX(0.66666667);
    }

    .border-all:before {
        width: 150%;
        height: 150%;
        -webkit-transform: scale(0.66666667);
                transform: scale(0.66666667);
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
not all {
    .border-top:before,
    .border-bottom:after {
        -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
    }

    .border-right:after,
    .border-left:before {
        -webkit-transform: scaleX(0.5);
                transform: scaleX(0.5);
    }

    .border-all:before {
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.48);
                transform: scale(0.48);
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3),
not all {
    .border-top:before,
    .border-bottom:after {
        -webkit-transform: scaleY(0.33333333);
                transform: scaleY(0.33333333);
    }

    .border-right:after,
    .border-left:before {
        -webkit-transform: scaleX(0.33333333);
                transform: scaleX(0.33333333);
    }

    .border-all:before {
        width: 300%;
        height: 300%;
        -webkit-transform: scale(0.3326);
                transform: scale(0.3326);
    }
}