Auto Commit

src/App.vue

@@ -19,6 +19,10 @@ import songList from "./components/songList.vue";
 </script>
 
 <style scoped>
+* {
+  padding: 0;
+  margin: 0;
+}
 .musicContainer {
   display: flex;
   width: 100%;

src/components/dancePNG.vue

+<template>
+    <div style="width:90px;height:100px;overflow:hidden;float:left;">
+    <div class="imgDiv" :style="{
+        backgroundImage: `url(${danceInfo.who})`,
+        backgroundPosition: `${img.x}px ${img.y}px` 
+    }"></div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue"
+import kunkun from "./../assets/kunkun.png"
+import cock from "./../assets/cock.png"
+
+const whoDance = Math.random()
+
+const danceInfo = ref({
+    who: whoDance > 0.5 ? kunkun : cock,
+    r: whoDance > 0.5 ? 5 : 5,
+    l: whoDance > 0.5 ? 6 : 4
+})
+
+const img = ref({
+    x: 0,
+    y: 0
+})
+
+const obj = {
+    r: 0,
+    l: 0
+}
+function dance(r, l, p) {
+    setInterval(()=>{
+        img.value.x = obj.r * p
+        img.value.y = obj.l * p
+        if(obj.r < r) {
+            obj.r++
+            if(obj.r === r) {
+                obj.l++
+                obj.r = 0
+                if(obj.l === l) {
+                    obj.l = 0
+                }
+            }
+
+        }
+    }, 100)
+}
+onMounted(()=>{
+    dance(danceInfo.value.r, danceInfo.value.l, -768)
+})
+
+</script>
+
+<style scoped>
+.imgDiv {
+    height: 768px;
+    width: 768px;
+    background-repeat: no-repeat;
+    transform: scale(0.1) translate(-420%, -420%);
+}
+</style>
\ No newline at end of file

src/components/searchForm.vue

@@ -38,7 +38,6 @@
           :style="{ color: type === 'playlist' ? '#F56C6C' : '#79bbff' }"
         >
           <span>{{ alertInfo[type] }}</span>
-          <img height="100%" src="sss" />
         </el-row>
         <el-button @click="runSearch" type="primary" style="width: 100%"
           >搜索</el-button

src/components/songList.vue

@@ -6,8 +6,10 @@
     </div>
   
     <el-tree node-key="id" :default-expanded-keys="['2']" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
+    <DancePNG />
   </template>
   <script lang="ts" setup>
+  import DancePNG from "./dancePNG.vue"
   import bus from "./../utils/bus.js";
   interface Tree {
     label: string;
@@ -103,5 +105,4 @@
     children: "children",
     label: "label",
   };
-  </script>
-  
+</script>
\ No newline at end of file
\ No newline at end of file