提交

src/assets/css/pages/login.css

@@ -13,11 +13,38 @@
     line-height: 1.5em;
     padding: 1.5em;
     margin: 0 auto;
-    width: 40em;
+    width: 25em;
     left: 50%;
     top: 50%;
 }
 
 .loginbg .loginhead {
     text-align: center;
+    margin: 1em 0;
+}
+
+.loginbg .submit {
+    display: block;
+    font-weight: 400;
+    white-space: nowrap;
+    text-align: center;
+    background-image: none;
+    cursor: pointer;
+    transition: all .3s cubic-bezier(.645,.045,.355,1);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    touch-action: manipulation;
+    height: 42px;
+    line-height: 42px;
+    padding: 0 15px;
+    font-size: 16px;
+    border-radius: 3px;
+    border: 1px solid #0052d9;
+    background: #0052d9;
+    width: 100%;
+    color: #fff;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
+    box-shadow: 0 2px 0 rgba(0,0,0,.045);
 }

src/assets/css/pages/main.css

@@ -0,0 +1,13 @@
+.main {
+    padding: 1em;
+    font-size: 14px;
+}
+
+.main .title {
+    background-color: #fff;
+    height: 2.5em;
+    line-height: 2.5em;
+    padding-left: .5em;
+}
+
+

src/assets/css/pages/skeleton.css

