diff --git a/.gitignore b/.gitignore
index 66240cd69c7055bdeaebf559817543d0a06c9e8e..4ec50d02b06907303d260454a22a387fec48f5ce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 package-lock.json
+pnpm-lock.yaml
 
 node_modules
 .DS_Store
diff --git a/README.md b/README.md
index 2cb2a8034c0d032a113efc6e0e720dfbf78704fd..e81e597c006bec3d5847b722640aed08dd79b318 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Vue.js 是基于 JavaScript 构建用户界面的库。该模板使用 Vite 来
 
 ## 自定义配置
 
-请参阅 [[Vite配置参考](https://vitejs.dev/config/).
+请参阅 [[Vite配置参考]](https://vitejs.dev/config/).
 
 ## 项目设置
 
diff --git a/package.json b/package.json
index 25368384672dbb0eae75495bcf88ef001c2815db..1c0148bfa138ffa80c28216e2d57481b43a2f555 100644
--- a/package.json
+++ b/package.json
@@ -7,11 +7,13 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "@unocss/reset": "^0.54.0",
     "guess": "^1.0.2",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "unocss": "^0.54.0",
     "vite": "^4.3.9"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 748897991e64c95ae91aa9536853f5588a821263..dc15928ac08711e501a6a1548373ba1581978fa5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -76,20 +76,20 @@ async function playChess(item, row, col) {
 </script>
 
 <template>
-  <div class="content flex-start">
-    <p class="flex-between mr-6px">
-      <label for="size" class="space-nowrap">棋盘大小：</label>
+  <div p-6px box-border flex justify-start>
+    <p mr-6px flex justify-between>
+      <label for="size" whitespace-nowrap>棋盘大小：</label>
       <input v-model="size" id="size" type="number">
     </p>
-    <p class="flex-between mr-6px">
-      <label for="win_size" class="space-nowrap">胜利棋数：</label>
+    <p mr-6px flex justify-between>
+      <label for="win_size" whitespace-nowrap>胜利棋数：</label>
       <input v-model="win_size" id="win_size" type="number" min="3" max="8">
     </p>
-    <button @click="confirm" class="space-nowrap mr-6px px-6px">重新开始</button>
-    <button @click="back" class="space-nowrap px-6px">返回上一步</button>
+    <button @click="confirm" whitespace-nowrap mr-6px px-6px>重新开始</button>
+    <button @click="back" whitespace-nowrap px-6px>返回上一步</button>
   </div>
-  <div class="content border-top content-lattice">
-    <p class="row" v-for="(lattice, r_i) in lattices" :key="r_i">
+  <div p-6px box-border flex flex-col items-center border="t t-solid #999">
+    <p flex flex-row v-for="(lattice, r_i) in lattices" :key="r_i">
     <p class="col" :class="records_obj[`${r_i}_${c_i}`]" v-for="(item, c_i) in lattice" :key="`${r_i}-${c_i}`"
       @click="playChess(item, r_i, c_i)">
     </p>
diff --git a/src/assets/main.css b/src/assets/main.css
index 3db74811ae6c184a61e69786d46ed5357f42711b..e475abe92b70aa2b078dd2ce0135d31bea1826f6 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -16,50 +16,10 @@ body,
   font-weight: normal;
 }
 
-.content {
-  padding: 6px;
-  box-sizing: border-box;
-}
-
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.flex-start {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-
-.mr-6px {
-  margin-right: 6px;
-}
-.px-6px{
-  padding-left: 6px;
-  padding-right: 6px;
-}
-
 input {
   width: 60px;
 }
 
-.border-top {
-  border-top: 1px solid #999;
-}
-
-.content-lattice {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-}
-
 .col {
   width: 20px;
   height: 20px;
@@ -122,8 +82,4 @@ input {
 .isWin::after {
   background-color: red;
   border-color: var(--p-win-border-color);
-}
-
-.space-nowrap {
-  white-space: nowrap;
 }
\ No newline at end of file
diff --git a/src/components/RandomTree.vue b/src/components/RandomTree.vue
index a6ecd0a968aa3254ca1b22667211b1429919a4ef..a774fa3820314fc52b08d14aac12647ff5fe4776 100644
--- a/src/components/RandomTree.vue
+++ b/src/components/RandomTree.vue
@@ -1,5 +1,6 @@
 <template>
-    <canvas class="canvas" width="400" height="300" ref="canvas"></canvas>
+    <canvas absolute right-10px bottom-10px pointer-events-none opacity-40 class="canvas" width="400" height="300"
+        ref="canvas"></canvas>
 </template>
 
 <script setup>
@@ -69,14 +70,3 @@ function drawBranch(ctx, v0, thick, len, dir) {
     drawBranch(ctx, v1, thick * 0.8, len * 0.8, dir - Math.random() * 46);
 }
 </script>
-
-<style>
-.canvas {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    pointer-events: none;
-    opacity: 0.4;
-}
-
-</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 90e6400b4d8ad8aba0c1caa53874eb4b81380648..545fd95f12d332343aef61c16bce464984e2394b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import '@unocss/reset/normalize.css'
+import 'virtual:uno.css'
 
 import './assets/main.css'
 
diff --git a/uno.config.js b/uno.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..2371146b6f864be6e291d4e0dc785b70816efadb
--- /dev/null
+++ b/uno.config.js
@@ -0,0 +1,19 @@
+// uno.config.js
+import {
+  defineConfig, presetAttributify, presetIcons,
+  presetTypography, presetUno,
+  transformerDirectives, transformerVariantGroup
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons(),
+    presetTypography(),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+})
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 917e95afed1f39287868bf4d13fec19225c58fe0..5b73c98769a999b5da8eb3ed7e192a83c46a67e9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), UnoCSS(),],
   server: {
     host: true
   },