zoukankan      html  css  js  c++  java
  • 手机APP上中下三层

    代码如下:

    <template>
        <div class="container" id="app">
            <header>
                <mu-appbar style=" 100%;" color="primary">
                    <mu-button icon slot="left">
                        <mu-icon value="menu"></mu-icon>
                    </mu-button>
                    Title
                    <mu-menu slot="right">
                        <mu-button flat>MENU</mu-button>
                        <mu-list slot="content">
                            <mu-list-item button>
                                <mu-list-item-content>
                                    <mu-list-item-title>Menu Item 1</mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                            <mu-list-item button>
                                <mu-list-item-content>
                                    <mu-list-item-title>Menu Item 2</mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                        </mu-list>
                    </mu-menu>
                </mu-appbar>
            </header>
            <main>
                <p>主体</p>
                <p>主体11</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p>
                <p>主体</p></main>
            <footer>
                <mu-bottom-nav>
                    <mu-bottom-nav-item title="Recents" icon="restore"></mu-bottom-nav-item>
                    <mu-bottom-nav-item title="Favorites" icon="favorite"></mu-bottom-nav-item>
                    <mu-bottom-nav-item title="Nearby" icon="location_on"></mu-bottom-nav-item>
                </mu-bottom-nav>
            </footer>
        </div>
    </template>
    
    <style lang="less">
    
        .container {
            display: flex;
            height: 100vh;
            margin: 0;
            padding: 0;
            flex-direction: column;
        }
    
        header .header {
            height: 100px;
        }
    
        header, footer {
            height: 70px;
        }
    
        main {
            flex-grow: 1;
            overflow: auto;
        }
    </style>
    <script>
        export default {
            name: 'lgoin',
        }
    </script>

    效果图如下:

  • 相关阅读:
    jmeter(46) redis
    jmeter(45) tcp/ip协议
    Codeforces Round #538 (Div. 2)D(区间DP,思维)
    Codeforces Global Round 1D(DP,思维)
    Educational Codeforces Round 57D(DP,思维)
    UPC11073(DP,思维)
    Yahoo Progamming Contest 2019D(DP,思维)
    Atcoder Beginner Contest 118D(DP,完全背包,贪心)
    Xuzhou Winter Camp 1C(模拟)
    Educational Codeforces Round 57 (Rated for Div. 2)D(动态规划)
  • 原文地址:https://www.cnblogs.com/armyant/p/10625004.html
Copyright © 2011-2022 走看看