Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zacharyzlj
Yz Music
提交
488c818a
Y
Yz Music
项目概览
zacharyzlj
/
Yz Music
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Y
Yz Music
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
488c818a
编写于
2月 11, 2021
作者:
Z
Zachary
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: add songer simple detail page
上级
4ee05347
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
376 addition
and
67 deletion
+376
-67
src/App.vue
src/App.vue
+1
-0
src/api/index.js
src/api/index.js
+2
-0
src/assets/css/base.css
src/assets/css/base.css
+10
-0
src/router/index.js
src/router/index.js
+3
-1
src/views/musicLibrary/SongerDetail.vue
src/views/musicLibrary/SongerDetail.vue
+297
-0
src/views/musicLibrary/Songers.vue
src/views/musicLibrary/Songers.vue
+63
-66
未找到文件。
src/App.vue
浏览文件 @
488c818a
...
@@ -15,6 +15,7 @@ export default {
...
@@ -15,6 +15,7 @@ export default {
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
@import
"./assets/css/coustom.css"
;
@import
"./assets/css/coustom.css"
;
@import
"./assets/css/base.css"
;
#app
{
#app
{
font-family
:
Avenir
,
Helvetica
,
Arial
,
sans-serif
;
font-family
:
Avenir
,
Helvetica
,
Arial
,
sans-serif
;
...
...
src/api/index.js
浏览文件 @
488c818a
...
@@ -13,3 +13,5 @@ export const getSongers = (initial, type, area, page) => {
...
@@ -13,3 +13,5 @@ export const getSongers = (initial, type, area, page) => {
};
};
return
requset
.
get
(
"
/artist/list
"
,
{
params
:
params
});
return
requset
.
get
(
"
/artist/list
"
,
{
params
:
params
});
};
};
export
const
getUserDetail
=
id
=>
requset
.
get
(
`/user/detail?uid=
${
id
}
`
);
src/assets/css/base.css
0 → 100644
浏览文件 @
488c818a
body
,
html
{
padding
:
0
;
margin
:
0
;
}
a
{
color
:
#000
;
text-decoration
:
none
;
}
src/router/index.js
浏览文件 @
488c818a
...
@@ -8,6 +8,7 @@ const Ranking = () => import("views/musicLibrary/Ranking");
...
@@ -8,6 +8,7 @@ const Ranking = () => import("views/musicLibrary/Ranking");
const
Classified
=
()
=>
import
(
"
views/musicLibrary/Classified
"
);
const
Classified
=
()
=>
import
(
"
views/musicLibrary/Classified
"
);
const
Radions
=
()
=>
import
(
"
views/musicLibrary/Radions
"
);
const
Radions
=
()
=>
import
(
"
views/musicLibrary/Radions
"
);
const
MV
=
()
=>
import
(
"
views/musicLibrary/MV
"
);
const
MV
=
()
=>
import
(
"
views/musicLibrary/MV
"
);
const
SongerDetail
=
()
=>
import
(
"
views/musicLibrary/SongerDetail
"
);
const
My
=
()
=>
import
(
"
views/My
"
);
const
My
=
()
=>
import
(
"
views/My
"
);
...
@@ -27,7 +28,8 @@ const routes = [
...
@@ -27,7 +28,8 @@ const routes = [
{
path
:
"
ranking
"
,
component
:
Ranking
},
{
path
:
"
ranking
"
,
component
:
Ranking
},
{
path
:
"
classified
"
,
component
:
Classified
},
{
path
:
"
classified
"
,
component
:
Classified
},
{
path
:
"
radions
"
,
component
:
Radions
},
{
path
:
"
radions
"
,
component
:
Radions
},
{
path
:
"
mv
"
,
component
:
MV
}
{
path
:
"
mv
"
,
component
:
MV
},
{
path
:
"
songer-detail
"
,
name
:
"
songer-detail
"
,
component
:
SongerDetail
}
]
]
},
},
{
{
...
...
src/views/musicLibrary/SongerDetail.vue
0 → 100644
浏览文件 @
488c818a
<
template
>
<div
class=
"g-bd"
>
<div
class=
"g-wrap p-prf"
>
<dl
class=
"m-proifo f-cb"
id=
"head-box"
>
<dt
class=
"f-pr"
id=
"ava"
>
<img
:src=
"userObj.profile.avatarUrl"
>
</dt>
<dd>
<div
class=
"name f-cb"
>
<div
class=
"f-cb"
>
<h2
id=
"j-name-wrap"
class=
"wrap f-fl f-cb wrap-3"
>
<span
class=
"tit f-ff2 s-fc0 f-thide"
>
{{
userObj
.
profile
.
artistName
}}
</span>
</h2>
</div>
<p
class=
"djp f-fs1 s-fc3"
>
{{
userObj
.
identify
.
imageDesc
}}
</p>
</div>
<ul
class=
"data s-fc3 f-cb"
id=
"tab-box"
>
<li
class=
"fst"
>
<a
href=
"/user/event?id=97137413"
>
<strong
id=
"event_count"
>
{{
userObj
.
profile
.
eventCount
}}
</strong>
<span>
动态
</span>
</a>
</li>
<li>
<a
href=
"/user/follows?id=97137413"
>
<strong
id=
"follow_count"
>
{{
userObj
.
profile
.
follows
}}
</strong>
<span>
关注
</span>
</a>
</li>
<li>
<a
href=
"/user/fans?id=97137413"
>
<strong
id=
"fan_count"
>
{{
userObj
.
profile
.
followeds
}}
</strong>
<span>
粉丝
</span>
</a>
</li>
</ul>
<div
class=
"inf s-fc3"
>
<span>
签名:
{{
userObj
.
profile
.
signature
}}
</span>
</div>
</dd>
</dl>
</div>
</div>
</
template
>
<
script
>
import
{
getUserDetail
}
from
'
api
'
;
export
default
{
data
()
{
return
{
activeName
:
'
first
'
,
id
:
this
.
$route
.
query
.
id
,
accountId
:
this
.
$route
.
query
.
accountId
,
userObj
:
null
,
};
},
created
()
{
getUserDetail
(
this
.
accountId
).
then
(
res
=>
{
console
.
log
(
res
)
this
.
userObj
=
res
.
data
})
},
methods
:
{
handleClick
(
tab
,
event
)
{
console
.
log
(
tab
,
event
);
}
}
}
</
script
>
<
style
scoped
>
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
ul
,
ol
,
li
,
dl
,
dt
,
dd
,
header
,
menu
,
section
,
p
,
input
,
td
,
th
,
ins
{
padding
:
0
;
margin
:
0
;
}
.g-bd
,
.g-bd1
,
.g-bd2
,
.g-bd3
,
.g-bd4
,
.g-bd5
,
.g-bd6
,
.g-bd7
{
width
:
980px
;
min-height
:
700px
;
_height
:
700px
;
margin
:
0
auto
;
background-color
:
#fff
;
border
:
1px
solid
#d3d3d3
;
border-width
:
0
1px
;
}
.g-wrap
{
padding
:
40px
;
}
.m-proifo
{
margin-bottom
:
43px
;
}
.m-proifo
dt
{
float
:
left
;
width
:
188px
;
margin-right
:
40px
;
}
.f-pr
{
position
:
relative
;
zoom
:
1
;
}
.m-proifo
dt
img
{
display
:
block
;
width
:
180px
;
height
:
180px
;
padding
:
3px
;
background
:
#fff
;
border
:
1px
solid
#d5d5d5
;
}
.m-proifo
dd
{
float
:
left
;
width
:
670px
;
}
.m-proifo
.name
{
padding-bottom
:
12px
;
margin-bottom
:
10px
;
border-bottom
:
1px
solid
#ddd
;
}
.m-proifo
.name
.wrap
{
padding-bottom
:
3px
;
}
.f-fl
{
float
:
left
;
}
.m-proifo
.name
.wrap-3
.tit
{
max-width
:
260px
;
}
.m-proifo
.name
.tit
{
float
:
left
;
margin-top
:
3px
;
font-size
:
22px
;
font-weight
:
normal
;
line-height
:
30px
;
}
.s-fc0
,
a
.s-fc0
:hover
{
color
:
#000
;
}
.f-thide
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
word-wrap
:
normal
;
}
.f-ff2
{
font-family
:
"Microsoft Yahei"
,
Arial
,
Helvetica
,
sans-serif
;
}
.m-proifo
.name
.btn
{
float
:
left
;
margin
:
4px
0
0
15px
;
}
.u-btn-6
,
.u-btn-ygz
{
width
:
70px
;
height
:
31px
;
background-position
:
0
-919px
;
}
.u-btn
{
display
:
inline-block
;
}
.u-btn-5
{
width
:
81px
;
height
:
31px
;
background-position
:
0
-955px
;
}
.u-btn-8
{
width
:
40px
;
height
:
31px
;
padding-left
:
30px
;
background-position
:
0
-720px
;
color
:
#fff
;
line-height
:
30px
;
}
.m-proifo
.name
.djp
:first-of-type
{
margin-top
:
8px
;
}
.m-proifo
.name
.djp
{
margin-top
:
6px
;
line-height
:
20px
;
float
:
left
;
}
.f-fs1
{
font-size
:
14px
;
}
.m-proifo
.data
{
height
:
41px
;
margin-bottom
:
15px
;
}
.m-proifo
.data
a
{
display
:
inline-block
;
*
display
:
inline
;
position
:
relative
;
zoom
:
1
;
color
:
#666
;
}
.m-proifo
.data
a
:hover
{
color
:
#31c27c
;
}
.m-proifo
.data
strong
{
display
:
block
;
margin-top
:
-4px
;
font-size
:
24px
;
font-weight
:
normal
;
cursor
:
pointer
;
}
.m-proifo
.data
.fst
{
padding-left
:
0
;
border-left
:
none
;
}
.m-proifo
.data
li
{
float
:
left
;
padding
:
0
40px
0
20px
;
border-left
:
1px
solid
#ddd
;
}
.f-cb
::after
{
clear
:
both
;
content
:
"."
;
display
:
block
;
height
:
0
;
visibility
:
hidden
;
}
.m-proifo
.inf
{
margin-bottom
:
5px
;
line-height
:
21px
;
float
:
left
;
font-size
:
12px
;
}
li
,
s
{
list-style
:
none
;
}
a
{
color
:
#333
;
}
</
style
>
src/views/musicLibrary/Songers.vue
浏览文件 @
488c818a
...
@@ -39,9 +39,10 @@
...
@@ -39,9 +39,10 @@
<ul
class=
"singer_list_txt"
>
<ul
class=
"singer_list_txt"
>
<li
class=
"singer_list_txt__item"
v-for=
"item in artists"
:key=
"item.id"
>
<li
class=
"singer_list_txt__item"
v-for=
"item in artists"
:key=
"item.id"
>
<
a
href=
"javascript:;"
<
router-link
href=
"javascript:;"
class=
"singer_list_txt__link js_singer"
class=
"singer_list_txt__link js_singer"
title=
"item.name"
>
{{
item
.
name
}}
</a>
:to=
"
{name: 'songer-detail', query: {id: item.id, accountId: item.accountId}}"
title="item.name">
{{
item
.
name
}}
</router-link>
</li>
</li>
</ul>
</ul>
</div>
</div>
...
@@ -161,77 +162,73 @@ export default {
...
@@ -161,77 +162,73 @@ export default {
</
script
>
</
script
>
<
style
scoped
>
<
style
scoped
>
.main
{
.main
{
z-index
:
2
;
z-index
:
2
;
}
}
.main
,
.section_inner
{
.main
,
max-width
:
1200px
;
.section_inner
{
margin
:
0
auto
;
max-width
:
1200px
;
position
:
relative
;
margin
:
0
auto
;
}
position
:
relative
;
.mod_singer_tag
{
}
background-color
:
#fbfbfd
;
.mod_singer_tag
{
padding
:
34px
0
17px
40px
;
background-color
:
#fbfbfd
;
margin
:
30px
0
20px
;
padding
:
34px
0
17px
40px
;
}
margin
:
30px
0
20px
;
}
.singer_tag__list
{
padding-bottom
:
3px
;
height
:
auto
;
clear
:
both
;
overflow
:
hidden
;
}
.singer_tag__item--select
,
.singer_tag__item--select
:hover
{
background-color
:
#31c27c
;
color
:
#fff
;
}
.singer_tag__item--all
{
.singer_tag__list
{
margin-right
:
28px
;
padding-bottom
:
3px
;
}
height
:
auto
;
clear
:
both
;
overflow
:
hidden
;
}
.singer_tag__item
{
.singer_tag__item--select
,
height
:
26px
;
.singer_tag__item--select
:hover
{
line-height
:
27px
;
background-color
:
#31c27c
;
overflow
:
hidden
;
color
:
#fff
;
}
}
.singer_tag__item
{
.singer_tag__item--all
{
float
:
left
;
margin-right
:
28px
;
padding
:
0
8px
;
}
margin
:
0
12px
14px
0
;
margin-right
:
12px
;
}
a
{
.singer_tag__item
{
color
:
#000
;
height
:
26px
;
text-decoration
:
none
;
line-height
:
27px
;
}
overflow
:
hidden
;
}
.singer_list_txt
{
.singer_tag__item
{
margin-right
:
-20px
;
float
:
left
;
overflow
:
hidden
;
padding
:
0
8px
;
margin-bottom
:
60px
;
margin
:
0
12px
14px
0
;
}
margin-right
:
12px
;
}
.singer_list_txt__item
{
.singer_list_txt
{
float
:
left
;
margin-right
:
-20px
;
width
:
20%
;
overflow
:
hidden
;
}
margin-bottom
:
60px
;
}
li
{
.singer_list_txt__item
{
list-style
:
none
;
float
:
left
;
}
width
:
20%
;
}
.singer_list_txt__link
{
li
{
float
:
left
;
list-style
:
none
;
max-width
:
90%
;
}
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
font-size
:
14px
;
line-height
:
36px
;
}
.singer_list_txt__link
{
float
:
left
;
max-width
:
90%
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
font-size
:
14px
;
line-height
:
36px
;
}
</
style
>
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录