@charset "UTF-8";
//包含顶部内容的容器
.top-box {
    display: flex;
    height: 5.4rem;
    background: #FFFFFF;
    margin-bottom: .2rem;
}

//弹出菜单
.popover {
    transition: all 0.3s;
    transform: translate(-100%, 0);
    width: 3.88rem;
    height: 100%;
    background: #FFFFFF;
    position: fixed;
    top: 1.1rem;
    bottom: 0;
    z-index: 5;
    .popover-top {
        width: 100%;
        height: .65rem;
        border-top: 1px solid #EEEEEE;
        font-size: .24rem;
        font-weight: 400;
        color: #666666;
        line-height: .2rem;
        .mui-segmented-control {
            width: 100%;
            overflow-x: auto;
            display: flex;
            overflow: auto;
            &::-webkit-scrollbar {
                display: none;
            }
            .mui-control-item {
                overflow: visible;
                flex: 1;
                width: unset;
                margin-right: .5rem;
                &:first-child {
                    padding-left: .3rem;
                }
                &:last-child {
                    padding-right: .3rem;
                }
            }
        }
    }
    .mui-table-view {
        background: #FFFFFF;
        &:before {
            background-color: #EEEEEE;
        }
        &:after {
            height: 0;
        }
    }
    .mui-table-view-cell {
        width: 100%;
        height: .65rem;
        display: flex;
        justify-content: space-between;
        &:after {
            left: 0;
            background-color: #EEEEEE;
        }
        .popover-coin {
            font-size: .24rem;
            color: #666666;
            span {
                color: #999999;
                font-size: .17rem;
            }
        }
        .popover-price {
            font-size: .24rem;
            color: #4CD49B;
        }
    }
}
.mui-table-view .mui-active {
    background-color: #EEEEEE !important;
}

//左边买入卖出样式
.left-box {
    flex: 1;
    position: relative;
    .left-box-btn-group {
        width: 100%;
        display: flex;
        margin: .2rem 0 .1rem .2rem;
        .btn-group-buy {
            width: 1.48rem;
            height: .6rem;
            border-radius: 4px 0px 0px 4px;
            position: relative;
            font-size: .27rem;
            font-weight: 400;
            color: #FFFFFF;
            line-height: .6rem;
            text-align: center;
            &:after {
                position: absolute;
                border-left: .27rem solid transparent;
                border-right: .34rem solid transparent;
                border-bottom: .3rem solid #FFFFFF;
                content: " ";
                display: block;
                width: 0;
                height: 0;
                top: .17rem;
                left: 1.05rem;
                transform: rotate(270deg);
                -webkit-transform: rotate(270deg);
            }
        }
        .transfer {
            height: .6rem;
            img {
                width: .4rem;
                height: .4rem;
                vertical-align: -webkit-baseline-middle;
            }
        }
        .btn-group-sale {
            width: 1.48rem;
            height: .6rem;
            border-radius: 0px 4px 4px 0px;
            position: relative;
            font-size: .27rem;
            font-weight: 400;
            color: #FFFFFF;
            line-height: .6rem;
            text-align: center;
            &:before {
                position: absolute;
                border-left: .27rem solid transparent;
                border-right: .34rem solid transparent;
                border-bottom: .27rem solid #FFFFFF;
                content: " ";
                display: block;
                width: 0;
                height: 0;
                top: .17rem;
                left: -.19rem;
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
            }
        }
    }
    .inputInfo {
        .mui-btn-block {
            font-size: 10px;
            display: inline-block;
            width: 40%;
            margin-bottom: 0;
            padding: 6px 12px;
            background: #182842;
            color: #fff;
            float: right;
        }
        .limit-buy {
            width: 3.36rem;
            height: .6rem;
            background: #F1F1F1;
            border: 1px solid #F1F1F1;
            border-radius: 4px;
            color: #333333;
            font-size: .22rem;
            padding: 0 ;
            padding-left: .2rem;
            margin: .1rem 0 .1rem .2rem;
            &::-webkit-input-placeholder {
                font-size: .2rem;
                font-weight: 400;
                color: #BBBBBB;
            }
        }
        .inputInfo-item1 {
            margin-top: .2rem;
            a {
                width: 100%;
                font-size: .27rem;
                color: #333333;
                line-height: .2rem;
                margin: .2rem 0 .2rem .2rem;
                .icon_more {
                    display: inline-block;
                    vertical-align: middle;
                    width: 0;
                    height: 0;
                    border: 5px solid transparent;
                    /*5px 足够了*/
                    border-top-color: #666666;
                    /*top箭头向下 bottom箭头向上*/
                }
            }
            .buy-rate {
                font-size: .2rem;
                font-weight: 400;
                color: #999999;
                line-height: .2rem;
                margin: .1rem 0 .1rem .2rem;
            }
        }
        .inputInfo-item2 {
            //          margin-top: .2rem;
            p {
                width: 3.36rem;
                font-size: .2rem;
                font-weight: 400;
                color: #999999;
                line-height: .2rem;
                position: relative;
                margin: .1rem 0 .1rem .2rem;
                span {
                    position: absolute;
                    right: 0;
                }
            }
        }
        .inputInfo-item3 {
            position: absolute;
            bottom: 0;
            .buy {
                width: 3.36rem;
                height: .6rem;
                background: #73D13D;
                border-radius: 4px;
                font-size: .27rem;
                font-weight: 400;
                color: #FFFFFF;
                margin: .2rem 0 .1rem .2rem;
                border: 1px solid #73D13D;
            }
            .sales {
                width: 3.36rem;
                height: .6rem;
                background: #E32E33;
                border-radius: 4px;
                font-size: .27rem;
                font-weight: 400;
                color: #FFFFFF;
                margin: .2rem 0 .1rem .2rem;
                //              display: none;
                border: 1px solid #E32E33;
            }
        }
    }
}

