MTP20_WEB_GLOBAL/src/packages/mobile/views/home/main/index.less

@import '../../../assets/themes/base/mixin.less';

.home-main {
    &__header {
        background: linear-gradient(var(--navbar-background), var(--navbar-background) 60%, transparent 60%);
        padding: .2rem;
    }

    &__iconbar {
        ul {
            display: flex;
            flex-wrap: wrap;
            padding-top: .24rem;

            &:last-child {
                padding-bottom: .24rem;
            }

            li {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: calc(~'100% / 4');
                text-align: center;

                .g-icon {
                    width: .72rem;
                    height: .72rem;
                    font-size: .44rem;
                    color: #fff;
                    border-radius: 50%;
                    margin-bottom: .08rem;

                    &-listing--line {
                        &.m50101 {
                            background-color: #96b7d1;
                        }

                        &.m50102 {
                            background-color: #2b455b;
                        }

                        &.m50103 {
                            background-color: #72a2c9;
                        }

                        &.m50104 {
                            background-color: #42739b;
                        }
                    }

                    &-auction--line {
                        background-color: #72c990;
                    }

                    &-spot--line {
                        background-color: #9d6969;
                    }

                    &-pricing--line {
                        background-color: #8272c9;
                    }

                    &-swap--line {
                        background-color: #ebc413;
                    }

                    &-quote--line {
                        background-color: #df4343;
                    }
                }
            }
        }
    }

    &__titlebar {
        .van-cell__title {
            font-size: .32rem;
            font-weight: bold;
        }

        .van-cell__value {
            flex: none;
            color: #666;
        }
    }

    &__market {
        .scrollbar {
            width: 100%;
            padding: .2rem;
        }

        .van-swipe {
            height: 32px;
            background-color: #f6f6f6;

            ul {
                display: flex;
                justify-content: space-around;
                align-items: center;
                height: inherit;
                font-size: .26rem;
            }
        }
    }

    &__news {
        .article {
            &-item {
                .van-cell__title {
                    span {
                        .mixin-text-overflow()
                    }
                }

                .van-cell__value {
                    flex: initial;
                    font-size: .24rem;
                    margin-left: .48rem;
                }
            }
        }
    }
}