<template>
  <view>
    <u-grid border @click="click">
      <u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
        <u-icon :customStyle="{ paddingTop: 20 + 'px' }" :name="baseListItem.name" :size="22"></u-icon>
        <text class="grid-text">{{ baseListItem.title }}</text>
      </u-grid-item>
    </u-grid>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      baseList: [
        {
          name: 'photo',
          title: '库存查询'
        },
        {
          name: 'lock',
          title: '锁头'
        },
        {
          name: 'star',
          title: '星星'
        },
        {
          name: 'hourglass',
          title: '沙漏'
        },
        {
          name: 'home',
          title: '首页'
        },
        {
          name: 'star',
          title: '音量'
        }
      ]
    }
  },
  methods: {
    click(index) {
      console.log('🚀 ~ click ~ index:', index)
      uni.navigateTo({
        url: '/pages/inventory/index'
      })
    }
  }
}
</script>

<style lang="scss">
.grid-text {
  font-size: 14px;
  color: #909399;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}
</style>
