update
parent
f49f521a2d
commit
426e764382
|
|
@ -0,0 +1 @@
|
||||||
|
body{line-height:1.5;font-size:14px;color:var(--color-dark-1)}a{color:inherit;text-decoration:none}.app{width:100%;height:100vh}.flex{display:flex}.flex.column{flex-direction:column}.flex.ac{justify-content:center}.flex.alc{align-items:center}.flex.acc{justify-content:center;align-items:center}.flex.asc{justify-content:space-between;align-items:center}.wrapper{width:1024px}.topbar{width:100%;height:64px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.1)}.topbar .logo{font-size:24px;color:var(--color-red-1)}.topbar .logo span{font-size:14px}.topbar .navs{font-size:16px}.topbar .navs .nav{margin-left:32px;cursor:pointer;transition:color .2s linear}.topbar .navs .nav.active,.topbar .navs .nav:hover{text-decoration:underline;color:var(--color-red-1)}.main{flex:1}.main .table-info{width:100%;height:64px}.footer{width:100%;height:64px;border-top:1px solid var(--color-plain-1)}
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
body {
|
||||||
|
line-height:1.5;
|
||||||
|
font-size:14px;
|
||||||
|
color:var(--color-dark-1);
|
||||||
|
}
|
||||||
|
a {color:inherit;text-decoration:none;}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
width:100%;
|
||||||
|
height:100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display:flex;
|
||||||
|
|
||||||
|
&.column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ac {
|
||||||
|
justify-content:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alc {
|
||||||
|
align-items:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.acc {
|
||||||
|
justify-content:center;
|
||||||
|
align-items:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.asc {
|
||||||
|
justify-content:space-between;
|
||||||
|
align-items:center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
width:1024px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
width:100%;
|
||||||
|
height:64px;
|
||||||
|
background:#fff;
|
||||||
|
box-shadow:0 6px 16px rgba(0, 0, 0, .1);
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size:24px;
|
||||||
|
color:var(--color-red-1);
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navs {
|
||||||
|
font-size:16px;
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
margin-left:32px;
|
||||||
|
cursor:pointer;
|
||||||
|
transition:color .2s linear;
|
||||||
|
|
||||||
|
&.active,&:hover {
|
||||||
|
text-decoration:underline;
|
||||||
|
color:var(--color-red-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex:1;
|
||||||
|
|
||||||
|
.table-info {
|
||||||
|
width:100%;
|
||||||
|
height:64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
width:100%;
|
||||||
|
height:64px;
|
||||||
|
border-top:1px solid var(--color-plain-1);
|
||||||
|
}
|
||||||
42
index.html
42
index.html
|
|
@ -11,6 +11,48 @@
|
||||||
<link rel="stylesheet" href="./css/index.css">
|
<link rel="stylesheet" href="./css/index.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div class="app flex column">
|
||||||
|
<header class="topbar flex ac noselect">
|
||||||
|
<div class="wrapper flex asc">
|
||||||
|
<a class="logo">五笔词库<span>86版</span></a>
|
||||||
|
|
||||||
|
<nav class="navs flex">
|
||||||
|
<a class="nav active">首页</a>
|
||||||
|
<a class="nav">简码表</a>
|
||||||
|
<a class="nav">打字练习</a>
|
||||||
|
<a class="nav">关于</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="main flex ac">
|
||||||
|
|
||||||
|
<div class="wrapper flex column">
|
||||||
|
<header class="table-info flex alc">
|
||||||
|
现在单字65535个, 词组16777216个!
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<wc-input placeholder="输入单字查询"></wc-input>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer flex ac">
|
||||||
|
<div class="wrapper flex asc">
|
||||||
|
<span>©2022, Yutent™.</span>
|
||||||
|
<span>Power By Anot.js, wcui</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import '//unpkg.yutent.top/@bytedo/wcui/dist/form/input.js'
|
||||||
|
import '//unpkg.yutent.top/@bytedo/wcui/dist/form/button.js'
|
||||||
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue