From fc290e5512678252f7ae3712696e87ad59b90a73 Mon Sep 17 00:00:00 2001
From: qq_60568498 <qq_60568498@devide>
Date: Thu, 26 Sep 2024 19:53:00 +0800
Subject: [PATCH] Thu Sep 26 19:53:00 CST 2024 inscode

---
 package.json   |  2 ++
 src/App.vue    | 12 ++++++++----
 src/main.js    |  1 +
 uno.config.js  |  8 ++++++++
 vite.config.js |  3 ++-
 5 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 uno.config.js

diff --git a/package.json b/package.json
index ee9648b..e241ac4 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 f44532b..e9b872e 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 90e6400..6f02a61 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 0000000..3c2430c
--- /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 4ad898d..fbe7f15 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()]
 })
-- 
GitLab