修改

src/components/AppSidebar.vue

@@ -47,10 +47,17 @@ export default {
                 icon:'icon-mall-huodong',
                 checked:false,
             },
+            // {
+            //     value:'myMedal',
+            //     name:'我的勋章',
+            //     path:'/home/myMedal',
+            //     icon:'icon-mall-xunzhang',
+            //     checked:false,
+            // },
             {
-                value:'myMedal',
-                name:'我的勋章',
-                path:'/home/myMedal',
+                value:'commend',
+                name:'员工表彰',
+                path:'/home/commend',
                 icon:'icon-mall-xunzhang',
                 checked:false,
             },

src/components/SiderInfo.vue

@@ -22,19 +22,19 @@
             </div>
             <div class="info">
                 <div class="info-item">
-                    <div class="item-itle">部门：</div>
-                    <div class="item-content">{{ dataInfo.deptName }}</div>
+                    <div class="item-title">部门：</div>
+                    <div :title="dataInfo.deptName" class="item-content text-overflow">{{ dataInfo.deptName }}</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">积分：</div>
+                    <div class="item-title">积分：</div>
                     <div class="item-content blue">{{ dataInfo.surplusIntegral }}积分</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">排行：</div>
+                    <div class="item-title">排行：</div>
                     <div class="item-content blue">5名</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">勋章：</div>
+                    <div class="item-title">勋章：</div>
                     <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                 </div>
             </div>
@@ -46,19 +46,19 @@
             </div>
             <div class="info">
                 <div class="info-item">
-                    <div class="item-itle">部门：</div>
-                    <div class="item-content">{{ dataInfo.deptName }}</div>
+                    <div class="item-title">部门：</div>
+                    <div :title="dataInfo.deptName" class="item-content text-overflow">{{ dataInfo.deptName }}</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">积分：</div>
+                    <div class="item-title">积分：</div>
                     <div class="item-content blue">{{ dataInfo.surplusIntegral }}积分</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">排行：</div>
+                    <div class="item-title">排行：</div>
                     <div class="item-content blue">5名</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">勋章：</div>
+                    <div class="item-title">勋章：</div>
                     <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                 </div>
             </div>
@@ -249,7 +249,15 @@ destroyed() {
     justify-content: space-between;
     line-height: 2rem;
 }
+.info-item .item-title{
+    width: 100px;
+}
 
