88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class="fixed-bottom p-l-5" :class="maxWidth">
|
||
|
|
<el-button @click="handleOpenBlog" class="l p-3" type="text" size="mini" icon="iconfont icon-chuangkoufangda"
|
||
|
|
circle></el-button>
|
||
|
|
<div class="l p-l-10" v-if="newLog">
|
||
|
|
<span class="l m-t-5 m-r-5 logDot" :style="{ background: newLog.color }"></span>
|
||
|
|
<span>{{ newLog.timestamp | parseTime('{h}:{i}:{s}') }}</span>
|
||
|
|
<span class="m-l-10">{{ newLog.content }}</span>
|
||
|
|
</div>
|
||
|
|
<el-drawer title="程序日志" :modal-append-to-body="false" :visible.sync="drawer" direction="btt" size="50%">
|
||
|
|
<el-timeline :reverse="true" class="p-l-50 p-r-50">
|
||
|
|
<el-timeline-item v-for="(activity, index) in log" :key="index" :icon="activity.icon" :type="activity.type"
|
||
|
|
:color="activity.color" :size="activity.size"
|
||
|
|
:timestamp="activity.timestamp | parseTime('{y}-{m}-{d} {h}:{i}:{s}')">
|
||
|
|
{{ activity.content }}
|
||
|
|
</el-timeline-item>
|
||
|
|
</el-timeline>
|
||
|
|
</el-drawer>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { parseTime } from '@/utils'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'BlogBox',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
drawer: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
maxWidth () {
|
||
|
|
return this.$store.state.app.isCollapse ? 'min' : 'max'
|
||
|
|
},
|
||
|
|
log () {
|
||
|
|
return this.$store.state.logList
|
||
|
|
},
|
||
|
|
newLog () {
|
||
|
|
return this.$store.state.logList[this.$store.state.logList.length - 1]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleOpenBlog () {
|
||
|
|
this.drawer = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
},
|
||
|
|
destroyed () {
|
||
|
|
},
|
||
|
|
filters: {
|
||
|
|
parseTime
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.fixed-bottom {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 1002;
|
||
|
|
line-height: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background: #F2F6FC;
|
||
|
|
-webkit-box-shadow: 0 0px 4px rgba(0, 21, 41, 0.3);
|
||
|
|
box-shadow: 0 0px 4px rgba(0, 21, 41, 0.3);
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max {
|
||
|
|
width: calc(100% - 210px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.min {
|
||
|
|
width: calc(100% - 60px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.logDot {
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
border-radius: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
</style>
|