|
|
@@ -15,7 +15,7 @@
|
|
|
<Search @getSearchData="getSearchData" :isTitle="false" @clearSearchData="clearSearchData" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="interfaceLog_content">
|
|
|
+ <div class="interfaceLog_content flex-wrap">
|
|
|
<el-table :data="tableData" class="table" border style="width: 100%">
|
|
|
<el-table-column prop="action" label="动作">
|
|
|
</el-table-column>
|
|
|
@@ -33,6 +33,18 @@
|
|
|
<el-table-column prop="details" label="详情">
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ <div class="interfaceLog_content_progress">
|
|
|
+ <el-timeline>
|
|
|
+ <el-timeline-item v-for="(item,index) in preDatas" :key="index">
|
|
|
+ <div class="list">
|
|
|
+ <div class="list_status"></div>
|
|
|
+ <div class="list_title">{{item.title}}</div>
|
|
|
+ <div class="list_code">{{item.code}}</div>
|
|
|
+ <div class="list_time">{{item.time}}</div>
|
|
|
+ </div>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -46,7 +58,8 @@ export default {
|
|
|
return {
|
|
|
timeStart: '',
|
|
|
timeEnd: '',
|
|
|
- tableData: []
|
|
|
+ tableData: [],
|
|
|
+ preDatas: []
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
@@ -59,8 +72,16 @@ export default {
|
|
|
result: i % 2 == 0 ? true : false,
|
|
|
details: '数据格式不正确'
|
|
|
};
|
|
|
+ const obj = {
|
|
|
+ title: '更新 Github 模板',
|
|
|
+ code: '989665554',
|
|
|
+ time: '2022-4-26 15:48:55',
|
|
|
+ id: i
|
|
|
+ };
|
|
|
this.tableData.push(element)
|
|
|
+ this.preDatas.push(obj)
|
|
|
}
|
|
|
+ this.preDatas.splice(5, 10)
|
|
|
},
|
|
|
mounted () {
|
|
|
document.querySelector('.interfaceLog_head_time_start .el-input__prefix i').remove()
|
|
|
@@ -114,6 +135,65 @@ export default {
|
|
|
color: #df4545;
|
|
|
}
|
|
|
}
|
|
|
+ &_progress {
|
|
|
+ width: 368px;
|
|
|
+ background: #fafcff;
|
|
|
+ margin-left: 8px;
|
|
|
+ padding: 13px 32px;
|
|
|
+ ::v-deep .el-timeline {
|
|
|
+ padding: 0;
|
|
|
+ .el-timeline-item {
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ height: 1px;
|
|
|
+ width: calc(100% + 4px);
|
|
|
+ background-color: #dfe3ea;
|
|
|
+ left: 28px;
|
|
|
+ bottom: 20px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ &::after {
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-timeline-item__node--normal {
|
|
|
+ z-index: 2;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ left: 0px;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ &_status {
|
|
|
+ position: absolute;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background: #2d67e3;
|
|
|
+ left: -5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ &_title,
|
|
|
+ &_code {
|
|
|
+ margin-bottom: 7px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101116;
|
|
|
+ }
|
|
|
+ &_time {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Helvetica;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #afb4bf;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
