.my-address-page {
    width: 100%;
    background: #f0f0f0;

    .tip {
        padding: 20px;
        text-align: center;
        color: #aeaeae;
    }

    .address-item {
        display: block;
        padding: 20px 30px;
        color: #b0b0b0;
        background: #fff;
        border-bottom: 1px solid #e0e0e0;

        .name,
        .tel {
            font-size: 30px;
            line-height: 56px;
            color: #444;
            font-weight: bold;
        }

        .name {
            display: inline-block;
            max-width: 380px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tel {
            float: right;
        }

        .address-info {
            font-size: 24px;
            line-height: 38px;
        }

        .action {
            font-size: 32px;
            line-height: 60px;
            text-align: right;

            .edit,
            .del {
                display: inline-block;
                text-align: center;
                width: 60px;
                height: 60px;
                color: #999;

                &:hover {
                    color: #666;
                }
            }

            .edit {
                margin-right: 20px;
            }
        }
    }

    .add-address {
        display: block;
        margin-bottom: 30px;
        font-size: 32px;
        line-height: 88px;
        color: #444;
        background: #fff;
        text-align: center;
        font-weight: bold;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
    }

    .confim-mask {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 5;
    }

    .confim-box {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -270px;
        margin-top: -144px;
        width: 540px;
        text-align: center;
        color: #444;
        background: #fff;
        font-size: 32px;
        font-weight: bold;
        border-radius: 10px;

        .content {
            line-height: 200px;
        }

        .action {
            line-height: 88px;
            border-top: 1px solid #e0e0e0;

            span {
                display: inline-block;
                width: 260px;

                &:first-child {
                    border-right: 1px solid #e0e0e0;
                }
            }
        }

        .confim {
            color: #d0021b;
        }
    }
}

.my-edit-address-page {
    width: 100%;
    color: #d0d0d0;
    background: #f0f0f0;

    .edit-address {
        padding: 0 30px;
        background: #fff;
        font-size: 30px;
        line-height: 88px;
        border-bottom: 1px solid #e0e0e0;

        label {
            display: block;
            position: relative;

            &:after {
                content: "";
                position: absolute;
                right: -30px;
                bottom: 0;
                width: 610px;
                height: 0;
                border-top: 1px solid #e0e0e0;
            }

            &:last-of-type:after {
                content: none;
            }

            .iconfont {
                position: absolute;
                right: 0;
                top: 0;
            }
        }

        input,
        textarea {
            position: absolute;
            top: 0;
            right: 40px;
            width: 360px;
            height: 88px;
            color: #444;
            padding: 0;
            border: none;
            -webkit-appearance: none;
        }

        p {
            position: absolute;
            top: 0;
            right: 40px;
            width: 360px;
            height: 88px;
            color: #444;
            padding: 0;
            border: none;
        }

        .address {
            height: 176px;
        }

        textarea {
            right: 0;
            width: 400px;
            height: 58px * 2;
            padding: 20px 0;
            resize: none;
        }
    }

    .submit {
        margin: 30px auto 0;
        width: 470px;
        height: 88px;
        color: #fff;
        background: #444;
        text-align: center;
        font-size: 32px;
        line-height: 88px;

        &.highlight {
            background: rgba(0, 0, 0, 0.6);
        }
    }
}

.my-address-list-page {
    position: relative;
    width: 100%;
    color: #444;
    background: #fff;

    li {
        padding: 0 30px;
        font-size: 32px;
        line-height: 88px;
        border-bottom: 1px solid #e0e0e0;

        .iconfont {
            float: right;
            color: #d0d0d0;
        }

        &.highlight {
            background: #eee;
        }

        ul {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            width: 100%;
        }
    }
}