98 lines
3.7 KiB
Vue
98 lines
3.7 KiB
Vue
<template>
|
|
<div class="SearchResult" @click="goToProjectDeatil" style=";align-items:center;cursor: pointer;margin-top: 5px;display: flex;flex-direction: row;flex-wrap: nowrap">
|
|
<div style="width: 50px;height: 50px;">
|
|
<el-avatar :size="50" :src="searchResult.projectIco"></el-avatar>
|
|
</div>
|
|
<div style="display: flex;flex-direction: column;flex-wrap: nowrap">
|
|
<div style="margin-left:10px;display: flex;flex-direction: row;flex-wrap: nowrap">
|
|
<span style="font-size: 14px;font-weight: bold">{{briefTitle}}</span>
|
|
</div>
|
|
<div style="margin-left:10px;">
|
|
<span style="font-size: 12px">{{briefContent}}</span>
|
|
</div>
|
|
<div style=";margin-left:10px;margin-top: 5px;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: nowrap">
|
|
<div style="align-items: center;font-size: 12px;color: #9ca3af">
|
|
<span>{{formatTime}}</span>
|
|
</div>
|
|
<div style="align-items: center;font-size: 12px;color: #9ca3af">
|
|
<i class="el-icon-view"></i> <span>{{formatNumber(searchResult.lookCount)}}</span>
|
|
</div>
|
|
<div style="align-items: center;font-size: 12px;color: #9ca3af">
|
|
<i class="el-icon-star-on"></i> <span>{{formatNumber(searchResult.startNum)}}</span>
|
|
</div>
|
|
<div style="margin-left: 10px;justify-content: space-between;display: flex;flex-direction:row;flex-wrap: nowrap;align-items: center;font-size: 12px;color: #9ca3af">
|
|
<div :style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)]}" style="width: 8px;height: 8px;background-color: #ffba00;border-radius: 50px"></div>
|
|
<span style="margin-left: 5px">{{searchResult.categoryName}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "SearchResultsList",
|
|
props:{
|
|
searchResult:Object
|
|
},
|
|
data(){
|
|
return{
|
|
colorlists: [
|
|
'hsl(62,90%,49%)',
|
|
'hsl(138,63%,59%)',
|
|
'rgb(245,145,135)',
|
|
'rgb(111,235,245)',
|
|
'rgb(162,239,120)',
|
|
'rgb(43,255,255)',
|
|
'hsl(0,89%,63%)',
|
|
'rgb(241,125,191)',
|
|
'hsl(282,85%,64%)',
|
|
'rgb(255,202,0)',
|
|
'blueviolet'
|
|
]
|
|
}
|
|
},
|
|
methods:{
|
|
formatNumber(num) {
|
|
return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
|
|
},
|
|
goToProjectDeatil(){
|
|
this.$router.push({
|
|
path:'/ProjectDetail',
|
|
query: {
|
|
id: this.searchResult.projectId,
|
|
refresh: true
|
|
}})
|
|
// console.log(this.$route.query.id)
|
|
},
|
|
},
|
|
computed: {
|
|
// 对时间进行格式化
|
|
formatTime: function() {
|
|
if (this.searchResult) {
|
|
const dt = new Date(this.searchResult.submitTime)
|
|
const year=dt.getFullYear()
|
|
const month = dt.getMonth()
|
|
const date = dt.getDate()
|
|
return `${year}-${month}-${date}`
|
|
}
|
|
return '';
|
|
},
|
|
// 截取文章内容的前 35 个字，并加上省略号
|
|
briefContent: function() {
|
|
return this.searchResult.projectDescription.substr(0, 17) + '...';
|
|
},
|
|
briefTitle: function() {
|
|
return this.searchResult.projectTitle.substr(0, 10) + '...';
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.SearchResult:hover{
|
|
background-color: #eeeeee;
|
|
border-radius: 10px;
|
|
}
|
|
</style> |