修改动画完善搜索

2026-04-16 07:50:50 +08:00 · 2021-09-28 17:31:20 +08:00
parent 3c1318fe20
commit 0bcf75e647
10 changed files with 96 additions and 62 deletions
--- a/index.html
+++ b/index.html
@@ -1,23 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <link
+      rel="stylesheet"
+      href="//at.alicdn.com/t/font_2685283_qczwwfdwv9.css"
+    />
+    <link rel="stylesheet" href="./public/css/animate.css" />
+    <style>
+      :root {
+        --animate-delay: 0.5s;
+      }
+    </style>
+  </head>

-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite App</title>
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_2685283_qczwwfdwv9.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
-  <style>
-    :root {
-      --animate-delay: 0.5s;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
@@ -27,4 +27,4 @@
    "vite": "^2.3.8",
    "vue-tsc": "^0.0.24"
  }
-}
+}
--- a/public/css/animate.css
+++ b/public/css/animate.css
--- a/src/components/RecommendSinger.vue
+++ b/src/components/RecommendSinger.vue
@@ -17,7 +17,7 @@
                    class="recommend-singer-item-count p-2 text-base text-gray-200 z-10"
                >{{ item.musicSize }}首</div>
                <div class="recommend-singer-item-info z-10">
-                    <div class="recommend-singer-item-info-play">
+                    <div class="recommend-singer-item-info-play" @click="toSearchSinger(item.name)">
                        <i class="iconfont icon-playfill text-xl"></i>
                    </div>
                    <div class="ml-4">
@@ -35,6 +35,7 @@ import { setBackgroundImg, setAnimationDelay, setAnimationClass } from "@/utils"
 import { onMounted, ref } from "vue";
 import { getHotSinger } from "@/api/home";
 import type { IHotSinger } from "@/type/singer";
+import router from "@/router";

 // 歌手信息
 const hotSingerData = ref<IHotSinger>();
@@ -48,6 +49,17 @@ const loadSingerList = async () => {
 onMounted(() => {
    loadSingerList();
 });
+
+
+const toSearchSinger = (keyword: string) => {
+    router.push({
+        path: "/search",
+        query: {
+            keyword: keyword,
+        },
+    });
+};
+
 </script>

 <style lang="scss" scoped>
--- a/src/components/RecommendSonglist.vue
+++ b/src/components/RecommendSonglist.vue
@@ -8,7 +8,12 @@
        >
            <!-- 推荐音乐列表 -->
            <template v-for="(item, index) in recommendMusic?.result" :key="item.id">
-                <song-item :item="item" :index="index" />
+                <div
+                    :class="setAnimationClass('animate__bounceInUp')"
+                    :style="setAnimationDelay(index, 100)"
+                >
+                    <song-item :item="item" />
+                </div>
            </template>
        </div>
    </div>
@@ -18,7 +23,7 @@
 import { onMounted, ref } from "vue";
 import { getRecommendMusic } from "@/api/home";
 import type { IRecommendMusic } from "@/type/music";
-import { setAnimationClass } from "@/utils";
+import { setAnimationClass, setAnimationDelay } from "@/utils";
 import SongItem from "./common/SongItem.vue";
 // 推荐歌曲
 const recommendMusic = ref<IRecommendMusic>();
--- a/src/components/common/SongItem.vue
+++ b/src/components/common/SongItem.vue
@@ -1,9 +1,5 @@
 <template>
-    <div
-        class="recommend-music-list-item"
-        :class="setAnimationClass('animate__bounceInUp')"
-        :style="setAnimationDelay(index, 200)"
-    >
+    <div class="recommend-music-list-item">
        <img :src="item.picUrl + '?param=200y200'" class="recommend-music-list-item-img" />
        <div class="recommend-music-list-item-content">
            <div class="recommend-music-list-item-content-title">
@@ -12,9 +8,9 @@
            <div class="recommend-music-list-item-content-name">
                <n-ellipsis class="text-ellipsis" line-clamp="1">
                    <span
-                        v-for="(artists,index) in item.song.artists"
-                        :key="index"
-                    >{{ artists.name }}{{ index < item.song.artists.length - 1 ? ' / ' : '' }}</span>
+                        v-for="(artists,artistsindex) in item.song.artists"
+                        :key="artistsindex"
+                    >{{ artists.name }}{{ artistsindex < item.song.artists.length - 1 ? ' / ' : '' }}</span>
                </n-ellipsis>
            </div>
        </div>
@@ -34,20 +30,14 @@
 </template>

 <script lang="ts" setup>
-import { setAnimationDelay, setAnimationClass } from "@/utils";
 import { useStore } from "vuex";
 import type { SongResult } from "@/type/music";
 import { computed, } from "vue";
-import type { PropType } from "vue";


 const props = defineProps({
    item: {
-        type: Object as PropType<SongResult>,
-        required: true
-    },
-    index: {
-        type: Number,
+        type: Object,
        required: true
    }
 })
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -8,7 +8,11 @@
                    <!-- 搜索栏 -->
                    <search-bar />
                    <!-- 主页面路由 -->
-                    <router-view class="main-content"></router-view>
+                    <n-layout class="main-content bg-black" :native-scrollbar="false">
+                        <keep-alive>
+                            <router-view class="main-page"></router-view>
+                        </keep-alive>
+                    </n-layout>
                </div>
            </div>
            <!-- 底部音乐播放 -->
@@ -48,9 +52,13 @@ const menus = store.state.menus;
    }
    .main {
        @apply pt-6 pr-6 flex-1 box-border;
-        .main-content {
+        &-content {
            @apply rounded-2xl;
-            height: 810px;
+            height: 834px;
+        }
+        &-page {
+            padding: 20px 0;
+            padding-bottom: 80px;
        }
    }
 }
