30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
import { defineComponent } from 'vue'
|
|
import useNotepadStore from './useNotepadStore'
|
|
|
|
export default defineComponent(() => {
|
|
const store = useNotepadStore()
|
|
|
|
return () => (
|
|
<div class="w-full h-full bg-[#fff] flex ">
|
|
<div class={"w-1/2 h-full flex items-center justify-center flex-col gap-y-1 relative"}>
|
|
<img class={'w-[52px] h-[52px]'} src={'/tab/icons/note_pad_icon.png'}></img>
|
|
<span>记事本</span>
|
|
<img src="/tab/icons/notepad/note_pad_line.png" class={"absolute w-[25px] right-2 top-1/2 -translate-y-1/2"} alt="" />
|
|
</div>
|
|
<div class="w-0 flex-1 h-full bg-[#fff] flex flex-col px-4 pb-0 pt-5 gap-y-2">
|
|
<div>
|
|
<span class={"text-[14px] text-[#333] pb-1 border-b-[1px] border-b-[#e5daca]"}>欢迎使用记事本</span>
|
|
|
|
</div>
|
|
{
|
|
store.state.list.filter((_, idx) => idx < 4).map(item => (
|
|
<div class={"w-full pb-[1px] border-b-[1px] border-b-[#e5daca]"}>
|
|
<div class={"w-[130px] text-[12px] text-[#656565] text-ellipsis overflow-hidden whitespace-nowrap"}>{item.title || '新建笔记'}</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|