Skip to content

Commit

Permalink
修改
Browse files Browse the repository at this point in the history
  • Loading branch information
@zoyopo
zoyopo committed Aug 14, 2018
1 parent bb3649b commit ade4167
Show file tree
Hide file tree
Showing 12 changed files with 215 additions and 88 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.DS_Store
node_modules/
!node_modules/vux
dist/
npm-debug.log
yarn-error.log
Expand Down
33 changes: 17 additions & 16 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,44 +34,45 @@
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"webpack-bundle-analyzer": "^2.9.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"node-notifier": "^5.1.2",
"node-sass": "^4.5.3",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"sass-loader": "^6.0.6",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"yaml-loader": "^0.4.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"vux-loader": "^1.0.56",
"vue-lazyload": "^1.2.6",
"vue-loader": "^13.3.0",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"portfinder": "^1.0.13",
"vux-loader": "^1.0.56",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.10.0",
"webpack-dev-server": "^2.9.1",
"webpack-hot-middleware": "^2.16.1",
"webpack-merge": "^4.1.0",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6"
"yaml-loader": "^0.4.0"
},
"engines": {
"node": ">= 4.0.0",
Expand Down
17 changes: 14 additions & 3 deletions src/components/Index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<template>
<div class="index">

<drawer width="200px;" :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#ddd', width: '200px'}">
<drawer width="340px;" :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#fff', width: '340px'}">

<div slot="drawer">
<div slot="drawer" class="menu-container">
<!-- 菜单内容 -->
<Menu></Menu>
</div>
<div>
<div class="main">
<x-header>
<div slot="overwrite-left">
<i class="fa fa-reorder" @click="showDrawer"></i>
Expand Down Expand Up @@ -72,8 +72,15 @@ export default {
</script>

<style lang="scss">
.vux-header{
background: #9bca4f !important;
}
.index {
height: 100%;
.main{
height: 100%;
}
.fa-reorder {
font-size: 2rem;
vertical-align: middle;
Expand All @@ -94,6 +101,10 @@ export default {
}
}
.menu-container{
height: 100%;
}
.title-icon {
margin-left: -30px; //用负外边距来把第一个padiding fix
i {
Expand Down
76 changes: 63 additions & 13 deletions src/components/Index/Menu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,72 @@
<template>
<ul>
<li>我的音乐</li>
<li>我的音乐</li>
<li>我的音乐</li>
<li>我的音乐</li>
<li>我的音乐</li>
<li>我的音乐</li>
<li>我的音乐</li>
<li>我的音乐</li>
</ul>
<div class="menu">
<div><img id='menu-top-pic' v-lazy="topPic" alt=""></div>
<group>
<cell title="我的消息" value=""></cell>
<cell title="会员中心" value=""></cell>
<cell title="商城" value=""></cell>
<cell title="在线听歌免流量" value=""></cell>
</group>
<group>
<cell title="我的消息" value=""></cell>
<cell title="会员中心" value=""></cell>
<cell title="商城" value=""></cell>
<cell title="在线听歌免流量" value=""></cell>
</group>
<group>
<cell title="我的消息" value=""></cell>
<cell title="会员中心" value=""></cell>
<cell title="商城" value=""></cell>
<cell title="在线听歌免流量" value=""></cell>
</group>
<div class="menu-bottom">
<div class="menu-bottom-item">夜间模式</div>
<div class="menu-bottom-item">设置</div>
<div class="menu-bottom-item">退出</div>
</div>
</div>
</template>

<script>
import { Cell } from "vux";
import { Group } from "vux";
const topPic = require("../../assets/logo.png");
export default {
name:'Menu'
name: "Menu",
components: {
Cell,
Group
},
data() {
return {
topPic: topPic
};
}
};
</script>

<style>
<style lang="scss" scoped>
#menu-top-pic {
width: 100%;
}
.menu {
height: calc(100% - 51px);
overflow: auto;
}
.menu-bottom {
position: fixed;
bottom: 0;
display: flex;
height: 50px;
line-height: 50px;
border-top: solid 1px #ddd;
width: 100%;
.menu-bottom-item {
padding-left: 6rem;
&:first-child {
padding-left: 0;
}
}
}
</style>

81 changes: 44 additions & 37 deletions src/components/Recomend.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
<template>

<div class="vux-demo">
<div class="rec-content">
<div v-if="picArray.length>0">
<slide :loop='loop' :autoPlay='autoPlay' :picArray="picArray" :style="{'margin-top':'10px'}">

</slide>
</div>
<circle-icon v-for="(item,index) in icons" :icon="item.name" :key="index" :class="'distance'" :style="index===0?{'margin-left':0}:''">
<!--去掉第一个元素的margin-->
<div>{{item.text}}</div>
</circle-icon>
<div class="song-sheets">
<sheet-label :title="'推荐歌单'"></sheet-label>
<grid :col=2 :cols=3>
<grid-item :classes="classes" label="Grid" v-for="item in contentArray" :key="item.id">
<img slot="icon" :src="item.picUrl">
<grid-item label="Grid" v-for="item in contentArray" :key="item.id" @click.prevent.native="goToSongSheet(item.id)">
<img slot="icon" v-lazy="item.picUrl">
<div slot="label">{{item.name}}</div>
<div class="right-top">
<i class="fa fa-headphones"></i>
Expand All @@ -24,14 +25,14 @@

</grid>
</div>
<div class="song-sheets">
<div class="song-sheets">
<sheet-label :title="'最新音乐'"></sheet-label>
<grid :col=2 :cols=3>
<grid-item :classes="classes" label="Grid" v-for="item in newsongs" :key="item.id">
<img slot="icon" :src="item.coverImgUrl">
<grid-item label="Grid" v-for="item in newsongs" :key="item.id" @click="goToSongSheet(item.id)">
<img slot="icon" v-lazy="item.coverImgUrl">
<div slot="label">{{item.name}}</div>
<div class="right-top">
<i class="fa fa-headphones"></i>
<!-- <i class="fa fa-headphones"></i> -->
<!-- <span>{{(item.playCount/10000).toFixed(2)+"W" }}
</span> -->
</div>
Expand All @@ -45,7 +46,7 @@
<script>
// import { Group, Cell } from 'vux'
import Slide from "components/Index/Slider.vue";
import { getFirstScreenData,getSongSheetsData} from "api/api.js";
import { getFirstScreenData, getSongSheetsData } from "api/api.js";
import { Grid, GridItem } from "vux";
import CircleIcon from "components/Recomend/CircleIcon";
import SheetLabel from "components/Recomend/SheetLabel";
Expand All @@ -66,41 +67,40 @@ export default {
// its initial state.
// msg: "Hello World!",
icons: [
{ name: "fa fa-book" },
{ name: "fa fa-book" },
{ name: "fa fa-book" },
{ name: "fa fa-book" }
{ name: "fa fa-book", text: "私人FM" },
{ name: "fa fa-book", text: "每日推荐" },
{ name: "fa fa-book", text: "歌单" },
{ name: "fa fa-book", text: "排行榜" }
],
loop: true,
autoPlay: true,
picArray: [],
videoArray: [],
partTitle: "推荐歌单",
contentArray: [],
classes: {
weui_grid__icon: {
width: "auto",
height: "auto"
}
},
newsongs:[]
// classes: {
// weui_grid__icon: {
// width: "auto",
// height: "auto"
// }
// },
newsongs: []
};
},
methods: {
async getAllData() {
//let vm = this;
let res = await getFirstScreenData();
let opts={
order:'new',
limit:6
}
let newsongs=await getSongSheetsData(opts,['playlistData'])
let opts = {
order: "new",
limit: 6
};
let newsongs = await getSongSheetsData(opts, ["playlistData"]);
console.log(res);
console.log(newsongs)
let newsong=newsongs[0];
if(newsong.data.code==200){
this.newsongs=newsong.data.playlists;
console.log(newsongs);
let newsong = newsongs[0];
if (newsong.data.code == 200) {
this.newsongs = newsong.data.playlists;
}
//封装了获取数据的方法
// .then(function(res) {
Expand All @@ -121,18 +121,25 @@ export default {
});
this.videoArray = privateContent.data.result;
}
},
goToSongSheet(id){
//this.$router.push({name:"SongSheet",params: {id}})=>这种写法无效
this.$router.push({path:`/songsheets`,params: {id}})
}
},
mounted() {
created() {
this.getAllData();
}
};
</script>

<style lang="scss" scoped>
.vux-demo {
<style lang="scss">
.rec-content {
text-align: center;
height: 85%;
overflow: auto;
}
.logo {
width: 100px;
Expand All @@ -149,10 +156,10 @@ export default {
text-overflow: ellipsis;
overflow: hidden;
}
.weui_grid__icon {
width: auto;
height: auto;
margin: 0 auto;
.weui-grid__icon {
width: auto !important;
height: auto !important;
margin: 0 auto !important;
}
.right-top {
position: absolute;
Expand Down
Loading

0 comments on commit ade4167

Please sign in to comment.