点赞/评论/个人主页功能完善

src/App.vue

@@ -17,7 +17,9 @@
   color: #2c3e50;
   background-color: white;
 }
-
+.el-tag{
+    border-radius: 10px;
+}
 nav {
   padding: 30px;
 }

src/components/Home/Home.vue

@@ -69,12 +69,12 @@
                     </el-tabs>
                 </div>
                 <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
-                    <el-card class="box-card" style="width: 13vw">
+                    <el-card class="box-card" style="width: 15vw">
                         <el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
                         <UserInfo></UserInfo>
                     </el-card>
 
-                    <el-card class="box-card" style="margin-top: 20px;width: 13vw">
+                    <el-card class="box-card" style="margin-top: 20px;width: 15vw">
                         <div slot="header" class="clearfix">
                             <el-statistic group-separator="," :precision="0" decimal-separator="." :value="userTotal" title="用户总数">
                                 <template slot="prefix">

src/components/Monthly/Monthly.vue

@@ -120,18 +120,7 @@
                 <br/>
             </div>
         </div>
-
+        <RightTools></RightTools>
-<!--        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">-->
-<!--            <div class="UserInfo">-->
-<!--                用户信息展示内容：-->
-<!--            </div>-->
-<!--            <div class="RightContent">-->
-<!--                空位置，待填入-->
-<!--            </div>-->
-<!--            <div class="ReferralProgram">-->
-<!--                推荐项目目录-->
-<!--            </div>-->
-<!--        </div>-->
 
     </div>
 
@@ -140,8 +129,10 @@
 <script>
 import axios from 'axios'
 import Vue from "vue";
