提交

package.json

@@ -15,6 +15,7 @@
     "vite-plugin-solid": "^2.7.0"
   },
   "dependencies": {
+    "@solidjs/router": "^0.8.3",
     "solid-js": "^1.7.6"
   }
 }

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@solidjs/router':
+    specifier: ^0.8.3
+    version: 0.8.3(solid-js@1.7.6)
   solid-js:
     specifier: ^1.7.6
     version: 1.7.6
@@ -777,6 +780,14 @@ packages:
       solid-js: 1.7.6
     dev: true
 
+  /@solidjs/router@0.8.3(solid-js@1.7.6):
+    resolution: {integrity: sha512-oJuqQo10rVTiQYhe1qXIG1NyZIZ2YOwHnlLc8Xx+g/iJhFCJo1saLOIrD/Dkh2fpIaIny5ZMkz1cYYqoTYGJbg==}
+    peerDependencies:
+      solid-js: ^1.5.3
+    dependencies:
+      solid-js: 1.7.6
+    dev: false
+
   /@types/babel__core@7.20.1:
     resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
     dependencies:

src/App.jsx

@@ -1,13 +0,0 @@
-import styles from './App.module.css';
-
-function App() {
-  return (
-    <div class={styles.App}>
-      <header class={styles.header}>
-        
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.module.css

@@ -1,33 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.logo {
-  animation: logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.link {
-  color: #b318f0;
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/assets/css/base.css

@@ -0,0 +1,8 @@
+/* 文字库 */
+@font-face {
+  font-family: 'puhui95';
+  src: url('https://cxzx.smcic.net/topic/tool/font/alipuhui2.0.95.woff')
+      format('woff'),
+    url('https://cxzx.smcic.net/topic/tool/font/alipuhui2.0.95.woff2')
+      format('woff2');
+}

src/assets/css/index.css

@@ -0,0 +1,19 @@
+@import url(./base.css);
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: none;
+  box-sizing: border-box;
+}
+
+html,
+body,  
+#root {
+  width: 100%; 
+  height: 100%;
+  color: #000000;
+  font-weight: 400;
+  font-family: puhui95;
+  background-color: #f0f2f5;
+}

src/assets/css/pages/login.css

@@ -0,0 +1,23 @@
+.loginbg{
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.loginbg .main {
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    border-color: #f0f0f0;
+    border-radius: 8px;
+    position: absolute;
+    line-height: 1.5em;
+    padding: 1.5em;
+    margin: 0 auto;
+    width: 40em;
+    left: 50%;
+    top: 50%;
+}
+
+.loginbg .loginhead {
+    text-align: center;
+}

src/components/css/Lindu_base.css

@@ -0,0 +1 @@
+@import url(../css/Lindu_base.css);

src/components/input/index.css

@@ -0,0 +1 @@
+

src/components/input/index.jsx

@@ -0,0 +1,15 @@
+
+import "./index.css";
+function Lingdu_input(prop) {
+
+    return (
+        <div class="Lingdu_input">
+            <div className="Label_text">
+                {prop.Lingdu_label || ''}
+            </div>
+            <input type={prop.type || 'text'} />
+        </div>
+    );
+}
+
+export default Lingdu_input;

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.jsx

@@ -1,15 +1,21 @@
 /* @refresh reload */
 import { render } from 'solid-js/web';
+import { Router, useRoutes, hashIntegration } from "@solidjs/router";
 
-import './index.css';
-import App from './App';
+import routes from "./router/index"
+import './assets/css/index.css';
 
 const root = document.getElementById('root');
 
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
-  throw new Error(
-    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
-  );
+    throw new Error(
+        'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
+    );
 }
 
-render(() => <App />, root);
+render(() => {
+    const Routes = useRoutes(routes);
+    return <Router source={hashIntegration()}>
+        <Routes />
+    </Router>
+}, root);

src/pages/login.jsx

@@ -0,0 +1,21 @@
+import Input from "../components/input/index";
+
+import "../assets/css/pages/login.css";
+
+function Login() {
+
+    return (
+        <div class="loginbg">
+            <div class="main">
+                <div className="loginhead">
+                    账号密码登录
+                </div>
+                <Input
+                    Lingdu_label="账号："
+                />
+            </div>
+        </div>
+    );
+}
+
+export default Login;

src/router/index.jsx

@@ -0,0 +1,7 @@
+import { lazy } from "solid-js";
+export default [
+    {
+        path: "/",
+        component: lazy(() => import("../pages/login"))
+    }
+]