Skip to content

Commit adbcca5

Browse files
hzzlyhzzly
committed
🎨 页面重构和better-scroll加入
1 parent 008f1e5 commit adbcca5

Some content is hidden

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

44 files changed

+3635
-1026
lines changed

‎README.md

+5-6
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ $ npm start
3333
> * [vue文档](https://cn.vuejs.org/)
3434
> * [vue-router文档](https://router.vuejs.org/zh-cn/)
3535
> * [vuex文档](https://vuex.vuejs.org/zh-cn/) 不想看文档的可以看看我这篇博客[vuex学习实践笔记](https://hzzly.github.io/2017/04/04/vuex%E5%AD%A6%E4%B9%A0%E5%AE%9E%E8%B7%B5%E7%AC%94%E8%AE%B0/)
36+
> * [better-scroll文档](https://ustbhuangyi.github.io/better-scroll/#/)
3637
> * [axios文档](https://www.npmjs.com/package/axios) 或者这篇博客 [Vuex2 与 Axios 开发](https://blog.ygxdxx.com/2017/02/01/Vuex2&Axios-Develop/)(我也是参考这篇，感谢作者😁)
3738
> * [es6(阮一峰的es6入门)](http://es6.ruanyifeng.com/) 可以参考[我的es6之路](http://hjingren.cn/tag/#es6)(还在继续,轻喷)
3839
> * [webpack2(中文网站)](https://doc.webpack-china.org/)
@@ -46,12 +47,10 @@ $ npm start
4647
### 实现的功能
4748

4849
#### 1、首页
49-
> - [x] 轮播
50-
> - [x] 个性推荐[流行、古典、轻音乐、流行]
51-
> - [x] 歌曲操作
52-
> - [x] 加入播放列表
53-
> - [ ] 喜欢
54-
> - [ ] 分享
50+
> - [x] 个性推荐
51+
> - [x] 歌手列表
52+
> - [x] 排行榜
53+
> - [x] 搜索
5554
5655
#### 2、底部播放控件
5756
> - [x] 播放

‎build/webpack.base.conf.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ module.exports = {
2222
extensions: ['.js', '.vue', '.json'],
2323
alias: {
2424
'vue$': 'vue/dist/vue.esm.js',
25-
'@': resolve('src')
25+
'@': resolve('src'),
26+
'common': resolve('src/common')
2627
}
2728
},
2829
module: {

‎index.html

+30-26
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6-
<meta http-equiv="Cache-Control" content="no-siteapp"/>
7-
<meta name="renderer" content="webkit"> <!-- 启用360浏览器的极速模式(webkit) -->
8-
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 避免IE使用兼容模式 -->
9-
<meta name="screen-orientation" content="portrait">
10-
<meta name="x5-orientation" content="portrait">
11-
<meta name="full-screen" content="yes">
12-
<meta name="x5-fullscreen" content="true">
13-
<meta name="x5-page-mode" content="app">
14-
<meta name="browsermode" content="application">
15-
<meta name="msapplication-tap-highlight" content="no">
16-
<meat name="format-detection" content="telephone=no,email=no,adress=no"></meat>
17-
<meta name="copyright" content="hzzly">
18-
<meta name="keywords" content="html5,css3,vue,axios,vuex"> <!-- 关键词 -->
19-
<meta name="description" content="hzzly,magic-music"> <!-- 网站内容描述 -->
20-
<meta name="author" content="hzzly,hjingren@aliyun.com"> <!-- 作者 -->
21-
<link rel="shortcut icon" href="http://hzzly.net/magic-music/favicon.ico" />
22-
<title>magic-music</title>
23-
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
24-
</head>
25-
<body>
26-
<div id="app"></div>
27-
<!-- built files will be auto injected -->
28-
</body>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6+
<meta http-equiv="Cache-Control" content="no-siteapp" />
7+
<meta name="renderer" content="webkit"> <!-- 启用360浏览器的极速模式(webkit) -->
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 避免IE使用兼容模式 -->
9+
<meta name="screen-orientation" content="portrait">
10+
<meta name="x5-orientation" content="portrait">
11+
<meta name="full-screen" content="yes">
12+
<meta name="x5-fullscreen" content="true">
13+
<meta name="x5-page-mode" content="app">
14+
<meta name="browsermode" content="application">
15+
<meta name="msapplication-tap-highlight" content="no">
16+
<meat name="format-detection" content="telephone=no,email=no,adress=no"></meat>
17+
<meta name="copyright" content="hzzly">
18+
<meta name="keywords" content="html5,css3,vue,axios,vuex"> <!-- 关键词 -->
19+
<meta name="description" content="hzzly,magic-music"> <!-- 网站内容描述 -->
20+
<meta name="author" content="hzzly,hjingren@aliyun.com"> <!-- 作者 -->
21+
<link rel="shortcut icon" href="http://hzzly.net/magic-music/favicon.ico" />
22+
<title>magic-music</title>
23+
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
24+
</head>
25+
<body>
26+
<div id="app"></div>
27+
<!-- built files will be auto injected -->
28+
<!-- <script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
29+
<script>
30+
eruda.init();
31+
</script> -->
32+
</body>
2933
</html>

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"axios": "^0.16.1",
1414
"better-scroll": "^1.13.2",
15+
"fastclick": "^1.0.6",
1516
"node-sass": "^4.5.2",
1617
"qs": "^6.4.0",
1718
"sass-loader": "^6.0.3",

‎src/App.vue

+116-124
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
<template>
2-
<div id="app">
3-
<v-header v-show="header"></v-header>
4-
<div class="container">
5-
<transition :name="tansitionName" mode="out-in">
6-
<router-view></router-view>
7-
</transition>
8-
</div>
9-
<v-playbar v-show="playBar"></v-playbar>
10-
11-
<!--公用组件-->
12-
<v-sidebar></v-sidebar>
13-
<v-toast v-show="showToast"></v-toast>
14-
<v-loading v-show="showPlayLoading" class="play-loading"></v-loading>
15-
<transition name="fold">
16-
<v-play v-show="showPlay"></v-play>
17-
</transition>
18-
</div>
2+
<div id="app">
3+
<v-header @left="showSidebar">
4+
<i slot="left-icon" class="icon">&#xe692;</i>
5+
<span slot="content">Magic Music</span>
6+
<router-link slot="right-icon" to="/search">
7+
<i class="icon">&#xe638;</i>
8+
</router-link>
9+
</v-header>
10+
<v-tab></v-tab>
11+
<keep-alive>
12+
<router-view></router-view>
13+
</keep-alive>
14+
<v-playbar></v-playbar>
15+
16+
<!--公用组件-->
17+
<v-sidebar></v-sidebar>
18+
<v-toast v-show="showToast"></v-toast>
19+
<!-- <v-loading v-show="showPlayLoading" class="play-loading"></v-loading> -->
20+
<transition name="fold">
21+
<v-play v-show="showPlay"></v-play>
22+
</transition>
23+
</div>
1924
</template>
2025

2126
<script>
2227
import header from '@/components/header'
28+
import tab from '@/components/tab'
2329
import playbar from '@/components/playbar'
2430
import play from '@/components/play'
2531
import sidebar from '@/components/sidebar'
@@ -31,126 +37,112 @@ import { mapGetters } from 'vuex'
3137
import api from './api'
3238
3339
export default {
34-
name: 'app',
35-
components: {
36-
'v-header': header,
37-
'v-playbar': playbar,
38-
'v-play': play,
39-
'v-sidebar': sidebar,
40-
'v-toast': toast,
41-
'v-loading': loading
42-
},
43-
created() {
44-
if (!this.audioUrl) {
45-
api.MusicUrl(this.audio[0].id)
46-
.then(res => {
47-
this.$store.dispatch('setAudioUrl', res.data[0].url)
48-
})
49-
}
50-
this.$store.dispatch('getMusicInfo', this.audio[0].id)
51-
},
52-
data() {
53-
return {
54-
}
55-
},
56-
computed: {
57-
playBar() {
58-
return true
59-
},
60-
header() {
61-
return this.$route.path.split('/')[1] == 'search' || this.$route.path.split('/')[1] == 'rank' ? false : true
62-
},
63-
...mapGetters([
64-
'showSidebar',
65-
'showToast',
66-
'showPlay',
67-
'audio',
68-
'audioUrl',
69-
'showPlayLoading'
70-
]),
71-
tansitionName() {
72-
switch(this.$route.path) {
73-
case '/collection':
74-
return 'slide-left'
75-
default:
76-
return 'slide-right'
77-
}
78-
}
79-
},
40+
name: 'app',
41+
components: {
42+
'v-header': header,
43+
'v-tab': tab,
44+
'v-playbar': playbar,
45+
'v-play': play,
46+
'v-sidebar': sidebar,
47+
'v-toast': toast,
48+
'v-loading': loading
49+
},
50+
created() {
51+
// if (!this.audioUrl) {
52+
// api.MusicUrl(this.audio[0].id)
53+
// .then(res => {
54+
// this.$store.dispatch('setAudioUrl', res.data[0].url)
55+
// })
56+
// }
57+
// this.$store.dispatch('getMusicInfo', this.audio[0].id)
58+
},
59+
data() {
60+
return {
61+
}
62+
},
63+
computed: {
64+
header() {
65+
return this.$route.path.split('/')[1] == 'search' || this.$route.path.split('/')[1] == 'rank' ? false : true
66+
},
67+
...mapGetters([
68+
'showToast',
69+
'showPlay',
70+
'audio',
71+
'audioUrl',
72+
'showPlayLoading'
73+
]),
74+
},
75+
methods: {
76+
showSidebar() {
77+
this.$store.dispatch('setShowSidebar', true)
78+
}
79+
}
8080
}
8181
</script>
8282

8383
<style lang="scss">
84-
@import './assets/css/function';
84+
@import "./assets/css/function";
8585
8686
@font-face {
87-
font-family: 'icon';
88-
/* project id 277165 */
89-
src: url('//at.alicdn.com/t/font_kmywdojzhchj8aor.eot');
90-
src: url('//at.alicdn.com/t/font_kmywdojzhchj8aor.eot?#iefix') format('embedded-opentype'),
91-
url('//at.alicdn.com/t/font_kmywdojzhchj8aor.woff') format('woff'),
92-
url('//at.alicdn.com/t/font_kmywdojzhchj8aor.ttf') format('truetype'),
93-
url('//at.alicdn.com/t/font_kmywdojzhchj8aor.svg#iconfont') format('svg');
87+
font-family: "icon";
88+
/* project id 277165 */
89+
src: url("//at.alicdn.com/t/font_kmywdojzhchj8aor.eot");
90+
src: url("//at.alicdn.com/t/font_kmywdojzhchj8aor.eot?#iefix")
91+
format("embedded-opentype"),
92+
url("//at.alicdn.com/t/font_kmywdojzhchj8aor.woff") format("woff"),
93+
url("//at.alicdn.com/t/font_kmywdojzhchj8aor.ttf") format("truetype"),
94+
url("//at.alicdn.com/t/font_kmywdojzhchj8aor.svg#iconfont") format("svg");
9495
}
9596
9697
.icon {
97-
font-family: "icon" !important;
98-
font-size: 18px;
99-
font-style: normal;
100-
color: #ffffff;
98+
font-family: "icon" !important;
99+
font-size: 18px;
100+
font-style: normal;
101+
color: #ffffff;
101102
}
102103
103-
#app {
104-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
105-
-webkit-font-smoothing: antialiased;
106-
-moz-osx-font-smoothing: grayscale;
107-
display: flex;
108-
flex-direction: column;
109-
height: 100%;
110-
background: rgba(8, 5, 58, 0.9);
111-
.play-loading {
112-
top: 8rem;
113-
z-index: 99;
114-
}
115-
.container {
116-
flex: 1;
117-
overflow: auto;
118-
overflow-x: hidden;
119-
}
120-
.slide-left-enter-active {
121-
animation: slideLeft .3s;
122-
}
123-
.slide-right-enter-active {
124-
animation: slideRight .3s;
125-
}
126-
127-
.fold-enter-active,
128-
.fold-leave-active {
129-
transition: transform .3s ease-in;
130-
}
131-
.fold-enter,
132-
.fold-leave-active {
133-
transform: translate3d(0, 100%, 0);
134-
}
104+
html,
105+
body {
106+
line-height: 1;
107+
font-family: PingFang SC, STHeitiSC-Light, Helvetica-Light, arial, sans-serif;
108+
-webkit-user-select: none;
109+
-moz-user-select: none;
110+
-ms-user-select: none;
111+
user-select: none;
112+
-webkit-tap-highlight-color: transparent;
113+
background: rgba(8, 5, 58, 0.9);
114+
color: #fff;
135115
}
136116
137-
@keyframes slideLeft {
138-
from {
139-
transform: translate3d(100%, 0, 0);
140-
visibility: visible;
141-
}
142-
to {
143-
transform: translate3d(0, 0, 0);
144-
}
145-
}
117+
#app {
118+
font-family: "Avenir", Helvetica, Arial, sans-serif;
119+
-webkit-font-smoothing: antialiased;
120+
-moz-osx-font-smoothing: grayscale;
121+
display: flex;
122+
flex-direction: column;
123+
.play-loading {
124+
top: 8rem;
125+
z-index: 99;
126+
}
127+
.container {
128+
flex: 1;
129+
overflow: auto;
130+
overflow-x: hidden;
131+
}
132+
.slide-left-enter-active {
133+
animation: slideLeft 0.3s;
134+
}
135+
.slide-right-enter-active {
136+
animation: slideRight 0.3s;
137+
}
146138
147-
@keyframes slideRight {
148-
from {
149-
transform: translate3d(-100%, 0, 0);
150-
visibility: visible;
151-
}
152-
to {
153-
transform: translate3d(0, 0, 0);
154-
}
139+
.fold-enter-active,
140+
.fold-leave-active {
141+
transition: transform 0.3s ease-in;
142+
}
143+
.fold-enter,
144+
.fold-leave-active {
145+
transform: translate3d(0, 100%, 0);
146+
}
155147
}
156148
</style>

0 commit comments

Comments
 (0)