lg_frontend/components/TabItem.vue

<template>
  <div class="TabItem" :class="{ selected }" v-on="$listeners" v-bind="$attrs">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'TabItem',
  components: {},
  mixins: [],
  props: {
    selected: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {
  },
  beforeDestroy() {
  },
  mounted() {
  },
  methods: {},
}
</script>
<style lang='less' scoped>
@import "../assets/styles/mixin";
.TabItem {
  .bg("~/assets/images/sel.png");
  width: 64px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  font-family: MicrosoftYaHei;
  font-size: 12px;
  color: #08EBF5;
  letter-spacing: 0;
  text-align: center;
  font-weight: 400;
  line-height: 23px;
  cursor: pointer;
  &.selected {
    .bg("~/assets/images/sel备份.png");
    color: #08EBF5;
  }
  &:hover {
    .bg("~/assets/images/sel备份.png");
    color: #08EBF5;
  }
}
</style>