lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-28 10:57:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改动画 完善搜索

Browse Source
This commit is contained in:
alger
2021-09-28 17:31:20 +08:00
parent 3c1318fe20
commit 0bcf75e647
10 changed files with 96 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+21 -20
View File
@@ -1,23 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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> <body>
<meta charset="UTF-8" /> <div id="app"></div>
<link rel="icon" href="/favicon.ico" /> <script type="module" src="/src/main.ts"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> </body>
<title>Vite App</title> </html>
<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>
package.json
+2 -2
View File
@@ -2,7 +2,7 @@
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vue-tsc --noEmit && vite build", "build": "vite build",
"serve": "vite preview" "serve": "vite preview"
}, },
"dependencies": { "dependencies": {
@@ -27,4 +27,4 @@
"vite": "^2.3.8", "vite": "^2.3.8",
"vue-tsc": "^0.0.24" "vue-tsc": "^0.0.24"
} }
} }
public/css/animate.css
Vendored
+7
View File
File diff suppressed because one or more lines are too long
src/components/RecommendSinger.vue
+13 -1
View File
@@ -17,7 +17,7 @@
class="recommend-singer-item-count p-2 text-base text-gray-200 z-10" class="recommend-singer-item-count p-2 text-base text-gray-200 z-10"
>{{ item.musicSize }}首</div> >{{ item.musicSize }}首</div>
<div class="recommend-singer-item-info z-10"> <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> <i class="iconfont icon-playfill text-xl"></i>
</div> </div>
<div class="ml-4"> <div class="ml-4">
@@ -35,6 +35,7 @@ import { setBackgroundImg, setAnimationDelay, setAnimationClass } from "@/utils"
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { getHotSinger } from "@/api/home"; import { getHotSinger } from "@/api/home";
import type { IHotSinger } from "@/type/singer"; import type { IHotSinger } from "@/type/singer";
import router from "@/router";
// 歌手信息 // 歌手信息
const hotSingerData = ref<IHotSinger>(); const hotSingerData = ref<IHotSinger>();
@@ -48,6 +49,17 @@ const loadSingerList = async () => {
onMounted(() => { onMounted(() => {
loadSingerList(); loadSingerList();
}); });
const toSearchSinger = (keyword: string) => {
router.push({
path: "/search",
query: {
keyword: keyword,
},
});
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
src/components/RecommendSonglist.vue
+7 -2
View File
@@ -8,7 +8,12 @@
> >
<!-- 推荐音乐列表 --> <!-- 推荐音乐列表 -->
<template v-for="(item, index) in recommendMusic?.result" :key="item.id"> <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> </template>
</div> </div>
</div> </div>
@@ -18,7 +23,7 @@
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { getRecommendMusic } from "@/api/home"; import { getRecommendMusic } from "@/api/home";
import type { IRecommendMusic } from "@/type/music"; import type { IRecommendMusic } from "@/type/music";
import { setAnimationClass } from "@/utils"; import { setAnimationClass, setAnimationDelay } from "@/utils";
import SongItem from "./common/SongItem.vue"; import SongItem from "./common/SongItem.vue";
// 推荐歌曲 // 推荐歌曲
const recommendMusic = ref<IRecommendMusic>(); const recommendMusic = ref<IRecommendMusic>();
src/components/common/SongItem.vue
+5 -15
View File
@@ -1,9 +1,5 @@
<template> <template>
<div <div class="recommend-music-list-item">
class="recommend-music-list-item"
:class="setAnimationClass('animate__bounceInUp')"
:style="setAnimationDelay(index, 200)"
>
<img :src="item.picUrl + '?param=200y200'" class="recommend-music-list-item-img" /> <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">
<div class="recommend-music-list-item-content-title"> <div class="recommend-music-list-item-content-title">
@@ -12,9 +8,9 @@
<div class="recommend-music-list-item-content-name"> <div class="recommend-music-list-item-content-name">
<n-ellipsis class="text-ellipsis" line-clamp="1"> <n-ellipsis class="text-ellipsis" line-clamp="1">
<span <span
v-for="(artists,index) in item.song.artists" v-for="(artists,artistsindex) in item.song.artists"
:key="index" :key="artistsindex"
>{{ artists.name }}{{ index < item.song.artists.length - 1 ? ' / ' : '' }}</span> >{{ artists.name }}{{ artistsindex < item.song.artists.length - 1 ? ' / ' : '' }}</span>
</n-ellipsis> </n-ellipsis>
</div> </div>
</div> </div>
@@ -34,20 +30,14 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { setAnimationDelay, setAnimationClass } from "@/utils";
import { useStore } from "vuex"; import { useStore } from "vuex";
import type { SongResult } from "@/type/music"; import type { SongResult } from "@/type/music";
import { computed, } from "vue"; import { computed, } from "vue";
import type { PropType } from "vue";
const props = defineProps({ const props = defineProps({
item: { item: {
type: Object as PropType<SongResult>, type: Object,
required: true
},
index: {
type: Number,
required: true required: true
} }
}) })
src/layout/AppLayout.vue
+11 -3
View File
@@ -8,7 +8,11 @@
<!-- 搜索栏 --> <!-- 搜索栏 -->
<search-bar /> <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>
</div> </div>
<!-- 底部音乐播放 --> <!-- 底部音乐播放 -->
@@ -48,9 +52,13 @@ const menus = store.state.menus;
} }
.main { .main {
@apply pt-6 pr-6 flex-1 box-border; @apply pt-6 pr-6 flex-1 box-border;
.main-content { &-content {
@apply rounded-2xl; @apply rounded-2xl;
height: 810px; height: 834px;
}
&-page {
padding: 20px 0;
padding-bottom: 80px;
} }
} }
} }
src/layout/components/PlayBar.vue
+1 -1
View File
@@ -23,7 +23,7 @@
</div> </div>
<div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')"> <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">
<div class="music-content-title"> <div class="music-content-title">
<n-ellipsis class="text-ellipsis" line-clamp="1">{{ playMusic.song.name }}</n-ellipsis> <n-ellipsis class="text-ellipsis" line-clamp="1">{{ playMusic.song.name }}</n-ellipsis>
src/views/home/index.vue
+12 -14
View File
@@ -1,18 +1,16 @@
<template> <template>
<n-layout class="h-full bg-black" :native-scrollbar="false"> <div class="main-page pb-20">
<div class="main-page pb-20"> <!-- 推荐歌手 -->
<!-- 推荐歌手 --> <recommend-singer />
<recommend-singer /> <div class="main-content">
<div class="main-content"> <!-- 歌单分类列表 -->
<!-- 歌单分类列表 --> <playlist-type />
<playlist-type /> <!-- 本周最热音乐 -->
<!-- 本周最热音乐 --> <recommend-songlist />
<recommend-songlist /> <!-- 推荐最新专辑 -->
<!-- 推荐最新专辑 --> <recommend-album />
<recommend-album />
</div>
</div> </div>
</n-layout> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -21,7 +19,7 @@ import PlaylistType from "@/components/PlaylistType.vue";
import RecommendSonglist from "@/components/RecommendSonglist.vue"; import RecommendSonglist from "@/components/RecommendSonglist.vue";
import RecommendAlbum from "@/components/RecommendAlbum.vue"; import RecommendAlbum from "@/components/RecommendAlbum.vue";
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main-content { .main-content {
tsconfig.json
+17 -4
View File
@@ -6,14 +6,27 @@
"strict": true, "strict": true,
"jsx": "preserve", "jsx": "preserve",
"sourceMap": true, "sourceMap": true,
"skipLibCheck": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"esModuleInterop": true, "esModuleInterop": true,
"lib": ["esnext", "dom"], "lib": [
"esnext",
"dom"
],
"baseUrl": "./", "baseUrl": "./",
"paths": { "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"
]
} }