index.html

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ninja-ui</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-size: 16px;
            padding: 200px;
        }
        
    </style>
    <style>
    </style>
</head>

<body>
    <div id="app">


        <n-layout>
            <n-header height="100"><div >wowoowowo</div></n-header>
            <n-layout>
                    <n-content><div>wrwrrwr</div></n-content>
                    <n-sider style="height:100px; width:200px;">sider</n-sider>
            </n-layout>
            <n-footer>srsfsf</n-footer>
        </n-layout>


        <n-button @click="showToastTop">top</n-button>
        <n-button @click="showToastMiddle">middle</n-button>
        <n-button @click="showToastBottom">bottom</n-button>

        
        <n-collapse :selected.sync="selectedTab">
            <n-collapse-item title="体育111" name="1">内容111</n-collapse-item>
            <n-collapse-item title="体育222" name="2">内容222</n-collapse-item>
            <n-collapse-item title="体育333" name="3">内容333</n-collapse-item>
        </n-collapse>

        <n-tabs selected="woman">
            <n-tabs-head>
              <n-tabs-item name="woman">
                <n-icon name="settings"></n-icon>美女
              </n-tabs-item>
              <n-tabs-item name="sport" disabled>运动</n-tabs-item>
              <n-tabs-item name="man">男人</n-tabs-item>
            </n-tabs-head>
              <n-tabs-body>
                <n-tabs-pane name="woman">女人</n-tabs-pane>
                <n-tabs-pane name="sport">运动</n-tabs-pane>
                <n-tabs-pane name="man">男人</n-tabs-pane>
              </n-tabs-body>
          </n-tabs>


    </div>


    <script src="./src/app.js"></script>
</body>

</html>