--- a/src/layout/components/PlayBar.vue
+++ b/src/layout/components/PlayBar.vue
@@ -23,7 +23,7 @@
    </div>

    <div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
-        <img class="play-bar-img" :src="playMusic.picUrl + '?param=200y200'" />
+        <img class="play-bar-img" :src="playMusic.picUrl + '?param=200y200'" @click="setMusicFull" />
        <div class="music-content">
            <div class="music-content-title">
                <n-ellipsis class="text-ellipsis" line-clamp="1">{{ playMusic.song.name }}</n-ellipsis>
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,18 +1,16 @@
 <template>
-  <n-layout class="h-full bg-black" :native-scrollbar="false">
-    <div class="main-page pb-20">
-      <!-- 推荐歌手 -->
-      <recommend-singer />
-      <div class="main-content">
-        <!-- 歌单分类列表 -->
-        <playlist-type />
-        <!-- 本周最热音乐 -->
-        <recommend-songlist />
-        <!-- 推荐最新专辑 -->
-        <recommend-album />
-      </div>
+  <div class="main-page pb-20">
+    <!-- 推荐歌手 -->
+    <recommend-singer />
+    <div class="main-content">
+      <!-- 歌单分类列表 -->
+      <playlist-type />
+      <!-- 本周最热音乐 -->
+      <recommend-songlist />
+      <!-- 推荐最新专辑 -->
+      <recommend-album />
    </div>
-  </n-layout>
+  </div>
 </template>

 <script lang="ts" setup>
@@ -21,7 +19,7 @@ import PlaylistType from "@/components/PlaylistType.vue";
 import RecommendSonglist from "@/components/RecommendSonglist.vue";
 import RecommendAlbum from "@/components/RecommendAlbum.vue";

-</script>
+                                                                </script>

 <style lang="scss" scoped>
 .main-content {
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,14 +6,27 @@
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
+    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
+    "lib": [
+      "esnext",
+      "dom"
+    ],
    "baseUrl": "./",
    "paths": {
-      "@": ["src"],
-      "@/*": ["src/*"],
+      "@": [
+        "src"
+      ],
+      "@/*": [
+        "src/*"
+      ],
    }
  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
 }