master
parent
426e764382
commit
126e647bf9
|
|
@ -1 +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)}
|
body{line-height:1.5;font-size:14px;color:var(--color-dark-1)}a{color:inherit;text-decoration:none}wc-switch{cursor:pointer}.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 12px rgba(0,0,0,.05)}.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}.main .search{width:100%}.main .search .field{margin-top:16px}.main .search .field wc-input{flex:1}.footer{width:100%;height:64px;border-top:1px solid var(--color-plain-2)}@media screen and (max-width: 1024px){.topbar,.main{padding:0 16px}.footer .wrapper{flex-direction:column;align-items:center;justify-content:center}}
|
||||||
|
|
@ -3,7 +3,13 @@ body {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--color-dark-1);
|
color: var(--color-dark-1);
|
||||||
}
|
}
|
||||||
a {color:inherit;text-decoration:none;}
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
wc-switch {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.app {
|
.app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -44,7 +50,7 @@ a {color:inherit;text-decoration:none;}
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow:0 6px 16px rgba(0, 0, 0, .1);
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|
@ -61,9 +67,10 @@ a {color:inherit;text-decoration:none;}
|
||||||
.nav {
|
.nav {
|
||||||
margin-left: 32px;
|
margin-left: 32px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition:color .2s linear;
|
transition: color 0.2s linear;
|
||||||
|
|
||||||
&.active,&:hover {
|
&.active,
|
||||||
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
color: var(--color-red-1);
|
color: var(--color-red-1);
|
||||||
}
|
}
|
||||||
|
|
@ -78,10 +85,37 @@ a {color:inherit;text-decoration:none;}
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.field {
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
wc-input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
border-top:1px solid var(--color-plain-1);
|
border-top: 1px solid var(--color-plain-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.topbar,
|
||||||
|
.main {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
.wrapper {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
32
index.html
32
index.html
|
|
@ -12,7 +12,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="app flex column">
|
<div class="app flex column" anot="app">
|
||||||
<header class="topbar flex ac noselect">
|
<header class="topbar flex ac noselect">
|
||||||
<div class="wrapper flex asc">
|
<div class="wrapper flex asc">
|
||||||
<a class="logo">五笔词库<span>86版</span></a>
|
<a class="logo">五笔词库<span>86版</span></a>
|
||||||
|
|
@ -30,10 +30,31 @@
|
||||||
|
|
||||||
<div class="wrapper flex column">
|
<div class="wrapper flex column">
|
||||||
<header class="table-info flex alc">
|
<header class="table-info flex alc">
|
||||||
现在单字65535个, 词组16777216个!
|
现在单字{{single}}个, 词组{{words}}个!
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<wc-input placeholder="输入单字查询"></wc-input>
|
<div class="search">
|
||||||
|
<section class="field flex alc">
|
||||||
|
<wc-input placeholder="输入汉字查询编码"></wc-input>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="field flex alc">
|
||||||
|
<wc-radio-group value="86">
|
||||||
|
<wc-radio value="86">86版</wc-radio>
|
||||||
|
<wc-radio value="18030" type="danger">18030版(86修正版)</wc-radio>
|
||||||
|
</wc-radio-group>
|
||||||
|
|
||||||
|
<wc-switch>是否开启反查</wc-switch>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -49,10 +70,7 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module" src="./js/index.js"></script>
|
||||||
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>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @author yutent<yutent.io@gmail.com>
|
||||||
|
* @date 2022/03/11 12:03:59
|
||||||
|
*/
|
||||||
|
|
||||||
|
import '//unpkg.yutent.top/anot/dist/anot.js'
|
||||||
|
import '//unpkg.yutent.top/@bytedo/wcui/dist/form/input.js'
|
||||||
|
import '//unpkg.yutent.top/@bytedo/wcui/dist/form/button.js'
|
||||||
|
import '//unpkg.yutent.top/@bytedo/wcui/dist/form/radio.js'
|
||||||
|
import '//unpkg.yutent.top/@bytedo/wcui/dist/form/switch.js'
|
||||||
|
import fetch from '//unpkg.yutent.top/@bytedo/fetch/dist/index.js'
|
||||||
|
|
||||||
|
const WB_TABLE = {}
|
||||||
|
|
||||||
|
Anot.hideProperty(WB_TABLE, 'length', 0)
|
||||||
|
|
||||||
|
Anot({
|
||||||
|
$id: 'app',
|
||||||
|
state: {
|
||||||
|
single: 222,
|
||||||
|
words: 0
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
fetch('/data/table.txt')
|
||||||
|
.then(r => r.text())
|
||||||
|
.then(r => {
|
||||||
|
// console.log(r)
|
||||||
|
r.split('\n').forEach(it => {
|
||||||
|
it = it
|
||||||
|
.trim()
|
||||||
|
.split(' ')
|
||||||
|
.map(_ => _.trim())
|
||||||
|
|
||||||
|
let k = it.shift()
|
||||||
|
|
||||||
|
if (k) {
|
||||||
|
WB_TABLE[k] = it
|
||||||
|
WB_TABLE.length++
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.single = WB_TABLE.length
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue