修改

src/views/home/index.vue

@@ -14,13 +14,13 @@
         </cHead>
       </el-col>
     </el-row>
-    <div class="tool tool1" v-if="isOpen" @click="toOpen">
+    <div class="tool1" v-if="isOpen" @click="toOpen">
       <el-col :span="24" class="tool_1" v-for="(item, index) in toolList" :key="index" @click="toCommon(item)">
         <el-image class="image" :src="item.url" fit="fill" />
         <span>{{ item.name }}</span>
       </el-col>
     </div>
-    <div class="tool tool2" v-else @click="toOpen">
+    <div class="tool2" v-else @click="toOpen">
       <div class="bgc">
         <el-image class="image" src="/src/assets/logo.png" fit="fill" />
       </div>
@@ -119,13 +119,6 @@ const toCommon = (item) => {
 };
 </script>
 <style scoped lang="scss">
-.tool {
-  position: fixed;
-  right: 8px;
-  top: 50%;
-  z-index: 20;
-}
-
 .tool1 {
   position: fixed;
   right: 12px;
@@ -156,9 +149,13 @@ const toCommon = (item) => {
 }
 
 .tool2 {
+  position: fixed;
+  top: 50%;
+  right: 120px;
+  animation: slide 10s infinite;
   .bgc {
     background: linear-gradient(#fff, #448de0);
-    animation: bgc 2s infinite linear;
+    animation: bgc 4s infinite linear;
   }
 
   /* 渐变色背景旋转动画 */
@@ -179,6 +176,23 @@ const toCommon = (item) => {
     border-radius: 50px;
   }
 }
+@keyframes slide {
+  0% {
+    transform: translate(0, 0);
+  }
+  25% {
+    transform: translate(100px, 0); /* 右滑 */
+  }
+  50% {
+    transform: translate(100px, 100px); /* 下滑 */
+  }
+  75% {
+    transform: translate(0, 100px); /* 左滑 */
+  }
+  100% {
+    transform: translate(0, 0); /* 上滑 */
+  }
+}
 
 :deep(.el-dialog__body) {
   padding: 0 !important;