tabItem.vue 2.03 KB
<template>
  <div class="tab-item" :class="itemClass"  @click="goPage(data.page)">
      <div class="title" :class="titleClass">{{data.title}}</div>
      <slot><div class="text">{{data.num}}</div></slot>
      <i class="cubeic-arrow"></i>
  </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex';

const {mapActions} = createNamespacedHelpers('home/mine');

export default {
  name: 'tabItem',
  props: {
      data: {
          type: Object,
          default: {}
      },
      noLine: {
          type: Boolean,
          default: false
      },
      small: {
          type: Boolean,
          default: false
      },
      grey: {
          type: Boolean,
          default: false
      },
      titleBold: {
          type: Boolean,
          default: false
      },
      titleSmall: {
          type: Boolean,
          default:false
      }
  },
  data() {
    return {
      
    };
  },
  computed: {
      itemClass() {
        return {
          'line': !this.noLine,
          'grey': this.grey,
          'small': this.small
        }
      },
      titleClass() {
          return {
              'title-bold': this.titleBold,
              'title-size': this.titleSmall
          }
      }
    },
  mounted() {
      
  },
  methods: {
    goPage(pagename) {
        if(!pagename) {
            return
        }
        this.$router.push({ name: pagename})
      }
  }

};
</script>

<style lang="scss" scoped>
.tab-item {
    display: flex;
    height: 120px;
    line-height: 120px;
}
.small {
    height: 90px;
    line-height: 90px;
}
.grey {
    background-color: #F5F7F9;
    margin: 0 -40px;
    padding: 0 40px;
}
.line {
    border-bottom: solid 1px #eee;
}
.title {
    flex: 1;
    font-size: 32px;
    color: black;
    min-width: 100px;
}
.title-bold {
    font-weight: bold;
}
.title-size {
    font-size: 28px;
}
.text {
    font-family: 'Alte DIN 1451 Mittelschrift';
    color: black;
    text-align: right;
    font-size: 32px;
}
.cubeic-arrow {
    color: #D8D8D8;
    margin-left: 10px;
    font-size: 32px;
}

</style>