Skip to content

B
beyond-clouds-front
Commit 0a96c2fc by 高浩杰
Options

完成咨询展示页面对接

parent f9b24111
Showing with 223 additions and 23 deletions
components/pc/socialContactCard.vue
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<p class="card-content__word" v-html="handledContent"></p> <p class="card-content__word" v-html="handledContent"></p>
<div class="card-content__img1" v-if="pictures.length>1&&pictures.length<=4&&!showBanner"> <div class="card-content __img1" v-if="pictures.length>1&&pictures.length<=4&&!showBanner">
<div class="img-box" @click="clickToOpenBanner(index)" v-for="(value,index) in pictures" <div class="img-box" @click="clickToOpenBanner(index)" v-for="(value,index) in pictures"
:style="{marginRight:(index+1)===4?'0':'16px'}"> :style="{marginRight:(index+1)===4?'0':'16px'}">
<img :src="value" alt=""> <img :src="value" alt="">
......
pages/news/index.vue
...@@ -4,53 +4,87 @@ ...@@ -4,53 +4,87 @@
<card-container <card-container
title="新闻速递" title="新闻速递"
width="938px" width="938px"
height="1696px"
> >
<project-card></project-card> <project-card v-for="(val,index) in newsList" :key="val.contentId" :info="val"></project-card>
<project-card></project-card> <empty-card v-if="newsList.length===0" height="556px"></empty-card>
<project-card></project-card>
</card-container> </card-container>
<div class="pagination"> <div class="pagination">
<pagination style="margin: 0 auto;" pages="13" v-on:listenPageChange="changePage"></pagination> <pagination style="margin: 0 auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div> </div>
</div> </div>
<div class="news-container__r"> <div class="news-container__r">
<card-container <card-container
style="max-height: 426px;"
title="行业资讯" title="行业资讯"
label="换一换" label="换一换"
width="302px" width="302px"
height="426px"
> >
<div style="padding: 14px 16px;">
<div class="information-wrap" v-for="(val,index) in informationList" :key="val.contentId">
<p class="information-time">{{dateConvert(val.createTime)}}</p>
<p class="information-content">{{val.title}}</p>
</div>
</div>
</card-container> </card-container>
<card-container <card-container
style="margin-top: 16px" style="margin-top: 16px; max-height: 426px;"
title="招聘速递" title="招聘速递"
more="更多" more="更多"
width="302px" width="302px"
height="426px"
> >
<div class="software-container">
<div class="software-wrap" v-for="(val,index) in recruitmentList" :key="val.contentId">
<div class="software-img-wrap">
<img class="software-img"
:src="val.cover" alt="">
</div>
<div class="software-main">
<p class="software-title">{{val.title}}</p>
<p class="software-content">{{val.subTitle}}</p>
</div>
</div>
</div>
</card-container> </card-container>
<card-container <card-container
style="margin-top: 16px" style="margin-top: 16px; max-height: 426px;"
title="每周软件推荐" title="每周软件推荐"
label="周一3:00更新" label="周一3:00更新"
more="更多项目" more="更多项目"
width="302px" width="302px"
height="426px"
> >
<div class="software-container">
<div class="software-wrap" v-for="(val,index) in recruitmentList" :key="val.contentId">
<p class="software-rank">{{index + 1}}</p>
<div class="software-img-wrap">
<img class="software-img"
:src="val.cover" alt="">
</div>
<div class="software-main">
<p class="software-title">{{val.title}}</p>
<p class="software-content">{{val.subTitle}}</p>
</div>
</div>
</div>
</card-container> </card-container>
<card-container <card-container
style="margin-top: 16px" style="margin-top: 16px; max-height: 426px;"
title="软件更新" title="软件更新"
more="加载更多" more="加载更多"
width="302px" width="302px"
height="426px"
> >
<div class="software-container">
<div class="software-wrap" v-for="(val,index) in recruitmentList" :key="val.contentId">
<div class="software-img-wrap">
<img class="software-img"
:src="val.cover" alt="">
</div>
<div class="software-main">
<p class="software-title">{{val.title}}</p>
<p class="software-content">{{val.subTitle}}</p>
</div>
</div>
</div>
</card-container> </card-container>
</div> </div>
</div> </div>
...@@ -60,29 +94,195 @@ ...@@ -60,29 +94,195 @@
import CardContainer from "../../components/pc/cardContainer"; import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard"; import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination"; import Pagination from "../../components/pc/pagination";
import config from '../../action/config';
import EmptyCard from "../../components/pc/emptyCard";
import {dateConvert} from '../../action/utils/dataConvert'
export default { export default {
components: {ProjectCard, CardContainer,Pagination}, components: {EmptyCard, ProjectCard, CardContainer, Pagination},
data() {
return {
newsList: [],
informationList: [],
recruitmentList: [],
recommendedSoftwareList: [],
softwareUpdatesList: [],
pages: 1,
currentPage: 1
}
},
created() {
this.dataGetNewsList(1);
this.dataGetInformationList();
this.dataGetRecommendedSoftwareList();
this.dataGetRecruitmentList();
this.dataGetSoftwareUpdatesList();
},
methods: { methods: {
changePage(currentPage){ dataGetNewsList(currentPage) {
let params = {
page: currentPage,
size: 12,
type: 1
};
this.$axios.$get(config.api.get.Content.list + '/13/contents',
{
params: params
}).then((response) => {
console.log(response);
this.newsList = response.data.dataList;
this.pages = response.data.totalPage;
})
},
dataGetInformationList() {
this.$axios.$get(config.api.get.Content.list + '/14/contents', {
params: {
page: 1,
size: 6,
type: 1
}
}).then((response) => {
console.log(14);
console.log(response);
this.informationList = response.data.dataList;
})
},
dataGetRecruitmentList() {
this.$axios.$get(config.api.get.Content.list + '/15/contents', {
params: {
page: 1,
size: 5,
type: 1
}
}).then((response) => {
console.log(15);
console.log(response);
this.recruitmentList = response.data.dataList;
})
},
dataGetRecommendedSoftwareList() {
this.$axios.$get(config.api.get.Content.list + '/16/contents', {
params: {
page: 1,
size: 5,
type: 1
}
}).then((response) => {
console.log(16);
console.log(response);
this.recommendedSoftwareList = response.data.dataList;
})
},
dataGetSoftwareUpdatesList() {
this.$axios.$get(config.api.get.Content.list + '/17/contents', {
params: {
page: 1,
size: 5 ,
type: 1
}
}).then((response) => {
console.log(17);
console.log(response);
this.softwareUpdatesList = response.data.dataList;
})
},
changePage(currentPage) {
//返回页数 请求新的数据 //返回页数 请求新的数据
this.dataGetNewsList(currentPage);
},
dateConvert(time) {
return dateConvert(time);
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.news-container{ .news-container {
width: $pageWidth; width: $pageWidth;
margin: 0 auto; margin: 0 auto;
padding-top: 40*$length; padding-top: 40*$length;
padding-bottom: 32*$length; padding-bottom: 32*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
.news-container__l{
.pagination{ .news-container__l {
.pagination {
margin: 32*$length; margin: 32*$length;
} }
} }
}
.news-container__r {
.information-wrap {
padding-bottom: 12*$length;
.information-time {
@extend %cursorPointer;
@include fontStyle(12, 16, 500, #CCC, left);
}
.information-content {
width: 100%;
overflow: hidden;
margin-top: 3*$length;
@extend %nowrap;
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(14, 19, 500, #333, left);
&:hover {
color: #00AAE6;
}
}
}
.software-container{
padding: 0 16*$length;
.software-wrap {
padding-top: 16*$length;
@extend %flex-row-spb;
justify-content: flex-start;
.software-rank {
margin-right: 8*$length;
@include fontStyle(14, 19, 500, #2F2F2F, left);
}
.software-img-wrap {
width: 48*$length;
height: 48*$length;
@include border-radius(4*$length);
.software-img {
width: 48*$length;
height: 48*$length;
object-fit: contain;
@include border-radius(4*$length);
}
}
.software-main {
width: 100%;
overflow: hidden;
margin-left: 10*$length;
@extend %cursorPointer;
.software-title {
margin-bottom: 4*$length;
@include fontStyle(14, 19, 500, #2F2F2F, left);
@extend %animate-transition;
@extend %nowrap;
&:hover {
color: #00AAE6;
}
}
.software-content {
@extend %nowrap;
@include fontStyle(12, 16, 500, #999999, left);
}
}
}
}
}
}
</style> </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