提交 60b9bdce 编写于 作者: Z Zachary

Introducing element-plus on demand

* remove some useless html
* playlists page add loading
上级 cb22d72f
module.exports = { module.exports = {
presets: [ presets: ["@vue/cli-plugin-babel/preset"],
'@vue/cli-plugin-babel/preset' plugins: [
[
"import",
{
libraryName: "element-plus",
customStyleName: name => {
// 由于 customStyleName 在配置中被声明的原因,`style: true` 会被直接忽略掉,
// 如果你需要使用 scss 源文件,把文件结尾的扩展名从 `.css` 替换成 `.scss` 就可以了
return `element-plus/lib/theme-chalk/${name}.css`;
}
}
]
] ]
} };
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0", "@vue/compiler-sfc": "^3.0.0",
"@vue/test-utils": "^2.0.0-0", "@vue/test-utils": "^2.0.0-0",
"babel-plugin-import": "^1.13.3",
"chai": "^4.1.2", "chai": "^4.1.2",
"sass": "^1.26.5", "sass": "^1.26.5",
"sass-loader": "^8.0.2" "sass-loader": "^8.0.2"
...@@ -3265,6 +3266,16 @@ ...@@ -3265,6 +3266,16 @@
"object.assign": "^4.1.0" "object.assign": "^4.1.0"
} }
}, },
"node_modules/babel-plugin-import": {
"version": "1.13.3",
"resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz",
"integrity": "sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==",
"dev": true,
"dependencies": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/runtime": "^7.0.0"
}
},
"node_modules/babel-plugin-syntax-object-rest-spread": { "node_modules/babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0", "version": "6.13.0",
"resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-object-rest-spread/download/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", "resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-object-rest-spread/download/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
...@@ -19337,6 +19348,16 @@ ...@@ -19337,6 +19348,16 @@
"object.assign": "^4.1.0" "object.assign": "^4.1.0"
} }
}, },
"babel-plugin-import": {
"version": "1.13.3",
"resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz",
"integrity": "sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==",
"dev": true,
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/runtime": "^7.0.0"
}
},
"babel-plugin-syntax-object-rest-spread": { "babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0", "version": "6.13.0",
"resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-object-rest-spread/download/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", "resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-object-rest-spread/download/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<i class="data__cover_mask" v-if="cardType == 'album'"></i> <i class="data__cover_mask" v-if="cardType == 'album'"></i>
</span> </span>
<div class="data__cont"> <div class="data__cont">
<div class="data__name js_box"> <div class="data__name">
<h1 id="p_name_show" class="data__name_txt" :title="obj.name"> <h1 id="p_name_show" class="data__name_txt" :title="obj.name">
{{ obj.name }} {{ obj.name }}
</h1> </h1>
...@@ -35,26 +35,21 @@ ...@@ -35,26 +35,21 @@
<div class="data__desc_txt" id="short_desc"> <div class="data__desc_txt" id="short_desc">
{{ obj.desc }} {{ obj.desc }}
</div> </div>
<a class="js_desc" @click="moreClick">[更多]</a> <a @click="moreClick">[更多]</a>
</div> </div>
<!-- Info --> <!-- Info -->
<ul class="data__info" v-if="cardType != 'songer'"> <ul class="data__info" v-if="cardType != 'songer'">
<li class="data_info__item js_box" style="display: "> <li class="data_info__item" style="display: ">
<div class="data_tag_box" v-if="obj.tags"> <div class="data_tag_box" v-if="obj.tags">
标签:<span id="choosebox1"> 标签:<span id="choosebox1">
<a <a class="data_info__tags" v-for="tag in obj.tags" :key="tag"
class="data_info__tags js_jump"
v-for="tag in obj.tags"
:key="tag"
>{{ tag }} >{{ tag }}
</a> </a>
</span> </span>
</div> </div>
</li> </li>
<li class="data_info__item" v-if="obj.albumName"> <li class="data_info__item" v-if="obj.albumName">
专辑:<a class="js_album" :title="obj.albumName">{{ 专辑:<a :title="obj.albumName">{{ obj.albumName }}</a>
obj.albumName
}}</a>
</li> </li>
<li class="data_info__item" v-if="obj.type">分类:{{ obj.type }}</li> <li class="data_info__item" v-if="obj.type">分类:{{ obj.type }}</li>
<li class="data_info__item" v-if="obj.version"> <li class="data_info__item" v-if="obj.version">
...@@ -105,7 +100,7 @@ ...@@ -105,7 +100,7 @@
</ul> </ul>
<div class="data__actions" v-if="cardType != 'songer'"> <div class="data__actions" v-if="cardType != 'songer'">
<a class="mod_btn_green js_all_play" @click="btnClick('all')"> <a class="mod_btn_green" @click="btnClick('all')">
<i class="mod_btn_green__icon_play"></i> <i class="mod_btn_green__icon_play"></i>
{{ cardType == "song" ? "播放" : "播放全部" }} {{ cardType == "song" ? "播放" : "播放全部" }}
</a> </a>
...@@ -116,11 +111,7 @@ ...@@ -116,11 +111,7 @@
></i ></i
>收藏 >收藏
</a> </a>
<a <a class="mod_btn" href="#comment_box" @click="btnClick('comment')">
class="mod_btn js_into_comment"
href="#comment_box"
@click="btnClick('comment')"
>
<i class="mod_btn__icon_comment"></i>评论({{ commentCount }}) <i class="mod_btn__icon_comment"></i>评论({{ commentCount }})
</a> </a>
<a <a
...@@ -132,7 +123,7 @@ ...@@ -132,7 +123,7 @@
</a> </a>
</div> </div>
<div class="data__actions" v-if="cardType == 'songer'"> <div class="data__actions" v-if="cardType == 'songer'">
<a class="mod_btn_green js_singer_radio" @click="btnClick('hot')"> <a class="mod_btn_green" @click="btnClick('hot')">
<i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲 <i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲
</a> </a>
</div> </div>
......
...@@ -27,7 +27,6 @@ ...@@ -27,7 +27,6 @@
<h4 class="playlist__title"> <h4 class="playlist__title">
<span class="playlist__title_txt"> <span class="playlist__title_txt">
<a <a
class="js_album"
v-if="kind == 0" v-if="kind == 0"
:title="l.name" :title="l.name"
@click="gotoAlbumDetail(l.id)" @click="gotoAlbumDetail(l.id)"
...@@ -35,7 +34,6 @@ ...@@ -35,7 +34,6 @@
{{ l.name }} {{ l.name }}
</a> </a>
<a <a
class="js_album"
v-else-if="kind == 1" v-else-if="kind == 1"
:title="l.name" :title="l.name"
@click="gotoPlaylistDetail(l.id)" @click="gotoPlaylistDetail(l.id)"
...@@ -48,10 +46,8 @@ ...@@ -48,10 +46,8 @@
<mod-list-menu :id="l.id" :kind="kind + 1" /> <mod-list-menu :id="l.id" :kind="kind + 1" />
<div class="playlist__author"> <div class="playlist__author">
<a class="js_singer" v-if="kind == 0" :title="l.artistsText">{{ <a v-if="kind == 0" :title="l.artistsText">{{ l.artistsText }}</a>
l.artistsText <a v-else-if="kind == 1" :title="l.artistsText">{{
}}</a>
<a class="js_singer" v-else-if="kind == 1" :title="l.artistsText">{{
l.creatorName l.creatorName
}}</a> }}</a>
</div> </div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="mod_songlist"> <div class="mod_songlist">
<ul class="songlist__header"> <ul class="songlist__header">
<li class="songlist__edit songlist__edit--check sprite"> <li class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox js_check_all" /> <input type="checkbox" class="songlist__checkbox" />
</li> </li>
<li class="songlist__header_name">歌曲</li> <li class="songlist__header_name">歌曲</li>
<li class="songlist__header_author">歌手</li> <li class="songlist__header_author">歌手</li>
......
...@@ -11,10 +11,7 @@ ...@@ -11,10 +11,7 @@
> >
<div class="toplist__box"> <div class="toplist__box">
<div id="toplist__bg" :class="'toplist__bg' + idx"></div> <div id="toplist__bg" :class="'toplist__bg' + idx"></div>
<i <i class="mod_cover__icon_play" @click="playSonglist(toplist)"></i>
class="mod_cover__icon_play js_play_toplist"
@click="playSonglist(toplist)"
></i>
<i class="toplist__line"></i> <i class="toplist__line"></i>
<h3 class="toplist__hd"> <h3 class="toplist__hd">
<a href="javascript:;" class="toplist__tit" <a href="javascript:;" class="toplist__tit"
...@@ -27,7 +24,6 @@ ...@@ -27,7 +24,6 @@
<div class="toplist__number">{{ songIdx }}</div> <div class="toplist__number">{{ songIdx }}</div>
<div class="toplist__songname"> <div class="toplist__songname">
<a <a
href="javascript:;"
class="js_song" class="js_song"
:data-id="toplist[songIdx - 1].id" :data-id="toplist[songIdx - 1].id"
@click="gotoSongDetail(toplist[songIdx - 1].id)" @click="gotoSongDetail(toplist[songIdx - 1].id)"
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<span class="mod_top_login"> <span class="mod_top_login">
<!-- 登录 --> <!-- 登录 -->
<a <a
class="top_login__link js_logined" class="top_login__link"
:style="{ display: isLogged ? '' : 'none' }" :style="{ display: isLogged ? '' : 'none' }"
@mouseover="showUserPopup" @mouseover="showUserPopup"
@mouseleave="hiddenUserPopup" @mouseleave="hiddenUserPopup"
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</a> </a>
<!-- 未登录 --> <!-- 未登录 -->
<a <a
class="top_login__link js_login" class="top_login__link"
:style="{ display: isLogged ? 'none' : '' }" :style="{ display: isLogged ? 'none' : '' }"
@click="showLoginPopup" @click="showLoginPopup"
> >
...@@ -81,20 +81,10 @@ ...@@ -81,20 +81,10 @@
> >
<div class="popup__hd"> <div class="popup__hd">
<h2 class="popup__tit"> <h2 class="popup__tit">
<a <a class="popup__tit_item current" style="">扫码登陆</a>
href="javascript:;"
class="popup__tit_item current js_iframe_login"
data-type="qq"
style=""
>扫码登陆</a
>
</h2> </h2>
</div> </div>
<a <a class="popup__close" title="关闭" @click="hiddenLoginPopup"
href="javascript:;"
class="popup__close"
title="关闭"
@click="hiddenLoginPopup"
><i class="popup__icon_close"></i><i class="icon_txt">关闭</i> ><i class="popup__icon_close"></i><i class="icon_txt">关闭</i>
</a> </a>
...@@ -103,7 +93,7 @@ ...@@ -103,7 +93,7 @@
<img <img
id="frame_tips" id="frame_tips"
:src="qrurl" :src="qrurl"
class="popup_login_qq" class="popup_login_qr"
width="100%" width="100%"
height="400px;" height="400px;"
frameborder="0" frameborder="0"
...@@ -390,7 +380,7 @@ a:hover { ...@@ -390,7 +380,7 @@ a:hover {
width: 704px; width: 704px;
margin-left: -2px; margin-left: -2px;
} }
.popup_login.large .popup_login_qq { .popup_login.large .popup_login_qr {
width: 200px; width: 200px;
height: 200px; height: 200px;
margin-left: 150px; margin-left: 150px;
......
...@@ -2,9 +2,8 @@ ...@@ -2,9 +2,8 @@
<div class="mod_slide_action"> <div class="mod_slide_action">
<div class="slide_action slide_action--left"> <div class="slide_action slide_action--left">
<a <a
class="slide_action__btn slide_action__btn--left js_jump" class="slide_action__btn slide_action__btn--left"
data-p="prev" data-p="prev"
tabindex="-1"
@click="btnClick('left')" @click="btnClick('left')"
> >
<i class="icon_txt">上一页</i <i class="icon_txt">上一页</i
...@@ -13,9 +12,8 @@ ...@@ -13,9 +12,8 @@
</div> </div>
<div class="slide_action slide_action--right"> <div class="slide_action slide_action--right">
<a <a
class="slide_action__btn slide_action__btn--right js_jump" class="slide_action__btn slide_action__btn--right"
data-p="next" data-p="next"
tabindex="-1"
@click="btnClick('right')" @click="btnClick('right')"
> >
<i class="icon_txt">下一页</i <i class="icon_txt">下一页</i
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
> >
<div class="playlist__item_box"> <div class="playlist__item_box">
<div class="playlist__cover mod_cover"> <div class="playlist__cover mod_cover">
<a class="js_playlist" @click="playTheList(item.id)"> <a @click="playTheList(item.id)">
<img <img
class="playlist__pic" class="playlist__pic"
src="//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000" src="//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000"
...@@ -51,12 +51,9 @@ ...@@ -51,12 +51,9 @@
</ul> </ul>
</div> </div>
<div <div class="mod_slide_switch">
class="mod_slide_switch js_switch"
data-stat="y_new.index.playlist.pager"
>
<a <a
class="js_jump slide_switch__item" class="slide_switch__item"
:class="showNo ? '' : 'slide_switch__item--current'" :class="showNo ? '' : 'slide_switch__item--current'"
@mouseover="switchShow(false)" @mouseover="switchShow(false)"
> >
...@@ -64,7 +61,7 @@ ...@@ -64,7 +61,7 @@
<i class="icon_txt">1</i> <i class="icon_txt">1</i>
</a> </a>
<a <a
class="js_jump slide_switch__item" class="slide_switch__item"
:class="showNo ? 'slide_switch__item--current' : ''" :class="showNo ? 'slide_switch__item--current' : ''"
@mouseover="switchShow(true)" @mouseover="switchShow(true)"
> >
......
...@@ -24,14 +24,10 @@ ...@@ -24,14 +24,10 @@
<!--div class="mv_list__time">04:10</div--> <!--div class="mv_list__time">04:10</div-->
</a> </a>
<h3 class="mv_list__title"> <h3 class="mv_list__title">
<a class="js_mv" :title="mv.name" @click="gotoMvDetail(mv.id)">{{ <a :title="mv.name" @click="gotoMvDetail(mv.id)">{{ mv.name }}</a>
mv.name
}}</a>
</h3> </h3>
<p class="mv_list__singer"> <p class="mv_list__singer">
<a class="js_singer" :title="mv.artistsText">{{ <a :title="mv.artistsText">{{ mv.artistsText }}</a>
mv.artistsText
}}</a>
</p> </p>
</div> </div>
</li> </li>
......
...@@ -5,18 +5,10 @@ ...@@ -5,18 +5,10 @@
style="display: block" style="display: block"
> >
<div class="mod_songlist_toolbar"> <div class="mod_songlist_toolbar">
<a href="javascript:;" class="mod_btn js_all_play" <a class="mod_btn"><i class="mod_btn__icon_play"></i>播放全部</a>
><i class="mod_btn__icon_play"></i>播放全部</a <a class="mod_btn"><i class="mod_btn__icon_add"></i>添加到</a>
> <a class="mod_btn"><i class="mod_btn__icon_down"></i>下载</a>
<a href="javascript:;" class="mod_btn js_all_fav" <a class="mod_btn"><i class="mod_btn__icon_batch"></i>批量操作</a>
><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> </div>
<detail-songlist :songs="songs" :listType="'playlist'" /> <detail-songlist :songs="songs" :listType="'playlist'" />
</div> </div>
......
<template> <template>
<div class="singer_tag__list js_index"> <div class="singer_tag__list">
<a <a
href="javascript:;"
class="singer_tag__item" class="singer_tag__item"
v-for="(item, key) in items" v-for="(item, key) in items"
:key="key" :key="key"
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
> >
<div class="updn"> <div class="updn">
<div class="left f-fl"> <div class="left f-fl">
<a href="javascript:;" class="btn" @click="switchLock"></a> <a class="btn" @click="switchLock"></a>
</div> </div>
<div class="right f-fl"></div> <div class="right f-fl"></div>
</div> </div>
...@@ -15,16 +15,10 @@ ...@@ -15,16 +15,10 @@
<div class="hand" title="展开播放条"></div> <div class="hand" title="展开播放条"></div>
<div class="wrap" id="g_player" style="margin-left: -490px"> <div class="wrap" id="g_player" style="margin-left: -490px">
<div class="btns"> <div class="btns">
<a <a hidefocus="true" class="prv" title="上一首(ctrl+←)" @click="prev"
href="javascript:;"
hidefocus="true"
class="prv"
title="上一首(ctrl+←)"
@click="prev"
>上一首</a >上一首</a
> >
<a <a
href="javascript:;"
hidefocus="true" hidefocus="true"
class="ply j-flag" class="ply j-flag"
title="播放/暂停(p)" title="播放/暂停(p)"
...@@ -32,12 +26,7 @@ ...@@ -32,12 +26,7 @@
@click="togglePlay" @click="togglePlay"
>播放/暂停</a >播放/暂停</a
> >
<a <a hidefocus="true" class="nxt" title="下一首(ctrl+→)" @click="next"
href="javascript:;"
hidefocus="true"
class="nxt"
title="下一首(ctrl+→)"
@click="next"
>下一首</a >下一首</a
> >
</div> </div>
...@@ -78,20 +67,8 @@ ...@@ -78,20 +67,8 @@
</div> </div>
</div> </div>
<div class="oper f-fl"> <div class="oper f-fl">
<a <a hidefocus="true" class="icn icn-add j-flag" title="收藏">收藏</a>
href="javascript:;" <a hidefocus="true" class="icn icn-share" title="分享">分享</a>
hidefocus="true"
class="icn icn-add j-flag"
title="收藏"
>收藏</a
>
<a
href="javascript:;"
hidefocus="true"
class="icn icn-share"
title="分享"
>分享</a
>
</div> </div>
<div class="ctrl f-fl f-pr j-flag"> <div class="ctrl f-fl f-pr j-flag">
<div <div
......
...@@ -4,18 +4,32 @@ import "./registerServiceWorker"; ...@@ -4,18 +4,32 @@ import "./registerServiceWorker";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import "@/assets/css/base.scss"; import "@/assets/css/base.scss";
import "@/assets/css/fakeqqmusic.scss"; import "@/assets/css/fakeqqmusic.scss";
import LazyPlugin from "common/lazy-load"; import LazyPlugin from "common/lazy-load";
import {
ElIcon,
ElLoading,
ElBacktop,
ElInput,
ElAutocomplete,
ElCarousel,
ElCarouselItem,
ElPagination,
ElEmpty
} from "element-plus";
createApp(App) createApp(App)
.use(store) .use(store)
.use(router) .use(router)
.use(ElementPlus)
.use(LazyPlugin) .use(LazyPlugin)
.use(ElIcon)
.use(ElLoading)
.use(ElBacktop)
.use(ElInput)
.use(ElAutocomplete)
.use(ElCarousel)
.use(ElCarouselItem)
.use(ElPagination)
.use(ElEmpty)
.mount("#app"); .mount("#app");
// import { getBanner } from "./api";
// getBanner().then(res => console.log(res));
<template> <template>
<div class="main"> <div class="main" v-loading="loading">
<!-- 标签筛选 --> <!-- 标签筛选 -->
<div class="mod_playlist_tag" id="taglist"> <div class="mod_playlist_tag" id="taglist">
<div class="js_normal" style="display: "> <div style="display: ">
<div v-for="(key, idx) in categories" :key="key"> <div v-for="(key, idx) in categories" :key="key">
<div <div
class="playlist_tag__list" class="playlist_tag__list"
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
:key="item.name" :key="item.name"
> >
<a <a
class="playlist_tag__item js_tag" class="playlist_tag__item"
:class=" :class="
selectedType == item.name selectedType == item.name
? 'playlist_tag__item--expand' ? 'playlist_tag__item--expand'
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
v-if="ifMore(idx, playlistTpyes[idx].list)" v-if="ifMore(idx, playlistTpyes[idx].list)"
> >
<a <a
class="playlist_tag__item js_more_tag" class="playlist_tag__item"
:class=" :class="
playlistTpyes[idx].showMore playlistTpyes[idx].showMore
? 'playlist_tag__item--expand' ? 'playlist_tag__item--expand'
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
:key="item.name" :key="item.name"
> >
<a <a
class="playlist_tag__item js_tag" class="playlist_tag__item"
:class=" :class="
selectedType == item.name selectedType == item.name
? 'playlist_tag__item--expand' ? 'playlist_tag__item--expand'
...@@ -88,9 +88,7 @@ ...@@ -88,9 +88,7 @@
<span v-if="selectedType == '全部'">全部歌单</span> <span v-if="selectedType == '全部'">全部歌单</span>
<span class="part_tags" v-else> <span class="part_tags" v-else>
{{ selectedType }} {{ selectedType }}
<a <a class="part_tags__delete sprite" @click="deleteSeleted"
class="part_tags__delete js_delete_tags sprite"
@click="deleteSeleted"
><i class="icon_txt">删除</i></a ><i class="icon_txt">删除</i></a
> >
</span> </span>
...@@ -99,14 +97,14 @@ ...@@ -99,14 +97,14 @@
<div class="part_switch" id="sortbox" aria-label="排列方式"> <div class="part_switch" id="sortbox" aria-label="排列方式">
<a <a
href="javascript:;" href="javascript:;"
class="part_switch__item js_sort part_switch__item--left" class="part_switch__item part_switch__item--left"
title="最热" title="最热"
:class="selectedOrder == 'hot' ? 'part_switch__item--select' : ''" :class="selectedOrder == 'hot' ? 'part_switch__item--select' : ''"
@click="selectOrder('hot')" @click="selectOrder('hot')"
>最热</a >最热</a
><a ><a
href="javascript:;" href="javascript:;"
class="part_switch__item part_switch__item--right js_sort" class="part_switch__item part_switch__item--right"
title="最新" title="最新"
:class="selectedOrder == 'new' ? 'part_switch__item--select' : ''" :class="selectedOrder == 'new' ? 'part_switch__item--select' : ''"
@click="selectOrder('new')" @click="selectOrder('new')"
...@@ -123,10 +121,7 @@ ...@@ -123,10 +121,7 @@
class="playlist__cover mod_cover" class="playlist__cover mod_cover"
style="visibility: visible" style="visibility: visible"
> >
<a <a :title="list.name" @click="playTheList(list.id)"
class="js_playlist"
:title="list.name"
@click="playTheList(list.id)"
><img ><img
class="playlist__pic" class="playlist__pic"
style="display: block; visibility: visible" style="display: block; visibility: visible"
...@@ -134,28 +129,21 @@ ...@@ -134,28 +129,21 @@
v-lazy="list.img" v-lazy="list.img"
:alt="list.name" :alt="list.name"
/> />
<i class="mod_cover__icon_play js_play"></i> <i class="mod_cover__icon_play"></i>
</a> </a>
</div> </div>
<h4 class="playlist__title"> <h4 class="playlist__title">
<span class="playlist__title_txt"> <span class="playlist__title_txt">
<a <a :title="list.name" @click="gotoPlaylistDetail(list.id)">{{
class="js_playlist" list.name
:title="list.name" }}</a>
@click="gotoPlaylistDetail(list.id)"
>{{ list.name }}</a
>
</span> </span>
</h4> </h4>
<div class="playlist__author"> <div class="playlist__author">
<a class="js_user" :title="list.creatorName">{{ <a :title="list.creatorName">{{ list.creatorName }}</a>
list.creatorName
}}</a>
</div> </div>
<div class="playlist__other">播放量: {{ list.playCount }}</div> <div class="playlist__other">播放量: {{ list.playCount }}</div>
<a class="btn_operate_menu js_playlist_more" <a class="btn_operate_menu"><span class="icon_txt">更多</span></a>
><span class="icon_txt">更多</span></a
>
</div> </div>
</li> </li>
</ul> </ul>
...@@ -224,6 +212,7 @@ export default { ...@@ -224,6 +212,7 @@ export default {
} }
this.playlistTpyes = d; this.playlistTpyes = d;
this.updatePlaylist(); this.updatePlaylist();
this.loading = false;
}); });
}, },
updatePlaylist() { updatePlaylist() {
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="mod_part_detail"> <div class="mod_part_detail">
<div class="part_detail__hd"> <div class="part_detail__hd">
<h2 class="part_detail__tit js_lib_title">全部MV</h2> <h2 class="part_detail__tit">全部MV</h2>
<div class="part_switch"> <div class="part_switch">
<a <a
class="part_switch__item part_switch__item--left" class="part_switch__item part_switch__item--left"
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<li class="mv_list__item" v-for="item in mvs" :key="item.id"> <li class="mv_list__item" v-for="item in mvs" :key="item.id">
<div class="mv_list__item_box" style="visibility: visible"> <div class="mv_list__item_box" style="visibility: visible">
<a <a
class="mv_list__cover mod_cover js_mv" class="mv_list__cover mod_cover"
:title="item.name" :title="item.name"
hidefocus="true" hidefocus="true"
@click="gotoMvDetail(item.id)" @click="gotoMvDetail(item.id)"
...@@ -61,17 +61,12 @@ ...@@ -61,17 +61,12 @@
<i class="mod_cover__icon_play"></i> <i class="mod_cover__icon_play"></i>
</a> </a>
<h3 class="mv_list__title"> <h3 class="mv_list__title">
<a <a :title="item.name" @click="gotoMvDetail(item.id)">{{
class="js_mv" item.name
:title="item.name" }}</a>
@click="gotoMvDetail(item.id)"
>{{ item.name }}</a
>
</h3> </h3>
<div class="mv_list__singer" title="5AM"> <div class="mv_list__singer" title="5AM">
<a class="js_singer" :title="item.artistName">{{ <a :title="item.artistName">{{ item.artistName }}</a>
item.artistName
}}</a>
</div> </div>
<div class="mv_list__info"> <div class="mv_list__info">
<span class="mv_list__listen"> <span class="mv_list__listen">
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<h1 class="mv__title"> <h1 class="mv__title">
<span class="mv__name" title="Falsetto">{{ mv.name }}</span> <span class="mv__name" title="Falsetto">{{ mv.name }}</span>
<span class="mv__line">-</span> <span class="mv__line">-</span>
<a class="mv__singer js_singer">{{ mv.artistsText }}</a> <a class="mv__singer">{{ mv.artistsText }}</a>
</h1> </h1>
<span class="mv__listen">播放量:{{ mv.playCount }}</span> <span class="mv__listen">播放量:{{ mv.playCount }}</span>
</div> </div>
......
...@@ -38,12 +38,9 @@ ...@@ -38,12 +38,9 @@
</div> </div>
<h4 class="playlist__title"> <h4 class="playlist__title">
<span class="playlist__title_txt"> <span class="playlist__title_txt">
<a <a :title="album.name" @click="gotoAlbumDetail(album.id)">{{
class="js_album" album.name
:title="album.name" }}</a>
@click="gotoAlbumDetail(album.id)"
>{{ album.name }}</a
>
</span> </span>
</h4> </h4>
...@@ -56,11 +53,10 @@ ...@@ -56,11 +53,10 @@
:key="artist.id" :key="artist.id"
@click="gotoSongerDetail(artist.id)" @click="gotoSongerDetail(artist.id)"
> >
<a class="js_singer"> {{ artist.name }}</a <a> {{ artist.name }}</a>
>/ /
</span> </span>
<a <a
class="js_singer"
@click=" @click="
gotoSongerDetail(album.artists[album.artists.length - 1].id) gotoSongerDetail(album.artists[album.artists.length - 1].id)
" "
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
<div class="detail_layout__other"> <div class="detail_layout__other">
<div class="mod_about js_box" id="album_desc" style="display: "> <div class="mod_about" id="album_desc" style="display: ">
<h3 class="about__tit">简介</h3> <h3 class="about__tit">简介</h3>
<div class="about__cont"> <div class="about__cont">
<p> <p>
......
...@@ -70,30 +70,17 @@ ...@@ -70,30 +70,17 @@
<div class="toplist__hd_rk"> <div class="toplist__hd_rk">
<h1 class="toplist__tit1">{{ seletedTypeName }}</h1> <h1 class="toplist__tit1">{{ seletedTypeName }}</h1>
<span class="toplist_switch"> <span class="toplist_switch">
<a <a class="toplist_switch__btn" style="display: none"
href="javascript:;"
class="toplist_switch__btn js_prev_week"
style="display: none"
><i class="toplist_switch__arrow_prev sprite"></i ><i class="toplist_switch__arrow_prev sprite"></i
><i class="icon_txt">上一期</i></a ><i class="icon_txt">上一期</i></a
> >
<!-- <span class="toplist_switch__data js_chosed_week">2021-02-13</span> --> <!-- <span class="toplist_switch__data js_chosed_week">2021-02-13</span> -->
<a <a class="toplist_switch__btn" style="display: none"
href="javascript:;"
class="toplist_switch__btn js_next_week"
style="display: none"
><i class="toplist_switch__arrow_next sprite"></i ><i class="toplist_switch__arrow_next sprite"></i
><i class="icon_txt">下一期</i></a ><i class="icon_txt">下一期</i></a
> >
</span> </span>
<a <a class="toplist__rule js_desc">榜单规则</a>
href="javascript:;"
class="toplist__rule js_desc"
data-left="-650"
data-top="-78"
data-target="popup_data_detail"
>榜单规则</a
>
</div> </div>
<div class="mod_songlist_toolbar"> <div class="mod_songlist_toolbar">
<a class="mod_btn_green js_all_play" @click="playSonglist(listDatas)" <a class="mod_btn_green js_all_play" @click="playSonglist(listDatas)"
...@@ -118,7 +105,7 @@ ...@@ -118,7 +105,7 @@
<div class="mod_songlist" v-loading="loading"> <div class="mod_songlist" v-loading="loading">
<ul class="songlist__header"> <ul class="songlist__header">
<li class="songlist__edit sprite"> <li class="songlist__edit sprite">
<input type="checkbox" class="songlist__checkbox js_check_all" /> <input type="checkbox" class="songlist__checkbox" />
</li> </li>
<li class="songlist__header_name">歌曲</li> <li class="songlist__header_name">歌曲</li>
<li class="songlist__header_author">歌手</li> <li class="songlist__header_author">歌手</li>
...@@ -182,11 +169,7 @@ ...@@ -182,11 +169,7 @@
:alt="song.name" :alt="song.name"
/> />
</a> </a>
<a <a :title="song.name" @click="gotoSongDetail(song.id)">
class="js_song"
:title="song.name"
@click="gotoSongDetail(song.id)"
>
{{ song.name }} {{ song.name }}
</a> </a>
</span> </span>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="result"> <div class="result">
<div class="mod_tab" role="nav"> <div class="mod_tab" role="nav">
<a <a
class="mod_tab__item js_tab" class="mod_tab__item"
v-for="item in selectTypes" v-for="item in selectTypes"
:key="item.typeId" :key="item.typeId"
:class="selectedType == item.typeId ? 'mod_tab__current' : ''" :class="selectedType == item.typeId ? 'mod_tab__current' : ''"
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
</div> </div>
<span class="singer_list__title_txt" <span class="singer_list__title_txt"
><a class="js_user" :title="user.name" ><a :title="user.name"
>{{ user.name }} >{{ user.name }}
<span class="singer_list__user_txt"> </span></a <span class="singer_list__user_txt"> </span></a
></span> ></span>
...@@ -66,11 +66,11 @@ ...@@ -66,11 +66,11 @@
<div class="singer_list__playlist"> <div class="singer_list__playlist">
歌单:{{ user.playlistCount }} 歌单:{{ user.playlistCount }}
</div> </div>
<div class="singer_list__count js_num_follow" data-num="78"> <div class="singer_list__count" data-num="78">
粉丝:{{ user.followeds }} 粉丝:{{ user.followeds }}
</div> </div>
<div class="singer_list__other"> <div class="singer_list__other">
<a class="mod_btn singer_list__btn_focus js_focus_user"> <a class="mod_btn singer_list__btn_focus">
<i class="mod_btn__icon_new"></i>关注 <i class="mod_btn__icon_new"></i>关注
</a> </a>
</div> </div>
......
...@@ -57,20 +57,19 @@ ...@@ -57,20 +57,19 @@
> >
<div class="playlist__item_box"> <div class="playlist__item_box">
<div class="playlist__cover mod_cover"> <div class="playlist__cover mod_cover">
<a class="js_playlist" @click="gotoSongDetail(simiSong.id)"> <a @click="gotoSongDetail(simiSong.id)">
<img <img
src="" src=""
v-lazy="simiSong.img" v-lazy="simiSong.img"
:alt="simiSong.name" :alt="simiSong.name"
class="playlist__pic" class="playlist__pic"
/> />
<i class="mod_cover__icon_play js_play"></i> <i class="mod_cover__icon_play"></i>
</a> </a>
</div> </div>
<h4 class="playlist__title"> <h4 class="playlist__title">
<span class="playlist__title_txt" <span class="playlist__title_txt"
><a ><a
class="js_playlist"
:title="simiSong.name" :title="simiSong.name"
@click="gotoSongDetail(simiSong.id)" @click="gotoSongDetail(simiSong.id)"
>{{ simiSong.name }}</a >{{ simiSong.name }}</a
...@@ -88,7 +87,7 @@ ...@@ -88,7 +87,7 @@
<h3 class="other_part__tit">相关MV</h3> <h3 class="other_part__tit">相关MV</h3>
<div class="mod_mv_list"> <div class="mod_mv_list">
<div class="mv_list__item_box"> <div class="mv_list__item_box">
<a class="mv_list__cover mod_cover js_mv" hidefocus="true"> <a class="mv_list__cover mod_cover" hidefocus="true">
<img <img
class="mv_list__pic" class="mv_list__pic"
src="//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000" src="//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000"
......
...@@ -7,14 +7,12 @@ ...@@ -7,14 +7,12 @@
@moreClick="toggleShowMoreInfo" @moreClick="toggleShowMoreInfo"
/> />
<div id="index_tab" class="js_tab"> <div id="index_tab">
<div class="mod_part"> <div class="mod_part">
<div class="part__hd"> <div class="part__hd">
<h2 class="part__tit">热门歌曲</h2> <h2 class="part__tit">热门歌曲</h2>
<a class="part__more js_goto_tab"> <a class="part__more"> 全部<i class="icon_part_arrow sprite"></i> </a>
全部<i class="icon_part_arrow sprite"></i>
</a>
</div> </div>
<detail-songlist :songs="hotSongs" :listType="'songer'" /> <detail-songlist :songs="hotSongs" :listType="'songer'" />
...@@ -37,7 +35,7 @@ ...@@ -37,7 +35,7 @@
:alt="album.name" :alt="album.name"
/> />
<i <i
class="mod_cover__icon_play js_play" class="mod_cover__icon_play"
@click="playAlbum(album.id)" @click="playAlbum(album.id)"
></i> ></i>
</a> </a>
...@@ -65,15 +63,13 @@ ...@@ -65,15 +63,13 @@
<div class="mod_part" v-if="mvs.length > 0"> <div class="mod_part" v-if="mvs.length > 0">
<div class="part__hd"> <div class="part__hd">
<h2 class="part__tit">MV</h2> <h2 class="part__tit">MV</h2>
<a class="part__more js_goto_tab"> <a class="part__more"> 全部<i class="icon_part_arrow sprite"></i> </a>
全部<i class="icon_part_arrow sprite"></i>
</a>
</div> </div>
<div class="mod_mv"> <div class="mod_mv">
<ul class="mv_list__list" id="mvlist"> <ul class="mv_list__list" id="mvlist">
<li class="mv_list__item" v-for="mv in mvs" :key="mv.id"> <li class="mv_list__item" v-for="mv in mvs" :key="mv.id">
<div class="mv_list__item_box"> <div class="mv_list__item_box">
<a class="mv_list__cover mod_cover js_mv" hidefocus="true"> <a class="mv_list__cover mod_cover" hidefocus="true">
<img <img
class="mv_list__pic" class="mv_list__pic"
src="//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000" src="//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000"
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
:key="item.id" :key="item.id"
> >
<a <a
class="singer_list_txt__link js_singer" class="singer_list_txt__link"
:title="item.name" :title="item.name"
@click="gotoSongerDetail(item.id)" @click="gotoSongerDetail(item.id)"
>{{ item.name }}</a >{{ item.name }}</a
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册