Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

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

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

update: imporve css and components

上级 04dadadf
隐藏空白更改
内联 并排
Showing with 165 addition and 373 deletion
src/assets/css/base.scss
浏览文件 @ a651d824
......@@ -5,6 +5,9 @@ html {
line-height: 1.5;
}
button {
cursor: pointer;
}
a,
a * {
cursor: pointer;
......
src/assets/css/fakeqqmusic.scss
浏览文件 @ a651d824
......@@ -25,6 +25,12 @@ $black: #000;
position: relative;
}
.mod_search {
position: relative;
height: 247px;
background-position: 50%;
background-size: cover;
}
.mod_btn {
border: 1px solid #c9c9c9;
color: $black;
......@@ -52,6 +58,11 @@ $black: #000;
box-sizing: border-box;
overflow: hidden;
}
.mod_btn__icon_play {
width: 13px;
height: 16px;
background-position: -60px -220px;
}
.mod_btn_green__icon_play {
width: 13px;
height: 16px;
......@@ -233,29 +244,6 @@ $black: #000;
}
}
/* **************
* 歌手列表 css */
.singer_list_txt {
margin-right: -20px;
overflow: hidden;
margin-bottom: 60px;
}
.singer_list_txt__item {
float: left;
width: 20%;
}
.singer_list_txt__link {
float: left;
max-width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
line-height: 36px;
}
/* **********
* 伸缩按钮 */
.mod_slide_action {
......@@ -1063,6 +1051,13 @@ $black: #000;
}
}
.mod_lyric_list,
.mod_mv_list,
.mod_playlist_text,
.mod_songlist {
padding-bottom: 40px;
}
.mod_playlist .playlist__cover:hover .playlist__pic {
transform: scale(1.07) translateZ(0);
transition: transform 0.75s cubic-bezier(0, 1, 0.75, 1);
......@@ -1350,6 +1345,38 @@ img .playlist__pic {
.songlist__song_txt {
margin-left: 10px;
}
.singer_list__item {
position: relative;
height: 80px;
display: table;
width: 100%;
.singer_list__title {
width: 40%;
min-width: 280px;
font-weight: 400;
text-indent: 20px;
overflow: hidden;
line-height: 80px;
padding-left: 20px;
font-size: 0;
}
.singer_list__pic {
height: 100%;
object-fit: cover;
display: block;
width: 100%;
min-height: 50px;
border-radius: 50%;
}
.singer_list__cover {
position: relative;
float: left;
width: 60px;
height: 60px;
margin-top: 10px;
}
}
.singer_list__cover {
margin-left: auto;
margin-right: auto;
......@@ -1361,13 +1388,6 @@ img .playlist__pic {
height: 140px;
border-radius: 126px;
}
.singer_list__cover,
.singer_list__pic {
display: block;
width: 140px;
height: 140px;
border-radius: 126px;
}
.singer_list__title {
font-size: 16px;
font-weight: 400;
......@@ -1378,6 +1398,74 @@ img .playlist__pic {
*width: 100%;
margin: 20px 30px 4px;
}
.singer_list__user_txt {
color: #999;
}
/* 搜索用户界面 */
.singer_list__title_txt {
float: left;
max-width: 310px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.singer_list__count,
.singer_list__other,
.singer_list__playlist,
.singer_list__title {
display: table-cell;
height: 80px;
vertical-align: middle;
box-sizing: border-box;
}
.singer_list__playlist,
.singer_list__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.singer_list__playlist {
width: 22%;
padding-left: 20px;
}
.singer_list__count {
width: 22%;
padding-left: 15px;
}
.singer_list__other {
width: 122px;
}
.singer_list__btn_focus {
display: block;
width: 122px;
text-align: center;
margin-right: 20px;
}
/* **************
* 歌手列表 css */
.singer_list_txt {
margin-right: -20px;
overflow: hidden;
margin-bottom: 60px;
}
.singer_list_txt__item {
float: left;
width: 20%;
}
.singer_list_txt__link {
float: left;
max-width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
line-height: 36px;
}
/*
*
......
src/components/common/ShowAlbums.vue → src/components/common/DetailLists.vue
浏览文件 @ a651d824
<template>
<div
class="js_search_tab_cont search_tab_cont"
id="album_box"
style="display: block"
>
<div class="js_search_tab_cont search_tab_cont" 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>
<li class="playlist__header_name">{{ titles[kind][0] }}</li>
<li class="playlist__header_author">{{ titles[kind][1] }}</li>
<li class="playlist__header_other">{{ titles[kind][2] }}</li>
</ul>
<ul class="playlist__list">
<li class="playlist__item" v-for="album in albums" :key="album.id">
<li class="playlist__item" v-for="l in lists" :key="l.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"
:alt="l.name"
:src="l.img"
/></a>
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt"
><a class="js_album" :title="album.name">{{
album.name
}}</a></span
>
<span class="playlist__title_txt">
<a class="js_album" :title="l.name">{{ l.name }}</a>
</span>
</h4>
<div class="playlist__author">
<a class="js_singer" :title="album.artistsText">{{
album.artistsText
<a class="js_singer" v-if="kind == 0" :title="l.artistsText">{{
l.artistsText
}}</a>
<a class="js_singer" v-else-if="kind == 1" :title="l.artistsText">{{
l.creatorName
}}</a>
</div>
<div class="playlist__other" v-if="kind == 0">
{{ l.publishTime }}
</div>
<div class="playlist__other" v-else-if="kind == 1">
{{ l.playCount }}
</div>
<div class="playlist__other">{{ album.publishTime }}</div>
</li>
</ul>
</div>
......@@ -43,11 +45,21 @@
<script>
export default {
data() {
return {
titles: {
0: ["专辑", "歌手", "发行时间"],
1: ["歌单", "创建人", "播放量"],
},
};
},
props: {
albums: {
lists: {
type: Array,
default: [],
},
// 0: album, 1: playlist
kind: { default: 0 },
},
};
</script>
......
src/components/common/ShowPlaylist.vue 已删除 100644 → 0
浏览文件 @ 04dadadf
<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/views/musicLibrary/SearchResultDetail.vue
浏览文件 @ a651d824
......@@ -21,11 +21,15 @@
<!-- song -->
<show-songs :songs="songs" v-if="selectedType == 1" />
<!-- album -->
<show-albums :albums="albums" v-if="selectedType == 10" />
<detail-lists :lists="albums" v-if="selectedType == 10" />
<!-- mv -->
<show-mvs :mvs="mvs" v-if="selectedType == 1004" />
<!-- playlist -->
<show-playlist :playlists="playlists" v-if="selectedType == 1000" />
<detail-lists
:lists="playlists"
:kind="1"
v-if="selectedType == 1000"
/>
<!-- user -->
<div
class="js_search_tab_cont search_tab_cont"
......@@ -83,10 +87,9 @@
<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 ShowLyrics from "components/common/ShowLyrics";
import DetailLists from "components/common/DetailLists";
import ModListMenu from "components/common/ModListMenu";
import { getSearchResult } from "api";
import {
......@@ -151,30 +154,19 @@ export default {
},
components: {
ShowSongs,
ShowAlbums,
ShowMvs,
ShowPlaylist,
ShowLyrics,
DetailLists,
ModListMenu,
},
};
</script>
<style scoped>
button,
dd,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
li,
ol,
p,
pre,
td,
th,
......@@ -182,139 +174,6 @@ ul {
margin: 0;
padding: 0;
}
.mod_search {
position: relative;
height: 247px;
background-position: 50%;
background-size: cover;
}
.icon_txt {
font: 0/0 a;
}
button {
cursor: pointer;
}
.mod_tab {
position: relative;
zoom: 1;
border-bottom: 1px solid #f7f7f7;
margin-bottom: 30px;
}
.mod_tab,
.mod_tab__item {
height: 56px;
line-height: 56px;
}
.mod_tab__current {
color: #31c27c;
}
.mod_tab__item {
position: relative;
float: left;
font-size: 16px;
overflow: hidden;
margin-right: 55px;
}
.mod_tab,
.mod_tab__item {
height: 56px;
line-height: 56px;
}
.mod_btn__icon_play {
width: 13px;
height: 16px;
background-position: -60px -220px;
}
.mod_playlist_text {
zoom: 1;
font-size: 14px;
}
.mod_lyric_list,
.mod_mv_list,
.mod_playlist_text,
.mod_songlist {
padding-bottom: 40px;
}
.singer_list__item {
position: relative;
height: 80px;
display: table;
width: 100%;
}
.singer_list__title {
width: 40%;
min-width: 280px;
font-weight: 400;
text-indent: 20px;
overflow: hidden;
line-height: 80px;
padding-left: 20px;
font-size: 0;
}
.singer_list__cover {
position: relative;
float: left;
width: 60px;
height: 60px;
margin-top: 10px;
}
.singer_list__pic {
height: 100%;
object-fit: cover;
}
.singer_list__pic {
display: block;
width: 100%;
min-height: 50px;
border-radius: 50%;
}
.singer_list__title_txt {
float: left;
max-width: 310px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.singer_list__user_txt {
color: #999;
}
.singer_list__count,
.singer_list__other,
.singer_list__playlist,
.singer_list__title {
display: table-cell;
height: 80px;
vertical-align: middle;
box-sizing: border-box;
}
.singer_list__playlist,
.singer_list__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.singer_list__playlist {
width: 22%;
padding-left: 20px;
}
.singer_list__count {
width: 22%;
padding-left: 15px;
}
.singer_list__other {
width: 122px;
}
.singer_list__btn_focus {
display: block;
width: 122px;
text-align: center;
margin-right: 20px;
}
.mod_btn,
.mod_btn_green {
......
src/views/my/Like.vue
浏览文件 @ a651d824
......@@ -14,8 +14,8 @@
>
</div>
<div class="profile_cont">
<show-playlist :playlists="playlists" v-if="selected == '歌单'" />
<show-albums :albums="albums" v-if="selected == '专辑'" />
<detail-lists :lists="playlists" :kind="1" v-if="selected == '歌单'" />
<detail-lists :lists="albums" v-if="selected == '专辑'" />
<show-mvs :mvs="mvs" v-if="selected == '视频'" />
</div>
</div>
......@@ -23,8 +23,7 @@
<script>
import ShowPlaylist from "components/common/ShowPlaylist";
import ShowAlbums from "components/common/ShowAlbums";
import DetailLists from "components/common/DetailLists";
import ShowMvs from "components/common/ShowMvs";
import { getUserPlaylists, getCollectedAlbum, getCollectedMvs } from "api";
import { createPlaylists, createAlbums, createMvs } from "common/utils";
......@@ -77,8 +76,7 @@ export default {
},
},
components: {
ShowPlaylist,
ShowAlbums,
DetailLists,
ShowMvs,
},
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或