diff --git a/package.json b/package.json
index ee9648b3435c4332e232b747ec5d9abdf8725424..e241ac4a0e6b23e27382741d8d85b82120ab1d6f 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
     "vue": "^3.2.37"
   },
   "devDependencies": {
+    "@unocss/preset-rem-to-px": "^0.62.4",
     "@vitejs/plugin-vue": "^3.0.1",
+    "unocss": "^0.62.4",
     "vite": "^5.0.1"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index f44532b828fcca1d6b2e64eb5070788f27c9d918..e9b872e9567e3f3754d40dbf758afac0eaf64772 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,18 @@
 <script setup>
     import { ref } from 'vue'
 
-    const state = ref(false);
+    const state = ref(true);
     const img = ref('https://gd-hbimg.huaban.com/b25eb225a8b9c3f5c99b22c5ff8c428f21daba108efbe6-w5Xxd0')
     const img1 = ref('https://gd-hbimg.huaban.com/12eb46c078d1c5090520096c20e74ce885eb11c218571c-Na4YvM_fw658webp')
 </script>
 
 <template>
-    <div style="width: 350px; display: flex; flex-direction: column; justify-center: center; align-items: center;">
-        <div style="width: 350px;height: 250px;border-radius: 10px;position: relative">
+    <div style="display: flex; flex-direction: column; justify-center: center; align-items: center;">
+        <div style="width: 350px; height: 250px;border-radius: 10px;position: relative">
             <img  style="width: 100%;height: 150px; border-radius: 10px;position: absulote;z-index: 2;" src="https://gd-hbimg.huaban.com/b25eb225a8b9c3f5c99b22c5ff8c428f21daba108efbe6-w5Xxd0" />
             <div
                 style="width: 150px; height: 150px; position: absolute; top: 70px;transform: translateX(-50%);left: 50%; z-index: 1">
-                <img  style="width: 150px; height: 150px;" :class="{'rotateAnim':state}" :src="img1" />
+                <img class="rotateAnim" style="width: 150px; height: 150px;" :class="{'paused': state}" :src="img1" />
             </div>
         </div>
 
@@ -27,6 +27,10 @@
         animation: spain 4s linear infinite;
     }
 
+    .paused {
+        animation-play-state: paused;
+    }
+
     @keyframes spain {
         from {
             transform: rotate(0deg);
diff --git a/src/main.js b/src/main.js
index 90e6400b4d8ad8aba0c1caa53874eb4b81380648..6f02a6192a89f72e36cc6057fc0098cd03c2b923 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import 'unocss'
 
 import './assets/main.css'
 
diff --git a/uno.config.js b/uno.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..3c2430c50527d75236aed0af064690d217439422
--- /dev/null
+++ b/uno.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'unocss'
+import PresetRemToPx from '@unocss/preset-rem-to-px'
+
+export default defineConfig({
+    presets: [
+        PresetRemToPx(),
+    ],
+})
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 4ad898dec614e030adad5e4f80523145bce56245..fbe7f15d4c04da5cce64b955afab7bfb2b595f54 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,10 +1,11 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
     host: true
   },
-  plugins: [vue()]
+  plugins: [vue(), UnoCSS()]
 })