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

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

    &__iconbar {
        ul {
            display: flex;
            flex-wrap: wrap;
            padding-top: 12px;

            &:last-child {
                padding-bottom: 12px;
            }

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

                .app-iconfont {
                    &__icon {
                        font-size: 40px;
                    }

                    &__label {
                        font-size: 12px;
                        margin-top: 5px;
                    }
                }
            }
        }
    }

    &__titlebar {
        .van-cell__title {
            font-size: 16px;
            font-weight: bold;
        }

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

    &__market {
        .scrollbar {
            width: 100%;
            padding: 10px;
        }

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

            ul {
                display: flex;
                justify-content: space-around;
                align-items: center;
                height: inherit;
                font-size: 13px;
            }
        }
    }

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

                .van-cell__value {
                    flex: initial;
                    font-size: 12px;
                    margin-left: 24px;
                }
            }
        }
    }

    &__chart {
        ul {
            display: flex;
            text-align: center;
            color: #777;
            line-height: 22px;

            li {
                flex: 1;
                padding: 6px 0;

                &.is-active {
                    &::before {
                        background-color: transparent
                    }

                    &.g-price-up {
                        background-color: #fff3f3;
                    }

                    &.g-price-down {
                        background-color: #eefff2;
                    }
                }

                span {
                    font-size: 12px;

                    +span {
                        margin-left: 5px;
                    }
                }
            }
        }
    }
}