hellogithub-vue/src/components/Project/ProjectList.vue

<template>
    <div class="ProjectList" @click="goProjectDetail">
        <div class="projectIco">
            <img :src="projectLists.projectIco" style="width: 5vw;height: 5vw;margin-left: 10px;border-radius: 10px">
        </div>
        <div style="height: 12vh;margin-left: 5px;width: auto;display: flex;flex-direction: column;justify-content: space-between">
            <div class="ProjectTitle" style="font-size: 16px;font-weight: bold;display: flex;flex-direction: row;align-items: center;justify-content: space-between">
                <span>{{projectLists.projectTitle}}</span>
                <el-tag style="font-size: 14px;height: 20px;text-align: center;display: flex;align-items: center;border-radius: 10px" v-if="projectLists.num>0" type="success">{{projectLists.num}}</el-tag>
            </div>
            <div class="summary">
                <span style="font-size: 1rem">{{brief}}</span>
            </div>
            <div class="other">
                <div class="otherInfo">
                    <div class="projectName">
                        <span style="color: #59A3A4">{{ projectLists.projectName }}</span><span style="color: rgb(156 163 175);"> • </span>
                    </div>
                    <div>
                        <div class="circle" :style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)]}" ></div>
                    </div>
                    <el-tag size="mini" style="border-radius: 10px;margin-left: 5px" v-html="projectLists.categoryName"></el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
                    <div style="margin-left: 10px">
                        <span style="color: rgb(156 163 175); ">{{ formatTime }}</span>
                    </div>
                </div>
                <div class="lookCount">
                    <i class="el-icon-view" style="color: rgb(156 163 175);"></i><span style="margin-left: 5px;color: rgb(156 163 175); ">{{ formatNumber(projectLists.lookCount) }}</span>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
export default {
    name: "ProjectList",
    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'
            ]

        }
    },
    props: {
        projectLists: Object
    },
    // 计算属性
    computed: {
        // 对时间进行格式化
        formatTime: function() {
            if (this.projectLists) {
                const dt = new Date(this.projectLists.submitTime)
                const year=dt.getFullYear()
                const month = dt.getMonth()
                const date = dt.getDate()
                return `${year}-${month}-${date}`
            }
            return '';
        },
        // 截取文章内容的前 35 个字，并加上省略号
        brief: function() {
            return this.projectLists.projectDescription.substr(0, 40) + '...';
        },

    },
    methods:{
        goProjectDetail(){
            this.$router.push({
                    path:'/ProjectDetail',
                    query: {
                    id: this.projectLists.projectId, refresh: true
                }})
            // console.log(this.$route.query.id)
        },
        formatNumber(num) {
            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
        },
    }
}
</script>

<style scoped>
.ProjectList{
    height: 15vh;
    width: 100%;
    /*background-color: #59A3A4;*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
}
.ProjectList:hover{
    background-color: #eeeeee;
}
.ProjectTitle{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    color: black;
    font-size: 18px;
}
.ProjectTitle:hover{
    color: #59A3A4;
}
.summary{
    color: rgb(156 163 175);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    /*background-color: #59A3A4;*/
    position: relative;
    width: 36vw;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
}
.otherInfo{
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.projectName{
    /*color: #1dc48c;*/
}
.other{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}
.circle{
margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;
}
</style>