+import RightTools from "@/components/Home/RightTools.vue";
 export default {
     name: "MonthlyComponent",
+    components: {RightTools},
     data(){
         return{
             // 项目总数

src/components/Paper/PublishArticle.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+    name: "PublishArticle"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Project/ProjectDetail.vue

@@ -52,7 +52,8 @@
                                   <el-dropdown-item>下载</el-dropdown-item>
                               </el-dropdown-menu>
                           </el-dropdown>
-                          <el-button  style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off">点 赞 {{startNum}}</el-button>
+                          <el-button v-show="isRouterAlive" v-if="Like===0" @click="addStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off" type="success">点 赞 {{startNum}}</el-button>
+                          <el-button v-show="isRouterAlive" v-if="Like===1" @click="cancleStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-on" type="danger">取消点赞 {{startNum}}</el-button>
                       </div>
                   </div>
 
@@ -171,46 +172,97 @@
                       </div>
                       <el-divider></el-divider>
                       <div v-if="isRouterAlive" style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 20px">
-                          <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
+                          <div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: flex-start">
-                              <span style="font-size: 16px;font-weight: bold">{{ commentNum }} 条精选评论</span>
+                              <span style="display: flex;flex-direction: row;justify-content: flex-start;font-size: 16px;font-weight: bold">{{ commentNum }} 条精选评论</span>
-                              <el-button-group>
+<!--                              <el-button-group>-->
-                                  <el-button type="primary" icon="el-icon-star-on" size="small">最新</el-button>
+<!--                                  <el-button :disabled="isDisabled" @click.once="getLastComment" type="primary" icon="el-icon-star-on" size="small">最新</el-button>-->
-                                  <el-button type="primary" icon="el-icon-s-opportunity" size="small">最热</el-button>
+<!--                                  <el-button :disabled="isDisabled2" @click.once="getHotComment" type="primary" icon="el-icon-s-opportunity" size="small">最热</el-button>-->
-                              </el-button-group>
+<!--                              </el-button-group>-->
-                          </div>
+                              <el-empty v-show="commentContent.length ===0" description="暂无评论"></el-empty>
-
+                              <el-tabs v-show="commentContent.length!==0" type="card" style="margin-top: 10px" v-model="activeCommentName" @tab-click="getComment">
-                          <div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
+                                  <el-tab-pane name="last">
-                              <div style="display: flex;flex-direction: row">
+                                      <span slot="label"><i class="el-icon-star-on"></i>最新</span>
-                                  <div style="width: 50px;height: 50px;">
+                                      <div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
-                                      <el-avatar  :size="50">{{item.username}}</el-avatar>
+                                          <div style="display: flex;flex-direction: row">
-                                  </div>
+                                              <div style="width: 50px;height: 50px;">
-                                  <div style="display: flex;flex-direction: column;justify-content: space-between">
+                                                  <el-avatar  :size="50">{{item.username}}</el-avatar>
-                                      <div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
+                                              </div>
-                                          <span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
+                                              <div style="display: flex;flex-direction: column;justify-content: space-between">
-                                          <span style="margin-left: 10px">评分: </span>
+                                                  <div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
-                                          <el-rate
+                                                      <span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
-                                              style="margin-left: 10px"
+                                                      <span style="margin-left: 10px">评分: </span>
-                                              v-model="item.star" disabled>
+                                                      <el-rate
-                                          </el-rate>
+                                                          style="margin-left: 10px"
-                                          <span style="margin-left: 10px">
+                                                          v-model="item.star" disabled>
+                                                      </el-rate>
+                                                      <span style="margin-left: 10px">
 
                                               <el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
                                               <el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
                                           </span>
-                                      </div>
+                                                  </div>
-                                      <div style="margin-left: 10px;margin-top: 5px">
+                                                  <div style="margin-left: 10px;margin-top: 5px">
-                                          <el-card style="border: none;text-align:left;">
+                                                      <el-card style="border: none;text-align:left;">
-                                              <span>{{item.content}}</span>
+                                                          <span>{{item.content}}</span>
-                                          </el-card>
+                                                      </el-card>
 
+                                                  </div>
+                                                  <div style="display: flex;flex-direction: row;justify-content: space-between;margin-left: 10px;margin-top: 5px">
+                                                      <span style="font-size: 14px;color: #9ca3af">{{item.commentTime}}</span>
+                                                      <div style="display: flex;align-items: center">
+                                                          <span style="margin-right: 5px;font-size: 14px; color: rgb(156, 163, 175);">{{ formatNumber(item.likeNum) }}</span>
+                                                          <el-link @click="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
+                                                      </div>
+
+                                                  </div>
+                                              </div>
+                                          </div>
                                       </div>
-                                      <div style="display: flex;justify-content: flex-start;margin-left: 10px;margin-top: 5px">
+                                  </el-tab-pane>
-                                          <span style="font-size: 14px;color: #9ca3af">{{item.time}}</span>
+                                  <el-tab-pane name="hot">
+                                      <span slot="label"><i class="el-icon-s-opportunity"></i>最热</span>
+                                      <div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
+                                          <div style="display: flex;flex-direction: row">
+                                              <div style="width: 50px;height: 50px;">
+                                                  <el-avatar  :size="50">{{item.username}}</el-avatar>
+                                              </div>
+                                              <div style="display: flex;flex-direction: column;justify-content: space-between">
+                                                  <div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
+                                                      <span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
+                                                      <span style="margin-left: 10px">评分: </span>
+                                                      <el-rate
+                                                          style="margin-left: 10px"
+                                                          v-model="item.star" disabled>
+                                                      </el-rate>
+                                                      <span style="margin-left: 10px">
+
+                                              <el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
+                                              <el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
+                                          </span>
+                                                  </div>
+                                                  <div style="margin-left: 10px;margin-top: 5px">
+                                                      <el-card style="border: none;text-align:left;">
+                                                          <span>{{item.content}}</span>
+                                                      </el-card>
+
+                                                  </div>
+                                                  <div style="display: flex;flex-direction: row;justify-content: space-between;margin-left: 10px;margin-top: 5px">
+                                                      <span style="font-size: 14px;color: #9ca3af">{{item.commentTime}}</span>
+                                                      <div style="display: flex;align-items: center">
+                                                          <span style="margin-right: 5px;font-size: 14px; color: rgb(156, 163, 175);">{{ formatNumber(item.likeNum) }}</span>
+                                                          <el-link @click="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
+                                                      </div>
+
+                                                  </div>
+                                              </div>
+                                          </div>
                                       </div>
-                                  </div>
+                                  </el-tab-pane>
-                              </div>
+                              </el-tabs>
                           </div>
 
+
+
                       </div>
                   </div>
               </el-card>
@@ -247,6 +299,7 @@ export default {
             starValue:null,
             activeNames: ['1'],
             activeName:'first',
+            activeCommentName:'last',
             loginDialogVisible:false,
             editorOption: {
                 theme: 'bubble',
@@ -283,12 +336,19 @@ export default {
                 new OrderedList(),
             ],
             isRouterAlive:true,
+            isDisabled:false,
+            isDisabled2:false,
+            Like:null,
+            checked:false,
+            tabCheckedLast:true,
+            tabCheckedHot:false,
+
         }
     },
     mounted() {
         this.getProjectDetail();
-        this.getComment();
+        this.getLastComment();
-
+        this.isStart();
     },
     watch: {
         $route () {
@@ -328,24 +388,32 @@ export default {
         },
         reload() {
             this.isRouterAlive = false;
-            this.$nextTick(function () {
+            this.$nextTick( ()=> {
                 this.isRouterAlive = true;
             });
         },
 
-        getComment(){
+        getComment(tab){
             var that=this;
             axios({
                 method: 'post',
                 // 请求的地址
-                url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentByPro',
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
                 // URL 中的查询参数
                 params: {
-                    id:this.$route.query.id
+                    id:this.$route.query.id,
+                    trait:tab.name
                 }
             }).then(function (res) {
                 that.commentContent=res.data;
                 that.commentNum=Object.keys(that.commentContent).length;
+                if(tab.name==='last'){
+                    that.tabCheckedLast=true;
+                    that.tabCheckedHot=false;
+                }else if(tab.name==='hot'){
+                    that.tabCheckedHot=true;
+                    that.tabCheckedLast=false;
+                }
             });
         },
         publishComment(){
@@ -370,7 +438,7 @@ export default {
                             type: 'success',
                             offset: 50
                         });
-                        that.getComment();
+                        that.getLastComment();
                         that.reload();
                     } else {
                         Vue.prototype.$notify.error({
@@ -390,6 +458,141 @@ export default {
 
 
         },
+        formatNumber(num) {
+            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
+        },
+
+        addLike(id){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/addLike',
+                // URL 中的查询参数
+                params: {
+                    id:id
+                }
+            }).then((res)=>{
+                if(res.data.code===500){
+                    Vue.prototype.$notify.error({
+                        title: '错误',
+                        message: res.data.msg,
+                        offset: 50
+                    });
+                    return;
+                }else{
+                    if(!that.tabCheckedLast){
+                        that.getHotComment();
+                    }else{
+                        that.getLastComment();
+                    }
+                }
+            })
+        },
+        getHotComment(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
+                // URL 中的查询参数
+                params: {
+                    id:this.$route.query.id,
+                    trait:'hot'
+                }
+            }).then(function (res) {
+                that.commentContent=res.data;
+            });
+        },
+        getLastComment(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
+                // URL 中的查询参数
+                params: {
+                    id:this.$route.query.id,
+                    trait:'last'
+                }
+            }).then(function (res) {
+                that.commentContent=res.data;
+                that.commentNum=Object.keys(that.commentContent).length;
+
+            });
+        },
+        isStart(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/whetherLike',
+                // URL 中的查询参数
+                params: {
+                    proId:this.$route.query.id,
+
+                }
+            }).then(function (res) {
+                that.Like=res.data;
+            });
+        },
+        addStar(){
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/whetherAddLike',
+                // URL 中的查询参数
+                params: {
+                    proId:this.$route.query.id,
+                }
+            }).then((res)=>{
+                if (res.data.code === 500) {
+                    Vue.prototype.$notify.error({
+                        title: '错误',
+                        message: res.data.msg,
+                        offset: 50
+                    });
+                } else {
+                    this.isStart();
+                    this.$router.push({
+                        path:'/ProjectDetail',
+                        query: {
+                            id: this.projectId, refresh: true
+                        }
+                    })
+                }
+            })
+        },
+        cancleStar(){
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/whetherCancelLike',
+                // URL 中的查询参数
+                params: {
+                    proId:this.$route.query.id,
+                }
+            }).then((res)=>{
+                if (res.data.code === 500) {
+                    Vue.prototype.$notify.error({
+                        title: '错误',
+                        message: res.data.msg,
+                        offset: 50
+                    });
+                } else {
+                    this.isStart();
+                    // window.location.reload()
+                    this.$router.push({
+                        path:'/ProjectDetail',
+                        query: {
+                            id: this.projectId, refresh: true
+                        }
+                    })
+                }
+            })
+        }
+
+
 
     }
 
