yxk-storeroom-system/src/views/system/logManage/index.vue

<template>
  <div class="app-container lend-container">
    <div class="tab-content">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <ul class="tab-nav">
        <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">登录日志<i /></li>
        <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">操作日志<i /></li>
        <li :class="{ 'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">报警日志<i /></li>
        <li :class="{ 'active-tab-nav': activeIndex == 3 }" @click="changeActiveTab(3)">门禁日志<i /></li>
        <li :class="{ 'active-tab-nav': activeIndex == 4 }" @click="changeActiveTab(4)">接口访问日志<i /></li>
        <!-- 最右侧装饰img -->
        <span class="tab-right-img" />
      </ul>
      <component :is="comName" />

    </div>
  </div>
</template>

<script>
import loginLog from './loginLog/index.vue'
import operateLog from './operateLog/index.vue'
import warnLog from './warnLog/index.vue'
import doorLog from './doorLog/index.vue'
import portLog from './portLog/index.vue'

export default {
  name: 'LogManage',
  components: {
    loginLog,
    operateLog,
    warnLog,
    doorLog,
    portLog
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  computed: {
    comName: function() {
      if (this.activeIndex === 0) {
        return 'loginLog'
      } else if (this.activeIndex === 1) {
        return 'operateLog'
      } else if (this.activeIndex === 2) {
        return 'warnLog'
      } else if (this.activeIndex === 3) {
        return 'doorLog'
      } else if (this.activeIndex === 4) {
        return 'portLog'
      }
      return 'loginLog'
    }
  },
  methods: {
    changeActiveTab(data) {
      this.activeIndex = data
    }
  }
}
</script>

<style lang="scss" scoped>
.lend-container{
  .tab-content{
    position: relative;
    margin-top: 61px;
    border: 1px solid #113d72;
  }
}
.tab-content .tab-nav{
  margin-bottom: 0;
}
</style>