@@ -0,0 +1,69 @@
+.skeleton {
+    font-size: 14px;
+    height: calc(100% - 64px);
+}
+
+.skeleton .header {
+  background: #262f3e !important;
+  background: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#262f3e),
+    to(#536976)
+  ) !important;
+  background: linear-gradient(90deg, #262f3e, #536976) !important;
+  height: 64px;
+  line-height: 64px;
+  padding-left: 2em;
+  color: #fff;
+  font-size: 16px;
+}
+
+.skeleton .skeleton_left,
+.skeleton .skeleton_right {
+    display: inline-block;
+    width: 208px;
+    height: 100%;
+    vertical-align: top;
+}
+
+.skeleton .skeleton_right {
+    width: calc(100% - 208px);
+}
+
+.skeleton .skeleton_left {
+    background-color: #fff;
+    padding-top: 2px;
+}
+
+.skeleton .menu_item {
+    padding: 4px 16px 4px 32px;
+    line-height: 40px;
+    cursor: pointer;
+    position: relative;
+}
+
+.skeleton .menu_act {
+    padding: 4px 16px 4px 32px;
+    line-height: 40px;
+    color: #0052d9;
+    background-color: #0052d910;
+}
+
+.skeleton .menu_item::after {
+    content: ' ';
+    background-color: #0052d9;
+    width: 3px;
+    display: block;
+    height: 0;
+    transition: height 1s;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.skeleton .menu_act::after {
+    height: 100%;
+}

src/components/css/Lindu_base.css

@@ -1 +1,4 @@
-@import url(../css/Lindu_base.css);
+
+* {
+    border: none;
+}

src/components/input/index.css

@@ -1 +1,24 @@
+@import url(../css/Lindu_base.css);
+.Lingdu_input {
+    border: 1px solid #d9d9d9;
+    border-radius: 3px;
+    position: relative;
+    font-size: 0;
+    line-height: 0;
+    overflow: hidden;
+}
 
+.Lingdu_input input {
+    width: 100%;
+    padding: .5em .5em .5em 2em;
+    font-size: 16px;
+    line-height: 1.5em;
+}
+
+.Lingdu_input .Label_text,
+.Lingdu_input .Label_icon {
+    position: absolute;
+    top: 50%;
+    left: 7px;
+    transform: translateY(-50%);
+}

src/components/input/index.jsx

@@ -2,12 +2,48 @@
 import "./index.css";
 function Lingdu_input(prop) {
 
+    function valueChange(e) {
+        prop.onchang && prop.onchang(e.target.value);
+    }
+
     return (
         <div class="Lingdu_input">
             <div className="Label_text">
-                {prop.Lingdu_label || ''}
+                {prop.label || ''}
             </div>
-            <input type={prop.type || 'text'} />
+            <Show when={prop.iconType === 'user'}>
+                <svg
+                    class="Label_icon"
+                    viewBox="0 0 1024 1024"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                >
+                    <path d="M632 344m-120 0a120 120 0 1 0 240 0 120 120 0 1 0-240 0Z" fill="#A9D8FF" p-id="4206" ></path>
+                    <path d="M809 800H503c-48.1 0-87-39-87-87 0-111 90-201 201-201h78c111 0 201 90 201 201 0 48-39 87-87 87z" fill="#A9D8FF" ></path>
+                    <path d="M440 296m-168 0a168 168 0 1 0 336 0 168 168 0 1 0-336 0Z" fill="#298DF7" p-id="4208" ></path>
+                    <path d="M638.2 896H241.8C179 896 128 845 128 782.2 128 633 249 512 398.2 512h83.6C631 512 752 633 752 782.2 752 845 701 896 638.2 896z" fill="#298DF7" ></path>
+                </svg>
+            </Show>
+            <Show when={prop.iconType === 'psw'}>
+                <svg
+                    class="Label_icon"
+                    viewBox="0 0 1024 1024"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                >
+                    <path d="M842.666667 384h-74.666667V277.333333a234.666667 234.666667 0 1 0-469.333333 0v106.666667H224a53.393333 53.393333 0 0 0-53.333333 53.333333v490.666667a53.393333 53.393333 0 0 0 53.333333 53.333333h618.666667a53.393333 53.393333 0 0 0 53.333333-53.333333V437.333333a53.393333 53.393333 0 0 0-53.333333-53.333333z m-288 295.006667V789.333333a21.333333 21.333333 0 0 1-42.666667 0v-110.326666a64 64 0 1 1 42.666667 0zM725.333333 384H341.333333V277.333333c0-105.866667 86.133333-192 192-192s192 86.133333 192 192z" fill="#298df7" p-id="5471"></path>
+                </svg>
+            </Show>
+            <input
+                oninput={valueChange}
+                value={prop.value || ''}
+                placeholder={prop.placeholder || '请输入'}
+                type={prop.type || 'text'}
+            />
         </div>
     );
 }

src/components/table/index.jsx

@@ -0,0 +1,14 @@
+import "./index.css";
+import { For, createSignal } from "solid-js";
+
+function Table(prop) {
+    
+    return (
+        <div class="Lingdu_table">
+            <div className="Lingdu_table_head"></div>
+            <div className="Lingdu_table_body"></div>
+        </div>
+    );
+}
+
+export default Table;

src/pages/login.jsx

@@ -3,6 +3,21 @@ import Input from "../components/input/index";
 import "../assets/css/pages/login.css";
 
 function Login() {
+    const user = {
+        name: '',
+        psw: ''
+    }
+    
+    function inputchangeName(e) {
+        user.name = e;
+    }
+    function inputchangePsw(e) {
+        user.psw = e;
+    }
+
+    function submit() {
+        // 验证提交
+    }
 
     return (
         <div class="loginbg">
@@ -11,8 +26,22 @@ function Login() {
                     账号密码登录
                 </div>
                 <Input
-                    Lingdu_label="账号："
+                    placeholder="用户名"
+                    iconType="user"
+                    onchang={inputchangeName}
+                />
+                <br />
+                <Input
+                    placeholder="密码"
+                    iconType="psw"
+                    onchang={inputchangePsw}
                 />
+                <br />
+                <br />
+                <br />
+                <button onclick={submit} class="submit">提交</button>
+                <br />
+                <br />
             </div>
         </div>
     );

src/pages/main.jsx

@@ -0,0 +1,32 @@
+import { createSignal } from "solid-js";
+import "../assets/css/pages/main.css";
+
+import Skeleton from "./skeleton/skeleton";
+import Table from "../components/table";
+
+function Main() {
+    const [pagename, setPagename] = createSignal('');
+
+    function getPagename(page_name) {
+        setPagename(page_name);
+    }
+
+    return (
+        <Skeleton getPagename={getPagename}>
+            <div class="main">
+                <h2 className="title">{pagename()}</h2>
+
+                <Table 
+                    list={[
+                        {
+                            title: '盛世中华 何以中国丨陕西考古博物馆：用考古讲好中国故事 让文物“活”起来',
+                            activity_name: '盛世中华 何以中国'
+                        }
+                    ]}
+                />
+            </div>
+        </Skeleton>
+    );
+}
+
+export default Main;

src/pages/skeleton/menu.jsx

@@ -0,0 +1,11 @@
+function menu(params) {
+
+    function clickName() {
+        params.getClick && params.getClick(params.menu.index);
+    }
+    return <div onclick={clickName} class={'menu_item' + (params.act ? ' menu_act' : '')}>
+        {params.menu.text}
+    </div>
+}
+
+export default menu;

src/pages/skeleton/skeleton.jsx

@@ -0,0 +1,52 @@
+import "../../assets/css/pages/skeleton.css";
+import { For, createSignal } from "solid-js";
+
+
+import Menu from "./menu";
+
+function Skeleton(prop) {
+    const [act_menu, set_act_menu] = createSignal(0);
+    const menus = [
+        {
+            text: '文案管理',
+            path: '/'
+        },
+        {
+            text: '媒体管理',
+            path: '/'
+        },
+        {
+            text: '日程安排',
+            path: '/'
+        },
+        {
+            text: '直播管理',
+            path: '/'
+        },
+        {
+            text: '活动管理',
+            path: '/'
+        }
+    ]
+    prop.getPagename && prop.getPagename(menus[act_menu()].text)
+    function change_menu(index) {
+        // 切换菜单
+        set_act_menu(index);
+        prop.getPagename && prop.getPagename(menus[index].text)
+    }
+
+    return (
+        <div class="skeleton">
+            <header class="header" >盛世中华</header>
+            <div className="skeleton_left">
+                {/* 菜单 */}
+                <For each={menus}>{(item, index) =>
+                    <Menu getClick={change_menu} menu={{...item, index: index()}} act={act_menu() === index()} />
+                }</For>
+            </div>
+            <div className="skeleton_right">{prop.children}</div>
+        </div>
+    );
+}
+
+export default Skeleton;

src/router/index.jsx

@@ -3,5 +3,14 @@ export default [
     {
         path: "/",
         component: lazy(() => import("../pages/login"))
+    },
+    {
+        path: "/main",
+        children: [
+            {
+                path: '/',
+                component: lazy(() => import("../pages/main")),
+            }
+        ]
     }
 ]