1

src/pages/index.jsx

@@ -0,0 +1,22 @@
+import css from './index.module.scss'
+import {Outlet} from 'react-router-dom'
+import headerPng from './header.png'
+export default function Index(){
+
+    return <>
+        <div className={css.home}>
+            <header>
+                <nav>
+                    <div><img src={headerPng} alt=""/></div>
+                    <div>
+                        <div>关于我们</div>
+                        <div>新闻</div>
+                        <div>视频</div>
+                        <div>首页</div>
+                    </div>
+                </nav>
+            </header>
+            <Outlet/>
+        </div>
+    </>
+}

src/pages/index.module.scss

@@ -0,0 +1,37 @@
+.home{
+    & > header{
+        position: relative;
+        width: 100%;
+        height: 82px;
+        min-width: 1000px;
+        & > nav{
+            position: relative;
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            & > div:first-child{
+                position: relative;
+                flex-shrink: 0;
+                & > img{
+                    height: 80px;
+                }
+            }
+            & > div:last-child{
+                position: relative;
+                flex: 1;
+                display: flex;
+                flex-direction: row-reverse;
+                line-height: 80px;
+                font-size: 1.2em;
+                & > div{
+                    position: relative;
+                    margin: 0 20px;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+    & > div{
+        position: relative;
+    }
+}