@@ -430,4 +633,7 @@ export default {
     padding: 8px;
     display: none;
 }
+::v-deep .el-card__header{
+    border-bottom: none;
+}
 </style>

src/components/Ranking/Ranking.vue

@@ -47,13 +47,17 @@
                 </el-card>
             </div>
         </div>
+        <RightTools></RightTools>
     </div>
 
 </template>
 
 <script>
+import RightTools from "@/components/Home/RightTools.vue";
+
 export default {
     name: "RankingComponent",
+    components: {RightTools},
     data(){
         return{
             selectedValue:'1',

src/components/User/UserComments.vue

@@ -0,0 +1,97 @@
+<template>
+    <div style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 10px">
+        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: space-between">
+            <div>
+                <span style="color: #4b5563;font-size: 16px"><span style="font-size: 17px;font-weight: bold">{{index+1}}</span>. 在 {{comments.commentTime}} 发布的评论</span>
+            </div>
+            <div>
+                <el-link :underline="false" style="color: red">申诉</el-link>
+                <el-button @click="toCommentDeatil" icon="el-icon-search" circle style="margin-left: 10px"></el-button>
+            </div>
+        </div>
+        <div>
+            <el-card style="border-radius: 10px;margin-top: 10px;">
+                <div style="display: flex;flex-direction: row;flex-wrap: nowrap">
+                    <div style="width: 60px;height: 60px;">
+                        <el-avatar :size="60">{{ this.$cookie.get('username') }}</el-avatar>
+                    </div>
+                    <div style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-left: 20px">
+                        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
+                            <span style="font-size: 16px;font-weight: bold">{{ this.$cookie.get('username') }}</span>
+                            <span style="margin-left: 10px">评分: </span>
+                            <el-rate
+                                style="margin-left: 5px"
+                                v-model="comments.star"
+                                disabled
+                                score-template="{value}">
+                            </el-rate>
+                            <el-tag v-if="comments.isUsed===1" size="mini" style="margin-left: 10px">
+                                用过
+                            </el-tag>
+                            <el-tag type="warning" v-if="comments.isUsed===0" size="mini" style="margin-left: 10px">
+                                没用过
+                            </el-tag>
+                        </div>
+                        <el-card style=";border:none;display: flex;flex-direction:row;justify-content: flex-start;margin-top: 10px">
+                            {{comments.content}}
+                        </el-card>
+                        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top: 10px;align-items: center;justify-content: space-between">
+                            <span style="color: #9ca3af;font-size: 15px">
+                                {{formatTime}}
+                            </span>
+                            <div style="font-size: 14px;color:#9ca3af;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
+                                <span>项目</span>
+                                <span style="margin-left: 8px">•</span>
+                                <span v-if="comments.likeNum>=200" style="margin-left: 8px;color: #ffba00">热评</span>
+                                <span v-if="comments.likeNum<200" style="margin-left: 8px">非热评</span>
+                                <span style="margin-left: 8px">•</span>
+                                <span style="margin-left: 8px">点赞</span>
+                                <span style="margin-left: 8px">{{comments.likeNum}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-card>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "UserComments",
+    props:{
+      comments:Object,
+        index:Number
+    },
+    data(){
+        return{
+            value:5,
+        }
+    },
+    computed:{
+        formatTime: function() {
+            if (this.comments) {
+                const dt = new Date(this.comments.commentTime)
+                const year=dt.getFullYear()
+                const month = dt.getMonth()
+                const date = dt.getDate()
+                return `${year}-${month}-${date}`
+            }
+            return '';
+        },
+    },
+    methods:{
+        toCommentDeatil(){
+            this.$router.push({
+                path:'/ProjectDetail',
+                query: {
+                    id: this.comments.projectId, refresh: true
+                }})
+        }
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/User/UserInfo.vue

@@ -63,7 +63,9 @@ export default {
                     offset: 50
                 });
                 setTimeout(()=>{
-                    window.location.reload();
+                    this.$router.push({
+                        path:'/home',
+                    })
                 },1000)
             }
 

src/components/User/UserInfoPage.vue

@@ -43,10 +43,33 @@
                 <el-card class="box-card" style="border: none;margin-top: 20px">
                     <el-tabs v-model="activeName">
                         <el-tab-pane label="评论" name="first">
-                            <el-empty description="暂无评论" :image-size="115"></el-empty>
+                            <el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
+                                <span style="font-size: 16px;font-weight: bold">总共评论: {{commentList.length}} 条</span>
+                            </el-card>
+                            <el-empty v-show="commentList.length===0" description="暂无评论" :image-size="115"></el-empty>
+                            <div v-show="commentList.length!==0" v-for="(item,index) in commentList" :key="index">
+                                <UserComments :comments="item" :index="index"></UserComments>
+                            </div>
+
                         </el-tab-pane>
-                        <el-tab-pane label="项目" name="third">
+                        <el-tab-pane label="项目" name="second">
-                            <el-empty description="暂无项目" :image-size="115"></el-empty>
+                            <el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
+                                <span style="font-size: 16px;font-weight: bold">总共提交: {{projectList.length}} 个</span>
+                            </el-card>
+                            <el-empty v-show="projectList.length===0" description="暂无项目" :image-size="115"></el-empty>
+                            <div v-show="projectList.length!==0" v-for="(item,index) in projectList" :key="index">
+                                <UserProjects :project="item"></UserProjects>
+                            </div>
+                        </el-tab-pane>
+
+                        <el-tab-pane label="点赞" name="third">
+                            <el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
+                                <span style="font-size: 16px;font-weight: bold">总共点赞: {{like.length}} 个</span>
+                            </el-card>
+                            <el-empty v-show="like.length===0" description="暂无点赞" :image-size="115"></el-empty>
+                            <div v-show="like.length!==0" v-for="(item,index) in like" :key="index">
+                                <UserProjects :project="item"></UserProjects>
+                            </div>
                         </el-tab-pane>
                     </el-tabs>
                 </el-card>
@@ -59,10 +82,12 @@
 <script>
 import axios from "axios";
 import RightTools from "@/components/Home/RightTools.vue";
+import UserProjects from "@/components/User/UserProjects.vue";
+import UserComments from "@/components/User/UserComments.vue";
 
 export default {
     name: "UserInfoPage",
-    components: {RightTools},
+    components: {UserComments, UserProjects, RightTools},
     data(){
         return{
             activeName:'first',
@@ -71,8 +96,9 @@ export default {
             creatTime:null,
             projectNum:0,
             userId:null,
-            projectList:null,
+            projectList:[],
-            commentList:{},
+            commentList:[],
+            like:[],
         }
     },
     mounted() {
@@ -123,6 +149,7 @@ export default {
             }).then(function (res) {
                 that.projectList=JSON.parse(res.data.project);
                 that.commentList=JSON.parse(res.data.comment);
+                that.like=JSON.parse(res.data.like)
             });
         },
     }

src/components/User/UserProjects.vue

@@ -0,0 +1,69 @@
+<template>
+    <el-card style="border-radius: 15px;margin-top: 10px">
+        <div  style="cursor: pointer;display: flex;flex-direction: row;flex-wrap: nowrap">
+<!--            <div style="display: flex;align-items: center">-->
+<!--                <span style="font-size: 16px;font-weight: bold">●</span>-->
+<!--            </div>-->
+            <div @click="toProjectDetail" class="userProjects" style=";margin-left:10px;display: flex;flex-direction: column;flex-wrap: nowrap">
+                <div style="margin-left: 10px;display: flex;flex-direction: row;justify-content: flex-start">
+                    <span style="font-size: 16px;font-weight: bold">{{project.projectName}}</span>
+                </div>
+                <div style="margin-top: 10px;margin-left: 10px;">
+                    <span style="display: flex;flex-direction: row;justify-content:flex-start;text-align: left;font-size: 16px;color: #9ca3af">{{brief}}</span>
+                </div>
+                <div style=" margin-left: 10px;;margin-top: 10px;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
+                    <div style="width: 10px;height: 10px;background-color: #42b983;border-radius: 50px"></div>
+                    <el-tag size="mini" style="margin-left: 5px;border-radius: 10px">
+                        {{project.categoryName}}
+                    </el-tag>
+                    <span style="margin-left: 5px;font-size: 14px;color: #9ca3af">●</span>
+                    <span style="margin-left: 5px;font-size: 14px;color: #9ca3af">{{ formatNumber(project.lookCount) }}</span>
+                    <span style="margin-left: 5px;font-size: 14px;color: #9ca3af">●</span>
+                    <span style="margin-left: 5px;font-size: 14px;color: #9ca3af">{{project.submitTime}}</span>
+                </div>
+            </div>
+        </div>
+    </el-card>
+</template>
+
+<script>
+export default {
+    name: "UserProjects",
+    props:{
+        project:Object
+    },
+
+
+    data(){
+        return{
+
+        }
+    },
+    computed:{
+        brief:function(){
+            return  this.project.projectDescription.substr(0, 43) + '...';
+        },
+    },
+    methods:{
+        formatNumber(num) {
+            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
+        },
+        toProjectDetail(){
+            this.$router.push({
+                path:'/ProjectDetail',
+                query: {
+                    id: this.project.projectId, refresh: true
+                }})
+        }
+
+    }
+}
+</script>
+
+<style scoped>
+.userProjects:hover{
+    background-color: #eeeeee;
+    border-radius: 10px;
+    border: #9ca3af;
+}
+</style>

src/router/index.js

@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
 import index from '../views/index.vue'
 import home from "@/components/Home/Home.vue";
 import monthly from "@/components/Monthly/Monthly.vue";
-import ranking from "@/components/Ranking.vue";
+import ranking from "@/components/Ranking/Ranking.vue";
 import paper from "@/components/Paper/Paper.vue";
 import MonthlyDetail from "@/components/Monthly/MonthlyDetail.vue";
 import MonthlyByTags from "@/components/Monthly/MonthlyByTags.vue";