<template>
  <div class="te-footer fh">
    <span class="system">{{ system.name }} {{ system.version }}</span>
    <span class="company">company©2021 {{ system.company }}</span>
    <span class="clock"></span>
  </div>
</template>

<script>
export default {
  name: "TeFooter",
  props: {
    system: {
      type: Object,
      default: () => {
        return {};
      },
    }
   
  },
};
</script>

<style>
/* 页脚内容 */
.te-footer {
  width: 100%;
  background-color: var(--footer-bg-color);
  height: var(--footer-height);
  line-height: var(--footer-height);
  font-size: 0.7rem !important;
  color: var(--footer-color);
}
.te-footer > .system {
  width: 25%;
  display: inline-block;
  padding-left: 10px;
  text-align: left;
}
.te-footer > .company {
  width: 50%;
  display: inline-block;
  text-align: center;
}
.te-footer > .clock {
  width: 25%;
  display: inline-block;
  padding-right: 30px;
  text-align: right;
}
@media screen and (max-width: 1200px) {
  .te-footer.fh {
    display: none;
  }
}
</style>