<!--
 * @Description: 顶部菜单项
 * @Author: 王晓颖
 * @Date:2020-08-08
 -->
<template>
  <li @click="changeMenu({component: menu.component,curStatus})">
    <a class="gradient-text" :style="{'font-size':size+'rem'}">{{menu.label}}</a>
  </li>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    size: {
      type: String,
      default: '0.12'
    },
    menu: {
      type: Object,
      required: true
    },
    curStatus: {
      type: Number,
      required: true
    }
  },
  methods: {
    changeMenu (params) {
      this.$emit('click', params)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../assets/css/variable.scss';
  li{
    cursor: pointer;
    padding: .08rem .14rem;
    color: #fff;
    background: url("../../assets/images/menu-bg.png") no-repeat;
    background-size: 100% 100%;
    margin-right: .05rem;
  }
  li a{
    font-size: .12rem;
    font-weight: bolder;
  }
</style>