<comment>
    # 组件注释
</comment>
<template>
    <div class="menuBar">
      <el-row :gutter="1" class="layout">
        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" v-for="(value, keys, index) in itemData">
          <div class="grid-content bg-purple">
            <div @click="clickItem(keys)">
              <img class="myImage" :src="itemData[keys].image">
              <div class="tt">{{itemData[keys].name}}</div>
            </div>
          </div>
        </el-col>


      </el-row>


    </div>
</template>

<script>
    //import logo from '../../../static/logo.png'
    export default {
        name: 'menuBar',
        components: {
            //Xgplayer :  () => import('../xgplayer'),
        },
        data() {
            return {
                itemData : [
                  {
                    image : require('../assets/gamehall/game.png'),
                    name : "游戏"
                  },
                  {
                    image : require('../assets/gamehall/pk.png'),
                    name : "比赛"
                  },
                  {
                    image : require('../assets/gamehall/findplay.png'),
                    name : "匹配"
                  },
                  {
                    image : require('../assets/gamehall/my.png'),
                    name : "我的"
                  },
                ]
            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {
          clickItem(index){
            this.$emit("clickItem",index);//自定义事件  传递值“子向父组件传值”
          }
        },
        //计算方法
        computed: {},
        //生命周期 渲染html之前 可以初始化数据
        created() {

        },
        //生命周期 渲染html完毕 可以dom操作
        mounted() {

        },
        //生命周期 离开这个页面
        destroyed() {

        }
    }
</script>

<style scoped>
.menuBar{
  height: 3.5em;
  width: 100%;
  background: white;
  padding-top: 0.5rem;

}
.myImage{
  width: 2rem;
  height: 2rem;
  /*background: aqua;*/
}
.tt{
  margin-top : -0.3rem;
  font-size: 0.5rem;
}

.layout{
  /*position: relative; !*脱离文档流*!*/
  /*top: 50%; !*偏移*!*/
  /*background: orange;*/
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  /*background: #99a9bf;*/
}
.bg-purple {
  /*background: #d3dce6;*/
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  text-align:center
  /*margin: 0 auto; !*水平居中*!*/
  /*position: relative; !*脱离文档流*!*/
  /*top: 50%; !*偏移*!*/
}
</style>
