food/src/views/layout/components/BlogBox.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 flex" 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="content m-l-10">{{ newLog.content }}</span>
    </div>
    <el-drawer :modal-append-to-body="false" :visible.sync="drawer" direction="btt" size="50%">
      <template slot="title">
        <div>
          <i class="l f-s-18 vm iconfont icon-zengjia m-r-10"></i>
          <h3>
            程序日志
          </h3>
        </div>
      </template>
      <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);
}

/* 竖屏模式样式 */
@media (orientation: portrait) {
  .min {
    width: calc(100% - 0px);
  }
}

.logDot {
  width: 14px;
  height: 14px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}

.timestamp,
.content {
  display: inline-block;
  /* 确保元素可以应用宽度 */
  max-width: 60vw;
  /* 根据需要设置宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>