+
-
- 
- 
- 
-
-
-
- {{ index + 1 }}
-
-
+
@@ -63,15 +126,16 @@ export default {
name: "MusicRankList",
components: {},
props: {
- modelValue: false
+ modelValue: false,
},
data() {
return {
contentIndex: 0,
hotList: [
{
- name: '阳光宅男阳光宅男阳光宅男阳光宅男阳光宅男',
- cover: '',
+ name: '龙卷风',
+ "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+ cover: require('../../assets/img/music-cover/1.png'),
author: '周杰伦',
duration: 99,
use_count: 37441000,
@@ -79,8 +143,35 @@ export default {
is_play: false,
},
{
- name: '阳光宅男',
- cover: '',
+ name: '爱在西元前',
+ cover: require('../../assets/img/music-cover/2.png'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '蜗牛',
+ cover: require('../../assets/img/music-cover/3.png'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '半岛铁盒',
+ cover: require('../../assets/img/music-cover/4.png'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '轨迹',
+ cover: require('../../assets/img/music-cover/5.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
@@ -88,8 +179,8 @@ export default {
is_play: false,
},
{
- name: '阳光宅男',
- cover: '',
+ name: '七里香',
+ cover: require('../../assets/img/music-cover/6.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
@@ -97,19 +188,120 @@ export default {
is_play: false,
},
{
- name: '阳光宅男',
- cover: '',
+ name: '发如雪',
+ cover: require('../../assets/img/music-cover/7.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
- ]
+ {
+ name: '霍元甲',
+ cover: require('../../assets/img/music-cover/8.png'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '千里之外(周杰伦/费玉清)',
+ cover: require('../../assets/img/music-cover/9.png'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '菊花台',
+ cover: require('../../assets/img/music-cover/10.png'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '不能说的秘密',
+ cover: require('../../assets/img/music-cover/11.png'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '牛仔很忙',
+ cover: require('../../assets/img/music-cover/12.png'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '给我一首歌的时间',
+ cover: require('../../assets/img/music-cover/13.jpg'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '烟花易冷',
+ cover: require('../../assets/img/music-cover/14.jpg'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '惊叹号',
+ cover: require('../../assets/img/music-cover/15.jpg'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '明明就',
+ cover: require('../../assets/img/music-cover/16.jpg'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '算什么男人',
+ cover: require('../../assets/img/music-cover/17.jpg'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ {
+ name: '告白气球',
+ cover: require('../../assets/img/music-cover/18.jpg'),
+ author: '周杰伦',
+ duration: 60,
+ use_count: 37441000,
+ is_collect: false,
+ is_play: false,
+ },
+ ],
+ updateTime: Date.now()
}
},
computed: {},
created() {
+ this.hotList = this.hotList.concat(this.hotList).concat(this.hotList).concat(this.hotList)
},
methods: {
toggleCollect(item) {
@@ -140,97 +332,172 @@ export default {
color: white;
font-size: 1.4rem;
+ #BaseHeader {
+ opacity: 0;
+ }
+
+ .l-header {
+ position: relative;
+ display: flex;
+ justify-content: center;
+
+ img {
+ width: 100vw;
+ }
+
+ .update-time {
+ position: absolute;
+ background: rgba(172, 107, 251, .5);
+ bottom: 2rem;
+ border-radius: .1rem;
+ padding: .2rem 3rem;
+ }
+ }
+
.content {
- padding-top: 6rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .indicator-ctn {
+ width: 85%;
+ }
.list {
.item {
- padding: 1rem 1.5rem;
+ padding: 2rem 1.5rem;
+ padding-bottom: 0;
display: flex;
- justify-content: space-between;
- align-items: center;
+ flex-direction: column;
- .left {
- width: 73%;
+ .top {
display: flex;
align-items: center;
- .rank {
- width: 1.8rem;
- height: 1.8rem;
- line-height: 1.8rem;
- text-align: center;
- margin-right: 1.5rem;
+ .rank-wrapper {
+ .rank {
+ width: 1.8rem;
+ height: 1.8rem;
+ line-height: 1.8rem;
+ text-align: center;
+ margin-right: 1.5rem;
+ }
}
- .music {
+ .right {
+ flex: 1;
display: flex;
+ align-items: center;
+ justify-content: space-between;
- .cover-wrapper {
- margin-right: 1rem;
- position: relative;
+ .music {
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;
- }
- }
+ .cover-wrapper {
+ margin-right: 1rem;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
- .desc {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- .name {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- max-width: 60%;
- }
+ .play {
+ width: 3rem;
+ height: 3rem;
+ position: absolute;
+ }
- .author, .bottom {
- font-size: 1.2rem;
- color: @second-text-color;
+ .cover {
+ border-radius: .2rem;
+ @width: 6rem;
+ width: @width;
+ height: @width;
+ }
}
- .bottom {
+ .desc {
display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .name {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 40vw;
+ }
+
+ .author, .desc-bottom {
+ font-size: 1.2rem;
+ color: @second-text-color;
+ }
+
+ .desc-bottom {
+ display: flex;
+
+ .duration {
+ margin-right: 1.4rem;
+ position: relative;
- .duration {
- margin-right: 1.4rem;
- position: relative;
-
- &:after {
- content: '';
- position: absolute;
- width: 1.5px;
- height: 1.5px;
- background: white;
- right: -7px;
- top: 7px;
+ &:after {
+ content: '';
+ position: absolute;
+ width: 1.5px;
+ height: 1.5px;
+ border-radius: 50%;
+ background: white;
+ right: -7px;
+ top: 7px;
+ }
}
}
}
}
+
+ .option {
+ img {
+ width: 2rem;
+ height: 2rem;
+ margin-left: 2rem;
+ }
+ }
+
}
}
- .right {
- img {
- width: 2rem;
- height: 2rem;
- margin-left: 2rem;
+ .bottom {
+ background: @second-btn-color-tran;
+ padding: 1rem 1.5rem;
+ margin-left: 3.3rem;
+ margin-top: 1.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+
+ .arrow {
+ width: 0;
+ height: 0;
+ border: .8rem solid transparent;
+ border-bottom: .8rem solid @second-btn-color-tran;
+ position: absolute;
+ left: 2rem;
+ top: -1.5rem;
+ }
+
+ .left {
+ display: flex;
+
+ .avatar {
+ width: 3.5rem;
+ height: 3.5rem;
+ margin-right: 1rem;
+ border-radius: 50%;
+ }
+ }
+
+ .button {
+ width: 6rem;
+ height: 2.5rem;
}
}
}
diff --git a/src/utils/global-methods.js b/src/utils/global-methods.js
index c78c6c6..c4831d3 100644
--- a/src/utils/global-methods.js
+++ b/src/utils/global-methods.js
@@ -300,11 +300,15 @@ export default {
$dateFormat(val, type) {
if (!val) return
- if (val.length === 10) {
- val += '000'
- }
- if (typeof val === 'string' && (val.length === 10 || val.length === 13)) {
- val = Number(val)
+ if (typeof val === 'number') {
+
+ }else {
+ if (val.length === 10) {
+ val += '000'
+ }
+ if (typeof val === 'string' && (val.length === 10 || val.length === 13)) {
+ val = Number(val)
+ }
}
switch (type) {
case 'Y':
- 
- 
- 
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+ {{ $duration(item.duration) }}
+ {{ $likeNum(item.use_count) }}人使用
+
+ 
+ 
+ 
+
+
+
+
+
+
关注
+
+
+
- {{ item.name }}
-
-
+
-
+ {{ $duration(item.duration) }}
- {{ $likeNum(item.use_count) }}人使用
+ 周
+ 粉丝：83.4w
+
+
+
+
-
+
+
+
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
{{ $duration(item.duration) }}
+ {{ $likeNum(item.use_count) }}人使用
+
+
+
+
+
+
+
+
-
-
-
+
-
-
+
+ 关注
+
+
+
+
+
+
+ 周
+ 粉丝：83.4w
+