更新hover动画

src/App.vue

@@ -6,6 +6,7 @@ import { computed, onBeforeUnmount, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import config from '@/config/style';
 import { useREM } from '@/utils/rem';
+import { devicePixelRatio } from '@/utils/init';
 
 // 注册rem事件
 useREM();
@@ -16,14 +17,6 @@ const mode = computed(() => {
   return store.getters['setting/mode'];
 });
 
-const createDevicePixelRatio = () => {
-  const scale_factor = window.devicePixelRatio;
-  console.log('屏幕缩放比例：' + scale_factor);
-  let zoom_value = 1 / scale_factor;
-  const container = document.documentElement;
-  container.style.zoom = zoom_value;
-};
-
 const contextMenuListener = (event: any) => {
   event.preventDefault();
 };
@@ -35,7 +28,7 @@ const destroyContextMenuListener = () => {
 
 onMounted(() => {
   store.dispatch('setting/changeTheme', { ...config });
-  createDevicePixelRatio();
+  devicePixelRatio();
 
   // 阻止右键事件
   document.addEventListener('contextmenu', contextMenuListener);

src/components/cardTwo.vue

@@ -10,7 +10,7 @@
   >
     <div class="custom-card-two-image">
       <img :src="img" alt="" />
-      <div v-show="showHover" class="hover">
+      <div v-show="showHover" :class="['hover']">
         <slot name="hover"></slot>
       </div>
       <slot name="live"></slot>
@@ -75,6 +75,16 @@ const nameChange = (value: string) => {
   }
 }
 
+@keyframes hide {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-10%);
+  }
+}
 .custom-card-two-box {
   width: 200px;
   height: 310px;

src/utils/init.ts

+export const devicePixelRatio = () => {
+  const scale_factor = window.devicePixelRatio;
+  console.log('屏幕缩放比例：' + scale_factor);
+  let zoom_value = 1 / scale_factor;
+  const container = document.documentElement;
+  container.style.zoom = zoom_value;
+  //   container.style.transform = `scale(${zoom_value})`;
+  //   container.style.transformOrigin = '0% 0%';
+};