更新

2023-07-02 11:17:14 +08:00
parent 7aca0c112e
commit 1538983616
3 changed files with 4 additions and 103 deletions
--- a/src/components/Home/ProjectList.vue
+++ b/src/components/Home/ProjectList.vue
@@ -0,0 +1,119 @@
+<template>
+    <div class="ProjectList">
+        <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">
+                <span>{{projectLists.projectTitle}}</span>
+            </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 style="margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;background-color: #ffba00"></div>
+                    </div>
+                    <el-tag size="mini" style="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); ">{{ projectLists.lookCount }}</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+export default {
+    name: "ProjectList",
+    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, 33) + '...';
+        }
+    }
+}
+</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;
+}
+</style>