* {
    box-sizing: border-box;
}

.app {
    width: 500px;
    border: 1px solid #ddd;
    margin: 50px auto;
}


.appleBusket {
    width: 470px;
    margin: 20px auto;
    border-radius: 4px;
    border: 1px solid #ddd;
    position: relative;


    > .title {
        padding: 15px 0;
        text-align: center;
        color: #069;
        font-size: 22px;
        font-weight: bold;
    }

    > .stats {
        width: 100%;
        border-top: 1px dashed #ddd;
        border-bottom: 1px dashed #ddd;
        padding: 10px 0;

        .section {
            display: inline-block;
            width: 50%;
            padding-left: 8px;

            .head {
                padding: 6px 0px;
                font-size: 16px;
                color: #069;
            }
            .content {
                font-size: 20px;
                font-weight: 200;
            }
            &:first-of-type {
                border-right: 1px solid #f0f0f0;
            }
        }
    }

    > .appleList {
        padding: 10px 0;
        .empty-tip {
            text-align: center;
            font-size: 16px;
            color: #ccc;
            padding: 20px 0;
        }
    }

    > .btn-div {
        text-align: center;
        button {
            border: none;
            background-color: #096;
            color: #fff;
            font-size: 14px;
            cursor: pointer;

            padding: 13px 50px;
            border-radius: 6px;
            margin: 20px auto;
            outline: none;
        }
        button:hover {
            background-color: #55d98d
        }
        button.disabled {
            background-color: #95a5a6;
            cursor: default;
            opacity: 0.65;
        }
    }
}