|
|
@@ -1,59 +1,76 @@
|
|
|
<template>
|
|
|
<div class="popular-card">
|
|
|
- <el-card>
|
|
|
- <div slot="header" class="popular-header">
|
|
|
- <img src="../../assets/img/popular-project.png" alt="popular-project" class="popular-header-img"/>
|
|
|
- <span class="popular-header-title">热门项目</span>
|
|
|
- <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text" @click="goToMore()">>></el-button>
|
|
|
- </div>
|
|
|
- <div v-if="!hotCrowdTestProjectVOs.length" style="text-align: center;padding: 5px 0"><span>暂无项目</span></div>
|
|
|
- <div class="popular-list" v-else>
|
|
|
- <el-row class="popular-list-item" v-for="item in hotCrowdTestProjectVOs" :key="item.id">
|
|
|
- <el-col :span="19">
|
|
|
- <img :src="logo_background" alt="logo-project" class="pull-left project-logo-img">
|
|
|
- <div style="margin-left: 55px; cursor: pointer;" @click="goToProjectDetail(item.code)">
|
|
|
- <div class="list-item-title">
|
|
|
- {{item.name}}
|
|
|
+ <el-card>
|
|
|
+ <div slot="header" class="popular-header">
|
|
|
+ <img src="../../assets/img/popular-project.png" alt="popular-project" class="popular-header-img"/>
|
|
|
+ <span class="popular-header-title">热门项目</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text" @click="goToMore()">>></el-button>
|
|
|
+ </div>
|
|
|
+ <div v-if="!hotCrowdTestProjectVOs" style="text-align: center;padding: 5px 0"><span>暂无项目</span></div>
|
|
|
+ <div class="popular-list" v-else>
|
|
|
+ <el-row class="popular-list-item" v-for="item in hotCrowdTestProjectVOs" :key="item.id">
|
|
|
+ <el-col :span="19">
|
|
|
+ <img :src="logo_background" alt="logo-project" class="pull-left project-logo-img">
|
|
|
+ <div style="margin-left: 55px; cursor: pointer;" @click="goToProjectDetail(item.code)">
|
|
|
+ <div class="list-item-title">
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ <div class="list-item-info">
|
|
|
+ {{item.description}}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="list-item-info">
|
|
|
- {{item.description}}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="project-people-number">
|
|
|
+ <span v-if="item.joinCount > 10000">{{item.joinCount > 10000 ? Math.floor(item.joinCount/10000) + 'w+' : item.joinCount}}人</span>
|
|
|
+ <span v-else>{{item.joinCount > 1000 ? Math.floor(item.joinCount/1000) + 'k+' : item.joinCount}}人</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="5">
|
|
|
- <div class="project-people-number">
|
|
|
- <span v-if="item.joinCount > 10000">{{item.joinCount > 10000 ? Math.floor(item.joinCount/10000) + 'w+' : item.joinCount}}人</span>
|
|
|
- <span v-else>{{item.joinCount > 1000 ? Math.floor(item.joinCount/1000) + 'k+' : item.joinCount}}人</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {CONFIG} from '../../config/index'
|
|
|
+ import {storageGet} from '@/js/index.js'
|
|
|
+ import {notify} from "../../constants";
|
|
|
+
|
|
|
export default {
|
|
|
name: 'PopularProject',
|
|
|
- props:['hotCrowdTestProjectVOs'],
|
|
|
- data(){
|
|
|
- return{
|
|
|
- logo_background:CONFIG.logo_background,
|
|
|
- logo_transparent:CONFIG.logo_transparent
|
|
|
+ props: ['hotCrowdTestProjectVOs'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ logo_background: CONFIG.logo_background,
|
|
|
+ logo_transparent: CONFIG.logo_transparent,
|
|
|
+ isLogin: false,
|
|
|
+ user: {}
|
|
|
}
|
|
|
},
|
|
|
- methods:{
|
|
|
- goToMore(){
|
|
|
- console.log("goToMoreProject");
|
|
|
- this.$router.push({
|
|
|
- name: 'PopularProjectAndTaskList',
|
|
|
- params: {type: "project"}
|
|
|
- })
|
|
|
- },
|
|
|
- goToProjectDetail (id) {
|
|
|
- this.$router.push({name: 'Project', params: {projectId: id}})
|
|
|
+ methods: {
|
|
|
+ onload() {
|
|
|
+ if (storageGet('user') != null) {
|
|
|
+ this.isLogin = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goToMore() {
|
|
|
+ if (!this.isLogin) {
|
|
|
+ notify('warning', '请登录后访问');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$router.push({
|
|
|
+ name: 'PopularProjectAndTaskList',
|
|
|
+ params: {type: "project"}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goToProjectDetail(id) {
|
|
|
+ if (!this.isLogin) {
|
|
|
+ notify('warning', '请登录后访问');
|
|
|
+ return;
|
|
|
}
|
|
|
+ this.$router.push({name: 'Project', params: {projectId: id}})
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -64,61 +81,69 @@
|
|
|
.popular-card {
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
- .popular-header .el-card__header{
|
|
|
- border-bottom: 2px solid rgba(0,117,203,1) !important;
|
|
|
+
|
|
|
+ .popular-header .el-card__header {
|
|
|
+ border-bottom: 2px solid rgba(0, 117, 203, 1) !important;
|
|
|
}
|
|
|
|
|
|
- .popular-card .el-card__body{
|
|
|
+ .popular-card .el-card__body {
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
+
|
|
|
.popular-header {
|
|
|
height: 15px;
|
|
|
- vertical-align:middle;
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
+
|
|
|
.popular-header-title {
|
|
|
display: inline-block;
|
|
|
line-height: 20px;
|
|
|
- vertical-align:middle;
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
+
|
|
|
.popular-header-img {
|
|
|
height: 25px;
|
|
|
width: 25px;
|
|
|
- vertical-align:middle;
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
.popular-list {
|
|
|
.popular-list-item {
|
|
|
padding: 10px 10px;
|
|
|
border-bottom: 1px solid #ccc !important;
|
|
|
- .list-item-title{
|
|
|
- font-size:14px;
|
|
|
- font-family:Source Han Sans CN;
|
|
|
- font-weight:400;
|
|
|
- color:rgba(0,0,0,1);
|
|
|
+
|
|
|
+ .list-item-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
overflow: hidden;
|
|
|
- text-overflow:ellipsis; //溢出用省略号显示
|
|
|
- white-space:nowrap; //溢出不换行
|
|
|
+ text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行
|
|
|
}
|
|
|
- .list-item-info{
|
|
|
- font-size:14px;
|
|
|
- font-family:Adobe Heiti Std;
|
|
|
- font-weight:normal;
|
|
|
- color:rgba(153,153,153,1);
|
|
|
- overflow:hidden; //超出的文本隐藏
|
|
|
- text-overflow:ellipsis; //溢出用省略号显示
|
|
|
- white-space:nowrap; //溢出不换行
|
|
|
+
|
|
|
+ .list-item-info {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ overflow: hidden; //超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行
|
|
|
}
|
|
|
+
|
|
|
.project-logo-img {
|
|
|
width: 44px;
|
|
|
height: 44px;
|
|
|
display: inline-block;
|
|
|
margin: 2px 0;
|
|
|
}
|
|
|
+
|
|
|
.project-people-number {
|
|
|
- font-size:16px;
|
|
|
- font-family:Roboto;
|
|
|
- font-weight:400;
|
|
|
- color:$--color-primary;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Roboto;
|
|
|
+ font-weight: 400;
|
|
|
+ color: $--color-primary;
|
|
|
line-height: 48px;
|
|
|
}
|
|
|
}
|
|
|
@@ -126,5 +151,4 @@
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
</style>
|