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>
  • 相关阅读:
    java 生成二维码
    Web Service测试工具小汇
    ADF控件ID变化引发JS无法定位控件的解决方法
    create database link
    Jdeveloper下Svn的使用
    TortoiseSVN菜单项功能说明
    JSFF或JSF页面加载时触发JavaScript之方法
    更改ORACLE归档路径及归档模式
    更改oracle归档模式路径
    将Oracle数据库设置为归档模式及非归档模式
  • 原文地址:https://www.cnblogs.com/luwei0915/p/13737597.html
Copyright © 2011-2022 走看看