fontend-app/html/market/css/market_info.scss

@charset "UTF-8";
//弹出菜单
.popover {
    transition: all 0.3s;
    transform: translate(-100%, 0);
    width: 3.88rem;
    height: 100%;
    width: 3.88rem;
    background: #FFFFFF;
    position: fixed;
    top: 1.1rem;
    bottom: 0;
    z-index: 5;
    //  display: none;
    .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: #333333;
            span {
                color: #666666;
                font-size: .17rem;
            }
        }
        .popover-price {
            font-size: .24rem;
            color: #4CD49B;
        }
    }
}

//顶部内容显示样式
.market-info {
    width: 100%;
    height: 1.3rem;
    background: #FFFFFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .market--info-left {
        margin-right: 1rem;
        font-family: Helvetica;
        .coin-price {
            font-size: .43rem;
            font-weight: bold;
            color: #666666;
            line-height: .2rem;
            display: block;
            padding-bottom: .3rem;
        }
        .coin-rate {
            font-size: .24rem;
            color: #666666;
            line-height: .2rem;
            .coin-gain {
                font-size: .2rem;
                color: #73D13D;
            }
        }
    }
    .market-info-right {
        li {
            width: 1.75rem;
            display: flex;
            justify-content: space-between;
        }
        font-size: .2rem;
        span {
            display: block;
            padding-bottom: .1rem;
        }
        .coin-ranking {
            color: #666666;
            line-height: .2rem;
        }
        .coin-ranking-info {
            font-family: Helvetica;
            color: #999999;
            line-height: .2rem;
        }
    }
}

//行情走势图k线
.market-k,
.market-bottom {
    background: #FFFFFF;
    color: #666666;
    font-size: .24rem;
}


//深度买卖情况样式
.market-bottom {
    background: #FFFFFF;
    padding-bottom: .2rem;
    margin: .2rem 0 .9rem 0;
    .buying-selling {
        li {
            width: 100%;
            display: flex;
            margin: 0 auto;
            text-align: center;
            span {
                flex: 1;
                &:nth-child(3) {
                    flex: 2;
                }
                &:first-child,
                &:last-child {
                    flex: 0.5;
                }
            }
            p {
                flex: 2;
                display: flex;
                span {
                    flex: 1;
                }
                .price-buy {
                    color: #4CD49B;
                    text-align: right;
                }
                .price-sale {
                    color: #FD595D;
                    text-align: left;
                }
            }
        }
        .buying-selling-title {
            font-size: .2rem;
            color: #333333;
        }
        .buying-selling-info {
            font-size: .17rem;
            p {
                font-size: .17rem;
            }
            .buy-sale {
                color: #6584AB;
            }
            .buy-sale-num {
                color: #999999;
            }
        }
    }
}

//成交情况样式
.transaction {
    margin-top: .2rem;
    li {
        width: 94%;
        display: flex;
        margin: 0 auto;
        font-size: .17rem;
        text-align: center;
    }
    .transaction-title {
        color: #333333;
        span {
            flex: 1;
        }
    }
    .transaction-info {
        span {
            flex: 1;
        }
        .transaction-time,
        .transaction-num {
            color: #6584AB;
        }
        .transaction-direction-sale {
            color: #FD595D;
        }
        .transaction-direction-buy {
            color: #4CD49B;
        }
        .transaction-price {
            color: #999999;
        }
    }
}

//简介样式
.introduction {
    h3 {
        width: 90%;
        color: #333333;
        font-size: .37rem;
        margin: .2rem auto;
    }
    .introduction-item {
        .introduction-item-list {
            width: 90%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .24rem;
            margin: 0 auto;
            span {
                padding: .1rem 0;
            }
            .introduction-item-list-txt {
                color: #666666;
            }
            .introduction-item-list-num {
                width: 70%;
                color: #999999;
                word-wrap: break-word;
                word-break: normal;
                text-align: right;
            }
        }
    }
    p {
        width: 90%;
        font-size: .24rem;
        color: #999999;
        line-height: .3rem;
        margin: 0 auto;
        text-indent: .4rem;
    }
}

//买入/卖出按钮样式
.btn-group {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: .2rem;
    width: 100%;
    margin-top: .2rem;
    .btn-group-buy,
    .btn-group-sale {
        width: 44%;
        height: .6rem;
        background: #73D13D;
        border-radius: 4px;
        font-size: .27rem;
        color: #FFFFFF;
        text-align: center;
        line-height: .6rem;
        margin: 0 .1rem;
    }
    .btn-group-sale {
        background: #E32E33;
    }
}

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