guihuasay

src/routes/guihuasay/+page.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import guihuasay from '$lib/assets/guihuasay.jpg'
+
+    let content = '嗨小朋友们大家好！\n你们认识我是谁吗？';
+
+    onMount(async () => {
+        (window as any)['setContent'] = (_content: string) => {
+            content = _content;
+        };
+    });
+</script>
+
+<div id="main" style={`background-image: url(${guihuasay}); background-size: contain; width: 1080px; height: 1080px; margin: 20px;`}>
+    <div class="inner">{ content }</div>
+</div>
+
+<style>
+@font-face {
+    font-family: "QuanPixel 8px";
+    src: url("$lib/assets/quan.ttf");
+}
+
+#main {
+    font-family: "Noto Sans CJK SC";
+    font-size: 64px;
+    font-weight: bold;
+    color: black;
+    position: relative;
+}
+
+#main>.inner {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1080px;
+    height: 450px;
+    /* background-color: #ff000022; */
+    padding: 0 32px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    white-space: pre-wrap;
+}
+</style>