-
-
+
+
+
+
+
+
{{ index + 1 }}
+
+
+
+
{{ item.name }}
+
{{ item.author }}
+
+
{{ $duration(item.duration) }}
+
{{ $likeNum(item.use_count) }}人使用
+
+
+
+
+
@@ -43,28 +70,40 @@ export default {
contentIndex: 0,
hotList: [
{
- name: '阳光宅男',
+ name: '阳光宅男阳光宅男阳光宅男阳光宅男阳光宅男',
cover: '',
author: '周杰伦',
- duration: 60,
- hot: 37441000,
- is_collect: false
+ duration: 99,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
},
{
name: '阳光宅男',
cover: '',
author: '周杰伦',
duration: 60,
- hot: 37441000,
- is_collect: false
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
},
{
name: '阳光宅男',
cover: '',
author: '周杰伦',
duration: 60,
- hot: 37441000,
- is_collect: false
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '阳光宅男',
+ cover: '',
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
},
]
}
@@ -72,7 +111,19 @@ export default {
computed: {},
created() {
},
- methods: {}
+ methods: {
+ toggleCollect(item) {
+ item.is_collect = !item.is_collect
+ if (item.is_collect) {
+ this.$notice('收藏成功')
+ } else {
+ this.$notice('取消收藏')
+ }
+ },
+ togglePlay(item) {
+ item.is_play = !item.is_play
+ }
+ }
}
@@ -91,6 +142,99 @@ export default {
.content {
padding-top: 6rem;
+
+ .list {
+ .item {
+ padding: 1rem 1.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .left {
+ width: 73%;
+ display: flex;
+ align-items: center;
+
+ .rank {
+ width: 1.8rem;
+ height: 1.8rem;
+ line-height: 1.8rem;
+ text-align: center;
+ margin-right: 1.5rem;
+ }
+
+ .music {
+ display: flex;
+
+ .cover-wrapper {
+ margin-right: 1rem;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .play {
+ width: 3rem;
+ height: 3rem;
+ position: absolute;
+ }
+
+ .cover {
+ border-radius: .2rem;
+ @width: 6rem;
+ width: @width;
+ height: @width;
+ }
+ }
+
+ .desc {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .name {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 60%;
+ }
+
+ .author, .bottom {
+ font-size: 1.2rem;
+ color: @second-text-color;
+ }
+
+ .bottom {
+ display: flex;
+
+ .duration {
+ margin-right: 1.4rem;
+ position: relative;
+
+ &:after {
+ content: '';
+ position: absolute;
+ width: 1.5px;
+ height: 1.5px;
+ background: white;
+ right: -7px;
+ top: 7px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .right {
+ img {
+ width: 2rem;
+ height: 2rem;
+ margin-left: 2rem;
+ }
+ }
+ }
+ }
}
}
diff --git a/src/pages/me/VideoDetail.vue b/src/pages/me/VideoDetail.vue
index 0a347ab..833a75d 100644
--- a/src/pages/me/VideoDetail.vue
+++ b/src/pages/me/VideoDetail.vue
@@ -23,7 +23,7 @@
- 
+ 
+ 
收藏
+ 
收藏
+ 
+ 
+ 
+ 
+ 
+ 
- 
+ 