|
|
@@ -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>
|
