onecomme-templates/sakanana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

new layout

Browse Source
This commit is contained in:
0nepeop1e
2025-06-14 01:57:20 +08:00
parent 7a21ba69d5
commit 9bab2e5d14
12 changed files with 82 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/App.svelte
View File

@@ -1,7 +1,17 @@
<script lang="ts">
import type { Comment } from '@onecomme.com/onesdk/types/Comment';
import { SendHorizontalIcon } from '@lucide/svelte';
import {
BatteryFullIcon,
ChevronLeftIcon,
HomeIcon,
SendHorizontalIcon,
Tally4Icon,
TriangleIcon,
WifiIcon
} from '@lucide/svelte';
import RenderComment from '@/components/RenderComment.svelte';
import axolotl from '@/assets/axolotl.png';
let { chats }: { chats: Comment[] } = $props();
let date = $state(new Date());
@@ -26,26 +36,52 @@
});
</script>
<div class="bg-frame px-30 pt-30 pb-15 rounded-30 h-full w-full flex flex-col gap-15 font-naikai">
<div class="grow flex flex-col rounded-15 overflow-hidden bg-background">
<div class="bg-status flex flex-row justify-center p-5 text-16 font-bold text-status-text">
<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
</div>
<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">
{#each render_chats as chat (chat.id ?? chat)}
<RenderComment {chat} />
{/each}
</div>
<div class="px-30 py-15">
<div class="w-460 h-800 relative">
<div
class="absolute -z-10 -right-6 top-150 w-15 rounded-5 bg-frame border-3 border-frame-border h-120"
></div>
<div
class="absolute -z-10 -right-6 top-290 w-15 rounded-5 bg-frame border-3 border-frame-border h-75"
></div>
<div
class="absolute -z-10 bg-black w-200 h-5 rounded-full origin-right -right-10 bottom-215 rotate-82"
></div>
<div
class="absolute -z-10 bg-black w-200 h-5 rounded-full origin-right -right-5 bottom-215 rotate-70"
></div>
<div
class="bg-frame p-15 rounded-25 z-10 border-frame-border border-5 w-full h-full flex flex-col gap-5 font-naikai"
>
<div
class="w-full h-full flex flex-col border-3 border-screen-border rounded-10 overflow-hidden bg-background relative"
>
<div
class="rounded-full text-20 text-input-text bg-input px-20 py-10 flex flex-row items-center justify-between gap-10"
class="bg-status/80 gap-4 shadow-md backdrop-blur-md flex flex-row py-2 px-18 text-16 font-bold text-status-text absolute top-0 -left-10 -right-10"
>
<span>回覆...</span>
<SendHorizontalIcon class="size-20 text-input-icon" />
<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
<WifiIcon class="h-full w-auto ml-auto" />
<BatteryFullIcon class="h-full w-auto" />
<span>100%</span>
</div>
<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">
{#each render_chats as chat (chat)}
<RenderComment {chat} />
{/each}
</div>
<div class="px-30 py-15">
<div
class="rounded-full text-20 text-input-text bg-input px-20 py-10 flex flex-row items-center justify-between gap-10"
>
<span>回覆...</span>
<SendHorizontalIcon class="size-20 text-input-icon" />
</div>
</div>
<div class="h-48 flex flex-row items-center justify-center text-navigation gap-80">
<Tally4Icon class="size-24"/>
<HomeIcon class="size-24"/>
<TriangleIcon class="size-24 origin-center -rotate-90" />
</div>
</div>
</div>
<div class="flex flex-row justify-center">
<div class="size-50 rounded-full bg-background"></div>
</div>
<img src={axolotl} alt="axolotl" class="z-20 w-340 h-332 absolute -right-192 -bottom-76" />
</div>