前端优化

web/src/view/dashboard/dashboardTable/dashboardTable.vue

@@ -1,9 +1,21 @@
 <template>
   <div class="commit-table">
-    <div v-for="(i,j) in eventData" :key="j">
-      {{i.ProjectName}} {{i.ScreensName}} {{i.type}} {{i.time}}
+    <div class="commit-table-title">
+      事件上报
+    </div>
+    <div class="log">
+      <div v-for="(item,key) in eventData" :key="key"  class="log-item">
+        <div class="flex-1 flex key-box">
+          <span class="key" :class="key<3&&'top'">{{ key+1 }}</span>
+        </div>
+        <div class="flex-8 flex message" style="margin-right: 20px">{{ item.ProjectName}}:{{item.ScreensName }}   </div>
+        <div class="flex-3 flex message" style="color: orangered">{{ item.type }}</div>
+        <div class="flex-3 flex form">{{ item.time }}</div>
+<!--        <div class="flex-3 flex form">{{ formatTimeToStr(item.createdAt, 'yyyy-MM-dd hh:mm') }}</div>-->
+      </div>
     </div>
   </div>
+
 </template>
 
 <script setup>
@@ -32,64 +44,64 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .commit-table{
-    background-color: #fff;
-    height: 400px;
-    &-title{
-        font-weight: 600;
-        margin-bottom: 12px;
-    }
-    .log{
-      &-item{
-        display: flex;
-        justify-content: space-between;
-        margin-top: 14px;
-        .key-box{
-          justify-content: center;
-        }
-        .key{
-          &.top{
-            background: #314659;
-            color: #FFFFFF;;
-          }
-          display: inline-flex;
-          justify-content: center;
-          align-items: center;
-          width: 20px;
-          height: 20px;
-          border-radius: 50%;
-          background: #F0F2F5;
-          text-align: center;
-          color:rgba($color: #000000, $alpha: 0.65)
-        }
-        .message{
-          color: rgba(0, 0, 0, 0.65);
-        }
-        .form{
-          color: rgba(0, 0, 0, 0.65);
-          margin-left: 12px;
-        }
-        .flex{
-          line-height: 20px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .flex-1{
-          flex:1;
-        }
-        .flex-2{
-          flex:2;
-        }
-        .flex-3{
-          flex:3;
-        }
-        .flex-4{
-          flex:4;
-        }
-        .flex-5{
-          flex:5;
+  background-color: #fff;
+  height: 400px;
+  &-title{
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+  .log{
+    &-item{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 14px;
+      .key-box{
+        justify-content: center;
+      }
+      .key{
+        &.top{
+          background: #314659;
+          color: #FFFFFF;;
         }
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: #F0F2F5;
+        text-align: center;
+        color:rgba($color: #000000, $alpha: 0.65)
+      }
+      .message{
+        color: rgba(0, 0, 0, 0.65);
+      }
+      .form{
+        color: rgba(0, 0, 0, 0.65);
+        margin-left: 12px;
+      }
+      .flex{
+        line-height: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .flex-1{
+        flex:1;
+      }
+      .flex-2{
+        flex:2;
+      }
+      .flex-3{
+        flex:3;
+      }
+      .flex-4{
+        flex:4;
+      }
+      .flex-5{
+        flex:5;
       }
     }
+  }
 }
 </style>