Skip to content

B
beyond-clouds-front
Commit e95b9a05 by yanju
Options

Merge branch 'fix-index-data-load' into 'master' 

合并home和/

See merge request pigbigbig/beyond-clouds-front!25
parents 4238d569 d8dbb8ae
Showing with 129 additions and 149 deletions
components/pc/pageHeader.vue
...@@ -9,9 +9,9 @@ ...@@ -9,9 +9,9 @@
pluginspage="http://www.adobe.com/svg/viewer/install/" /> pluginspage="http://www.adobe.com/svg/viewer/install/" />
<ul> <ul>
<nuxt-link tag="li" to="/home"> <nuxt-link tag="li" to="/">
<span :style="{color:route==='home'||route==='index'||route===''?'#00AAE6':'#666'}">首页</span> <span :style="{color:route==='index'||route===''?'#00AAE6':'#666'}">首页</span>
<div class="abs-line" v-if="route==='home'||route==='index'||route===''"></div> <div class="abs-line" v-if="route==='index'||route===''"></div>
</nuxt-link> </nuxt-link>
<nuxt-link tag="li" to="/project"> <nuxt-link tag="li" to="/project">
<span :style="{color:route==='project'?'#00AAE6':'#666'}">项目</span> <span :style="{color:route==='project'?'#00AAE6':'#666'}">项目</span>
......
pages/home.vue deleted 100644 → 0
<template>
<div class="home-container">
<div class="home-container__l">
<banner :imgArr="imgArr" style="margin-top: 40px"></banner>
<card-container style="margin-top: 40px" title="项目推荐" label="换一换" more="加载更多">
<project-card v-for="(val,index) in projectList" :key="val.projectId" :info="val"></project-card>
</card-container>
<card-container style="margin-top: 16px" title="精选博文" label="换一换" more="加载更多">
<project-card v-for="(val,index) in blogList" :key="val.blogId" :info="val"></project-card>
</card-container>
</div>
<div class="home-container__r">
<card-container style="margin-top: 40px" title="最新资讯" label="换一换" more="更多">
</card-container>
<card-container style="margin-top: 16px" title="话题热搜榜" label="实时更新" more="更多">
</card-container>
<card-container style="margin-top: 16px" title="社区精英" label="换一换" more="更多">
</card-container>
<card-container style="margin-top: 16px" title="推荐问答" label="换一换" more="更多">
</card-container>
</div>
</div>
</template>
<script>
import Banner from '../components/pc/banner';
import CardContainer from '../components/pc/cardContainer';
import ProjectCard from '../components/pc/projectCard';
import config from '../action/config';
export default {
async asyncData ({ $axios }) {
let blogList = await $axios.$get(config.api.get.Blog.list,{
params:{
page:1,
size:3,
}
});
let projectList = await $axios.$get(config.api.get.Project.list,{
params:{
page:1,
size:3,
}
});
return {blogList:blogList.data.dataList,projectList:projectList.data.dataList}
},
data(){
return{
imgArr:[
'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
],
}
},
components:{
CardContainer,Banner,ProjectCard
},
methods:{
//获取数据
dataGetFunctionName(){
this.$axios.$get(config.api.get.Project.list,{
params:{
page:1,
size:1
}
}).then((response)=>{
//处理response
})
},
//提交数据
dataPostFunctionName(){
this.$axios.$post(config.api.post.Project.release,{
title:'',
}).then((response)=>{
//处理response
})
},
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
},
},
mounted(){
// message 使用方法
// this.dataPostFunctionName();
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style lang="scss" scoped>
.home-container{
width: $pageWidth;
margin:0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: flex-start;
.home-container__l{
overflow:hidden;
width:938*$length;
}
.home-container__r{
overflow:hidden;
width:302*$length;
}
}
</style>
pages/index.vue
<template> <template>
<home></home> <div class="home-container">
<div class="home-container__l">
<banner :imgArr="imgArr" style="margin-top: 40px"></banner>
<card-container style="margin-top: 40px" title="项目推荐" label="换一换" more="加载更多">
<project-card v-for="(val,index) in projectList" :key="val.projectId" :info="val"></project-card>
</card-container>
<card-container style="margin-top: 16px" title="精选博文" label="换一换" more="加载更多">
<project-card v-for="(val,index) in blogList" :key="val.blogId" :info="val"></project-card>
</card-container>
</div>
<div class="home-container__r">
<card-container style="margin-top: 40px" title="最新资讯" label="换一换" more="更多">
</card-container>
<card-container style="margin-top: 16px" title="话题热搜榜" label="实时更新" more="更多">
</card-container>
<card-container style="margin-top: 16px" title="社区精英" label="换一换" more="更多">
</card-container>
<card-container style="margin-top: 16px" title="推荐问答" label="换一换" more="更多">
</card-container>
</div>
</div>
</template> </template>
<script> <script>
import Home from './home'; import Banner from '../components/pc/banner';
import CardContainer from '../components/pc/cardContainer';
import ProjectCard from '../components/pc/projectCard';
import config from '../action/config';
export default { export default {
async asyncData ({ $axios }) {
let blogList = await $axios.$get(config.api.get.Blog.list,{
params:{
page:1,
size:3,
}
});
let projectList = await $axios.$get(config.api.get.Project.list,{
params:{
page:1,
size:3,
}
});
return {blogList:blogList.data.dataList,projectList:projectList.data.dataList}
},
data(){ data(){
return{ return{
imgArr:[
'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
],
} }
}, },
components:{ components:{
Home
CardContainer,Banner,ProjectCard
},
methods:{
//获取数据
dataGetFunctionName(){
this.$axios.$get(config.api.get.Project.list,{
params:{
page:1,
size:1
}
}).then((response)=>{
//处理response
})
},
//提交数据
dataPostFunctionName(){
this.$axios.$post(config.api.post.Project.release,{
title:'',
}).then((response)=>{
//处理response
})
},
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
},
},
mounted(){
// message 使用方法
// this.dataPostFunctionName();
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
} }
} }
</script> </script>
<style lang="scss" scoped>
.home-container{
width: $pageWidth;
margin:0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: flex-start;
.home-container__l{
overflow:hidden;
width:938*$length;
}
.home-container__r{
overflow:hidden;
width:302*$length;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment