zoukankan      html  css  js  c++  java
  • demo_38 关注页导航栏实现

    效果图

     页面布局

     全部样式

    <style lang="scss" scoped>
        .follow {
            // height: 100%;
            display: flex;
            flex-direction: column;
            flex: 1;
            box-sizing: border-box;

            .follow-tab {
                height: 30px;
                padding: 10px 20px;

                .follow-tab__box {
                    display: flex;
                     100%;
                    height: 100%;
                    border-radius: 5px;
                    border: 1px $mk-base-color solid;

                    .follow-tab__item {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #666;
                        font-size: 14px;
                         100%;

                        &:first-child {
                            border-right: 1px $mk-base-color solid;
                        }

                        &.active {
                            color: $mk-base-color;
                        }

                    }
                }
            }
            .follow-list {
                flex: 1;

                .follow-list__swiper {
                    height: 100%;

                    .swiper-item {
                        height: 100%;
                    }
                }
            }
        }

        .no-data {
            padding: 50px;
            font-size: 14px;
            color: #999;
            text-align: center;
        }
    </style>
  • 相关阅读:
    对vue中nextTick()的理解及使用场景说明
    微信小程序的视图与渲染
    1分钟了解微信小程
    Idea搭建Spring+SpringMvc+Mybatis框架集成项目
    idea 新建不了servlet文件 方法(1)
    idea使用大全(加载mysql驱动)
    开发文档规范
    如何架构一个框架
    mac os x
    mongodb rockmongo
  • 原文地址:https://www.cnblogs.com/luwei0915/p/13737597.html
Copyright © 2011-2022 走看看