Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 5486f43f 编写于 作者: Z Zachary
浏览文件
操作

feat: split new components 

* add my page of unlog
上级 3202d840
隐藏空白更改
内联 并排
Showing with 522 addition and 169 deletion
src/components/common/ShowAlbums.vue 0 → 100644
浏览文件 @ 5486f43f
<template>
<div
class="js_search_tab_cont search_tab_cont"
id="album_box"
style="display: block"
>
<div class="mod_playlist_text">
<ul class="playlist__header">
<li class="playlist__header_name">专辑</li>
<li class="playlist__header_author">歌手</li>
<li class="playlist__header_other">发行时间</li>
</ul>
<ul class="playlist__list">
<li class="playlist__item" v-for="album in albums" :key="album.id">
<div class="playlist__cover" style="visibility: visible">
<a class="js_album"
><img
class="playlist__pic"
style="display: block; visibility: visible"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
:alt="album.name"
:src="album.img"
/></a>
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt"
><a class="js_album" :title="album.name">{{
album.name
}}</a></span
>
</h4>
<div class="playlist__author">
<a class="js_singer" :title="album.artistsText">{{
album.artistsText
}}</a>
</div>
<div class="playlist__other">{{ album.publishTime }}</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: {
albums: {
type: Array,
default: [],
},
},
};
</script>
<style scoped>
.mod_playlist_text {
zoom: 1;
font-size: 14px;
}
.mod_lyric_list,
.mod_mv_list,
.mod_playlist_text,
.mod_songlist {
padding-bottom: 40px;
}
.mod_playlist_text .playlist__header {
height: 50px;
line-height: 50px;
background-color: #fbfbfd;
color: #999;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author,
.mod_playlist_text .playlist__header_name,
.mod_playlist_text .playlist__header_number,
.mod_playlist_text .playlist__number {
float: left;
padding-left: 20px;
}
.mod_playlist_text .playlist__header_name {
width: 57%;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author {
width: 30%;
}
.mod_playlist_text .playlist__header_other,
.mod_playlist_text .playlist__other {
width: 7.5%;
}
.mod_playlist_text .playlist__header_other,
.mod_playlist_text .playlist__other {
float: right;
padding-right: 20px;
text-align: right;
}
.mod_playlist_text .playlist__item {
position: relative;
height: 70px;
line-height: 70px;
zoom: 1;
overflow: hidden;
clear: both;
font-size: 0;
}
.mod_playlist_text .playlist__cover {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
margin-top: 10px;
padding-left: 20px;
}
.mod_playlist_text .playlist__pic {
height: 100%;
object-fit: cover;
}
.mod_playlist_text .playlist__pic {
display: block;
width: 100%;
min-height: 50px;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__other,
.mod_playlist_text .playlist__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.mod_playlist_text .playlist__title {
width: 52.66667%;
font-weight: 400;
text-indent: 15px;
overflow: hidden;
}
.mod_playlist_text .playlist__title_txt {
float: left;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__count,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__title {
float: left;
height: 70px;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author {
width: 30%;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__other,
.mod_playlist_text .playlist__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
</style>
src/components/common/ShowMvs.vue 0 → 100644
浏览文件 @ 5486f43f
<template>
<div
class="js_search_tab_cont search_tab_cont"
id="mv_box"
style="display: block"
>
<div class="mod_mv_list">
<ul class="mv_list__list">
<li class="mv_list__item" v-for="mv in mvs" :key="mv.id">
<div class="mv_list__item_box" style="visibility: visible">
<a class="mv_list__cover mod_cover js_mv" hidefocus="true">
<img
class="mv_list__pic"
style="display: block; visibility: visible"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000';this.onerror=null;"
:alt="mv.name"
:src="mv.img"
/>
<i class="mod_cover__icon_play"></i>
<!--div class="mv_list__time">04:10</div-->
</a>
<h3 class="mv_list__title">
<a class="js_mv" :title="mv.name">{{ mv.name }}</a>
</h3>
<p class="mv_list__singer">
<a class="js_singer" :title="mv.artistsText">{{
mv.artistsText
}}</a>
</p>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: {
mvs: { type: Array, default: [] },
},
};
</script>
<style scoped>
h3,
hr,
li,
ol,
p,
td,
th,
ul {
margin: 0;
padding: 0;
}
.mod_lyric_list,
.mod_mv_list,
.mod_playlist_text,
.mod_songlist {
padding-bottom: 40px;
}
.mv_list__list {
margin-right: -20px;
zoom: 1;
}
.mv_list__item {
float: left;
width: 25%;
padding-bottom: 44px;
overflow: hidden;
}
</style>
src/components/common/ShowPlaylist.vue 0 → 100644
浏览文件 @ 5486f43f
<template>
<div
class="js_search_tab_cont search_tab_cont"
id="playlist_box"
style="display: block"
>
<div class="mod_playlist_text">
<ul class="playlist__header">
<li class="playlist__header_name">歌单</li>
<li class="playlist__header_author">创建人</li>
<li class="playlist__header_other">播放量</li>
</ul>
<ul class="playlist__list">
<li
class="playlist__item"
v-for="playlist in playlists"
:key="playlist.id"
>
<div class="playlist__cover" style="visibility: visible">
<a class="js_playlist"
><img
class="playlist__pic"
style="display: block; visibility: visible"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';this.onerror=null;"
:src="playlist.img"
:alt="playlist.name"
/></a>
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt"
><a class="js_playlist" :title="playlist.name">{{
playlist.name
}}</a></span
>
</h4>
<div class="playlist__author">
<a class="js_user" title="playlist.creatorName">{{
playlist.creatorName
}}</a>
</div>
<div class="playlist__other">{{ playlist.playCount }}</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: {
playlists: {
type: Array,
default: [],
},
},
};
</script>
<style scoped>
.mod_playlist_text {
zoom: 1;
font-size: 14px;
}
.mod_lyric_list,
.mod_mv_list,
.mod_playlist_text,
.mod_songlist {
padding-bottom: 40px;
}
.mod_playlist_text .playlist__header {
height: 50px;
line-height: 50px;
background-color: #fbfbfd;
color: #999;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author,
.mod_playlist_text .playlist__header_name,
.mod_playlist_text .playlist__header_number,
.mod_playlist_text .playlist__number {
float: left;
padding-left: 20px;
}
.mod_playlist_text .playlist__header_name {
width: 57%;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author {
width: 30%;
}
.mod_playlist_text .playlist__header_other,
.mod_playlist_text .playlist__other {
width: 7.5%;
}
.mod_playlist_text .playlist__header_other,
.mod_playlist_text .playlist__other {
float: right;
padding-right: 20px;
text-align: right;
}
.mod_playlist_text .playlist__item {
position: relative;
height: 70px;
line-height: 70px;
zoom: 1;
overflow: hidden;
clear: both;
font-size: 0;
}
.mod_playlist_text .playlist__cover {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
margin-top: 10px;
padding-left: 20px;
}
.mod_playlist_text .playlist__pic {
height: 100%;
object-fit: cover;
}
.mod_playlist_text .playlist__pic {
display: block;
width: 100%;
min-height: 50px;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__other,
.mod_playlist_text .playlist__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.mod_playlist_text .playlist__title {
width: 52.66667%;
font-weight: 400;
text-indent: 15px;
overflow: hidden;
}
.mod_playlist_text .playlist__title_txt {
float: left;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__count,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__title {
float: left;
height: 70px;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author {
width: 30%;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__other,
.mod_playlist_text .playlist__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
</style>
src/components/common/ShowSongs.vue 0 → 100644
浏览文件 @ 5486f43f
<template>
<div
class="js_search_tab_cont search_tab_cont"
id="song_box"
style="display: block"
>
<div class="mod_songlist_toolbar">
<a href="javascript:;" class="mod_btn js_all_play"
><i class="mod_btn__icon_play"></i>播放全部</a
>
<a href="javascript:;" class="mod_btn js_all_fav"
><i class="mod_btn__icon_add"></i>添加到</a
>
<a href="javascript:;" class="mod_btn js_all_down"
><i class="mod_btn__icon_down"></i>下载</a
>
<a href="javascript:;" class="mod_btn js_batch"
><i class="mod_btn__icon_batch"></i>批量操作</a
>
</div>
<detail-songlist :songs="songs" :listType="'playlist'" />
</div>
</template>
<script>
import DetailSonglist from "components/common/DetailSonglist";
export default {
props: {
songs: {
type: Array,
default: [],
},
},
components: { DetailSonglist },
};
</script>
<style lscoped>
</style>
src/views/My.vue
浏览文件 @ 5486f43f
<template>
<h1>My</h1>
<div class="mod_profile_unlogin" style="display: none">
<div class="section_inner">
<h2 class="profile_unlogin__tit">
<div class="icon_txt">听我喜欢听的歌</div>
</h2>
<div class="profile_unlogin__desc"></div>
<a
href="javascript:;"
data-stat="y_new.profile.login"
class="mod_btn_green profile_unlogin__btn js_login"
>立即登录</a
>
</div>
</div>
</template>
<script>
</script>
<script>
</script>
<style scoped>
</style>
\ No newline at end of file
.mod_profile_unlogin {
height: 922px;
background: url(../assets/img/bg_profile_unlogin.jpg) 50% no-repeat;
background-size: auto;
background-size: cover;
overflow: hidden;
}
.mod_profile_unlogin {
height: 622px;
}
.section_inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.profile_unlogin__desc,
.profile_unlogin__tit {
background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/profile_tit.png?max_age=2592000&v=e6091d7cd6e4142e075c91798c5d51cc);
margin-left: auto;
margin-right: auto;
}
.profile_unlogin__tit {
width: 735px;
height: 64px;
background-position: 0 0;
margin-top: 350px;
}
.profile_unlogin__tit {
margin-top: 210px;
}
.profile_unlogin__desc {
width: 345px;
height: 30px;
background-position: 0 -70px;
margin-top: 30px;
margin-bottom: 36px;
}
.profile_unlogin__btn {
display: block;
font-size: 20px;
height: 48px;
line-height: 48px;
width: 128px;
text-align: center;
margin: 0 auto;
}
</style>
src/views/musicLibrary/SearchResultDetail.vue
浏览文件 @ 5486f43f
......@@ -19,155 +19,13 @@
</div>
<!-- song -->
<div
class="js_search_tab_cont search_tab_cont"
id="song_box"
style="display: block"
v-if="selectedType == 1"
>
<div class="mod_songlist_toolbar">
<a href="javascript:;" class="mod_btn js_all_play"
><i class="mod_btn__icon_play"></i>播放全部</a
>
<a href="javascript:;" class="mod_btn js_all_fav"
><i class="mod_btn__icon_add"></i>添加到</a
>
<a href="javascript:;" class="mod_btn js_all_down"
><i class="mod_btn__icon_down"></i>下载</a
>
<a href="javascript:;" class="mod_btn js_batch"
><i class="mod_btn__icon_batch"></i>批量操作</a
>
</div>
<detail-songlist :songs="songs" :listType="'playlist'" />
</div>
<show-songs :songs="songs" v-if="selectedType == 1" />
<!-- album -->
<div
class="js_search_tab_cont search_tab_cont"
id="album_box"
style="display: block"
v-if="selectedType == 10"
>
<div class="mod_playlist_text">
<ul class="playlist__header">
<li class="playlist__header_name">专辑</li>
<li class="playlist__header_author">歌手</li>
<li class="playlist__header_other">发行时间</li>
</ul>
<ul class="playlist__list">
<li
class="playlist__item"
v-for="album in albums"
:key="album.id"
>
<div class="playlist__cover" style="visibility: visible">
<a class="js_album"
><img
class="playlist__pic"
style="display: block; visibility: visible"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
:alt="album.name"
:src="album.img"
/></a>
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt"
><a class="js_album" :title="album.name">{{
album.name
}}</a></span
>
</h4>
<div class="playlist__author">
<a class="js_singer" :title="album.artistsText">{{
album.artistsText
}}</a>
</div>
<div class="playlist__other">{{ album.publishTime }}</div>
</li>
</ul>
</div>
</div>
<show-albums :albums="albums" v-if="selectedType == 10" />
<!-- mv -->
<div
class="js_search_tab_cont search_tab_cont"
id="mv_box"
style="display: block"
v-if="selectedType == 1004"
>
<div class="mod_mv_list">
<ul class="mv_list__list">
<li class="mv_list__item" v-for="mv in mvs" :key="mv.id">
<div class="mv_list__item_box" style="visibility: visible">
<a class="mv_list__cover mod_cover js_mv" hidefocus="true">
<img
class="mv_list__pic"
style="display: block; visibility: visible"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000';this.onerror=null;"
:alt="mv.name"
:src="mv.img"
/>
<i class="mod_cover__icon_play"></i>
<!--div class="mv_list__time">04:10</div-->
</a>
<h3 class="mv_list__title">
<a class="js_mv" :title="mv.name">{{ mv.name }}</a>
</h3>
<p class="mv_list__singer">
<a class="js_singer" :title="mv.artistsText">{{
mv.artistsText
}}</a>
</p>
</div>
</li>
</ul>
</div>
</div>
<show-mvs :mvs="mvs" v-if="selectedType == 1004" />
<!-- playlist -->
<div
class="js_search_tab_cont search_tab_cont"
id="playlist_box"
style="display: block"
v-if="selectedType == 1000"
>
<div class="mod_playlist_text">
<ul class="playlist__header">
<li class="playlist__header_name">歌单</li>
<li class="playlist__header_author">创建人</li>
<li class="playlist__header_other">播放量</li>
</ul>
<ul class="playlist__list">
<li
class="playlist__item"
v-for="playlist in playlists"
:key="playlist.id"
>
<div class="playlist__cover" style="visibility: visible">
<a class="js_playlist"
><img
class="playlist__pic"
style="display: block; visibility: visible"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';this.onerror=null;"
:src="playlist.img"
:alt="playlist.name"
/></a>
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt"
><a class="js_playlist" :title="playlist.name">{{
playlist.name
}}</a></span
>
</h4>
<div class="playlist__author">
<a class="js_user" title="playlist.creatorName">{{
playlist.creatorName
}}</a>
</div>
<div class="playlist__other">{{ playlist.playCount }}</div>
</li>
</ul>
</div>
</div>
<show-playlist :playlists="playlists" v-if="selectedType == 1000" />
<!-- user -->
<div
class="js_search_tab_cont search_tab_cont"
......@@ -264,6 +122,10 @@
</template>
<script>
import ShowSongs from "components/common/ShowSongs";
import ShowAlbums from "components/common/ShowAlbums";
import ShowMvs from "components/common/ShowMvs";
import ShowPlaylist from "components/common/ShowPlaylist";
import DetailSonglist from "components/common/DetailSonglist";
import ModListMenu from "components/common/ModListMenu";
import { getSearchResult } from "api";
......@@ -335,6 +197,10 @@ export default {
selectedType(v) {},
},
components: {
ShowSongs,
ShowAlbums,
ShowMvs,
ShowPlaylist,
DetailSonglist,
ModListMenu,
},
......@@ -342,14 +208,10 @@ export default {
</script>
<style scoped>
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
......@@ -357,15 +219,11 @@ h4,
h5,
h6,
hr,
html,
input,
lengend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
......@@ -536,17 +394,6 @@ button {
font-size: 14px;
}
.mv_list__list {
margin-right: -20px;
zoom: 1;
}
.mv_list__item {
float: left;
width: 25%;
padding-bottom: 44px;
overflow: hidden;
}
.singer_list__item {
position: relative;
height: 80px;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或