优化

src/components/BaseMusic.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="music-wrapper">
-    <img class="music1" :style="style" src="../assets/img/icon/home/music1.png" alt="">
+    <img class="music" :src="props.cover" :style="style" @click.stop="bus.emit('nav','/home/music')">
-    <img class="music2" :style="style" src="../assets/img/icon/home/music2.png" alt="">
-    <div class="music-bg" :style="style" @click.stop="bus.emit('nav','/home/music')">
-      <img class="music" :src="props.cover">
-    </div>
   </div>
 </template>
 <script setup>
@@ -27,48 +23,22 @@ const style = computed(() => {
 
 <style lang="less">
 .music-wrapper {
-  position: relative;
+  display: flex;
+  justify-content: center;
+  @w: 40rem;
 
-  .music-bg {
+  .music {
-    background-image: linear-gradient(black, #424242, black);
     border-radius: 50%;
-    width: 50px;
+    width: @w;
-    height: 50px;
+    height: @w;
     display: flex;
     justify-content: center;
     align-items: center;
     animation: animations 5s linear forwards infinite;
-
     //animation-play-state:paused;
     //display: none;
-
-    .music {
-      //display: none;
-      width: 25px;
-      height: 25px;
-      border-radius: 50%;
-    }
   }
 
-
-  .music1, .music2 {
-    //display: none;
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    top: 10px;
-  }
-
-  .music1 {
-    animation: anim-music1 2s linear forwards infinite;
-  }
-
-  .music2 {
-    animation: anim-music1 2s linear forwards infinite;
-    animation-delay: 1s;
-  }
-
-
   @keyframes animations {
     0% {
       transform: rotate(0deg);;
@@ -77,32 +47,6 @@ const style = computed(() => {
       transform: rotate(360deg);
     }
   }
-  @keyframes anim-music1 {
-    0% {
-      transform: translate3d(0, 0, 0);
-      opacity: 0;
-    }
-    20% {
-      transform: translate3d(-8px, 0px, 0) rotate(30deg);
-      opacity: .3;
-    }
-    40% {
-      transform: translate3d(-16px, -5px, 0) rotate(15deg);
-      opacity: .5;
-    }
-    60% {
-      transform: translate3d(-24px, -15px, 0) rotate(0deg);
-      opacity: 1;
-    }
-    80% {
-      transform: translate3d(-32px, -30px, 0) rotate(-15deg);
-      opacity: 1;
-    }
-    100% {
-      transform: translate3d(-32px, -50px, 0) rotate(-30deg);
-      opacity: 0;
-    }
-  }
 }
 
 </style>

src/components/slide/ItemToolbar.vue

@@ -52,7 +52,7 @@ function showComments() {
 
 <template>
   <div class="toolbar mb1r">
-    <div class="avatar-ctn mb4r">
+    <div class="avatar-ctn mb3r">
       <img class="avatar" :src="props.item.author.avatar" alt=""
            @click.stop="$emit('goUserInfo')">
       <transition name="fade">
@@ -80,11 +80,11 @@ function showComments() {
       <img v-else src="@/assets/img/icon/components/video/star.png" alt="" class="message-image">
       <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
     </div>
-    <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
+    <div v-if="!isMy" class="share mb2r" @click.stop="$emit('showShare')">
       <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
       <span>{{ Utils.formatNumber(props.item.share_count) }}</span>
     </div>
-    <div v-else class="share mb4r" @click.stop="$emit('showShare')">
+    <div v-else class="share mb2r" @click.stop="$emit('showShare')">
       <img src="../../assets/img/icon/menu-white.png" alt="" class="share-image">
     </div>
     <!--    <BaseMusic-->

src/pages/slideHooks/index.vue

@@ -417,7 +417,7 @@ function render(item, itemIndex, play, position) {
   //width: 90vw;
   //height: 80vh;
   width: 100vw;
-  height: calc(100vh - @footer-height);
+  height: calc(100vh - @footer-height)!important;
   overflow: hidden;
 
   #slide1 {