优化动画效果,抽出组件

2026-04-23 23:57:22 +08:00 · 2021-07-21 15:01:39 +08:00
parent b55af4babd
commit 811152faa3
10 changed files with 437 additions and 305 deletions
@@ -0,0 +1,91 @@
+<template>
+    <div
+        class="recommend-music-list-item"
+        :class="setAnimationClass('animate__bounceInUp')"
+        :style="setAnimationDelay(index, 200)"
+    >
+        <img :src="item.picUrl" class="recommend-music-list-item-img" />
+        <div class="recommend-music-list-item-content">
+            <div class="recommend-music-list-item-content-title">
+                <n-ellipsis class="text-ellipsis" line-clamp="1">{{ item.song.name }}</n-ellipsis>
+            </div>
+            <div class="recommend-music-list-item-content-name">
+                <n-ellipsis class="text-ellipsis" line-clamp="1">{{ item.song.artists[0].name }}</n-ellipsis>
+            </div>
+        </div>
+        <div class="recommend-music-list-item-operating">
+            <div class="recommend-music-list-item-operating-like">
+                <i class="iconfont icon-likefill"></i>
+            </div>
+            <div class="recommend-music-list-item-operating-play" @click="playMusic(item)">
+                <i class="iconfont icon-playfill"></i>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { setAnimationDelay, setAnimationClass } from "@/utils";
+import { useStore } from "vuex";
+import type { SongResult } from "@/type/music";
+import type { PropType } from "vue";
+
+
+const props = defineProps({
+    item: {
+        type: Object as PropType<SongResult>,
+        required: true
+    },
+    index: {
+        type: Number,
+        required: true
+    }
+})
+
+const store = useStore();
+const playMusic = (item: SongResult) => {
+    store.commit("setPlay", item);
+    store.commit("setIsPlay", true);
+};
+
+
+</script>
+
+<style lang="scss" scoped>
+.text-ellipsis {
+    width: 100%;
+}
+.recommend-music-list-item {
+    @apply rounded-3xl p-3 flex items-center hover:bg-gray-800 transition;
+    &-img {
+        @apply w-12 h-12 rounded-2xl mr-4;
+    }
+    &-content {
+        @apply flex-1;
+        &-title {
+            @apply text-base text-white;
+        }
+        &-name {
+            @apply text-xs;
+            @apply text-gray-400;
+        }
+    }
+    &-operating {
+        @apply flex items-center pl-4 rounded-full border border-gray-700;
+        background-color: #0d0d0d;
+        .iconfont {
+            @apply text-xl;
+        }
+        .icon-likefill {
+            color: #868686;
+            @apply text-xl hover:text-red-600 transition;
+        }
+        &-like {
+            @apply mr-2 cursor-pointer;
+        }
+        &-play {
+            @apply bg-black cursor-pointer border border-gray-500 rounded-full w-10 h-10 flex justify-center items-center hover:bg-green-600 transition;
+        }
+    }
+}
+</style>