Skip to content

Commit 8219569

Browse files
bluezhanbluezhan
committed
initial vue3 base code
1 parent 3e6ca7a commit 8219569

File tree

165 files changed

+21775
-225
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

165 files changed

+21775
-225
lines changed

‎README.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1-
# vue3-music
2-
vue3 music webapp
1+
# vue3 music
2+
3+
key: vue3、music、webapp
4+
5+
es6 音频库

‎package-lock.json‎

Lines changed: 12620 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
2-
"name": "vue3-awesome-demo",
2+
"name": "vue3-music",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
6+
"start": "npm run serve",
67
"serve": "vue-cli-service serve",
78
"build": "vue-cli-service build",
89
"lint": "vue-cli-service lint"
@@ -41,4 +42,4 @@
4142
"typescript": "~3.9.7",
4243
"vue-cli-plugin-vue-next": "~0.1.3"
4344
}
44-
}
45+
}

‎src/assets/Group171.svg‎

Lines changed: 168 additions & 0 deletions
Loading

‎src/components/AudioPlayer.vue‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<template>
2+
<div class="music">
3+
<GithubCorner />
4+
<div class="ms_player_wrapper">
5+
<div class="ms_player_close">
6+
<i class="fa fa-angle-up" aria-hidden="true"></i>
7+
</div>
8+
<div class="player_mid">
9+
<div class="audio-player">
10+
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
11+
<div
12+
id="jp_container_1"
13+
class="jp-audio"
14+
role="application"
15+
aria-label="media player"
16+
>
17+
<div class="player_left">
18+
<div class="ms_play_song">
19+
<div class="play_song_name">
20+
<a href="javascript:void(0);" id="playlist-text">
21+
<div class="jp-now-playing flex-item">
22+
<div class="jp-track-name"></div>
23+
<div class="jp-artist-name"></div>
24+
</div>
25+
</a>
26+
</div>
27+
</div>
28+
<div class="play_song_options">
29+
<ul>
30+
<li>
31+
<a href="#">
32+
<span class="song_optn_icon">
33+
<i class="ms_icon icon_download"></i>
34+
</span>
35+
download now
36+
</a>
37+
</li>
38+
<li>
39+
<a href="#">
40+
<span class="song_optn_icon">
41+
<i class="ms_icon icon_fav"></i>
42+
</span>
43+
Add To Favourites
44+
</a>
45+
</li>
46+
<li>
47+
<a href="#">
48+
<span class="song_optn_icon">
49+
<i class="ms_icon icon_playlist"></i>
50+
</span>
51+
Add To Playlist
52+
</a>
53+
</li>
54+
<li>
55+
<a href="#">
56+
<span class="song_optn_icon">
57+
<i class="ms_icon icon_share"></i>
58+
</span>
59+
Share
60+
</a>
61+
</li>
62+
</ul>
63+
</div>
64+
<span class="play-left-arrow">
65+
<i class="fa fa-angle-right" aria-hidden="true"></i>
66+
</span>
67+
</div>
68+
<!----Right Queue---->
69+
<div class="jp_queue_wrapper">
70+
<span class="que_text" id="myPlaylistQueue">
71+
<i class="fa fa-angle-up" aria-hidden="true"></i>
72+
queue
73+
</span>
74+
<div id="playlist-wrap" class="jp-playlist">
75+
<div class="jp_queue_cls">
76+
<i class="fa fa-times" aria-hidden="true"></i>
77+
</div>
78+
<h2>queue</h2>
79+
<div class="jp_queue_list_inner">
80+
<ul>
81+
<li>&nbsp;</li>
82+
</ul>
83+
</div>
84+
<div class="jp_queue_btn">
85+
<a
86+
href="javascript:;"
87+
class="ms_clear"
88+
data-toggle="modal"
89+
data-target="#clear_modal"
90+
>clear</a
91+
>
92+
<a
93+
href="clear_modal"
94+
class="ms_save"
95+
data-toggle="modal"
96+
data-target="#save_modal"
97+
>save</a
98+
>
99+
</div>
100+
</div>
101+
</div>
102+
<div class="jp-type-playlist">
103+
<div class="jp-gui jp-interface flex-wrap">
104+
<div class="jp-controls flex-item">
105+
<button class="jp-previous" tabindex="0">
106+
<i class="ms_play_control"></i>
107+
</button>
108+
<button class="jp-play" tabindex="0">
109+
<i class="ms_play_control"></i>
110+
</button>
111+
<button class="jp-next" tabindex="0">
112+
<i class="ms_play_control"></i>
113+
</button>
114+
</div>
115+
<div class="jp-progress-container flex-item">
116+
<div class="jp-time-holder">
117+
<span class="jp-current-time" role="timer" aria-label="time"
118+
>&nbsp;</span
119+
>
120+
<span class="jp-duration" role="timer" aria-label="duration"
121+
>&nbsp;</span
122+
>
123+
</div>
124+
<div class="jp-progress">
125+
<div class="jp-seek-bar">
126+
<div class="jp-play-bar">
127+
<div class="bullet"></div>
128+
</div>
129+
</div>
130+
</div>
131+
</div>
132+
<div class="jp-volume-controls flex-item">
133+
<div class="widget knob-container">
134+
<div class="knob-wrapper-outer">
135+
<div class="knob-wrapper">
136+
<div class="knob-mask">
137+
<div class="knob d3">
138+
<span></span>
139+
</div>
140+
<div class="handle"></div>
141+
<div class="round">
142+
<img src="images/svg/volume.svg" alt="" />
143+
</div>
144+
</div>
145+
</div>
146+
<!-- <input></input>-->
147+
</div>
148+
</div>
149+
</div>
150+
<div class="jp-toggles flex-item">
151+
<button class="jp-shuffle" tabindex="0" title="Shuffle">
152+
<i class="ms_play_control"></i>
153+
</button>
154+
<button class="jp-repeat" tabindex="0" title="Repeat">
155+
<i class="ms_play_control"></i>
156+
</button>
157+
</div>
158+
<div class="jp_quality_optn custom_select">
159+
<select>
160+
<option>quality</option>
161+
<option value="1">HD</option>
162+
<option value="2">High</option>
163+
<option value="3">medium</option>
164+
<option value="4">low</option>
165+
</select>
166+
</div>
167+
</div>
168+
</div>
169+
</div>
170+
</div>
171+
</div>
172+
<!--main div-->
173+
</div>
174+
</div>
175+
</template>
176+
177+
<script>
178+
// @ is an alias to /src
179+
import GithubCorner from "@/components/GithubCorner.vue";
180+
181+
export default {
182+
name: "About",
183+
components: {
184+
GithubCorner,
185+
},
186+
};
187+
</script>
188+
189+
<style lang="scss"></style>

0 commit comments

Comments
 (0)