master

分支 (1)

管理

管理

master

eraser-music
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
    <meta name="keywords" content="橡皮音乐 橡皮音乐官网 网页版 橡皮音乐网页版 歌曲 下载 免费下载 在线播放 流行音乐 lifanko">
    <meta name="description" content="橡皮音乐 橡皮音乐官网 网页版 橡皮音乐网页版 歌曲 下载 免费下载 在线播放 流行音乐 lifanko">
    <title>橡皮音乐官网 - 最新最全音乐全部免费下载</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        .brand {
            display: none;
        }
    </style>
    <link type="text/css" href="assets/css/index.css" rel="stylesheet">
</head>
<body>
<div id="eraser_music">
    <div class="background">
        <div class="mask"></div>
        <div class="image" id="image" :style="{backgroundImage: 'url(' + present.album + ')'}"></div>
    </div>
    <div class="brand">
        <div class="brand-name">橡皮音乐Pro</div>
        <div class="brand-slogan">自由下载你喜欢的每一首歌。</div>
    </div>
    <div class="box">
        <div class="player">
            <!--封面-->
            <div :class="'album' + (present.status === 'playing' ? ' active':'')">
                <img :src="present.album" v-on:error="err_album()" alt="album">
            </div>
            <!--歌手信息-->
            <div class="info">
                <div class="title">
                    <div class="name" v-if="present.name">{{present.name}}</div>
                    <div class="name" v-if="!present.name">未在播放</div>
                    <div class="author">{{present.author}}</div>
                </div>
                <div class="download" v-on:click="download" v-if="present.name">下载</div>
            </div>
            <!--控制台-->
            <div class="control">
                <div class="progress">
                    <div class="time_line">
                        <input type="range" min="0" :max="present.total" step="1" v-model="present.counter" class="bar"
                               v-on:input="seek_start" v-on:click="seek_end">
                    </div>
                    <div class="time_text">
                        <div>{{present.past}}</div>
                        <div v-if="present.seeking" class="seek">{{sec2time(present.counter)}}</div>
                        <div>{{present.left}}</div>
                    </div>
                </div>
                <div class="ctl">
                    <div v-on:click="prev"><img src="assets/img/prev.png" alt="上一曲"></div>
                    <div v-on:click="play">
                        <img v-show="present.status==='playing'" src="assets/img/pause.png" alt="暂停">
                        <img v-show="present.status!=='playing'" src="assets/img/play.png" alt="播放">
                    </div>
                    <div v-on:click="next"><img src="assets/img/next.png" alt="上一曲"></div>
                </div>
                <div class="volume">
                    <div>
                        <svg t="1628931994752" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="807" width="128" height="128">
                            <path d="M512 648c92.8 0 168-75.2 168-168V304c0-92.8-75.2-168-168-168S344 211.2 344 304v176c0 92.8 75.2 168 168 168zM392 304c0-65.6 54.4-120 120-120s120 54.4 120 120v176c0 65.6-54.4 120-120 120s-120-54.4-120-120V304z"
                                  p-id="808" fill="#bfbfbf"></path>
                            <path d="M768 408c-12.8 0-24 11.2-24 24v56C744 616 640 720 512 720s-232-104-232-232V432c0-12.8-11.2-24-24-24s-24 11.2-24 24v56c0 145.6 113.6 267.2 256 278.4v73.6h-64c-12.8 0-24 11.2-24 24s11.2 24 24 24h176c12.8 0 24-11.2 24-24s-11.2-24-24-24h-64v-73.6c142.4-12.8 256-132.8 256-278.4V432c0-12.8-11.2-24-24-24z"
                                  p-id="809" fill="#bfbfbf"></path>
                        </svg>
                    </div>
                    <div class="volume_line">
                        <label>
                            <input type="range" v-model="volume" v-on:change="set_volume">
                        </label>
                    </div>
                </div>
            </div>
            <!--信息-->
            <div class="user">
                <div><img src="assets/img/info.png" alt="icon"></div>
                <div class="label">
                    <div>标识符：{{uid}}</div>
                    <div class="version">
                        <div>后台：{{version.backend ? 'v' + version.backend :'无法连接'}}</div>
                        <div>播放器：v{{version.player}}</div>
                        <div>&copy; <a>lifanko</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="resource">
            <!--菜单栏-->
            <div class="menu">
                <div :class="menu.a" v-on:click="sw_menu('a')">搜索</div>
                <div :class="menu.b" v-on:click="sw_menu('b')">歌词</div>
                <div :class="menu.c" v-on:click="sw_menu('c')">列表</div>
            </div>
            <!--搜索tab-->
            <div class="search" v-show="menu.a==='active'">
                <label>
                    <input type="text" v-model="keyword" placeholder="输入 歌曲/歌手/专辑 开始搜索" autofocus autocomplete="off">
                </label>
                <div class="head">
                    <div>请选择搜索目标</div>
                </div>

                <div v-if="searching.msg === undefined" class="no_target">后端接口（数据）错误，无法找到搜索目标</div>

                <div class="lib" v-if="!searching.msg">
                    <div v-for="(item, index) in search_param.platform" v-on:click="search(index)">{{item}}</div>
                </div>
                <div v-if="searching.msg" class="tip">{{searching.msg}}</div>
                <div class="head">
                    <div>热门搜索</div>
                </div>
                <div class="hot">
                    <div class="item" v-for="item in search_param.hot" v-on:click="set_keyword(item)">{{item}}</div>
                </div>
                <div class="no_list" v-if="search_param.hot.length===0">无记录</div>
                <div class="head">
                    <div>历史搜索</div>
                    <div v-if="search_param.history.length" v-on:click="wipe('history_search')">
                        <span class="btn" v-if="wipe_time.history_search===0">清除</span>
                        <span class="btn" v-else>请在 {{wipe_time.history_search}}秒内 再次点击</span>
                    </div>
                </div>
                <div class="hot">
                    <div class="item" v-for="item in search_param.history" v-on:click="set_keyword(item)">{{item}}</div>
                </div>
                <div class="no_list" v-if="search_param.history.length===0">无记录</div>
            </div>
            <!--歌词tab-->
            <div class="scroll-view" v-show="menu.b==='active'"
                 style="margin-top: 10px;overflow: hidden;max-height: 567px;">
                <div class="lyric" :style="LYRIC.style">
                    <div v-for="item in LYRIC.resource" :class="item.active ? 'paragraph active':'paragraph'">
                        {{item.text}}
                    </div>
                </div>
            </div>
            <!--列表tab-->
            <div class="scroll-view" v-show="menu.c==='active'">
                <div class="head">
                    <div>待播清单</div>
                    <div class="pending" v-if="pending">正在加载歌曲...</div>
                </div>
                <div class="list" v-if="list.length">
                    <div class="item" v-for="(item, index) in list">
                        <div><img :src="item.album" alt="album" v-on:error="err_album('list',index)"></div>
                        <div :class="present.id === item.id?'info active':'info'" v-on:click="select(item.id)">
                            <div class="song">
                                <div class="name">{{item.name}}</div>
                                <div class="author">{{item.author}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="no_list" v-if="list.length===0">无待播内容，去<a v-on:click="sw_menu('a')">搜索</a>音乐</div>
                <div class="head">
                    <div>历史播放</div>
                    <div v-if="history.length" v-on:click="wipe('history_play')">
                        <span class="btn" v-if="wipe_time.history_play===0">清除</span>
                        <span class="btn" v-else>请在 {{wipe_time.history_play}}秒内 再次点击</span>
                    </div>
                </div>
                <div class="list" v-if="history.length">
                    <div class="item" v-for="(item, index) in history">
                        <div class="list_album"><img :src="item.album" alt="album"
                                                     v-on:error="err_album('history',index)"></div>
                        <div class="info" v-on:click="add(index)">
                            <div class="song">
                                <div class="name">{{item.name}}</div>
                                <div class="author">{{item.author}}</div>
                            </div>
                            <div class="extra">
                                <div class="source">{{item.platform_text}}</div>
                                <div class="time">{{item.timestamp}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="no_list" v-if="history.length===0">暂无播放历史</div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.lifanko.cn/jquery-2.1.1.min.js"></script>
<script src="https://cdn.lifanko.cn/js/vue.min.js"></script>
<script src="https://cdn.lifanko.cn/js/tip.min.js"></script>
<script src="https://cdn.lifanko.cn/js/MTitle.min.js"></script>
<script src="assets/js/EraserMusic.js"></script>
</body>
</html>