|
|
@@ -2,12 +2,11 @@
|
|
|
<div class="home-container">
|
|
|
<div class="home-banner-wrap">
|
|
|
<el-carousel height="400px" :interval="10000" arrow="always">
|
|
|
- <el-carousel-item>
|
|
|
- <img class="banner_back banner_back_1" src="@/assets/img/home_ban1.jpg">
|
|
|
- <router-link :to="{ name: 'ProjectCreate'}"><div class="btn btn-medium btn-home-apply">申请项目</div></router-link>
|
|
|
- </el-carousel-item>
|
|
|
- <el-carousel-item>
|
|
|
- <img class="banner_back banner_back_2" src="@/assets/img/home_ban2.png">
|
|
|
+ <el-carousel-item v-for="img in imgList">
|
|
|
+ <img class="banner_back banner_back_1" v-bind:src="img">
|
|
|
+ <router-link :to="{ name: 'ProjectCreate'}">
|
|
|
+ <div class="btn btn-medium btn-home-apply">申请项目</div>
|
|
|
+ </router-link>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
@@ -20,21 +19,21 @@
|
|
|
</span>
|
|
|
</div>
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="6" v-for="item,index in taskList" :key="index">
|
|
|
+ <el-col :span="6" v-for="item,index in hotTaskList" :key="index">
|
|
|
<task-card :item="item"/>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
|
|
|
- <div class="home-block">
|
|
|
+ <div class="home-block">
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col :xs="20" :sm="20" :md="20" :lg="12" :xl="12">
|
|
|
+ <el-col :xs="20" :sm="20" :md="20" :lg="12" :xl="12">
|
|
|
<div class="title">机构排名</div>
|
|
|
- <institution-rank />
|
|
|
+ <institution-rank :item="institutionRank"/>
|
|
|
</el-col>
|
|
|
- <el-col :xs="20" :sm="20" :md="20" :lg="12" :xl="12">
|
|
|
- <div class="title">用户排名</div>
|
|
|
- <person-rank />
|
|
|
+ <el-col :xs="20" :sm="20" :md="20" :lg="12" :xl="12">
|
|
|
+ <div class="title">用户排名</div>
|
|
|
+ <person-rank :item="personRank"/>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
@@ -44,121 +43,175 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import TaskCard from "@/components/commons/TaskCard";
|
|
|
-import InstitutionRank from "@/components/InstitutionRank";
|
|
|
-import PersonRank from "@/components/PersonRank";
|
|
|
-import Http from '@/http.js';
|
|
|
-import Apis from '@/api/api.js';
|
|
|
+import TaskCard from '@/components/commons/TaskCard'
|
|
|
+import InstitutionRank from '@/components/InstitutionRank'
|
|
|
+import PersonRank from '@/components/PersonRank'
|
|
|
+import Http from '@/js/http.js'
|
|
|
+import Apis from '@/js/api.js'
|
|
|
+
|
|
|
export default {
|
|
|
- name: "Home",
|
|
|
- components: { TaskCard, InstitutionRank, PersonRank },
|
|
|
- data() {
|
|
|
+ name: 'Home',
|
|
|
+ components: {TaskCard, InstitutionRank, PersonRank},
|
|
|
+ data () {
|
|
|
return {
|
|
|
- taskList: [
|
|
|
+ hotTaskList: [
|
|
|
{
|
|
|
id: 0,
|
|
|
- title: "发送群文件测试",
|
|
|
- description: "任务描述文字xxxx",
|
|
|
- price: "30",
|
|
|
+ title: '发送群文件测试',
|
|
|
+ description: '任务描述文字xxxx',
|
|
|
+ price: '30',
|
|
|
serviceType: 1,
|
|
|
status: 0,
|
|
|
- projectId:123
|
|
|
+ projectId: 123
|
|
|
},
|
|
|
{
|
|
|
id: 1,
|
|
|
- title: "多人聊天发送文件测试",
|
|
|
- description: "任务描述文字xxxx",
|
|
|
- price: "10",
|
|
|
+ title: '多人聊天发送文件测试',
|
|
|
+ description: '任务描述文字xxxx',
|
|
|
+ price: '10',
|
|
|
serviceType: 0,
|
|
|
status: 1,
|
|
|
- projectId:234
|
|
|
+ projectId: 234
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
- title: "浏览器波洞星球",
|
|
|
- description: "任务描述文字xxxx",
|
|
|
- price: "10",
|
|
|
+ title: '浏览器波洞星球',
|
|
|
+ description: '任务描述文字xxxx',
|
|
|
+ price: '10',
|
|
|
serviceType: 2,
|
|
|
status: 0,
|
|
|
- projectId:345
|
|
|
+ projectId: 345
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
- title: "举报支持选择聊天记录（安全）",
|
|
|
- description: "任务描述文字xxxx",
|
|
|
- price: "0",
|
|
|
+ title: '举报支持选择聊天记录（安全）',
|
|
|
+ description: '任务描述文字xxxx',
|
|
|
+ price: '0',
|
|
|
serviceType: 1,
|
|
|
status: 1,
|
|
|
- projectId:456
|
|
|
+ projectId: 456
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ institutionRank: [
|
|
|
+ {
|
|
|
+ logo: 'http://www.mooctest.net/assets/img/mooctest.png',
|
|
|
+ name: '慕测科技'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
|
|
|
+ name: '上海软件'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ logo: 'http://www.mooctest.net/assets/img/mooctest.png',
|
|
|
+ name: 'QQ众测'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
|
|
|
+ name: '阿里巴巴'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
|
|
|
+ name: '阿里巴巴'
|
|
|
}
|
|
|
- ]
|
|
|
- };
|
|
|
+ ],
|
|
|
+ personRank: [
|
|
|
+ {
|
|
|
+ logo: 'http://www.mooctest.net/assets/img/mooctest.png',
|
|
|
+ name: '小王',
|
|
|
+ number: '200',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
|
|
|
+ name: '小黄',
|
|
|
+ number: '190',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ logo: 'http://www.mooctest.net/assets/img/mooctest.png',
|
|
|
+ name: '小莉',
|
|
|
+ number: '120',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
|
|
|
+ name: '小张',
|
|
|
+ number: '80',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
|
|
|
+ name: '小张',
|
|
|
+ number: '70',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ imgList:['../assets/img/home_ban1.jpg','../assets/img/home_ban2.jpg'],
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
- methods:{
|
|
|
+ methods: {
|
|
|
//加载数据
|
|
|
- loadData:function() {
|
|
|
+ loadData: function () {
|
|
|
console.log('loadData')
|
|
|
- this.taskList = this.getHotTaskList()
|
|
|
- },
|
|
|
- //获取热门任务列表
|
|
|
- getHotTaskList:function() {
|
|
|
- console.log('getHotTaskList')
|
|
|
- Http.get(Apis.TASK.GET_HOT_TASK_LIST).then((res) =>{
|
|
|
- return res.data;
|
|
|
+ Http.get(Apis.PAGE.HOME_PAGE).then((res) => {
|
|
|
+ if (0 === res.code){
|
|
|
+ this.hotTaskList = res.hotTaskList
|
|
|
+ this.institutionRank = res.institutionRank
|
|
|
+ this.personRank = res.personRank
|
|
|
+ this.imgList = res.imgList
|
|
|
+ }
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
- created:function () {
|
|
|
- console.log("加载中")
|
|
|
- this.loadData()
|
|
|
+ created: function () {
|
|
|
+ console.log('加载中')
|
|
|
+ //this.loadData()
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.home-banner-wrap {
|
|
|
- background: linear-gradient(#4a90e2, rgb(74, 109, 226));
|
|
|
- background: -webkit-linear-gradient(#4a90e2, rgb(74, 109, 226));
|
|
|
- background: -o-linear-gradient(#4a90e2, rgb(74, 109, 226));
|
|
|
- .banner_back {
|
|
|
- height: 100%;
|
|
|
+ .home-banner-wrap {
|
|
|
+ background: linear-gradient(#4a90e2, rgb(74, 109, 226));
|
|
|
+ background: -webkit-linear-gradient(#4a90e2, rgb(74, 109, 226));
|
|
|
+ background: -o-linear-gradient(#4a90e2, rgb(74, 109, 226));
|
|
|
+ .banner_back {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .banner_back_1 {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
}
|
|
|
- .banner_back_1 {
|
|
|
- float: right;
|
|
|
+
|
|
|
+ .el-carousel__item h3 {
|
|
|
+ color: #475669;
|
|
|
+ font-size: 14px;
|
|
|
+ opacity: 0.75;
|
|
|
+ line-height: 150px;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.el-carousel__item h3 {
|
|
|
- color: #475669;
|
|
|
- font-size: 14px;
|
|
|
- opacity: 0.75;
|
|
|
- line-height: 150px;
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
+ .el-carousel__item:nth-child(2n) {
|
|
|
+ background-color: #bed2c0;
|
|
|
+ }
|
|
|
|
|
|
-.el-carousel__item:nth-child(2n) {
|
|
|
- background-color: #bed2c0;
|
|
|
-}
|
|
|
+ .el-carousel__item:nth-child(2n + 1) {
|
|
|
+ background-color: #eeeef2;
|
|
|
+ }
|
|
|
|
|
|
-.el-carousel__item:nth-child(2n + 1) {
|
|
|
- background-color: #eeeef2;
|
|
|
-}
|
|
|
+ .home-body-wrap {
|
|
|
+ padding: 40px 80px;
|
|
|
+ }
|
|
|
|
|
|
-.home-body-wrap {
|
|
|
- padding: 40px 80px;
|
|
|
-}
|
|
|
-.more-info {
|
|
|
- float: right;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 1.4rem;
|
|
|
-}
|
|
|
-.btn-home-apply {
|
|
|
- position: absolute;
|
|
|
- bottom: 10%;
|
|
|
- left: 20%;
|
|
|
-}
|
|
|
+ .more-info {
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ }
|
|
|
|
|
|
-.home-block{
|
|
|
- margin:10px 0;
|
|
|
-}
|
|
|
+ .btn-home-apply {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10%;
|
|
|
+ left: 20%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-block {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
</style>
|
sunjh