//右边挂单历史样式
.right-box {
//  flex: 1;
    position: relative;
    margin-right: .1rem;
    .right-box-btn-group {
        display: flex;
        margin: .2rem 0 .1rem .2rem;
        .pending-order {
            width: 1.13rem;
            height: .6rem;
            background: linear-gradient(90deg, rgba(34, 140, 250, 1) 0%, rgba(4, 184, 211, 1) 98%);
            border-radius: 4px;
            font-size: .27rem;
            font-weight: 400;
            color: #FFFFFF;
            line-height: .6rem;
            text-align: center;
            margin-right: .2rem;
        }
        .history {
            width: 1.13rem;
            height: .6rem;
            background: linear-gradient(90deg, rgba(255, 157, 0, 1) 0%, rgba(255, 205, 52, 1) 100%);
            border-radius: 4px;
            font-size: .27rem;
            font-weight: 400;
            color: #FFFFFF;
            line-height: .6rem;
            text-align: center;
        }
    }
    .handicap-ul {
        position: absolute;
        top: 55%;
    }
    .item-list {
        margin: 0 .2rem;
        &:last-child {
            position: absolute;
            bottom: 0;
            width: 86%;
        }
        &:first-child {
            position: absolute;
            top: 0;
        }
        li {
            display: flex;
            justify-content: space-between;
            font-size: .2rem;
            font-weight: 400;
            line-height: .35rem;
            span {
                &:nth-child(1) {
                    color: #FD595D;
                }
                &:nth-child(2) {
                    color: #6584AB;
                }
            }
            .gspan {
                color: #4CD49B !important;
            }
        }
        .list-title {
            span {
                color: #4B627F !important;
            }
        }
        .handicap {
            display: block;
            justify-content: initial;
            .handicap-num {
                font-size: .27rem;
                display: block;
            }
            .handicap-rate {
                font-size: .18rem;
                display: block;
                color: #4B627F;
            }
        }
    }
}

//底部最近委托页面样式
.bottom-content {
    width: 100%;
    background: #FFFFFF;
    h3 {
        width: 100%;
        height: .8rem;
        font-size: .27rem;
        font-weight: 400;
        color: #333333;
        padding-left: .2rem;
        line-height: .8rem;
        border-bottom: 1px solid #EEEEEE;
    }
    .bottom-content-list {
        .buys,
        .sales {
            display: flex;
            font-size: .27rem;
            font-weight: 400;
            color: #73D13D;
            margin: 0 .2rem .1rem .2rem;
            padding-top: .2rem;
            span {
                color: #666666;
                &:nth-child(1) {
                    flex: 1;
                    margin-left: .1rem;
                }
                &:nth-child(2) {
                    width: .6rem;
                    height: .3rem;
                    color: #208EF8;
                    font-size: .2rem;
                    text-align: right;
                }
            }
        }
        .sales {
            color: #E32E33;
        }
        .list-bottom {
            border-bottom: 1px solid #EEEEEE;
            margin: 0 .2rem;
            .item-list {
                display: flex;
                li {
                    flex: 1;
                    white-space: nowrap;
                    &:nth-child(2) {
                        padding-left: .3rem;
                    }
                    span {
                        display: block;
                        margin: .2rem 0;
                        &:nth-child(1) {
                            font-size: .24rem;
                            color: #999999;
                            line-height: 12px;
                        }
                        &:nth-child(2) {
                            font-size: .2rem;
                            color: #333333;
                            line-height: 12px;
                        }
                    }
                    &:nth-child(3) {
                        text-align: right;
                    }
                }
            }
        }
    }
}

//<!--买入卖出交易密码确认样式-->
.confirm {
    width: 5.42rem;
    height: 3.54rem;
    border-radius: 4px;
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -2.71rem;
    margin-top: -1.77rem;
    background: #FFFFFF;
    border-radius: .2rem;
    z-index: 3;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    .input-group {
        position: relative;
        text-align: center;
        overflow: hidden;
        .title-top {
            height: .8rem;
            border-bottom: 1px solid #F1F1F1;
        }
        .icon {
            position: absolute;
            left: .1rem;
            padding-top: .2rem;
            color: #333333;
        }
        .title {
            display: inline-block;
            width: 100%;
            padding-top: .2rem;
            color: #333333;
        }
        .mui-input-row {
            padding: 0 .3rem;
            margin-top: .4rem;
            label {
                font-size: .24rem;
                font-weight: 400;
                color: #333333;
                text-align: left;
                padding: 0;
                margin-bottom: .17rem;
            }
            .mui-input-password {
                width: 100%;
                height: .6rem;
                border: none;
                background-color: #F1F1F1;
                color: #333333;
                padding-left: .2rem;
                &::-webkit-input-placeholder {
                    font-size: .22rem;
                    font-weight: 400;
                    color: #999999;
                }
            }
            .mui-icon-eye {
                top: .5rem;
                right: .29rem;
            }
        }
        .mui-button-row {
            button {
                width: 89%;
                height: .6rem;
                background: #D43436;
                border-radius: 4px;
                border: 1px solid #D43436;
                margin-top: .2rem;
            }
        }
    }
}

//灰色背景图蒙版样式
.bg {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: rgba(21, 33, 54, 0.8);
    z-index: 2;
    display: none;
}

//底部弹出框
#popover2 {
    height: 2rem;
    width: 100%;
}

#popover2 ul li {
    padding: 0.25rem;
    font-size: 0.3rem;
}