+.info-item .text-overflow {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .info-item .blue {
     color: #1e80ff;
 }

src/router/index.js

@@ -31,6 +31,10 @@ const routes = [
         path: '/home/myMedal',
         component: () => import('@/views/HomeView/MyMedal.vue')
       },
+      {
+        path: '/home/commend',
+        component: () => import('@/views/HomeView/Commend.vue')
+      },
       {
         path: '/home/earnPoints',
         component: () => import('@/views/HomeView/EarnPoints.vue')

src/views/HomeView/Index.vue

@@ -119,7 +119,7 @@ export default{
   }
 }
 </script>
-<style>
+<style scoped>
 .timeline-container{
     margin: 0 auto;
 }

src/views/HomeView/SignIn.vue

@@ -46,21 +46,21 @@
           </div>
           <div class="info">
             <div class="info-item">
-              <div class="item-itle">部门：</div>
-              <div class="item-content">{{ dataInfo.deptName }}</div>
+              <div class="item-title">部门：</div>
+              <div :title="dataInfo.deptName" class="item-content text-overflow">{{ dataInfo.deptName }}</div>
             </div>
             <div class="info-item">
-              <div class="item-itle">积分：</div>
+              <div class="item-title">积分：</div>
               <div class="item-content blue">
                 {{ dataInfo.surplusIntegral }}积分
               </div>
             </div>
             <div class="info-item">
-                    <div class="item-itle">排行：</div>
+                    <div class="item-title">排行：</div>
                     <div class="item-content blue">5名</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">勋章：</div>
+                    <div class="item-title">勋章：</div>
                     <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                 </div>
           </div>
@@ -72,21 +72,21 @@
           </div>
           <div class="info">
             <div class="info-item">
-              <div class="item-itle">部门：</div>
-              <div class="item-content">{{ dataInfo.deptName }}</div>
+              <div class="item-title">部门：</div>
+              <div :title="dataInfo.deptName" class="item-content">{{ dataInfo.deptName }}</div>
             </div>
             <div class="info-item">
-              <div class="item-itle">积分：</div>
+              <div class="item-title">积分：</div>
               <div class="item-content blue">
                 {{ dataInfo.surplusIntegral }}积分
               </div>
             </div>
             <div class="info-item">
-                    <div class="item-itle">排行：</div>
+                    <div class="item-title">排行：</div>
                     <div class="item-content blue">5名</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">勋章：</div>
+                    <div class="item-title">勋章：</div>
                     <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                 </div>
           </div>
@@ -446,7 +446,15 @@ export default {
   justify-content: space-between;
   line-height: 2rem;
 }
+.info-item .item-title{
+    width: 100px;
+}
 
+.info-item .text-overflow {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .info-item .blue {
   color: #1e80ff;
 }

src/views/PointsRank/History.vue

@@ -9,8 +9,7 @@
               <span class="box-text">积分排行榜</span>
             </div>
           </div>
-          <el-card class="box-card">
-            <div class="tab-list">
+          <div class="tab-list">
               <div class="list-title">
                 <div class="title-left">
                   <div class="left-rank title-text">排名</div>
@@ -21,10 +20,13 @@
                   <div class="right-Integral title-text">积分</div>
                 </div>
               </div>
-              <div v-for="item in 10" class="list-title list-item">
+              <div v-for="(item,index) in 10" :key="index" class="list-title list-item">
                 <div class="title-left">
                   <div class="left-rank">
-                    <el-avatar :size="50" :src="avatarUrl"></el-avatar>
+                    <el-avatar v-if="index==0" :size="50" :src="avatarUrl"></el-avatar>
+                    <el-avatar v-else-if="index==1" :size="50" :src="avatarUrl"></el-avatar>
+                    <el-avatar v-else-if="index==2" :size="50" :src="avatarUrl"></el-avatar>
+                    <div v-else>{{ index+1 }}</div>
                   </div>
                   <div class="left-avatar">
                     <el-avatar :size="50" :src="avatarUrl"></el-avatar>
@@ -36,7 +38,6 @@
                 </div>
               </div>
             </div>
-          </el-card>
         </div>
       </div>
       <SiderInfo></SiderInfo>
@@ -103,7 +104,7 @@ export default {
   min-height: 500px;
 }
 .entry-list-container .tab-title {
-  margin-bottom: -25px;
+  /* margin-bottom: -25px; */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -125,12 +126,14 @@ export default {
   width: 450px;
 }
 .tab-list .list-title {
+  margin-top: 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.tab-list .list-title {
-  margin-top: 15px;
+.tab-list .list-item{
+  border-bottom: 1px solid #e5e6eb;
+  padding-bottom: 10px;
 }
 .list-title .title-left {
   width: 70%;

src/views/PointsRank/Present.vue

@@ -9,8 +9,7 @@
               <span class="box-text">积分排行榜</span>
             </div>
           </div>
-          <el-card class="box-card">
-            <div class="tab-list">
+          <div class="tab-list">
               <div class="list-title">
                 <div class="title-left">
                   <div class="left-rank title-text">排名</div>
@@ -21,7 +20,7 @@
                   <div class="right-Integral title-text">积分</div>
                 </div>
               </div>
-              <div v-for="(item,index) in 10" class="list-title list-item">
+              <div v-for="(item,index) in 10" :key="index" class="list-title list-item">
                 <div class="title-left">
                   <div class="left-rank">
                     <el-avatar v-if="index==0" :size="50" :src="avatarUrl"></el-avatar>
@@ -39,7 +38,6 @@
                 </div>
               </div>
             </div>
-          </el-card>
         </div>
       </div>
       <SiderInfo></SiderInfo>
@@ -106,7 +104,7 @@ export default {
   min-height: 500px;
 }
 .entry-list-container .tab-title {
-  margin-bottom: -25px;
+  /* margin-bottom: -25px; */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -128,12 +126,14 @@ export default {
   width: 450px;
 }
 .tab-list .list-title {
+  margin-top: 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.tab-list .list-title {
-  margin-top: 15px;
+.tab-list .list-item{
+  border-bottom: 1px solid #e5e6eb;
+  padding-bottom: 10px;
 }
 .list-title .title-left {
   width: 70%;