UI搭建

src/routes/+page.svelte

@@ -2,7 +2,8 @@
     const routes = [
         { name: '名人名言', path: '/makequote' },
         { name: 'Latex', path: '/latex' },
-        { name: 'MarkDown', path: '/markdown' }
+        { name: 'MarkDown', path: '/markdown' },
+        { name: '提示', path: '/notice' }
     ]
 </script>
 

src/routes/notice/+page.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+let isMaskMode = false;
+let title = "这是一个标题";
+let content = "这是一个提示！给你显示东西！";
+
+onMount(async () => {
+  window['setContent'] = (newTitle: string, newContent: string) => {
+    title = newTitle;
+    content = newContent;
+  };
+
+  window['setMaskMode'] = (maskMode: boolean) => {
+    isMaskMode = maskMode;
+  };
+});
+
+
+</script>
+
+<div class="container"> 
+  <div id="main" class:mask-mode="{isMaskMode}">
+    <div class="notice-container">
+      <div class="notice-title">{title}</div>
+      <div class="notice-content">{content}</div>
+    </div>
+  </div>
+</div>
+<button id="maskButton" on:click="{() => isMaskMode = !isMaskMode}">
+  切换遮罩模式
+</button>
+
+<style>
+  .container {
+    background-color: #000000;
+    padding: 10px;
+  }
+
+  #main {
+    background-color: #000000;
+    width: fit-content;
+    padding: 5px;
+  }
+
+  .notice-container {
+    width: fit-content;
+    border: 1px solid #ddd;
+    background-color: white;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .notice-title {
+    font-size: 24px;
+    font-weight: bold;
+    padding: 10px;
+    color: white;
+    background-color: #66ccff;
+  }
+
+  .notice-content {
+    font-size: 16px;
+    padding: 10px;
+    color: #333;
+  }
+
+  .mask-mode {
+    background-color: black!important;
+    .notice-container {
+      box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
+    }
+    .notice-title {
+      background-color: #ffffff!important;
+    }
+    .notice-content {
+      color: white!important;
+    }
+  }
+
+  button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #333;
+    color: white;
+  }
+</style>