krgsay

src/routes/krgsay/+page.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import krgsay from "$lib/assets/krgsay.png";
+
+    let content = '嗨小朋友们大家好！你们认识我是谁吗？';
+
+    onMount(async () => {
+        (window as any)['setContent'] = (_content: string) => {
+            content = _content;
+        };
+    });
+</script>
+
+<div id="main" style={`background-image: url(${krgsay}); width: 800px; height: 800px; margin: 20px;`}>
+    <div class="inner">{ content }</div>
+</div>
+
+<style>
+@font-face {
+    font-family: "QuanPixel 8px";
+    src: url("$lib/assets/quan.ttf");
+}
+
+#main {
+    font-family: "QuanPixel 8px";
+    font-size: 32px;
+    color: #658ca6;
+    position: relative;
+    line-height: 40px;
+}
+
+#main>.inner {
+    position: absolute;
+    left: 32px;
+    top: 108px;
+    width: 568px;
+    height: 380px;
+    padding: 0 32px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+</style>