Skip to content

W
web-music

OpenDocCN / web-music

通知 7
Star 0
Fork 0
W
web-music

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

提交 8501bfa4 编写于 作者: L lvyueyang
浏览文件
操作

第一次提交，暂时缺少歌词显示

上级
展开全部 隐藏空白更改
内联 并排
Showing with 783 addition and 0 deletion
README.md 0 → 100644
浏览文件 @ 8501bfa4
# 基于gulp的前端页面快速开发模板
1.初始化项目
克隆项目到本地
```bash
npm i
```
2.在app文件夹下建立对应文件书写代码
3.集成了sass编译，rem转换，自动刷新
\ No newline at end of file
app/css/_template/button.scss 0 → 100644
浏览文件 @ 8501bfa4
@import "function";
@import "var";
@import "mixin";
app/css/_template/frames.scss 0 → 100644
浏览文件 @ 8501bfa4
@keyframes loadingRotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@keyframes bgFade{
0%{
background: rgba(36, 207, 95, 0.1);
}
100%{
background: rgba(36, 207, 95, 0);
}
}
app/css/_template/icon.scss 0 → 100644
浏览文件 @ 8501bfa4
@import "function";
@import "var";
@import "mixin";
.icon{
display: inline-block;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
\ No newline at end of file
app/css/_template/mixin.scss 0 → 100644
浏览文件 @ 8501bfa4
@import "function";
@import "var";
//....
@mixin lineclamp($number:1){
@if($number == 1){
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}@else {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $number;
overflow: hidden;
}
}
//flex
@mixin flex_item_center(){
display: flex;
align-items:center;
}
@mixin flex_item_start(){
display: flex;
align-items:flex-start;
}
@mixin flex_item_end(){
display: flex;
align-items:flex-end;
}
@mixin flex_justify_center(){
display: flex;
justify-content: center;
}
@mixin flex_justify_start(){
display: flex;
justify-content: flex-start;
}
@mixin flex_justify_(){
display: flex;
justify-content: flex-end;
}
app/css/_template/modal.scss 0 → 100644
浏览文件 @ 8501bfa4
@import "function";
@import "var";
@import "mixin";
.modal {
position: fixed;
z-index: 9999999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
display: none;
.modal-wrapper {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: #fff;
border-radius: 15px;
overflow: hidden;
}
.modal-footer {
height: 50px;
display: flex;
border-top: 1px solid #e4e4e4;
button {
flex: 1;
background-color: #fff;
color: #a5a5a5;
border: none;
&:last-of-type {
border-left: 1px solid #e4e4e4;
}
&:nth-child(1) {
border-left: none;
}
&.ok {
background-color: #a6cb1c;
color: #fff;
}
}
}
}
app/css/_template/reset.scss 0 → 100644
浏览文件 @ 8501bfa4
@import "function";
@import "var";
@import "mixin";
* {
box-sizing: border-box;
//-webkit-tap-highlight-color: transparent;
}
a {
text-decoration: none;
&:hover {
text-decoration: none;
}
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
body {
line-height: 1;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #fff;
font-family: "PingFang SC Regular", "Microsoft YaHei";
}
select, input, textarea {
font-family: "PingFang SC Regular", "Microsoft YaHei";
}
ul, dl, dd {
margin: 0;
padding: 0;
list-style: none;
}
img {
max-width: 100%;
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.cur, button {
cursor: pointer;
}
app/css/_template/var.scss 0 → 100644
浏览文件 @ 8501bfa4
@import "./function";
$main_color: #000;
$tag_color_blue: #3fb0f6;
$tag_color_gray: #a1a1a1;
$button_color: #ffd117;
$button_color_green: #a6cb1c;
$input_border_radius: 3px;
$input_border: 1px solid #f1f1f1;
$input_font_color: #666;
//padding
$main_padding: 20px;
app/css/base.css 0 → 100644
浏览文件 @ 8501bfa4
@charset "UTF-8";
* {
box-sizing: border-box; }
a {
text-decoration: none; }
a:hover {
text-decoration: none; }
.text-left {
text-align: left; }
.text-center {
text-align: center; }
.text-right {
text-align: right; }
body {
line-height: 1;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #fff;
font-family: "PingFang SC Regular", "Microsoft YaHei"; }
select, input, textarea {
font-family: "PingFang SC Regular", "Microsoft YaHei"; }
ul, dl, dd {
margin: 0;
padding: 0;
list-style: none; }
img {
max-width: 100%;
border: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
.cur, button {
cursor: pointer; }
.modal {
position: fixed;
z-index: 9999999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
display: none; }
.modal .modal-wrapper {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center; }
.modal .modal-content {
background-color: #fff;
border-radius: 15px;
overflow: hidden; }
.modal .modal-footer {
height: 50px;
display: flex;
border-top: 1px solid #e4e4e4; }
.modal .modal-footer button {
flex: 1;
background-color: #fff;
color: #a5a5a5;
border: none; }
.modal .modal-footer button:last-of-type {
border-left: 1px solid #e4e4e4; }
.modal .modal-footer button:nth-child(1) {
border-left: none; }
.modal .modal-footer button.ok {
background-color: #a6cb1c;
color: #fff; }
@keyframes loadingRotate {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
@keyframes bgFade {
0% {
background: rgba(36, 207, 95, 0.1); }
100% {
background: rgba(36, 207, 95, 0); } }
[v-clock] {
display: none; }
.header-search {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 45px;
box-shadow: 0 0 5px #ccc;
background-color: #fff; }
.header-search input {
width: 100%;
height: 100%;
margin: 0;
padding: 0 0 0 15px;
border: none;
outline: none;
background: transparent;
font-size: 14px; }
.music-list {
padding-left: 15px;
margin: 55px 0 90px 0; }
.music-list .item {
cursor: pointer;
padding: 10px 15px 10px 0;
border-bottom: 1px solid #e4e4e4;
display: flex;
justify-content: space-between;
line-height: 1.4; }
.music-list .item.active {
background-color: #000;
color: #fff; }
.music-list .item.active .user, .music-list .item.active .index {
color: #fff; }
.music-list .item .index {
color: #999;
padding-right: 5px; }
.music-list .item .title {
flex: 0 0 65%;
display: flex; }
.music-list .item .user {
color: #999;
font-size: 12px;
width: 35%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: right;
padding-left: 10px; }
.player-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 80px;
box-shadow: 0 0 5px #ccc;
background-color: #fff; }
.player-wrap .player-item {
display: flex;
align-items: center;
height: 100%;
padding: 5px; }
.player-wrap .player-item .pic {
position: relative;
width: 70px;
height: 70px;
margin-right: 5px;
overflow: hidden;
cursor: pointer; }
.player-wrap .player-item .pic img {
width: 100%;
display: block; }
.player-wrap .player-item .pic:after {
position: absolute;
content: '查看详情';
background-color: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
width: 100%;
height: 100%;
color: rgba(251, 251, 251, 0.8);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px; }
.player-wrap .player-item audio {
flex: 1; }
app/css/base.scss 0 → 100644
浏览文件 @ 8501bfa4
@import "_template/function";
@import "_template/var";
@import "_template/mixin";
@import '_template/reset';
@import '_template/header';
@import '_template/button';
@import '_template/modal';
@import '_template/frames';
[v-clock] {
display: none;
}
$top-height: 45px;
$bottom-height: 80px;
.header-search {
position: fixed;
top: 0;
left: 0;
right: 0;
height: $top-height;
box-shadow: 0 0 5px #ccc;
background-color: #fff;
input {
width: 100%;
height: 100%;
margin: 0;
padding: 0 0 0 15px;
border: none;
outline: none;
background: transparent;
font-size: 14px;
}
}
.music-list {
padding-left: 15px;
margin: $top-height + 10 0 $bottom-height + 10 0;
.item {
cursor: pointer;
padding: 10px 15px 10px 0;
border-bottom: 1px solid #e4e4e4;
display: flex;
justify-content: space-between;
line-height: 1.4;
&.active {
background-color: #000;
color: #fff;
.user, .index {
color: #fff;
}
}
.index {
color: #999;
padding-right: 5px;
}
.title {
flex: 0 0 65%;
display: flex;
}
.user {
color: #999;
font-size: 12px;
width: 35%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: right;
padding-left: 10px;
}
}
}
.player-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: $bottom-height;
box-shadow: 0 0 5px #ccc;
background-color: #fff;
.player-item {
display: flex;
align-items: center;
height: 100%;
padding: 5px;
.pic {
position: relative;
width: 70px;
height: 70px;
margin-right: 5px;
overflow: hidden;
cursor: pointer;
img {
width: 100%;
display: block;
}
&:after {
position: absolute;
content: '查看详情';
background-color: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
width: 100%;
height: 100%;
color: rgba(251, 251, 251, .8);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
}
audio {
flex: 1;
}
}
}
app/index.html 0 → 100644
浏览文件 @ 8501bfa4
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>听音乐</title>
<link rel="stylesheet" href="./css/base.css">
</head>
<body>
<div id="app">
<div class="header-search">
<input type="text" @input="search" placeholder="请输入要搜索的歌曲名称">
</div>
<div class="music-list">
<div class="item" :class="{active: v.songid === playing.songid}" v-if="v.show" v-for="(v,index) in list" :key="v.songid"
@click="toPlay(index)">
<div class="title">
<span class="index">{{index + 1}}.</span> {{v.title}}
</div>
<small class="user">{{v.author}}</small>
</div>
</div>
<div class="player-wrap">
<div class="player-item" v-if="playing">
<div class="pic"><img :src="playing.pic" alt=""></div>
<audio controls ref="Audio" :src="playing.url"></audio>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!--<script src="./plugin/vue.min.js"></script>-->
<script src="./plugin/axios.min.js"></script>
<!--<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>-->
<script>
new Vue({
el: '#app',
data: {
list: [],
playing: null
},
created() {
},
mounted() {
this.getList()
},
methods: {
getList() {
const url = `./js/jayjsondata.json`
axios.get(url).then(res => {
this.list = res.data.map(item => {
let obj = {
show: true,
}
obj = Object.assign(obj, item)
return obj
})
this.playing = this.list[0]
}).catch(e => {
console.log(e)
})
},
toPlay(index) {
const item = this.list[index]
const audio = this.$refs.Audio
if (this.playing.songid === item.songid && !audio.paused) {
this.$nextTick(() => {
this.$refs.Audio.pause()
})
} else {
this.playing = item
this.$nextTick(() => {
audio.play()
})
}
},
search(e) {
const val = e.target.value
this.list.forEach(item => {
if (item.title.includes(val)) {
item.show = true
} else {
item.show = false
}
})
}
}
})
</script>
</body>
</html>
app/js/base.js 0 → 100644
浏览文件 @ 8501bfa4
if($){
$(function () {
$('body').on('click', '.modal [data-close]', function () {
$(this).parents('.modal').fadeOut();
});
$('body').on('click', '.modal .modal-wrapper', function () {
$(this).parents('.modal').fadeOut();
});
$('body').on('click', '.modal .modal-wrapper>div', function (e) {
e.stopPropagation();
});
$('body').on('click', '[data-modal]', function () {
var name = $(this).attr('data-modal');
$(name).fadeIn();
});
});
}
app/js/jayjsondata.json 0 → 100644
浏览文件 @ 8501bfa4
此差异已折叠。
app/plugin/APlayer/APlayer.css 0 → 100644
浏览文件 @ 8501bfa4
.aplayer{background:#fff;font-family:Arial,Helvetica,sans-serif;margin:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);border-radius:2px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal;position:relative}.aplayer *{box-sizing:content-box}.aplayer svg{width:100%;height:100%}.aplayer svg circle,.aplayer svg path{fill:#fff}.aplayer.aplayer-withlist .aplayer-info{border-bottom:1px solid #e9e9e9}.aplayer.aplayer-withlist .aplayer-list{display:block}.aplayer.aplayer-withlist .aplayer-icon-order,.aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu{display:inline}.aplayer.aplayer-withlrc .aplayer-pic{height:90px;width:90px}.aplayer.aplayer-withlrc .aplayer-info{margin-left:90px;height:90px;padding:10px 7px 0}.aplayer.aplayer-withlrc .aplayer-lrc{display:block}.aplayer.aplayer-narrow{width:66px}.aplayer.aplayer-narrow .aplayer-info,.aplayer.aplayer-narrow .aplayer-list{display:none}.aplayer.aplayer-narrow .aplayer-body,.aplayer.aplayer-narrow .aplayer-pic{height:66px;width:66px}.aplayer.aplayer-fixed{position:fixed;bottom:0;left:0;right:0;margin:0;z-index:99;overflow:visible;max-width:400px;box-shadow:none}.aplayer.aplayer-fixed .aplayer-list{margin-bottom:65px;border:1px solid #eee;border-bottom:none}.aplayer.aplayer-fixed .aplayer-body{position:fixed;bottom:0;left:0;right:0;margin:0;z-index:99;background:#fff;padding-right:18px;transition:all .3s ease;max-width:400px}.aplayer.aplayer-fixed .aplayer-lrc{display:block;position:fixed;bottom:10px;left:0;right:0;margin:0;z-index:98;pointer-events:none;text-shadow:-1px -1px 0 #fff}.aplayer.aplayer-fixed .aplayer-lrc:after,.aplayer.aplayer-fixed .aplayer-lrc:before{display:none}.aplayer.aplayer-fixed .aplayer-info{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:0 0;transform-origin:0 0;transition:all .3s ease;border-bottom:none;border-top:1px solid #e9e9e9}.aplayer.aplayer-fixed .aplayer-info .aplayer-music{width:calc(100% - 105px)}.aplayer.aplayer-fixed .aplayer-miniswitcher{display:block}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info{display:block;-webkit-transform:scaleX(0);transform:scaleX(0)}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{width:66px!important}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon{-webkit-transform:rotateY(0);transform:rotateY(0)}.aplayer.aplayer-fixed .aplayer-icon-back,.aplayer.aplayer-fixed .aplayer-icon-forward,.aplayer.aplayer-fixed .aplayer-icon-lrc,.aplayer.aplayer-fixed .aplayer-icon-play{display:inline-block}.aplayer.aplayer-fixed .aplayer-icon-back,.aplayer.aplayer-fixed .aplayer-icon-forward,.aplayer.aplayer-fixed .aplayer-icon-menu,.aplayer.aplayer-fixed .aplayer-icon-play{position:absolute;bottom:27px;width:20px;height:20px}.aplayer.aplayer-fixed .aplayer-icon-back{right:75px}.aplayer.aplayer-fixed .aplayer-icon-play{right:50px}.aplayer.aplayer-fixed .aplayer-icon-forward{right:25px}.aplayer.aplayer-fixed .aplayer-icon-menu{right:0}.aplayer.aplayer-arrow .aplayer-icon-loop,.aplayer.aplayer-arrow .aplayer-icon-order,.aplayer.aplayer-mobile .aplayer-icon-volume-down{display:none}.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-loading-icon{display:block}.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{-webkit-transform:scale(1);transform:scale(1)}.aplayer .aplayer-body{position:relative}.aplayer .aplayer-icon{width:15px;height:15px;border:none;background-color:transparent;outline:none;cursor:pointer;opacity:.8;vertical-align:middle;padding:0;font-size:12px;margin:0;display:inline-block}.aplayer .aplayer-icon path{transition:all .2s ease-in-out}.aplayer .aplayer-icon-back,.aplayer .aplayer-icon-forward,.aplayer .aplayer-icon-lrc,.aplayer .aplayer-icon-order,.aplayer .aplayer-icon-play{display:none}.aplayer .aplayer-icon-lrc-inactivity svg{opacity:.4}.aplayer .aplayer-icon-forward{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.aplayer .aplayer-lrc-content{display:none}.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px;background-size:cover;background-position:50%;transition:all .3s ease;cursor:pointer}.aplayer .aplayer-pic:hover .aplayer-button{opacity:1}.aplayer .aplayer-pic .aplayer-button{position:absolute;border-radius:50%;opacity:.8;text-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);background:rgba(0,0,0,.2);transition:all .1s ease}.aplayer .aplayer-pic .aplayer-button path{fill:#fff}.aplayer .aplayer-pic .aplayer-hide{display:none}.aplayer .aplayer-pic .aplayer-play{width:26px;height:26px;border:2px solid #fff;bottom:50%;right:50%;margin:0 -15px -15px 0}.aplayer .aplayer-pic .aplayer-play svg{position:absolute;top:3px;left:4px;height:20px;width:20px}.aplayer .aplayer-pic .aplayer-pause{width:16px;height:16px;border:2px solid #fff;bottom:4px;right:4px}.aplayer .aplayer-pic .aplayer-pause svg{position:absolute;top:2px;left:2px;height:12px;width:12px}.aplayer .aplayer-info{margin-left:66px;padding:14px 7px 0 10px;height:66px;box-sizing:border-box}.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 0 13px 5px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:default;padding-bottom:2px;height:20px}.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px}.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:12px;color:#666}.aplayer .aplayer-info .aplayer-controller{position:relative;display:flex}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin:0 0 0 5px;padding:4px 0;cursor:pointer!important;flex:1}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb{-webkit-transform:scale(1);transform:scale(1)}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;transition:all .5s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;height:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:10px;width:10px;border-radius:50%;cursor:pointer;transition:all .3s ease-in-out;-webkit-transform:scale(0);transform:scale(0)}.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:relative;right:0;bottom:4px;height:17px;color:#999;font-size:11px;padding-left:7px}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner{vertical-align:middle}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon{cursor:pointer;transition:all .2s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#666}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop{margin-right:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path{fill:#000}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu,.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode{display:none}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{position:relative;display:inline-block;margin-left:3px;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{height:40px}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{position:absolute;bottom:15px;right:-3px;width:25px;height:0;z-index:99;overflow:hidden;transition:all .2s ease-in-out}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active{height:40px}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa;border-radius:2.5px;overflow:hidden}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;transition:all .1s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon{display:none}.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg{position:absolute;-webkit-animation:rotate 1s linear infinite;animation:rotate 1s linear infinite}.aplayer .aplayer-lrc{display:none;position:relative;height:30px;text-align:center;overflow:hidden;margin:-10px 0 7px}.aplayer .aplayer-lrc:before{top:0;height:10%;background:linear-gradient(180deg,#fff 0,hsla(0,0%,100%,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00ffffff",GradientType=0)}.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;overflow:hidden;width:100%;content:" "}.aplayer .aplayer-lrc:after{bottom:0;height:33%;background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.8));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff",endColorstr="#ccffffff",GradientType=0)}.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:16px!important;height:16px!important;padding:0!important;margin:0!important;transition:all .5s ease-out;opacity:.4;overflow:hidden}.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1;overflow:visible;height:auto!important;min-height:16px}.aplayer .aplayer-lrc.aplayer-lrc-hide{display:none}.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;transition:all .5s ease-out;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:default}.aplayer .aplayer-list{overflow:auto;transition:all .5s ease;will-change:height;display:none;overflow:hidden}.aplayer .aplayer-list.aplayer-list-hide{max-height:0!important}.aplayer .aplayer-list ol{list-style-type:none;margin:0;padding:0;overflow-y:auto}.aplayer .aplayer-list ol::-webkit-scrollbar{width:5px}.aplayer .aplayer-list ol::-webkit-scrollbar-thumb{border-radius:3px;background-color:#eee}.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover{background-color:#ccc}.aplayer .aplayer-list ol li{position:relative;height:32px;line-height:32px;padding:0 15px;font-size:12px;border-top:1px solid #e9e9e9;cursor:pointer;transition:all .2s ease;overflow:hidden;margin:0}.aplayer .aplayer-list ol li:first-child{border-top:none}.aplayer .aplayer-list ol li:hover{background:#efefef}.aplayer .aplayer-list ol li.aplayer-list-light{background:#e9e9e9}.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur{display:inline-block}.aplayer .aplayer-list ol li .aplayer-list-cur{display:none;width:3px;height:22px;position:absolute;left:0;top:5px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-index{color:#666;margin-right:12px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-author{color:#666;float:right;cursor:pointer}.aplayer .aplayer-notice{opacity:0;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:12px;border-radius:4px;padding:5px 10px;transition:all .3s ease-in-out;overflow:hidden;color:#fff;pointer-events:none;background-color:#f4f4f5;color:#909399}.aplayer .aplayer-miniswitcher{display:none;position:absolute;top:0;right:0;bottom:0;height:100%;background:#e6e6e6;width:18px;border-radius:0 2px 2px 0}.aplayer .aplayer-miniswitcher .aplayer-icon{height:100%;width:100%;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);transition:all .3s ease}.aplayer .aplayer-miniswitcher .aplayer-icon path{fill:#666}.aplayer .aplayer-miniswitcher .aplayer-icon:hover path{fill:#000}@-webkit-keyframes aplayer-roll{0%{left:0}to{left:-100%}}@keyframes aplayer-roll{0%{left:0}to{left:-100%}}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
/*# sourceMappingURL=APlayer.min.css.map*/
app/plugin/APlayer/APlayer.js 0 → 100644
浏览文件 @ 8501bfa4
此差异已折叠。
app/plugin/axios.min.js 0 → 100644
浏览文件 @ 8501bfa4
/* axios v0.19.0-beta.1 | (c) 2018 by Matt Zabriskie */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.axios=t():e.axios=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){var t=new i(e),n=s(i.prototype.request,t);return o.extend(n,i.prototype,t),o.extend(n,t),n}var o=n(2),s=n(3),i=n(5),a=n(22),u=n(11),c=r(u);c.Axios=i,c.create=function(e){return r(a(c.defaults,e))},c.Cancel=n(23),c.CancelToken=n(24),c.isCancel=n(10),c.all=function(e){return Promise.all(e)},c.spread=n(25),e.exports=c,e.exports.default=c},function(e,t,n){"use strict";function r(e){return"[object Array]"===j.call(e)}function o(e){return"[object ArrayBuffer]"===j.call(e)}function s(e){return"undefined"!=typeof FormData&&e instanceof FormData}function i(e){var t;return t="undefined"!=typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&e.buffer instanceof ArrayBuffer}function a(e){return"string"==typeof e}function u(e){return"number"==typeof e}function c(e){return"undefined"==typeof e}function f(e){return null!==e&&"object"==typeof e}function p(e){return"[object Date]"===j.call(e)}function d(e){return"[object File]"===j.call(e)}function l(e){return"[object Blob]"===j.call(e)}function h(e){return"[object Function]"===j.call(e)}function m(e){return f(e)&&h(e.pipe)}function y(e){return"undefined"!=typeof URLSearchParams&&e instanceof URLSearchParams}function g(e){return e.replace(/^\s*/,"").replace(/\s*$/,"")}function x(){return("undefined"==typeof navigator||"ReactNative"!==navigator.product&&"NativeScript"!==navigator.product&&"NS"!==navigator.product)&&("undefined"!=typeof window&&"undefined"!=typeof document)}function v(e,t){if(null!==e&&"undefined"!=typeof e)if("object"!=typeof e&&(e=[e]),r(e))for(var n=0,o=e.length;n<o;n++)t.call(null,e[n],n,e);else for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.call(null,e[s],s,e)}function w(){function e(e,n){"object"==typeof t[n]&&"object"==typeof e?t[n]=w(t[n],e):t[n]=e}for(var t={},n=0,r=arguments.length;n<r;n++)v(arguments[n],e);return t}function b(){function e(e,n){"object"==typeof t[n]&&"object"==typeof e?t[n]=b(t[n],e):"object"==typeof e?t[n]=b({},e):t[n]=e}for(var t={},n=0,r=arguments.length;n<r;n++)v(arguments[n],e);return t}function E(e,t,n){return v(t,function(t,r){n&&"function"==typeof t?e[r]=S(t,n):e[r]=t}),e}var S=n(3),R=n(4),j=Object.prototype.toString;e.exports={isArray:r,isArrayBuffer:o,isBuffer:R,isFormData:s,isArrayBufferView:i,isString:a,isNumber:u,isObject:f,isUndefined:c,isDate:p,isFile:d,isBlob:l,isFunction:h,isStream:m,isURLSearchParams:y,isStandardBrowserEnv:x,forEach:v,merge:w,deepMerge:b,extend:E,trim:g}},function(e,t){"use strict";e.exports=function(e,t){return function(){for(var n=new Array(arguments.length),r=0;r<n.length;r++)n[r]=arguments[r];return e.apply(t,n)}}},function(e,t){/*!
* Determine if an object is a Buffer
*
* @author Feross Aboukhadijeh <https://feross.org>
* @license MIT
*/
e.exports=function(e){return null!=e&&null!=e.constructor&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}},function(e,t,n){"use strict";function r(e){this.defaults=e,this.interceptors={request:new i,response:new i}}var o=n(2),s=n(6),i=n(7),a=n(8),u=n(22);r.prototype.request=function(e){"string"==typeof e?(e=arguments[1]||{},e.url=arguments[0]):e=e||{},e=u(this.defaults,e),e.method=e.method?e.method.toLowerCase():"get";var t=[a,void 0],n=Promise.resolve(e);for(this.interceptors.request.forEach(function(e){t.unshift(e.fulfilled,e.rejected)}),this.interceptors.response.forEach(function(e){t.push(e.fulfilled,e.rejected)});t.length;)n=n.then(t.shift(),t.shift());return n},r.prototype.getUri=function(e){return e=u(this.defaults,e),s(e.url,e.params,e.paramsSerializer).replace(/^\?/,"")},o.forEach(["delete","get","head","options"],function(e){r.prototype[e]=function(t,n){return this.request(o.merge(n||{},{method:e,url:t}))}}),o.forEach(["post","put","patch"],function(e){r.prototype[e]=function(t,n,r){return this.request(o.merge(r||{},{method:e,url:t,data:n}))}}),e.exports=r},function(e,t,n){"use strict";function r(e){return encodeURIComponent(e).replace(/%40/gi,"@").replace(/%3A/gi,":").replace(/%24/g,"$").replace(/%2C/gi,",").replace(/%20/g,"+").replace(/%5B/gi,"[").replace(/%5D/gi,"]")}var o=n(2);e.exports=function(e,t,n){if(!t)return e;var s;if(n)s=n(t);else if(o.isURLSearchParams(t))s=t.toString();else{var i=[];o.forEach(t,function(e,t){null!==e&&"undefined"!=typeof e&&(o.isArray(e)?t+="[]":e=[e],o.forEach(e,function(e){o.isDate(e)?e=e.toISOString():o.isObject(e)&&(e=JSON.stringify(e)),i.push(r(t)+"="+r(e))}))}),s=i.join("&")}return s&&(e+=(e.indexOf("?")===-1?"?":"&")+s),e}},function(e,t,n){"use strict";function r(){this.handlers=[]}var o=n(2);r.prototype.use=function(e,t){return this.handlers.push({fulfilled:e,rejected:t}),this.handlers.length-1},r.prototype.eject=function(e){this.handlers[e]&&(this.handlers[e]=null)},r.prototype.forEach=function(e){o.forEach(this.handlers,function(t){null!==t&&e(t)})},e.exports=r},function(e,t,n){"use strict";function r(e){e.cancelToken&&e.cancelToken.throwIfRequested()}var o=n(2),s=n(9),i=n(10),a=n(11),u=n(20),c=n(21);e.exports=function(e){r(e),e.baseURL&&!u(e.url)&&(e.url=c(e.baseURL,e.url)),e.headers=e.headers||{},e.data=s(e.data,e.headers,e.transformRequest),e.headers=o.merge(e.headers.common||{},e.headers[e.method]||{},e.headers||{}),o.forEach(["delete","get","head","post","put","patch","common"],function(t){delete e.headers[t]});var t=e.adapter||a.adapter;return t(e).then(function(t){return r(e),t.data=s(t.data,t.headers,e.transformResponse),t},function(t){return i(t)||(r(e),t&&t.response&&(t.response.data=s(t.response.data,t.response.headers,e.transformResponse))),Promise.reject(t)})}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t,n){return r.forEach(n,function(n){e=n(e,t)}),e}},function(e,t){"use strict";e.exports=function(e){return!(!e||!e.__CANCEL__)}},function(e,t,n){"use strict";function r(e,t){!s.isUndefined(e)&&s.isUndefined(e["Content-Type"])&&(e["Content-Type"]=t)}function o(){var e;return"undefined"!=typeof process&&"[object process]"===Object.prototype.toString.call(process)?e=n(13):"undefined"!=typeof XMLHttpRequest&&(e=n(13)),e}var s=n(2),i=n(12),a={"Content-Type":"application/x-www-form-urlencoded"},u={adapter:o(),transformRequest:[function(e,t){return i(t,"Accept"),i(t,"Content-Type"),s.isFormData(e)||s.isArrayBuffer(e)||s.isBuffer(e)||s.isStream(e)||s.isFile(e)||s.isBlob(e)?e:s.isArrayBufferView(e)?e.buffer:s.isURLSearchParams(e)?(r(t,"application/x-www-form-urlencoded;charset=utf-8"),e.toString()):s.isObject(e)?(r(t,"application/json;charset=utf-8"),JSON.stringify(e)):e}],transformResponse:[function(e){if("string"==typeof e)try{e=JSON.parse(e)}catch(e){}return e}],timeout:0,xsrfCookieName:"XSRF-TOKEN",xsrfHeaderName:"X-XSRF-TOKEN",maxContentLength:-1,validateStatus:function(e){return e>=200&&e<300}};u.headers={common:{Accept:"application/json, text/plain, */*"}},s.forEach(["delete","get","head"],function(e){u.headers[e]={}}),s.forEach(["post","put","patch"],function(e){u.headers[e]=s.merge(a)}),e.exports=u},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){r.forEach(e,function(n,r){r!==t&&r.toUpperCase()===t.toUpperCase()&&(e[t]=n,delete e[r])})}},function(e,t,n){"use strict";var r=n(2),o=n(14),s=n(6),i=n(17),a=n(18),u=n(15);e.exports=function(e){return new Promise(function(t,c){var f=e.data,p=e.headers;r.isFormData(f)&&delete p["Content-Type"];var d=new XMLHttpRequest;if(e.auth){var l=e.auth.username||"",h=e.auth.password||"";p.Authorization="Basic "+btoa(l+":"+h)}if(d.open(e.method.toUpperCase(),s(e.url,e.params,e.paramsSerializer),!0),d.timeout=e.timeout,d.onreadystatechange=function(){if(d&&4===d.readyState&&(0!==d.status||d.responseURL&&0===d.responseURL.indexOf("file:"))){var n="getAllResponseHeaders"in d?i(d.getAllResponseHeaders()):null,r=e.responseType&&"text"!==e.responseType?d.response:d.responseText,s={data:r,status:d.status,statusText:d.statusText,headers:n,config:e,request:d};o(t,c,s),d=null}},d.onabort=function(){d&&(c(u("Request aborted",e,"ECONNABORTED",d)),d=null)},d.onerror=function(){c(u("Network Error",e,null,d)),d=null},d.ontimeout=function(){c(u("timeout of "+e.timeout+"ms exceeded",e,"ECONNABORTED",d)),d=null},r.isStandardBrowserEnv()){var m=n(19),y=(e.withCredentials||a(e.url))&&e.xsrfCookieName?m.read(e.xsrfCookieName):void 0;y&&(p[e.xsrfHeaderName]=y)}if("setRequestHeader"in d&&r.forEach(p,function(e,t){"undefined"==typeof f&&"content-type"===t.toLowerCase()?delete p[t]:d.setRequestHeader(t,e)}),e.withCredentials&&(d.withCredentials=!0),e.responseType)try{d.responseType=e.responseType}catch(t){if("json"!==e.responseType)throw t}"function"==typeof e.onDownloadProgress&&d.addEventListener("progress",e.onDownloadProgress),"function"==typeof e.onUploadProgress&&d.upload&&d.upload.addEventListener("progress",e.onUploadProgress),e.cancelToken&&e.cancelToken.promise.then(function(e){d&&(d.abort(),c(e),d=null)}),void 0===f&&(f=null),d.send(f)})}},function(e,t,n){"use strict";var r=n(15);e.exports=function(e,t,n){var o=n.config.validateStatus;!o||o(n.status)?e(n):t(r("Request failed with status code "+n.status,n.config,null,n.request,n))}},function(e,t,n){"use strict";var r=n(16);e.exports=function(e,t,n,o,s){var i=new Error(e);return r(i,t,n,o,s)}},function(e,t){"use strict";e.exports=function(e,t,n,r,o){return e.config=t,n&&(e.code=n),e.request=r,e.response=o,e.toJSON=function(){return{message:this.message,name:this.name,description:this.description,number:this.number,fileName:this.fileName,lineNumber:this.lineNumber,columnNumber:this.columnNumber,stack:this.stack,config:this.config,code:this.code}},e}},function(e,t,n){"use strict";var r=n(2),o=["age","authorization","content-length","content-type","etag","expires","from","host","if-modified-since","if-unmodified-since","last-modified","location","max-forwards","proxy-authorization","referer","retry-after","user-agent"];e.exports=function(e){var t,n,s,i={};return e?(r.forEach(e.split("\n"),function(e){if(s=e.indexOf(":"),t=r.trim(e.substr(0,s)).toLowerCase(),n=r.trim(e.substr(s+1)),t){if(i[t]&&o.indexOf(t)>=0)return;"set-cookie"===t?i[t]=(i[t]?i[t]:[]).concat([n]):i[t]=i[t]?i[t]+", "+n:n}}),i):i}},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){function e(e){var t=e;return n&&(o.setAttribute("href",t),t=o.href),o.setAttribute("href",t),{href:o.href,protocol:o.protocol?o.protocol.replace(/:$/,""):"",host:o.host,search:o.search?o.search.replace(/^\?/,""):"",hash:o.hash?o.hash.replace(/^#/,""):"",hostname:o.hostname,port:o.port,pathname:"/"===o.pathname.charAt(0)?o.pathname:"/"+o.pathname}}var t,n=/(msie|trident)/i.test(navigator.userAgent),o=document.createElement("a");return t=e(window.location.href),function(n){var o=r.isString(n)?e(n):n;return o.protocol===t.protocol&&o.host===t.host}}():function(){return function(){return!0}}()},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,s,i){var a=[];a.push(e+"="+encodeURIComponent(t)),r.isNumber(n)&&a.push("expires="+new Date(n).toGMTString()),r.isString(o)&&a.push("path="+o),r.isString(s)&&a.push("domain="+s),i===!0&&a.push("secure"),document.cookie=a.join("; ")},read:function(e){var t=document.cookie.match(new RegExp("(^|;\\s*)("+e+")=([^;]*)"));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,"",Date.now()-864e5)}}}():function(){return{write:function(){},read:function(){return null},remove:function(){}}}()},function(e,t){"use strict";e.exports=function(e){return/^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(e)}},function(e,t){"use strict";e.exports=function(e,t){return t?e.replace(/\/+$/,"")+"/"+t.replace(/^\/+/,""):e}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){t=t||{};var n={};return r.forEach(["url","method","params","data"],function(e){"undefined"!=typeof t[e]&&(n[e]=t[e])}),r.forEach(["headers","auth","proxy"],function(o){r.isObject(t[o])?n[o]=r.deepMerge(e[o],t[o]):"undefined"!=typeof t[o]?n[o]=t[o]:r.isObject(e[o])?n[o]=r.deepMerge(e[o]):"undefined"!=typeof e[o]&&(n[o]=e[o])}),r.forEach(["baseURL","transformRequest","transformResponse","paramsSerializer","timeout","withCredentials","adapter","responseType","xsrfCookieName","xsrfHeaderName","onUploadProgress","onDownloadProgress","maxContentLength","validateStatus","maxRedirects","httpAgent","httpsAgent","cancelToken","socketPath"],function(r){"undefined"!=typeof t[r]?n[r]=t[r]:"undefined"!=typeof e[r]&&(n[r]=e[r])}),n}},function(e,t){"use strict";function n(e){this.message=e}n.prototype.toString=function(){return"Cancel"+(this.message?": "+this.message:"")},n.prototype.__CANCEL__=!0,e.exports=n},function(e,t,n){"use strict";function r(e){if("function"!=typeof e)throw new TypeError("executor must be a function.");var t;this.promise=new Promise(function(e){t=e});var n=this;e(function(e){n.reason||(n.reason=new o(e),t(n.reason))})}var o=n(23);r.prototype.throwIfRequested=function(){if(this.reason)throw this.reason},r.source=function(){var e,t=new r(function(t){e=t});return{token:t,cancel:e}},e.exports=r},function(e,t){"use strict";e.exports=function(e){return function(t){return e.apply(null,t)}}}])});
//# sourceMappingURL=axios.min.map
app/plugin/vue.min.js 0 → 100644
浏览文件 @ 8501bfa4
此差异已折叠。
getData/app.js 0 → 100644
浏览文件 @ 8501bfa4
const puppeteer = require('puppeteer')
const fs = require('fs')
let jsonDataList = [];
async function getList() {
}
(async () => {
const browser = await puppeteer.launch({
headless: false
})
const page = await browser.newPage()
await page.goto(`http://music.wandhi.com/?name=周杰伦&type=qq`)
page.on('response', async res => {
const url = res.url()
if (url === 'http://music.wandhi.com/') {
const data = await res.json()
const list = data.data
jsonDataList.push(...list)
function writeData() {
fs.writeFile('jayjsondata.json', JSON.stringify(jsonDataList, null, 4), (e, result) => {
if (e) {
console.error(e)
return
}
console.log(result)
})
}
if (list.length >= 10) {
console.log('下一页')
setTimeout(() => {
page.click('.aplayer-more').catch(e => {
writeData()
})
}, 300)
} else {
writeData()
}
}
})
})()
getData/jayjsondata.json 0 → 100644
浏览文件 @ 8501bfa4
此差异已折叠。
getData/package.json 0 → 100644
浏览文件 @ 8501bfa4
{
"name": "getdata",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.19.0",
"puppeteer": "^1.17.0"
}
}
gulpfile.js 0 → 100644
浏览文件 @ 8501bfa4
const gulp = require('gulp');
const browserSync = require('browser-sync');
const sass = require('gulp-sass');
const px2rem = require('gulp-px2rem-plugin');
function swallowError(error) {
console.error(error.toString());
this.emit('end')
}
// 编译sass
gulp.task('sass', function () {
gulp.src('app/css/base.scss')
.pipe(sass())
.on('error', swallowError)
.pipe(gulp.dest('app/css'));
});
// 刷新页面
gulp.task('reload', function () {
return browserSync.reload();
});
// 监视文件改动并重新载入
gulp.task('serve', ['sass'], function () {
browserSync({
server: {
baseDir: 'app'
}
});
// 监听变化文件
const watch_files = [
'*.html',
'css/**/*.css',
'css/**/*.scss',
'js/**/*.js',
'plugin/**/*.js',
'plugin/**/*.css'
];
// 变化时执行的方法
const watch_methods = ['sass', 'reload'];
gulp.watch(watch_files, {cwd: 'app'}, watch_methods);
});
package.json 0 → 100644
浏览文件 @ 8501bfa4
{
"name": "new1",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"browser-sync": "^2.24.4",
"gulp": "^3.9.1",
"gulp-px2rem": "^1.0.12",
"gulp-px2rem-plugin": "^0.4.0",
"gulp-sass": "^4.0.1"
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或