Thu Sep 26 19:53:00 CST 2024 inscode

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"
   }
 }

src/App.vue

 <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);

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
+import 'unocss'
 
 import './assets/main.css'
 

uno.config.js

+import { defineConfig } from 'unocss'
+import PresetRemToPx from '@unocss/preset-rem-to-px'
+
+export default defineConfig({
+    presets: [
+        PresetRemToPx(),
+    ],
+})
\ No newline at end of file

vite.config.js

 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()]
 })